/* =========================================================================== cd-obqva-tel.css — ОБЯВАТА НА ТЕЛЕФОН Зарежда се САМО с ключа (?mazno=1) и само на обявата: ads/view.blade.php, след cd-redesign.css. Без ключа файлът не съществува за страницата — там нищо не се променя. Граница за „телефон“: до 575.98 px (под нея .container е на цялата ширина). Таблетът не се пипа; компютърът (от 992 px) е в cd-obqva-komp.css — същата нова разметка, показана по неговите пропорции. Решения на собственика (10–12.10.2026): - снимката започва веднага под главата (82 px); „назад“, „Сподели“ и „Запази“ са кръгли бутони върху нея; - лентата с малки снимки под голямата е задължителна; - заглавие без „· година · цена €…“ (остават в

, тук само не се виждат); - фактите са с иконките от картите в търсенето (ul.cd-kv — нова разметка зад ключа); - знамето е до държавата; „Проверена“ слиза от снимката до нея. Размери: Inter 24/16/14/12, отстъп 24 px (20 под 375 px), лексемите са от cd-redesign.css. =========================================================================== */ /* ПРИСАЖДАНЕТО ОТ МАКЕТА (13.10 вечерта). Собственикът видя макета на новата обява (версия 5) и реши: „вместо да я сторим наново, да вземем най-доброто от това и да го сложим на нашата страница“. Взетото, само за телефон: - лентата с малки снимки е ЗАЛЕПЕНА за голямата, плътна („като 360“); държавата със знамето е върху снимката; - под снимките започва БЯЛ ЛИСТ (целият .cd-hero): „Обява №“, името, значките, шест РАВНИ факта в поднос, цената; - панелът с цената е СЪЩИЯТ (бутоните, доставката, изплащането, сметката) — само без рамка, защото вече е върху листа; - редът с доверието е под листа, върху сивото; после разделите с текст са БЕЛИ ПЛОЧКИ върху сивото; - техническите детайли са ПЪРВИ, тест драйвът е след тях и започва с голямата оценка („10/10“). Не са пипани: балончетата (един вид с картите в търсенето), бутоните, оборудването, гумите, картите във „Вижте още“. */ /* Новата разметка зад ключа не се вижда над телефон. */ html.cd-m .cd-kv, html.cd-m .cd-kv-lenta, html.cd-m .cd-hl-proverena, html.cd-m .cd-obqva-nomer, html.cd-m .cd-gal-durjava, html.cd-m .cd-tdr-ocenka, html.cd-m .cd-tdr-nqma, html.cd-m .cd-vruzka, html.cd-m .cd-a1-skica, html.cd-m .cd-tdr-kratko, html.cd-m .cd-tile-vid, html.cd-m .cd-warranty-vruzka, html.cd-m .cd-fl-kaso{ display: none; } /* Тест драйвът над телефон остава какъвто беше: новите обвивки в реда (име / двоеточие / описание) там са „прозрачни“. Без това на таблет и компютър с ключа редът се цепеше на колони с дупка около двоеточието — намерено при проверката на 13.10 (и пак при присаждането: двоеточието вече е в свой span, за да се скрие на телефон). */ @media (min-width: 576px){ html.cd-m .cd-condition-chip .cd-tdr-ime, html.cd-m .cd-condition-chip .cd-tdr-opis, html.cd-m .cd-condition-chip .cd-tdr-dv, html.cd-m .cd-condition-chip .cd-tdr-dulgo{ display: contents; } } /* Оборудването, на всяка ширина с ключа: оригиналният надпис под българското име често е единственото, което различава два реда („Подгряване на седалките“ два пъти), а темата го рисува #AEB4BE при 11,5 px — 2,09:1 (проверката, 13.10). Става #69717F (4,6:1): пак по-блед от името, но се чете. */ html.cd-m .cd-redesign .cd-equip-grid li small.cd-equip-orig{ color: #69717F; } /* Клипът на двигателя (собственикът, 14.10): в лентата — черна плочка с ▶ и „ДВИГАТЕЛ“ (Auto1 не дава кадър от клипа, а кадър, изтеглен от самия клип, значи всеки посетител да тегли видеото от Auto1); в реда със значките — хапче „▶ Видео на двигателя“ след другите. Плочката е над воала на квадратчето; избраната — с бяла черта отдолу. */ html.cd-m .cd-hero .cd-thumb[data-type="video"] img{ opacity: 0; } html.cd-m .cd-hero .cd-thumb .cd-thumb-play{ z-index: 2; flex-direction: column; gap: 3px; background: var(--cd-ink); color: #fff; } html.cd-m .cd-hero .cd-thumb .cd-thumb-play svg{ width: 20px; height: 20px; } html.cd-m .cd-hero .cd-thumb--dvig .cd-thumb-play::after{ content: "ДВИГАТЕЛ"; font-size: 9px; line-height: 1; font-weight: 700; letter-spacing: .08em; opacity: .85; } html.cd-m .cd-hero .cd-thumb.active .cd-thumb-play{ box-shadow: inset 0 -3px 0 rgba(255,255,255,.92); } html.cd-m .cd-hero a.cd-hl-video{ text-decoration: none; } html.cd-m .cd-hero .cd-hl-video svg{ width: 14px; height: 14px; color: var(--cd-ink); } /* „Описани щети“ при Auto1 без нито една снимка с описана щета (близките снимки отидоха в голямата галерия, а скицата остава): празната лента със стрелките не се показва — на всички ширини */ html.cd-m .cd-sek-a1 .cd-media-strip-wrap:not(:has(.item)){ display: none; } /* На телефон картата с VIN-а е на целия ред и VIN-ът не се чупи — иначе 17-те знака ставаха две „числа“ */ @media (max-width: 575.98px){ html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card--vin{ grid-column: 1 / -1; } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card--vin strong{ overflow-wrap: normal; white-space: nowrap; } } /* „Последен от видимите“ (собственикът, 14.10): в галерията клипът е последен, но в лентата стои на последното място, което се вижда без превъртане — на телефон 4-то (виждат се 4,6 квадратчета), на компютър 9-о (девет на ред). Само подредба на окото (order): стрелките и плъзгането по голямата снимка минават през снимките и стигат до клипа накрая. На таблета (старата лента) той е последен. */ @media (max-width: 575.98px){ html.cd-m .cd-hero .cd-thumb-row > .cd-thumb:nth-child(n+4){ order: 2; } html.cd-m .cd-hero .cd-thumb-row > .cd-thumb[data-type="video"]{ order: 1; } } @media (min-width: 992px){ html.cd-m .cd-hero .cd-thumb-row > .cd-thumb:nth-child(n+9){ order: 2; } html.cd-m .cd-hero .cd-thumb-row > .cd-thumb[data-type="video"]{ order: 1; } } /* Градът/провинцията е ПРЕД знамето, а знамето — точно пред името на държавата: „York Springs · [знаме] САЩ“, „BC · [знаме] Канада“ (собственикът, 12.10). Важи на всяка ширина с ключа. */ html.cd-m .cd-hero .cd-country-flag .cd-country-yard{ order: -1; margin-left: 0; } /* Отметката „като с четка“ (образецът е от собственика, 12.10) — ползва се като маска: оборудването и тест драйвът. На всяка ширина с ключа: трябва и на компютър (cd-obqva-komp.css). */ html.cd-m .cd-redesign{ --cd-otmetka: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M.9 17C.6 16.2 1.9 14.6 3.4 14.9 5 15.2 6.8 17.2 7.8 18.9 10.4 12 14.6 5.2 19.4 1.4 20.5.9 22.6.5 23.3.7 23.5.8 23.4 1.1 23.2 1.3 18.2 6.6 13.2 14.8 9.6 22.4 9.2 23.3 8 23.6 6.8 23.4 5.6 23.2 5.2 22.6 4.6 21.8 3.6 20.4 2.2 18.8.9 17Z'/%3E%3C/svg%3E"); } /* Червеният Х със заоблени краища (образецът е от собственика, 12.10) — за забележките. */ html.cd-m .cd-redesign{ --cd-hiks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5 5 19' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E"); } /* ПРОЗОРЦИТЕ НАД ГЛАВАТА (проверката на живо, 19.10). cd-redesign.css вдига панела с цената на z-index 100000, докато „На изплащане“, „Купи сега“ или „Наддай“ е отворен — това е за компютъра, където панелът е sticky и прави свой слой. На телефон редът и колоните са display: contents (долу), панелът става flex дете на .container и z-index-ът му ВАЖИ: целият панел отиваше над главата на сайта. Над листа, под тъмния фон, вместо логото и менюто се виждаха цената и „КУПИ СЕГА“. Без вдигането панелът е обикновено съдържание под главата, а самият прозорец (position: fixed, 100000) пак е над всичко — и над главата, и над лентата долу. До 991 px: от 576 нагоре колоната е static и не е flex дете, там правилото и без това не действаше. */ @media (max-width: 991.98px){ html.cd-m .cd-sticky-panel:has(.cd-finance-modal:not([hidden])){ z-index: auto; } } @media (max-width: 575.98px){ html.cd-m .cd-redesign{ --cd-ot: 12px; } /* + 12 px на .container = отстъп 24 */ /* ---- Подредба: снимката първа, заглавието под нея ---- Редът и двете му колони стават „прозрачни“ (display: contents), така че галерията, заглавието, фактите, значките, доверието и панелът с цената са деца на един стълб и редът им се сменя само с order. Разметката и всички куки за скриптовете остават както са. */ html.cd-m .cd-hero{ padding-top: 58px; } /* 24 (.main) + 58 = 82: точно под главата */ html.cd-m .cd-hero > .container{ position: relative; display: flex; flex-direction: column; } html.cd-m .cd-hero-row, html.cd-m .cd-hero-row > div{ display: contents; } /* Съобщението „продадена / изтекла“ стоеше ЗАД главата и не се виждаше. Сега е под нея, над снимката. */ html.cd-m .cd-redesign > .container:first-child{ padding-top: 58px; } /* padding, не margin: полето се слива с това на .main */ html.cd-m .cd-redesign > .container ~ .cd-hero{ padding-top: 0; } /* ---- Голямата снимка: от край до край, 4:3 ---- */ /* Обвивката на галерията е и ГОРНИЯТ РЪБ НА БЕЛИЯ ЛИСТ: под лентата с малките снимки оставя 10 px от сивото на страницата и рисува заобления връх на листа (::after). Самият лист е фонът на .cd-hero — виж „Белият лист“ долу. */ html.cd-m .cd-hero .cd-gallery-wrap{ order: -1; margin: 0 -12px; border-radius: 0; overflow: visible; filter: none; background: var(--cd-surface-2); } html.cd-m .cd-hero .cd-gallery-wrap::after{ content: ""; display: block; height: 20px; margin-top: 10px; border-radius: var(--cd-r-lg) var(--cd-r-lg) 0 0; background: var(--cd-surface); } html.cd-m .cd-hero .cd-main-stage{ height: auto; padding-top: 0; aspect-ratio: 4 / 3; border-radius: 0; } html.cd-m .cd-hero .cd-gallery-arrow{ display: none !important; } /* на телефон: пръст и лентата отдолу */ html.cd-m .cd-hero .cd-gallery-counter{ right: 12px; bottom: 12px; height: 24px; padding: 0 10px; font-size: 12px; line-height: 24px; font-weight: 600; background: rgba(21,24,31,.64); -webkit-backdrop-filter: none; backdrop-filter: none; } /* Една снимка: няма какво да се брои и няма лента. */ html.cd-m .cd-hero .cd-gallery-wrap:has(.cd-thumb:only-child) .cd-gallery-counter, html.cd-m .cd-hero .cd-gallery-wrap:has(.cd-thumb:only-child) .cd-thumb-strip-wrap{ display: none; } /* Значките върху снимката: „Проверена“ отива до държавата (.cd-hl-proverena), защото горе вляво е „назад“. Часовникът на търга (и „Обявата е изтекла“) остава върху снимката — долу вляво, във вида на брояча. Обвивката вече включва и лентата, затова мястото се смята от височината на снимката (75vw). */ /* Редът е залепен за ДОЛНИЯ ръб на снимката (12 px над него), колкото и да е висок: горе е на 75vw − 12 и се вдига със собствената си височина. Вдясно оставя място за брояча „1 / 21“. */ html.cd-m .cd-hero .cd-gallery-badges{ top: calc(75vw - 12px); left: 12px; right: auto; max-width: calc(100vw - 24px - 76px); transform: translateY(-100%); flex-wrap: wrap-reverse; justify-content: flex-start; align-items: center; gap: 6px; pointer-events: none; /* wrap-reverse: не се ли съберат хапчето и часовникът („Нидерландия“ + „ОБЯВАТА Е ИЗТЕКЛА“ на 360 px), вторият минава НАД първия — редът е закачен за долния ръб */ } html.cd-m .cd-hero .cd-badge-verified{ display: none; } /* Държавата със знамето — бяло хапче долу вляво върху снимката (от макета). Само името на държавата: градът при САЩ и провинцията при Канада са до „Обява №“. */ html.cd-m .cd-hero .cd-gal-durjava{ display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 100%; height: 28px; padding: 0 11px 0 8px; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,32,.10), 0 4px 12px -4px rgba(15,23,32,.28); font-size: 13px; line-height: 28px; font-weight: 700; letter-spacing: -.005em; color: var(--cd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.cd-m .cd-hero .cd-gal-durjava img{ flex: none; width: 20px; height: 14px; border-radius: 3px; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); } html.cd-m .cd-hero .cd-badge-time{ flex: none; margin: 0; height: 24px; padding: 0 10px; font-size: 12px; line-height: 16px; font-weight: 600; background: rgba(21,24,31,.64); -webkit-backdrop-filter: none; backdrop-filter: none; } html.cd-m .cd-hero .cd-badge-time .badge-timeleft, html.cd-m .cd-hero .cd-badge-time .badge-timeexpired{ font-size: 12px; font-weight: 600; } html.cd-m .cd-hero .cd-badge-time:not(:has(.badge-timeleft, .badge-timeexpired)){ display: none; } /* празна, докато часовникът тръгне */ html.cd-m .cd-hero .cd-badge-time:has(.badge-timeexpired){ padding: 0; background: none; } /* „Обявата е изтекла“ си има свой червен фон */ /* Търгът е свършил, но колата още може да се купи: червена табелка „изтекла“ над червен бутон „Купи сега“ отказва купувача — върху снимката не се показва (собственикът, 12.10). Класът идва от main_carousel, само с ключа. */ html.cd-m .cd-hero .cd-badge-time--kupi:has(.badge-timeexpired){ display: none; } /* Същото и без :has() (по-стари телефони): щом търгът вече е свършил при отварянето, сървърът слага is-krai. */ html.cd-m .cd-hero .cd-badge-time--kupi.is-krai{ display: none; } /* ---- Трите кръгли бутона върху снимката ---- */ html.cd-m .cd-hero .cd-back-link, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn{ display: inline-flex; align-items: center; justify-content: center; gap: 0; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: 50%; background: rgba(21,24,31,.64); color: #fff; box-shadow: none; font-size: 0; line-height: 0; } html.cd-m .cd-hero .cd-back-link{ position: absolute; top: 12px; left: 12px; z-index: 6; } html.cd-m .cd-hero .cd-hero-title-actions{ position: absolute; top: 12px; right: 12px; z-index: 6; margin: 0; gap: 8px; flex-direction: row-reverse; /* „Запази“ е най-вдясно */ } html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn{ position: relative; } /* Надписът („Запази“, „Сподели“) не се вижда (font-size: 0 горе), но остава за екранните четци: темата го скрива с display: none и бутоните оставаха без име, а звездата в лентата долу, която го имаше, вече я няма. */ html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn span{ display: inline; } html.cd-m .cd-hero .cd-back-link::after, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn::after{ content: ""; position: absolute; inset: -2px; } /* място за пръста: 44 px */ html.cd-m .cd-hero .cd-back-link svg, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn svg{ width: 20px; height: 20px; stroke-width: 2; color: #fff; } /* Остават бели и след докосване (:hover залепва на телефон), и когато обявата е запазена — тогава звездата е плътна. */ html.cd-m .cd-hero .cd-back-link:hover, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn:hover, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn.is-active, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn:not(.is-active):hover, html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn.is-active:hover{ background: rgba(21,24,31,.64); color: #fff; border: 0; box-shadow: none; transform: none; } html.cd-m .cd-hero .cd-hero-title-actions .cd-pill-btn.is-active svg{ fill: #fff; } /* ---- Лентата с малки снимки: ЗАЛЕПЕНА за голямата, плътна ---- Собственикът, 13.10 (по макета): „галерията трябва да почва така на мобилно, да е като 360“ — малките снимки са от край до край, с по 2 px между тях и под голямата, без заоблени ъгли и без полета; колата „се обикаля“ кадър по кадър. Избраната е ясна, с тъмна черта отдолу; останалите са под лек воал. */ html.cd-m .cd-hero .cd-thumb-strip-wrap{ display: block; margin: 2px 0 0; } html.cd-m .cd-hero .cd-thumb-row{ gap: 2px; padding: 0; scroll-padding-inline: 0; overscroll-behavior-x: contain; } /* четири цели и около три пети от петата — вижда се, че има още */ /* content-visibility: квадратчетата извън екрана не се рисуват и снимките им (loading=lazy) не се теглят, докато лентата не стигне до тях. Без това браузърът теглеше 21 от 23 още при отварянето — при Auto1, Корея и САЩ малката снимка е същият файл като голямата. */ html.cd-m .cd-hero .cd-thumb{ width: calc((100vw - 8px) / 4.6); opacity: 1; border-radius: 0; box-shadow: none; content-visibility: auto; } html.cd-m .cd-hero .cd-thumb::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(245,247,250,.42); pointer-events: none; transition: opacity var(--cd-dur-1, 150ms) var(--cd-ease-std, ease); } html.cd-m .cd-hero .cd-thumb.active{ box-shadow: none; outline: 0; } html.cd-m .cd-hero .cd-thumb.active::after{ background: none; box-shadow: inset 0 -3px 0 var(--cd-ink); } html.cd-m .cd-hero .cd-thumb:focus-visible{ outline: 2px solid var(--cd-ink); outline-offset: -2px; } /* При отваряне се теглят само квадратчетата, които се виждат: първите пет (петото е на ръба; първото е самата голяма снимка). Снимката на всяко следващо няма кутия (display: none) и loading=lazy не я тегли, докато лентата не бъде докосната или превъртяна — тогава cd-obqva-tel.js слага .cd-thumbs-live на реда и всичко е както досега. Мерено на 13.10 (390 px): без това при отваряне тръгват 11 малки снимки — при Auto1, Корея и САЩ това са големите файлове. Шестото квадратче е извън екрана на всеки телефон (ширината му е 1/4,64 от екрана). */ html.cd-m .cd-hero .cd-thumb-row:not(.cd-thumbs-live) .cd-thumb:nth-child(n+6) img{ display: none; } /* ---- Белият лист ---- Целият .cd-hero под снимките е бял: „Обява №“, името, значките, фактите и цената са на ЕДНА повърхност, с един ляв ръб (24 px; 20 под 375 px). Върхът му е заобленото парче под лентата (.cd-gallery-wrap::after), дъното — заобленото парче над реда с доверието (.cd-trust::before); самият ред с доверието е вече върху сивото на страницата. */ html.cd-m .cd-redesign > .cd-hero{ background: var(--cd-surface); padding-bottom: 0; } /* ---- „Обява №“ над името (вдясно: градът/провинцията при САЩ и Канада) ---- */ html.cd-m .cd-hero .cd-obqva-nomer{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 2px; font-size: 11.5px; line-height: 18px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #69717F; } html.cd-m .cd-hero .cd-obqva-nomer > span:first-child{ flex: none; } html.cd-m .cd-hero .cd-obqva-nomer strong{ font-weight: 700; letter-spacing: .04em; color: var(--cd-body); } html.cd-m .cd-hero .cd-obqva-mqsto{ display: inline-flex; align-items: center; gap: 4px; min-width: 0; letter-spacing: .02em; text-transform: none; font-size: 12.5px; font-weight: 600; color: var(--cd-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.cd-m .cd-hero .cd-obqva-mqsto svg{ flex: none; width: 13px; height: 13px; stroke-width: 2; color: var(--cd-muted); } /* ---- Заглавието: името на свой ред, модификацията под него ---- */ html.cd-m .cd-hero .cd-hero-title-bar{ display: block; margin: 0; padding: 0 var(--cd-ot); border: 0; } html.cd-m .cd-hero .cd-hero-title-bar .cd-eyebrow, html.cd-m .cd-hero .cd-hero-title-bar .cd-meta-line{ display: none; } /* Размерът и височината на реда са на самото h1: модификацията е „гол“ текст в него и редът ѝ взимаше височината на голямото заглавие от темата — под името оставаше дупка. */ html.cd-m .cd-hero .cd-title{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 0; font-size: 18px; line-height: 26px; } html.cd-m .cd-hero .cd-title-main{ flex: 0 0 100%; font-size: 26px; line-height: 32px; font-weight: 800; letter-spacing: -.025em; } /* Модификацията стои до името (18 px — 16 беше дребно); „година · цена“ е втори ред с малки сиви букви. Видим е заради Google: целият текст остава в

(вариант „б“, собственикът, 12.10). .cd-title-sub е „прозрачен“ (display: contents), за да може опашката му да слезе на свой ред от левия край. */ html.cd-m .cd-hero .cd-title-sub{ display: contents; font-size: 18px; line-height: 28px; font-weight: 400; color: var(--cd-body); } html.cd-m .cd-hero .cd-title-opashka{ flex: 0 0 100%; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--cd-body); white-space: nowrap; } html.cd-m .cd-hero .cd-title-dot-pred{ display: none; } /* Точката между двигателя и модификацията („6.2 L · Luxury Collection“, САЩ): двете части са отделни парчета на гъвкавия ред и точката оставаше да виси в края на първия ред. Разстоянието между парчетата (8 px) стига; точките в „година · цена“ са вътре в опашката и остават. */ html.cd-m .cd-hero .cd-title-sub > .cd-title-dot{ display: none; } /* 14.10 — собственикът, след като го видя на живо: „цената трябва да е в подзаглавието и годината, не на долен ред… поне цената да я няма там и да е скрита“. Затова заглавието вече е обикновен текст на два реда: името, а под него модификацията и ГОДИНАТА на един ред („Sportback 50 TDI Mild-Hybrid quattro · 2019“). ЦЕНАТА в заглавието не се вижда (едрата цена е малко по-долу, в панела); остава в

— скрита само за окото, не с display:none, така че Google и екранните четци я четат. Правилата тук отменят гъвкавия ред по-горе (еднаква тежест, по-късно в файла). */ html.cd-m .cd-hero .cd-title{ display: block; } html.cd-m .cd-hero .cd-title-main{ display: block; } html.cd-m .cd-hero .cd-title-sub{ display: block; font-size: 18px; line-height: 26px; font-weight: 400; color: var(--cd-body); overflow-wrap: anywhere; } html.cd-m .cd-hero .cd-title-opashka{ display: inline; font-size: inherit; line-height: inherit; white-space: nowrap; } /* точката и годината вървят заедно: не се ли съберат, слизат двете, а точката не виси в края на реда */ html.cd-m .cd-hero .cd-title-dot-pred, html.cd-m .cd-hero .cd-title-sub > .cd-title-dot{ display: inline; } html.cd-m .cd-hero .cd-title-god{ white-space: nowrap; } html.cd-m .cd-hero .cd-title-cena{ position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- Значките: веднага под заглавието (собственикът, 13.10) ---- Балончетата са в ЕДИН вид с картите в търсенето (.cd-tag-trust в cd-search.css): бяло, тънка рамка, 12 px/700, цветна е само иконката. Стоят на ЕДИН ред; не се ли съберат, редът се плъзга настрани до края на екрана (собственикът, 12.10: „на два реда дразнят, трябва да са на ред, ако трябва scroll“). Държавата вече е върху снимката, а „Обява №“ — над заглавието; тук остават само балончетата. Няма ли нито едно (американска кола без данни за лота), редът не заема място. */ html.cd-m .cd-hero .cd-highlights-row{ display: block; margin: 12px var(--cd-ot) 0; } html.cd-m .cd-hero .cd-highlights-row:not(:has(.cd-highlights > *)){ display: none; } html.cd-m .cd-hero .cd-highlights-row > .cd-country-flag{ display: none; } html.cd-m .cd-hero .cd-highlights{ width: calc(100% + 2 * (12px + var(--cd-ot))); max-width: none; margin: -3px calc(-12px - var(--cd-ot)); padding: 3px calc(12px + var(--cd-ot)); scroll-padding-inline: calc(12px + var(--cd-ot)); display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html.cd-m .cd-hero .cd-highlights::-webkit-scrollbar{ display: none; } html.cd-m .cd-hero .cd-highlights:empty{ display: none; } html.cd-m .cd-hero .cd-highlights > *{ flex: none; } html.cd-m .cd-hero .cd-hl-proverena{ display: inline-flex; } /* „Инспекция“ (и CARFAX при Канада) е ВИНАГИ първа отляво (собственикът, 12.10; същото решение като в картите). */ html.cd-m .cd-hero .cd-highlights > .cd-highlight-doc, html.cd-m .cd-hero .cd-highlights > .cd-carfax-link{ order: -1; } html.cd-m .cd-hero .cd-highlight-pill{ padding: 5px 10px; gap: 6px; border-radius: var(--cd-r-sm); white-space: nowrap; font-size: 12px; line-height: 1.5; font-weight: 700; color: var(--cd-ink); box-shadow: 0 1px 3px rgba(15,23,32,.08); } html.cd-m .cd-hero .cd-highlight-pill svg{ width: 13px; height: 13px; flex: none; } html.cd-m .cd-hero .cd-highlight-pill .cd-pdf-ico{ width: 16px; height: 16px; } /* ---- Фактите: ШЕСТ РАВНИ в поднос, с иконките от картите в търсенето ---- Историята (за да не се върти пак): ред от сива иконка и 13-пикселов текст — „губят се“; бяла плоча върху сивото — ОТКАЗАНА („балони ли да правим?“); клетки без рамка — „няма контраст, няма йерархия“; големи числа + тих ред с думи — после, по макета на новата обява (13.10 вечерта): „да са равни според мен, на някои места са 6“. Затова: шест ЕДНАКВИ клетки, по три на ред, в сив поднос върху белия лист (подносът е вдлъбнат в листа, не е кутия върху сивото). Иконката е отгоре, стойността е плътна, името е малко, с главни букви. Между клетките — тънки черти. Името в разметката е ПРЕДИ стойността (за екранните четци: „Пробег: 28 488 км“), на екрана — под нея. */ html.cd-m .cd-hero .cd-quick-stats{ display: none; } html.cd-m .cd-hero .cd-kv-lenta{ display: block; order: 1; margin: 16px var(--cd-ot) 0; padding: 6px 0; border-radius: 16px; background: var(--cd-surface-2); } html.cd-m .cd-hero .cd-kv-lenta:not(:has(li)){ display: none; } html.cd-m .cd-hero .cd-kv{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; } html.cd-m .cd-hero .cd-kv li{ grid-column: span 2; position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 12px 6px 10px; text-align: center; } /* пет: долу са две — всяка на половин ред; четири: по две на ред; две: на половин ред всяка */ html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(5) ~ li:nth-child(n+4), html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(4), html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(4) ~ li, html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(2), html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(2) ~ li{ grid-column: span 3; } html.cd-m .cd-hero .cd-kv li:only-child{ grid-column: 1 / -1; } /* чертите: отвесна пред всяка клетка, която не е първа в реда си; водоравна над втория ред */ html.cd-m .cd-hero .cd-kv li::before{ content: ""; position: absolute; left: 0; top: 14px; bottom: 12px; width: 1px; background: var(--cd-line-2); } html.cd-m .cd-hero .cd-kv li:nth-child(3n+1)::before{ content: none; } html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(4) ~ li:nth-child(4)::before{ content: ""; } html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(4) ~ li:nth-child(3)::before{ content: none; } html.cd-m .cd-hero .cd-kv li:nth-child(n+4)::after{ content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--cd-line-2); } html.cd-m .cd-hero .cd-kv li:first-child:nth-last-child(4) ~ li:nth-child(3)::after{ content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--cd-line-2); } html.cd-m .cd-hero .cd-kv svg{ flex: none; width: 20px; height: 20px; stroke-width: 1.6; color: var(--cd-ink); } html.cd-m .cd-hero .cd-kv-t{ display: flex; flex-direction: column; align-items: center; min-width: 0; width: 100%; margin-top: 6px; } html.cd-m .cd-hero .cd-kv-st{ order: 1; max-width: 100%; font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--cd-ink); overflow-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* „Купе/Roadster“ се пренася след чертата (wbr); три реда стигат и за „SPORT UTILITY VEHICLE“ */ } html.cd-m .cd-hero .cd-kv-ed{ font-size: 11px; line-height: 1; font-weight: 600; letter-spacing: 0; color: var(--cd-body); } /* line-height 1: иначе „ПРОБЕГ“ и „МОЩНОСТ“ стоят 2 px под „ГОДИНА“ */ html.cd-m .cd-hero .cd-kv-ime{ order: 2; margin-top: 2px; font-size: 10.5px; line-height: 14px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #69717F; /* по-тъмно от --cd-muted: върху сивия поднос то е 2,9:1, това е 4,6:1 */ } } @media (max-width: 374.98px){ html.cd-m .cd-redesign{ --cd-ot: 8px; } /* отстъп 20 на тесни телефони */ html.cd-m .cd-hero .cd-deal-card .cd-fin-card-label{ font-size: 14.5px; } /* „На изплащане“ и вноската на един ред (.cd-deal-card — по-силно от правилата на панела по-долу във файла) */ html.cd-m .cd-hero .cd-kv li{ padding-left: 4px; padding-right: 4px; } html.cd-m .cd-hero .cd-kv-st{ font-size: 14px; line-height: 19px; } html.cd-m .cd-hero .cd-title-main{ font-size: 24px; line-height: 30px; } } /* Стъпките са мерени през 1 px от 320 до 440 (проверката, 13.10): „Автоматична“ се чупеше на „Автоматичн / а“ на 375–384, 400–404 и под 345 px — тоест на iPhone SE/mini и 16 Pro. С тези прагове остава поне 1,9 px запас на всяка ширина. */ @media (max-width: 389.98px){ html.cd-m .cd-hero .cd-kv-st{ font-size: 14px; line-height: 19px; } } @media (max-width: 349.98px){ html.cd-m .cd-hero .cd-kv li{ padding-left: 2px; padding-right: 2px; } /* „На изплащане“ и вноската на един ред и на 320 px (мерено: иначе името се пренасяше на два реда) */ html.cd-m .cd-hero .cd-deal-card .cd-fin-card{ column-gap: 8px; } html.cd-m .cd-hero .cd-deal-card .cd-fin-card-label{ font-size: 14px; } html.cd-m .cd-hero .cd-deal-card .cd-fin-card-from, html.cd-m .cd-hero .cd-deal-card .cd-fin-card-per{ font-size: 12px; } html.cd-m .cd-hero .cd-deal-card .cd-fin-card-amount{ font-size: 15px; } html.cd-m .cd-hero .cd-deal-card .cd-delivery-days{ font-size: 14px; } /* „Доставка за 40–65 работни дни“ на един ред (проверката, 14.10) */ html.cd-m .cd-hero .cd-kv-st{ font-size: 13px; line-height: 18px; } } @media (min-width: 412px) and (max-width: 575.98px){ html.cd-m .cd-hero .cd-kv-st{ font-size: 16px; } } /* =========================================================================== БЛОК 3 — ПАНЕЛЪТ С ЦЕНАТА. История: 11.10 и 12.10 собственикът отказа „подредения“ вариант („по-добре са бутоните ни и доставката е по-добре при нас“; комит 5e85f44) — БУТОНИТЕ, ДОСТАВКАТА (сивата кутия) и часовникът ОСТАВАТ НЕГОВИТЕ, не ги пипай. 13.10 вечерта, след макета на новата обява, избра за панела „твоето“ по три точки, и само те са сменени: 1) панелът е върху белия лист — без своя рамка, сянка и заоблени ъгли (иначе е кутия в кутия); 2) СМЕТКАТА („Подробности за цената“, отворена) е ВЕДНАГА ПОД БУТОНА, после доставката; 3) „На изплащане“ и гаранцията са ТЪНКИ РЕДОВЕ с черта отгоре, не кутии. Редът се сменя само с order (панелът става стълб); разметката, куките на Livewire и прозорците са същите. Правилата тръгват от „.cd-deal-card >“: трите прозореца са нейни деца. =========================================================================== */ html.cd-m .cd-warranty-srok, html.cd-m .cd-warranty-ceni{ display: none; } /* над телефон картата с гаранцията е както досега */ @media (max-width: 575.98px){ html.cd-m .cd-hero .cd-deal-card{ display: flex; flex-direction: column; margin: 0; padding: 0 var(--cd-ot); border: 0; border-radius: 0; background: none; box-shadow: none; } html.cd-m .cd-hero .cd-deal-card > *{ min-width: 0; } html.cd-m .cd-hero .cd-sticky-panel{ order: 2; display: flex; flex-direction: column; margin-top: 20px; } html.cd-m .cd-hero .cd-sticky-panel > *{ min-width: 0; } html.cd-m .cd-hero .container > .cd-hero-sst-row{ order: 3; } /* 2) сметката веднага под бутона, после доставката, после изплащането */ html.cd-m .cd-hero .cd-deal-card > .cd-m-disc, html.cd-m .cd-hero .cd-deal-card > .cd-breakdown-toggle, html.cd-m .cd-hero .cd-deal-card > .cd-breakdown{ order: 1; } html.cd-m .cd-hero .cd-deal-card > .cd-m-disc > .cd-breakdown-toggle{ margin-top: 18px; } html.cd-m .cd-hero .cd-deal-card > .cd-breakdown.cd-breakdown-bare{ margin-top: 18px; } /* САЩ и Канада: само един ред с крайната цена */ html.cd-m .cd-hero .cd-deal-card > .cd-delivery-line{ order: 2; margin-top: 24px; /* малко въздух след цената (собственикът, 14.10) */ } /* 14.10 — доставката (Д1) и „На изплащане“ (В) като на компютъра (една система; подробностите са в cd-obqva-komp.css): ред с тъмна плочка за доставката, ред с лилава плочка за изплащането, стрелките еднакви. Отменя „сивата кутия остава“ от 11–12.10 — собственикът: „тая доставка трябва да я сменим по принцип“. */ html.cd-m .cd-hero .cd-deal-card > .cd-delivery-line{ padding: 0 0 2px; gap: 12px; background: none; border-radius: 0; } /* Камиончето е „бързият“ от Tabler (truck-delivery — с чертите отзад), без плочка (собственикът, 14.10: „черната иконка да я сменим с камион от Tabler, без иконка, ама бърз, дето бърза“). Мястото му е 32 px — текстът стои на една линия с текста на „На изплащане“ отдолу. */ html.cd-m .cd-hero .cd-delivery-icon{ width: 32px; height: 32px; border-radius: 0; background: none; color: var(--cd-ink); box-shadow: none; } html.cd-m .cd-hero .cd-delivery-icon svg{ width: 28px; height: 28px; stroke-width: 1.6; } html.cd-m .cd-hero .cd-delivery-text{ gap: 1px; min-width: 0; } html.cd-m .cd-hero .cd-delivery-days{ font-size: 15.5px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; } html.cd-m .cd-hero .cd-delivery-from{ flex-wrap: wrap; gap: 0 5px; font-size: 12px; line-height: 16px; color: var(--cd-body); } html.cd-m .cd-hero .cd-delivery-from strong{ font-weight: 500; color: var(--cd-body); } html.cd-m .cd-hero .cd-flag-bg{ outline: 1px solid rgba(0,0,0,.14); outline-offset: -1px; } html.cd-m .cd-hero .cd-deal-card > .cd-finance{ order: 3; margin-top: 16px; padding-top: 0; } /* без „На изплащане“ (търг, скъпа кола) доставката е последна в панела — чертата на гаранцията лепнеше за сивата кутия */ html.cd-m .cd-hero .cd-deal-card:not(:has(> .cd-finance)){ padding-bottom: 14px; } /* панелът е стълб и полетата вече не се сливат: под „или“ ставаха 26 px срещу 16 отгоре */ html.cd-m .cd-hero .cd-deal-card > .cd-or-divider{ margin-bottom: 6px; } /* Tab следва реда на екрана, а не този в разметката (Chromium 137+; другите го пропускат и остават както досега) */ html.cd-m .cd-hero .cd-deal-card, html.cd-m .cd-hero .cd-sticky-panel{ reading-flow: flex-visual; } /* 3) „На изплащане“ — тънък ред: името и условията вляво, вноската вдясно, стрелка. Целият ред е бутонът „Изчисли вноската“ (разпънат невидимо върху реда; името му остава за екранните четци). Условията („Без първоначална вноска · 72 месеца“) ОСТАВАТ видими под името — без тях числото е необяснено; и „Представителен пример“ остава под реда (иска го законът за потребителския кредит). Виолетовото е цветът на изплащането. */ html.cd-m .cd-hero .cd-fin-card{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 10px; grid-template-areas: "ime suma go" "usl usl usl"; align-items: center; column-gap: 10px; padding: 14px 0 12px 44px; border: 0; border-radius: 0; background: none; } html.cd-m .cd-hero .cd-fin-card{ grid-template-columns: minmax(0, 1fr) auto 14px; } html.cd-m .cd-hero .cd-fin-card-label{ grid-area: ime; gap: 10px; min-width: 0; font-size: 15.5px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; text-transform: none; } /* „На изплащане“ — вариант В: календар в лилава плочка по средата на двата реда, името лилаво (14.10) */ html.cd-m .cd-hero .cd-fin-card-label{ color: var(--cd-violet); } html.cd-m .cd-hero .cd-fin-card-label svg{ position: absolute; left: 0; top: calc(50% + 1px); transform: translateY(-50%); /* +1: полетата на реда са 14 отгоре, 12 отдолу */ flex: none; box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 9px; stroke-width: 1.75; background: var(--cd-violet); color: #fff; box-shadow: 0 6px 14px -6px rgba(75,63,208,.55); } html.cd-m .cd-hero .cd-fin-card-terms{ grid-area: usl; margin: 1px 0 0; padding-left: 0; font-size: 12px; line-height: 16px; } html.cd-m .cd-hero .cd-fin-card-figure{ grid-area: suma; margin: 0; gap: 4px; white-space: nowrap; } html.cd-m .cd-hero .cd-fin-card-from, html.cd-m .cd-hero .cd-fin-card-per{ font-size: 13px; color: var(--cd-violet); } html.cd-m .cd-hero .cd-fin-card-amount{ font-size: 16px; line-height: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--cd-violet); } html.cd-m .cd-hero .cd-fin-card::after{ content: ""; grid-area: go; justify-self: end; width: 10px; height: 10px; margin-right: 3px; border-top: 2.5px solid var(--cd-ink); border-right: 2.5px solid var(--cd-ink); transform: rotate(45deg); pointer-events: none; /* стрелката стоеше над невидимия бутон и точно върху нея натискането не правеше нищо */ } html.cd-m .cd-hero .cd-fin-card.is-off::after{ content: none; } html.cd-m .cd-hero .cd-fin-card-actions{ position: absolute; inset: 0; display: block; margin: 0; } html.cd-m .cd-hero .cd-fin-apply, html.cd-m .cd-hero .cd-fin-apply:hover{ display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; background: transparent; color: transparent; font-size: 0; box-shadow: none; } html.cd-m .cd-hero .cd-fin-apply:active{ background: rgba(21,24,31,.04); } html.cd-m .cd-hero .cd-fin-apply:focus-visible{ outline: 2px solid var(--cd-violet); outline-offset: 2px; } html.cd-m .cd-hero .cd-finance-legal{ margin: -2px 0 12px; padding-left: 44px; } /* „Представителен пример“ беше мишена от 18 px между два невидими бутона — става 40 px (::before, защото ::after е стрелката му) */ html.cd-m .cd-hero .cd-finance-legal > summary{ position: relative; } html.cd-m .cd-hero .cd-finance-legal > summary::before{ content: ""; position: absolute; inset: -12px -10px -10px; } /* 3) гаранцията (Wagas) — същото съдържание като тънък ред: „Гаранция от Wagas“ вляво, срокът вдясно. И под панела, и в реда на AAA Auto (.cd-hero-sst-row). */ html.cd-m .cd-hero .cd-sticky-panel .cd-warranty-card, html.cd-m .cd-hero .cd-hero-sst-row .cd-warranty-card{ margin: 0 var(--cd-ot); padding: 15px 0 14px; border: 0; border-top: 1px solid var(--cd-line); border-radius: 0; background: none; box-shadow: none; } html.cd-m .cd-hero .cd-hero-sst-row .cd-warranty-card{ margin: 0; } /* AAA Auto: показва се копието ПОД ПАНЕЛА (.cd-wagas-v-panela), та гаранцията да е преди „Обади се“ както при всички; копието в реда с оценката на телефон се скрива (проверката, 13.10). */ html.cd-m .cd-hero .cd-sticky-panel > .cd-wagas-v-panela{ display: block; } html.cd-m .cd-hero .cd-hero-sst-row > .cd-sst-wagas{ display: none; } html.cd-m .cd-hero .cd-warranty-row{ flex-wrap: wrap; gap: 0 10px; min-width: 0; } /* под ~340 px срокът слиза на свой ред, вместо да излиза от листа */ html.cd-m .cd-hero .cd-warranty-text{ font-size: 15.5px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--cd-ink); white-space: nowrap; } /* Логото е по-малко — беше едро спрямо надписа (собственикът, 13.10). Целият ред е връзка към таблицата с премиите (невидимо разпъната върху него, както бутонът на „На изплащане“); стрелката казва, че се отваря. */ html.cd-m .cd-hero .cd-warranty-card{ position: relative; } html.cd-m .cd-hero .cd-warranty-logo{ position: relative; top: 2px; height: 19px; margin-top: 0; } /* 14.10: на 14 px беше дребно и стоеше високо — основата на буквите му вече е на основата на „Гаранция от“ */ html.cd-m .cd-hero .cd-warranty-vruzka{ display: block; position: absolute; inset: 0; border-radius: 10px; } html.cd-m .cd-hero .cd-warranty-vruzka:active{ background: rgba(21,24,31,.04); } html.cd-m .cd-hero .cd-warranty-vruzka:focus-visible{ outline: 2px solid var(--cd-ink); outline-offset: 2px; } html.cd-m .cd-hero .cd-warranty-card:has(.cd-warranty-vruzka) .cd-warranty-srok::after{ content: ""; display: inline-block; width: 10px; height: 10px; margin: 0 3px 1px 12px; /* като стрелката на „На изплащане“ */ border-top: 2.5px solid var(--cd-ink); border-right: 2.5px solid var(--cd-ink); transform: rotate(45deg); } html.cd-m .cd-hero .cd-warranty-srok{ display: block; margin-left: auto; font-size: 13.5px; line-height: 22px; color: var(--cd-body); white-space: nowrap; } html.cd-m .cd-hero .cd-warranty-sub{ display: none; } /* Цената за тази кола (App\Support\WagasPremii): „от €481“ вдясно, двете цени — тих ред под името, както условията под „На изплащане“. Марка извън листата на Wagas няма гаранция и картата ѝ не се печата изобщо (Ads::isWagasEligible). */ html.cd-m .cd-hero .cd-warranty-card{ gap: 0; } html.cd-m .cd-hero .cd-warranty-srok strong{ font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--cd-ink); } html.cd-m .cd-hero .cd-warranty-ceni{ display: block; margin: 1px 0 0; font-size: 12px; line-height: 16px; color: var(--cd-muted); } html.cd-m .cd-hero .cd-warranty-ceni strong{ font-weight: 600; color: var(--cd-body); } /* „Обади се“ и Viber са след редовете, последни на листа */ html.cd-m .cd-hero .cd-sticky-panel > .cd-tel-kontakt{ order: 5; } /* AAA Auto: гаранцията и оценката на състоянието са в свой ред под панела (.cd-hero-sst-row) — и те са върху листа. Оценката е в сив поднос, като фактите (не втора бяла карта върху бялото). */ html.cd-m .cd-hero .container > .cd-hero-sst-row > [class*="col-"]{ padding-left: calc(12px + var(--cd-ot)); padding-right: calc(12px + var(--cd-ot)); } html.cd-m .cd-hero .cd-hero-sst-row .cd-sst-card{ margin: 4px 0 12px; border: 0; border-radius: 16px; background: var(--cd-surface-2); box-shadow: none; } /* часовникът: сив фон вместо розов; кръгчето, иконката и буквите са както досега */ html.cd-m .cd-hero .cd-deal-card > .cd-countdown-strip{ background: var(--cd-surface-2); } /* „мин. €…“: невидимо място за пръста около връзката (нищо не се променя на вид) */ html.cd-m .cd-hero .cd-deal-card > #bid_form > .cd-field-hint > a{ position: relative; } html.cd-m .cd-hero .cd-deal-card > #bid_form > .cd-field-hint > a::after{ content: ""; position: absolute; inset: -14px -8px; } } /* Таблетът (576–991 px) с ключа: доставката идва с новия текст и иконата („Доставка за … / от … до България“) от същата разметка в livewire/bid-box — тук е само нейният ред без кутия, както на телефона и на компютъра. Иначе стоеше в старата сива кутия и „… работни / дни“ се пренасяше (проверката, 14.10). Останалото на таблета е както преди. */ @media (min-width: 576px) and (max-width: 991.98px){ html.cd-m .cd-hero .cd-deal-card > .cd-delivery-line{ padding: 0; gap: 12px; background: none; border-radius: 0; } html.cd-m .cd-hero .cd-delivery-icon{ width: 32px; height: 32px; border-radius: 0; background: none; color: var(--cd-ink); box-shadow: none; } html.cd-m .cd-hero .cd-delivery-icon svg{ width: 28px; height: 28px; stroke-width: 1.6; } html.cd-m .cd-hero .cd-delivery-text{ gap: 1px; min-width: 0; } html.cd-m .cd-hero .cd-delivery-days{ font-size: 15px; line-height: 21px; font-weight: 700; letter-spacing: -.01em; } html.cd-m .cd-hero .cd-delivery-from{ flex-wrap: wrap; gap: 0 5px; font-size: 12px; line-height: 16px; color: var(--cd-body); } html.cd-m .cd-hero .cd-delivery-from strong{ font-weight: 500; color: var(--cd-body); } html.cd-m .cd-hero .cd-flag-bg{ outline: 1px solid rgba(0,0,0,.14); outline-offset: -1px; } } /* =========================================================================== БЛОК 2 — ДОВЕРИЕТО НА ЕДИН РЕД (ads/tel/doverie.blade.php + cd-obqva-tel.js) и листът му (doverie_list). Собственикът, 11–12.10: едно на ред, следващото идва отдясно, по-интерактивно; над панела с цената при всяка обява; при докосване — лист със заглавието и „Научи повече“. И четирите стоят в ЕДНА клетка на мрежата (grid-area: 1/1) — височината е постоянна, нищо не подскача. Движат се само transform и opacity. Имената на движенията НЕ започват с cd-m-: CD.layer изчаква всяко cd-m-*. =========================================================================== */ html.cd-m .cd-trust{ display: none; } /* над телефон остават днешните четири реда */ @media (max-width: 575.98px){ html.cd-m .cd-hero .cd-value-props--column, html.cd-m .cd-redesign > .cd-trust-band{ display: none; } /* днешните блокове: на телефон ги замества редът */ /* 13.10, собственикът за реда: „това трябва да е по-голямо; броячите — някак вдясно или долу по средата, и да са по-премиум, като на картите в началната; долната линия според мен не трябва да я има“. Затова: по-едра иконка и надпис, по средата; точките са под надписа, по средата, и избраната се разтяга в хапче — същите като под плочките на началната (.cd-vid-tochki в cd-motion.css). 13.10 вечерта (присаждането от макета): редът е ПОД белия лист, върху сивото на страницата — между цената и първата плочка, като пауза. (На 12.10 беше над панела с цената; в макета, който собственикът одобри, е под него — така цената и бутонът идват по-рано.) Той е последното нещо в .cd-hero, от край до край, със сив фон; заобленото ДЪНО на листа го рисува неговият ::before. */ html.cd-m .cd-hero .cd-trust{ order: 4; display: block; position: relative; --cd-trust-gap: 24px; margin: 0 -12px; padding: 0 calc(12px + var(--cd-ot)) 4px; background: var(--cd-surface-2); } html.cd-m .cd-hero .cd-trust::before{ content: ""; display: block; height: 20px; margin: 0 calc(-12px - var(--cd-ot)) 8px; border-radius: 0 0 var(--cd-r-lg) var(--cd-r-lg); background: var(--cd-surface); box-shadow: 0 12px 20px -16px rgba(15,23,32,.28); } html.cd-m .cd-hero .cd-trust-list{ display: grid; margin: 0; padding: 0; list-style: none; overflow-x: clip; } /* Видимият е най-отгоре (z-index) и той поема докосването. Без pointer-events/visibility: те се наследяват и всяка смяна би карала браузъра да пресмята целия блок. */ html.cd-m .cd-hero .cd-trust-item{ grid-area: 1 / 1; min-width: 0; position: relative; opacity: 0; } html.cd-m .cd-hero .cd-trust-item.is-cur{ opacity: 1; z-index: 1; } html.cd-m .cd-hero .cd-trust-btn{ position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 56px; margin: 0; padding: 6px 0 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } html.cd-m .cd-hero .cd-trust-btn:focus-visible{ outline: 2px solid var(--cd-ink); outline-offset: -2px; border-radius: 8px; } html.cd-m .cd-hero .cd-trust-btn strong{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--cd-ink); } html.cd-m .cd-hero .cd-trust-ico{ flex: none; width: 26px; height: 26px; stroke-width: 1.6; color: var(--cd-ink); } html.cd-m .cd-hero .cd-trust-go{ flex: none; width: 18px; height: 18px; margin-left: -6px; stroke-width: 2; color: var(--cd-muted); } /* „има още“ */ /* натискане: лек воал, както другите повърхности */ html.cd-m .cd-hero .cd-trust-btn::after{ content: ""; position: absolute; inset: 4px -8px; border-radius: 8px; background: #000; opacity: 0; pointer-events: none; transition: opacity var(--cd-dur-press) var(--cd-ease-std); } html.cd-m .cd-hero .cd-trust-btn:active::after{ opacity: .05; } /* Четирите точки — под надписа, по средата; не се натискат. Избраната се разтяга в хапче, както под плочките на началната (същите мерки и времена: 8 → 28 px за --cd-dur-grow). contain: растежът не буди останалата страница. */ html.cd-m .cd-hero .cd-trust-dots{ display: flex; align-items: center; justify-content: center; gap: 8px; height: 8px; margin: 2px 0 6px; pointer-events: none; contain: layout style; } html.cd-m .cd-hero .cd-trust-dots i{ display: block; width: 8px; height: 8px; border-radius: 8px; background: var(--cd-ink); opacity: .35; transition: width var(--cd-dur-grow, 600ms) var(--cd-ease-grow, cubic-bezier(0,0,.2,1)), opacity var(--cd-dur-1, 150ms) var(--cd-ease-std, ease); } html.cd-m .cd-hero .cd-trust-dots i.is-cur{ width: 28px; opacity: 1; } /* Смяната: двата пътуват като ЕДНА плоскост (еднакво време и крива, иначе надписите се застъпват) — новият влиза отдясно, старият излиза наляво; при плъзгане надясно — обратно (.is-rev). В покой редът е без transform. */ html.cd-m .cd-hero .cd-trust-item.is-in{ animation: cd-trust-in var(--cd-trust-dur, var(--cd-dur-3)) var(--cd-ease-out) backwards; } html.cd-m .cd-hero .cd-trust-item.is-out{ animation: cd-trust-out var(--cd-trust-dur, var(--cd-dur-3)) var(--cd-ease-out) forwards; } html.cd-m .cd-hero .cd-trust-item.is-in.is-rev{ animation-name: cd-trust-in-rev; } html.cd-m .cd-hero .cd-trust-item.is-out.is-rev{ animation-name: cd-trust-out-rev; } /* ---- листът: черупката е на „Купи сега“; тук е само неговото ---- */ html.cd-m .cd-trust-modal .cd-finance-modal-head{ align-items: center; border-bottom: 0; padding-bottom: 8px; } html.cd-m .cd-trust-modal .cd-trust-sheet-ico{ flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cd-surface-2); color: var(--cd-ink); } html.cd-m .cd-trust-modal .cd-trust-sheet-ico svg{ width: 22px; height: 22px; stroke-width: 1.5; } html.cd-m .cd-trust-modal .cd-finance-modal-title{ font-size: 18px; line-height: 24px; font-weight: 700; } html.cd-m .cd-trust-modal .cd-finance-modal-sub{ margin-top: 2px; white-space: normal; overflow: visible; font-size: 14px; line-height: 20px; color: var(--cd-body); } html.cd-m .cd-trust-modal .cd-trust-sheet-body{ padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); } html.cd-m .cd-trust-modal section:not(:has(.cd-trust-sheet-body)) .cd-finance-modal-head{ padding-bottom: calc(20px + env(safe-area-inset-bottom)); } html.cd-m .cd-trust-modal .cd-trust-sheet-link{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--cd-line-2); border-radius: var(--cd-r-sm); background: var(--cd-surface); box-shadow: var(--cd-shadow-1); font-size: 14.5px; font-weight: 700; color: var(--cd-ink); text-decoration: none; } html.cd-m .cd-trust-modal .cd-trust-sheet-link svg{ width: 16px; height: 16px; } } @keyframes cd-trust-in{ from{ opacity: 0; transform: translateX(calc(100% + var(--cd-trust-gap, 24px))); } } @keyframes cd-trust-out{ to{ opacity: 0; transform: translateX(calc(-100% - var(--cd-trust-gap, 24px))); } } @keyframes cd-trust-in-rev{ from{ opacity: 0; transform: translateX(calc(-100% - var(--cd-trust-gap, 24px))); } } @keyframes cd-trust-out-rev{ to{ opacity: 0; transform: translateX(calc(100% + var(--cd-trust-gap, 24px))); } } /* =========================================================================== БЛОК 5 — ЛЕНТАТА ДОЛУ: цената и ЕДИН бутон (ads/tel/lenta.blade.php), и БЛОК 4 — „Обади се“ и Viber под панела с цената (ads/tel/kontakt.blade.php). Собственикът, 11–12.10 („3а“, „1а“). Бутоните са ДНЕШНИТЕ (.cd-mobile-cta, .cd-btn-outline) — видът им не се пипа; тук е само подредбата. Височината на лентата остава 67 px, тъй че отстоянията на ↑ и съобщенията важат. =========================================================================== */ html.cd-m .cd-bar-tel, html.cd-m .cd-tel-kontakt{ display: none; } /* над телефон: днешната лента и нищо под панела */ @media (max-width: 575.98px){ /* ---- лентата ---- */ html.cd-m .cd-mobile-bar{ padding-left: calc(12px + var(--cd-ot)); } /* цената тръгва от линията на отстъпа */ /* Лентата се прибира, докато същият бутон от панела е на екрана — два еднакви червени бутона на един екран са излишни (от макета; собственикът, 13.10). Класът го слага cd-obqva-tel.js; без скрипта лентата стои винаги, както досега. Движи се само transform; visibility я маха и от реда на Tab, докато е прибрана. */ html.cd-m .cd-mobile-bar{ transition: transform var(--cd-dur-2, 200ms) var(--cd-ease-std, ease), visibility 0s; } html.cd-m .cd-mobile-bar.is-pribrana{ transform: translateY(calc(100% + 8px)); visibility: hidden; transition: transform var(--cd-dur-2, 200ms) var(--cd-ease-std, ease), visibility 0s linear var(--cd-dur-2, 200ms); } html.cd-m .cd-mobile-bar > :not(.cd-bar-tel){ display: none; } html.cd-m .cd-mobile-bar > .cd-bar-tel{ display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; min-height: 46px; } /* 46: лентата да не се рисува ниска, докато съдържанието ѝ още идва (на бавен телефон подскачаше от 21 на 67 px) */ html.cd-m .cd-bar-tel > .cd-bar-cena{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; } html.cd-m .cd-bar-tel .cd-bar-nadpis{ font-size: 12px; line-height: 16px; font-weight: 500; color: var(--cd-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.cd-m .cd-bar-tel .cd-bar-suma{ font-size: 18px; line-height: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--cd-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } html.cd-m .cd-bar-tel .cd-bar-suma--data{ font-size: 14px; line-height: 20px; font-weight: 700; letter-spacing: 0; } /* дата, не сума */ html.cd-m .cd-bar-tel .cd-bar-edno{ font-size: 14px; line-height: 20px; font-weight: 600; color: var(--cd-body); } html.cd-m .cd-bar-tel > .cd-mobile-cta{ flex: 0 0 auto; width: 176px; } /* Бутоните в лентата са с ъгъла на бутоните в панела (8 px). Червеният е ТОЧНО „КУПИ СЕГА“ от панела — преливката, сянката, буквите и главните букви; без светкавицата (собственикът, 13.10: едно и също нещо да изглежда еднакво — два различни червени бутона стояха на един екран). Тъмният „Наддай“ остава както е в лентата. */ html.cd-m .cd-bar-tel > .cd-mobile-cta{ border-radius: var(--cd-r-sm); } html.cd-m .cd-bar-tel > .cd-mobile-cta:not(.cd-mobile-cta--dark):not(.cd-mobile-cta--outline){ background: linear-gradient(135deg, var(--cd-red) 0%, var(--cd-red-dark) 100%); box-shadow: 0 8px 16px -6px rgba(225,29,42,.45); font-size: 14.5px; font-weight: 700; text-transform: uppercase; } html.cd-m .cd-bar-tel > .cd-mobile-cta:not(.cd-mobile-cta--dark):not(.cd-mobile-cta--outline) > svg{ display: none; } html.cd-m .cd-bar-tel > .cd-mobile-cta.cd-bar-cyal{ flex: 1 1 auto; width: auto; } /* ---- „Обади се“ и Viber: ред под панела с цената ---- */ html.cd-m .cd-hero .cd-tel-kontakt{ display: block; margin: 0 0 16px; } html.cd-m .cd-hero .cd-tel-kontakt-t{ margin: 0 0 8px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--cd-ink); } html.cd-m .cd-hero .cd-tel-kontakt-b{ display: flex; gap: 8px; } html.cd-m .cd-hero .cd-tel-kontakt-b > .cd-btn{ flex: 1 1 0; min-width: 0; margin-top: 0; text-decoration: none; } html.cd-m .cd-hero .cd-tel-kontakt-b > .cd-btn svg{ width: 16px; height: 16px; flex: none; } html.cd-m .cd-hero .cd-tel-kontakt-b > .cd-btn i{ font-size: 18px; line-height: 1; } /* след докосване :hover залепва и надписът ставаше червен */ html.cd-m .cd-hero .cd-tel-kontakt-b > .cd-btn:hover{ border-color: var(--cd-line-2); color: var(--cd-ink); } } @media (max-width: 374.98px){ html.cd-m .cd-bar-tel > .cd-mobile-cta{ width: 156px; } } /* =========================================================================== БЛОК 6 — ТЕХНИЧЕСКИ ДЕТАЙЛИ: по две на ред, без кутии (вариант „а“ от въпрос 2). Собственикът още не е избрал („засега не мога да преценя“) — ще ги сравни на живо: carsdirect.bg/…обява…?td=b → белите кутии, по две на ред (запомня се); ?td=a → списъкът. Иконките, думите и редът им са днешните; махат се само кутиите. Първите 12 се виждат, останалите са зад бутона „Всички детайли“ (cd-obqva-tel.js). Никога не се скриват: предупрежденията (.is-warn), „Регистриран инцидент“, „Предишни собственици“, „Вид загуба“. Без скрипта се виждат всички. Само мрежата веднага след заглавието на раздела — същият клас има и резервната гума при САЩ. =========================================================================== */ html.cd-m .cd-td-more{ display: none; } @media (max-width: 575.98px){ html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card{ align-items: flex-start; gap: 10px; min-width: 0; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--cd-line); border-radius: 0; box-shadow: none; } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card > svg{ width: 18px; height: 18px; margin-top: 1px; } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card > div{ min-width: 0; } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card span{ font-size: 12.5px; line-height: 16px; color: var(--cd-body); } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card strong{ margin-top: 2px; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; } /* предупреждение („Регистриран инцидент: Да“ и другите .is-warn): и стойността е кехлибарена, не само иконката */ html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid > .cd-spec-card.is-warn strong{ color: #B45309; } /* вариант „б“: белите кутии от днес, но по две на ред — един клас на мрежата */ html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid.cd-td--b{ gap: 8px; } html.cd-m .cd-redesign .cd-section-head + .cd-spec-grid.cd-td--b > .cd-spec-card{ align-items: center; padding: 10px 12px; background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: var(--cd-r-md); box-shadow: 0 1px 2px rgba(15,23,32,.04), 0 6px 16px -6px rgba(15,23,32,.10); } /* първите 12 + важните; останалите — след „Всички детайли“ */ html.cd-m .cd-redesign .cd-spec-grid.cd-td-kaso > .cd-td-skrit{ display: none; } html.cd-m .cd-redesign .cd-td-more{ display: flex; margin-top: 16px; } html.cd-m .cd-redesign .cd-td-more:hover{ border-color: var(--cd-line-2); color: var(--cd-ink); } /* :hover залепва след докосване */ } /* =========================================================================== БЛОК 7 — ОБОРУДВАНЕ (два огледа на собственика, 12.10): иконките горе са в три равни колони; редовете долу са без кутии и без черти, със зелена отметка вместо кръгчето; чуждият надпис е по-тъмен. Червените заглавия на групите и розовият бутон „Покажи още“ са както са. БЛОК 8 — краят на страницата: празната лента при американските коли без таблица с щети не се показва. =========================================================================== */ @media (max-width: 575.98px){ /* Иконките горе: подредени в три равни колони, иконката над надписа, по средата (собственикът, 12.10: „много са разпръснати, трябва да са подравнени“). Дълъг надпис минава на втори ред, вместо да бута съседите. */ html.cd-m .cd-redesign .cd-equip-spotlight{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 8px; margin: 0 0 24px; padding-top: 8px; } html.cd-m .cd-redesign .cd-equip-spotlight-item{ align-items: center; justify-content: flex-start; text-align: center; gap: 8px; min-width: 0; } html.cd-m .cd-redesign .cd-equip-spotlight-item span{ white-space: normal; font-size: 12px; line-height: 16px; } /* Списъкът: без кутии и БЕЗ черти между редовете (собственикът, 12.10). Вместо кръгчето — само отметка, теглена „като с четка“, зелена: рисува се с маска върху ::before, разметката не се пипа. */ html.cd-m .cd-redesign .cd-equip-grid ul{ gap: 0; } html.cd-m .cd-redesign .cd-equip-grid li:not(.cd-equip-divider){ gap: 12px; padding: 8px 0; background: none; border: 0; border-radius: 0; box-shadow: none; } html.cd-m .cd-redesign .cd-equip-grid li:not(.cd-equip-divider) > svg{ display: none; } html.cd-m .cd-redesign .cd-equip-grid li:not(.cd-equip-divider)::before{ content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: var(--cd-success); -webkit-mask: var(--cd-otmetka) center / contain no-repeat; mask: var(--cd-otmetka) center / contain no-repeat; } /* „Резултат от тест драйв“ (собственикът, 12.10): същата зелена отметка; при забележка — червен Х със заоблени краища (неговият образец), вместо кръгчето. Редовете са списък без кутии, по два на ред — като техническите детайли и оборудването, но ЕДНО ПОД ДРУГО, по един на ред. Забележките са НАЙ-ГОРЕ. Името е с плътни букви, описанието („Няма установени проблеми“, „Не е налична“) е до него, по-тихо; при забележка е също плътно. */ html.cd-m .cd-redesign .cd-condition-grid{ grid-template-columns: minmax(0, 1fr); gap: 0; } /* едно под друго: „това е най-важното“ (собственикът, 12.10) */ /* Редът е обикновен текст с отметка вляво (не flex): името и описанието текат като едно изречение. */ html.cd-m .cd-redesign .cd-condition-chip{ display: block; position: relative; min-width: 0; padding: 8px 0 8px 24px; background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 14px; line-height: 20px; } html.cd-m .cd-redesign .cd-condition-chip > svg, html.cd-m .cd-redesign .cd-pass-pill > svg{ display: none; } html.cd-m .cd-redesign .cd-condition-chip::before, html.cd-m .cd-redesign .cd-pass-pill::before{ content: ""; flex: none; width: 14px; height: 14px; background: var(--cd-success); -webkit-mask: var(--cd-otmetka) center / contain no-repeat; mask: var(--cd-otmetka) center / contain no-repeat; } html.cd-m .cd-redesign .cd-condition-chip::before{ position: absolute; left: 0; top: 11px; } html.cd-m .cd-redesign .cd-condition-chip.cd-condition-warn{ order: -1; grid-column: 1 / -1; } html.cd-m .cd-redesign .cd-condition-chip.cd-condition-warn::before{ width: 13px; height: 13px; top: 12px; background: var(--cd-red); -webkit-mask: var(--cd-hiks) center / contain no-repeat; mask: var(--cd-hiks) center / contain no-repeat; } html.cd-m .cd-redesign .cd-condition-chip .cd-tdr-opis{ font-weight: 400; color: var(--cd-body); } html.cd-m .cd-redesign .cd-condition-chip.cd-condition-warn .cd-tdr-opis{ font-weight: 600; color: var(--cd-ink); } /* надписът на чуждия език: четим, не блед (беше #AEB4BE) */ html.cd-m .cd-redesign .cd-equip-grid li small.cd-equip-orig{ color: #69717F; font-size: 12px; } html.cd-m .cd-redesign .cd-equip-grid li.cd-equip-divider{ padding-top: 20px !important; box-shadow: none; } /* заглавието на групата носеше сянката на кутиите */ html.cd-m .cd-redesign .cd-equip-grid li.cd-equip-divider-first{ padding-top: 0 !important; } /* само раздел, който ИМА .container и той е празен (САЩ без таблица с щети оставяше лента от 57 px) */ html.cd-m .cd-redesign > .cd-section:has(> .container):not(:has(> .container > *)){ display: none; } } /* =========================================================================== ШЕВОВЕТЕ МЕЖДУ БЛОКОВЕТЕ И БЕЛИТЕ ПЛОЧКИ (13.10). 1) ЕДИН ЛЯВ РЪБ за текста в един раздел: заглавието, списъците и бутоните тръгват от една линия. 2) ЕДИН РИТЪМ между разделите; заглавията са 20/700 с 12 px до съдържанието (бяха 18/800). 3) РЕДЪТ НА РАЗДЕЛИТЕ: техническите детайли са ПЪРВИ, тест драйвът е след тях (собственикът, 13.10 вечерта, по макета: „технически характеристики да е първо“; сутринта тест драйвът беше изнесен напред — махнато, не го връщай). След тест драйва са СЕРВИЗНИТЕ ДОКУМЕНТИ И СЕРВИЗНАТА ИСТОРИЯ, а след тях ЩЕТИТЕ — състоянието на колата на едно място (собственикът, 13.10: първо прие щетите веднага след тест драйва, после поправи: „щетите трябва да са след документи и история“). В разметката щетите са най-долу, след оборудването; местят се само с order. Белезите са класове, които се слагат само с ключа: .cd-sek-dok (ads/service_book, ads/service_history), .cd-sek-shteti (ads/damage_items и щетите на Copart в ads/view); и #sustoqnie (OpenLane). 4) БЕЛИ ПЛОЧКИ (от макета): разделите с ТЕКСТ — технически детайли, тест драйв, оборудване, „Полезно“ — са бели плочки върху сивото на страницата: същата повърхност като листа горе и като картите в търсенето. Разделите от КАРТИ — лентите със снимки, гумите, „Вижте още“, тъмният банер — остават направо върху сивото: те сами са кутии. Плочката е самият .container на раздела; нищо в разметката не се пипа. =========================================================================== */ html.cd-m .cd-tdr-more{ display: none; } /* над телефон тест драйвът е целият, без бутон */ @media (max-width: 575.98px){ /* ---- 3) редът на разделите: стълб; всичко след техническите детайли е „после“ (3), тест драйвът остава на мястото си (0), след него са сервизните документи и сервизната история (1), после щетите (2). Правилата са с еднакво начало, за да печели по-точното. ---- */ html.cd-m .cd-redesign{ display: flex; flex-direction: column; } html.cd-m .cd-redesign > *{ min-width: 0; } html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid) ~ *{ order: 3; } html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid) ~ .cd-section:has(> .container > .cd-condition-grid){ order: 0; } html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid) ~ .cd-section.cd-sek-dok{ order: 1; } html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid) ~ .cd-section.cd-sek-shteti, html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid) ~ .cd-section#sustoqnie{ order: 2; } /* ---- 2) ритъмът ---- */ html.cd-m .cd-redesign > .cd-section{ padding: 14px 0; border-top: 0; } html.cd-m .cd-redesign .cd-section-title{ font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -.01em; } html.cd-m .cd-redesign .cd-section-head{ margin-bottom: 12px; } html.cd-m .cd-redesign > .cd-section > .container > h2.cd-section-title{ margin-bottom: 12px !important; } /* „Оборудване“ носи инлайн 18 px */ html.cd-m .cd-redesign .cd-section-sub{ margin: -6px 0 12px; font-size: 14px; line-height: 20px; color: var(--cd-body); } /* ---- 4) белите плочки ---- */ html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid), html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-condition-grid), html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-equip-grid), html.cd-m .cd-redesign > .cd-section.cd-polezno{ padding: 6px 0; background: none; } html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-section-head + .cd-spec-grid) > .container, html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-condition-grid) > .container, html.cd-m .cd-redesign > .cd-section:has(> .container > .cd-equip-grid) > .container, html.cd-m .cd-redesign > .cd-section.cd-polezno > .container{ width: auto; max-width: none; margin: 0 12px; padding: 22px 8px 20px; border-radius: var(--cd-r-lg); background: var(--cd-surface); box-shadow: 0 1px 2px rgba(15,23,32,.04), 0 12px 24px -18px rgba(15,23,32,.20); } /* ---- 1) един ляв ръб за текста ---- */ html.cd-m .cd-redesign > .cd-section > .container > .cd-section-head, html.cd-m .cd-redesign > .cd-section > .container > h2.cd-section-title, html.cd-m .cd-redesign > .cd-section > .container > h3.cd-section-title, /* „Документи“ под щетите… */ html.cd-m .cd-redesign > .cd-section > .container > .cd-files-list, /* …списъкът им… */ html.cd-m .cd-redesign > .cd-section > .container > .cd-owner-note, /* …и бележката на продавача */ html.cd-m .cd-redesign > .cd-section > .container > .cd-section-sub, html.cd-m .cd-redesign > .cd-section > .container > .cd-tdr-ocenka, html.cd-m .cd-redesign > .cd-section > .container > .cd-tdr-more, html.cd-m .cd-redesign > .cd-section > .container > .cd-spec-grid, html.cd-m .cd-redesign > .cd-section > .container > .cd-td-more, html.cd-m .cd-redesign > .cd-section > .container > .cd-more-specs, html.cd-m .cd-redesign > .cd-section > .container > .cd-condition-grid, html.cd-m .cd-redesign > .cd-section > .container > .cd-equip-spotlight, html.cd-m .cd-redesign > .cd-section > .container > .cd-equip-grid, html.cd-m .cd-redesign > .cd-section > .container > .cd-cond-lead, /* Корея: „Състояние на автомобила“ — изречението */ html.cd-m .cd-redesign > .cd-section > .container > #cd-cond-report:has(> .cd-cond-btn), /* …и бутонът; зареденият отчет е карти и остава на 12 */ html.cd-m .cd-redesign > .cd-section > .container > .cd-meta-foot{ margin-left: var(--cd-ot); margin-right: var(--cd-ot); } html.cd-m .cd-redesign > .cd-section > .container > .cd-td-more, html.cd-m .cd-redesign > .cd-section > .container > .cd-tdr-more{ width: calc(100% - 2 * var(--cd-ot)); } /*