/* ============================================================================
mobile.css — поправките, които СЕ ВИЖДАТ.
Зарежда се ПОСЛЕДЕН, за да надделява над style.css. Всичко тук е или
универсално безопасно, или е заключено в `@media (max-width:767px)`,
тоест десктопът не се пипа.
========================================================================== */
/* --- 1. Универсални, безопасни -------------------------------------------- */
/* iOS Safari сам уголемява текста при завъртане на телефона. Спираме го. */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }
/* Никоя снимка не разпъва страницата настрани. */
img, svg, video, canvas{ max-width:100% }
/* Сивото правоъгълниче при докосване на връзка в Android Chrome. */
a, button, [role="button"], input, select, textarea{ -webkit-tap-highlight-color:transparent }
/* Котвите (#секция) да не се крият зад лепкавия хедър. */
:target{ scroll-margin-top:90px }
/* --- 2. Само телефон ------------------------------------------------------ */
@media (max-width:767px){
/* НАЙ-ВАЖНАТА ПОПРАВКА.
Под 16px iOS Safari зумва ЦЯЛАТА страница щом пипнеш полето, и после
не се отзумва — потребителят остава с изместен настрани сайт. Сега
полетата са 13–15.5px, тоест това се случва на всяко търсене. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea{
font-size:12px;
}
/* Големина за пръст. 44px е минимумът, под който се уцелва трудно. */
.dpd-qty__btn,
.burger,
.lightbox__close,
.lightbox__nav,
.pagination a, .pagination span,
.dpd-tab{
min-height:var(--tap);
min-width:var(--tap);
}
/* Лепкавите ленти да не влизат под чертичката на iPhone. */
.stickybar{
padding-bottom:var(--safe-b);
}
/* Таблиците със съвместимости и OE номера се плъзгат настрани в
собствената си кутия, вместо да разпъват страницата. */
.dpd-tabpanel table,
.oe-table,
.compat-table{
display:block;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
max-width:100%;
}
/* Дълъг артикулен номер без интервали чупи подредбата. */
.dpd-top__title,
.dpd-xref__chip,
.pdp-crumbs__nav{
overflow-wrap:anywhere;
}
}
/* ============================================================================
ХЕДЪР НА ТЕЛЕФОН — по макета на дизайнера.
Ред 1: ☰ Меню · ЛОГО · Гараж · Количка · Профил
Ред 2: търсачка на цял ред, с червен квадрат-лупа
Прагът е 860px, защото точно там сегашният хедър минава в мобилен вид
(`@media(max-width:860px)` в style.css). Така няма зона, в която старите
и новите правила да се бият. Над 860px десктопът е НЕПИПНАТ.
========================================================================== */
/* по подразбиране (десктоп) тези са скрити — включват се само на телефон */
.search__btn-ic,
.ic-mob{ display:none }
@media (max-width:860px){
/* горната черна лента я няма в макета */
.topbar{ display:none }
.header{ border-bottom:1px solid var(--line); background:#fff }
/* ТРИ РЕДА: бургер · лого · количка | три карета | търсачка.
Редовете се получават с два псевдоелемента с `flex-basis:100%` — те
принуждават нов ред, без да се пипа маркъпът (той е общ с десктопа). */
.header__inner{
display:flex; flex-wrap:wrap; align-items:center;
height:auto; padding:8px 8px 10px; gap:6px;
}
.header__inner::before,
.header__inner::after{ content:''; flex-basis:100%; height:0; margin:0 }
.header__inner::before{ order:5 }
.header__inner::after { display:none }
/* `.header__actions` е обвивка само за десктоп. Тук се разтваря, за да могат
количката, любимите и профилът да се наредят самостоятелно по редовете. */
.header__actions{ display:contents }
/* --- ред 1 --- */
/* Без надпис „Меню“ — само иконката, на един ред с логото. Големината я
дава правилото за пръст по-горе (44px); тук отпада само пълнежът,
за да е иконката точно в средата на квадрата. */
.burger { order:1; display:grid; place-items:center; padding:0 }
.logo { order:2; margin-right:auto; display:flex; align-items:center;
padding-left:4px; min-width:0; flex:0 1 auto }
.header__actions .cart{ flex:none }
/* --- ред 2: трите карета --- */
.garage { order:6; margin-left:0 }
.haction-fav { order:7; display:block }
.header__actions #profileBtn{ order:8 }
/* --- лупата: на мястото на постоянната търсачка --- */
.hsearch{
order:3; display:grid; place-items:center; flex:none;
width:42px; height:42px; padding:0;
background:var(--bg-soft); border:1px solid var(--line); border-radius:12px;
color:var(--dark); cursor:pointer;
}
.hsearch svg{ width:22px; height:22px }
.header__actions .cart{ order:4 }
/* --- търсачката: скрита, докато не се отвори на цял екран --- */
.search-wrap{ display:none }
/* Логото взима цялото място между бургера и лупата и расте с ширината на екрана —
докато стане 40px високо, по-нагоре не (Мариян, 06.11.2026; дотогава 29px височина и
27vw ширина — рисуваше се само ~23px високо и не се четеше). */
.header .logo{ flex:1 1 0; min-width:0 }
.header .logo__img{ width:100%; height:auto; max-width:190px; max-height:40px; object-fit:contain; object-position:left center }
/* Двойките икони: на телефон върви плътната (`.ic-mob`), на десктоп —
контурната. Без тези два реда в карето на профила няма никаква иконка. */
.ic-mob { display:block }
.ic-desk{ display:none }
/* --- бургерът --- */
.burger__ic,
.burger__x{ display:block; width:26px; height:22px; color:var(--dark) }
.burger__x{ display:none }
.burger.is-open .burger__ic{ display:none }
.burger.is-open .burger__x { display:block }
/* ---------- КОЛИЧКАТА: червено хапче горе вдясно ---------- */
.header__actions .cart{
height:auto; border-radius:14px; box-shadow:0 6px 16px rgba(79,135,1,.28);
background:var(--accent-grad);
}
/* Височината е ТОЧНО колкото лупата (42px) — двете стоят едно до друго и
разлика от 4-8px им личи веднага. */
.cart .cartbtn{
display:grid; grid-template-columns:auto minmax(0,1fr) auto;
align-items:center; gap:11px; height:42px; padding:0 8px 0 11px; color:#fff;
}
.cartbtn__ico svg{ width:24px; height:24px; color:#fff }
.cartbtn__ico .ic-mob{ width:26px; height:22px; fill:currentColor }
/* Баджът стърчеше 8px извън иконката и опираше в „Количка". Прибран е и е
смален, а разстоянието до текста е увеличено. */
.cartbtn__count{ top:-5px; right:-4px; min-width:17px; height:17px; font-size:10px;
background:#fff; color:var(--accent); border:none; font-weight:800 }
.cartbtn__txt { display:flex; flex-direction:column; gap:1px; min-width:0; text-align:left }
.cartbtn__label{ display:block; font-size:11.5px; font-weight:600; line-height:1.15; color:#fff }
.cartbtn__sum { display:block; font-size:14px; font-weight:800; line-height:1.15; color:#fff;
white-space:nowrap }
.cartbtn__toggle{
display:grid; place-items:center; width:auto; height:auto; padding:0 2px 0 0;
background:none; border:0; box-shadow:none;
}
.cartbtn__caret{ width:17px; height:17px; color:#fff; transform:rotate(-90deg) }
/* ---------- ТРИТЕ КАРЕТА ---------- */
/* Гаражът получава малко повече място — там текстът е най-дълъг
(„Моят гараж" + марката и модела), а „Любими" и „Профил" са къси. */
.garage{ flex:1.25 1 0 }
.haction-fav,
.header__actions #profileBtn{ flex:1 1 0 }
.garage,
.haction-fav,
.header__actions #profileBtn{
min-width:0;
background:#fff; border:1px solid var(--line); border-radius:13px;
}
.garage{ background:#f1f6ed; border-color:#d8e6cf }
/* Общият строеж на трите: икона · два реда · стрелка. */
.garage .garage__main,
.haction-fav .haction--fav,
.header__actions #profileBtn{
display:grid; grid-template-columns:auto minmax(0,1fr);
align-items:center; gap:7px;
padding:8px 7px; min-height:56px;
text-decoration:none;
}
/* Стрелка „›" в макета има, но при 375px карето е 111px широко: стрелката
плюс отстоянието ѝ изяждат 17 от тях, а целият бутон и без това води
нататък. Затова тук я няма — на по-широки телефони също, за да са еднакви. */
/* `align-items:stretch` (не flex-start, както е на десктоп): иначе редовете
се разпъват по съдържанието си и излизат извън карето, вместо да се режат
с многоточие. */
.garage .garage__txt,
.haction-fav .haction__txt,
.header__actions #profileBtn .haction__txt{
display:flex; flex-direction:column; align-items:stretch;
gap:1px; min-width:0; text-align:left;
}
.garage .garage__label,
.haction-fav .haction__kicker,
.header__actions #profileBtn .haction__kicker{
font-size:11.5px; font-weight:700; color:var(--dark);
text-transform:none; letter-spacing:0; line-height:1.2;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.garage .garage__car,
.haction-fav .haction__name,
.header__actions #profileBtn .haction__name{
font-size:10.5px; font-weight:400; color:var(--muted); line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:none;
}
/* Надписът под иконата е за стария вид. Крие се само там, където има
двуредов текст, който да го замести — при ГОСТ профилният бутон няма име,
тъй че „Профил" остава единственият надпис и карето не бива да е празно. */
.haction-fav .haction__label,
.header__actions #profileBtn.haction--user .haction__label{ display:none }
.header__actions #profileBtn:not(.haction--user) .haction__label{
display:block; font-size:11.5px; font-weight:700; color:var(--dark);
line-height:1.2; text-align:left;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* --- гараж --- */
.garage__btn { height:auto; background:none; border:0; box-shadow:none; border-radius:0; padding:0 }
.garage__btn::before{ display:none }
.garage__toggle{ display:none }
.garage__ico { width:auto; height:auto; background:none; box-shadow:none; border-radius:0;
color:var(--dark); flex:none }
.garage__ico svg{ width:22px; height:22px; stroke:var(--dark); stroke-width:1.6 }
.garage__ico .ic-mob{ width:22px; height:19px; stroke:none; fill:currentColor }
.garage__count{ top:-6px; right:-7px; min-width:18px; height:18px; font-size:10.5px;
border:2px solid #f1f6ed; background:var(--accent) }
/* Снимката на активната кола. Размерът се задава на самата снимка, а не на
полето: полето носи и брояча, а `overflow:hidden` би го отрязал. */
.garage__ico--photo .garage__ico__img{
width:30px; height:27px; border-radius:8px; object-fit:cover; display:block;
}
.garage__ico.garage__ico--photo{ width:auto; height:auto; padding:0; background:none }
/* --- любими --- */
.haction-fav__ico{ position:relative; display:grid; place-items:center; flex:none }
.haction--fav svg{ width:22px; height:22px; stroke:var(--dark) }
.haction-fav__count{ top:-6px; right:-8px; min-width:18px; height:18px; font-size:10.5px;
background:var(--accent); color:#fff; border:2px solid #fff }
.haction-fav__count[hidden]{ display:none }
/* --- профил --- */
.header__actions #profileBtn{ padding:8px 7px }
/* Стрелката вътре в името е за десктопното каре. */
#profileBtn .haction__name svg{ display:none }
.haction__ico{ flex:none }
.haction svg { width:25px; height:25px; fill:none; color:var(--dark) }
.haction .ic-mob{ width:22px; height:25px; fill:currentColor }
.haction__avatar{ width:30px; height:30px; border:2px solid #fff }
.haction__dot{
display:block; position:absolute; right:-1px; bottom:0;
width:11px; height:11px; border-radius:50%;
background:#16a34a; border:2px solid #fff;
}
/* ---------- ТЪРСАЧКАТА НА ЦЯЛ ЕКРАН ----------
На телефон постоянна лента в хедъра яде 62px от всяка страница, а
подсказките излизаха в тесен балон под нея. Тук лентата се показва само
при докосване на лупата — и заема целия екран, за да има място за
историята и резултатите. */
body.is-msearch{ overflow:hidden }
/* Плаващият чат е на z-index 5000 и стоеше върху списъка с търсения. */
body.is-msearch .aiw,
body.is-msearch .totop{ display:none }
body.is-msearch .search-wrap{
position:fixed; inset:0; z-index:1300;
background:#fff; padding:10px 12px 0;
/* Затварянето е ВЛЯВО, като стрелка назад — там го търси ръката на телефон
и десният край остава на търсачката. Долепено до ръба вдясно то
изглеждаше отрязано и не приличаше на бутон. */
display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto minmax(0,1fr);
gap:8px 8px; align-content:start;
}
.msearch-close{
grid-area:1 / 1 / 2 / 2; align-self:center;
display:grid; place-items:center; width:40px; height:40px; flex:none;
background:var(--bg-soft); border:1px solid var(--line); border-radius:11px;
padding:0; color:var(--dark); cursor:pointer;
}
.msearch-close svg{ width:21px; height:21px }
body.is-msearch .search{ grid-area:1 / 2 / 2 / 3 }
.search{ height:52px; border-radius:12px; padding:5px 5px 5px 14px;
background:var(--bg-soft); border:2px solid transparent }
.search__lead { width:22px; height:22px; color:var(--dark) }
/* `min-width:0` — за flex елемент подразбиращото се е `auto`, а при
това значи ширината по атрибута `size` (20 знака ≈ 179px). Полето отказваше
да се свие под нея и при 344px бутонът „Търси" излизаше 25px извън карето. */
.search__input{ min-width:0; padding:0 12px; font-size:15px }
.search__btn { width:auto; padding:0 18px; justify-content:center; border-radius:9px; box-shadow:none }
.search__btn-txt{ display:block; font-size:14px }
.search__btn-ic { display:none }
/* Подсказките: не балонче под лентата, а целият останал екран. */
body.is-msearch .ac{
grid-area:2 / 1 / 3 / 3;
position:static; inset:auto; margin:0;
max-height:none; height:100%; overflow:auto;
border:0; border-radius:0; box-shadow:none;
opacity:1; visibility:visible; transform:none;
padding-bottom:16px;
}
}
/* ---- много тесни телефони (320px: iPhone SE 1, стари Android-и) ----
Бургер 44 + лого 128 + количка 133 = 305, плюс отстоянията и полето — 341
при екран от 320. Количката падаше на свой ред и хедърът ставаше 265px.
Тук надписът „Количка" отпада (остава сумата, която е същественото), а
логото и каретата се свиват точно колкото да се съберат. */
@media (max-width:360px){
.header__inner{ padding:8px 8px 10px; gap:6px }
/* 32vw беше ПО-ШИРОКО от 27-те vw на основния блок: при 344px логото ставаше
114px вместо 97 и заедно с количката редът не се събираше. */
/* логото — колкото място остане (горе, .header .logo) */
/* Количката се свива до иконка + сума. Надписът „Количка" и стрелката
отпадат — стрелката е украса, целият бутон и без това води към количката. */
.cart .cartbtn{ height:42px; padding:0 11px 0 9px; gap:9px }
.cartbtn__label{ display:none }
.cartbtn__toggle{ display:none }
.cartbtn__sum{ font-size:13.5px }
.cartbtn__ico svg{ width:22px; height:22px }
.cartbtn__ico .ic-mob{ width:24px; height:20px }
/* Баджът стърчеше 8px навън и лягаше върху сумата. */
.cartbtn__count{ top:-7px; right:-6px; min-width:17px; height:17px; font-size:10px }
.garage .garage__main,
.haction-fav .haction--fav,
.header__actions #profileBtn{ padding:7px 6px; gap:6px; min-height:52px }
.garage .garage__label,
.haction-fav .haction__kicker,
.header__actions #profileBtn .haction__kicker{ font-size:11px }
.garage .garage__car,
.haction-fav .haction__name,
.header__actions #profileBtn .haction__name{ font-size:10px }
.haction__avatar{ width:28px; height:28px }
.garage__ico--photo .garage__ico__img{ width:28px; height:25px }
/* „Бързи действия" в профила: две колонки не се събират в 320px и карето
излизаше с 9px извън екрана. */
.account .acc-quick__grid{ grid-template-columns:1fr }
}
/* ============================================================================
НАЧАЛНА СТРАНИЦА — героят
На телефон от цялото каре остава САМО търсачката по автомобил (`.finder`).
Заглавието, подзаглавието, двата бутона и числата (1M+ / 24ч / 14 дни) се
скриват — на малък екран изяждаха 523px, преди човек да стигне до това,
заради което е дошъл.
========================================================================== */
/* .hero__trust е само за телефон — на десктоп там стоят числата.
Стои ПРЕДИ медийния блок: при равна конкретност печели по-късното. */
.hero__trust{ display:none }
@media (max-width:860px){
/* Банерът е ОТДЕЛНО КАРЕ между търсачката на сайта и „Търси по автомобил" —
с полета отстрани и заоблени ъгли, а не от ръб до ръб. Затова снимката е
фон на самото каре (.hero__content), а не на цялата секция. */
.hero{ background:#fff; color:#fff }
.hero__bg{ display:none }
.hero__inner{ padding:0 12px 12px; gap:0; grid-template-columns:1fr }
.hero__content{
display:flex; flex-direction:column; justify-content:center;
position:relative; z-index:2;
/* Карето излиза ДО РЪБА на екрана: `.hero__inner` има 12px поле заради
търсачката под него, затова тук се компенсира с отрицателен margin. */
margin:0 -12px;
padding:14px 16px 68px; /* долното поле е за частта, която картата покрива */
border-radius:0;
overflow:hidden;
/* Височината е точно колкото е снимката при ПЪЛНАТА широчина на екрана,
за да се вижда цялата.
ЕДИН файл, 800px: при двоен пиксел на телефон от 375px трябват 750 —
800 ги покрива. По-широко копие за гъст пиксел беше излишно. */
min-height:calc(100vw * 941 / 1672);
background-color:#0c0c0d;
background-image:
linear-gradient(90deg,rgba(10,10,12,.88) 0%,rgba(10,10,12,.60) 38%,rgba(10,10,12,.08) 62%,transparent 78%),
url("../img/hero-mobile.webp");
background-repeat:no-repeat, no-repeat;
background-position:center, center top;
background-size:cover, 100% auto;
max-width:none;
}
.hero__tag{ display:none } /* заглавието вече го казва */
.hero__title{
font-size:20px; line-height:1.14; letter-spacing:-.4px;
margin:0 0 6px; max-width:64%;
}
.hero__sub{
font-size:11.5px; line-height:1.4; color:#c8c8d0;
margin:0 0 10px; max-width:60%;
}
.hero__cta{ display:none }
.hero__stats{ display:none } /* числата са за десктоп */
/* трите обещания под текста */
.hero__trust{ display:flex; flex-wrap:wrap; gap:5px 12px; margin-top:0; max-width:64% }
.hero__trust span{
display:inline-flex; align-items:center; gap:5px;
font-size:10.5px; font-weight:600; color:#e6e6ea; white-space:nowrap;
}
.hero__trust svg{ width:14px; height:14px; flex:none; color:#fff }
/* Търсачката ляга ЧАСТИЧНО ВЪРХУ банера — оттам идва усещането за дълбочина.
Отрицателното поле я издърпва нагоре, а сянката я отделя от снимката. */
.finder{
position:relative; z-index:3;
margin-top:-34px;
padding:16px; border-radius:14px;
box-shadow:0 -4px 20px rgba(15,15,20,.16), 0 6px 18px rgba(15,15,20,.06);
}
}
/* ============================================================================
МОДУЛЪТ „Търси по автомобил" — изчистено оформление на телефон.
ПОЛЕТАТА НЕ СА ПИПАНИ — същите пет селекта в същия ред. Смененo е само
облеклото: по-тънка рамка вместо тежка сянка, бели полета вместо сиви,
по-дребен шрифт, икона вляво във всяко поле.
========================================================================== */
@media (max-width:860px){
/* --- картата: тънка рамка, лека сянка, по-малко поле --- */
.finder{
padding:16px;
border:1px solid var(--line);
border-radius:14px;
box-shadow:0 2px 10px rgba(20,20,30,.06);
}
/* --- заглавието: по-дребно и по-леко --- */
.finder__title{ gap:9px; margin-bottom:14px; font-size:17px; font-weight:700 }
.finder__title svg{ width:22px; height:22px }
/* всяко поле на цял ред, както е „Марка“. Две в редица режат дългите
имена на модели и двигатели. */
.finder__grid{ grid-template-columns:1fr; gap:10px; margin-bottom:12px }
/* --- полетата: бели, с тънка рамка, само стрелка --- */
.finder__sel{
height:48px;
padding:0 36px 0 14px;
border:1px solid var(--line);
border-radius:10px;
font-size:14px;
background-color:#fff;
background-repeat:no-repeat;
background-position:right 13px center;
background-size:11px 7px;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.finder__sel:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,135,1,.10) }
/* Заключените полета изобщо не се показват — картата тръгва само с
„Марка“ и всяко следващо изниква щом предишното е избрано. Скриптът
вече вдига и сваля `disabled` (main.js), тоест не му трябва промяна.
Бутонът „Покажи части“ НЕ се крие — той е `.finder__btn`, не `__sel`. */
.finder__sel:disabled{ display:none }
/* --- бутонът не се показва на телефон ---
Избереш ли двигател, отиваш направо при частите. main.js вече умее това
(пътят, по който върви, когато бутон изобщо няма) — виж бележката там. */
.finder__btn{ display:none }
}
/* ============================================================================
ЛЕНТАТА С ПРЕДИМСТВАТА — на телефон става 2x2 от отделни карти.
Беше четири колони на сив фон, без рамки. Сега всяко предимство е своя
бяла карта с тънка рамка, както в макета.
========================================================================== */
@media (max-width:860px){
.usp{ background:#fff }
.usp__inner{
grid-template-columns:1fr 1fr;
gap:10px;
padding:14px 12px;
}
.usp__item{
align-items:center;
gap:10px;
padding:6px 6px;
background:#fff;
border:1px solid var(--line);
border-radius:12px;
}
.usp__item svg{ width:30px; height:30px }
/* текстът наследяваше междуредието на страницата и двата реда на подзаглавието
зейваха. Затова се задава и на обвивката, не само на самите елементи. */
.usp__item > div{ min-width:0; line-height:1.25 }
.usp__item strong{ font-size:12px; line-height:1.25; margin-bottom:3px }
.usp__item span{ display:block; font-size:12px; line-height:1.25 }
}
/* ============================================================================
КАТЕГОРИИ — карти по две в редица, както в макета.
Снимка отгоре, а долу заглавие вляво и червена стрелка вдясно.
========================================================================== */
@media (max-width:860px){
.cards--cat{ grid-template-columns:1fr 1fr; gap:10px }
/* Решетка вместо колона, за да седнат заглавието и стрелката на ЕДИН ред.
Имената на категориите тук са по-дълги от макета („Трансмисия и
Задвижване") и се пренасят на два-три реда; при подредба в колона
стрелката падаше под тях. Сега е до тях и се центрира спрямо текста. */
.card--photo{
border-radius:14px;
/* в макета няма рамка — картата се държи само от мека сянка */
border:0;
box-shadow:0 2px 10px rgba(20,20,30,.07);
/* Изрично, защото `.card{padding:20px 16px}` в style.css важи само под
480px. Между 481 и 860px полето падаше на нула и заглавието опираше
в ръба на картата. */
padding:16px;
display:grid;
grid-template-columns:1fr auto;
grid-template-areas:
"media media"
"title arrow";
align-content:start;
}
/* снимката: по-ниска от квадрат и без чертата под нея — картата е едно цяло */
.card--photo .card__media{ grid-area:media; aspect-ratio:4/4; padding:12px; border-bottom:0 }
.card--photo .card__info{ grid-area:title; align-self:center; padding:0; flex:none }
.card--photo .card__info h3{ font-size:12.5px; line-height:1.25; margin:0 }
/* подзаглавието го няма в макета */
.card--photo .card__info p{ display:none }
/* Стрелката се показваше само при посочване с мишка, тоест на телефон
не се виждаше никога. Тук е винаги видима. */
.card--photo .card__arrow{
grid-area:arrow; position:static; align-self:center;
opacity:1; transform:none;
/* стрелката седи в бледо кръгче */
width:24px; height:24px; padding:0;
display:flex; align-items:center; justify-content:center;
border-radius:50%;
background:rgb(75 66 66 / 8%);
font-size:14px; line-height:1;
}
}
/* ============================================================================
ЗАГЛАВИЯ НА СЕКЦИИТЕ на телефон.
От подадените стойности реално се различават само две — останалите
(тежест 900, letter-spacing -.8px, цвят, position, display, margin-top на
подзаглавието) вече са същите в style.css и няма смисъл да се повтарят.
========================================================================== */
@media (max-width:860px){
.section__title{ font-size:clamp(22px, 3vw, 28px) } /* беше clamp(26px, 3vw, 36px) */
.section__lead { font-size:12px } /* беше 16px */
}
/* ============================================================================
РАЗПЪНАТА КАТЕГОРИЯ (модалът с подкатегориите)
На телефон подкатегориите са по една на ред, разпънати докрай. Бяха по три
(под 480px по две) и дългите имена като „Датчик за износване на накладките“
се пренасяха на четири реда.
========================================================================== */
@media (max-width:860px){
.subgrid{ grid-template-columns:1fr; gap:8px }
/* .subitem вече е ред със снимка вляво и име вдясно — трябва му само въздух */
.subitem{ padding:8px 10px; gap:10px }
.subitem__img{ width:42px; height:42px }
.subitem__name{ font-size:13px }
.subgroup__title{ font-size:14px; margin-bottom:10px }
.catmodal__body{ padding:14px }
/* Търсачката и хиксчето заемат целия ред, подравнени с плочките отдолу.
Полето беше с ФИКСИРАНА широчина (230px / max 42vw) и оставаше къс ред,
който не се връзваше с нищо. */
.catmodal__head { padding:14px; gap:12px }
.catmodal__tools { width:100%; gap:8px }
.catmodal__search{ flex:1; min-width:0 }
.catmodal__search input{ width:auto; max-width:none; flex:1; min-width:0 }
}
/* ============================================================================
СКОРОШНИ КОЛИ под търсачката по автомобил (само за нелогнат посетител).
Ползва облика на картите от „Продължи оттам", но всяка кола заема ЦЕЛИЯ
ред — там те са в редица, която се пренася, и на телефон се цепят на две.
========================================================================== */
.recent-cars{ display:none } /* на десктоп го няма — там има гараж в хедъра */
@media (max-width:860px){
/* Карти със снимката, които се плъзгат настрани; следващата наднича отдясно, за да личи,
че има още. Една кола — на цял ред. Заглавието — като другите на началната (черта +
зелената част). Мариян, 06.11.2026 — дотогава бяха редове с малка снимка. */
.recent-cars{ display:block; margin-top:20px }
.recent-cars__label{
position:relative; display:block; margin:0 0 10px; padding-left:18px;
font-size:18px; font-weight:900; letter-spacing:-.4px; line-height:1.15; color:#0f1b26;
}
.recent-cars__label::before{ content:''; position:absolute; left:3px; top:1px; bottom:-1px; width:6px; border-radius:2px; background:linear-gradient(180deg, #6fb31a, #3f6e00); transform:skewX(-14deg) }
.recent-cars__label span{ color:var(--accent) }
/* същите карти и в „Продължи оттам" (home-trail) за влезлия — там колите не са горе */
.recent-cars__list, .section--trail .foryou-cars{
display:flex; gap:12px; margin:0 -20px; padding:2px 20px 16px; overflow-x:auto;
scroll-snap-type:x mandatory; scroll-padding:0 20px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.recent-cars__list::-webkit-scrollbar, .section--trail .foryou-cars::-webkit-scrollbar{ display:none }
.rcar{
flex:0 0 80%; width:auto; min-width:0; scroll-snap-align:start;
display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;
border:1px solid #e3e9de; border-radius:16px; background:#fff;
box-shadow:0 12px 24px -16px rgba(15,27,38,.45);
}
.rcar:only-child{ flex-basis:100% }
.rcar:hover{ transform:none }
.rcar__pic{
position:relative; display:grid; place-items:center; aspect-ratio:16 / 9; color:#9fb08f; /* като снимката (640×360) — нищо не се реже */
background:linear-gradient(160deg, #f5f9f0 0%, #e4eed8 100%);
}
.rcar__pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.rcar__pic--small img{ object-fit:contain; padding:12px 20px; mix-blend-mode:multiply } /* малката (140×105, бял фон) — цяла */
.rcar__pic > svg{ width:46px; height:46px }
.rcar__body{ display:flex; align-items:center; gap:10px; padding:11px 12px 12px 14px; border-top:1px solid #edf1ea }
.rcar .foryou-car__info{ flex:1 }
.rcar .foryou-car__model{ font-size:15px; font-weight:800 }
.rcar .foryou-car__spec{ font-size:12.5px }
.rcar__go{
flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; color:#fff;
background:linear-gradient(135deg, #6fb31a 0%, #3f6e00 100%); box-shadow:0 6px 14px -6px rgba(63,110,0,.75);
}
.rcar__go svg{ width:18px; height:18px }
.recent-cars .foryou-x, .section--trail .rcar .foryou-x{ top:8px; right:8px; width:28px; height:28px; opacity:1; background:rgba(255,255,255,.94); border:0; box-shadow:0 2px 8px rgba(15,27,38,.2) }
.recent-cars .foryou-x svg, .section--trail .rcar .foryou-x svg{ width:12px; height:12px }
/* Същите коли в „Продължи оттам" по-долу — повторение; там отпадат (home-trail). */
.foryou-group--dupcars,
.section--trail-onlycars{ display:none }
}
/* ============================================================================
„Продължи оттам" — колите на цял ред.
Картата НЕ беше къса, а точно обратното: излизаше 29px извън блока си и
9px извън екрана. Причината е `min-width:auto` — стойността по подразбиране
за flex-дете, която не му дава да се свие под естествената широчина на
съдържанието. Дългите редове („1.4 i.e. 16V T.S. (930.A3A) · 103 к.с ·
1996–2001") разпъваха реда, вместо да се отрежат с многоточие.
========================================================================== */
@media (max-width:860px){
/* На телефон групата е КОЛОНА, но си остава с `align-items:flex-start` от
десктопа — а там това значи „всяко дете колкото си е съдържанието".
Затова редът с колата се разпъваше по най-дългия текст вместо да се
побере в блока. `stretch` го връзва за широчината на родителя. */
.foryou-group{ align-items:stretch }
.foryou-cars,
.foryou-cats,
.foryou-searches{ min-width:0 }
.foryou-car { width:100%; min-width:0 }
.foryou-car__info{ min-width:0 }
}
/* ============================================================================
„Продължи оттам" на телефон — по-стегнато и подредено.
Голямото заглавие отпада: на негово място е дискретен ред с часовник за история
(„Скоро разглеждани"). Категориите бяха капсули с различна ширина — част със
снимка, част без, дългите имена на два реда — и се редяха една под друга.
Сега са еднакви плочки (снимка в кръг, име до два реда) в лента, която се
плъзга настрани; без снимка — резервна иконка. Търсенията — също в лента.
========================================================================== */
@media (max-width:860px){
/* 06.11.2026 (Мариян: „по-красиво и удобно"): всяка група със свое заглавие като горе
„Разглеждани автомобили" (зелената черта); категориите — плочки като „Най-търсени
авточасти", по три на екран с плъзгане; търсенията — подреден списък в бяло каре (лупа,
номерът, „Потърси отново", кръстчето вдясно); кръстчето — по-голямо, за пръст. */
.section--trail{ padding:24px 0 8px }
.foryou-trail__head{ display:none }
.section--trail .foryou-group{ gap:0; padding:0 0 18px }
.section--trail .foryou-group + .foryou-group{ border-top:0; padding-top:4px }
.section--trail .foryou-group__label{ display:none }
.foryou-group__title{
position:relative; display:block; margin:0 0 10px; padding-left:18px;
font-size:18px; font-weight:900; letter-spacing:-.4px; line-height:1.15; color:#0f1b26;
}
.foryou-group__title::before{ content:''; position:absolute; left:3px; top:1px; bottom:-1px; width:6px; border-radius:2px; background:linear-gradient(180deg, #6fb31a, #3f6e00); transform:skewX(-14deg) }
.foryou-group__title span{ color:var(--accent) }
.foryou-cats{ flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
gap:10px; margin:0 -20px; padding:2px 20px 8px; scroll-padding-inline:20px } /* иначе snap лепи първата плочка о ръба */
.foryou-cats::-webkit-scrollbar{ display:none }
.foryou-cat{
flex:0 0 calc((100% - 20px) / 3.25); min-width:0; scroll-snap-align:start;
flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding:12px 8px 10px;
border:1px solid #e6ebe3; border-radius:16px; background:#fff; text-align:center;
box-shadow:0 10px 20px -16px rgba(15,27,38,.45);
}
.foryou-cat:hover{ transform:none }
.foryou-cat__pic{ display:grid; place-items:center; width:100%; height:62px; border-radius:0; background:none }
.foryou-cat__pic:empty{
width:54px; height:54px; margin:4px 0; border-radius:50%;
background:#f1f7ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fb31a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E") center / 26px no-repeat }
.foryou-cat__img{ width:62px; height:62px; padding:0; object-fit:contain; background:none; border-radius:0; mix-blend-mode:multiply } /* белият фон на JPEG-а се слива */
.foryou-cat__pic:empty + .foryou-cat__name{ padding-left:0 }
.foryou-cat__name{ min-height:2.5em; font-size:12.5px; font-weight:800; line-height:1.25; color:var(--dark);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* търсенията — един списък в бяло каре, ред под ред */
.foryou-searches{
flex-direction:column; flex-wrap:nowrap; gap:0; margin:0; padding:0; overflow:hidden;
border:1px solid #e3e9de; border-radius:16px; background:#fff; box-shadow:0 10px 20px -16px rgba(15,27,38,.45);
}
.section--trail .foryou-search{
position:relative; display:flex; align-items:center; gap:12px; width:100%; max-width:none; min-height:58px;
padding:9px 50px 9px 12px; border:0; border-radius:0; background:none; box-shadow:none;
}
.section--trail .foryou-search + .foryou-search{ border-top:1px solid #eef1ec }
.section--trail .foryou-search:hover, .section--trail .foryou-search:active{ transform:none; background:#f7fbf2 }
.section--trail .foryou-search > svg{ width:36px; height:36px; flex:none; padding:9px; border-radius:11px; background:#eef6e4; color:var(--accent) }
.foryou-search__txt{ display:flex; flex-direction:column; gap:1px; min-width:0 }
.section--trail .foryou-search__q{ font-family:inherit; font-size:15px; font-weight:800; letter-spacing:.2px; font-variant-numeric:tabular-nums;
color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.foryou-search__hint{ display:block; font-size:12px; font-weight:600; color:#6b726a }
/* кръстчето — по-голямо, плътно и винаги видимо (на тъч няма посочване) */
.section--trail .foryou-x{ top:6px; right:6px; width:26px; height:26px; margin:0; opacity:1; transform:none;
background:#fff; border:1px solid #e3e9de; box-shadow:0 2px 6px rgba(15,27,38,.12); color:#6b726a }
.section--trail .foryou-search .foryou-x{ top:50%; right:14px; margin-top:-14px; width:28px; height:28px; box-shadow:none; background:#f4f6f3; border-color:transparent }
}
/* ============================================================================
КАТЕГОРИЙНА СТРАНИЦА — лентата с предимствата в героя.
На телефон отпада: същите четири обещания стоят и в подвала, а тук
избутваха надолу заглавието и продуктите.
========================================================================== */
@media (max-width:860px){
.cathero__usps{ display:none }
.cathero__lead{ display:none } /* описанието на категорията — също */
}
/* ============================================================================
КАТЕГОРИЙНА СТРАНИЦА — „Избери марка" да се държи като блока на началната.
Буквите бяха ЕДИН ред с `flex-wrap:nowrap` + `overflow-x:auto`, а бутоните
с `flex:1 1 0` се свиваха, за да се съберат — оттам смачканият ред, който
излизаше извън екрана. Сега се пренасят на нов ред, както на началната.
Плочките стават две в редица (бяха три и текстът се цепеше на три реда).
========================================================================== */
@media (max-width:860px){
.alpha-filter{
flex-wrap:wrap;
overflow-x:visible;
justify-content:center;
gap:6px;
margin-bottom:18px;
}
.alpha-filter__btn{
flex:0 0 auto; /* без свиване — иначе буквите се смачкват */
min-width:34px;
height:34px;
padding:0 8px;
border-radius:9px;
}
.brands-grid{ grid-template-columns:1fr 1fr }
}
/* ============================================================================
КАТЕГОРИЕН ГЕРОЙ — снимката на продукта на телефон.
Прагът е 768px (не 860), защото под него ляга правилото за таблет
`@media(max-width:1080px){ .cathero__product{width:48%;opacity:.85} }`
в style.css — тоест телефон и таблет получават различно третиране.
Снимките са изрязан продукт с кутия върху прозрачен фон (AI-тата, ~97%
от категориите). Досега на телефон бяха избледнял фон — прозрачност,
маска нагоре и тъмна подложка ги гасяха почти изцяло. Сега продуктът е
ГОЛЯМ и ярък зад текста, по средата, а четимостта идва от сянка на
буквите и лека тъмнина отгоре, където стоят пътечката и заглавието.
Фонът зад него е по-жив, отколкото на компютър: там лявата третина е
плътно черна за текста, а тук текстът е върху снимката.
`mask-image:none` е задължително: style.css има свое мобилно правило с
маска, която избледнява снимката нагоре.
========================================================================== */
@media (max-width:768px){
.cathero__inner{ min-height:340px }
/* И двата селектора, защото `.cathero--product .cathero__product` в
style.css е по-конкретен и надделяваше над широчината. */
.cathero__product,
.cathero--product .cathero__product{
width:min(85%,320px); /* таванът — на по-широк телефон излизаше над героя */
aspect-ratio:1/1;
top:auto; bottom:16px; right:auto; left:50%;
transform:translateX(-50%);
opacity:1;
background-position:center;
-webkit-mask-image:none;
mask-image:none;
filter:drop-shadow(0 12px 24px rgba(0,0,0,.6));
z-index:1;
}
/* Тъмнина само отгоре — под пътечката и заглавието. */
.cathero__inner::before{
content:"";
position:absolute; inset:0; z-index:2;
pointer-events:none;
background:linear-gradient(180deg,
rgba(12,12,12,.45) 0%,
rgba(12,12,12,.10) 50%,
rgba(12,12,12,0) 70%);
}
/* Фонът: по-светла основа, по-видими линии и червеното сияние — по
средата, зад продукта (на компютър е вдясно, при снимката там). */
.cathero__bg{
background:
linear-gradient(180deg, rgba(12,12,12,.40) 0%, rgba(12,12,12,.08) 55%, rgba(12,12,12,.25) 100%),
repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 24px),
repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
#1a1a1c;
}
.cathero__bg::before{
background:
radial-gradient(ellipse 100% 70% at 50% 62%, rgba(82,138,12,.75) 0%, rgba(52,90,5,.38) 50%, transparent 80%),
radial-gradient(ellipse 45% 32% at 50% 60%, rgba(105,176,9,.40) 0%, transparent 100%);
}
.cathero__bg::after{
background:repeating-linear-gradient(125deg, rgba(98,165,2,.07) 0 2px, transparent 2px 9px);
}
.cathero__content{ position:relative; z-index:3 }
/* Картината на марката (style.css, .cathero--brand) — долу вдясно, под
текста; горе тъмнее за пътечката и заглавието. По ШИРИНА, не по височина:
150% от екрана показва дясната ѝ част (от ~33% нататък) — там са цялата
кола и знакът. По височина излизаше по-широка и режеше предницата и знака.
18px над долния ръб — толкова го застъпва бялото каре под хедъра. */
.cathero--brand .cathero__bg{
background:
linear-gradient(180deg, #0c0c0c 0%, rgba(12,12,12,.7) 34%, rgba(12,12,12,0) 52%),
var(--brand-hero) 100% calc(100% - 18px) / 150% auto no-repeat,
#0c0c0c;
}
/* Място под текста колкото е картината (150% ширина / 3 = 50vw) — колата стои
ПОД текста, не зад него. На модела описанието е дълго и я скриваше. */
.cathero--brand .cathero__inner{ padding-bottom:calc(50vw + 22px) }
/* Ветрилото с поколенията (style.css, .cathero--gens) на телефон го няма —
хедърът да е компактен; поколенията са в картите под него. Без него остава
тъмният фон с червеното сияние, както на категориите. */
.cathero__gens{ display:none }
.cathero--gens .cathero__content{ max-width:none }
.cathero--gens .cathero__inner{ min-height:0 }
.cathero__crumbs{ text-shadow:0 1px 3px rgba(0,0,0,.9) }
.cathero__title { text-shadow:0 2px 3px rgba(0,0,0,.85), 0 0 22px rgba(0,0,0,.75) }
.cathero__facts { text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 12px rgba(0,0,0,.8) }
/* Подзаглавието е градиент, изрязан по буквите (background-clip:text) —
`text-shadow` се рисува ВЪРХУ такъв фон и го загасява, затова сянката е
`filter`. Цветът е плътен и по-светъл: тъмният край на градиента
изчезваше върху бялата кутия на снимката. */
.cathero__sub{
background:none;
color:#8fd13a;
text-shadow:none;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 0 6px rgba(0,0,0,.8));
}
}
/* ============================================================================
СВЕТЛИЯТ ХЕДЪР НА КАТЕГОРИЯТА на телефон (style.css, .cathero--light).
Тъмнината отгоре и сенките на буквите са за тъмния вариант — тук отпадат.
Широкият банер (.cathero--wide) не стои зад текста, а ПОД него, по цялата
ширина на екрана: изрязан около продукта, с меко избледняване в краищата.
Селекторите са с три класа — правилата за тъмния вариант горе са с два.
========================================================================== */
@media (max-width:860px){
.cathero--light .cathero__inner::before{ display:none }
.cathero--light.cathero--wide .cathero__inner{ min-height:0; padding-bottom:30px }
.cathero--light.cathero--wide .cathero__product{
position:relative; display:block;
top:auto; bottom:auto; left:auto; right:auto; transform:none;
width:calc(100% + 40px); max-width:none; height:auto; margin:6px -20px 0;
aspect-ratio:16/8;
background-size:cover; background-position:76% center;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 92%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.cathero--light.cathero--wide .cathero__content{ max-width:none }
/* Квадратната снимка (продукт или снимката на категорията) — също под текста, по-малка:
зад текста тъмните ѝ части го правеха нечетим върху светлото. */
.cathero--light:not(.cathero--wide) .cathero__inner{ min-height:0; padding-bottom:30px }
.cathero--light:not(.cathero--wide) .cathero__product{
position:relative; display:block;
top:auto; bottom:auto; left:auto; right:auto; transform:none;
width:min(62%,230px); max-width:none; height:auto; aspect-ratio:1/1; margin:10px auto 0;
background-size:contain; background-position:center; opacity:1;
-webkit-mask-image:none; mask-image:none;
}
}
/* ============================================================================
КАРЕТО „ТЪРСИ ПО АВТОМОБИЛ" на категорийните страници (partials/car-finder).
Същото третиране като на началната: по едно поле на ред и заключените
изобщо не се показват. Тук редът беше `repeat(5,1fr)` без мобилно правило —
петте полета се смачкваха и се режеха от десния ръб.
Каскадата е същата (същите id-та в main.js), затова е само CSS.
========================================================================== */
@media (max-width:860px){
.carfinder__search-row,
.carfinder__search-row--nomake,
.carfinder__search-row--nomodel{
grid-template-columns:1fr;
gap:10px;
}
/* Заключеното поле пада заедно с надписа си — затова се крие обвивката
`.carfinder__field`, а не самият