/* ==== MyCosmetic · витрина WooCommerce (редизайн, mobile-first) ====
Токены из app.css/theme.json: Jost, синий #5B86D6 (кнопки), ink #16161A (текст),
розовый #C76A8A (бренд-капс), pill-радиусы. */
/* Боковые отступы контента. Ширина — как у шапки и главной (--mc-wrap):
без ограничения каталог растягивался на весь монитор, и на широком экране
карточка вырастала до 700+ px, а фото товара — до 720 px. */
.mc-shop, .mc-product {
padding-left: 16px; padding-right: 16px; box-sizing: border-box;
max-width: var(--mc-wrap, 1320px); margin-inline: auto;
}
/* Вертикальные отступы каталога и выдачи поиска. Раньше были инлайн-стилем в
шаблонах; после выноса раскладки в parts/shop-layout.html держим их здесь —
не полагаемся на то, что блок template-part прокинет spacing-стиль. */
.mc-shop { padding-top: 24px; padding-bottom: 64px; }
@media (min-width: 768px) { .mc-shop, .mc-product { padding-left: 24px; padding-right: 24px; } }
/* ---- Шапка каталога (редизайн): крошки + заголовок + подзаголовок + сортировка ---- */
.mc-cat__crumbs { font-size: 13px; color: #A9929B; margin: 0 0 14px; }
.mc-cat__crumbs a { color: var(--wp--preset--color--gray); text-decoration: none; }
.mc-cat__crumbs a:hover { color: var(--wp--preset--color--pink); }
.mc-cat__crumbs span { color: var(--wp--preset--color--ink); }
.mc-cat__head { display: flex; flex-direction: column; gap: 14px; margin: 0 0 24px; }
.mc-cat__title { font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: -.02em;
font-size: clamp(30px, 6vw, 46px); line-height: 1.05; margin: 0; color: var(--wp--preset--color--ink); }
.mc-cat__sub { font-size: 14.5px; color: var(--wp--preset--color--gray); font-weight: 300; margin: 10px 0 0; }
.mc-cat__sub b { font-weight: 600; color: var(--wp--preset--color--ink); }
.mc-cat__sort { display: flex; align-items: center; gap: 10px; }
.mc-cat__sort-label { font-size: 13.5px; color: var(--wp--preset--color--gray); flex: none; }
.mc-cat__sort .woocommerce-ordering { margin: 0; }
.mc-shop .woocommerce-result-count { color: var(--wp--preset--color--gray); font-size: 0.9rem; margin: 0 0 12px; }
.mc-shop .woocommerce-ordering select {
border: 1px solid var(--mc-line); border-radius: var(--mc-pill); padding: 9px 16px;
font-family: 'Jost', sans-serif; color: var(--wp--preset--color--ink); background: #fff;
}
@media (min-width: 768px) {
.mc-cat__head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.mc-cat__sort { align-self: flex-end; }
}
/* ---- SEO-текст под каталогом ---- */
.mc-seo { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--mc-line); }
.mc-seo__body { max-width: 940px; }
.mc-seo h2 { font-family: 'Jost', sans-serif; font-size: clamp(21px, 4vw, 27px); font-weight: 600; letter-spacing: -.02em; margin: 0 0 16px; color: var(--wp--preset--color--ink); }
.mc-seo h3 { font-family: 'Jost', sans-serif; font-size: 18px; font-weight: 600; margin: 26px 0 12px; color: var(--wp--preset--color--ink); }
.mc-seo p { font-size: 15px; line-height: 1.78; color: var(--wp--preset--color--gray); font-weight: 300; margin: 0 0 16px; }
.mc-seo p:last-child { margin-bottom: 0; }
/* ---- Сетка товаров: 2 колонки на мобиле (каталог + похожие на товаре) ---- */
.mc-shop ul.products,
.mc-product ul.products {
list-style: none !important; margin: 0 !important; padding: 0 !important;
display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (min-width: 768px) {
.mc-shop ul.products { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.mc-product ul.products { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}
.mc-shop ul.products::before, .mc-shop ul.products::after,
.mc-product ul.products::before, .mc-product ul.products::after { content: none !important; display: none !important; }
.mc-shop ul.products li.product, .mc-shop ul.products li,
.mc-product ul.products li.product, .mc-product ul.products li {
width: auto !important; max-width: none !important; min-width: 0 !important;
margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important;
}
/* ---- Карточка ---- */
.mc-card {
display: flex; flex-direction: column; text-align: left;
border: 1px solid var(--mc-line); border-radius: 20px; overflow: hidden; background: #fff;
transition: box-shadow .22s, transform .22s;
}
.mc-card:hover { box-shadow: var(--mc-shadow); transform: translateY(-4px); }
.mc-card__media { position: relative; background: #fff; overflow: hidden; }
/* Ссылка-обёртка фото. Блочная — иначе у inline-элемента под картинкой
остаётся зазор от line-height и низ карточки «дышит». */
.mc-card__medialink { display: block; }
.mc-card__media img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: none; max-height: none;
box-sizing: border-box; padding: 18px; object-fit: contain; object-position: center; mix-blend-mode: multiply; }
/* Бейджи Хит / Новинка */
.mc-card__badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: #fff; padding: 5px 11px; border-radius: 20px;
}
.mc-card__badge--hit { background: var(--wp--preset--color--orange, #E8A765); }
/* На зелёном белый текст читается плохо — здесь тёмный. */
.mc-card__badge--new { background: var(--wp--preset--color--green, #6FB97F); color: var(--wp--preset--color--ink, #16161A); }
.mc-card__wish {
position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0;
background: rgba(255,255,255,.85); border: none; border-radius: 50%; box-shadow: var(--mc-shadow-sm);
display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--wp--preset--color--gray);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: color .2s;
}
.mc-card__wish:hover { color: var(--wp--preset--color--pink); }
.mc-card__body { padding: 14px 15px 16px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.mc-card__brand { font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--wp--preset--color--pink); }
.mc-card__name {
font-size: 0.94rem; font-weight: 500; color: var(--wp--preset--color--ink);
margin: 0; line-height: 1.35; text-decoration: none; flex: 1;
}
.mc-card__foot { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: auto; }
.mc-card__price { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1.18rem; color: var(--wp--preset--color--ink); }
.mc-card__price del { color: var(--wp--preset--color--gray); font-weight: 400; font-size: .8em; margin-right: 4px; }
.mc-card__price ins { text-decoration: none; }
/* Кнопка «в корзину» — на всю ширину */
.mc-card .mc-card__add.button {
display: flex !important; align-items: center; justify-content: center;
box-sizing: border-box !important; width: 100% !important; max-width: 100% !important;
min-height: 42px; margin: 0 !important; padding: 11px 14px !important;
border: none !important; border-radius: var(--mc-pill) !important; box-shadow: none;
background: var(--wp--preset--color--blue) !important; color: #fff !important;
font-family: 'Jost', sans-serif; font-weight: 500; font-size: .9rem; line-height: 1.1 !important;
text-align: center; white-space: normal; overflow-wrap: anywhere; transition: background .2s;
}
.mc-card .mc-card__add.button:hover { background: var(--mc-blue-dark, #4a72c0) !important; }
.mc-card .mc-card__add.button.added { background: var(--wp--preset--color--green, #6FB97F) !important; }
.mc-card .mc-card__add.loading { opacity: .65; }
.mc-card a.added_to_cart { display: none !important; }
/* ==== Страница товара ==== */
/* Хлебные крошки (нативные WooCommerce) в стиле редизайна */
.mc-product .woocommerce-breadcrumb { font-size: 13px; color: #A9929B; margin: 0 0 22px; }
.mc-product .woocommerce-breadcrumb a { color: var(--wp--preset--color--gray); text-decoration: none; }
.mc-product .woocommerce-breadcrumb a:hover { color: var(--wp--preset--color--pink); }
.mc-product div.product { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 900px) { .mc-product div.product { grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; } }
/* Галерея — товар на белой подложке. Раньше была розовая (#FCF5F8), но у части
фото фон прозрачный, и из-за mix-blend-mode: multiply подложка проступала
сквозь сам продукт, подкрашивая упаковку. Та же причина, по которой белыми
сделали карточки каталога (см. home.css, .mc-pcard__media). */
.mc-product .woocommerce-product-gallery { margin: 0; float: none !important; width: 100% !important; }
.mc-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper {
background: #fff; border-radius: 24px; padding: clamp(28px, 5vw, 50px); margin: 0;
min-height: 420px; display: flex; align-items: center; justify-content: center;
}
.mc-product .woocommerce-product-gallery__image { width: 100%; text-align: center; }
.mc-product .woocommerce-product-gallery__image a { display: inline-block; }
.mc-product .woocommerce-product-gallery img:not(.zoomImg) {
width: auto !important; max-width: 100%; max-height: 520px; margin: 0 auto;
border-radius: 0; background: transparent; border: 0; mix-blend-mode: multiply;
}
/* Зум по наведению: НЕ применяем multiply/прозрачность (иначе увеличенное фото
просвечивает и его не разобрать) и не ограничиваем размер — им управляет jquery.zoom. */
.mc-product .woocommerce-product-gallery img.zoomImg {
background: #fff !important; mix-blend-mode: normal !important;
max-width: none !important; max-height: none !important; border-radius: 0;
}
.mc-product .woocommerce-product-gallery__trigger { top: 20px; right: 20px; }
.mc-product .flex-control-thumbs { margin: 14px 0 0; padding: 0; display: flex; gap: 12px; list-style: none; }
.mc-product .flex-control-thumbs li { width: 74px; }
.mc-product .flex-control-thumbs img { border: 1.5px solid var(--mc-line); border-radius: 14px; padding: 8px; background: #fff; mix-blend-mode: normal; }
/* Информация */
.mc-product .summary.entry-summary { margin: 0 !important; width: 100% !important; float: none !important; }
.mc-product__brand { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500;
letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--pink); margin: 0 0 8px; }
.mc-product .product_title {
font-family: 'Jost', sans-serif; font-weight: 600; color: var(--wp--preset--color--ink);
font-size: clamp(26px, 4.5vw, 34px); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 16px;
}
.mc-product .summary .price,
.mc-product .summary .price ins { font-family: 'Jost', sans-serif; font-weight: 600;
font-size: clamp(26px, 4.5vw, 34px); letter-spacing: -.02em; color: var(--wp--preset--color--ink); text-decoration: none; }
.mc-product .summary .price del { font-size: .55em; font-weight: 400; color: var(--wp--preset--color--gray); margin-right: 8px; }
.mc-product form.cart { display: flex; align-items: center; gap: 14px; margin: 22px 0 0; flex-wrap: wrap; }
.mc-product .quantity input.qty {
width: 76px; height: 52px; text-align: center; border: 1px solid var(--mc-line);
border-radius: var(--mc-pill); font-family: 'Jost', sans-serif; font-size: 16px; font-weight: 500; background: #fff;
}
.mc-product .single_add_to_cart_button.button {
background: var(--wp--preset--color--blue); border: none; border-radius: var(--mc-pill);
padding: 16px 34px; font-weight: 500; font-size: 15.5px; font-family: 'Jost', sans-serif;
color: #fff; box-shadow: 0 12px 30px rgba(91,134,214,.22); transition: background .2s, transform .2s;
}
.mc-product .single_add_to_cart_button.button:hover { background: var(--mc-blue-dark, #4a72c0); transform: translateY(-1px); }
/* Блок доверия */
.mc-product__trust { display: flex; flex-wrap: wrap; gap: 18px 22px; margin: 26px 0 0;
padding-top: 24px; border-top: 1px solid var(--mc-line); }
.mc-product__trust-item { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--wp--preset--color--gray); }
.mc-product__trust-item svg { color: var(--wp--preset--color--blue); flex: none; }
/* Мета (категория / бренд) */
.mc-product .product_meta { margin: 24px 0 0; font-size: 13px; color: var(--wp--preset--color--gray); }
.mc-product .product_meta > span { display: block; margin-bottom: 6px; }
.mc-product .product_meta a { color: var(--wp--preset--color--pink); text-decoration: none; }
/* Вкладки: Описание / Отзывы */
.mc-product .woocommerce-tabs { grid-column: 1 / -1; margin-top: 56px; }
.mc-product .woocommerce-tabs ul.tabs { list-style: none; margin: 0 0 26px; padding: 0 0 2px;
display: flex; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--mc-line); }
.mc-product .woocommerce-tabs ul.tabs::before { display: none; }
.mc-product .woocommerce-tabs ul.tabs li { background: none; border: 0; margin: 0; padding: 0; }
.mc-product .woocommerce-tabs ul.tabs li::before,
.mc-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.mc-product .woocommerce-tabs ul.tabs li a {
position: relative; display: block; padding: 12px 2px; margin-right: 26px;
font-family: 'Jost', sans-serif; font-weight: 500; font-size: 15.5px;
color: var(--wp--preset--color--gray); text-decoration: none; background: none; transition: color .2s;
}
.mc-product .woocommerce-tabs ul.tabs li a:hover { color: var(--wp--preset--color--ink); }
.mc-product .woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--ink); }
.mc-product .woocommerce-tabs ul.tabs li.active a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
background: var(--wp--preset--color--pink); border-radius: 2px;
}
.mc-product .woocommerce-tabs .panel { max-width: 940px; }
.mc-product .woocommerce-tabs .panel h2 { font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: -.01em; font-size: 22px; color: var(--wp--preset--color--ink); }
.mc-product .woocommerce-tabs .panel p,
.mc-product .woocommerce-tabs .panel li { font-size: 15px; line-height: 1.78; color: var(--wp--preset--color--gray); font-weight: 300; }
/* Таблица характеристик */
.mc-specs { width: 100%; max-width: 560px; border-collapse: collapse; margin: 4px 0 0; }
.mc-specs th, .mc-specs td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--mc-line);
font-size: 15px; line-height: 1.5; vertical-align: top; }
.mc-specs th { width: 42%; font-family: 'Jost', sans-serif; font-weight: 500; color: var(--wp--preset--color--gray); }
.mc-specs td { color: var(--wp--preset--color--ink); font-weight: 400; }
.mc-specs tr:last-child th, .mc-specs tr:last-child td { border-bottom: 0; }
/* Похожие товары */
.mc-product .related.products, .mc-product .upsells.products { grid-column: 1 / -1; margin-top: 72px; }
.mc-product .related.products > h2, .mc-product .upsells.products > h2 {
font-family: 'Jost', sans-serif; font-weight: 600; letter-spacing: -.02em;
font-size: clamp(24px, 4vw, 30px); color: var(--wp--preset--color--ink); margin: 0 0 26px;
}
/* Sticky add-to-cart — только мобайл */
.mc-sticky-atc { display: none; }
@media (max-width: 768px) {
.mc-sticky-atc {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-top: 1px solid var(--mc-line); box-shadow: 0 -6px 20px rgba(22,22,26,.08);
}
.mc-sticky-atc__price { font-family: 'Jost', sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--wp--preset--color--ink); }
.mc-sticky-atc__btn {
flex: 1; max-width: 60%; border: none; border-radius: var(--mc-pill); padding: 14px;
background: var(--wp--preset--color--blue); color: #fff; font-weight: 500; font-size: .95rem; font-family: 'Jost', sans-serif;
}
/* Режим C — бар ведёт в Telegram */
.mc-sticky-atc--tg .mc-sticky-atc__btn,
.mc-sticky-atc--tg .mc-btn { background: var(--wp--preset--color--telegram); }
/* Нет в наличии — вместо кнопки спокойная подпись, чтобы её не тянуло нажать */
.mc-sticky-atc__oos {
flex: 1; max-width: 60%; text-align: center; padding: 14px;
border-radius: var(--mc-pill); background: var(--mc-line, #EEE);
color: var(--wp--preset--color--gray); font-size: .95rem; font-weight: 500;
}
body.single-product .mc-product { padding-bottom: 80px; }
}
/* ==== Корзина / Оформление (блоки Cart/Checkout) ==== */
.wc-block-cart, .wc-block-checkout { font-family: 'Jost', sans-serif; }
.wp-block-woocommerce-cart .wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-button,
.wc-block-components-button.contained {
background: var(--wp--preset--color--blue) !important; border-radius: var(--mc-pill) !important;
}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount { color: var(--wp--preset--color--ink); font-family: 'Jost', sans-serif; font-weight: 600; }
.wc-block-components-text-input input, .wc-block-components-text-input textarea {
border-radius: 14px !important;
}
/* ==== Личный кабинет ==== */
.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation li { border-radius: 12px; margin-bottom: 6px; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active { background: var(--wp--preset--color--pink-soft); }
.woocommerce-account .woocommerce-MyAccount-navigation a {
display: block; padding: 11px 16px; color: var(--wp--preset--color--ink);
text-decoration: none; font-weight: 500;
}
.woocommerce-account .woocommerce-Button.button,
.woocommerce-account .button {
background: var(--wp--preset--color--blue); border-radius: var(--mc-pill); border: none;
}
@media (min-width: 768px) {
.woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 28%; }
.woocommerce-account .woocommerce-MyAccount-content { float: right; width: 68%; }
}
/* ==== Фильтры каталога (категории + бренды) ==== */
.mc-shop__layout { display: block; }
.mc-shop__aside { margin: 0 0 18px; }
.mc-filters { border: 1px solid var(--mc-line); border-radius: var(--mc-radius); background: #fff; overflow: hidden; }
.mc-filters__cb { display: none; }
.mc-filters__toggle {
cursor: pointer; list-style: none; padding: 13px 18px; font-weight: 600;
color: var(--wp--preset--color--ink); display: flex; align-items: center; gap: 8px;
}
.mc-filters__toggle::after { content: "+"; margin-left: auto; font-size: 1.1rem; color: var(--wp--preset--color--gray); }
.mc-filters__cb:checked ~ .mc-filters__toggle::after { content: "–"; }
.mc-filters__cb:checked ~ .mc-filters__toggle { border-bottom: 1px solid var(--mc-line); }
/* По умолчанию (мобайл) тело свёрнуто; раскрывается по чекбоксу. */
.mc-filters__body { display: none; padding: 8px 16px 14px; }
.mc-filters__cb:checked ~ .mc-filters__body { display: block; }
.mc-filters__group + .mc-filters__group { margin-top: 14px; }
.mc-filters__title {
font-family: 'Jost', sans-serif; font-size: .8rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 1px; color: var(--wp--preset--color--pink); margin: 10px 0 6px;
}
.mc-filters__list { list-style: none; margin: 0; padding: 0; }
.mc-filters__item a {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 12px; border-radius: 10px; color: var(--wp--preset--color--ink);
text-decoration: none; font-size: .95rem; font-weight: 500;
}
.mc-filters__item a:hover { background: var(--mc-pink-1, #FCF0F5); }
.mc-filters__item.is-active a { background: var(--wp--preset--color--pink-soft); color: var(--wp--preset--color--pink-deep, #8A3A52); }
.mc-filters__count { font-size: .75rem; font-weight: 600; color: var(--wp--preset--color--gray); }
/* Фильтры каталога: чекбоксы (мультивыбор) + частичное сворачивание */
.mc-catalogfilter { margin: 0; }
/* wpautop может обернуть скрытые инпуты формы в — гасим лишний бокс. */
.mc-catalogfilter > p { display: contents; }
.mc-brandfilter { margin: 0; }
.mc-brandfilter__label {
display: flex; align-items: center; gap: 9px;
padding: 7px 10px; border-radius: 10px; cursor: pointer;
font-size: .95rem; font-weight: 500; color: var(--wp--preset--color--ink);
}
.mc-brandfilter__label:hover { background: var(--mc-pink-1, #FCF0F5); }
.mc-brandfilter__label input {
width: 17px; height: 17px; flex: 0 0 auto; margin: 0; cursor: pointer;
accent-color: var(--wp--preset--color--pink, #C76A8A);
}
.mc-brandfilter__name { flex: 1; }
/* wpautop иногда оборачивает скрытый чекбокс в
— гасим лишний бокс,
а тоггл вешаем на :has() (не зависит от позиции чекбокса в DOM). */
.mc-brandfilter p { display: contents; }
.mc-brandfilter__item--more { display: none; }
.mc-filters__group:has(.mc-brandfilter__allcb:checked) .mc-brandfilter__item--more { display: block; }
.mc-filters__group:has(.mc-brandfilter__allcb:checked) .mc-brandfilter__list { max-height: 380px; overflow-y: auto; }
.mc-brandfilter__more {
display: inline-block; margin: 8px 0 2px; padding: 4px 10px; cursor: pointer;
font-size: .85rem; font-weight: 600; color: var(--wp--preset--color--pink, #C76A8A);
}
.mc-brandfilter__more:hover { text-decoration: underline; }
.mc-brandfilter__more .is-hide { display: none; }
.mc-filters__group:has(.mc-brandfilter__allcb:checked) .mc-brandfilter__more .is-show { display: none; }
.mc-filters__group:has(.mc-brandfilter__allcb:checked) .mc-brandfilter__more .is-hide { display: inline; }
.mc-brandfilter__actions { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.mc-brandfilter__apply {
border: none; cursor: pointer; border-radius: 30px; padding: 10px 22px;
background: var(--mc-blue, #5B86D6); color: #fff; font-family: inherit; font-weight: 600; font-size: .9rem;
transition: background .2s;
}
.mc-brandfilter__apply:hover { background: var(--mc-blue-dark, #4a72c0); }
.mc-brandfilter__reset { font-size: .88rem; color: var(--wp--preset--color--gray); text-decoration: none; white-space: nowrap; }
.mc-brandfilter__reset:hover { color: var(--wp--preset--color--pink, #C76A8A); }
@media (min-width: 992px) {
.mc-shop__layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
/* Aside — только «прилипание» к верху; высоту и скролл держит сама карточка фильтра. */
.mc-shop__aside { margin: 0; position: sticky; top: 88px; }
/* Фильтр — самостоятельный блок со своим скроллом: карточка ограничена высотой экрана
(definite calc, а не % — потому и резолвится), тело прокручивается ВНУТРИ, а не тянет
за собой всю страницу. Кнопка «Применить» всегда на виду (sticky снизу). */
.mc-filters {
display: flex; flex-direction: column;
max-height: calc(100vh - 108px);
}
/* На десктопе фильтры — постоянный сайдбар: тело всегда раскрыто, тоггл-заголовок. */
.mc-filters__toggle { pointer-events: none; border-bottom: 1px solid var(--mc-line); flex: 0 0 auto; }
.mc-filters__toggle::after { display: none; }
/* Группы прокручиваются внутри карточки — листать нужно только сам фильтр. */
.mc-filters__body { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
/* Кнопки «Применить / Сбросить» закреплены снизу карточки и всегда видны. */
.mc-catalogfilter .mc-brandfilter__actions {
position: sticky; bottom: 0; z-index: 1;
margin: 14px -16px -14px; padding: 13px 16px;
background: #fff; border-top: 1px solid var(--mc-line);
}
}
/* ==========================================================================
Поиск: выдача и пустое состояние
========================================================================== */
/* Выдача поиска товаров идёт без сайдбара фильтров (фильтровать нечего — набор
результатов уже задан запросом), поэтому контент занимает всю ширину. */
.mc-shop--search .mc-shop__content { width: 100%; }
.mc-empty {
max-width: 620px; margin: 40px auto 24px; padding: 8px 16px 0;
text-align: center; color: var(--wp--preset--color--gray, #6B7186);
}
.mc-empty__ico { color: var(--wp--preset--color--pink, #C76A8A); opacity: .55; margin-bottom: 14px; }
.mc-empty__title {
margin: 0 0 10px; font-size: 1.35rem; font-weight: 600; line-height: 1.3;
color: var(--wp--preset--color--ink, #16161A);
}
.mc-empty__text { margin: 0 auto 20px; max-width: 46ch; font-size: .95rem; line-height: 1.6; }
.mc-empty__hints {
list-style: none; margin: 0 auto 24px; padding: 16px 18px; max-width: 100%;
text-align: left; border: 1px solid var(--mc-line, #E9E5E2); border-radius: 14px;
font-size: .9rem; line-height: 1.55;
}
.mc-empty__hints li { position: relative; padding-left: 20px; }
.mc-empty__hints li + li { margin-top: 9px; }
/* Маркер — точка на псевдоэлементе, чтобы не тащить эмодзи/картинки. */
.mc-empty__hints li::before {
content: ""; position: absolute; left: 6px; top: .62em;
width: 5px; height: 5px; border-radius: 50%;
background: var(--wp--preset--color--pink, #C76A8A);
}
.mc-empty__search { display: flex; gap: 8px; margin: 0 0 18px; }
.mc-empty__search input[type="search"] {
flex: 1 1 auto; min-width: 0; padding: 11px 16px;
border: 1px solid var(--mc-line, #E9E5E2); border-radius: 30px;
font-family: inherit; font-size: .95rem; background: #fff;
}
.mc-empty__search input[type="search"]:focus {
outline: none; border-color: var(--mc-blue, #5B86D6);
}
.mc-empty__search button {
flex: 0 0 auto; border: none; cursor: pointer; border-radius: 30px; padding: 11px 24px;
background: var(--mc-blue, #5B86D6); color: #fff;
font-family: inherit; font-weight: 600; font-size: .92rem;
transition: background .2s;
}
.mc-empty__search button:hover { background: var(--mc-blue-dark, #4a72c0); }
.mc-empty__actions {
display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
@media (max-width: 560px) {
.mc-empty { margin-top: 24px; }
.mc-empty__title { font-size: 1.15rem; }
.mc-empty__search { flex-direction: column; }
/* box-sizing — по той же причине, что и у кнопки Telegram в home.css:
без него боковые отступы прибавляются к ширине и кнопка вылезает. */
.mc-empty__search button { width: 100%; box-sizing: border-box; }
.mc-empty__actions .mc-btn { width: 100%; box-sizing: border-box; text-align: center; }
}
/* Общий (не товарный) поиск — search.html: простой список записей. */
.mc-searchlist { list-style: none; margin: 24px 0 0; padding: 0; }
.mc-searchlist__item { padding: 18px 0; border-bottom: 1px solid var(--mc-line, #E9E5E2); }
.mc-searchlist__title { margin: 0 0 6px; font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.mc-searchlist__title a { text-decoration: none; color: var(--wp--preset--color--ink, #16161A); }
.mc-searchlist__title a:hover { color: var(--wp--preset--color--pink, #C76A8A); }
.mc-searchlist__excerpt {
margin: 0; font-size: .92rem; line-height: 1.55;
color: var(--wp--preset--color--gray, #6B7186);
}
/* ==== Пагинация каталога ====
Своих стилей у неё не было — WooCommerce отдавал голый список, и он
прижимался к последнему ряду карточек. Отделяем воздухом и приводим к
виду остальных элементов: пилюли, та же линия, тот же шрифт.
Селекторы начинаются с `.woocommerce nav`, потому что штатная таблица
стилей WooCommerce задаёт то же самое через `.woocommerce nav.woocommerce-
pagination ul li` — она весомее короткого селектора и выигрывала. Из-за
этого кнопки слипались в общую рамку, а текущая страница была серой. */
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination { margin: 44px 0 8px; }
.woocommerce nav.woocommerce-pagination ul.page-numbers,
.woocommerce-pagination ul.page-numbers {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
list-style: none; margin: 0; padding: 0; border: none;
}
.woocommerce nav.woocommerce-pagination ul.page-numbers li,
.woocommerce-pagination ul.page-numbers li { border: none; margin: 0; float: none; overflow: visible; }
.woocommerce nav.woocommerce-pagination .page-numbers,
.woocommerce-pagination .page-numbers {
display: inline-flex; align-items: center; justify-content: center;
min-width: 42px; height: 42px; padding: 0 14px;
border: 1px solid var(--mc-line, #E9E5E2); border-radius: var(--mc-pill, 999px);
font-family: 'Jost', sans-serif; font-size: .95rem; font-weight: 500;
color: var(--wp--preset--color--ink, #16161A); text-decoration: none;
background: #fff; transition: border-color .2s, color .2s, background .2s;
}
/* Наведение и текущая страница описаны у WooCommerce через `ul li a:hover` и
`ul li span.current` — это тяжелее остальных её правил, поэтому здесь
селектор длиннее, чем в соседних блоках. */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:hover {
background: #fff;
border-color: var(--wp--preset--color--pink, #C76A8A);
color: var(--wp--preset--color--pink, #C76A8A);
}
.woocommerce nav.woocommerce-pagination ul li span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li a.page-numbers.current,
.woocommerce-pagination .page-numbers.current {
background: var(--wp--preset--color--blue, #5B7FD4); border-color: transparent; color: #fff;
}
/* Многоточие — не кнопка: без рамки и без наведения */
.woocommerce nav.woocommerce-pagination .page-numbers.dots,
.woocommerce-pagination .page-numbers.dots {
border-color: transparent; background: none; min-width: 24px; padding: 0 4px;
color: var(--wp--preset--color--gray, #6B7186);
}
@media (max-width: 560px) {
.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination { margin-top: 32px; }
.woocommerce nav.woocommerce-pagination .page-numbers,
.woocommerce-pagination .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: .9rem; }
}
/* Пометка отсутствия в карточке каталога. Приглушённая: это уточнение,
а не призыв к действию — кнопка рядом должна оставаться заметнее. */
.mc-card__stock {
display: inline-flex; align-self: flex-start; padding: 4px 10px;
border-radius: var(--mc-pill, 999px); background: var(--mc-line, #EEE);
font-size: .78rem; font-weight: 500; color: var(--wp--preset--color--gray, #6B7186);
}
/* ==== Корзина (классический шорткод) ==== */
/* Шаблоны корзины и оформления задают только вертикальные отступы, и
содержимое упиралось в края экрана. */
.mc-cart-main, .mc-checkout-main {
padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px);
}
/* Разметка — штатная таблица WooCommerce. На десктопе таблица уместна, а на
узком экране WooCommerce складывает её в столбик с подписями «Товар:»,
«Цена:», «Подытог:» — выглядит как выгрузка из базы. Ниже на мобиле каждая
строка превращается в карточку; десктопная таблица не трогается. */
.woocommerce-cart-form table.shop_table.cart {
border: 1px solid var(--mc-line, #F0E6EC); border-radius: var(--mc-radius, 24px);
border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff;
}
.woocommerce-cart-form table.shop_table.cart th {
background: #fff; border-bottom: 1px solid var(--mc-line, #F0E6EC);
font-weight: 600; font-size: .85rem; letter-spacing: .02em;
color: var(--wp--preset--color--gray, #6B7186); text-transform: none;
}
.woocommerce-cart-form table.shop_table.cart td { border-top: 1px solid var(--mc-line, #F0E6EC); }
/* Ширина превью описана у WooCommerce как `table.cart img`, поэтому селектор
здесь такой же длины — иначе картинка тянется на всю ячейку. */
.woocommerce table.shop_table.cart .product-thumbnail img,
.woocommerce-cart-form .product-thumbnail img {
width: 84px; height: auto; border-radius: 14px;
}
.woocommerce-cart-form .product-name a {
color: var(--wp--preset--color--ink, #16161A); font-weight: 500; text-decoration: none;
}
.woocommerce-cart-form .product-name a:hover { color: var(--wp--preset--color--blue, #5B86D6); }
.woocommerce-cart-form .product-subtotal { font-weight: 600; }
/* Крестик удаления: у WooCommerce это голая красная «×». Делаем аккуратную
круглую кнопку в цвет интерфейса. */
.woocommerce-cart-form a.remove {
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; border-radius: 50%; font-size: 20px; line-height: 1;
background: var(--mc-line, #F0E6EC); color: var(--wp--preset--color--gray, #6B7186) !important;
text-decoration: none;
}
.woocommerce-cart-form a.remove:hover {
background: var(--wp--preset--color--pink, #C76A8A); color: #fff !important;
}
.woocommerce .quantity .qty {
height: 42px; padding: 0 6px; border: 1px solid var(--mc-line, #F0E6EC);
border-radius: 12px; font-family: inherit; font-size: 15px; text-align: center;
}
/* Строка действий: купон слева, «Обновить корзину» справа. */
.woocommerce-cart-form .actions { padding: 16px !important; }
.woocommerce-cart-form .actions .coupon {
display: flex; gap: 8px; align-items: center; justify-content: flex-start;
}
.woocommerce-cart-form .actions .coupon label { display: none; }
.woocommerce-cart-form .actions .coupon #coupon_code {
height: 46px; padding: 0 16px; border: 1px solid var(--mc-line, #F0E6EC);
border-radius: var(--mc-pill, 30px); font-family: inherit; font-size: 15px;
width: auto; min-width: 0; flex: 1 1 auto; box-sizing: border-box;
}
.woocommerce-cart-form .actions button.button {
height: 46px; padding: 0 24px; border: 0; border-radius: var(--mc-pill, 30px);
font-family: inherit; font-weight: 500; font-size: 15px; box-sizing: border-box;
background: var(--mc-line, #F0E6EC); color: var(--wp--preset--color--ink, #16161A);
}
.woocommerce-cart-form .actions button.button:hover { background: #e8dae1; }
.woocommerce-cart-form .actions button.button[disabled] { opacity: .45; }
.woocommerce-cart-form .actions .coupon button.button {
background: var(--wp--preset--color--blue, #5B86D6); color: #fff; flex: 0 0 auto;
}
.woocommerce-cart-form .actions .coupon button.button:hover { background: #4a72c0; }
/* Итоги */
.cart-collaterals .cart_totals { float: none; width: 100%; }
.cart-collaterals .cart_totals h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 12px; }
.cart-collaterals .cart_totals table.shop_table {
border: 1px solid var(--mc-line, #F0E6EC); border-radius: 18px;
border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff;
}
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
border-top: 1px solid var(--mc-line, #F0E6EC); padding: 14px 16px;
}
.cart-collaterals .cart_totals tr:first-child th,
.cart-collaterals .cart_totals tr:first-child td { border-top: 0; }
.cart-collaterals .cart_totals .order-total { font-size: 1.1rem; }
.woocommerce .wc-proceed-to-checkout { padding: 16px 0 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button {
display: block; padding: 16px 28px; border-radius: var(--mc-pill, 30px);
background: var(--wp--preset--color--blue, #5B86D6); color: #fff;
font-family: inherit; font-weight: 500; font-size: 16px; text-align: center;
box-sizing: border-box;
}
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover { background: #4a72c0; }
@media (max-width: 768px) {
/* Ниже перебиваем адаптив WooCommerce (она раскладывает ячейки в блоки и
подписывает их через ::before), поэтому селекторы длинные, а местами
нужен !important — свои правила иначе проигрывают её таблице стилей. */
.woocommerce-cart-form table.shop_table.cart,
.woocommerce-cart-form table.shop_table.cart tbody {
display: block; border: 0; background: none; overflow: visible;
}
.woocommerce-cart-form table.shop_table.cart thead { display: none; }
.woocommerce-cart-form table.shop_table.cart tr.cart_item {
display: grid; position: relative;
grid-template-columns: 84px 1fr auto;
grid-template-areas:
"thumb name name"
"thumb price price"
"thumb qty subtotal";
column-gap: 14px; row-gap: 8px; align-items: center;
margin: 0 0 12px; padding: 14px 42px 14px 14px;
background: #fff; border: 1px solid var(--mc-line, #F0E6EC);
border-radius: 18px;
}
.woocommerce-cart-form table.shop_table.cart tr.cart_item td {
display: block; width: auto; padding: 0; border: 0; text-align: left !important;
}
/* Подписи «Товар:», «Цена:» — в карточке они лишние: и так видно, что есть что. */
.woocommerce-cart-form table.shop_table.cart tr.cart_item td::before { display: none !important; }
.woocommerce-cart-form tr.cart_item .product-thumbnail {
grid-area: thumb; display: block !important; align-self: start;
}
.woocommerce-cart-form tr.cart_item .product-thumbnail img { width: 84px; height: auto; }
.woocommerce-cart-form tr.cart_item .product-name { grid-area: name; line-height: 1.35; }
.woocommerce-cart-form tr.cart_item .product-name a { font-size: .95rem; }
.woocommerce-cart-form tr.cart_item .product-price {
grid-area: price; font-size: .88rem; color: var(--wp--preset--color--gray, #6B7186);
}
.woocommerce-cart-form tr.cart_item .product-quantity { grid-area: qty; }
.woocommerce-cart-form tr.cart_item .product-quantity .qty { width: 68px; height: 38px; }
.woocommerce-cart-form tr.cart_item .product-subtotal {
grid-area: subtotal; text-align: right !important; font-weight: 600;
}
.woocommerce-cart-form tr.cart_item .product-remove {
position: absolute; top: 10px; right: 10px; width: auto;
}
/* Строка действий — тоже вне таблицы, отдельным блоком */
.woocommerce-cart-form table.shop_table.cart tr:has(td.actions) { display: block; }
.woocommerce-cart-form table.shop_table.cart td.actions {
display: block; width: auto; padding: 0 !important; border: 0; text-align: left;
}
.woocommerce-cart-form table.shop_table.cart td.actions::before { display: none !important; }
.woocommerce-cart-form .actions .coupon { margin: 0 0 10px; }
/* width не задаём: с ним поле распирает флекс-строку и кнопка «Применить»
переносится под него. */
.woocommerce-cart-form .actions .coupon #coupon_code { flex: 1 1 0; width: auto; min-width: 0; }
.woocommerce-cart-form .actions .coupon button.button { padding: 0 18px; }
.woocommerce-cart-form .actions button[name="update_cart"] { width: 100%; }
.cart-collaterals .cart_totals table.shop_table,
.cart-collaterals .cart_totals table.shop_table tbody { display: block; }
.cart-collaterals .cart_totals table.shop_table tr {
display: flex; justify-content: space-between; gap: 12px;
border-top: 1px solid var(--mc-line, #F0E6EC); padding: 12px 16px;
}
.cart-collaterals .cart_totals table.shop_table tr:first-child { border-top: 0; }
.cart-collaterals .cart_totals table.shop_table th,
.cart-collaterals .cart_totals table.shop_table td {
display: block; border: 0; padding: 0; text-align: right;
}
.cart-collaterals .cart_totals table.shop_table th { text-align: left; font-weight: 500; }
.cart-collaterals .cart_totals table.shop_table td::before { display: none !important; }
}