/*
* Редизайн pvzbutik: постраничные стили (.pvz-*) и перекрытия старых правил.
* Подключается ПОСЛЕДНИМ, после styles.css, temp.css, seller-auth.css и @yield('styles').
* Цвета — только var(--ts-*) из pvz-tokens.css. styles.scss не пересобирать (он устарел, см. гайд).
*
* Один файл вместо четырёх (меньше блокирующих запросов). Разделы — в прежнем порядке подключения,
* порядок важен для каскада:
* I. Основа, листинги, карточки, фильтры (этапы 1, 5–6) — бывш. pvz-redesign.css
* II. Рамка сайта: шапка, меню, подвал, «наверх», cookie (этап 4) — бывш. pvz-redesign-chrome.css
* III. Страница объявления и её окна, окно карты (этап 7) — бывш. pvz-redesign-object.css
* IV. Формы, окна, статьи и служебные страницы (этапы 2–3, 8–10) — бывш. pvz-redesign-forms.css
*/
/* #####################################################################
* I. ОСНОВА, ЛИСТИНГИ, КАРТОЧКИ, ФИЛЬТРЫ (этапы 1, 5–6)
* ##################################################################### */
/* ---------- Этап 1. Основа ---------- */
/* Лигатуры Onest склеивают звёздочки: «+7 900 *** ** **» выглядит как «+7 900 * * *».
* Скрытый номер под «Показать телефон» и сами кнопки телефона — без лигатур (как .ts-no-liga). */
.hide-phone,
.phone-seller {
font-feature-settings: 'liga' 0, 'calt' 0;
font-variant-ligatures: none;
}
/* Поля и кнопки по умолчанию берут системный шрифт (Arial, у textarea — моноширинный), а не шрифт страницы. */
button,
input,
select,
textarea,
optgroup {
font-family: inherit;
}
/* ---------- Этапы 5–6. Листинги: карточка, лента, сегмент, фильтры, сортировка, пагинация, крошки ----------
* Главная, город, регион, район, метро, бренд. Разметка — components/pickup-point-*, pickup-points-list,
* filters-modal, location-empty, banner-pvz-sale, partials/breadcrumbs. Классы, нужные scripts.js
* (.pickup-tab, .custom-sort-select, .sort-*, .pagination(-btn), .multi-*, .map-address-trigger),
* оставлены в разметке — старые правила для них из styles.css / temp.css перекрыты здесь. */
/* Заголовок страницы и крошки */
.pvz-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.pvz-h1 { margin: 0; max-width: none; color: var(--ts-black); }
.pvz-crumbs.breadcrumbs { gap: 4px 12px; margin: 0 0 16px; font-size: 14px; line-height: 18px; color: var(--ts-gray); }
.pvz-crumbs a { font-size: 14px; line-height: 18px; color: var(--ts-gray); text-decoration: none; transition: color 300ms; }
.pvz-crumbs a:hover { color: var(--ts-blue); }
.pvz-crumbs .sep { display: inline; width: auto; height: auto; margin: 0; background: none; color: var(--ts-light-gray); }
/* Каркас: на ≥ 1024 панель фильтров 306 слева + лента справа (как MainPage ТС), ниже — одна колонка */
.pvz-listing { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "seg" "banner" "tools" "main"; }
.pvz-listing { margin-bottom: 32px; }
@media (min-width: 768px) { .pvz-listing { margin-bottom: 48px; } }
.pvz-listing:not(.pvz-listing--panel) { margin-top: 8px; }
.pvz-filters { display: contents; }
.pvz-seg { grid-area: seg; margin-bottom: 24px; }
.pvz-sale-banner { grid-area: banner; margin-bottom: 24px; }
.pvz-toolbar { grid-area: tools; }
.pvz-listing__main { grid-area: main; min-width: 0; }
@media (min-width: 1024px) {
.pvz-listing--panel {
grid-template-columns: 306px minmax(0, 1fr);
grid-template-rows: auto auto auto 1fr;
grid-template-areas: "seg seg" "aside banner" "aside tools" "aside main";
column-gap: 24px;
}
.pvz-seg { justify-self: start; margin-bottom: 32px; }
}
/* Сегмент «Пункты выдачи / Сети ПВЗ» (.ts-segment); .pickup-tab и .active — для scripts.js */
.pvz-seg .pickup-tab {
flex: none;
width: auto;
min-height: 44px;
gap: 8px;
padding: 10px 16px;
border: 0;
border-radius: 0;
box-shadow: none;
background: #fff;
font: 500 16px/1 var(--ts-font);
color: var(--ts-black);
text-align: left;
}
.pvz-seg .pickup-tab:hover,
.pvz-seg .pickup-tab.active { background: var(--ts-line-cool); border-color: transparent; box-shadow: none; color: var(--ts-black); }
.pvz-seg .pickup-tab:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: -2px; }
.pvz-seg__icon { display: inline-flex; font-style: normal; }
@media (max-width: 1023px) { .pvz-seg .pickup-tab { flex: 1; justify-content: center; } }
@media (max-width: 479px) { .pvz-seg .pickup-tab { padding: 10px 8px; } .pvz-seg__icon { display: none; } }
@media (max-width: 400px) { .pvz-seg .pickup-tab { font-size: 14px !important; } }
/* Строка инструментов: «Фильтры» (ниже 1024) слева, сортировка справа; на ≥ 1024 — только сортировка */
.pvz-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
@media (min-width: 640px) { .pvz-toolbar { margin-bottom: 24px; } }
.pvz-toolbar .ts-tool { min-height: 44px; }
.pvz-toolbar .ts-tool:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
@media (min-width: 1024px) { .pvz-listing--panel .pvz-toolbar__filters { display: none; } }
/* Сортировка: кнопка .ts-tool с иконкой sort и подписью (на < 640 — только иконка), меню .ts-menu.
* Открытие — как раньше: наведение на ≥ 769, класс .open по нажатию на ≤ 768 (scripts.js). */
.pvz-sort { position: relative; }
.pvz-sort .custom-sort-select { position: relative; width: auto; }
.pvz-sort .sort-select-trigger {
display: inline-flex;
justify-content: flex-start;
gap: 8px;
min-height: 48px;
padding: 12px 24px;
border: 0;
border-radius: 12px;
background: #fff;
font: 400 16px/1 var(--ts-font);
color: var(--ts-black);
}
.pvz-sort .sort-select-trigger:hover { background: #fff; color: var(--ts-blue); }
.pvz-sort .sort-select-trigger-text { flex: none; overflow: visible; }
@media (max-width: 639px) {
.pvz-sort .sort-select-trigger { min-width: 44px; min-height: 44px; padding: 0; justify-content: center; background: transparent; }
.pvz-sort .sort-select-trigger:hover { background: transparent; }
.pvz-sort .sort-select-trigger-text { display: none; }
}
.pvz-sort .sort-select-dropdown {
top: calc(100% + 8px);
left: 0;
right: auto;
z-index: 50;
min-width: 240px;
padding: 4px 0;
border: 1px solid var(--ts-line-cool);
border-radius: 12px;
background: #fff;
box-shadow: var(--ts-shadow-sm);
transform: none;
transition: opacity 300ms var(--transition-timing-function), visibility 300ms;
}
@media (max-width: 1023px) { .pvz-sort .sort-select-dropdown { left: auto; right: 0; } }
.pvz-sort .sort-option { min-height: 48px; padding: 0 20px; background: transparent; font-size: 14px; color: var(--ts-black); white-space: nowrap; transition: color 300ms; }
.pvz-sort .sort-option:hover,
.pvz-sort .sort-option.active { background: transparent; color: var(--ts-blue); }
.pvz-sort .sort-option-check { display: none; }
/* Фильтры (#filtersModalOverlay). Скрипт filters-modal показывает окно инлайн-стилем display:flex / none.
* < 890 — белая страница во весь экран; 890–1023 — окно 768 по центру; ≥ 1024 — панель слева (display:block). */
@keyframes pvz-fade-in { from { opacity: 0; } to { opacity: 1; } }
.pvz-fm {
position: fixed;
inset: 0;
z-index: 1000;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
background: #fff;
animation: pvz-fade-in 300ms var(--transition-timing-function);
}
.pvz-fm__panel { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; background: #fff; }
.pvz-fm__head {
position: sticky;
top: 0;
z-index: 3;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 8px 3.5% 8px 3.5%;
min-height: 60px;
border-bottom: 1px solid var(--ts-line-cool);
background: #fff;
}
.pvz-fm__title { font: 600 18px/24px var(--ts-font); color: var(--ts-black); }
.pvz-fm__close {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -6px;
padding: 0;
border: 0;
border-radius: 50%;
background: radial-gradient(circle, var(--ts-bg-page) 16px, transparent 16.5px);
color: var(--ts-black);
cursor: pointer;
}
.pvz-fm__close svg { width: 20px; height: 20px; }
.pvz-fm__close:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.pvz-fm__body { flex: 1 0 auto; padding: 16px 3.5% 24px; }
.pvz-fm__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 640px) and (max-width: 1023px) { .pvz-fm__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }
.pvz-fm__group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pvz-fm__label { font: 600 16px/20px var(--ts-font); color: var(--ts-black); }
.pvz-fm__switches { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--ts-line-cool); }
.pvz-fm__switches .ts-switch { min-height: 24px; }
.pvz-fm__footer {
position: sticky;
bottom: 0;
z-index: 3;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding: 12px 3.5%;
border-top: 1px solid var(--ts-line-cool);
background: #fff;
}
.pvz-fm__reset { order: -1; }
.pvz-fm__footer .ts-btn { padding-left: 8px; padding-right: 8px; }
/* Поля «от / до»: .ts-input-wrap с префиксом и единицей. У цены знак ₽ дописывает autoNumeric, поэтому
* единица «₽» в поле видна, только пока оно пустое */
.pvz-range { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pvz-range .ts-input { min-width: 0; padding-left: 44px; }
.pvz-range .ts-input:not(:placeholder-shown) ~ .pvz-affix--empty-only { display: none; }
.pvz-range .ts-input:not(:placeholder-shown) { padding-right: 16px; }
/* Мультивыбор (.multi-*, собирается в scripts.js с инлайн-стилями) — поле .ts-select, список .ts-dropdown,
* пункты с флажком .ts-check */
.pvz-fm .multi-wrapper { position: relative; width: 100%; }
.pvz-fm .multi-display {
height: 48px;
padding: 12px 72px 12px 16px !important;
border: 1px solid var(--ts-line) !important;
border-radius: 12px !important;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236D7588' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center !important;
font: 400 16px/22px var(--ts-font) !important;
color: var(--ts-black);
transition: border-color 300ms, box-shadow 200ms;
}
.pvz-fm .multi-display:hover { border-color: var(--ts-gray) !important; }
.pvz-fm .multi-wrapper:has(.multi-dropdown.open) .multi-display { border-color: var(--ts-blue) !important; box-shadow: var(--ts-ring); }
.pvz-fm .multi-clear-btn {
right: 44px !important;
width: 24px !important;
height: 24px !important;
background: transparent !important;
color: var(--ts-gray) !important;
font-size: 20px !important;
}
.pvz-fm .multi-clear-btn:hover { color: var(--ts-blue) !important; }
.pvz-fm .multi-dropdown {
display: block;
top: calc(100% + 4px);
z-index: 20;
margin: 0;
padding: 8px 4px;
border: 1px solid var(--ts-line);
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 3px #0000001A;
max-height: none;
overflow: visible;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 300ms var(--transition-timing-function), visibility 300ms;
}
.pvz-fm .multi-dropdown.open { opacity: 1; visibility: visible; pointer-events: auto; }
.pvz-fm .multi-search-input {
position: static;
height: 40px;
margin: 0 0 4px !important;
padding: 8px 12px !important;
border: 1px solid var(--ts-line) !important;
border-radius: 10px !important;
background: #fff;
font-size: 14px !important;
color: var(--ts-black);
}
.pvz-fm .multi-search-input::placeholder { color: var(--ts-light-gray); }
.pvz-fm .multi-search-input:focus { outline: none; border-color: var(--ts-blue) !important; box-shadow: var(--ts-ring); }
.pvz-fm .multi-items-container { max-height: 216px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--ts-line) transparent; }
.pvz-fm .multi-item {
position: static;
display: flex;
align-items: center;
gap: 8px;
min-height: 36px;
padding: 6px 8px;
border-radius: 8px;
background: transparent;
font: 400 14px/18px var(--ts-font);
color: var(--ts-black);
transition: background-color 200ms;
}
.pvz-fm .multi-item::before {
content: '';
flex: none;
box-sizing: border-box;
width: 20px;
height: 20px;
border: 2px solid var(--ts-light-gray);
border-radius: 6px;
background: #fff center / 10px 8px no-repeat;
transition: background-color 200ms, border-color 200ms;
}
.pvz-fm .multi-item::after { content: none; }
.pvz-fm .multi-item:hover { background: var(--ts-bg-muted); color: var(--ts-black); }
.pvz-fm .multi-item:hover::before { border-color: var(--ts-blue); }
.pvz-fm .multi-item.selected { padding-right: 8px; background: transparent; font-weight: 400; color: var(--ts-black); }
.pvz-fm .multi-item.selected:hover { background: var(--ts-bg-muted); }
.pvz-fm .multi-item.selected::before {
border-color: var(--ts-blue);
background-color: var(--ts-blue);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none' viewBox='0 0 10 8'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M1 4.2 3.6 6.6 9 1.4'/%3E%3C/svg%3E");
}
@media (pointer: coarse) { .pvz-fm .multi-item { min-height: 44px; } }
@media (min-width: 890px) and (max-width: 1023px) {
/* нижний отступ — полем у окна, а не у прокручиваемого слоя: иначе «липкие» кнопки встают на 96 px выше края */
.pvz-fm { padding: 96px 16px 0; background: #16161780; }
.pvz-fm__panel { position: relative; flex: none; max-width: 768px; margin: 0 auto 96px; border-radius: 20px; }
.pvz-fm__head { position: static; min-height: 0; padding: 32px 48px 16px; border-bottom: 0; border-radius: 20px 20px 0 0; }
.pvz-fm__title { font: 700 24px/1.3 var(--ts-font); }
.pvz-fm__close { position: absolute; top: 0; right: -48px; width: 40px; height: 40px; margin: 0; background: var(--ts-bg-muted); }
.pvz-fm__body { padding: 0 48px 24px; }
.pvz-fm__footer { padding: 16px 48px 32px; border-top: 0; border-radius: 0 0 20px 20px; }
}
/* ≥ 1024: те же поля — панель .ts-filter-panel слева. Инлайн display:none перекрыт: панель видна всегда */
@media (min-width: 1024px) {
.pvz-listing--panel .pvz-fm {
grid-area: aside;
align-self: start;
position: static;
z-index: auto;
display: block !important;
overflow: visible;
background: transparent;
animation: none;
}
.pvz-listing--panel .pvz-fm__panel {
padding: 24px 20px 0;
border-radius: 16px;
box-shadow: var(--ts-shadow-sm);
}
.pvz-listing--panel .pvz-fm__head { position: static; min-height: 0; padding: 0 0 20px; border-bottom: 0; }
.pvz-listing--panel .pvz-fm__title { font: 600 20px/24px var(--ts-font); }
.pvz-listing--panel .pvz-fm__close { display: none; }
.pvz-listing--panel .pvz-fm__body { padding: 0; }
.pvz-listing--panel .pvz-fm__grid { grid-template-columns: minmax(0, 1fr); }
.pvz-listing--panel .pvz-fm__footer {
display: flex;
flex-direction: column;
padding: 16px 0 24px;
border-top: 0;
border-radius: 0 0 16px 16px;
}
.pvz-listing--panel .pvz-fm__reset { order: 0; }
}
/* Поиск города на главной: поле .ts-input 48 с лупой справа, подсказки — .ts-dropdown */
.pvz-city-search.location-search-wrapper { width: 100%; max-width: none; margin: 0; }
.pvz-city-search .location-search { height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.pvz-city-search .location-search .ts-input {
height: 48px;
padding: 12px 48px 12px 16px;
border: 1px solid var(--ts-line);
border-radius: 12px;
background: #fff;
font: 400 16px/24px var(--ts-font);
color: var(--ts-black);
}
.pvz-city-search .location-search .ts-input::placeholder { color: var(--ts-light-gray); }
.pvz-city-search .location-search .ts-input:focus { border-color: var(--ts-blue); box-shadow: var(--ts-ring); }
.pvz-city-search__icon { display: flex; color: var(--ts-gray); }
.pvz-city-search__icon svg { width: 20px; height: 20px; }
.pvz-city-search .search-results-dropdown {
z-index: 60;
margin-top: 4px;
padding: 8px 4px;
max-height: 360px;
border: 1px solid var(--ts-line);
border-radius: 10px;
box-shadow: 0 1px 3px #0000001A;
animation: pvz-fade-in 300ms var(--transition-timing-function);
}
.pvz-city-search .search-results-dropdown__content { padding: 0; }
.pvz-city-search .search-results__col li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
min-height: 36px;
margin: 0;
padding: 6px 12px;
border-radius: 10px;
font-size: 14px;
line-height: 18px;
transition: background-color 200ms;
}
.pvz-city-search .search-results__col li:hover { background: var(--ts-bg-muted); }
.pvz-city-search .search-results__col li.search-results__item--with-settlements { display: block; }
.pvz-city-search .search-results__col a { padding: 0; border-radius: 0; font-size: 14px; line-height: 18px; color: var(--ts-black); }
.pvz-city-search .search-results__col li > span,
.pvz-city-search .search-results__link span { color: var(--ts-gray); font-size: 14px; }
.pvz-city-search .main-city { font-weight: 600; color: var(--ts-black); }
.pvz-city-search .search-results__title { padding: 8px 12px 4px; margin: 0; font-weight: 600; font-size: 14px; color: var(--ts-gray); }
.pvz-city-search .show-all-cities,
.pvz-city-search .hide-cities-list { padding: 0; border: 0; background: transparent; font-weight: 500; color: var(--ts-blue); }
.pvz-city-search .show-all-cities:hover,
.pvz-city-search .hide-cities-list:hover { color: var(--ts-blue-hover); }
@media (pointer: coarse) { .pvz-city-search .search-results__col li { min-height: 44px; } }
/* Баннер «Продайте свой ПВЗ» — светлый .ts-banner с красной кнопкой; на телефоне во всю ширину */
@media (max-width: 639px) { .pvz-sale-banner { margin-left: -3.5vw; margin-right: -3.5vw; } }
/* Подписка на ботов — тёмно-синий .ts-banner--navy во всю ширину ленты после 6-й карточки */
.pvz-bots { grid-column: 1 / -1; }
.pvz-bots .ts-banner__text { margin: 4px 0 0; }
.pvz-bots__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.pvz-bots .ts-btn--white { gap: 8px; min-height: 44px; padding: 10px 16px; }
.pvz-bots .ts-btn--white svg { width: 20px; height: 20px; color: var(--ts-blue); }
.pvz-bots--after { margin-top: 24px; }
@media (max-width: 639px) {
.pvz-bots { align-items: stretch; }
.pvz-bots .ts-btn--white { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }
.pvz-bots--after { margin-left: -3.5vw; margin-right: -3.5vw; }
}
/* Лента .ts-feed: < 640 — 1 колонка во всю ширину экрана с линиями, 640–1279 — 2, ≥ 1280 — 3 */
.pick-up-point-content.pvz-feed { display: grid; flex-wrap: nowrap; justify-content: normal; margin: 0; }
#pagination-container { margin: 24px 0 0; }
#pagination-container:not(:has(.pagination)) { display: none; }
.pvz-removed-title { max-width: none; margin: 32px 0 16px; color: var(--ts-black); }
/* Карточка объявления (.ts-card, card/Shift.vue ТС). Старые правила .pick-up-point (ширина 26 %, отступы,
* width:… !important у «Похожих» на странице объявления) перекрыты; вся карточка — ссылка .ts-card__link */
.pvz-card.pick-up-point { width: auto !important; margin: 0; padding: 20px; border-radius: 16px; background: #fff; }
@media (max-width: 639px) { .pvz-card.pick-up-point { padding: 16px 3.5%; border-radius: 0; } }
.pvz-card .ts-card__link:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: -2px; border-radius: inherit; }
.pvz-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pvz-card__price { white-space: nowrap; color: var(--ts-black); }
.pvz-card__chips { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pvz-card__desc {
margin: 0;
font-size: 14px;
line-height: 20px;
font-style: normal;
color: var(--ts-gray);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pvz-card__addr { display: flex; flex-direction: column; gap: 8px; }
.pvz-card .ts-card__row { align-items: flex-start; line-height: 18px; }
.pvz-card__street { position: relative; z-index: 2; font-weight: 500; color: var(--ts-black); cursor: pointer; transition: color 300ms; }
.pvz-card__street:hover { color: var(--ts-blue); }
.pvz-card .ts-dl dt,
.pvz-card .ts-dl dd { padding: 8px 0; }
.pvz-card .ts-dl dd { text-align: right; white-space: nowrap; color: var(--ts-black); }
.pvz-card__fire { margin-right: 4px; font-size: 16px; line-height: 1; }
.pvz-card__date { margin: 0; font-size: 12px; line-height: 16px; color: var(--ts-gray); }
/* пометки «Фото / Финансы» (были значки 📷 💰) — серым справа в строке города */
.pvz-card__extras { flex: none; display: inline-flex; gap: 6px; margin-left: auto; font-size: 12px; line-height: 18px; color: var(--ts-gray); }
.pvz-card__extras span + span::before { content: '·'; margin-right: 6px; }
.pvz-card.is-removed { opacity: 0.6; }
@media (max-width: 639px) { .pvz-card .ts-card__actions { display: none; } }
/* «Похожие» на странице объявления — та же карточка в сетке ленты (сама страница — этап 7) */
.pick-up-point-content:has(> .pvz-card) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 24px; }
@media (min-width: 640px) { .pick-up-point-content:has(> .pvz-card) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .pick-up-point-content:has(> .pvz-card) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .pick-up-point-content:has(> .pvz-card) { gap: 0; margin-left: -3.5vw; margin-right: -3.5vw; } }
/* Загрузка ленты: скелетоны в форме карточек вместо крутилки (#content-loader создаёт scripts.js,
* вид меняет скрипт в components/pickup-point-filters) */
#content-loader.pvz-loader { flex-direction: column; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: none; text-align: left; }
.pvz-loader__feed { width: 100%; }
.pvz-skel { pointer-events: none; }
.pvz-skel .ts-skeleton { border-radius: 8px; }
.pvz-skel__price { width: 55%; height: 28px; }
.pvz-skel__chip { width: 48px; height: 28px; }
.pvz-skel__line { width: 100%; height: 14px; }
.pvz-skel__line--short { width: 60%; }
.pvz-skel__row { width: 100%; height: 18px; }
.pvz-skel__btn { height: 44px; border-radius: 12px !important; }
.pvz-skel__date { width: 45%; height: 12px; }
@media (max-width: 639px) { .pvz-skel__btn { display: none; } }
/* Пустой результат: белая панель, H3, серый текст, кнопка */
.pvz-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.pvz-empty__title { display: block; margin: 0; color: var(--ts-black); }
.pvz-empty__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ts-gray); }
.pvz-empty__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pvz-empty .ts-btn--telegram,
.pvz-empty .ts-btn--max { gap: 8px; white-space: normal; text-align: left; font-size: 16px; line-height: 20px; }
.pvz-empty .ts-btn--telegram svg,
.pvz-empty .ts-btn--max svg { flex: none; width: 20px; height: 20px; }
@media (max-width: 767px) {
.pvz-empty { margin-left: -3.5vw; margin-right: -3.5vw; }
.pvz-empty__text br { display: none; }
}
/* тот же вид у блока «нет объектов», который рисует scripts.js после фильтрации (там инлайн-стили) */
#pickup-points-container > .no-results,
#pickup-points-container > .error-message {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
margin: 0 !important;
padding: 24px !important;
border: 1px solid var(--ts-line-cool);
border-radius: 16px !important;
background: #fff !important;
text-align: left !important;
}
#pickup-points-container > .no-results p,
#pickup-points-container > .error-message p { margin: 0 !important; font: 700 20px/1.3 var(--ts-font) !important; color: var(--ts-black) !important; }
#pickup-points-container > .no-results button,
#pickup-points-container > .error-message button {
min-height: 48px;
padding: 12px 16px !important;
border: 0 !important;
border-radius: 12px !important;
background: var(--ts-blue) !important;
font: 500 16px/1 var(--ts-font) !important;
letter-spacing: 0.4px;
color: #fff !important;
transition: background-color 300ms;
}
#pickup-points-container > .no-results button:hover,
#pickup-points-container > .error-message button:hover { background: var(--ts-blue-hover) !important; }
@media (max-width: 767px) {
#pickup-points-container > .no-results,
#pickup-points-container > .error-message { margin: 0 -3.5vw !important; padding: 24px 3.5% !important; border-width: 1px 0; border-radius: 0 !important; }
}
/* Пагинация .ts-pagination: квадраты 40, текущая — синий 8 % поверх белого, «Назад / Далее» словами */
.pvz-pagination { margin: 0; }
.pvz-pagination .pagination-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 0;
border-radius: 8px;
background: #fff;
font-size: 16px;
font-weight: 400;
color: var(--ts-black);
text-decoration: none;
transition: background-color 300ms;
}
.pvz-pagination .pagination-btn:hover,
.pvz-pagination .pagination-btn.active { background: #fff linear-gradient(var(--ts-pale-blue), var(--ts-pale-blue)); color: var(--ts-black); border-color: transparent; }
.pvz-pagination .pagination-btn.active { font-weight: 600; }
.pvz-pagination .pagination-btn:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.pvz-pagination .pagination-ellipsis { padding: 0 4px; color: var(--ts-gray); }
@media (pointer: coarse) { .pvz-pagination .pagination-btn { min-width: 44px; height: 44px; } }
/* Ссылки на города и бренды под лентой: заголовок 24/32 (телефон 20/28), ссылки с пунктиром через 20/8 */
.pvz-links { display: flex; flex-direction: column; gap: 32px; margin: 0 0 48px; }
.pvz-links__title { margin-bottom: 16px; font: 700 24px/32px var(--ts-font); color: var(--ts-black); }
@media (max-width: 767px) { .pvz-links { margin-bottom: 32px; gap: 24px; } .pvz-links__title { font-size: 20px; line-height: 28px; } }
.pvz-links__list { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pvz-links__list a { font-size: 16px; line-height: 24px; }
/* #####################################################################
* II. РАМКА САЙТА — шапка, мобильное меню, подвал, кнопка «наверх», плашка cookie (этап 4)
* Основа — компоненты .ts-header / .ts-burger / .ts-mobile-menu / .ts-footer / .ts-to-top из pvz-components.css,
* здесь — привязка к разметке pvzbutik и то, чего там нет.
* ##################################################################### */
/* ---------- Этап 4. Шапка (гайд 5.5) ---------- */
/* Отступ до содержимого = отступ страницы сверху (.ts-page, 32) на всех страницах */
.ts-header { margin-bottom: var(--ts-page-pad-top); }
/* Логотип как есть: 32 на ≥ 768, 28 на 480–767, 22 на телефоне. Область нажатия — 44 по высоте. */
.ts-header__logo { display: block; flex: none; padding: 6px 0; margin: -6px 0; }
.ts-header__logo img { display: block; width: auto; height: 32px; }
@media (max-width: 767px) { .ts-header__logo img { height: 28px; } .ts-header__logo { padding: 8px 0; margin: -8px 0; } }
@media (max-width: 479px) { .ts-header__logo img { height: 22px; } .ts-header__logo { padding: 11px 0; margin: -11px 0; } }
/* Город рядом с логотипом: ссылка .ts-geo; длинное название обрезается многоточием */
.ts-header .ts-geo { min-width: 0; padding: 12px 0; margin: -12px 0; text-decoration: none; }
.ts-geo__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Кнопки справа (≥ 1280): иконка 20 через 8 */
.ts-header__desktop .ts-btn { gap: 8px; }
.ts-header .ts-btn .ts-icon { width: 20px; height: 20px; flex: none; }
/* Бургер 32×32, область нажатия 44×44 */
.ts-burger { flex: none; padding: 0; }
.ts-burger::before { content: ''; position: absolute; inset: -6px; }
.ts-burger:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; border-radius: 8px; }
/* Страница подбора ($hideHeaderButtons): на ≥ 768 только логотип по центру, на телефоне — бургер и меню */
@media (min-width: 768px) {
.ts-header--minimal .ts-header__inner { justify-content: center; }
.ts-header--minimal .ts-header__right,
.ts-header--minimal .ts-geo,
.ts-header--minimal .ts-mobile-menu { display: none; }
}
/* ---------- Этап 4. Мобильное меню (< 1280) ---------- */
/* Скрытое меню не ловит нажатия и не попадает в обход с клавиатуры; появление — прозрачность 300 мс */
.ts-mobile-menu {
z-index: 1;
gap: 24px;
overflow-y: auto;
overscroll-behavior: contain;
visibility: hidden;
transition: opacity 300ms var(--transition-timing-function), visibility 0s linear 300ms;
}
.ts-mobile-menu.is-open {
visibility: visible;
transition: opacity 300ms var(--transition-timing-function), visibility 0s;
}
@media (max-width: 539px) {
.ts-mobile-menu { height: calc(100vh - 56px); height: calc(100dvh - 56px); }
}
@media (min-width: 540px) {
.ts-mobile-menu { width: 384px; min-width: 0; padding: 24px; gap: 24px; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); }
}
@media (min-width: 1280px) {
.ts-mobile-menu { display: none; }
}
.ts-mobile-menu__btns { display: flex; flex-direction: column; gap: 12px; }
.ts-mobile-menu__btns .ts-btn { gap: 8px; }
.ts-mobile-menu .ts-btn .ts-icon { width: 20px; height: 20px; flex: none; }
/* Ссылки разделов: строки 48 с линией, шеврон справа */
.ts-mobile-menu__links { display: flex; flex-direction: column; border-top: 1px solid var(--ts-line-cool); }
.ts-mobile-menu__links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 48px;
padding: 12px 0;
border-bottom: 1px solid var(--ts-line-cool);
font: 500 16px/24px var(--ts-font);
color: var(--ts-black);
text-decoration: none;
transition: color 200ms var(--transition-timing-function);
}
.ts-mobile-menu__links a:hover { color: var(--ts-blue); }
.ts-mobile-menu__links a:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.ts-mobile-menu__links .ts-icon { width: 20px; height: 20px; flex: none; color: var(--ts-light-gray); }
/* Подписка на ботов — тёмно-синий баннер (5.8) внутри меню: столбиком, кнопки белые с синими иконками */
.ts-mobile-menu__banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px; border-radius: var(--ts-radius-card); }
.ts-mobile-menu__banner p { margin: 0; }
.ts-mobile-menu__bots { display: flex; flex-direction: column; gap: 8px; }
.ts-mobile-menu__bots .ts-btn { min-height: 44px; gap: 8px; }
.ts-mobile-menu__bots .ts-icon { color: var(--ts-blue); }
/* Невидимая подложка под открытым меню: тап мимо меню закрывает его и не нажимает то, что под ним */
@media (max-width: 1279px) {
body.is-menu-open::after { content: ''; position: fixed; inset: 0; z-index: 99; }
}
/* Пока меню открыто, плашка cookie и «наверх» не лезут поверх него */
body.is-menu-open .ts-cookie,
body.is-menu-open #scroll-to-top { opacity: 0; pointer-events: none; }
/* ---------- Этап 4. Подвал (гайд 5.6) ---------- */
.ts-footer p { margin: 0; }
.ts-footer__logo-link { display: block; align-self: flex-start; line-height: 0; }
.ts-footer__logo { display: block; width: auto; height: 40px; }
/* Ссылки: подсветка только по тексту, область нажатия выше строки без сдвига вёрстки */
.ts-footer__links a { align-self: flex-start; padding: 12px 0; margin: -12px 0; }
.ts-footer__support a { padding: 6px 0; margin: -6px 0; }
.ts-footer__legal a { justify-self: start; padding: 6px 0; margin: -6px 0; }
.ts-footer a:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; border-radius: 4px; }
/* 1024–1279: колонке «Новые объявления» мало 2/12 — заголовок переносился */
.ts-footer__support .ts-footer__heading { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
.ts-footer__brand { grid-column: span 5; }
.ts-footer__support { grid-column: span 3; }
}
/* Реквизитов в подвале нет — документы прижаты вправо, как в образце */
@media (min-width: 768px) { .ts-footer__legal { margin-left: auto; } }
/* ---------- Этап 4. Кнопка «наверх» (.ts-to-top) ----------
* Разметка — в шаблонах страниц; вид — как .ts-to-top:
* круг 40 (60 на ≥ 1024), серый фон, стрелка — повёрнутая иконка arrow-left. Видимость — .is-visible
* (scripts.js): после 1,5 экрана, на телефоне — только пока листают вверх. Рамка — чтобы серый круг
* был виден на сером фоне страницы. */
#scroll-to-top {
position: fixed;
right: 3.5%;
bottom: 72px;
z-index: 90;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid var(--ts-line-cool);
border-radius: 50%;
background: var(--ts-bg-disabled);
box-shadow: var(--ts-shadow-xs);
color: var(--ts-black);
font-size: 0;
line-height: 0;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 300ms var(--transition-timing-function), color 300ms var(--transition-timing-function), bottom 300ms var(--transition-timing-function);
}
#scroll-to-top::before {
content: '';
width: 24px;
height: 24px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='m9.59 14.66 6.25 6.25a.94.94 0 1 0 1.32-1.32L11.58 14l5.58-5.59a.94.94 0 0 0-1.33-1.32l-6.25 6.25a.94.94 0 0 0 0 1.32'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='m9.59 14.66 6.25 6.25a.94.94 0 1 0 1.32-1.32L11.58 14l5.58-5.59a.94.94 0 0 0-1.33-1.32l-6.25 6.25a.94.94 0 0 0 0 1.32'/%3E%3C/svg%3E") center / contain no-repeat;
transform: rotate(90deg);
}
/* область нажатия 44 при круге 40 */
#scroll-to-top::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
#scroll-to-top.is-visible { opacity: 1; pointer-events: auto; }
#scroll-to-top:hover { color: var(--ts-blue); }
#scroll-to-top:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
@media (min-width: 1024px) {
#scroll-to-top { width: 60px; height: 60px; right: 3.5vw; bottom: 3.5vw; }
#scroll-to-top::before { width: 32px; height: 32px; }
}
/* На телефоне плашка cookie во всю ширину — кнопка встаёт над ней */
@media (max-width: 767px) {
body.has-cookie-banner #scroll-to-top { bottom: calc(var(--ts-cookie-h, 0px) + 24px); }
}
/* ---------- Этап 4. Плашка cookie (гайд 5.9, нет на ТС) ---------- */
.ts-cookie {
position: fixed;
left: 24px;
bottom: 24px;
z-index: 9990;
width: 384px;
max-width: calc(100vw - 48px);
padding: 20px;
background: var(--ts-bg-surface);
border: 1px solid var(--ts-line-cool);
border-radius: var(--ts-radius-card);
box-shadow: var(--ts-shadow-header);
color: var(--ts-black);
font-size: 14px;
line-height: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 300ms var(--transition-timing-function);
}
.ts-cookie[hidden],
.ts-cookie__step[hidden] { display: none; }
.ts-cookie.is-open { opacity: 1; pointer-events: auto; }
/* первый показ — сразу, без проявления (иначе плашка — LCP страницы и он ждёт анимацию);
* проявляется только шаг «Подробнее» при переключении */
#cookie-info.ts-cookie__step { animation: ts-cookie-in 300ms var(--transition-timing-function); }
@keyframes ts-cookie-in { from { opacity: 0; } to { opacity: 1; } }
.ts-cookie__title { display: block; margin-bottom: 8px; font: 600 16px/24px var(--ts-font); text-transform: none; }
.ts-cookie__text { margin: 0; }
.ts-cookie__text .ts-link { text-decoration: underline; text-underline-offset: 3px; }
.ts-cookie__buttons { display: flex; gap: 8px; margin-top: 16px; }
.ts-cookie__buttons .ts-btn { flex: 1 1 0; min-width: 0; padding: 12px 16px; font-size: 14px; }
@media (max-width: 767px) {
.ts-cookie { left: 3.5%; right: 3.5%; bottom: 12px; width: auto; max-width: none; padding: 16px; }
}
/* #####################################################################
* III. СТРАНИЦА ОБЪЯВЛЕНИЯ (pages/pickup-point) И ЕЁ ОКНА, ОКНО КАРТЫ (components/map-modal) (этап 7)
* Основа — компоненты .ts-* из pvz-components.css, здесь — постраничные .pvz-obj-* / .pvz-modal / .pvz-fin-table
* и привязка к классам, нужным скриптам (.phone-seller, .call-back-trigger, .offer-price-trigger, .max-button,
* .mySwiper2, .gallery, .content-block).
* ##################################################################### */
/* ---------- Этап 7. Страница объявления (гайд 6.2) ---------- */
/* Заголовок: H1 .ts-h1; старое правило h1 ограничивало ширину под правую колонку */
.pvz-obj-title { max-width: none; margin: 0 0 24px; color: var(--ts-black); }
/* Каркас: слева панели, справа колонка 384 («липкая» на ≥ 1024). Ниже 1024 — одна колонка,
* цена и связь сразу после H1; ниже 768 — панели во всю ширину экрана через 12 */
.pvz-obj { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.pvz-obj__main,
.pvz-obj__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pvz-obj p { margin: 0; }
/* .pvz-obj__side в HTML идёт первой (сверху на < 1024), на ≥ 1024 — справа */
@media (min-width: 1024px) {
.pvz-obj { grid-template-columns: minmax(0, 1fr) 384px; }
.pvz-obj__main { grid-column: 1; grid-row: 1; }
.pvz-obj__side { grid-column: 2; grid-row: 1; }
/* --pvz-side-top считает скрипт: если колонка выше экрана, она прилипает нижним краем */
.pvz-obj__side { position: sticky; top: var(--pvz-side-top, 24px); }
}
@media (max-width: 767px) {
.pvz-obj { gap: 12px; margin: 0 -3.5vw; }
.pvz-obj__main,
.pvz-obj__side { gap: 12px; }
}
/* Панель «Финансовые показатели» оставлена .content-block (на него опирается скрипт пересчёта) —
* снимаем старые отступы, ширину и скругление этого класса */
.pvz-obj .content-block.ts-panel { width: auto; margin: 0; padding: 24px; border-radius: 16px; }
@media (max-width: 767px) {
.pvz-obj .content-block.ts-panel { padding: 24px 3.5%; border-radius: 0; }
}
/* Подзаголовок внутри панели */
.pvz-obj-subtitle { margin: 24px 0 4px; font: 600 16px/20px var(--ts-font); color: var(--ts-black); }
/* ---- Описание: 16/24 (ниже 1280 — 14/20), свёрнуто до 4 строк, снизу затухание в цвет панели ---- */
.pvz-obj-desc__text {
--pvz-desc-lh: 24px;
--pvz-desc-lines: 4;
position: relative;
font-size: 16px;
line-height: var(--pvz-desc-lh);
color: var(--ts-black);
overflow-wrap: anywhere;
transition: max-height 300ms var(--transition-timing-function);
}
@media (max-width: 1279px) {
.pvz-obj-desc__text { --pvz-desc-lh: 20px; font-size: 14px; }
}
.pvz-obj-desc__text p { margin: 0 0 12px; }
.pvz-obj-desc__text > :last-child { margin-bottom: 0; }
.pvz-obj-desc__text.is-collapsed { max-height: calc(var(--pvz-desc-lh) * var(--pvz-desc-lines)); overflow: hidden; }
.pvz-obj-desc__text.is-animating { overflow: hidden; }
.pvz-obj-desc__text.is-collapsed::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: calc(var(--pvz-desc-lh) * 1.5);
background: linear-gradient(to bottom, color-mix(in srgb, var(--ts-bg-surface) 0%, transparent), var(--ts-bg-surface));
pointer-events: none;
}
.pvz-obj-desc__text.is-fit { max-height: none; }
.pvz-obj-desc__text.is-fit::after { display: none; }
.pvz-obj-desc__toggle.ts-btn--text { min-height: 44px; margin: 2px 0 -10px; }
.pvz-obj-desc__toggle[hidden] { display: none; }
.pvz-obj-desc__less,
.pvz-obj-desc__toggle[aria-expanded='true'] .pvz-obj-desc__more { display: none; }
.pvz-obj-desc__toggle[aria-expanded='true'] .pvz-obj-desc__less { display: inline; }
/* ---- Фото: Swiper со скруглением 12, точки 6 через 4 (активная серая), стрелки 44 ----
* Размер блока задан заранее (aspect-ratio) и раскладка слайдов — здесь, а не только в swiper-bundle.min.css,
* который грузится асинхронно: до него слайды вставали столбиком и страница «прыгала» (CLS). */
.pvz-obj-gallery__swiper {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
overflow: hidden;
border-radius: 12px;
background: var(--ts-bg-disabled);
}
.pvz-obj-gallery .swiper-wrapper { display: flex; height: 100%; }
.pvz-obj-gallery .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; }
.pvz-obj-gallery .swiper-slide a,
.pvz-obj-gallery .swiper-slide picture { display: block; width: 100%; height: 100%; }
.pvz-obj-gallery .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pvz-obj-gallery__nav.swiper-button-prev,
.pvz-obj-gallery__nav.swiper-button-next {
position: absolute;
top: 50%;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -22px 0 0;
padding: 0;
border: none;
border-radius: 50%;
background: #fff;
box-shadow: var(--ts-shadow-sm);
color: var(--ts-black);
opacity: 1;
cursor: pointer;
transition: color 300ms;
}
.pvz-obj-gallery__nav.swiper-button-prev { left: 12px; right: auto; }
.pvz-obj-gallery__nav.swiper-button-next { right: 12px; left: auto; }
.pvz-obj-gallery__nav::before,
.pvz-obj-gallery__nav::after { display: none; }
.pvz-obj-gallery__nav .ts-icon { width: 20px; height: 20px; }
.pvz-obj-gallery__nav.swiper-button-prev .ts-icon { transform: rotate(180deg); }
.pvz-obj-gallery__nav:hover { color: var(--ts-blue); }
.pvz-obj-gallery__nav:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
@media (max-width: 639px) {
.pvz-obj-gallery__nav.swiper-button-prev,
.pvz-obj-gallery__nav.swiper-button-next { display: none; }
}
.pvz-obj-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.pvz-obj-gallery .pvz-obj-gallery__dots.swiper-pagination {
position: static;
display: flex;
flex-wrap: wrap;
gap: 4px;
width: auto;
min-width: 0;
transform: none;
}
.pvz-obj-gallery .pvz-obj-gallery__dots .swiper-pagination-bullet {
display: block;
width: 6px;
height: 6px;
margin: 0;
border-radius: 50%;
background: var(--ts-light-gray);
opacity: 1;
transition: background-color 300ms;
}
.pvz-obj-gallery .pvz-obj-gallery__dots .swiper-pagination-bullet-active { background: var(--ts-gray); }
.pvz-obj-gallery__all { flex: none; min-height: 44px; font-size: 14px; }
/* Fancybox (галерея): затемнение #16161780, кнопки — светлые круги 44, как крестик окон */
.pvz-fancybox .fancybox-bg { background: var(--ts-black); }
.pvz-fancybox.fancybox-is-open .fancybox-bg { opacity: 0.5; }
.pvz-fancybox .fancybox-toolbar { top: 16px; right: 16px; display: flex; gap: 8px; }
.pvz-fancybox .fancybox-toolbar .fancybox-button,
.pvz-fancybox .fancybox-navigation .fancybox-button > div {
width: 44px;
height: 44px;
padding: 12px;
border-radius: 50%;
background: var(--ts-bg-muted);
color: var(--ts-black);
}
.pvz-fancybox .fancybox-toolbar .fancybox-button:hover,
.pvz-fancybox .fancybox-navigation .fancybox-button:hover > div { color: var(--ts-blue); }
.pvz-fancybox .fancybox-navigation .fancybox-button { width: 76px; height: 76px; top: calc(50% - 38px); padding: 16px; background: none; }
.pvz-fancybox .fancybox-navigation .fancybox-button:not([disabled]):hover { color: inherit; }
.pvz-fancybox .fancybox-infobar { top: 16px; left: 16px; height: 44px; padding: 0 16px; line-height: 44px; border-radius: 22px; background: var(--ts-bg-muted); color: var(--ts-black); font: 500 14px/44px var(--ts-font); mix-blend-mode: normal; }
/* ---- Характеристики и местоположение: сетка 2 колонки, подпись 14 серым, значение 18/600 ---- */
.pvz-obj-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 0; }
.pvz-obj-stat { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--ts-line-cool); }
.pvz-obj-stat:nth-child(-n + 2) { padding-top: 0; }
.pvz-obj-stat:nth-last-child(-n + 2):nth-child(odd),
.pvz-obj-stat:nth-last-child(-n + 2):nth-child(odd) ~ .pvz-obj-stat { padding-bottom: 0; border-bottom: none; }
.pvz-obj-stat dt { margin-bottom: 4px; font-size: 14px; line-height: 18px; color: var(--ts-gray); }
.pvz-obj-stat dd { margin: 0; font: 600 18px/24px var(--ts-font); color: var(--ts-black); overflow-wrap: anywhere; }
@media (max-width: 479px) {
.pvz-obj-stat dd { font-size: 16px; line-height: 20px; }
}
/* ---- «Верифицированный объект» — .ts-alert--success ---- */
.pvz-obj-verified.ts-alert { gap: 16px; font-size: 14px; line-height: 20px; color: var(--ts-black); }
.pvz-obj-verified__icon { flex: none; width: 24px; height: 24px; color: var(--ts-green); }
.pvz-obj-verified .pvz-obj-verified__title { margin-bottom: 4px; font: 600 16px/20px var(--ts-font); }
/* ---- Карта: в рамке со скруглением 12; серый фон — заглушка до ленивой загрузки (высота задана — без сдвига) ---- */
.pvz-obj-map {
position: relative;
height: 280px;
margin-top: 24px;
overflow: hidden;
isolation: isolate;
border: 1px solid var(--ts-line-cool);
border-radius: 12px;
background: var(--ts-bg-disabled);
}
.pvz-obj-map__canvas { width: 100%; height: 100%; }
@media (max-width: 767px) {
.pvz-obj-map { height: 220px; }
}
/* ---- Финансовые показатели: период (.ts-select) справа от заголовка, строки .ts-dl ---- */
.pvz-obj-fin__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pvz-obj-fin__head .ts-panel__title { margin: 0; }
.pvz-obj-fin__period.ts-select { flex: none; width: auto; max-width: 100%; height: 44px; padding-top: 10px; padding-bottom: 10px; font-size: 14px; line-height: 22px; }
@media (max-width: 639px) {
.pvz-obj-fin__head { flex-direction: column; align-items: stretch; }
.pvz-obj-fin__period.ts-select { width: 100%; }
}
.pvz-obj-fin__head + .pvz-obj-dl { margin-top: 12px; }
.pvz-obj-dl.ts-dl { grid-template-columns: minmax(0, 1fr) auto; }
.pvz-obj-dl.ts-dl dd { text-align: right; white-space: nowrap; }
@media (min-width: 640px) {
.pvz-obj-dl.ts-dl { grid-template-columns: 240px minmax(0, 1fr); }
.pvz-obj-dl.ts-dl dd { text-align: left; }
}
.pvz-obj-dl--accent.ts-dl dd { font-size: 16px; font-weight: 600; }
/* ---- График (Chart.js): высота задана заранее, цвета — в конфиге графика (index.blade.php) ---- */
.pvz-obj-chart { position: relative; width: 100%; aspect-ratio: 5 / 2; margin-top: 8px; }
.pvz-obj-chart canvas { display: block; }
@media (max-width: 639px) {
.pvz-obj-chart { aspect-ratio: 4 / 3; }
}
/* ---- Детальная финансовая таблица (components/financial-table): .ts-table с прокруткой вбок ---- */
.pvz-fin-table.ts-panel { overflow: hidden; }
.pvz-fin-table__scroll { margin: 0 -24px -24px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pvz-fin-table__scroll:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: -2px; }
.pvz-fin-table__table.ts-table { min-width: 640px; font-size: 14px; line-height: 18px; }
.pvz-fin-table__table th,
.pvz-fin-table__table td { padding: 10px 12px; white-space: nowrap; text-align: right; }
.pvz-fin-table__table thead th { padding-top: 0; color: var(--ts-gray); font-weight: 400; vertical-align: bottom; }
.pvz-fin-table__table tbody th { font-weight: 400; color: var(--ts-black); border-top: 1px solid var(--ts-line-cool); }
.pvz-fin-table__table th:first-child,
.pvz-fin-table__table td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; padding-left: 24px; background: #fff; }
.pvz-fin-table__table td:last-child,
.pvz-fin-table__table th:last-child { padding-right: 24px; }
.pvz-fin-table__month { display: block; color: var(--ts-black); font-weight: 500; }
.pvz-fin-table__year { display: block; font-size: 12px; line-height: 16px; }
.pvz-fin-table__table .pvz-fin-table__section th,
.pvz-fin-table__table .pvz-fin-table__section td { padding-top: 16px; font-weight: 600; background: #fff; }
.pvz-fin-table__table tr.is-total th,
.pvz-fin-table__table tr.is-total td { font-weight: 600; background: var(--ts-bg-muted); }
.pvz-fin-table__table tr.pvz-fin-table__net th,
.pvz-fin-table__table tr.pvz-fin-table__net td { font-weight: 700; }
@media (max-width: 767px) {
.pvz-fin-table__scroll { margin: 0 -3.5vw -24px; }
.pvz-fin-table__table th:first-child,
.pvz-fin-table__table td:first-child { padding-left: 3.5vw; }
.pvz-fin-table__table td:last-child,
.pvz-fin-table__table th:last-child { padding-right: 3.5vw; }
}
/* ---- Жалоба: текстовая кнопка серым ---- */
.pvz-obj-complaint__btn.ts-btn--text { min-height: 44px; color: var(--ts-gray); font-size: 14px; letter-spacing: 0; }
.pvz-obj-complaint__btn.ts-btn--text:hover { color: var(--ts-blue); }
@media (max-width: 767px) {
.pvz-obj-complaint { padding: 0 3.5vw; }
}
/* ---- Правая колонка: цена ---- */
.pvz-obj-price__label { margin-bottom: 8px; font-size: 14px; line-height: 18px; color: var(--ts-gray); }
.pvz-obj-price__value { font: 700 32px/1.3 var(--ts-font); color: var(--ts-black); white-space: nowrap; }
.pvz-obj .pvz-obj-price__old { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; font-size: 16px; line-height: 20px; color: var(--ts-gray); }
.pvz-obj-price__old s { text-decoration-thickness: 1px; }
.pvz-obj .pvz-obj-price__status { margin-top: 8px; }
.pvz-obj-price__sold.ts-chip { background: #fff linear-gradient(var(--ts-pale-green), var(--ts-pale-green)); color: var(--ts-black); }
/* ссылки на ботов — строки по 44 (цель нажатия), без лишнего отступа вокруг */
.pvz-obj-price__links { display: flex; flex-direction: column; align-items: flex-start; margin: 5px 0 -11px; font-size: 14px; line-height: 22px; }
.pvz-obj-price__links .ts-link { padding: 11px 0; background-clip: content-box; }
.pvz-obj .pvz-obj-price__removed { margin-top: 12px; font-size: 14px; line-height: 18px; color: var(--ts-gray); }
.pvz-obj-divider { height: 1px; margin: 24px 0; background: var(--ts-line-cool); }
/* ---- Свяжитесь с продавцом: все варианты (продавец, менеджер; платная и бесплатная публикация) ---- */
.pvz-obj-contacts__title.ts-panel__title { margin-bottom: 16px; }
.pvz-obj-contacts { display: flex; flex-direction: column; gap: 12px; }
.pvz-obj-btn__in { display: inline-flex; align-items: center; gap: 8px; }
.pvz-obj-btn .ts-icon { flex: none; width: 20px; height: 20px; }
.pvz-obj-btn--wa.ts-btn { min-height: 56px; padding: 12px 16px; font-size: 18px; line-height: 24px; letter-spacing: 0; }
.pvz-obj-btn--wa .ts-icon { color: var(--ts-green); }
.pvz-obj-contacts .ts-btn--gray-lg,
.pvz-obj-contacts .ts-btn--outline-black { min-height: 48px; }
/* «Показать телефон»: .ts-btn--green-lg, под надписью — скрытый номер (без лигатур: .ts-no-liga) */
.pvz-obj-phone.ts-btn { flex-direction: column; gap: 2px; padding: 8px 16px; white-space: normal; text-align: center; }
.pvz-obj-phone .phone-seller__title { font: 500 16px/20px var(--ts-font); letter-spacing: 0.4px; }
.pvz-obj-phone .hide-phone { font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: 0; opacity: 0.85; }
.pvz-obj-phone .show-phone { font: 600 18px/24px var(--ts-font); letter-spacing: 0; user-select: text; }
.pvz-obj-phone .show-phone a { color: inherit; text-decoration: none; }
/* раскрытие номера — как раньше: скрипты добавляют .show / .show-number */
.phone-seller .show-phone { display: none; }
.phone-seller.show .hide-phone,
.phone-seller.show-number .hide-phone,
.phone-seller.show-number .phone-seller__title { display: none; }
.phone-seller.show .show-phone,
.phone-seller.show-number .show-phone { display: block; }
/* ---- Лот: номер, просмотры (eye), подписки (bell) — 14 серым ---- */
.pvz-obj-lot { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 18px; color: var(--ts-black); }
.pvz-obj-lot__row { display: flex; align-items: center; gap: 8px; color: var(--ts-gray); }
.pvz-obj-lot__row .ts-icon { flex: none; width: 18px; height: 18px; color: var(--ts-light-gray); }
/* ---- Подписка на ботов: .ts-banner--navy (был отдельный блок над крошками на телефоне с margin: -24px) ---- */
.pvz-obj-subscribe.ts-banner { flex-direction: column; align-items: stretch; gap: 16px; padding: 16px 24px 24px; }
.pvz-obj-subscribe .ts-banner__title { margin: 0; font: 600 20px/24px var(--ts-font); color: #fff; }
.pvz-obj-subscribe .ts-banner__text { margin: 4px 0 0; color: #fff; }
.pvz-obj-subscribe .ts-btn--white { min-height: 44px; gap: 8px; font-size: 16px; font-weight: 500; }
.pvz-obj-subscribe .ts-btn--white .ts-icon { flex: none; width: 20px; height: 20px; color: var(--ts-blue); }
@media (max-width: 1023px) {
.pvz-obj-subscribe--wide-only { display: none; }
}
@media (min-width: 1024px) {
.pvz-obj-subscribe--bottom { display: none; }
}
@media (max-width: 767px) {
.pvz-obj-subscribe.ts-banner { padding: 16px 3.5%; border-radius: 0; }
.pvz-obj-subscribe--bottom.ts-banner { margin: 0 -3.5vw; padding: 16px 3.5vw; }
}
/* ---- Похожие пункты выдачи: сетка как лента (.ts-feed), карточки — общий компонент ---- */
.pvz-obj-similar { margin-top: 48px; }
.pvz-obj-similar__title.ts-h2 { max-width: none; margin: 0 0 24px; color: var(--ts-black); }
.pvz-obj-all { margin: 24px 0 48px; }
@media (max-width: 767px) {
.pvz-obj-similar { margin-top: 32px; }
.pvz-obj-similar__title.ts-h2 { margin-bottom: 16px; }
.pvz-obj-all .ts-btn { width: 100%; }
.pvz-obj-subscribe--bottom { margin-bottom: 32px; }
}
/* ---------- Этап 7. Окна страницы: «Перезвоните мне», «Предложите свою цену», жалоба (гайд 5.9) ----------
* .ts-modal: ≥ 890 — окно по центру сверху, скругление 20, крестик снаружи; < 890 — во весь экран.
* Скрипты переключают класс .active — появление и исчезновение прозрачностью 300 мс. */
.pvz-modal { visibility: hidden; transition: opacity 300ms ease, visibility 0s linear 300ms; }
.pvz-modal.active { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 300ms ease, visibility 0s; }
.pvz-modal__overlay { position: fixed; inset: 0; }
.pvz-modal__panel { z-index: 1; }
.pvz-modal__close.ts-modal__close { padding: 0; color: var(--ts-black); }
.pvz-modal__close .ts-icon { display: block; width: 40px; height: 40px; }
.pvz-modal__close:hover .ts-icon path { stroke: var(--ts-blue); }
.pvz-modal__close:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.pvz-modal .ts-modal__title { margin: 0 0 8px; color: var(--ts-black); }
.pvz-modal__lead { margin: 0 0 24px; font-size: 16px; line-height: 24px; color: var(--ts-gray); }
.pvz-modal__form { display: flex; flex-direction: column; gap: 24px; }
.pvz-modal__success { display: none; padding: 12px 16px; border-radius: 12px; background: #fff linear-gradient(var(--ts-pale-green), var(--ts-pale-green)); font-size: 14px; line-height: 20px; color: var(--ts-black); }
.pvz-modal input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
.pvz-modal input[type='number']::-webkit-inner-spin-button,
.pvz-modal input[type='number']::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
/* ошибка телефона (элемент .phone-error и класс .error добавляет scripts.js) — как у полей 5.2 */
.pvz-modal .ts-input.error,
.pvz-modal .ts-textarea.error { border-color: var(--ts-red) !important; background: #fff !important; box-shadow: var(--ts-ring-error); }
.pvz-modal .phone-error { margin-top: 0 !important; color: var(--ts-red) !important; font-size: 12px !important; line-height: 16px; }
@media (max-width: 889px) {
.pvz-modal .ts-modal__title { padding-right: 40px; }
.pvz-modal__close .ts-icon { width: 32px; height: 32px; }
.pvz-modal__close .ts-icon rect { fill: var(--ts-bg-page); }
}
/* ---------- Этап 7. Окно карты (components/map-modal, адрес в карточках листингов) ----------
* map-modal.js показывает окно display: block — появление анимацией прозрачности, закрытие — классом .is-closing */
@keyframes pvz-fade-in { from { opacity: 0; } }
.map-modal {
position: fixed;
inset: 0;
z-index: 1000;
overflow-y: auto;
padding: 96px 16px;
background: #16161780;
animation: pvz-fade-in 300ms ease;
}
.map-modal.is-closing { opacity: 0; transition: opacity 300ms ease; }
.map-modal__content { position: relative; max-width: 768px; height: min(600px, calc(100vh - 192px)); min-height: 320px; margin: 0 auto; background: #fff; border-radius: 20px; }
.map-modal__map { width: 100%; height: 100%; overflow: hidden; border-radius: 20px; }
.map-modal__close { position: absolute; top: 0; right: -48px; display: block; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; }
.map-modal__close .ts-icon { display: block; width: 100%; height: 100%; }
.map-modal__close:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
@media (max-width: 889px) {
.map-modal { padding: 0; background: #fff; }
.map-modal__content { max-width: none; height: 100%; min-height: 0; padding-top: 68px; border-radius: 0; }
.map-modal__map { border-radius: 0; }
.map-modal__close { position: fixed; top: 18px; right: 3.5vw; width: 32px; height: 32px; }
.map-modal__close .ts-icon rect { fill: var(--ts-bg-page); }
}
/* #####################################################################
* IV. ФОРМЫ, ОКНА, СТАТЬИ И СЛУЖЕБНЫЕ СТРАНИЦЫ (этапы 2–3, 8, 9, 10)
* Основа — компоненты .ts-* из pvz-components.css; здесь — привязка к разметке pvzbutik и перекрытия старых
* правил styles.css / temp.css (они грузятся после pvz-components и перебивают .ts-* при равной специфичности).
* Подразделы: 1) кнопки и поля (этапы 2–3); 2) форма /new, тарифы, «оплата получена», персональная рассылка
* (этап 8); 3) окна Fancybox, «Помощь в подборе», оферта (этап 9); 4) SEO-тексты и статьи, политика, 404/403
* (этап 10). Вход и кабинет продавца — seller-auth.css и seller-cabinet.css.
* ##################################################################### */
/* =====================================================================
* 1. ЭТАПЫ 2–3. КНОПКИ И ПОЛЯ (гайд 5.1, 5.2)
* ===================================================================== */
/* Плавное появление блоков, которые скрипты показывают через display (гайд 7: прозрачность 300 мс) */
@keyframes pvz-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Старые .btn рядом с .ts-btn (там, где класс нужен скрипту: «Продолжить» на /new — .btn--blue):
* styles.css задаёт .btn высоту 48, 600, скругление 10, «прозрачность при наведении» — возвращаем форму .ts-btn */
.btn.ts-btn {
height: auto;
padding: 12px 32px;
border: 1px solid transparent;
border-radius: 12px;
font: 500 16px/1 var(--ts-font);
letter-spacing: 0.4px;
transition: all 300ms var(--transition-timing-function);
}
.btn.ts-btn:hover { opacity: 1; }
.btn.ts-btn--red-lg { background: var(--ts-red); border-color: var(--ts-red); color: #fff; min-height: 56px; }
.btn.ts-btn--red-lg:hover { background: var(--ts-red-hover); border-color: var(--ts-red-hover); }
.btn.ts-btn[disabled] { background: var(--ts-bg-disabled); border-color: var(--ts-line-cool); color: var(--ts-light-gray); cursor: not-allowed; }
.ts-btn--text:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; border-radius: 4px; }
/* Поле в форме: .form-group input (styles.css: скругление 8, серый текст, line-height 16) и
* .phone-block__content input (без рамки) перебивают .ts-input — повторяем форму поля с большей специфичностью */
.form-group .ts-input,
.form-group .ts-select,
.form-group .ts-textarea,
.pvz-field .ts-input,
.phone-block__content .ts-input {
width: 100%;
height: 48px;
padding: 12px 16px;
background-color: var(--ts-bg-surface);
border: 1px solid var(--ts-line);
border-radius: var(--ts-radius-btn);
font: 400 16px/24px var(--ts-font);
color: var(--ts-black);
text-align: left;
outline: none;
transition: border-color 300ms, background-color 300ms, box-shadow 200ms 75ms;
}
.form-group .ts-select { padding-right: 44px; }
.form-group .ts-textarea { height: auto; min-height: 96px; }
.form-group .ts-input::placeholder,
.pvz-field .ts-input::placeholder,
.phone-block__content .ts-input::placeholder { color: var(--ts-light-gray); opacity: 1; }
.form-group .ts-input:hover,
.form-group .ts-select:hover,
.pvz-field .ts-input:hover,
.phone-block__content .ts-input:hover { border-color: var(--ts-gray); }
.form-group .ts-input:focus,
.form-group .ts-select:focus,
.form-group .ts-textarea:focus,
.pvz-field .ts-input:focus,
.phone-block__content .ts-input:focus { border-color: var(--ts-blue); box-shadow: var(--ts-ring); }
/* Только чтение (телефон из кабинета) и неактивное — фон и рамка #F6F7FA, текст серый */
.form-group .ts-input[readonly],
.form-group .ts-input:disabled,
.form-group .ts-select:disabled,
.phone-block__content .ts-input[readonly] {
background: var(--ts-bg-muted);
border-color: var(--ts-bg-muted);
box-shadow: none;
color: var(--ts-gray);
cursor: not-allowed;
}
/* Единица внутри поля (.ts-input-wrap) */
.form-group .ts-input-wrap .ts-input,
.pvz-field .ts-input-wrap .ts-input { padding-right: 44px; }
.ts-input-wrap__affix,
.ts-input-wrap__prefix { font-size: 16px; line-height: 24px; color: var(--ts-light-gray); }
/* Подпись над полем: 16/600, отступ 8; обязательное — красная звёздочка */
.form-group .ts-label,
.pvz-field .ts-label {
display: block;
margin: 0 0 8px;
font: 600 16px/1.25 var(--ts-font);
color: var(--ts-black);
text-align: left;
}
.ts-label .ts-req { margin-left: 2px; }
.pvz-field .ts-hint { display: block; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ts-gray); }
/* Ошибка поля: текст 12 красный под полем, рамка и текст поля красные (обёртку с ошибкой даёт :has) */
.form-group:has(> .error-message:not(:empty)) .ts-input,
.phone-block__content:has(> .error-message:not(:empty)) .ts-input {
border-color: var(--ts-red);
color: var(--ts-red);
}
.form-group:has(> .error-message:not(:empty)) .ts-input:focus,
.phone-block__content:has(> .error-message:not(:empty)) .ts-input:focus { box-shadow: var(--ts-ring-error); }
.form-group .ts-input.error,
.pvz-field .ts-input.error { border-color: var(--ts-red); } /* класс .error ставит scripts.js (isValidForm) */
/* Флажки и кружки в старой разметке (.checkbox / .radio + .styled-* + label — персональная рассылка):
* вид .ts-check (квадрат 20, рамка 2 серая, скругление 6, отмечен — синий с белой галочкой) и
* .ts-radio (кольцо 2 → синий с белой точкой 8). Картинки checkbox.svg больше не нужны. */
.checkbox .styled-checkbox + label,
.radio .styled-radio + label {
padding-left: 32px;
font-size: 16px;
line-height: 24px;
color: var(--ts-black);
}
.checkbox .styled-checkbox + label:before,
.radio .styled-radio + label:before {
top: 2px;
left: 2px;
width: 20px;
height: 20px;
border: 2px solid var(--ts-light-gray);
border-radius: 6px;
background: var(--ts-bg-surface);
transition: background-color 200ms, border-color 200ms, box-shadow 200ms;
}
.radio .styled-radio + label:before { border: 0; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ts-light-gray); }
.checkbox .styled-checkbox:hover + label:before { border-color: var(--ts-blue); }
.radio .styled-radio:hover + label:before { box-shadow: inset 0 0 0 2px var(--ts-blue); }
.checkbox .styled-checkbox:checked + label:before { background: var(--ts-blue); border-color: var(--ts-blue); }
.radio .styled-radio:checked + label:before { background: var(--ts-bg-surface); box-shadow: inset 0 0 0 6px var(--ts-blue); }
.checkbox .styled-checkbox:checked + label:after {
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none' viewBox='0 0 10 8'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M1 4.2 3.6 6.6 9 1.4'/%3E%3C/svg%3E") center / 10px 8px no-repeat;
transition: none;
}
.radio .styled-radio:checked + label:after { content: none; }
.checkbox .styled-checkbox:disabled + label,
.radio .styled-radio:disabled + label { color: var(--ts-light-gray); }
.checkbox .styled-checkbox:disabled + label:before { border-color: var(--ts-bg-disabled); background: var(--ts-bg-muted); }
.checkbox .styled-checkbox:focus-visible + label:before,
.radio .styled-radio:focus-visible + label:before { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.checkbox label a { color: var(--ts-blue); text-decoration: none; }
.checkbox label a:hover { color: var(--ts-blue-hover); }
/* Подсказки DaData (город в «Помощи в подборе», адрес в кабинете) — как .ts-dropdown */
.suggestions-wrapper .suggestions-suggestions {
margin-top: 4px;
padding: 8px 4px;
border: 1px solid var(--ts-line);
border-radius: var(--ts-radius);
background: var(--ts-bg-surface);
box-shadow: var(--ts-shadow-pop);
font: 400 14px/18px var(--ts-font);
color: var(--ts-black);
overflow: hidden;
}
.suggestions-wrapper .suggestions-suggestion {
border: 0;
min-height: 32px;
padding: 7px 12px;
border-radius: var(--ts-radius);
cursor: pointer;
transition: background-color 200ms;
}
.suggestions-wrapper .suggestions-suggestion:hover,
.suggestions-wrapper .suggestions-selected { background: var(--ts-bg-muted); }
.suggestions-wrapper .suggestions-suggestions strong { font-weight: 600; color: var(--ts-blue); }
.suggestions-wrapper .suggestions-hint { padding: 4px 12px 8px; font-size: 12px; line-height: 16px; color: var(--ts-gray); }
.suggestions-wrapper .suggestions-subtext { color: var(--ts-gray); }
/* Общие отступы полей в новых формах: подписи и поля через 24 (гайд 6.3) */
.pvz-field.form-group { margin: 0; }
.pvz-field .ts-radio-group,
.ts-radio-group { gap: 12px; }
.pvz-field .ts-radio,
.pvz-field .ts-check { line-height: 24px; }
/* на сенсорных экранах строка кружка — 44 по высоте (цель нажатия), промежуток за счёт высоты строки */
@media (pointer: coarse) {
.pvz-field .ts-radio-group,
.seller-cabinet-modal__reasons { gap: 0; }
.pvz-field .ts-radio,
.seller-cabinet-modal__reasons .ts-radio { min-height: 44px; }
.pvz-form .ts-radio-group { margin-top: -6px; margin-bottom: -10px; }
}
/* Галочки-пункты («Подбор лучшего объекта…»): зелёная галочка в бледно-зелёном круге 24 */
.pvz-checks { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pvz-checks li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-size: 16px; line-height: 24px; color: var(--ts-black); }
.pvz-checks .ts-icon { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--ts-pale-green); color: var(--ts-green); }
/* Итоговая панель («Оплата получена», «Заявка отправлена», ошибка): галочка в зелёном круге 56, H3,
* текст 16 серый, синяя кнопка (гайд 6.3) */
.pvz-result { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.pvz-result__icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ts-pale-green);
color: var(--ts-green);
}
.pvz-result__icon .ts-icon { width: 28px; height: 28px; }
.pvz-result--error .pvz-result__icon { background: var(--ts-pale-red); color: var(--ts-red); }
.pvz-result .pvz-result__title { display: block; max-width: none; margin: 0; font-weight: 700; line-height: 1.3; color: var(--ts-black); text-align: center; }
.pvz-result .pvz-result__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ts-gray); }
.pvz-result .pvz-result__text a { color: var(--ts-blue); }
.pvz-result__actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }
.pvz-result .pvz-result__list { margin: 0; padding-left: 20px; list-style: disc; text-align: left; }
.pvz-result .pvz-result__list li { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--ts-black); }
.pvz-result__loader {
width: 40px;
height: 40px;
border: 3px solid var(--ts-line-cool);
border-top-color: var(--ts-blue);
border-radius: 50%;
animation: ts-spin 1s linear infinite;
}
/* H3-шкала у заголовка, если он h1 (страница «Оплата получена»): у h1 в styles.css 40/600 */
h1.pvz-result__title.ts-h3 { font-size: 24px; }
@media (max-width: 1279px) { h1.pvz-result__title.ts-h3 { font-size: 20px; } }
@media (max-width: 767px) { h1.pvz-result__title.ts-h3 { font-size: 18px; } }
/* =====================================================================
* 2. ЭТАП 8. ФОРМЫ И БАННЕРЫ (гайд 5.8, 6.3)
* ===================================================================== */
/* ---------- /new: колонка 640 по центру в белой панели, на телефоне — во всю ширину ---------- */
.pvz-new { padding-bottom: 48px; }
.pvz-form.ts-panel {
display: flex;
flex-direction: column;
gap: 24px;
max-width: 640px;
margin: 0 auto 48px;
padding: 32px;
}
@media (max-width: 767px) {
.pvz-form.ts-panel { margin: 0 -3.5vw 32px; padding: 24px 3.5%; }
}
.pvz-form__head { display: flex; flex-direction: column; gap: 12px; }
/* H1 страницы в шкале H2 (32/28/24): в колонке 640 крупный H1 разбивался бы на 4 строки */
.pvz-form h1.pvz-form__title { max-width: none; margin: 0; font-size: 32px; font-weight: 700; line-height: 1.3; color: var(--ts-black); }
@media (max-width: 1279px) { .pvz-form h1.pvz-form__title { font-size: 28px; } }
@media (max-width: 767px) { .pvz-form h1.pvz-form__title { font-size: 24px; } }
.pvz-form .pvz-form__lead { margin: 0; }
.pvz-form .pvz-field { display: flex; flex-direction: column; margin: 0; }
.pvz-form .pvz-field > .ts-label { margin-bottom: 8px; }
.pvz-form .ts-radio-group { margin-top: 4px; }
.pvz-form .ts-hint,
.pvz-form .setting-group p.ts-hint { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ts-gray); }
/* Раздел «Контакты продавца» — через линию, заголовок как у панели (24/32, на телефоне 18/24) */
.pvz-form .setting-group { max-width: none; margin: 0; }
.pvz-form .pvz-form__section {
display: flex;
flex-direction: column;
gap: 24px;
padding-top: 24px;
border-top: 1px solid var(--ts-line-cool);
}
.pvz-form .pvz-form__subtitle { margin: 0; font: 600 18px/24px var(--ts-font); color: var(--ts-black); }
@media (min-width: 768px) { .pvz-form .pvz-form__subtitle { font-size: 24px; line-height: 32px; } }
/* Телефоны и мессенджеры: было — «плавающая» подпись внутри рамки, стало — подпись над полем */
.pvz-form .phone-block { margin: 0; padding: 0; border: 0; border-radius: 0; }
.pvz-form .phone-block__title { display: block; margin: 0 0 8px; font: 600 16px/1.25 var(--ts-font); color: var(--ts-black); }
.pvz-form .phone-block__content { display: block; }
.pvz-form .pvz-form__tg .ts-input { padding-left: 58px; padding-right: 16px; }
.pvz-form .phone-block__tg { font-size: 16px; line-height: 24px; color: var(--ts-light-gray); }
/* Тексты ошибок: скрипт формы создаёт их с инлайн-стилем color:red / 0.85em — перекрываем цветом сайта */
.pvz-form .error-message,
.pvz-form .contacts-error,
.pvz-form #agree-error {
margin: 8px 0 0 !important;
font-size: 12px !important;
line-height: 16px;
color: var(--ts-red) !important;
}
.pvz-form .error-message:empty,
.pvz-form .contacts-error:empty,
.pvz-form #agree-error:empty { display: none; }
.pvz-form .contacts-error { margin-top: -12px !important; }
.pvz-form .pvz-form__payback:empty { display: none; }
.pvz-form .pvz-form__payback { margin-top: 8px; font-size: 14px; line-height: 20px; color: var(--ts-black); }
/* Согласие — флажок 14/20 со ссылками .ts-link */
.pvz-form .pvz-form__agree .ts-check { font-size: 14px; line-height: 20px; }
.pvz-form .pvz-form__agree .ts-check input { margin: 0 2px; }
.pvz-form .pvz-form__agree:has(.error-message:not(:empty)) .ts-check input { border-color: var(--ts-red); }
.pvz-form .brand-block:has(.error-message:not(:empty)) .ts-radio input:not(:checked) { box-shadow: inset 0 0 0 2px var(--ts-red); }
/* Кнопка и «Есть сложности?» */
.pvz-form .pvz-form__submit { display: flex; flex-direction: column; gap: 12px; }
.pvz-form .pvz-form__support { margin: 0; font-size: 14px; line-height: 20px; color: var(--ts-gray); text-align: center; }
.pvz-form .pvz-form__submit #agree-error { margin-top: 0 !important; text-align: center; }
.pvz-form .pvz-form__support a { color: var(--ts-blue); text-decoration: none; transition: color 300ms; }
.pvz-form .pvz-form__support a:hover { color: var(--ts-blue-hover); }
/* статья-гайд под формой — той же колонкой по центру */
.pvz-new .how-to-send.pvz-article { margin: 48px auto 48px; }
/* ---------- Тарифы размещения (/new/payment/{id}) ---------- */
.pvz-tariffs__title.ts-h1 { max-width: none; margin: 0 0 24px; font-size: 40px; font-weight: 700; line-height: 1.3; }
@media (max-width: 1279px) { .pvz-tariffs__title.ts-h1 { font-size: 32px; } }
@media (max-width: 767px) { .pvz-tariffs__title.ts-h1 { font-size: 24px; } }
.pvz-tariffs.placement-rate-block { margin-bottom: 96px; }
.pvz-tariffs .pvz-tariffs__subtitle { display: block; margin: 0 0 16px; font: 600 18px/24px var(--ts-font); color: var(--ts-black); }
@media (min-width: 768px) { .pvz-tariffs .pvz-tariffs__subtitle { font-size: 24px; line-height: 32px; } }
.pvz-tariffs .independent-sale.pvz-tariffs__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
width: auto;
margin: 0;
padding: 0;
overflow: visible;
}
@media (min-width: 768px) { .pvz-tariffs .independent-sale.pvz-tariffs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1280px) { .pvz-tariffs .independent-sale.pvz-tariffs__grid { gap: 24px; } }
@media (max-width: 767px) { .pvz-tariffs .independent-sale.pvz-tariffs__grid { margin: 0 -3.5vw; } }
.pvz-tariffs .independent-sale-item.pvz-tariff {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 24px;
width: auto;
min-width: 0;
margin: 0;
padding: 24px;
background: var(--ts-bg-surface);
border: 1px solid var(--ts-line-cool);
border-radius: var(--ts-radius-card);
}
@media (min-width: 768px) and (max-width: 1279px) { .pvz-tariffs .independent-sale-item.pvz-tariff { padding: 20px; } }
@media (max-width: 767px) { .pvz-tariffs .independent-sale-item.pvz-tariff { padding: 24px 3.5%; border-width: 1px 0; border-radius: 0; } }
.pvz-tariffs .pvz-tariff__title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 16px;
padding: 0 0 16px;
border-bottom: 1px solid var(--ts-line-cool);
font: 600 24px/32px var(--ts-font);
color: var(--ts-black);
}
@media (max-width: 1279px) { .pvz-tariffs .pvz-tariff__title { font-size: 18px; line-height: 24px; } }
.pvz-tariffs .pvz-tariff__icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 40px;
height: 40px;
margin: 0;
border-radius: 50%;
background: var(--ts-pale-blue);
color: var(--ts-blue);
}
.pvz-tariffs .pvz-tariff__icon .ts-icon { width: 24px; height: 24px; }
.pvz-tariffs .pvz-tariff__list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; }
.pvz-tariffs .pvz-tariff__list li {
position: relative;
margin: 0;
padding-left: 28px;
font-size: 16px;
line-height: 24px;
color: var(--ts-gray);
}
.pvz-tariffs .pvz-tariff__list li.check { color: var(--ts-black); }
.pvz-tariffs .pvz-tariff__list li.check:before { content: none; }
.pvz-tariffs .pvz-tariff__list li .ts-icon { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; color: var(--ts-green); }
@media (max-width: 1279px) { .pvz-tariffs .pvz-tariff__list li { font-size: 14px; line-height: 20px; } .pvz-tariffs .pvz-tariff__list li .ts-icon { top: 0; } }
.pvz-tariffs .pvz-tariff .ts-btn { padding-left: 12px; padding-right: 12px; }
/* ---------- «Оплата получена» и «Не удалось провести оплату» — компактная панель по центру ---------- */
.pvz-result.ts-panel { max-width: 640px; margin: 0 auto 96px; padding: 40px 48px; min-height: 0; }
.pvz-result.appeal-accepted { justify-content: flex-start; }
.pvz-result.ts-panel .pvz-result__actions { max-width: 384px; }
@media (max-width: 767px) {
.pvz-result.ts-panel { margin: 0 -3.5vw 48px; padding: 32px 3.5%; }
}
/* ---------- Персональная рассылка (podpiska/{id}/{hash}) ---------- */
.pvz-podbor { margin-bottom: 32px; }
.pvz-podbor .pvz-podbor__title { max-width: none; margin: 0 0 24px; color: var(--ts-black); }
.pvz-podbor .setting {
margin: 0;
background: var(--ts-bg-surface);
border: 1px solid var(--ts-line-cool);
border-radius: var(--ts-radius-card);
}
@media (max-width: 767px) { .pvz-podbor .setting { width: auto; margin: 0 -3.5vw; border-width: 1px 0; border-radius: 0; } }
.pvz-podbor .setting__title {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 72px;
padding: 20px 24px;
font: 600 18px/24px var(--ts-font);
color: var(--ts-black);
transition: color 300ms;
}
@media (min-width: 768px) { .pvz-podbor .setting__title { font-size: 24px; line-height: 32px; } }
@media (max-width: 767px) { .pvz-podbor .setting__title { padding: 16px 3.5%; } }
.pvz-podbor .setting__title:hover { color: var(--ts-blue); }
.pvz-podbor .setting__title:before { content: none; background: none; } /* картинки setting-arrow-lg.svg нет (404) — стрелка в разметке */
.pvz-podbor .open-preferences-arrow { display: flex; flex: none; color: var(--ts-gray); transition: transform 300ms var(--transition-timing-function); }
.pvz-podbor .open-preferences-arrow svg { width: 24px; height: 24px; stroke-width: 1.5; }
.pvz-podbor .open-preferences-arrow.open { transform: rotate(180deg); }
.pvz-podbor .setting__content { padding: 0 24px 24px; animation: pvz-fade-in 300ms var(--transition-timing-function); }
@media (max-width: 767px) { .pvz-podbor .setting__content { padding: 0 3.5% 24px; } }
.pvz-podbor .setting-group { max-width: none; margin: 0; padding: 24px 0; border-top: 1px solid var(--ts-line-cool); }
.pvz-podbor .setting-group__title { display: block; margin: 0 0 12px; font: 600 16px/1.25 var(--ts-font); color: var(--ts-black); }
.pvz-podbor .setting-group p { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--ts-gray); }
.pvz-podbor .setting-group .form-group { max-width: 640px; margin-bottom: 0; }
.pvz-podbor .pvz-podbor__search { margin-bottom: 16px; }
.pvz-podbor .form-group .ts-input { font-size: 16px; } /* на телефоне temp.css делал 14 — iOS увеличивал страницу */
.pvz-podbor .checkbox,
.pvz-podbor .radio { margin-bottom: 12px; }
/* на сенсорных экранах строка флажка/кружка — 44 по высоте (кроме флажков в аккордеоне городов) */
@media (pointer: coarse) {
.pvz-podbor .setting-group > .checkbox,
.pvz-podbor .radio-block__group > .radio { margin-bottom: 0; }
.pvz-podbor .setting-group > .checkbox .styled-checkbox + label,
.pvz-podbor .radio-block__group > .radio .styled-radio + label { padding-top: 10px; padding-bottom: 10px; }
.pvz-podbor .setting-group > .checkbox .styled-checkbox + label:before,
.pvz-podbor .setting-group > .checkbox .styled-checkbox:checked + label:after,
.pvz-podbor .radio-block__group > .radio .styled-radio + label:before { top: 12px; }
}
.pvz-podbor .radio-block { margin: 4px 0 12px; }
.pvz-podbor .radio-block__title { margin-bottom: 12px; font: 600 16px/1.25 var(--ts-font); }
.pvz-podbor .radio-block__group { margin-left: 32px; }
/* «от — до» с единицей ₽ / мес справа внутри поля */
.pvz-podbor .budget-form,
.pvz-podbor .payback-form { gap: 12px; }
.pvz-podbor .budget-form .sep,
.pvz-podbor .payback-form .sep { margin: 0 0 16px; color: var(--ts-light-gray); }
.pvz-podbor .budget-form .form-group:before,
.pvz-podbor .payback-form .form-group:before { top: 12px; right: 16px; font-size: 16px; line-height: 24px; color: var(--ts-light-gray); }
.pvz-podbor .budget-form .ts-input { padding-right: 40px; }
.pvz-podbor .payback-form .ts-input { padding-right: 52px; }
.pvz-podbor .pvz-podbor__dynamics { margin-top: 24px; }
.pvz-podbor .pvz-podbor__dynamics .setting-group__title { font-size: 16px; }
/* Аккордеон городов: строки через линию, стрелка — шеврон, отмеченный раздел — зелёная точка */
.pvz-podbor .city-accordion .accordion__group,
.pvz-podbor .city-accordion .submenu--last li { border-color: var(--ts-line-cool); }
.pvz-podbor .city-accordion .accordion li { font-size: 16px; }
.pvz-podbor .city-accordion .accordion .opener { color: var(--ts-black); transition: color 300ms; }
.pvz-podbor .city-accordion .accordion .opener:hover { color: var(--ts-blue); }
.pvz-podbor .city-accordion .accordion__arrow { color: var(--ts-gray); }
.pvz-podbor .city-accordion .accordion__arrow::before {
content: '';
width: 20px;
height: 20px;
margin: 2px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m14.41 10.67-6.25 6.25a.94.94 0 0 1-1.32-1.33L12.42 10 6.84 4.42a.94.94 0 0 1 1.33-1.33l6.25 6.25a.94.94 0 0 1 0 1.33'/%3E%3C/svg%3E") center / 16px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m14.41 10.67-6.25 6.25a.94.94 0 0 1-1.32-1.33L12.42 10 6.84 4.42a.94.94 0 0 1 1.33-1.33l6.25 6.25a.94.94 0 0 1 0 1.33'/%3E%3C/svg%3E") center / 16px no-repeat;
transition: transform 300ms;
}
.pvz-podbor .city-accordion .accordion__arrow.open { color: var(--ts-blue); }
.pvz-podbor .city-accordion .accordion .selected { background: var(--ts-green); }
.pvz-podbor .city-accordion .submenu:not([style*="none"]) { animation: pvz-fade-in 300ms var(--transition-timing-function); }
.pvz-podbor .form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px !important; }
.pvz-podbor .btn-save-preferences { margin-top: 0; }
.pvz-podbor .error-message.ts-error { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--ts-red); }
.pvz-podbor .form-group .ts-input[style*="red"] { border-color: var(--ts-red) !important; }
/* Счётчик объектов (h1.h1 — его ищет podbor-loader.js) */
h1.h1.pvz-podbor__count { max-width: none; margin: 32px 0 24px; font-size: 32px; font-weight: 700; line-height: 1.3; }
@media (max-width: 1279px) { h1.h1.pvz-podbor__count { font-size: 28px; } }
@media (max-width: 767px) { h1.h1.pvz-podbor__count { font-size: 24px; } }
/* Загрузка: синяя крутилка 40; podbor-loader.js пересоздаёт её с инлайн-цветами — перекрываем */
.pvz-podbor__loader,
#pickup-points-loader { padding: 40px 0 !important; text-align: center; }
.pvz-podbor__spinner,
#pickup-points-loader > div {
display: inline-block;
width: 40px !important;
height: 40px !important;
border: 3px solid var(--ts-line-cool) !important;
border-top-color: var(--ts-blue) !important;
border-radius: 50%;
animation: ts-spin 1s linear infinite !important;
}
#pickup-points-loader p { margin-top: 16px !important; font-size: 14px; line-height: 20px; color: var(--ts-gray) !important; }
#pickup-points-loader .error { color: var(--ts-red) !important; }
/* Лента: personal-page.js ставит контейнеру display:flex, карточкам — инлайн-ширину, отступы и скругление 10;
* здесь — сетка ленты (1 → 2 с 640 → 3 с 1024) и карточка .ts-card, как на листингах */
#pickup-points.pvz-podbor-feed[style*="flex"] {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
margin: 0 0 32px !important;
}
@media (min-width: 640px) { #pickup-points.pvz-podbor-feed[style*="flex"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #pickup-points.pvz-podbor-feed[style*="flex"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { #pickup-points.pvz-podbor-feed[style*="flex"] { gap: 0; margin: 0 -3.5vw 32px !important; } }
.pvz-podbor-feed > .pvz-podbor-card {
display: flex !important;
margin: 0 !important;
padding: 20px !important;
border: 1px solid var(--ts-line-cool) !important;
border-radius: var(--ts-radius-card) !important;
}
@media (max-width: 639px) {
.pvz-podbor-feed > .pvz-podbor-card { padding: 16px 3.5% !important; border-width: 1px 0 0 !important; border-radius: 0 !important; }
.pvz-podbor-feed > .pvz-podbor-card:last-of-type { border-bottom-width: 1px !important; }
}
.pvz-podbor-pagination { grid-column: 1 / -1; display: flex; justify-content: center; margin: 24px 0 0; }
/* =====================================================================
* 3. ЭТАП 9. МОДАЛЬНЫЕ ОКНА (гайд 5.9)
* Окна с формами открывает Fancybox 3 (inline): содержимое .pvz-dialog получает класс .fancybox-content
* и кладётся в .fancybox-slide--html; крестик — .fancybox-close-small внутри окна. Появление и закрытие —
* прозрачностью силами Fancybox (~370 мс). Галерея объявления — свой .pvz-fancybox (этап 7), её не трогаем.
* ===================================================================== */
.fancybox-container:not(.pvz-fancybox) .fancybox-bg { background: var(--ts-black); }
.fancybox-container:not(.pvz-fancybox).fancybox-is-open .fancybox-bg { opacity: 0.5; }
/* ≥ 890: окно по центру и прижато к верху (отступ 96), скругление 20, поля 32/48, крестик-круг 40 снаружи */
.fancybox-slide--html { padding: 96px 64px 48px; }
.fancybox-slide--html::before { display: none; }
.fancybox-slide--html .fancybox-content.pvz-dialog {
width: 100%;
max-width: 768px;
margin: 0 auto;
padding: 32px 48px;
border-radius: var(--ts-radius-modal);
background: var(--ts-bg-surface);
color: var(--ts-black);
text-align: left;
vertical-align: top;
overflow: visible;
}
.fancybox-slide--html .fancybox-content.pvz-dialog--md { max-width: 640px; }
.fancybox-slide--html .fancybox-content.pvz-dialog--sm { max-width: 480px; }
.fancybox-slide--html .pvz-dialog .fancybox-close-small {
top: 0 !important;
right: -48px !important;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ts-bg-muted);
color: var(--ts-black);
opacity: 1;
transition: color 300ms var(--transition-timing-function);
}
.fancybox-slide--html .pvz-dialog .fancybox-close-small::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 24px;
height: 24px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='m6 6 12 12M6 18 18 6'/%3E%3C/svg%3E") center / 24px no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='m6 6 12 12M6 18 18 6'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.fancybox-slide--html .pvz-dialog .fancybox-close-small:hover { color: var(--ts-blue); }
.fancybox-slide--html .pvz-dialog .fancybox-close-small:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
.fancybox-slide--html .pvz-dialog .fancybox-close-small svg { display: none; }
/* < 890: окно — белая страница во весь экран, крестик 32 закреплён вверху справа (фон #EEF2F4);
* короткие окна (.pvz-dialog--compact) — карточка по центру, 90 % ширины */
@media (max-width: 889px) {
.fancybox-slide--html { padding: 0; }
.fancybox-slide--html .fancybox-content.pvz-dialog {
max-width: none;
min-height: 100%;
padding: 64px 3.5% 77px;
border-radius: 0;
}
.fancybox-slide--html .fancybox-content.pvz-dialog--md,
.fancybox-slide--html .fancybox-content.pvz-dialog--sm { max-width: none; }
.fancybox-slide--html .pvz-dialog .fancybox-close-small {
position: fixed;
top: 18px !important;
right: 3.5vw !important;
width: 32px;
height: 32px;
background: var(--ts-bg-page);
}
.fancybox-slide--html .pvz-dialog .fancybox-close-small::before { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px; }
/* область нажатия 44 при круге 32 */
.fancybox-slide--html .pvz-dialog .fancybox-close-small::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
.fancybox-slide--html:has(> .pvz-dialog--compact) { padding: 16px; }
.fancybox-slide--html:has(> .pvz-dialog--compact)::before { display: inline-block; }
.fancybox-slide--html .fancybox-content.pvz-dialog--compact {
width: 90%;
max-width: 480px;
min-height: 0;
padding: 48px 16px 24px;
border-radius: var(--ts-radius-modal);
vertical-align: middle;
}
.fancybox-slide--html .pvz-dialog--compact .fancybox-close-small { position: absolute; top: 8px !important; right: 8px !important; }
}
/* Содержимое окон: заголовок 24/700 (на телефоне 20), лид 16 серый, абзацы 16/24 */
.pvz-dialog .pvz-dialog__title { display: block; max-width: none; margin: 0; font: 700 24px/1.3 var(--ts-font); color: var(--ts-black); text-align: left; }
@media (max-width: 767px) { .pvz-dialog .pvz-dialog__title { font-size: 20px; } }
.pvz-dialog .pvz-dialog__lead { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--ts-gray); }
.pvz-dialog p { font-size: 16px; line-height: 24px; color: var(--ts-black); }
.pvz-dialog .pvz-dialog__form { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.pvz-dialog .pvz-dialog__form .ts-btn { margin-top: 8px; }
/* «Помощь в подборе» / «Нужна помощь в покупке?»: заголовок, три пункта с галочкой, форма
* (имя и телефон в ряд с 768), «Цель инвестиции» — кружки, кнопка --red */
.pvz-help .pvz-help__head { margin-bottom: 24px; }
.pvz-help .pvz-checks { margin-bottom: 32px; }
.pvz-help .pvz-help__form { display: flex; flex-direction: column; gap: 24px; }
.pvz-help .pvz-help__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 768px) { .pvz-help .pvz-help__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pvz-help .pvz-help__submit { margin-top: 8px; }
/* Окно успеха/ошибки (.pvz-result внутри .pvz-dialog--compact). jQuery/Fancybox ставят окну инлайн
* display: inline-block — перекрываем на inline-flex (строчный — чтобы работало центрирование слайда) */
.fancybox-slide--html .fancybox-content.pvz-result { display: inline-flex !important; }
.pvz-dialog.pvz-result .pvz-result__title { font-size: 24px; }
@media (max-width: 1279px) { .pvz-dialog.pvz-result .pvz-result__title { font-size: 20px; } }
@media (max-width: 767px) { .pvz-dialog.pvz-result .pvz-result__title { font-size: 18px; } }
/* Подтверждение (.ts-confirm): заголовок 24/600 по центру, «Отмена» --outline + действие --blue в ряд —
* окна кабинета продавца, см. seller-auth.css */
/* ---------- Окно «Публичная оферта» (#policy-modal; скрипт ставит style.display = flex / none) ---------- */
#policy-modal.pvz-policy-modal {
align-items: flex-start;
justify-content: center;
overflow-y: auto;
overscroll-behavior: contain;
background: color-mix(in srgb, var(--ts-black) 50%, transparent);
animation: pvz-fade-in 300ms var(--transition-timing-function);
}
#policy-modal .pvz-policy-modal__panel {
flex: none;
width: calc(100% - 128px);
max-width: 768px;
max-height: none;
margin: 96px auto 48px;
padding: 32px 48px;
border-radius: var(--ts-radius-modal);
background: var(--ts-bg-surface);
box-shadow: none;
overflow: visible;
color: var(--ts-black);
}
#policy-modal .pvz-policy-modal__close {
position: absolute;
top: 0;
right: -48px;
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--ts-bg-muted);
color: var(--ts-black);
font-size: 0;
cursor: pointer;
transition: color 300ms var(--transition-timing-function);
}
#policy-modal .pvz-policy-modal__close:hover { color: var(--ts-blue); }
#policy-modal .pvz-policy-modal__close:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: 2px; }
#policy-modal .pvz-policy-modal__close .ts-icon { width: 24px; height: 24px; }
#policy-modal .modal-content h2 { margin: 0 0 16px; padding-right: 8px; font: 700 24px/1.3 var(--ts-font); color: var(--ts-black); }
#policy-modal .modal-content h3 { margin: 24px 0 8px; font: 600 18px/24px var(--ts-font); color: var(--ts-black); }
#policy-modal .modal-content p,
#policy-modal .modal-content ul { margin: 0 0 12px; font-size: 16px; line-height: 24px; }
@media (max-width: 889px) {
#policy-modal.pvz-policy-modal { background: var(--ts-bg-surface); }
#policy-modal .pvz-policy-modal__panel { width: 100%; max-width: none; min-height: 100%; margin: 0; padding: 64px 3.5% 77px; border-radius: 0; }
#policy-modal .pvz-policy-modal__close { position: fixed; top: 18px; right: 3.5vw; width: 32px; height: 32px; background: var(--ts-bg-page); }
#policy-modal .pvz-policy-modal__close::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
#policy-modal .pvz-policy-modal__close .ts-icon { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
#policy-modal .modal-content h2 { font-size: 20px; }
#policy-modal .modal-content h3 { font-size: 16px; }
#policy-modal .modal-content p,
#policy-modal .modal-content ul { font-size: 14px; line-height: 20px; }
}
/* =====================================================================
* 4. ЭТАП 10. СТАТЬИ, SEO-ТЕКСТЫ, ПОЛИТИКА, 404/403 (гайд 6.4, 6.5)
* Только типографика, тексты не меняются: блок 760, H2 24/32 700, H3 18/24 600, текст 16/24, списки с отступом 20,
* ссылки .ts-link. Статья-гайд на /new (.how-to-send), тексты листингов и брендов (.pvz-container), главной.
* ===================================================================== */
.pvz-container,
.home-seo-text,
.how-to-send.pvz-article {
max-width: 760px;
margin: 0 0 96px;
padding: 0;
font: 400 16px/24px var(--ts-font);
color: var(--ts-black);
text-align: left;
}
.how-to-send.pvz-article { margin-top: 48px; }
.pvz-container h2,
.home-seo-text h2,
.how-to-send.pvz-article h2 { max-width: none; margin: 32px 0 12px; font: 700 24px/32px var(--ts-font); color: var(--ts-black); text-align: left; }
.pvz-container h2:first-child,
.home-seo-text h2:first-child,
.how-to-send.pvz-article h2:first-child { margin-top: 0; }
.pvz-container h3,
.home-seo-text h3,
.how-to-send.pvz-article h3 { margin: 24px 0 8px; font: 600 18px/24px var(--ts-font); color: var(--ts-black); text-align: left; }
.pvz-container h4,
.home-seo-text h4,
.how-to-send.pvz-article h4 { margin: 20px 0 8px; font: 600 16px/24px var(--ts-font); color: var(--ts-black); }
.pvz-container p,
.home-seo-text p,
.how-to-send.pvz-article p { max-width: none; margin: 0 0 12px; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--ts-black); text-align: left; }
/* у .how-to-send p в styles.css 18/1.7/300 с !important */
.how-to-send.pvz-article p { font-size: 16px !important; font-weight: 400; line-height: 24px !important; }
.pvz-container ul,
.pvz-container ol,
.home-seo-text ul,
.home-seo-text ol { margin: 0 0 12px; padding-left: 20px; font-size: 16px; line-height: 24px; text-align: left; }
.pvz-container ul li,
.pvz-container ol li,
.home-seo-text li { margin: 0 0 8px; font-size: 16px; line-height: 24px; }
.pvz-container ol li strong { color: var(--ts-black); }
/* В статье-гайде — обёртки разделов (заголовок + абзацы, без пунктов) — без отступа */
.how-to-send.pvz-article ul { margin: 0; padding: 0; }
/* Пустые строки
между абзацами в статьях заменены отступами абзацев */
.how-to-send.pvz-article > br,
.how-to-send.pvz-article ul > br,
.home-seo-text > br,
.home-seo-text .collapsed-text > br,
.pvz-container > br { display: none; }
.pvz-container a,
.home-seo-text a,
.how-to-send.pvz-article a { color: var(--ts-blue); text-decoration: none; white-space: normal; transition: color 300ms; }
.pvz-container a:hover,
.home-seo-text a:hover,
.how-to-send.pvz-article a:hover { color: var(--ts-blue-hover); text-decoration: none; }
.pvz-highlight {
margin: 0 0 12px;
padding: 16px 20px;
border: 0;
border-radius: var(--ts-radius-btn);
background: var(--ts-bg-surface) linear-gradient(var(--ts-pale-blue), var(--ts-pale-blue));
font-size: 16px;
line-height: 24px;
}
@media (max-width: 767px) {
.pvz-container h2,
.home-seo-text h2,
.how-to-send.pvz-article h2 { font-size: 20px; line-height: 28px; }
.pvz-container h3,
.home-seo-text h3,
.how-to-send.pvz-article h3 { font-size: 16px; line-height: 24px; }
.pvz-container p,
.pvz-container ul li,
.pvz-container ol li,
.home-seo-text p,
.home-seo-text li,
.how-to-send.pvz-article p { font-size: 14px; line-height: 20px; }
.how-to-send.pvz-article p { font-size: 14px !important; line-height: 20px !important; }
.pvz-container,
.home-seo-text,
.how-to-send.pvz-article { margin-bottom: 48px; }
}
/* «Читать полностью»: сворачивание плавно по высоте, низ уходит в цвет фона (гайд 6.4, 1.10) */
.home-seo-text .collapsed-text {
max-height: 240px;
overflow: hidden;
position: relative;
transition: max-height 500ms var(--transition-timing-function);
}
.home-seo-text .collapsed-text::after {
height: 96px;
background: linear-gradient(color-mix(in srgb, var(--ts-bg-page) 0%, transparent), var(--ts-bg-page));
opacity: 1;
pointer-events: none;
transition: opacity 300ms var(--transition-timing-function);
}
.home-seo-text .collapsed-text.expanded { max-height: none; }
.home-seo-text .collapsed-text.expanded::after { display: block; opacity: 0; }
@supports (interpolate-size: allow-keywords) {
.home-seo-text { interpolate-size: allow-keywords; }
.home-seo-text .collapsed-text { height: 240px; max-height: none; transition: height 500ms var(--transition-timing-function); }
.home-seo-text .collapsed-text.expanded { height: auto; }
}
.home-seo-text .read-more-btn.ts-btn--text {
gap: 4px;
min-height: 44px;
margin: 4px 0 0;
padding: 0;
font: 500 16px/24px var(--ts-font);
color: var(--ts-blue);
}
.home-seo-text .read-more-btn.ts-btn--text:hover { color: var(--ts-blue-hover); }
.home-seo-text .read-more-btn span { position: static; margin: 0; }
.home-seo-text .read-more-btn .btn-icon { display: inline-flex; transition: transform 300ms var(--transition-timing-function); }
.home-seo-text .read-more-btn .btn-icon .ts-icon { width: 20px; height: 20px; }
.home-seo-text .read-more-btn.expanded .btn-icon { transform: rotate(180deg); }
/* Ссылки на города под SEO-текстом /wb, /ozon — как блок ссылок на листингах (.pvz-links) */
.pvz-links.pvz-links--seo { margin: -64px 0 96px; padding: 0; }
@media (max-width: 767px) { .pvz-links.pvz-links--seo { margin: -24px 0 48px; } }
/* ---------- Политика конфиденциальности: H1 по крошкам, аккордеон — панель с линиями, низ 96 ---------- */
.pvz-policy { padding-bottom: 96px; }
.pvz-policy .pvz-policy__title { max-width: none; margin: 0 0 24px; color: var(--ts-black); }
.pvz-policy .policy-section {
background: var(--ts-bg-surface);
border: 1px solid var(--ts-line-cool);
border-radius: var(--ts-radius-card);
overflow: hidden;
}
.pvz-policy .policy-item { margin: 0; border: 0; border-top: 1px solid var(--ts-line-cool); border-radius: 0; }
.pvz-policy .policy-item:first-child { border-top: 0; }
.pvz-policy .policy-toggle {
gap: 16px;
min-height: 56px;
padding: 16px 24px;
background: var(--ts-bg-surface);
font: 500 16px/24px var(--ts-font);
color: var(--ts-black);
text-align: left;
transition: color 300ms var(--transition-timing-function);
}
.pvz-policy .policy-toggle:hover { background: var(--ts-bg-surface); color: var(--ts-blue); }
.pvz-policy .policy-toggle:focus-visible { outline: 2px solid var(--ts-blue); outline-offset: -2px; }
.pvz-policy .policy-toggle span { font-weight: 500; }
.pvz-policy .policy-toggle .arrow { display: flex; flex: none; color: var(--ts-gray); transition: transform 300ms var(--transition-timing-function); }
.pvz-policy .policy-toggle .arrow .ts-icon { width: 20px; height: 20px; }
.pvz-policy .policy-content { padding: 0 24px 16px; background: var(--ts-bg-surface); font-size: 16px; line-height: 24px; color: var(--ts-black); }
.pvz-policy .policy-content[style*="block"] { animation: pvz-fade-in 300ms var(--transition-timing-function); }
.pvz-policy .policy-content p { margin: 0 0 12px; }
@media (max-width: 767px) {
.pvz-policy { padding-bottom: 48px; }
.pvz-policy .policy-section { margin: 0 -3.5vw; border-width: 1px 0; border-radius: 0; }
.pvz-policy .policy-toggle { padding: 16px 3.5%; font-size: 14px; line-height: 20px; }
.pvz-policy .policy-content { padding: 0 3.5% 16px; font-size: 14px; line-height: 20px; }
}
/* Короткие страницы (ошибки, итог оплаты, кабинет): подвал прижат к низу экрана */
.wrapper:has(.pvz-error),
.wrapper:has(.pvz-result.ts-panel) { display: flex; flex-direction: column; min-height: 100vh; }
.wrapper:has(.pvz-error) > .main,
.wrapper:has(.pvz-result.ts-panel) > .main { flex: 1 0 auto; }
/* ---------- 404 / 403: белая панель по центру, H1, серый текст, синяя кнопка ---------- */
.pvz-error.ts-panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
max-width: 640px;
margin: 0 auto 96px;
padding: 48px 32px;
text-align: center;
}
.pvz-error .pvz-error__title { max-width: none; margin: 0; color: var(--ts-black); text-align: center; }
.pvz-error .pvz-error__text { margin: 0; font-size: 16px; line-height: 24px; color: var(--ts-gray); }
.pvz-error .pvz-error__btn { margin-top: 8px; }
@media (max-width: 767px) { .pvz-error.ts-panel { margin: 0 -3.5vw 48px; padding: 40px 3.5%; } }
/* H1 страниц со шкалой .ts-h1 (40/32/24, 700): у h1 в styles.css 40/600 и max-width calc(100% - 420px) */
h1.ts-h1.pvz-policy__title,
h1.ts-h1.pvz-error__title,
h1.ts-h1.pvz-podbor__title { font-size: 40px; font-weight: 700; line-height: 1.3; }
@media (max-width: 1279px) {
h1.ts-h1.pvz-policy__title,
h1.ts-h1.pvz-error__title,
h1.ts-h1.pvz-podbor__title { font-size: 32px; }
}
@media (max-width: 767px) {
h1.ts-h1.pvz-policy__title,
h1.ts-h1.pvz-error__title,
h1.ts-h1.pvz-podbor__title { font-size: 24px; }
}