/* catalog-fixes.css — poli-tika.ru catalog/PDP presentation corrections Loaded on tplCategory (id=6) and tplProduct (id=7) only. Does not touch style.css or responsive-fixes.css. */ /* B2 — category card meta shown as distinct readable rows (SKU / characteristics) */ .product-card__meta--sku { margin: 0 0 2px; font-weight: 600; color: var(--color-text-muted); } .product-card__meta--chars { margin: 0 0 var(--space-4); color: var(--color-text-faint); } /* ── PDP purchase relocated ONTO the image card (cf6) ──────────────────── The left column is a single product-card = image + price/qty/«В корзину», visually and functionally identical to a category product card. cart.js binds via [data-product-id]; apply_group_prices.js via .pc-price__main. The right column keeps only Арт./name/specs/description (no purchase dup). */ /* image + card scroll with the page (override style.css sticky) */ .product-section .product-photo-wrap, .product-photo-wrap { position: static !important; top: auto !important; } /* narrow left column hugging the ~340px card; right column takes the rest */ .product-section .product-layout { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr) !important; align-items: start !important; gap: 40px; } @media (max-width: 860px) { .product-section .product-layout { grid-template-columns: 1fr !important; gap: 24px; } } /* the unified left card */ .product-section .pdp-card { max-width: 340px; width: 100%; margin: 0; cursor: default; } @media (max-width: 860px) { .product-section .pdp-card { margin-left: auto; margin-right: auto; } } .product-section .pdp-card:hover { box-shadow: none; border-color: var(--color-border); } .product-section .pdp-card .product-card__img-wrap { aspect-ratio: 1 / 1; background: #fff; } .product-section .pdp-card .product-card__img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; background: #fff; } .product-section .pdp-card:hover .product-card__img-wrap img { transform: none; } .product-section .pdp-card .product-card__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 1; } .product-section .pdp-card .product-badge--new { background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 12px; } /* Compact typography (mobile) — align PDP with the catalog scale, no giant lines */ @media (max-width: 600px) { .product-hero .page-hero__title { font-size: 1.5rem; line-height: 1.2; } .product-info__name { font-size: 1.25rem; line-height: 1.25; } .product-info__price .pc-price__main { font-size: 1.5rem; } } /* B3 — PDP summary metadata stays on one line at desktop; may wrap on mobile */ @media (min-width: 1024px) { .product-hero .page-hero__subtitle { white-space: nowrap; max-width: none; } } @media (max-width: 1023px) { .product-hero .page-hero__subtitle { white-space: normal; } } /* B6 — >=44px touch targets on mobile (category cards + PDP purchase block) */ @media (max-width: 900px) { .product-card__qty { height: 44px; } .product-card__qty-btn { width: 44px; height: 44px; } .product-card__qty-input { height: 44px; font-size: 16px; } /* 16px avoids iOS zoom */ .product-card__add-full { min-height: 44px; padding: 12px; font-size: 14px; } } /* ===== catalog category switcher (16 top-level tiles) — cf4 ===== */ .cat-tabs { grid-template-columns: repeat(8, 1fr) !important; gap: 14px !important; } .cat-tab { aspect-ratio: auto !important; min-height: 150px; padding: 18px 10px !important; gap: 12px !important; font-size: 13px !important; } .cat-tab__icon { width: 58px !important; height: 58px !important; padding: 11px !important; border-radius: 14px !important; } .cat-tab__label { font-size: 13px !important; font-weight: 600; line-height: 1.25; } .cat-active-header { padding-top: 10px; } @media (max-width: 1199px) { .cat-tabs { grid-template-columns: repeat(6, 1fr) !important; } } @media (max-width: 991px) { .cat-tabs { grid-template-columns: repeat(4, 1fr) !important; } } @media (max-width: 679px) { .cat-tabs { grid-template-columns: repeat(3, 1fr) !important; } .cat-tab { min-height: 122px; padding: 14px 8px !important; } .cat-tab__icon { width: 50px !important; height: 50px !important; } } @media (max-width: 459px) { .cat-tabs { grid-template-columns: repeat(2, 1fr) !important; } } /* ============================================================ Phase 3 — category heading w/ icon + fixed 3-line card titles (supersedes the earlier min-height clamp) ============================================================ */ /* Заголовок активной/текущей категории над сеткой: иконка + название, без счётчика позиций и без CTA. Цвет иконки берётся из .cat-icon--{color}. */ .cat-active-header { display: flex !important; align-items: center !important; gap: 16px; padding: 6px 0 24px !important; } .cat-active-header__icon { flex: 0 0 auto; width: 56px; height: 56px; padding: 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .cat-active-header__icon svg { width: 100%; height: 100%; display: block; } .cat-active-header__title { margin: 0; } @media (max-width: 679px) { .cat-active-header__icon { width: 48px; height: 48px; padding: 10px; border-radius: 14px; } } /* E — фиксированная область названия ровно под 3 строки на всех карточках. Детерминированные px (не em/clamp), чтобы высота не «плавала» с font-size: 14px × line-height 19px × 3 = 57px. flex:none снимает рост из style.css. */ .product-card__name { display: -webkit-box !important; -webkit-line-clamp: 3 !important; line-clamp: 3 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; flex: none !important; font-size: 14px !important; line-height: 19px !important; height: 57px !important; min-height: 57px !important; max-height: 57px !important; margin: 0 0 8px !important; } /* Ссылка-обёртка растягивается → footer (sibling) прижат к низу карточки, а фиксированная высота названия выравнивает meta/цену/кнопку по вертикали. */ .product-card__link { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } .product-card__body { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; } /* ── PDP description lists kept inside the text column (cf7) ─────────── Global reset (*{padding:0}) strips ul/ol padding, so default outside markers render left of the zero-padding list box and protrude past the left edge of .product-info__desc. Restore an indent so markers + text sit fully inside the container; keep long lines aligned under the text. */ .product-info__desc { overflow-wrap: break-word; } .product-info__desc ul, .product-info__desc ol { margin: 0.5em 0; padding-left: 1.5em; list-style-position: outside; } .product-info__desc ul { list-style-type: disc; } .product-info__desc ol { list-style-type: decimal; } .product-info__desc li { margin: 0.25em 0; line-height: 1.6; } /* nested lists: extra indent + distinct marker, still inside the column */ .product-info__desc ul ul, .product-info__desc ul ol, .product-info__desc ol ul, .product-info__desc ol ol { margin: 0.25em 0; padding-left: 1.25em; } .product-info__desc ul ul { list-style-type: circle; } .product-info__desc ul ul ul { list-style-type: square; } @media (max-width: 600px) { .product-info__desc ul, .product-info__desc ol { padding-left: 1.35em; } } /* ───────────────────────────────────────────────────────────── ГЛАВНАЯ: карточки категорий — счётчик прижат к нижнему краю. Одинаковая высота карточек в ряду (grid stretch), название занимает свободное место, счётчик всегда внизу независимо от длины названия. Desktop/mobile, без overflow. ───────────────────────────────────────────────────────────── */ .categories-grid { align-items: stretch; } .categories-grid .category-card { height: 100%; justify-content: flex-start; } .categories-grid .category-card__name { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; } .categories-grid .category-card__count { margin-top: auto; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────── HERO photo-cards (homepage): pin the "Открыть" badge to the bottom edge of every card so all badges share one baseline, independent of title length. Cards are equal-height (2×2 grid, 1fr rows), so a full-height overlay + margin-top:auto suffices. */ .hero__visual .hero__card--photo .hero__card-label { top: 0; right: 0; bottom: 0; left: 0; justify-content: space-between; padding: 18px; background: linear-gradient(to bottom, rgba(4,12,35,0.85) 0%, rgba(4,12,35,0.30) 28%, rgba(4,12,35,0.00) 52%, rgba(4,12,35,0.55) 100%); } .hero__visual .hero__card--photo .hero__card-label__title { flex: 0 0 auto; } .hero__visual .hero__card--photo .hero__card-label__badge { margin-top: auto; align-self: flex-start; } /* ───────────────────────────────────────────────────────────── GLOBAL editorial list fix (cf10) — all internal CMS pages. The global reset (*{margin:0;padding:0}) strips ul/ol indent, so default outside markers render left of the zero-padding list box and protrude past the container's left edge (e.g. ЖКХ, privacy, delivery). Editorial lists authored in the WYSIWYG are bare