/* =================================================================== Sauto.BG — Modern Redesign Палитра, взета от оригиналния сайт: primary red #4f8701 -> #355c00 | dark #111 | text #333 | link #1a67b1 =================================================================== */ :root{ --accent: #4f8701; --danger: #d92d20; --accent-dark:#355c00; --danger-dark:#a3190f; --accent-grad:linear-gradient(135deg,#4f8701 0%,#355c00 100%); --danger-grad:linear-gradient(135deg,#e5342a 0%,#a3190f 100%); --dark: #111111; --dark-2: #1b1b1b; --ink: #333333; --muted: #777777; --line: #e4e4e7; --bg: #ffffff; --bg-soft: #f5f6f8; --bg-soft-2: #eceef1; --link: #1a67b1; --yellow: #f8cd01; --radius: 14px; --radius-sm: 10px; --shadow: 0 6px 24px rgba(20,20,30,.08); --shadow-lg: 0 16px 50px rgba(20,20,30,.16); --ease: cubic-bezier(.22,.61,.36,1); --max: 1240px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; color:var(--ink);background:var(--bg);line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%} button{font-family:inherit;cursor:pointer;border:none;background:none} .container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px} /* По-широк контейнер на големи монитори */ /* Ширината расте с екрана (Мариян, 05.11.2026): на лаптоп ~1520px (1920 при 125 %) беше 1240 и оставаха по ~140px празно отстрани. От 1366px — по ~60px поле, до 1430px (колкото на голям монитор); над 2200px — 1560px. Старото: 1240 / 1340 от 1600 / 1430 от 1850. */ @media (min-width:1366px){ :root{ --max:min(calc(100vw - 120px), 1430px) } } @media (min-width:2200px){ :root{ --max:1560px } } .ic{width:18px;height:18px;fill:currentColor;flex:none} /* ---------- BUTTONS ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 26px;border-radius:var(--radius-sm);font-weight:700;font-size:15px; transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s; white-space:nowrap; } .btn--sm{padding:10px 18px;font-size:14px} .btn--primary{background:var(--accent-grad);color:#fff;box-shadow:0 8px 20px rgba(79,135,1,.28)} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(79,135,1,.40)} .btn--ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)} .btn--ghost:hover{background:#fff;color:var(--dark);border-color:#fff} .btn--light{background:#fff;color:var(--accent-dark)} .btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} /* ---------- TOPBAR ---------- */ .topbar{background:linear-gradient(90deg,#161616 0%,#0e0e0e 100%);color:#b9b9c2;font-size:13px;border-bottom:1px solid rgba(255,255,255,.06)} .topbar__inner{display:flex;justify-content:space-between;align-items:center;height:40px} .topbar__left,.topbar__right{display:flex;align-items:center;gap:16px} .topbar__item{display:inline-flex;align-items:center;gap:7px} .topbar__item .ic{width:15px;height:15px;opacity:.8} .topbar__item strong{color:#fff;font-weight:600} .topbar__item--accent{color:#fff;font-weight:600} .topbar__item--accent .ic{fill:var(--accent);opacity:1} .topbar__item--accent a{font-weight:700} .topbar__item--accent a:hover{color:var(--accent)} .topbar__usp .ic{stroke:var(--accent);opacity:1;width:16px;height:16px} .topbar__sep{width:1px;height:16px;background:rgba(255,255,255,.14)} .topbar__link{position:relative;transition:color .2s;padding:2px 0} .topbar__link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .25s var(--ease)} .topbar__link:hover{color:#fff} .topbar__link:hover::after{transform:scaleX(1);transform-origin:left} /* ---------- HEADER (скролва се заедно със страницата) ---------- */ .header{position:relative;z-index:500;background:#fff;box-shadow:0 1px 0 var(--line)} .header__inner{display:flex;align-items:center;gap:16px;height:88px} .garage{margin-left:auto} /* изтласква гаража + действията надясно */ /* всички контроли в хедъра — еднаква височина 54px */ .search,.garage__btn,.haction{height:54px} .logo{display:flex;align-items:center;flex:none;transition:transform .3s var(--ease)} .logo:hover{transform:scale(1.03)} .logo__img{height:50px;width:auto;display:block} /* лого във футъра (тъмен фон) — светла капсула, за да изпъкнат черните букви */ /* футър лого — светла/инверсна версия с прозрачен фон, ляга директно на тъмното */ .logo--footer .logo__img{height:54px} .search-wrap{position:relative;flex:1;max-width:620px} .search{display:flex;align-items:center;height:54px;background:var(--bg-soft);border:2px solid transparent;border-radius:14px;padding:5px 5px 5px 16px;transition:border-color .2s,box-shadow .2s,background .2s} .search:focus-within{background:#fff;border-color:var(--accent);box-shadow:0 8px 24px rgba(79,135,1,.14)} .search__lead{width:21px;height:21px;color:var(--muted);flex:none;transition:color .2s} .search:focus-within .search__lead{color:var(--accent)} .search__input{flex:1;border:none;outline:none;background:transparent;padding:0 14px;font-size:15.5px;color:var(--ink);height:100%} .search__input::placeholder{color:#9a9aa3} .search__btn{height:100%;display:flex;align-items:center;background:var(--accent-grad);color:#fff;padding:0 28px;font-weight:700;font-size:15px;border-radius:10px;box-shadow:0 6px 16px rgba(79,135,1,.30);transition:transform .2s var(--ease),filter .2s} .search__btn:hover{filter:brightness(1.07);transform:translateY(-1px)} /* ---- AUTOCOMPLETE DROPDOWN ---- */ .ac{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);border:1px solid var(--line); padding:8px;z-index:120;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s} .ac.is-open{opacity:1;visibility:visible;transform:translateY(0)} .ac__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);padding:10px 12px 6px} .ac__item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;transition:background .15s;text-decoration:none;color:inherit} .ac__item:hover,.ac__item.is-active{background:var(--bg-soft)} .ac__thumb{width:40px;height:40px;flex:none;border-radius:9px;background:var(--bg-soft);display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)} .ac__thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .ac__thumb svg{width:20px;height:20px;color:var(--accent)} .ac__txt{flex:1;min-width:0} .ac__name{font-size:14px;font-weight:600;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac__name b{color:var(--accent);font-weight:700} .ac__cat{font-size:12px;color:var(--muted);margin-left:5px} /* Продукт от каталога в търсачката: име на един ред + код отдолу */ .ac__item--prod .ac__name{display:block} /* Продуктът се вижда ЦЕЛИЯТ. grid-template: 100%/100% е задължително: в ред с автоматичен размер height:100% на снимката не се смята и тя остава с естествената си височина — бутилка 224×600 ставаше 107px в 40px кутийка и се виждаше само горната ѝ половина, object-fit:contain нямаше върху какво да работи. Отстъпът е, защото снимките са изрязани плътно около продукта. Само за продуктите: широките банери на категориите изглеждат по-добре изрязани и там нищо не се сменя. */ .ac__item--prod .ac__thumb{width:46px;height:46px;background:#fff;grid-template:100%/100%} .ac__item--prod .ac__thumb img{box-sizing:border-box;padding:4px;mix-blend-mode:normal} .ac__sub{display:block;font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac__sub b{color:var(--dark);font-weight:600} .ac__exact{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:0 6px;vertical-align:1px} .ac__more{justify-content:center;font-size:13px;font-weight:700;color:var(--accent)} .ac__go{color:var(--muted);font-size:16px;flex:none;transition:transform .2s,color .2s} .ac__item:hover .ac__go{color:var(--accent);transform:translateX(3px)} .ac__empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:14px} .ac__all{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:4px;padding:12px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700;color:var(--accent);cursor:pointer;text-decoration:none} .ac__all:hover{background:var(--bg-soft);border-radius:0 0 10px 10px} /* Обобщен банер „намерени N части с номер …" (най-отгоре в автокомплийта) */ .ac__code{display:flex;align-items:center;gap:12px;padding:12px 14px;margin-bottom:6px;border-radius:12px;text-decoration:none;color:#fff;background:var(--accent-grad);box-shadow:0 6px 16px rgba(79,135,1,.22);transition:filter .15s} .ac__code:hover{filter:brightness(1.06)} .ac__code.is-active{filter:brightness(1.06)} .ac__code-ico{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.18)} .ac__code-ico svg{width:22px;height:22px;color:#fff} .ac__code-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3} .ac__code-title{font-size:13px;font-weight:600;opacity:.95} .ac__code-title b{font-weight:800} .ac__code-num{font-size:15px;font-weight:800;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ac__code-thumbs{display:flex;align-items:center;flex:none} .ac__code-thumbs img{width:34px;height:34px;flex:none;border-radius:8px;object-fit:contain;background:#fff;border:2px solid #fff;margin-left:-8px;padding:2px} .ac__code-thumbs img:first-child{margin-left:0} .ac__code .ac__go{color:#fff;font-size:18px;font-weight:800} .ac__code:hover .ac__go{transform:translateX(3px)} .header__actions{display:flex;align-items:center;gap:8px} .haction{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; height:54px;min-width:62px;padding:0 12px;border-radius:12px;font-size:12px;color:var(--ink);transition:background .2s,color .2s} .haction svg{width:22px;height:22px;fill:var(--ink);transition:fill .2s} /* Профилна снимка на мястото на иконката. Кръгла и изрязана по средата, за да не се деформира при правоъгълни снимки. */ .haction__ico{position:relative;display:grid;place-items:center} /* Лупата и затварянето на търсачката на цял екран са само за телефон. */ .hsearch,.msearch-close{display:none} .haction__avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block; border:1.5px solid var(--line)} .haction--avatar .ic-desk,.haction--avatar .ic-mob{display:none} /* Двуредовият текст и зелената точка са само за десктоп — виж по-долу. */ .haction__txt,.haction__dot{display:none} /* ---- Профилът на ДЕСКТОП: каре, а не гола иконка ---- До тъмното каре на гаража самотната иконка не личеше и профилът се губеше. Карето е със същата височина (54px) и огледален строеж: снимка отляво, два реда отдясно. Само за влязъл клиент (.haction--user) — гостът няма име, с което да го поздравим. */ @media (min-width:861px){ #profileBtn.haction--user{ flex-direction:row;align-items:center;gap:9px; padding:0 13px 0 6px; background:#f1f6ed;border:1px solid #d8e6cf;border-radius:14px; transition:border-color .18s,background .18s; } #profileBtn.haction--user:hover{background:#eaf3e4;border-color:#bdd5ac} #profileBtn.haction--user .haction__ico{width:36px;height:36px;flex:none} #profileBtn.haction--user .haction__avatar{width:36px;height:36px;border:2px solid #fff} #profileBtn.haction--user .haction__ico svg{width:24px;height:24px} #profileBtn.haction--user .haction__dot{ display:block;position:absolute;right:-1px;bottom:0; width:11px;height:11px;border-radius:50%; background:#16a34a;border:2px solid #f1f6ed; } #profileBtn.haction--user .haction__txt{ display:flex;flex-direction:column;gap:1px;text-align:left;min-width:0; } #profileBtn.haction--user .haction__kicker{ font-size:11px;font-weight:600;color:#9a9aa3; text-transform:uppercase;letter-spacing:.5px;line-height:1.15; } #profileBtn.haction--user .haction__name{ display:inline-flex;align-items:center;gap:5px;min-width:0; font-size:14px;font-weight:700;color:var(--dark);line-height:1.15; } #profileBtn.haction--user .haction__name b{ font-weight:700;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } #profileBtn.haction--user .haction__name svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;color:#9a9aa3} /* Надписът под иконката е за телефон. */ #profileBtn.haction--user .haction__label{display:none} } .haction:hover{background:var(--bg-soft);color:var(--accent)} .haction:hover svg{fill:var(--accent)} .haction--cart{background:var(--accent-grad);color:#fff} .haction--cart svg{fill:#fff} .haction--cart:hover{background:var(--accent-grad);color:#fff;box-shadow:0 6px 16px rgba(79,135,1,.4)} .haction--cart:hover svg{fill:#fff} /* брояч на количката — бяло каре с тъмен текст, за да се чете на червеното */ .haction--cart .badge{background:#fff;color:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.25)} .badge{position:absolute;top:2px;right:6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--dark);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1} .badge--red{background:var(--yellow);color:var(--dark)} .badge--garage{background:var(--accent);color:#fff} /* ---- Любими продукти (сърце в хедъра) ---- */ .haction-fav{position:relative;display:flex} .haction--fav{text-decoration:none} .haction--fav svg{fill:none;stroke:var(--ink);stroke-width:1.8} .haction--fav:hover svg{stroke:var(--accent);fill:none} .haction-fav__ico{position:relative;display:grid;place-items:center;width:22px;height:22px} .haction-fav__count{position:absolute;top:-7px;right:-9px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center;line-height:1;font-style:normal;box-shadow:0 2px 6px rgba(79,135,1,.35)} .haction-fav__count[hidden]{display:none} /* ============ МОЯТ ГАРАЖ — отделен открояващ се модул ============ */ .garage{position:relative;flex:none} /* бутон-модул: тъмна "pill" с икона, текст на два реда, брояч и стрелка */ .garage__btn{ display:flex;align-items:center;height:54px; background:linear-gradient(135deg,#1c1c1f,#0f0f11);color:#fff;border:1px solid rgba(255,255,255,.08); border-radius:14px;position:relative;overflow:hidden; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s; } .garage__btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent-grad);z-index:1} .garage__btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(20,20,30,.22);border-color:rgba(79,135,1,.4)} /* лява част — линк към гаража */ .garage__main{display:flex;align-items:center;gap:11px;height:100%;padding:0 12px 0 12px;color:#fff;text-decoration:none;border-radius:14px 0 0 14px} /* дясна част — стрелка с разделител, отваря dropdown */ .garage__toggle{display:flex;align-items:center;justify-content:center;height:100%;width:40px;padding:0;background:none;border:none;border-left:1px solid rgba(255,255,255,.14);border-radius:0 14px 14px 0;cursor:pointer} .garage__toggle:hover{background:rgba(255,255,255,.06)} .garage__ico{position:relative;width:38px;height:38px;flex:none;border-radius:10px;background:var(--accent-grad);display:grid;place-items:center;box-shadow:0 4px 12px rgba(79,135,1,.4)} .garage__ico svg{width:22px;height:22px;stroke:#fff} /* Ако активната кола има снимка — показваме нея вместо иконката (правоъгълна, както в дропдауна на гаража, за да пасне на снимките на коли). */ .garage__ico--photo{width:56px;background:#fff;padding:0;box-shadow:0 4px 12px rgba(0,0,0,.18)} .garage__ico__img{width:100%;height:100%;object-fit:cover;display:block;border-radius:10px} /* Има ли снимка, иконките се гасят. Сървърът рисува и двете (снимка + иконка), а JS после оставя само снимката — без този ред двете стоят една под друга до изпълнението на скрипта и карето подскача с 6px. */ .garage__ico--photo .ic-desk,.garage__ico--photo .ic-mob{display:none} .garage__txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0} .garage__label{font-size:11px;font-weight:600;color:#9a9aa3;text-transform:uppercase;letter-spacing:.5px} .garage__car{font-size:14px;font-weight:700;color:#fff;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .garage.is-empty .garage__car{color:#c9c9d0;font-weight:600} .garage__count{position:absolute;top:-7px;right:-7px;flex:none;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1;border:2px solid #15151a} .garage__caret{width:18px;height:18px;flex:none;color:#9a9aa3;transition:transform .3s var(--ease),color .2s} .garage.is-open .garage__caret{transform:rotate(180deg);color:#fff} /* dropdown със списъка автомобили */ .gdd{position:absolute;right:0;top:calc(100% + 12px);width:340px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg); z-index:130;padding:10px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s} .gdd::before{content:"";position:absolute;right:28px;top:-7px;width:13px;height:13px;background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)} .garage.is-open .gdd{opacity:1;visibility:visible;transform:translateY(0)} .gdd__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px 12px;border-bottom:1px solid var(--line);margin-bottom:8px} .gdd__title{font-size:16px;font-weight:800;color:var(--dark)} .gdd__head span{font-size:12.5px;color:var(--muted)} .gdd__head-count{flex:none;font-size:11.5px;font-weight:700;color:var(--accent);background:#f1f7ed;padding:4px 10px;border-radius:20px;white-space:nowrap} .gdd__list{display:flex;flex-direction:column;gap:7px;padding-bottom:12px;margin-bottom:12px;max-height:300px;overflow-y:auto;border-bottom:1px solid var(--line)} .gcar{margin-top:1px;display:flex;align-items:center;gap:12px;padding:10px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .2s,background .2s,transform .15s} .gcar:hover{background:var(--bg-soft);transform:translateY(-1px)} .gcar.is-active{border-color:var(--accent);background:#f7fbf5} .gcar__icon{width:42px;height:42px;flex:none;border-radius:10px;background:var(--bg-soft);display:grid;place-items:center;color:var(--accent)} .gcar__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6} .gcar.is-active .gcar__icon{background:var(--accent-grad);color:#fff} .gcar__icon--photo{width:58px;background:#fff;overflow:hidden;padding:0} .gcar.is-active .gcar__icon--photo{background:#fff} .gcar__photo{width:100%;height:100%;object-fit:cover;display:block} .gcar__icon--fallback{background:var(--bg-soft);color:var(--accent)} .gcar.is-active .gcar__icon--fallback{background:var(--accent-grad);color:#fff} .gcar__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .gcar__name{display:block;font-size:14px;font-weight:700;color:var(--dark);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gcar__meta{display:block;font-size:12px;color:var(--muted);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gcar__check{width:20px;height:20px;flex:none;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;color:#fff;font-size:11px;transition:.2s} .gcar.is-active .gcar__check{background:var(--accent);border-color:var(--accent)} .gdd__add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;border-radius:12px;background:var(--bg-soft);color:var(--dark);font-weight:700;font-size:14px;transition:background .2s,color .2s} .gdd__add svg{width:18px;height:18px;fill:none;stroke:currentColor} .gdd__add:hover{background:var(--accent-grad);color:#fff} /* Директен линк към страницата „Моят гараж" (под „Добави автомобил") */ .gdd__manage{display:flex;align-items:center;gap:9px;width:100%;margin-top:8px;padding:11px 13px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:13.5px;font-weight:700;color:var(--dark);text-decoration:none;transition:background .15s,color .15s,border-color .15s} .gdd__manage svg{width:18px;height:18px;fill:none;stroke:currentColor;flex:none} .gdd__manage-arr{width:16px;height:16px;margin-left:auto;transition:transform .15s;color:var(--muted)} .gdd__manage:hover{background:#ecf4e7;color:var(--accent);border-color:var(--accent)} .gdd__manage:hover .gdd__manage-arr{transform:translateX(3px);color:var(--accent)} .gdd__empty{padding:22px 12px;text-align:center;color:var(--muted);font-size:13.5px;line-height:1.5} .burger{display:none;flex-direction:column;gap:5px;padding:8px} .burger span{width:24px;height:2px;background:var(--dark);border-radius:2px;transition:.3s} .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.is-open span:nth-child(2){opacity:0} .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- NAV ---------- */ .nav{background:var(--dark);color:#fff} .nav__inner{display:flex;align-items:center;gap:8px;height:52px} .nav__cats{display:flex;align-items:center;gap:9px;background:var(--accent-grad);color:#fff;height:100%;padding:0 22px;font-weight:700;font-size:14px} .nav__cats svg{width:20px;height:20px} .nav__cats:hover{filter:brightness(1.07)} .nav__list{display:flex;align-items:center;gap:4px;list-style:none;margin-left:8px;flex-wrap:wrap} .nav__list a{display:block;padding:10px 16px;border-radius:8px;font-size:14px;font-weight:500;color:#e3e3e8;transition:background .2s,color .2s} .nav__list a:hover{background:rgba(255,255,255,.10);color:#fff} .nav__sale{color:var(--yellow)!important} /* активен елемент докато мега-менюто е отворено: бял, заоблен само горе, и продължава надолу в карето — сянката запълва разстоянието до долния ръб на навигацията */ .nav__has-mega.is-hot > a{background:#fff;color:var(--accent);border-radius:10px 10px 0 0;box-shadow:0 8px 0 #fff} /* ============ MEGA MENU ============ Самостоятелно бяло каре с ширината на хедъра, долепено под навигацията: тъмна витрина вляво (.mh) + каретата на входната страница вдясно (.mt), а страницата отдолу е затъмнена (.mega-dim). Обвивката е прозрачна и не хваща мишката — излезеш ли от карето встрани, менюто се затваря. */ .nav{position:relative} /* база за абсолютното меню */ .mega{ position:absolute;left:0;right:0;top:100%;z-index:480; opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none; transition:opacity .22s var(--ease),transform .26s var(--ease),visibility .22s; } .mega.is-open{opacity:1;visibility:visible;transform:translateY(0)} .mega.is-open .mega__inner{pointer-events:auto} /* ширината на .container, само с малко поле до ръба на тесен екран */ .mega__inner{width:calc(100% - 24px);display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px; padding:18px 20px 20px;align-items:stretch;background:#fff;border-radius:0 0 16px 16px; /* сянката е само встрани и надолу — нагоре би посивила белия таб */ box-shadow:0 40px 60px -20px rgba(0,0,0,.45),0 16px 30px -14px rgba(0,0,0,.25)} .mega-dim{position:absolute;left:0;right:0;top:0;height:0;z-index:470;background:rgba(12,12,16,.58); opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s var(--ease),visibility .22s} .mega-dim.is-on{opacity:1;visibility:visible} .mh{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;color:#fff;padding:26px 22px 22px; background: radial-gradient(85% 34% at 50% 54%,rgba(255,170,0,.26),transparent 70%), radial-gradient(120% 52% at 50% 58%,rgba(79,135,1,.42),transparent 68%), linear-gradient(180deg,#0b0b0c 0%,#161618 50%,#0b0b0c 100%)} .mh__eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:#60a207} .mh__title{margin-top:12px;font-size:26px;font-weight:900;line-height:1.15;letter-spacing:-.4px} .mh__img{flex:1;display:grid;place-items:center;min-height:170px;margin:14px -18px 12px} .mh__img img{width:100%;max-height:300px;object-fit:contain;filter:drop-shadow(0 16px 22px rgba(0,0,0,.6))} .mh__feats{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:20px} .mh__feats li{display:flex;align-items:center;gap:12px;line-height:1.25} .mh__feat-ic{width:38px;height:38px;flex:none;border-radius:10px;background:var(--accent-grad);display:grid;place-items:center; box-shadow:0 6px 14px rgba(79,135,1,.28)} .mh__feat-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .mh__feats b{display:block;font-size:14px;font-weight:700} .mh__feats small{display:block;font-size:12.5px;color:#b6b6c0;margin-top:2px} /* текстът идва от админа — при дълъг се пренася, центриран */ .mh__cta{display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 14px;border-radius:10px;text-align:center; border:1.5px solid rgba(255,255,255,.8);font-size:14px;font-weight:700;color:#fff; transition:background .2s,color .2s,border-color .2s} .mh__cta:hover{background:#fff;border-color:#fff;color:var(--dark)} .mh__cta svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round; transition:transform .2s var(--ease)} .mh__cta:hover svg{transform:translateX(3px)} /* плочките — по групите на страницата: заглавна лента + редица карета */ .mt-groups{display:flex;flex-direction:column;gap:14px;min-width:0} .mt-group__head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px;padding-bottom:8px; border-bottom:1px solid #ededf0} .mt-group__title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;text-transform:uppercase; letter-spacing:.6px;color:var(--dark)} .mt-group__title::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--accent)} .mt-group__lead{font-size:13px;color:var(--muted)} .mt-group__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} .mt{display:flex;flex-direction:column;min-width:0;padding:8px 8px 10px;border:1px solid #ededf0;border-radius:12px;background:#fff; transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)} a.mt:hover{border-color:transparent;box-shadow:0 10px 26px rgba(15,15,25,.12);transform:translateY(-2px)} /* снимката е в собствената си пропорция 4:3 — нищо не се изрязва */ .mt__img{display:block;flex:none;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--bg-soft)} .mt__img img{width:100%;height:100%;object-fit:cover;transition:transform .35s var(--ease)} a.mt:hover .mt__img img{transform:scale(1.05)} .mt__img--empty{display:grid;place-items:center;color:#c4c4cc} .mt__img--empty svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round} .mt__body{display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 2px 0} .mt__title{font-size:14px;font-weight:800;line-height:1.25;color:var(--dark);transition:color .15s} a.mt:hover .mt__title{color:var(--accent)} .mt__sub{font-size:12px;line-height:1.3;color:var(--muted)} /* стрелката е в реда на текста, за да остане до последната дума при пренасяне */ .mt__nw{white-space:nowrap} .mt__chev{display:inline-block;vertical-align:-3px;margin-left:3px;width:15px;height:15px;fill:none;stroke:var(--accent); stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)} a.mt:hover .mt__chev{transform:translateX(3px)} .mt--dead{cursor:default} /* малка група (до 3) — карета на хоризонтала: снимка вляво, текст вдясно */ .mt-group--row .mt-group__grid{grid-template-columns:repeat(var(--n),minmax(0,1fr))} .mt-group--row .mt{flex-direction:row;align-items:center;gap:14px;padding:8px} .mt-group--row .mt__img{width:104px} .mt-group--row .mt__body{padding:0 6px 0 0} @media (max-width:1300px){ .mega__inner{grid-template-columns:240px minmax(0,1fr);gap:16px} .mh{padding:22px 18px 18px} .mh__title{font-size:22px} .mt-group__grid{gap:10px} .mt__title{font-size:13.5px} } /* на тесен лаптоп витрината отстъпва място на картите */ @media (max-width:1100px){ .mega__inner{grid-template-columns:minmax(0,1fr)} .mh{display:none} } /* ---------- HERO ---------- */ .hero{position:relative;overflow:hidden;background:#0e0e0e;color:#fff} /* СЛОЙ 1 — тематичната снимка с авточасти (дясно/център) */ .hero__bg{position:absolute;inset:0; background:url("../img/site-bg.webp") no-repeat center right; background-size:cover; } /* СЛОЙ 2 — тъмен + червен overlay: плътен вляво (за текста), преливащ вдясно */ .hero__bg::before{content:"";position:absolute;inset:0; background: linear-gradient(90deg,#0c0c0d 0%,rgba(12,12,13,.92) 28%,rgba(14,14,16,.55) 60%,rgba(14,14,16,.30) 100%), radial-gradient(1000px 600px at 88% 12%,rgba(79,135,1,.42),transparent 58%), radial-gradient(700px 600px at 8% 120%,rgba(54,94,5,.30),transparent 60%); } /* СЛОЙ 3 — лек vignette долу за дълбочина */ .hero__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.45) 100%)} .hero__inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:70px 20px 80px} .hero__tag{display:inline-block;background:rgba(79,135,1,.18);border:1px solid rgba(79,135,1,.5);color:#d9eacd;padding:7px 16px;border-radius:50px;font-size:13px;font-weight:600;margin-bottom:22px} .hero__title{font-size:clamp(34px,4.6vw,56px);font-weight:900;line-height:1.05;letter-spacing:-1.5px} .hero__title span{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero__sub{margin:20px 0 30px;font-size:18px;color:#c4c4cc;max-width:520px} .hero__cta{display:flex;gap:14px;flex-wrap:wrap} .hero__stats{display:flex;gap:36px;margin-top:42px} .hero__stats strong{display:block;font-size:30px;font-weight:900;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .hero__stats span{font-size:13px;color:#9a9aa3} /* CAR FINDER */ .finder{background:#fff;color:var(--ink);border-radius:18px;padding:28px;box-shadow:var(--shadow-lg)} .finder__title{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;margin-bottom:20px;color:var(--dark)} .finder__title svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round} .finder__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px} .finder__sel{appearance:none;width:100%;padding:13px 16px;border:2px solid var(--line);border-radius:10px;font-size:15px;color:var(--ink);background:var(--bg-soft) 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='%23777' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer;transition:border-color .2s} .finder__sel:focus{outline:none;border-color:var(--accent)} .finder__sel:disabled{opacity:.55;cursor:not-allowed} /* Марката (търсимият combo) заема целия ред отгоре; останалите 4 селекта 2×2 */ .finder__grid > #fnBrand{grid-column:1 / -1} .finder__btn:disabled{opacity:.6;cursor:not-allowed} /* Търсим селект за марка */ .fn-combo{position:relative} .fn-combo__input{cursor:text;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center} .fn-combo.is-open .fn-combo__input{border-color:var(--accent)} .fn-combo__list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;list-style:none;margin:0;padding:6px;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14)} .fn-combo__opt{padding:10px 12px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer} .fn-combo__opt:hover{background:var(--bg-soft);color:var(--accent)} .fn-combo__opt[hidden]{display:none} /* Списък с модификации, когато избраният двигател има повече от една */ .fn-result{margin-top:16px;border-top:1px solid var(--line);padding-top:14px;animation:fnFade .25s ease} @keyframes fnFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .fn-result__head{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:0 0 10px} .fn-result__kw{color:var(--accent);font-weight:800} .fn-result__list{list-style:none;margin:0;padding:1px 0 0 0;display:flex;flex-direction:column;gap:8px;max-height:360px;overflow-y:auto} .fn-result__item a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:#fff;transition:border-color .15s,box-shadow .15s,transform .1s} .fn-result__item a:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(79,135,1,.1);transform:translateY(-1px)} .fn-result__ic{grid-row:1 / span 2;width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--bg-soft);color:var(--accent)} .fn-result__ic svg{width:22px;height:22px} .fn-result__title{grid-column:2;font-weight:700;font-size:14px;color:var(--ink);line-height:1.25} .fn-result__meta{grid-column:2;font-size:12.5px;color:var(--muted)} .fn-result__code{grid-column:3;grid-row:1 / span 2;align-self:center;font-size:11.5px;color:var(--accent);font-weight:700;background:rgba(79,135,1,.08);border-radius:20px;padding:4px 10px;white-space:nowrap} .fn-result__go{grid-column:3;grid-row:1 / span 2;align-self:center;color:var(--muted);flex:none} .fn-result__go svg{width:18px;height:18px} /* Модификация без нищо в категорията — води към всичките ѝ части (CarFinderController::pick) */ .fn-result__item--off a{background:var(--bg-soft)} .fn-result__item--off .fn-result__ic{background:#fff;color:var(--muted)} .fn-result__off{grid-column:3;grid-row:1 / span 2;align-self:center;font-size:11.5px;font-weight:700;color:var(--muted);border:1px dashed var(--line);background:#fff;border-radius:20px;padding:4px 10px;white-space:nowrap} /* „Нямаме … за тази кола" — вместо 404 (partials/finder-empty.blade.php) */ .fn-empty{border:1px solid var(--line);border-radius:14px;padding:16px;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)} .fn-empty__top{display:flex;align-items:center;gap:14px} .fn-empty__car{flex:none;width:96px;height:60px;border-radius:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);color:var(--accent)} .fn-empty__car img{width:100%;height:100%;object-fit:cover} .fn-empty__car svg{width:30px;height:30px} .fn-empty__txt{display:flex;flex-direction:column;gap:2px;min-width:0} .fn-empty__title{font-size:15.5px;font-weight:800;line-height:1.25;color:var(--ink)} .fn-empty__name{font-size:13.5px;font-weight:700;color:var(--ink)} .fn-empty__meta{font-size:12.5px;color:var(--muted)} .fn-empty__lead{margin:14px 0 10px;font-size:13.5px;color:var(--ink)} .fn-empty__lead b{color:var(--accent)} .fn-empty__chips{display:flex;flex-wrap:wrap;gap:8px} .fn-empty__chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--ink);transition:border-color .15s,box-shadow .15s,transform .1s} .fn-empty__chip:not(:has(img)){padding-left:12px} .fn-empty__chip img{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg-soft)} .fn-empty__chip b{font-size:11.5px;color:var(--accent);background:rgba(79,135,1,.08);border-radius:20px;padding:2px 8px} .fn-empty__chip:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(79,135,1,.1);transform:translateY(-1px)} .fn-empty__modhead{margin:14px 0 8px} .fn-empty__mods{max-height:240px} .fn-empty__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .fn-empty__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:13.5px;font-weight:700;color:var(--ink);transition:border-color .15s,color .15s} .fn-empty__btn svg{width:17px;height:17px;flex:none} .fn-empty__btn:hover{border-color:var(--accent);color:var(--accent)} .fn-empty__btn--main{background:var(--accent);border-color:var(--accent);color:#fff} .fn-empty__btn--main:hover{color:#fff;filter:brightness(1.06)} @media (max-width:560px){.fn-empty__acts{flex-direction:column}.fn-empty__car{width:76px;height:50px}} .carfinder--compact .fn-empty__acts{flex-direction:column} .carfinder--compact .fn-result__off{grid-column:2;grid-row:auto;justify-self:start} .finder__btn{width:100%} .finder__vin{display:block;text-align:center;margin-top:14px;font-size:14px;color:var(--link);font-weight:600} .finder__vin:hover{text-decoration:underline} /* ---------- USP ---------- */ .usp{background:var(--bg-soft);border-bottom:1px solid var(--line)} .usp__inner{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:26px 20px} .usp__item{display:flex;align-items:center;gap:14px} .usp__item svg{width:38px;height:38px;color:var(--accent);flex:none} .usp__item strong{display:block;font-size:15px;color:var(--dark)} .usp__item span{font-size:13px;color:var(--muted)} /* ---------- SECTION ---------- */ .section{padding:72px 0} /* категориите по-близо до USP лентата отгоре */ #cats{padding-top:40px} #cats .section__head{margin-bottom:28px} .section__head{margin-bottom:40px} .section__title{font-size:clamp(26px,3vw,36px);font-weight:900;letter-spacing:-.8px;color:var(--dark);position:relative;display:inline-block} .section__title::after{content:"";position:absolute;left:0;bottom:-10px;width:54px;height:4px;border-radius:2px;background:var(--accent-grad)} .section__lead{margin-top:20px;color:var(--muted);font-size:16px} /* ---------- CATEGORY CARDS ---------- */ .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .card::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--accent-grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);z-index:3} .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent} .card:hover::before{transform:scaleX(1)} .card__icon{font-size:40px;margin-bottom:14px;transition:transform .3s var(--ease)} .card:hover .card__icon{transform:scale(1.15) rotate(-6deg)} .card h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:5px} .card p{font-size:13px;color:var(--muted)} .card__arrow{position:absolute;right:20px;bottom:18px;color:var(--accent);font-size:20px;opacity:0;transform:translateX(-8px);transition:.3s var(--ease)} .card:hover .card__arrow{opacity:1;transform:translateX(0)} /* ---- Category cards WITH PHOTO (структура от carauto.bg, наша визия) ---- */ .cards--cat{grid-template-columns:repeat(5,1fr);gap:18px} .card--photo{padding:0;display:flex;flex-direction:column} .card--photo .card__media{ position:relative;aspect-ratio:1/1;background:#fff; display:flex;align-items:center;justify-content:center; padding:18px;overflow:hidden;border-bottom:1px solid var(--line); } /* снимката се вижда 100% — цялата, центрирана, без никакво рязане */ .card--photo .card__media img{display:block; max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain; transition:transform .35s var(--ease);transform-origin:center} .card--photo:hover .card__media img{transform:scale(1.05)} .card--photo .card__info{padding:16px 16px 40px;flex:1} .card--photo .card__info h3{font-size:15px;font-weight:700;line-height:1.25;color:var(--dark);margin-bottom:5px;transition:color .25s} .card--photo:hover .card__info h3{color:var(--accent)} .card--photo .card__info p{font-size:12.5px;color:var(--muted);line-height:1.45} .card--photo .card__arrow{bottom:14px} /* ============ ИЗБЕРИ МАРКА АВТОМОБИЛ ============ */ .brands-pick{padding-top:0} .bp{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)} /* бързо търсене */ .bp__search{position:relative;display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto 22px; height:52px;padding:0 16px;background:var(--bg-soft);border:2px solid transparent;border-radius:13px;transition:border-color .2s,background .2s} .bp__search:focus-within{background:#fff;border-color:var(--accent);box-shadow:0 6px 18px rgba(79,135,1,.12)} .bp__search svg{width:20px;height:20px;color:var(--muted);flex:none} .bp__search:focus-within svg{color:var(--accent)} .bp__search input{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--ink)} .bp__clear{width:26px;height:26px;border-radius:50%;background:#e2e2e6;color:var(--ink);font-size:13px;flex:none;display:grid;place-items:center;transition:background .2s,color .2s} .bp__clear:hover{background:var(--accent);color:#fff} /* топ марки — компактни плочки с реални лога */ .bp__top{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:22px} .bp-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; padding:12px 8px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;text-align:center; transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s} .bp-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent)} .bp-tile__name{font-size:12px;font-weight:700;color:var(--dark);line-height:1.25} .bp-tile:hover .bp-tile__name{color:var(--accent)} /* SPRITE лого — band от 75px в sprite-а; показваме го през wrapper с overflow, за да е компактно и без изрязване. */ .bp-tile__logowrap{width:58px;height:46px;display:flex;align-items:center;justify-content:center;overflow:hidden} .bp-logo{width:75px;height:75px;flex:none;background-image:url("../img/car-brands-sprite.png"); background-repeat:no-repeat;background-color:#fff; /* Без позиция по подразбиране CSS ползва 0 0 -> ПЪРВАТА лента от спрайта, тоест непозната марка показваше логото на Alfa Romeo. Изкарваме фона извън платното: всяка от 59-те известни марки има свое правило по-долу, което презаписва това. */ background-position:0 -9999px; filter:grayscale(.15);transition:filter .25s,transform .25s var(--ease)} /* на началната спрайтът (53 KB) чака секцията да наближи — partials/lazy-images */ .bp[data-lz]:not(.is-near) .bp-logo{background-image:none} /* Марка извън спрайта, но със свой файл в img/car-brands/ — виж [[App\Support\CarBrandLogo]]. Тук фонът се маха, защото носителят е . */ .bp-logo--img{background-image:none;background-color:transparent;object-fit:contain;filter:none} .bp-tile .bp-logo{transform:scale(.72)} .bp-tile:hover .bp-logo{filter:grayscale(0);transform:scale(.78)} /* малко лого пред елемент в списъка: wrapper с фиксиран размер държи мястото, логото вътре е смалено -> текстът сяда чисто отдясно, без разместване. */ .bp-link__logo{width:46px;height:46px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} .bp-logo--sm{width:75px;height:75px;transform:scale(.6);filter:grayscale(.2);transition:filter .2s} /* азбучен филтър */ /* Буквите стоят НАД плочките (на мястото на махнатото поле за търсене), затова чертата е отдолу, а не отгоре. */ .bp__alpha{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px} .bp-letter{min-width:34px;height:34px;padding:0 6px;border-radius:9px;background:var(--bg-soft);color:var(--ink); font-size:14px;font-weight:700;display:grid;place-items:center;cursor:pointer;transition:background .18s,color .18s,transform .18s} .bp-letter:hover{background:#e9e9ee} .bp-letter.is-active{background:var(--accent-grad);color:#fff;transform:translateY(-1px)} /* пълен списък */ .bp__all{display:grid;grid-template-columns:repeat(4,1fr);gap:6px 18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .bp-link{display:flex;align-items:center;gap:11px;min-height:60px;padding:8px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:#4a4a52;transition:background .15s,color .15s} .bp-link__txt{line-height:1.3;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bp-link:hover{background:var(--bg-soft);color:var(--accent)} .bp-link:hover .bp-link__logo{border-color:var(--accent)} .bp-link:hover .bp-logo--sm{filter:grayscale(0)} .bp__empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:24px 0;font-size:14px} /* ---- позиции на логата в sprite-а (по една за марка) ---- */ .bp-logo--alfa-romeo{background-position:center -1px} .bp-logo--audi{background-position:center -76px} .bp-logo--bmw{background-position:center -151px} .bp-logo--chevrolet{background-position:center -226px} .bp-logo--chrysler{background-position:center -301px} .bp-logo--citroen{background-position:center -376px} .bp-logo--dacia{background-position:center -451px} .bp-logo--daewoo{background-position:center -526px} .bp-logo--daihatsu{background-position:center -601px} .bp-logo--fiat{background-position:center -676px} .bp-logo--ford{background-position:center -751px} .bp-logo--great-wall{background-position:center -826px} .bp-logo--honda{background-position:center -901px} .bp-logo--hyundai{background-position:center -976px} .bp-logo--infiniti{background-position:center -1051px} .bp-logo--isuzu{background-position:center -1126px} .bp-logo--iveco{background-position:center -1201px} .bp-logo--jaguar{background-position:center -1276px} .bp-logo--jeep{background-position:center -1351px} .bp-logo--kia{background-position:center -1426px} .bp-logo--lancia{background-position:center -1501px} .bp-logo--land-rover{background-position:center -1576px} .bp-logo--lexus{background-position:center -1651px} .bp-logo--mazda{background-position:center -1726px} .bp-logo--mercedes{background-position:center -1801px} .bp-logo--mini{background-position:center -1876px} .bp-logo--mitsubishi{background-position:center -1951px} .bp-logo--nissan{background-position:center -2026px} .bp-logo--opel{background-position:center -2101px} .bp-logo--peugeot{background-position:center -2176px} .bp-logo--porsche{background-position:center -2251px} .bp-logo--renault{background-position:center -2326px} .bp-logo--rover{background-position:center -2401px} .bp-logo--saab{background-position:center -2476px} .bp-logo--seat{background-position:center -2551px} .bp-logo--skoda{background-position:center -2626px} .bp-logo--smart{background-position:center -2701px} .bp-logo--subaru{background-position:center -2776px} .bp-logo--suzuki{background-position:center -2851px} .bp-logo--toyota{background-position:center -2926px} .bp-logo--vw{background-position:center -3001px} .bp-logo--volvo{background-position:center -3076px} .bp-logo--bentley{background-position:center -4169px} .bp-logo--bugatti{background-position:center -3162px} .bp-logo--buick{background-position:center -3230px} .bp-logo--cadillac{background-position:center -3313px} .bp-logo--dodge{background-position:center -3398px} .bp-logo--ferrari{background-position:center -3474px} .bp-logo--lada{background-position:center -3551px} .bp-logo--lamborghini{background-position:center -3620px} .bp-logo--lincoln{background-position:center -4227px} .bp-logo--lotus{background-position:center -3701px} .bp-logo--maserati{background-position:center -3770px} .bp-logo--mg{background-position:center -3840px} .bp-logo--rolls-royce{background-position:center -3915px} .bp-logo--ssangyong{background-position:center -3982px} .bp-logo--tesla{background-position:center -4039px} .bp-logo--vauxhall{background-position:center -4104px} /* toggle бутон */ .bp__toggle{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px auto 0; padding:12px 24px;border-radius:50px;background:var(--bg-soft);color:var(--dark);font-weight:700;font-size:14px;transition:background .2s,color .2s} .bp__toggle svg{width:18px;height:18px;transition:transform .3s var(--ease)} .bp__toggle:hover{background:var(--accent-grad);color:#fff} .bp.is-expanded .bp__toggle svg{transform:rotate(180deg)} /* ============ ЗА НАС ============ */ .about{padding-top:30px} /* без ограждащ бокс — съдържанието е на цялата ширина */ .about__box{text-align:center} .about__lead{font-size:16.5px;line-height:1.75;color:#4a4a52;max-width:920px;margin:0 auto} .about__lead strong{color:var(--accent)} /* разпъващата се част — плавно отваряне */ .about__more{max-height:0;overflow:hidden;opacity:0; transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .5s var(--ease)} .about.is-open .about__more{max-height:1400px;opacity:1;margin-top:8px} /* параграф с иконка отляво — центриран в четима ширина */ .about__point{display:flex;align-items:flex-start;gap:18px;text-align:left;margin:24px auto 0;max-width:920px} .about__pico{width:46px;height:46px;flex:none;border-radius:13px;background:#f1f7ed;color:var(--accent);display:grid;place-items:center} .about__pico svg{width:24px;height:24px} .about__point p{font-size:15px;line-height:1.65;color:#555;margin:4px 0 0} .about__point strong{color:var(--dark)} /* статистики с икони */ .about__features{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:28px 0; background:var(--bg-soft);border-radius:16px;padding:26px 12px} .about__feature{padding:6px 12px;position:relative} .about__feature:not(:last-child)::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;background:var(--line)} .about__fic{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;background:var(--accent-grad);color:#fff;margin-bottom:10px} .about__fic svg{width:23px;height:23px} .about__fnum{display:block;font-size:27px;font-weight:900;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1} .about__ftext{display:block;font-size:12.5px;color:var(--muted);margin-top:6px} /* завършващ блок със щит */ .about__cta-box{display:flex;align-items:center;gap:18px;text-align:left; background:var(--bg-soft);border-radius:14px;padding:20px 24px;margin-top:4px} .about__cta-ico{width:50px;height:50px;flex:none;border-radius:13px;background:var(--accent-grad);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(79,135,1,.32)} .about__cta-ico svg{width:27px;height:27px} .about__cta-box p{font-size:15px;line-height:1.5;color:#555;margin:0} .about__cta-box strong{color:var(--dark)} /* бутон "Научете повече" */ .about__toggle{display:inline-flex;align-items:center;gap:9px;margin-top:26px; padding:14px 30px;border-radius:50px;background:var(--accent-grad);color:#fff;font-weight:700;font-size:15px; box-shadow:0 8px 20px rgba(79,135,1,.28);transition:transform .2s var(--ease),box-shadow .2s} .about__toggle:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(79,135,1,.4)} .about__toggle:hover svg{transform:translateX(4px)} .about__toggle svg{width:18px;height:18px;transition:transform .3s var(--ease)} /* ============ PROMO BANNER (богат, като заданието) ============ */ .promo{padding:24px 0 10px} .promo2{position:relative;overflow:hidden;border-radius:22px;color:#fff; display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:auto 1fr;min-height:400px} /* лявото съдържание е в първия ред, първа колона */ .promo2__left{grid-row:1;grid-column:1} /* фон: реалната снимка с части (червен фон + лъчи + детайли вдясно) */ .promo2__bg{position:absolute;inset:0;z-index:0; background:#112400 url("../img/promo-bg.webp") no-repeat right center;background-size:auto 108%} /* градиент отгоре — по-плътен вляво за четим текст, прозрачен вдясно (вижда се снимката) */ .promo2__bg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(40,71,3,.85) 0%,rgba(40,71,3,.7) 38%,rgba(40,71,3,.30) 56%,rgba(40,71,3,.05) 70%,transparent 80%), linear-gradient(180deg,transparent 60%,rgba(0,0,0,.4) 100%)} .promo2__left,.promo2__right{position:relative;z-index:1} .promo2__left{padding:26px 40px 22px} /* бадж — pill с тънък светъл бордер и червено огънче */ .promo2__badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.20);border:1.5px solid rgba(255,255,255,.28); padding:8px 18px;border-radius:50px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px} /* заглавие — с тъмна подложка зад -40% */ .promo2__title{font-size:clamp(26px,3.1vw,38px);font-weight:900;line-height:1.12;letter-spacing:-.5px} .promo2__title span{position:relative;white-space:nowrap;padding:0 4px} .promo2__title span::after{content:"";position:absolute;left:0;right:0;top:8%;bottom:14%;background:rgba(0,0,0,.32);z-index:-1;border-radius:5px} .promo2__brands{font-size:18px;font-weight:700;margin-top:12px;letter-spacing:.2px} .promo2__sub{font-size:13.5px;opacity:.8;margin-top:5px} /* 4 feature карти — компактни, ЦЕНТРИРАНИ, изразен бордер + подцветка ширина = колкото реда бутон+таймер отдолу (свършват на едно ниво) */ .promo2__cards{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:16px 0;max-width:600px} .promo2__card{background:rgba(0,0,0,.30);border:1.5px solid rgba(255,255,255,.22);border-radius:12px;padding:12px 10px; display:flex;flex-direction:column;align-items:center;text-align:center} .promo2__cico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px; background:transparent;border:1.5px solid rgba(255,255,255,.45);color:#fff;margin-bottom:8px} .promo2__cico svg{width:19px;height:19px;margin-top:6px} .promo2__card strong{display:block;font-size:12px;font-weight:800;line-height:1.2;text-transform:uppercase;letter-spacing:.3px} .promo2__card>span{display:block;font-size:10.5px;opacity:.72;margin-top:3px;line-height:1.3} /* бутон + таймер */ .promo2__action{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px;max-width:600px} .promo2__cta{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#111; font-weight:800;font-size:13.5px;text-transform:uppercase;letter-spacing:.6px;padding:0 10px 0 26px;height:50px;border-radius:12px; box-shadow:0 12px 26px rgba(0,0,0,.28);transition:transform .2s var(--ease),box-shadow .2s} .promo2__cta svg{width:16px;height:16px;color:#fff;transition:transform .25s var(--ease)} .promo2__cta::after{content:"";display:none} .promo2__cta .promo2__cta-arrow{width:32px;height:32px;border-radius:8px;background:var(--accent-grad);display:grid;place-items:center;flex:none} .promo2__cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.38)} .promo2__cta:hover svg{transform:translateX(3px)} .promo2__timer{display:flex;align-items:center;gap:0;background:rgba(0,0,0,.22);border:1.5px solid rgba(255,255,255,.14);border-radius:12px;padding:6px 8px;height:50px} .promo2__timer-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;line-height:1.2;opacity:.8;max-width:118px;padding:0 12px 0 6px} .promo2__timer-label svg{width:18px;height:18px;flex:none} /* всяка единица: цифра + етикет, центрирани един под друг */ .promo2__t{display:flex;flex-direction:column;align-items:center;justify-content:center; min-width:46px;padding:0 10px;position:relative} .promo2__t:not(:last-child)::after{content:"";position:absolute;right:0;top:16%;bottom:16%;width:1px;background:rgba(255,255,255,.18)} .promo2__t b{font-size:25px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.5px} .promo2__t i{font-style:normal;font-size:9.5px;opacity:.65;text-transform:uppercase;letter-spacing:.6px;margin-top:4px} /* долна лента — на ЦЯЛАТА ширина, вертикално центрирана в долната зона */ .promo2__usp{grid-row:2;grid-column:1 / -1;z-index:1;position:relative;align-content:center; display:grid;grid-template-columns:repeat(3,1fr); margin:0 40px;padding:16px 0;border-top:1px solid rgba(255,255,255,.16)} .promo2__usp-item{display:flex;align-items:center;justify-content:center;gap:13px;position:relative} /* тънки разделители между трите части */ .promo2__usp-item:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;bottom:10%;width:1px;background:rgba(255,255,255,.14)} .promo2__uico{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.32);color:#fff;display:grid;place-items:center} .promo2__uico svg{width:21px;height:21px} .promo2__usp-item strong{display:block;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.3px} .promo2__usp-item span{font-size:12px;opacity:.72;margin-top:2px} /* ДЯСНО: само бадж -40% (върху снимката-фон) */ .promo2__right{position:relative;display:flex;align-items:flex-start;justify-content:flex-end;padding:20px} .promo2__discount{position:absolute;top:30px;right:30px;z-index:3;display:flex;flex-direction:column;align-items:center; background:#fff;color:#111;border-radius:14px;padding:14px 22px 0;box-shadow:0 16px 36px rgba(0,0,0,.4);transform:rotate(3deg)} .promo2__discount i{font-style:normal;font-size:13px;font-weight:800;text-transform:uppercase;align-self:flex-start;margin-bottom:-6px} .promo2__discount b{font-size:56px;font-weight:900;line-height:.9;letter-spacing:-2px} .promo2__discount em{font-style:normal;background:var(--accent-grad);color:#fff;font-weight:900;font-size:15px;text-transform:uppercase;letter-spacing:1px;padding:5px 18px;border-radius:8px;margin-top:8px} .promo2__discount u{text-decoration:none;background:#111;color:#fff;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:5px 14px;border-radius:0 0 8px 8px;margin:0 -22px;width:calc(100% + 44px);text-align:center} /* ---------- ЛИЧЕН БЛОК: „Продължи оттам" (App\Support\ForYou) ---------- Трите вида НЕ са еднакви етикети. Първата версия ги сливаше в едни и същи капсули и окото не различаваше автомобил от каталожен код. Затова: • автомобил → карта със снимка и двигател (както в „Избери от Моят гараж") • категория → плочка с иконка (както плочките „Категории части") • търсене → капсула с лупа и моноширинен код Блокът е навигация към нещо започнато, не втора оферта — оттам и тихият тон. */ .foryou-trail{margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} /* На началната лентата е отделна секция (над марките) — без чертата и отстъпа отгоре. */ .section--trail .foryou-trail{margin-top:0;padding-top:0;border-top:0} .foryou-trail__head{display:flex;align-items:center;gap:10px;margin-bottom:20px} .foryou-trail__head svg{width:20px;height:20px;color:var(--accent);flex:none} .foryou-trail__head h3{font-size:17px;font-weight:800;color:var(--dark);margin:0} .foryou-group{display:flex;align-items:flex-start;gap:18px;padding:14px 0} .foryou-group + .foryou-group{border-top:1px dashed var(--line)} .foryou-group__label{flex:none;width:104px;padding-top:9px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} /* Автомобили */ .foryou-cars{display:flex;flex-wrap:wrap;gap:12px;flex:1} .foryou-car{display:flex;align-items:center;gap:12px;min-width:240px;padding:10px 16px 10px 10px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s} .foryou-car:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)} .foryou-car__img{width:64px;height:44px;object-fit:cover;border-radius:8px;background:#f4f4f5;flex:none} .foryou-car__img--ph{display:grid;place-items:center;color:var(--muted)} .foryou-car__img--ph svg{width:26px;height:26px} .foryou-car__info{display:flex;flex-direction:column;gap:2px;min-width:0} .foryou-car__model{font-size:14px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .foryou-car__spec{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Категории */ .foryou-cats{display:flex;flex-wrap:wrap;gap:10px;flex:1} .foryou-cat{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 7px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:600;color:var(--dark);transition:border-color .2s,color .2s,transform .2s} .foryou-cat:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .foryou-cat__img{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#f4f4f5;padding:3px;flex:none} .foryou-cat__pic{display:contents} /* обвивката на снимката — на компютър без собствен облик */ .foryou-cat__pic:empty + .foryou-cat__name{padding-left:11px} .foryou-group__title,.foryou-search__hint{display:none} /* само на телефон — mobile.css */ /* Компютър: блокът „Продължи оттам" — стегнат и симетричен: ~40 px над него (от лентата с предимствата) и ~40 px под него (до „Категории части"). Иначе .section даваше по 72 px отгоре и отдолу, а следващата секция още толкова — 77 px отгоре срещу 112 отдолу. */ @media (min-width:861px){ .section--trail{padding:35px 0 0} /* + 5 px от главата = 40 */ .section--trail + .section{padding-top:30px} .section--trail .foryou-trail__head{margin-bottom:8px} .section--trail .foryou-group{padding:10px 0} } /* Търсения */ .foryou-searches{display:flex;flex-wrap:wrap;gap:10px;flex:1} .foryou-search{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1px dashed var(--line);border-radius:999px;background:#fafafa;transition:border-color .2s,background .2s,transform .2s} .foryou-search:hover{border-color:var(--accent);background:#fff;transform:translateY(-2px)} .foryou-search svg{width:15px;height:15px;color:var(--muted);flex:none} .foryou-search:hover svg{color:var(--accent)} .foryou-search__q{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;color:var(--dark)} /* „Махни от историята" (partials.recent-x): кръгче с × в горния десен ъгъл — само при посочване на елемента; на тъч (без посочване) стои бледо ВЪТРЕ в ъгъла, защото лентите с плъзгане на телефон режат всичко извън елемента. Изчезването — .is-forgetting. */ .foryou-car,.foryou-cat,.foryou-search{position:relative} .foryou-x{position:absolute;top:-8px;right:-8px;z-index:2;width:22px;height:22px;display:grid;place-items:center;border-radius:50%; background:#fff;border:1px solid var(--line);color:var(--muted);box-shadow:0 3px 8px rgba(16,18,24,.14);cursor:pointer; opacity:0;transform:scale(.6);transition:opacity .16s,transform .16s,background .15s,color .15s,border-color .15s} .foryou-x svg,.foryou-search .foryou-x svg,.foryou-search:hover .foryou-x svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;color:inherit} .foryou-car:hover .foryou-x,.foryou-cat:hover .foryou-x,.foryou-search:hover .foryou-x,.foryou-x:focus-visible{opacity:1;transform:none} .foryou-x:hover{background:var(--accent);border-color:var(--accent);color:#fff} .foryou-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .is-forgetting{opacity:0 !important;transform:scale(.88) !important;transition:opacity .2s,transform .2s !important;pointer-events:none} @media (hover:none){ .foryou-x{top:4px;right:4px;width:20px;height:20px;opacity:.75;transform:none;box-shadow:none;background:rgba(255,255,255,.9)} .foryou-search{padding-right:30px} .foryou-search .foryou-x{top:50%;margin-top:-10px} } @media (max-width:860px){ .foryou-group{flex-direction:column;gap:10px;padding:16px 0} .foryou-group__label{width:auto;padding-top:0} .foryou-car{min-width:0;flex:1 1 100%} } /* ---------- PRODUCTS (визия с реални снимки + бранд лога) ---------- */ .products{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .product{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s} .product:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--accent)} .product__tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--dark);color:#fff;font-size:12px;font-weight:800;padding:4px 10px;border-radius:6px} .product__tag--sale{background:var(--accent-grad)} .product__tag--top{background:linear-gradient(135deg,#f7b500,#f08a00);color:#fff} /* Двата етикета заедно: отстъпката остава горе, „ТОП" слиза под нея. */ .product__tag--sale + .product__tag--top{top:42px} /* „ПЦ" пред зачертаната — тя е препоръчителната цена на доставчика, не наша стара. */ /* ---- „Сауто препоръчва" — заглавен ред над списъка ---- Без рамка и без фон: картите вътре вече са в карета и каре в каре утежнява страницата. Разделя само заглавието. */ .recbox{margin:0 0 26px} .recbox[hidden]{display:none} .recbox__head{margin:0 0 14px} .recbox__title{display:flex;align-items:center;gap:8px;margin:0 0 4px;font-size:19px;font-weight:700;color:#222} .recbox__badge{flex:none;padding:3px 8px;border-radius:5px;background:linear-gradient(135deg,#f7b500,#f08a00); color:#fff;font-size:11px;font-weight:800;letter-spacing:.04em} @media (max-width:640px){.recbox__title{font-size:17px}} .product__fav{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:18px;color:var(--accent);display:grid;place-items:center;transition:transform .2s} .product__fav:hover{transform:scale(1.15)} /* снимка на продукта — бял фон, цялата се вижда центрирано */ .product__img{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:18px;background:#fff;border-bottom:1px solid var(--line)} .product__img img{max-width:100%;max-height:260px;width:auto;height:auto;object-fit:contain;transition:transform .35s var(--ease)} .product:hover .product__img img{transform:scale(1.05)} .product__body{padding:14px;display:flex;flex-direction:column;flex:1} /* бранд: лого + изписано име, на един ред */ .product__brandrow{display:flex;align-items:center;gap:8px;margin-bottom:8px} .product__brandlogo{height:16px;width:auto;max-width:64px;object-fit:contain;object-position:left center;flex:none} .product__brandname{font-size:11.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px} .product__namelink{text-decoration:none;color:inherit;display:block} .product__name{font-size:13.5px;font-weight:700;color:var(--dark);line-height:1.3;margin-bottom:4px;transition:color .2s} .product:hover .product__name{color:var(--accent)} .product__sku{font-size:11.5px;color:var(--muted);margin-bottom:8px} /* Копиране на кода направо от листинга. Показва се като иконка до номера; на телефон остава видима (там няма посочване с мишка). `.product__sku` нарочно НЕ се пипа — в решетката е инлайн елемент и `display:inline-flex` би пуснал досегашния `margin-bottom`, който сега не важи, и щеше да размести картите. */ .sku-copy{display:inline-grid;place-items:center;vertical-align:-4px;width:20px;height:20px;margin-left:3px;padding:0;border:0;border-radius:5px;background:none;color:var(--muted);cursor:pointer;opacity:.55;transition:opacity .15s,color .15s,background .15s} .sku-copy:hover{opacity:1;color:var(--accent);background:#ecf4e7} .sku-copy:focus-visible{opacity:1;outline:2px solid var(--accent);outline-offset:1px} .sku-copy svg{width:13px;height:13px} .sku-copy svg[hidden]{display:none} .sku-copy.is-copied{opacity:1;color:#16a34a;background:transparent} /* VIN — поправка и грешки докато се пише (MegaVin в main.js; полета с data-vin). */ .vin-msg{margin:8px 2px 0;min-height:18px;font-size:12.5px;line-height:1.45;color:var(--muted)} .vin-msg:empty{min-height:0;margin:0} .vin-msg.is-ok{color:#16a34a;font-weight:600} .vin-msg.is-bad{color:#dc2626;font-weight:600} input[data-vin]{text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums} input[data-vin]::placeholder{text-transform:none;letter-spacing:0} input[data-vin].is-vin-ok{border-color:#16a34a} input[data-vin].is-vin-bad{border-color:#dc2626;background:#fef2f2} /* Характеристиките под името в каталожната карта („Капацитет: 60 Ah"). Кои са те решава отметката „Показвай в листинга" при описателя. */ .product__specs{display:flex;flex-direction:column;gap:3px;margin:6px 0 4px} .product__spec{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);line-height:1.45} .product__spec b{color:var(--ink);font-weight:600} /* Иконката е с цвета на реда и не се свива, когато стойността е дълга. */ .product__spec-ic{width:15px;height:15px;flex:none;color:var(--accent);opacity:.85} /* цена: евро голямо + лева под него + стара цена */ .product__price{display:flex;flex-direction:column;gap:2px;margin-bottom:12px;margin-top:auto} .product__eur{font-size:19px;font-weight:900;color:var(--accent);line-height:1.1} .product__bgn{font-size:12.5px;font-weight:600;color:var(--ink)} .product__bgn del{color:var(--muted);font-weight:500;margin-left:5px} /* един бутон Купи с иконка количка */ .product__add{width:100%;gap:8px;padding:11px 12px;font-size:13px} .product__add svg{width:18px;height:18px;fill:currentColor} /* ---------- BRANDS ---------- */ .brands{padding:56px 0;background:var(--bg-soft);overflow:hidden} .brands .section__head{margin-bottom:28px;text-align:center} .brands .section__title::after{left:50%;transform:translateX(-50%)} /* лога на брандовете — карета с реални лога */ .brands__track{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;align-items:stretch} .brands__track img{width:100%;height:64px;object-fit:contain;padding:12px 16px; background:#fff;border:1px solid var(--line);border-radius:11px; filter:grayscale(1);opacity:.72;transition:filter .25s,opacity .25s,transform .25s var(--ease),box-shadow .25s,border-color .25s} .brands__track img:hover{filter:grayscale(0);opacity:1;transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent)} /* ---------- NEWSLETTER ---------- */ /* компактна newsletter лента над футъра */ .news{padding:26px 0;background:#161616;color:#fff;border-top:1px solid rgba(255,255,255,.06)} .news__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .news__text{display:flex;align-items:center;gap:14px} .news__ic{width:46px;height:46px;flex:none;border-radius:11px;background:var(--accent-grad);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(79,135,1,.35)} .news__ic svg{width:24px;height:24px} .news__title{font-size:19px;font-weight:800;letter-spacing:-.3px} .news__inner p{color:#a8a8b0;margin-top:2px;font-size:13.5px} .news__form{display:flex;gap:10px;flex:1;max-width:460px;min-width:260px} .news__form input{flex:1;border:none;outline:none;padding:12px 16px;border-radius:10px;font-size:14.5px;background:#242424;color:#fff} .news__form input::placeholder{color:#888} .news__form .btn{padding:12px 22px} /* ============ GOOGLE ОТЗИВИ (както в заданието) ============ */ .greviews{position:relative;padding:60px 0 54px;overflow:hidden; background:#fff url("../img/reviews-bg.webp") no-repeat center center;background-size:cover} /* фонът се тегли чак когато секцията наближи (partials/lazy-images) */ .greviews[data-lz]:not(.is-near){background-image:none} /* много лек воал само за четимост — частите вляво/вдясно остават видими */ .greviews::before{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.10) 25%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.10) 75%,rgba(255,255,255,.30) 100%)} .greviews .container{position:relative;z-index:1} /* ГОРЕН РЕД: монитор вляво + рейтинг вдясно */ .greviews__top{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin-bottom:24px} /* ---- снимка на монитора (iMac) ---- */ .greviews__device{display:flex;justify-content:center} .greviews__device img{width:100%;max-width:480px;height:auto;display:block; filter:drop-shadow(0 24px 36px rgba(0,0,0,.20))} .greviews__brand{font-size:34px;font-weight:900;letter-spacing:-.6px;color:var(--dark)} .greviews__brand span{color:var(--accent)} .greviews__brand i{font-style:normal;color:var(--muted);font-weight:700;font-size:22px} .greviews__tagline{font-size:24px;font-weight:800;color:var(--dark);margin-top:8px;line-height:1.2} .greviews__tagline strong{color:var(--accent)} .greviews__score{display:flex;align-items:center;gap:12px;margin-top:20px;flex-wrap:wrap} .greviews__num{font-size:42px;font-weight:900;color:var(--dark);line-height:1} .greviews__stars{color:#fbbc05;font-size:28px;letter-spacing:2px} .greviews__count{font-size:15px;color:#444} .greviews__powered{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:14px;color:#666} .gword{font-weight:800;font-size:18px;letter-spacing:-.5px} .greviews__cta{margin-top:22px;padding:14px 30px} /* ДОЛЕН РЕД: слайдер с карти отзиви (припокрива се с горния блок) */ .greviews__slider{position:relative;padding:0 30px;z-index:2} .grev-track{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;padding:18px 4px; scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none} .grev-track::-webkit-scrollbar{display:none} .grev-card{position:relative;flex:0 0 calc(33.333% - 16px);scroll-snap-align:start; background:#fff;border-radius:14px;padding:26px 24px 22px;box-shadow:0 14px 34px rgba(20,20,30,.12); display:flex;flex-direction:column} .grev-quote{position:absolute;top:18px;left:22px;font-size:46px;line-height:.6;color:var(--accent);font-family:Georgia,serif;font-weight:700} .grev-stars{color:var(--accent);font-size:18px;letter-spacing:2px;margin:6px 0 0 40px} .grev-text{font-size:14px;color:#555;line-height:1.6;font-style:italic;margin-top:14px;min-height:48px} .grev-g{width:26px;height:26px;flex:none;align-self:flex-end;margin-top:8px;border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='26' height='26'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E") no-repeat center/contain} .grev-author{display:flex;align-items:center;gap:12px;margin-top:18px} .grev-ava{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px} .grev-ava--red{background:var(--accent-grad)} .grev-ava--dark{background:linear-gradient(135deg,#3a3a42,#23232a)} .grev-author strong{display:block;font-size:15px;color:var(--dark)} .grev-author span{font-size:12px;color:var(--muted)} /* навигация — стрелки отстрани + точки долу */ .grev-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%; background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);color:var(--dark); font-size:26px;line-height:1;display:grid;place-items:center;transition:.2s} .grev-nav:hover{background:var(--accent);color:#fff;border-color:transparent} .grev-nav--prev{left:-6px} .grev-nav--next{right:-6px} .grev-dots{display:flex;justify-content:center;gap:8px;margin-top:22px;position:relative;z-index:2} .grev-dots span{width:9px;height:9px;border-radius:50%;background:#cfcfd6;cursor:pointer;transition:.2s} .grev-dots span.is-active{background:var(--accent);width:24px;border-radius:5px} /* ---------- FOOTER ---------- */ .footer{background:#0d0d0d;color:#b9b9c0} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:60px 20px 40px} .footer__h{display:block;color:#fff;font-size:15px;margin-bottom:18px;font-weight:700} .footer__col a{display:block;padding:5px 0;font-size:14px;color:#a3a3ac;transition:color .2s,padding-left .2s} .footer__col a:hover{color:var(--accent);padding-left:5px} .footer__about{margin:18px 0;font-size:14px;line-height:1.6;max-width:320px} .footer__contact a{display:flex;align-items:center;gap:9px;font-weight:600;color:#cfcfd6} .footer__contact svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Колоните с връзки са
, за да могат да се сгъват на телефон. Тук изглеждат като обикновена колона: без триъгълниче, без стрелка, без курсор. */ .footer__acc summary{list-style:none;display:block} .footer__acc summary::-webkit-details-marker{display:none} .footer__acc-sum{cursor:default} .footer__acc-arr{display:none} .footer__hours{font-size:14px;margin-bottom:12px;line-height:1.5} .footer__hours strong{color:#fff} .footer__newsletter{display:flex;gap:8px;margin-top:14px} .footer__newsletter input{flex:1;min-width:0;height:40px;padding:0 12px;border-radius:8px;border:1.5px solid #333;background:#1a1a1a;color:#fff;font-size:13px;font-family:inherit;outline:none;transition:border-color .2s} .footer__newsletter input:focus{border-color:var(--accent)} .footer__newsletter input::placeholder{color:#666} .footer__newsletter button{height:40px;padding:0 16px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:opacity .2s} .footer__newsletter button:hover{opacity:.85} .footer__bottom{border-top:1px solid #232323} .footer__bottom-inner{display:flex;justify-content:space-between;align-items:center;padding:20px;font-size:13px;color:#7d7d86;flex-wrap:wrap;gap:14px} /* ---------- ИКОНИ ЗА ПЛАЩАНЕ ---------- */ .pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .pay__label{font-size:12px;color:#8a8a93;margin-right:2px} .pay-badge{display:inline-flex;align-items:center;justify-content:center;gap:4px; height:30px;min-width:46px;padding:0 9px;border-radius:6px;background:#fff; font-weight:800;font-size:13px;letter-spacing:.3px;box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s var(--ease)} .pay-badge:hover{transform:translateY(-2px)} /* VISA — син курсив */ .pay-badge--visa{color:#1a1f71;font-style:italic;font-size:15px;letter-spacing:0} .pay-badge--visae{color:#1a1f71;font-style:italic;font-size:14px;gap:2px} .pay-badge--visae small{font-style:normal;font-weight:600;font-size:8px;color:#e8821a;text-transform:uppercase;letter-spacing:.3px} /* Mastercard / Maestro — два припокриващи се кръга */ .pay-badge--mc,.pay-badge--maestro{gap:0;padding:0 9px} .pay-circ{width:17px;height:17px;border-radius:50%;display:inline-block} .pay-circ--red{background:#eb001b} .pay-circ--orange{background:#f79e1b;margin-left:-7px;mix-blend-mode:multiply} .pay-circ--blue{background:#0099df} .pay-badge--maestro .pay-circ--red{margin-left:-7px;mix-blend-mode:multiply} .pay-badge em{font-style:normal;font-size:8.5px;font-weight:700;color:#222;margin-left:4px;letter-spacing:0;text-transform:lowercase} .pay-badge--maestro em{text-transform:capitalize} /* наложен платеж / в брой — тъмни с икона */ .pay-badge--text{background:#23232a;color:#e3e3e8;font-weight:600;font-size:11.5px;text-transform:none;letter-spacing:0;box-shadow:none;border:1px solid rgba(255,255,255,.1)} .pay-badge--text svg{width:15px;height:15px} /* ---------- BACK TO TOP ---------- */ .totop{position:fixed;right:22px;bottom:22px;z-index:90;width:48px;height:48px;border-radius:50%;background:var(--accent-grad);color:#fff;font-size:20px;box-shadow:0 10px 24px rgba(79,135,1,.4);opacity:0;visibility:hidden;transform:translateY(14px);transition:.3s var(--ease)} .totop.show{opacity:1;visibility:visible;transform:translateY(0)} .totop:hover{transform:translateY(-3px)} /* ============ AUTH МОДАЛ (Вход/Регистрация) ============ */ .auth{position:fixed;inset:0;z-index:1000;display:none} .auth.is-open{display:block} .auth__overlay{position:absolute;inset:0;background:rgba(14,14,18,.66);backdrop-filter:blur(4px); opacity:0;transition:opacity .3s var(--ease)} .auth.is-open .auth__overlay{opacity:1} .auth__dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97); width:min(420px,94vw);max-height:92vh;overflow-y:auto;background:#fff;border-radius:20px; padding:30px 30px 26px;box-shadow:var(--shadow-lg);opacity:0; transition:opacity .3s var(--ease),transform .35s var(--ease)} .auth.is-open .auth__dialog{opacity:1;transform:translate(-50%,-50%) scale(1)} .auth__close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px; background:var(--bg-soft);color:var(--ink);font-size:14px;display:grid;place-items:center;transition:.2s} .auth__close:hover{background:var(--accent);color:#fff} .auth__brand{text-align:center;margin-bottom:20px} .auth__logo{height:42px;width:auto;display:inline-block} .auth__brand p{font-size:13.5px;color:var(--muted);margin-top:6px} /* Причината, поради която модалът е изскочил. Без причина е обикновен текст; с причина става каре с предупредителен знак, за да се вижда ЗАЩО се иска вход. */ .auth__note{margin-top:6px} .auth__note-ico{display:none} .auth__note.is-warn{display:flex;align-items:flex-start;gap:10px;text-align:left; background:#FFF8E6;border:1px solid #F0D08E;border-radius:10px;padding:10px 12px;margin-top:12px} .auth__note.is-warn .auth__note-ico{display:block;flex:none;width:22px;height:22px;margin-top:1px} .auth__note.is-warn p{margin:0;color:#6E4A00;font-weight:600;line-height:1.45} /* табове */ .auth__tabs{position:relative;display:flex;background:var(--bg-soft);border-radius:12px;padding:5px;margin-bottom:20px} .auth__tab{flex:1;position:relative;z-index:2;padding:10px;border-radius:9px;font-weight:700;font-size:14px;color:var(--muted);transition:color .25s} .auth__tab.is-active{color:var(--dark)} .auth__tab-ind{position:absolute;z-index:1;top:5px;bottom:5px;left:5px;width:calc(50% - 5px); background:#fff;border-radius:9px;box-shadow:0 2px 8px rgba(0,0,0,.10);transition:transform .3s var(--ease)} .auth__tabs.reg .auth__tab-ind{transform:translateX(100%)} /* социални */ .auth__social{display:flex;flex-direction:column;gap:10px} .auth__legal{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center} .auth__legal a{color:inherit;text-decoration:underline} /* One Tap, нов човек: само панелът „Създай профила" (main.js — showOneTapPanel). */ .auth.is-onetap #authGuest > :not(#authOneTap){display:none} .auth__onetap{text-align:center} .auth__onetap-txt{margin:4px 0 16px;font-size:15px;line-height:1.55;color:var(--dark)} .auth__onetap .auth__submit{width:100%} .auth__sbtn{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;height:48px; border-radius:11px;font-weight:600;font-size:14.5px;border:1.5px solid var(--line);background:#fff;color:var(--ink); transition:background .2s,border-color .2s,transform .2s} .auth__sbtn svg{width:20px;height:20px} .auth__sbtn:hover{background:var(--bg-soft);transform:translateY(-1px)} .auth__sbtn--fb{background:#1877F2;color:#fff;border-color:#1877F2} .auth__sbtn--fb:hover{background:#1568d8;border-color:#1568d8} .auth__divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12.5px} .auth__divider::before,.auth__divider::after{content:"";flex:1;height:1px;background:var(--line)} /* форма */ .auth__form{display:flex;flex-direction:column;gap:14px} .auth__field{display:flex;flex-direction:column;gap:6px} /* `hidden` атрибутът трябва да скрива въпреки display:flex по-горе (иначе полето "Име и фамилия" се вижда при Вход). display:flex има по-висока специфичност от вградения [hidden] стил, затова го налагаме изрично. */ .auth__form [hidden]{display:none !important} .auth__field>span{font-size:12.5px;font-weight:600;color:var(--ink)} .auth__field input{height:46px;padding:0 15px;border:1.5px solid var(--line);border-radius:10px;font-size:14.5px;color:var(--ink);transition:border-color .2s,box-shadow .2s} .auth__field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,135,1,.12)} .auth__pass{position:relative} .auth__pass input{width:100%;padding-right:46px} .auth__eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:8px;color:var(--muted);display:grid;place-items:center;transition:.2s} .auth__eye:hover{color:var(--accent);background:var(--bg-soft)} .auth__eye svg{width:20px;height:20px} .auth__row{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin-top:-2px} .auth__check{display:flex;align-items:center;gap:7px;color:var(--ink);cursor:pointer} .auth__check input{width:15px;height:15px;accent-color:var(--accent)} .auth__check--terms{font-size:12.5px;flex-wrap:wrap} /* Грешката „Трябва да приемеш…" да пада на нов ред под чекбокса, а не до него. */ .auth__check--terms .auth__err{flex-basis:100%;margin-left:22px} .auth__check--terms a,.auth__forgot{color:var(--link);font-weight:600} .auth__forgot:hover,.auth__check--terms a:hover{text-decoration:underline} .auth__submit{width:100%;height:48px;margin-top:6px;font-size:15px} .auth__switch{text-align:center;font-size:13.5px;color:var(--muted);margin-top:16px} .auth__switch a{color:var(--accent);font-weight:700} .auth__switch a:hover{text-decoration:underline} body.auth-lock{overflow:hidden} /* ---- Валидация / грешки в auth формата ---- */ /* hidden трябва да скрива и панелите вътре в модала, въпреки flex по-долу. */ .auth [hidden]{display:none !important} .auth__alert{background:rgba(79,135,1,.08);border:1px solid rgba(79,135,1,.25);color:#406d07;font-size:13px;font-weight:600;padding:9px 12px;border-radius:9px;margin-bottom:2px} .auth__err{color:#d40000;font-size:12px;font-weight:600;line-height:1.3} .auth__field.has-error input,.auth__check.has-error input{border-color:#d40000} .auth__field.has-error input{box-shadow:0 0 0 3px rgba(242,0,0,.1)} .auth__check.has-error{color:#d40000} /* ---- Логнат клиент (акаунт панел) ---- */ .auth__account{display:flex;align-items:center;gap:14px;padding:16px;border:1.5px solid var(--line);border-radius:12px;margin-bottom:16px} .auth__avatar{width:52px;height:52px;flex:none;border-radius:50%;background:var(--accent);color:#fff;font-size:22px;font-weight:800;display:grid;place-items:center} .auth__me{display:flex;flex-direction:column;gap:2px;min-width:0} .auth__me strong{font-size:15.5px;color:var(--ink)} .auth__me span{font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- SCROLL REVEAL ---------- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:translateY(0)} /* ---------- CATEGORY MODAL ---------- */ .catmodal{position:fixed;inset:0;z-index:1000;display:none} .catmodal.is-open{display:block} .catmodal__overlay{position:absolute;inset:0;background:rgba(15,15,20,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s var(--ease)} .catmodal.is-open .catmodal__overlay{opacity:1} .catmodal__dialog{ position:absolute;left:50%;top:50%;transform:translate(-50%,-46%) scale(.97); width:min(1060px,94vw);max-height:88vh;display:flex;flex-direction:column; background:#fff;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-lg); opacity:0;transition:opacity .3s var(--ease),transform .35s var(--ease); } .catmodal.is-open .catmodal__dialog{opacity:1;transform:translate(-50%,-50%) scale(1)} .catmodal__head{display:flex;align-items:center;justify-content:space-between;gap:18px; padding:18px 22px;border-bottom:1px solid var(--line);flex-wrap:wrap; background:linear-gradient(180deg,#fff,#fafafa)} .catmodal__head-info{display:flex;align-items:center;gap:16px;min-width:0} .catmodal__hero{width:62px;height:62px;object-fit:contain;border-radius:12px;background:var(--bg-soft);padding:7px;border:1px solid var(--line);flex:none} .catmodal__eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent)} .catmodal__title{font-size:22px;font-weight:900;letter-spacing:-.4px;color:var(--dark);line-height:1.15} .catmodal__count{font-size:13px;color:var(--muted);margin-top:2px} .catmodal__tools{display:flex;align-items:center;gap:12px} .catmodal__search{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:10px;padding:0 12px;height:42px;transition:border-color .2s} .catmodal__search:focus-within{border-color:var(--accent)} .catmodal__search svg{width:17px;height:17px;color:var(--muted);flex:none} .catmodal__search input{border:none;outline:none;width:230px;max-width:42vw;font-size:14px;color:var(--ink)} .catmodal__close{width:42px;height:42px;border-radius:10px;background:var(--bg-soft);color:var(--ink);font-size:16px;font-weight:700;flex:none;transition:background .2s,color .2s} .catmodal__close:hover{background:var(--accent);color:#fff} .catmodal__body{padding:22px;overflow-y:auto} .catmodal__body::-webkit-scrollbar{width:10px} .catmodal__body::-webkit-scrollbar-thumb{background:#d8d8de;border-radius:8px;border:3px solid #fff} .subgroup{margin-bottom:26px} .subgroup:last-child{margin-bottom:4px} .subgroup__title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;color:var(--dark);margin-bottom:14px} .subgroup__title::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--accent-grad)} .subgroup__title span{font-size:12px;font-weight:600;color:var(--muted);background:var(--bg-soft);padding:2px 9px;border-radius:20px} .subgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} /* Връзки без (data-href) — страниците „кола × категория" са извън индекса (docs/seo/strategiya-indeks.md), затова търсачката не бива да вижда връзка към тях. За човека трябва да изглеждат и да се държат като връзка: ръка, рамка при обхождане с клавиатурата, нов таб с Ctrl/Cmd/среден бутон (последното — в main.js). */ [data-href]{cursor:pointer} [data-href]:focus-visible{outline:2px solid var(--accent);outline-offset:2px} .subitem{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--line);border-radius:12px;background:#fff;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s} .subitem:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent} .subitem__img{width:48px;height:48px;flex:none;border-radius:9px;background:var(--bg-soft);display:grid;place-items:center;overflow:hidden} .subitem__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply} .subitem__img svg{width:24px;height:24px;color:var(--accent)} .subitem__name{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25} .subitem:hover .subitem__name{color:var(--accent)} .catmodal__empty{text-align:center;color:var(--muted);padding:40px 0;font-size:15px} body.modal-lock{overflow:hidden} /* =================================================================== RESPONSIVE =================================================================== */ @media(max-width:1080px){ .hero__inner{grid-template-columns:1fr;gap:36px} .cards{grid-template-columns:repeat(3,1fr)} .cards--cat{grid-template-columns:repeat(4,1fr)} .products{grid-template-columns:repeat(4,1fr)} .brands__track{grid-template-columns:repeat(6,1fr)} .usp__inner{grid-template-columns:repeat(2,1fr);gap:24px} /* google отзиви: монитор отгоре, рейтинг отдолу; карти 2 на ред */ .greviews__top{grid-template-columns:1fr;gap:24px;text-align:center;margin-bottom:10px} .greviews__device{max-width:520px;margin:0 auto} .greviews__score,.greviews__powered{justify-content:center} .grev-card{flex:0 0 calc(50% - 12px)} } @media(max-width:920px){ .cards--cat{grid-template-columns:repeat(3,1fr)} } @media(max-width:860px){ .header__inner{gap:14px} /* Скрива се САМО надписът под иконката. Общият селектор `.haction span` гасеше и обвивката на иконката, и двуредовия текст, и брояча на любимите — тоест изпразваше бутоните. Всичко останало се управлява от mobile.css. */ .haction > .haction__label{display:none} .haction{padding:8px} .topbar__item--hide{display:none} .topbar__sep{display:none} .logo__img{height:40px} .search-wrap{order:4;flex-basis:100%;max-width:none;width:100%} .search{height:50px} .header__inner{flex-wrap:wrap;height:auto;padding:14px 0;gap:12px} .burger{display:flex;order:3} .garage{order:1;margin-left:auto} .header__actions{order:2;margin-left:0} /* гаражът на мобилно: компактен, само икона + стрелка */ .garage__btn{height:48px} .garage__main{padding:0 8px 0 10px;gap:8px} .garage__txt{display:none} .garage__ico{width:32px;height:32px} .garage__ico svg{width:19px;height:19px} .gdd{width:min(340px,calc(100vw - 28px));right:-50px} .gdd::before{right:70px} /* на телефон лентата с менюто я няма — бургерът отваря #mm (mobile.css) */ .nav__inner{display:none} /* мега-менюто е само за десктоп */ .mega{display:none!important} } @media(max-width:860px){ .subgrid{grid-template-columns:repeat(3,1fr)} .bp__top{grid-template-columns:repeat(4,1fr)} .bp__all{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ .cards{grid-template-columns:repeat(2,1fr)} .cards--cat{grid-template-columns:repeat(2,1fr)} .products{grid-template-columns:repeat(2,1fr)} .brands__track{grid-template-columns:repeat(4,1fr)} .bp__top{grid-template-columns:repeat(3,1fr)} .bp__all{grid-template-columns:repeat(2,1fr)} .bp{padding:18px} .about__box{padding:24px 20px} .about__features{grid-template-columns:repeat(2,1fr);gap:18px} .about__feature::after{display:none} .about__cta-box{flex-direction:column;text-align:center} .about__cta-box p{text-align:center} /* google отзиви — по 1 карта на ред */ .greviews__slider{padding:0 10px} .grev-card{flex:0 0 100%} .grev-author{text-align:left} .grev-nav--prev{left:-4px} .grev-nav--next{right:-4px} /* promo банер — една колона, продуктите отдолу */ .promo2{grid-template-columns:1fr;min-height:0} .promo2__left{padding:30px 24px} .promo2__cards{grid-template-columns:repeat(2,1fr)} .promo2__right{min-height:240px;padding:0 20px 28px} .promo2__discount{top:auto;bottom:auto;position:relative;right:auto;margin-bottom:14px} .promo2__usp{grid-template-columns:1fr;gap:12px} .footer__grid{grid-template-columns:1fr 1fr;gap:30px} .hero__stats{gap:24px} .section{padding:54px 0} } @media(max-width:480px){ .cards{grid-template-columns:1fr 1fr;gap:12px} .cards--cat{gap:12px} .subgrid{grid-template-columns:repeat(2,1fr)} .bp__top{grid-template-columns:repeat(2,1fr)} .bp__all{grid-template-columns:1fr} .products{grid-template-columns:repeat(2,1fr)} .brands__track{grid-template-columns:repeat(3,1fr)} .footer__grid{grid-template-columns:1fr} .footer__bottom-inner{flex-direction:column;text-align:center} .pay{justify-content:center} .news__inner{flex-direction:column;align-items:stretch;text-align:center} .news__text{justify-content:center} .news__form{max-width:none} .card{padding:20px 16px} .hero__stats strong{font-size:24px} } /* =================================================================== КАТЕГОРИЙНА СТРАНИЦА (cat — category listing page) =================================================================== */ /* ---------- HERO на категорията ---------- */ .cathero{position:relative;overflow:hidden;background:#0c0c0c;color:#fff} .cathero__bg{position:absolute;inset:0; background: linear-gradient(105deg, #0c0c0c 30%, rgba(12,12,12,.72) 50%, rgba(12,12,12,.1) 70%), repeating-linear-gradient(135deg, rgba(255,255,255,.032) 0 1px, transparent 1px 32px), repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 1px, transparent 1px 32px), #0c0c0c; } .cathero__bg::before{content:"";position:absolute;inset:0; background: /* широк мек ореол */ radial-gradient(ellipse 62% 90% at 72% 54%, rgba(68,115,8,.55) 0%, rgba(40,71,3,.22) 45%, transparent 68%), /* тесен ярък hotspot */ radial-gradient(ellipse 22% 32% at 72% 52%, rgba(103,172,6,.28) 0%, transparent 100%); } .cathero__bg::after{content:"";position:absolute;inset:0; /* диагонални светлинни лъчи от hotspot-а */ background: repeating-linear-gradient(125deg, rgba(98,165,2,.04) 0 2px, transparent 2px 9px); mix-blend-mode:screen; } /* ВТОРИ СЛОЙ — продуктовата снимка на категорията. Пътят се задава в темплейта чрез --cat-img на .cathero (за всяка категория различен). */ .cathero__product{position:absolute;top:50%;right:0;transform:translateY(-50%); width:min(40%,500px);aspect-ratio:800/436; background:var(--cat-img) no-repeat center / contain; pointer-events:none; filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) brightness(1.18) contrast(1.05); } /* Per-категория hero override (както визията cathero--diskove). БЕЗ квадрат (aspect-ratio:1/1): при 35% ширина квадратът е ~490px висок, а лентата ~280px — снимката излизаше над и под нея и се режеше накриво. Остава рамката 800:436 от горното правило и снимката се побира в лентата. На телефон квадратът е нужен (там снимката е фон под текста) — виж mobile.css. */ .cathero--product .cathero__title{font-size:clamp(38px,4.6vw,54px)} .cathero--product .cathero__inner{padding:16px 20px 54px} .cathero--product .cathero__product{width:min(35%,540px);right:0; filter:drop-shadow(0 8px 40px rgba(0,0,0,.75)) brightness(1.1) contrast(1.08)} .cathero__inner{position:relative;padding:16px 20px 30px} /* „Авточасти за {марка}" с картина на марката (img/brand-hero/{марка}.webp — генерирана, 3:1, тъмна вляво). Хедърът е много по-широк (≈ 6:1) — разпъната по ширина, картината губеше знака горе и колелата долу. Затова е по височината на хедъра, вдясно; лявата ѝ част е черна и се слива с фона, а преливането пази текста, когато картината стигне под него (по-тесен екран). Сиянието и снимката на категорията отпадат. */ .cathero--brand .cathero__bg{background:linear-gradient(90deg,#0c0c0c 0%,rgba(12,12,12,.88) 38%,rgba(12,12,12,0) 62%),var(--brand-hero) right center / auto 100% no-repeat,#0c0c0c} .cathero--brand .cathero__bg::before,.cathero--brand .cathero__bg::after,.cathero--brand .cathero__product{display:none} /* Текстът стига до колата на по-тесен екран (1366: описанието и „14 дни") — лека сянка и по-широко потъмняване. */ .cathero--brand .cathero__content{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.6)} .cathero--brand .cathero__sub{text-shadow:none} /* градиент по буквите — сянката го гаси */ /* „Авточасти за {модел}" — вдясно ветрило от до четири снимки на поколенията (най-новото отпред вдясно), в бели рамки, върху тъмния фон с червеното сияние. Приглушени (по-тъмни и бледи), не прозрачни — иначе задната прозира през предната и не личи коя е отгоре. Щом мишката е над ветрилото — светват всички; посочената излиза напред. */ .cathero--gens .cathero__product{display:none} .cathero__gens{position:absolute;right:-30px;top:50%;transform:translateY(-50%) scale(.88);transform-origin:right center;width:680px;height:330px;z-index:1} .cathero__gen{position:absolute;width:300px;aspect-ratio:16/9;border-radius:14px;overflow:hidden; border:4px solid rgba(255,255,255,.85);background:#222;box-shadow:0 18px 40px rgba(0,0,0,.6);text-decoration:none; filter:brightness(.6) saturate(.65); transition:transform .3s ease,filter .35s ease,border-color .35s ease,box-shadow .3s ease} .cathero__gen--0{filter:brightness(.75) saturate(.8)} /* най-новото — малко по-светло */ .cathero__gens:hover .cathero__gen{filter:none;border-color:#fff} .cathero__gen img{display:block;width:100%;height:100%;object-fit:cover} .cathero__gen-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:baseline;gap:8px; padding:22px 12px 9px;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent); font-size:12px;color:rgba(255,255,255,.8);text-shadow:none} .cathero__gen-cap b{font-size:14px;font-weight:800;color:#fff} .cathero__gen--3{left:0;top:58px;transform:rotate(-10deg);z-index:1} .cathero__gen--2{left:115px;top:14px;transform:rotate(-4deg);z-index:2} .cathero__gen--1{left:240px;top:34px;transform:rotate(2deg);z-index:3} .cathero__gen--0{left:365px;top:122px;transform:rotate(6deg);z-index:4} a.cathero__gen:hover{transform:rotate(0) translateY(-6px) scale(1.03);z-index:5;box-shadow:0 24px 50px rgba(0,0,0,.7)} /* Текстът да не стига до ветрилото: на широк екран има място, под 1600px — по-тясно описание и по-малко ветрило. */ @media(min-width:861px){.cathero--gens .cathero__content{max-width:min(820px,calc(100% - 600px))}} @media(min-width:861px) and (max-width:1600px){.cathero__gens{right:-30px;transform:translateY(-50%) scale(.8);transform-origin:right center} .cathero--gens .cathero__content{max-width:calc(100% - 480px)}} @media(max-width:1500px){ .cathero--brand .cathero__bg{background:linear-gradient(90deg,#0c0c0c 0%,rgba(12,12,12,.9) 45%,rgba(12,12,12,.35) 62%,rgba(12,12,12,0) 75%),var(--brand-hero) right center / auto 100% no-repeat,#0c0c0c} } .cathero__content{max-width:820px} .cathero__crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:#9a9aa3;margin-bottom:14px} .cathero__crumbs a{color:#c4c4cc;transition:color .2s;display:inline-flex;align-items:center;gap:4px} .cathero__crumbs a:hover{color:#fff} .cathero__crumbs svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;opacity:.6;vertical-align:middle;display:inline-block} .cathero__crumbs span[aria-current]{color:#fff;font-weight:600} .cathero__title{font-size:clamp(38px,4.6vw,64px);font-weight:900;line-height:.97;letter-spacing:-1.5px} .cathero__sub{margin-top:10px;font-size:clamp(12px,1.1vw,16px);font-weight:800;letter-spacing:.8px; background:linear-gradient(135deg,#9bdc45 0%,#6fb31a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-transform:uppercase; /* Пренася се, вместо да се реже: подзаглавието на входна страница е цяло изречение („Всичко необходимо за ремонта и поддръжката на автомобила") и с nowrap изчезваше под снимката. */ max-width:520px;line-height:1.3} .cathero__lead{margin-top:12px;max-width:820px;font-size:14px;color:#b8b8c4;line-height:1.55} .cathero__usps{display:flex;flex-wrap:nowrap;gap:0 24px;margin-top:16px;align-items:flex-start} .cathero__usp{display:flex;align-items:flex-start;gap:9px;flex-shrink:0} .cathero__usp svg{width:22px;height:22px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.7;margin-top:1px} .cathero__usp svg.ic--solid{fill:currentColor;stroke:none} /* камионът (partials/cathero-usps) */ .cathero__usp strong{display:block;font-size:13px;font-weight:700;white-space:nowrap;color:#fff} .cathero__usp span{font-size:11.5px;color:#888898;white-space:nowrap} .cathero__media{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px} .cathero__media img{max-height:380px;width:auto;filter:drop-shadow(0 30px 50px rgba(0,0,0,.55))} /* ---------- Светлият хедър на категорията (Sauto, по визията от 04.11.2026) ---------- Бял към светлосив фон, тъмно заглавие, зелено подзаглавие, обещанията с разделители. Снимката се слива с фона чрез `mix-blend-mode:darken`: белият ѝ фон изчезва в светлия на хедъра, остават продуктът и зелените ивици. `cathero--wide` — широк банер (category.blade.php, ≥ 1,6:1): цялата височина, до десния ръб на екрана (най-много 150px след контейнера), краищата избледняват. */ .cathero--light{background:#f6f7f4;color:#13222e;border-bottom:1px solid #e3e7df} .cathero--light .cathero__bg{background:linear-gradient(100deg,#fff 0%,#fafbf8 45%,#f0f3ec 100%)} .cathero--light .cathero__bg::before{background:radial-gradient(ellipse 42% 90% at 86% 55%,rgba(143,209,58,.20) 0%,rgba(143,209,58,.06) 50%,transparent 72%)} .cathero--light .cathero__bg::after{background:none} .cathero--light .cathero__content{position:relative;z-index:2} .cathero--light .cathero__crumbs,.cathero--light .cathero__title,.cathero--light .cathero__facts,.cathero--light .cathero__content{text-shadow:none} .cathero--light .cathero__crumbs{font-size:13px;color:#8a939a;margin-bottom:16px} .cathero--light .cathero__crumbs a{color:#4a545c} .cathero--light .cathero__crumbs a:hover{color:var(--accent)} .cathero--light .cathero__crumbs span[aria-current]{color:#13222e;font-weight:700} .cathero--light .cathero__title{color:#101b23} .cathero--light .cathero__sub{background:none;color:var(--accent);filter:none;text-transform:none;letter-spacing:0; font-size:clamp(16px,1.35vw,21px);line-height:1.3;max-width:none} .cathero--light .cathero__lead{max-width:720px;font-size:15px;color:#3a444d} .cathero--light .cathero__facts{max-width:720px;font-size:13.5px;color:#13222e} .cathero--light .cathero__usps{margin-top:20px;gap:0} .cathero--light .cathero__usp{align-items:center;gap:9px;padding:0 17px} .cathero--light .cathero__usp:first-child{padding-left:0} .cathero--light .cathero__usp + .cathero__usp{border-left:1px solid #dce1d7} /* иконките — тези от горната лента (partials/cathero-usps): линия 2px, камионът плътен; върху светлото в зеленото на сайта с лек лимонен ореол. Двата реда текст — плътно един под друг. */ .cathero--light .cathero__usp svg{width:26px;height:26px;stroke-width:2;margin-top:0;color:#5a9a08;filter:drop-shadow(0 0 5px rgba(143,209,58,.45))} .cathero--light .cathero__usp div{line-height:1.2} .cathero--light .cathero__usp strong{font-size:13px;color:#13222e} .cathero--light .cathero__usp span{display:block;margin-top:2px;font-size:11.5px;color:#6b757d} .cathero--light .cathero__product{mix-blend-mode:darken;filter:none} .cathero--light.cathero--product .cathero__product{width:min(32%,500px);right:-30px;filter:drop-shadow(0 16px 24px rgba(20,34,46,.22))} .cathero--light.cathero--wide .cathero__product{ top:0;bottom:0;transform:none;width:auto;aspect-ratio:1792/768;max-width:calc(50% + 150px); right:-150px; /* дясната ~1/7 е размито продължение на ивиците — може да излиза от екрана */ background-size:cover;background-position:80% center;filter:none; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 86%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%); -webkit-mask-composite:source-in;mask-composite:intersect} /* По-тесен компютър: обещанията стигаха до диска — снимката е по-ниска (значи и по-тясна). */ @media(max-width:1400px){ .cathero--light.cathero--wide .cathero__product{top:28px;bottom:4px} .cathero--light .cathero__usp{padding:0 14px} .cathero--light .cathero__usp:first-child{padding-left:0} } /* Таблет / малък лаптоп: текстът е по-тесен, обещанията по две на ред, а снимката е с постоянна височина долу вдясно — иначе расте с хедъра и влиза в текста. */ @media(min-width:861px) and (max-width:1180px){ /* под 861 — mobile.css */ .cathero--light.cathero--wide .cathero__product{top:auto;bottom:24px;height:280px;max-width:none;right:-100px} .cathero--light.cathero--wide .cathero__content{max-width:60%} .cathero--light .cathero__usps{display:grid;grid-template-columns:repeat(2,max-content);row-gap:12px} .cathero--light .cathero__usp:nth-child(odd){padding-left:0;border-left:0} } /* ОПИТ (04.11.2026) — компактният светъл хедър („категория × модел", .cathero--compact): само пътечката и заглавието на един ред; подзаглавието, описанието и обещанията не се показват, а снимката на категорията е в карето с търсачката. Връщане — category-model.blade.php. */ .cathero--compact .cathero__sub, .cathero--compact .cathero__lead, .cathero--compact .cathero__facts, .cathero--compact .cathero__usps { display: none; } .cathero--compact .cathero__product { display: none !important; } /* mobile.css го показва под текста с по-силен селектор */ .cathero--compact .cathero__inner, .cathero--compact.cathero--product .cathero__inner { min-height: 0; padding-top: 16px; padding-bottom: 46px; } .cathero--compact .cathero__title { font-size: clamp(32px, 3.6vw, 50px); } .cathero--compact .cathero__title-for { display: inline; margin: 0 0 0 10px; font-size: .58em; } .cathero--compact .cathero__bg::before { display: none; } @media (max-width: 767px) { .cathero--compact .cathero__title-for { display: block; margin: 4px 0 0; } .cathero--compact .cathero__inner { padding-bottom: 34px; } } /* Само пътечката (05.11.2026): H1 е заглавието на карето с търсачката, то започва веднага под нея. */ .cathero--crumbs .cathero__crumbs { margin-bottom: 0; } .cathero--crumbs .cathero__inner, .cathero--crumbs.cathero--product .cathero__inner { padding-top: 14px; padding-bottom: 38px; } /* ---------- CAT TOOLBAR (заглавие + брой + сортиране) ---------- */ .catpage{padding:14px 0 72px} .catlayout{display:grid;grid-template-columns:268px 1fr;gap:28px;align-items:normal} /* ---------- ФИЛТРИ (сайдбар) ---------- */ .filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;position:sticky;top:90px} .filters__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)} .filters__title{font-size:18px;font-weight:900;color:var(--dark)} .filters__clear{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;transition:color .2s} .filters__clear:hover{color:var(--accent)} .filters__clear svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2} .fgroup{padding:18px 0;border-bottom:1px solid var(--line)} .fgroup:last-child{border-bottom:none;padding-bottom:0} .fgroup__title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--dark);margin-bottom:14px} /* ценови слайдер */ .frange{margin:6px 2px 0} .frange__track{position:relative;height:4px;border-radius:2px;background:var(--bg-soft-2);margin:18px 0 16px} .frange__fill{position:absolute;top:0;height:100%;background:var(--accent-grad);border-radius:2px;pointer-events:none} /* dual-range слайдери наслоени */ .frange__slider{position:absolute;top:50%;width:100%;height:4px;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;transform:translateY(-50%);margin:0;outline:none} .frange__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.18);pointer-events:all;cursor:pointer;transition:transform .15s} .frange__slider::-webkit-slider-thumb:hover{transform:scale(1.18)} .frange__slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.18);pointer-events:all;cursor:pointer} /* числови полета */ .frange__inputs{display:flex;align-items:center;gap:6px;margin-top:4px} .frange__val{width:72px;border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:13px;font-weight:600;color:var(--ink);text-align:center;-moz-appearance:textfield} .frange__val::-webkit-inner-spin-button,.frange__val::-webkit-outer-spin-button{-webkit-appearance:none} .frange__val:focus{outline:none;border-color:var(--accent)} .frange__inputs span{color:var(--muted);font-size:13px;white-space:nowrap} /* чек-листи */ .fcheck{display:flex;align-items:center;justify-content:space-between;padding:7px 0;cursor:pointer;font-size:14px;color:var(--ink)} .fcheck:hover{color:var(--dark)} .fcheck label{display:flex;align-items:center;gap:10px;cursor:pointer;flex:1} .fcheck__logo{height:18px;width:auto;max-width:56px;object-fit:contain;flex:none} .fcheck input{appearance:none;width:18px;height:18px;border:2px solid var(--line);border-radius:5px;flex:none;transition:.2s;position:relative} .fcheck input:checked{background:var(--accent-grad);border-color:var(--accent)} .fcheck input:checked::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)} .fcheck__count{font-size:12px;color:var(--muted);font-weight:600} .fcheck--hidden{display:none} .fcheck--hidden.fcheck--visible{display:flex} .fcheck--no-match{display:none!important} /* Каталожен филтър „Марка" — всеки избор в бокс с рамка (както TecDoc .fbrand). */ .fgroup[data-kind="brand"] .fcheck{border:1.5px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:8px;background:#fff;transition:border-color .15s,box-shadow .15s} .fgroup[data-kind="brand"] .fcheck:hover{border-color:var(--accent)} .fgroup[data-kind="brand"] .fcheck:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset} .fgroup[data-kind="brand"] .fcheck label{font-size:11px;font-weight:600;color:var(--muted);gap:8px} .fgroup[data-kind="brand"] .fcheck:has(input:checked) label{color:var(--dark)} /* Изравняваме размерите 1:1 с TecDoc .fbrand: брой 10px, лого до 64px, дребен чекбокс 14px. */ .fgroup[data-kind="brand"] .fcheck__count{font-size:10px;font-weight:700} .fgroup[data-kind="brand"] .fcheck__logo{height:18px;max-width:64px} .fgroup[data-kind="brand"] .fcheck input{width:14px;height:14px;border-radius:4px} .fgroup[data-kind="brand"] .fcheck input:checked::after{left:4px;top:2px;width:3px;height:6px;border-width:0 2px 2px 0} .fmore{margin-top:8px;font-size:13px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center;gap:6px;background:none;border:none;padding:0;cursor:pointer} .fmore svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .25s} .fmore.is-open svg{transform:rotate(180deg)} .fsearch{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px 7px 32px;font-size:13px;color:var(--ink);margin-bottom:6px;background:var(--bg) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4-4'/%3E%3C/svg%3E") no-repeat 9px center / 15px} .fsearch:focus{outline:none;border-color:var(--accent)} /* ---------- РЕЗУЛТАТИ ---------- */ .catbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:22px} .catbar__title{font-size:clamp(22px,2.6vw,30px);font-weight:900;letter-spacing:-.6px;color:var(--dark)} .catbar__count{font-size:14px;color:var(--muted);margin-top:4px} .catbar__count b{color:var(--dark);font-weight:800} .catbar__tools{display:flex;align-items:center;gap:12px} .catsort{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:#fff} .catsort label{font-size:13px;color:var(--muted);white-space:nowrap} .catsort select{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;color:var(--dark);padding:10px 4px;cursor:pointer} .catsort select:focus{outline:none} .catview{display:flex;gap:4px;border:1px solid var(--line);border-radius:10px;padding:4px;background:#fff} .catview button{width:34px;height:34px;border-radius:7px;display:grid;place-items:center;color:var(--muted);transition:.2s} .catview button svg{width:18px;height:18px;fill:currentColor} .catview button.is-active{background:var(--accent-grad);color:#fff} /* мрежа от продукти за тази страница — 4 в ред (продуктовите карти ползват 1:1 структурата и стиловете от .product от началната страница) */ .catgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} /* Решетка на цялата ширина (витрината на категория/марка/модел, страницата за поколение) — на широк екран по 5. Листингът за кола остава по 4: до него е колоната с филтрите. */ @media (min-width:1200px){.catgrid.catgrid--wide{grid-template-columns:repeat(5,1fr)}} /* ---- List изглед (богат ред) ---- */ .catgrid.catgrid--list{grid-template-columns:1fr;gap:14px} .catgrid.catgrid--list .product{display:grid;grid-template-columns:200px 1fr 300px;grid-template-rows:1fr;align-items:stretch;gap:0} .catgrid.catgrid--list .product:hover{box-shadow:0 8px 30px rgba(0,0,0,.08);border-color:var(--line)} .catgrid.catgrid--list .product__tag{top:12px;left:12px} /* горното кръгче за любими се крие — в list има отделен бутон вдясно */ .catgrid.catgrid--list .product__fav{display:none} .catgrid.catgrid--list .product__img{aspect-ratio:auto;height:auto;align-self:stretch;border-bottom:none;border-right:1px solid var(--line);padding:18px} .catgrid.catgrid--list .product__img img{max-height:150px} .catgrid.catgrid--list .product__body{padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:5px;flex:none} .catgrid.catgrid--list .product__brandrow{margin-bottom:2px} .catgrid.catgrid--list .product__name{font-size:17px;font-weight:800;margin-bottom:2px;-webkit-line-clamp:2} .catgrid.catgrid--list .product__axle{margin:2px 0 8px} .catgrid.catgrid--list .product__sku{display:block;margin:0 0 6px} /* цена/бутон "Купи в количката" от grid-а се крият в list — местят се вдясно */ .catgrid.catgrid--list .product__price{display:none} .catgrid.catgrid--list .product__add{display:none} /* --- средна колона: спецификации --- */ .plist-specs{display:flex;flex-direction:column;gap:5px;margin:2px 0 4px} .plist-spec{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink)} .plist-spec__k{color:var(--muted);min-width:74px;flex:none} .plist-spec__v{font-weight:600;color:var(--dark)} /* "Важи за:" — специфични за колата описатели (TecDoc 410) */ .plist-fits{display:flex;gap:7px;align-items:baseline;font-size:12.5px;margin:2px 0 4px;padding:6px 9px;background:#f4f7fb;border:1px solid #e3eaf3;border-radius:8px} .plist-fits__label{color:var(--accent);font-weight:800;white-space:nowrap;flex:none} .plist-fits__vals{color:var(--dark);font-weight:600} .plist-meta{display:flex;flex-direction:column;gap:5px;margin-top:8px} .plist-line{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)} .plist-line svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8} .plist-line--stock{color:#16a34a;font-weight:700} .plist-line--stock svg{stroke:#16a34a} .plist-line b{color:var(--dark);font-weight:700} /* --- дясна колона: цена + бутони --- */ .product__listbuy{display:none} .catgrid.catgrid--list .product__listbuy{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;padding:18px 22px;border-left:1px solid var(--line);text-align:right} .plist-old{font-size:13px;color:var(--muted)} .plist-old del{text-decoration:line-through} .plist-old .plist-disc{display:inline-block;background:var(--accent-grad);color:#fff;font-size:11px;font-weight:800;padding:2px 6px;border-radius:5px;margin-right:8px;vertical-align:middle} .plist-price{font-size:26px;font-weight:900;color:var(--dark);line-height:1.05} .plist-price small{font-size:14px;font-weight:700;color:var(--muted)} .plist-club{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#9a6b00;font-weight:700;margin:2px 0 8px} .plist-club svg{width:15px;height:15px;flex:none} .plist-buy{width:100%;justify-content:center;gap:8px;padding:12px 14px;font-size:14px;font-weight:800} .plist-buy svg{width:18px;height:18px;fill:currentColor} .plist-favbtn{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;font-size:13.5px;font-weight:700;color:var(--dark);background:#fff;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;transition:border-color .18s,color .18s} .plist-favbtn:hover{border-color:var(--accent);color:var(--accent)} .plist-favbtn svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8} @media(max-width:820px){ .catgrid.catgrid--list .product{grid-template-columns:150px 1fr;grid-template-rows:auto auto} .catgrid.catgrid--list .product__img{grid-row:1/3} .catgrid.catgrid--list .product__listbuy{border-left:none;border-top:1px solid var(--line);align-items:stretch;flex-direction:column} .plist-old,.plist-price,.plist-club{text-align:left;align-self:flex-start} } /* пагинация */ .catpages{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:42px} .catpages a,.catpages span{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:10px;font-weight:700;font-size:14px;color:var(--ink);background:#fff;transition:.2s;padding:0 12px} .catpages a:hover{border-color:var(--accent);color:var(--accent)} .catpages .is-active{background:var(--accent-grad);color:#fff;border-color:transparent} .catpages .catpages__dots{border:none;background:none} /* ---------- адаптив ---------- */ @media(max-width:1080px){ .cathero__product{width:48%;opacity:.85} .catgrid{grid-template-columns:repeat(3,1fr)} } @media(max-width:768px){ /* на телефон снимката омекотяваме и сваляме под текста, за да остане четим */ .cathero__product{width:100%;opacity:.28; background-position:center bottom; -webkit-mask-image:linear-gradient(0deg,#000 0,transparent 70%); mask-image:linear-gradient(0deg,#000 0,transparent 70%)} .cathero__content{max-width:none} } @media(max-width:900px){ .catlayout{grid-template-columns:1fr} .filters{position:static} .catgrid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .catgrid{grid-template-columns:1fr 1fr;gap:12px} .catbar{flex-direction:column;align-items:flex-start} .cathero__usps{gap:18px 24px} } /* reduced motion */ @media(prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none} *{transition:none!important;scroll-behavior:auto!important} } /* =================================================================== ПРОДУКТОВА СТРАНИЦА (PDP) =================================================================== */ /* Пътечката — една и съща навсякъде (Мариян, 05.11.2026): като на категорията (.cathero--light .cathero__crumbs) — светлата лента, 13px, „Начало" с къщичката, текущата в получер. .pdp-crumbs--over: каре отдолу се качва 22px върху лентата (страницата за поколение). Старият вид: ~/tools/backup-sauto-crumbs-2026-11-05. */ .pdp-crumbs{background:linear-gradient(100deg,#fff 0%,#fafbf8 45%,#f0f3ec 100%);border-bottom:1px solid #e3e7df;padding:14px 0} .pdp-crumbs--over{padding-bottom:38px} .pdp-crumbs--over + *{position:relative;margin-top:-22px} .pdp-crumbs__nav{display:flex;align-items:center;gap:6px;font-size:13px;line-height:20px;color:#8a939a} .pdp-crumbs__nav a{color:#4a545c;transition:color .2s;display:inline-flex;align-items:center;gap:4px} .pdp-crumbs__nav a:hover{color:var(--accent)} .pdp-crumbs__nav svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;opacity:.6;flex:none} .pdp-crumbs__nav span{color:#13222e;font-weight:700} /* Layout */ .pdp{padding:30px 0 60px} .pdp__grid{display:grid;grid-template-columns:0.9fr 1fr;gap:48px;align-items:start} /* ------- Галерия ------- */ .pdp__gallery{} .pdp__main-wrap{display:block;position:relative} .pdp__main-img{border-radius:14px;overflow:hidden;background:#fff;aspect-ratio:1/0.92;display:flex;align-items:center;justify-content:center;padding:28px} .pdp__main-img img{width:100%;height:100%;object-fit:contain;transition:opacity .25s} /* Thumbnails ред със стрелки отстрани */ .pdp__thumbs-row{display:flex;align-items:center;gap:10px;margin-top:14px} .pdp__thumbs{display:flex;gap:10px;flex:1;overflow:hidden} .pdp__thumb{width:90px;height:90px;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;padding:8px;cursor:pointer;transition:border-color .2s;flex:none} .pdp__thumb img{width:100%;height:100%;object-fit:contain} .pdp__thumb.is-active{border-color:var(--accent)} .pdp__thumb:hover{border-color:var(--accent)} .pdp__nav-btn{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:#fff;font-size:22px;line-height:1;color:var(--ink-2);cursor:pointer;display:grid;place-items:center;transition:.2s;flex:none} .pdp__nav-btn:hover{border-color:var(--accent);color:var(--accent)} /* ------- Информация ------- */ .pdp__info{display:flex;flex-direction:column;gap:0} .pdp__badge{display:inline-block;background:var(--accent-grad);color:#fff;font-size:13px;font-weight:800;padding:5px 14px;border-radius:7px;margin-bottom:16px;align-self:flex-start} .pdp__badge--img{position:absolute;top:16px;left:16px;z-index:2;margin:0;font-size:15px;font-weight:900;padding:6px 16px;border-radius:8px} .pdp__title{font-size:26px;font-weight:900;line-height:1.18;color:var(--dark);text-transform:uppercase;margin-bottom:8px} .pdp__code{font-size:13px;color:var(--muted);margin-bottom:18px} .pdp__code strong{color:var(--ink);font-weight:600} /* Наличност + таймер */ .pdp__status-row{display:flex;align-items:center;gap:0;flex-wrap:nowrap;padding:0;margin-bottom:0} .pdp__stock{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;padding-right:28px} .pdp__stock svg{width:18px;height:18px;flex:none} .pdp__stock--in{color:#16a34a} .pdp__stock--out{color:var(--accent)} .pdp__timer{display:flex;flex-direction:column;gap:6px;padding:0 28px;border-left:1px solid var(--line);border-right:1px solid var(--line)} .pdp__timer-label{font-size:12px;color:var(--ink-2);font-weight:600} .pdp__countdown{display:flex;gap:10px;align-items:flex-start} .pdp__cd-unit{display:flex;flex-direction:column;align-items:center;min-width:32px} .pdp__cd-num{font-size:24px;font-weight:900;color:var(--accent);line-height:1} .pdp__cd-lbl{font-size:9px;color:var(--muted);font-weight:700;letter-spacing:.5px;margin-top:3px} .pdp__validity{font-size:12px;color:var(--ink-2);line-height:1.5;padding-left:28px} .pdp__validity strong{color:var(--ink);display:block;font-weight:600} .pdp__divider{border:none;border-top:1px solid var(--line);margin:18px 0} /* Варианти */ .pdp__variants{margin-bottom:16px} .pdp__variants-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:8px} .pdp__variants-label strong{color:var(--dark)} .pdp__variant-opts{display:flex;gap:8px;flex-wrap:wrap} .pdp__vbtn{padding:7px 14px;border:1.5px solid var(--line);border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);background:#fff;cursor:pointer;transition:.2s} .pdp__vbtn:hover{border-color:var(--accent);color:var(--accent)} .pdp__vbtn.is-active{border-color:var(--accent);background:var(--accent-grad);color:#fff} /* Характеристики + USP */ .pdp__mid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:16px} .pdp__specs{list-style:none;display:flex;flex-direction:column;gap:8px} .pdp__specs li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink)} .pdp__specs li svg{width:16px;height:16px;flex:none;color:var(--accent)} .pdp__specs li em{font-style:normal;color:var(--muted);font-weight:600;margin-right:2px} .pdp__usps{list-style:none;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line);padding-left:22px} .pdp__usps li{display:flex;align-items:flex-start;gap:12px} .pdp__usps li svg{width:26px;height:26px;flex:none;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.7;margin-top:6px} .pdp__usps li strong{display:block;font-size:14px;font-weight:700;color:var(--dark)} .pdp__usps li span{font-size:12px;color:var(--muted);float:left;margin:0} /* Цена */ .pdp__pricing{margin-bottom:18px} .pdp__old-price{font-size:14px;color:var(--muted);text-decoration:line-through;display:block;margin-bottom:4px} .pdp__price-row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .pdp__price{font-size:38px;font-weight:900;color:var(--accent);line-height:1} .pdp__price em{font-style:normal;font-size:22px;font-weight:900} .pdp__price-eur{font-size:18px;font-weight:600;color:var(--muted)} .pdp__save{font-size:13px;font-weight:700;color:#16a34a;background:#dcfce7;padding:4px 14px;border-radius:20px;align-self:center;white-space:nowrap} /* Купи */ .pdp__buy-row{display:flex;align-items:stretch;gap:12px;margin-bottom:16px;height:52px} .pdp__qty{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;overflow:hidden} .pdp__qty-btn{width:40px;font-size:22px;font-weight:300;color:var(--ink);background:#fff;cursor:pointer;display:grid;place-items:center;transition:.2s;border:none} .pdp__qty-btn:hover{background:#f3f3f5;color:var(--accent)} .pdp__qty-val{width:48px;border:none;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-size:16px;font-weight:700;color:var(--dark);-moz-appearance:textfield} .pdp__qty-val::-webkit-inner-spin-button{-webkit-appearance:none} .pdp__add{flex:1;font-size:16px;font-weight:800;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;gap:10px} .pdp__add svg{width:20px;height:20px} .pdp__fav-btn{width:52px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);cursor:pointer;display:grid;place-items:center;transition:.2s;flex:none} .pdp__fav-btn:hover{border-color:var(--accent);color:var(--accent)} .pdp__fav-btn svg{width:22px;height:22px} /* Действия */ .pdp__actions{display:flex;gap:10px;flex-wrap:wrap} .pdp__act-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1.5px solid var(--line);border-radius:9px;font-size:13px;font-weight:600;color:var(--ink-2);background:#fff;cursor:pointer;transition:.2s;white-space:nowrap} .pdp__act-btn:hover{border-color:var(--accent);color:var(--accent)} .pdp__act-btn svg{width:16px;height:16px;flex:none} .pdp__act-btn--phone{border-color:var(--accent);color:var(--accent)} .pdp__act-btn--phone:hover{background:var(--accent-grad);color:#fff} /* ------- Табове ------- */ .pdp__tabs-wrap{margin-top:40px} .pdp__tabs-layout{display:grid;grid-template-columns:0.9fr 1fr;gap:48px;align-items:start} .pdp__tabs-main{} .pdp__tabs{display:flex;border-bottom:2px solid var(--line);gap:0;overflow:visible;flex-wrap:wrap} .pdp__tab{padding:12px 20px;font-size:13px;font-weight:700;color:var(--muted);border:none;border-bottom:3px solid transparent;margin-bottom:-2px;cursor:pointer;background:none;white-space:nowrap;transition:.2s} .pdp__tab:hover{color:var(--dark)} .pdp__tab.is-active{color:#fff;background:var(--accent-grad);border-bottom-color:transparent;border-radius:6px 6px 0 0} .pdp__tab-content{padding:24px 0} .pdp__panel{display:none} .pdp__panel.is-active{display:block} .pdp__panel p{font-size:14px;line-height:1.7;color:var(--ink);margin-bottom:12px} /* Таблица характеристики */ .pdp__specs-table{width:100%;border-collapse:collapse;font-size:14px} .pdp__specs-table td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink)} .pdp__specs-table td:first-child{color:var(--muted);font-weight:600;width:45%;background:#fafafa} .pdp__specs-table--full{max-width:600px} .pdp__specs-table tr:last-child td{border-bottom:none} /* Aside таблица вдясно от табовете */ .pdp__tabs-aside{align-self:start} .pdp__tabs-aside .pdp__specs-table td{padding:10px 14px} .pdp__tabs-aside .pdp__specs-table td:first-child{background:#fafafa} /* Meta row (код + рейтинг + продажби) */ .pdp__meta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)} .pdp__code{font-size:13px;color:var(--muted);margin:0} .pdp__rating{display:inline-flex;align-items:center;gap:5px} .pdp__stars{color:#f59e0b;font-size:15px;letter-spacing:1px;line-height:1} .pdp__star-half{opacity:.5} .pdp__rating-val{font-weight:700;font-size:14px;color:var(--dark)} .pdp__rating-cnt{font-size:13px;color:var(--muted)} .pdp__sold{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)} .pdp__sold svg{width:15px;height:15px;fill:var(--muted)} /* Sticky buy bar */ .stickybar{position:fixed;bottom:0;left:0;right:0;background:#fff;box-shadow:0 -4px 24px rgba(0,0,0,.12);z-index:200;transform:translateY(100%);transition:transform .3s ease} .stickybar.is-visible{transform:translateY(0)} .stickybar__inner{display:flex;align-items:center;gap:20px;padding:12px 0;flex-wrap:nowrap} .stickybar__info{display:flex;align-items:center;gap:12px;flex:1;min-width:0} .stickybar__img{width:52px;height:52px;object-fit:contain;border-radius:8px;border:1px solid var(--line);flex:none} .stickybar__name{font-size:14px;font-weight:700;color:var(--dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .stickybar__specs{font-size:12px;color:var(--muted);margin-top:2px} .stickybar__price-wrap{display:flex;flex-direction:column;align-items:flex-end;flex:none} .stickybar__price{font-size:22px;font-weight:900;color:var(--accent);line-height:1} .stickybar__save{font-size:12px;color:#16a34a;font-weight:600;white-space:nowrap} .stickybar__qty{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;height:46px;flex:none} .stickybar__buy{height:46px;font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px;flex:none;white-space:nowrap} /* Отдясно долу стои плаващото AI балонче (.aiw, ~60px) — пазим му място, за да не похлупва бутона „Добави в количката" на десктоп. */ @media (min-width:768px){ .stickybar__inner{ padding-right:92px } } .stickybar__buy svg{width:18px;height:18px} /* Купуват заедно */ .bundle{background:#f7f8fa;padding:40px 0 50px} .bundle__title{font-size:18px;font-weight:900;color:var(--dark);margin-bottom:20px;letter-spacing:.3px;text-transform:uppercase} .bundle__wrap{display:flex;align-items:stretch;gap:20px;flex-wrap:wrap} .bundle__items{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:1} .bundle__item{display:flex;flex-direction:column;align-items:flex-start;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;position:relative;transition:border-color .2s} .bundle__item--main{border-color:var(--accent)} .bundle__item:has(.bundle-check:checked){border-color:var(--accent)} .bundle__check-wrap{position:relative;display:block;cursor:pointer} .bundle__check-wrap input[type=checkbox]{position:absolute;opacity:0;width:0;height:0} .bundle__checkmark{width:24px;height:24px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;flex:none;transition:.2s} .bundle__check-wrap input:checked ~ .bundle__checkmark{background:var(--accent-grad)} .bundle__check-wrap input:disabled ~ .bundle__checkmark{background:var(--accent-grad)} .bundle__img-wrap{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:8px} .bundle__img-wrap img{width:100%;height:100%;object-fit:contain} .bundle__item-info{display:flex;flex-direction:column;gap:4px;width:100%} .bundle__item-name{font-size:12px;font-weight:600;color:var(--dark);line-height:1.35} .bundle__item-price{font-size:15px;font-weight:800;color:var(--accent)} .bundle__summary{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:200px;text-align:center;flex:none} .bundle__summary-label{font-size:12px;color:var(--muted);font-weight:600;margin:0;text-transform:uppercase;letter-spacing:.3px} .bundle__summary-price{font-size:28px;font-weight:900;color:var(--dark);margin:0;line-height:1} .bundle__add-all{width:100%;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px} .bundle__add-all svg{width:17px;height:17px} /* Ревюта */ .pdp__reviews{display:flex;flex-direction:column;gap:20px;max-width:700px} .pdp__review{padding:18px;border:1px solid var(--line);border-radius:12px;background:#fff} .pdp__review-head{display:flex;align-items:center;gap:12px;margin-bottom:8px} .pdp__review-name{font-weight:700;font-size:14px;color:var(--dark)} .pdp__review-stars{color:#f59e0b;font-size:15px;letter-spacing:1px} .pdp__review-date{font-size:12px;color:var(--muted);margin-left:auto} .pdp__review p{font-size:13.5px;color:var(--ink);line-height:1.6} /* ======== КАТЕГОРИЙНА СТРАНИЦА — секция "Избери марка" ======== */ .brands-section{padding:0 0 60px} .brands-section__head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:20px} /* „Избери марка" на категорията — като заглавията на началната (home.css, .h-sec__title): зелената наклонена черта и втората дума в зелено (Мариян, 06.11.2026) */ .brands-section__title{position:relative;margin:0;padding-left:26px;font-size:clamp(24px,2.4vw,32px);font-weight:900;letter-spacing:-.6px;line-height:1.1;color:#0f1b26} .brands-section__title::before{content:'';position:absolute;left:4px;top:2px;bottom:-2px;width:7px;border-radius:2px;background:linear-gradient(180deg,#6fb31a,#3f6e00);transform:skewX(-14deg)} .brands-section__title span{color:var(--accent)} @media (max-width:767px){.brands-section__title{padding-left:20px;font-size:22px}} .alpha-filter{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:24px;overflow-x:auto;scrollbar-width:none} .alpha-filter::-webkit-scrollbar{display:none} .alpha-filter__btn{flex:1 1 0;min-width:0;height:38px;padding:0 4px;border:1.5px solid var(--line);border-radius:8px;background:#fff;font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;font-family:inherit;transition:.18s;white-space:nowrap} .alpha-filter__btn:hover{border-color:var(--accent);color:var(--accent)} .alpha-filter__btn.is-active{background:var(--accent);border-color:var(--accent);color:#fff} /* Търсачката на марките и подредбите („Най-популярни" / „A-Z") — началната (home.blade.php, #brands) и категорията (category.blade.php, над буквите). Изнесено от home.css на 04.11.2026. */ .h-brands__bar { display: flex; align-items: center; gap: 14px 22px; margin-bottom: 20px; } .h-brands__search { flex: 0 1 400px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px; background: #fff; border: 1.5px solid #cfe6b2; border-radius: 12px; cursor: text; box-shadow: 0 8px 18px -14px rgba(79,135,1,.6); transition: border-color .15s, box-shadow .15s; } .h-brands__search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,135,1,.12); } .h-brands__search svg { width: 20px; height: 20px; flex: none; color: #1c2228; } .h-brands__search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 14.5px; color: var(--dark); } .h-brands__search input::placeholder { color: #8a9296; } .h-brands__modes { display: flex; gap: 10px; min-width: 0; } .h-brands__mode { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 16px; flex: none; border: 1px solid #e6eaec; border-radius: 12px; background: #fff; color: var(--dark); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; box-shadow: 0 8px 16px -12px rgba(15,27,38,.3); transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; } .h-brands__mode svg { width: 19px; height: 19px; flex: none; } .h-brands__mode b { font-size: 14px; font-weight: 900; letter-spacing: -.4px; } .h-brands__mode:hover { border-color: #b5dc86; } .h-brands__mode.is-active { background: linear-gradient(135deg, #5a9a08 0%, #3f6e00 100%); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -10px rgba(63,110,0,.75); } @media (max-width:1023px){ .h-brands__bar { flex-wrap: wrap; } .h-brands__search { flex: 1 1 100%; } .h-brands__modes { max-width: 100%; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 10px; margin: -2px -2px -10px; } .h-brands__modes::-webkit-scrollbar { display: none; } } .brands-none{margin:0;padding:18px;border-radius:14px;background:#f6f8f5;color:var(--muted);text-align:center} /* На телефон бутоните делят реда по равно, без плъзгане: на категорията и при моделите ([data-tiles]) са два, на началната — три, с по-къси надписи (.h-brands__short: „Всички", „Популярни", „A-Z Азбучно"), за да се виждат и трите (Мариян, 06.11.2026). */ .h-brands__short{ display:none } @media (max-width:767px){ .h-brands__modes{ flex:1 1 100%; overflow:visible; padding:0; margin:0; gap:8px } .h-brands__mode{ flex:1 1 0; min-width:0; justify-content:center; gap:6px; padding:0 8px; font-size:13px } .h-brands__mode svg{ width:17px; height:17px } .h-brands__full{ display:none } .h-brands__short{ display:inline } /* на началната — квадрати с иконката отгоре, като плочките с марките под тях (Мариян, 06.11.2026) */ #brands .h-brands__mode{ flex-direction:column; gap:8px; height:auto; aspect-ratio:1; padding:6px 4px; border-radius:14px } #brands .h-brands__mode svg{ width:28px; height:28px } #brands .h-brands__mode b{ font-size:20px; line-height:28px } } [data-q-hidden]{display:none!important} /* буквите (main.js, 9ж) и марка/модел без стока — изпаднаха при преработката на .catlinks на 04.11.2026 и буквите спряха да филтрират (върнати 05.11.2026) */ [data-letter-hidden]{display:none!important} .brand-card--off,.hmodel-card--off{opacity:.42;filter:grayscale(1);pointer-events:none;cursor:default} /* Рамката, сянката и посочването — като плочките с марки на началната (home.css, .h-brand), 04.11.2026 */ .brands-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px} .brand-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:0;padding:8px 10px 10px;background:#fff;border:1px solid #edf0ee;border-radius:16px;cursor:pointer;text-decoration:none; box-shadow:0 8px 20px -14px rgba(15,27,38,.3);transition:background-color .18s,border-color .18s,box-shadow .18s,transform .18s} .brand-card:hover{background:#f3faea;border-color:#b5dc86;box-shadow:0 14px 26px -14px rgba(79,135,1,.55);transform:translateY(-2px)} .brand-card .bp-tile__logowrap{width:76px;height:62px;overflow:visible;display:flex;align-items:center;justify-content:center;margin-bottom:6px;flex:none;background:none;border-radius:0} .brand-card .bp-logo{transform:scale(.88);transition:transform .18s} .brand-card:hover .bp-logo{transform:scale(.98)} .brand-card__label{font-size:11px;color:var(--muted);text-align:center;line-height:1.3;margin-bottom:2px} .brand-card__name{font-size:14px;font-weight:800;color:var(--dark);text-align:center;transition:color .18s} .brand-card:hover .brand-card__name{color:var(--accent)} @media (max-width:900px){.brands-grid{grid-template-columns:repeat(4,1fr)}} @media (max-width:560px){.brands-grid{grid-template-columns:repeat(3,1fr)}} /* ======== CAR FINDER (дизайн от визията, адаптиран) ======== */ /* ======== CAR FINDER ======== */ .carfinder { --garage-count: 3; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 0; margin: -22px auto 40px; position: relative; z-index: 10; box-shadow: 0 8px 40px rgba(0,0,0,.10); overflow: hidden; } /* ---- Горна секция: Моят гараж ---- */ .carfinder__garage { padding: 20px 24px 20px; border-bottom: 1px solid var(--line); } .carfinder__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .carfinder__head-left { display: flex; align-items: center; gap: 8px; } .carfinder__head svg { width: 22px; height: 22px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; } .carfinder__title { font-size: 16px; font-weight: 800; color: var(--dark); margin: 0; } .carfinder__manage { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 4px; white-space: nowrap; } .carfinder__manage:hover { opacity: .8; } /* Гараж карти — хоризонтален layout */ .garage-cards { display: flex; gap: 12px; } .garage-card { flex: 1 1 0; min-width: 0; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; position: relative; transition: border-color .18s, box-shadow .18s; background: #fff; text-decoration: none; display: flex; align-items: center; gap: 12px; } .garage-card:hover { border-color: var(--accent); box-shadow: 0 2px 12px rgba(0,0,0,.07); } .garage-card__img { width: 90px; height: 60px; object-fit: contain; flex: none; border-radius: 6px; } .garage-card__info { min-width: 0; flex: 1; } .garage-card__model { font-size: 13px; font-weight: 700; color: var(--dark); margin-bottom: 3px; } .garage-card__spec { font-size: 11px; color: var(--muted); line-height: 1.5; } .garage-card__badge { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 700; color: #16a34a; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 20px; padding: 2px 8px; } /* Добави автомобил */ .garage-card--add { border-style: dashed; justify-content: flex-start; gap: 14px; color: var(--muted); min-height: auto; flex-direction: row; } .garage-card--add:hover { border-color: var(--accent); color: var(--accent); } .garage-card--add__plus { width: 36px; height: 36px; border-radius: 50%; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; flex: none; color: var(--accent); } .garage-card--add__text { min-width: 0; } .garage-card--add__label { font-size: 13px; font-weight: 700; color: var(--dark); } .garage-card--add__sub { font-size: 11px; color: var(--muted); margin-top: 2px; } /* Разгъване на всички коли от гаража (скрити след първите 3) */ .garage-cards { flex-wrap: wrap; } .garage-card { flex: 1 1 240px; } /* мин. ширина → пренасят се на нов ред */ .garage-card--hidden { display: none; } .garage-cards.is-expanded .garage-card--hidden { display: flex; } .garage-cards.is-expanded .garage-card--more { display: none; } /* Картата „Виж всички +N" — в стила на „Добави автомобил", но с брояч-бадж */ .garage-card--more { border-style: dashed; justify-content: flex-start; gap: 12px; color: var(--muted); } .garage-card--more:hover { border-color: var(--accent); color: var(--accent); } .garage-card--more__badge { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #ecf4e7; color: var(--accent); font-size: 14px; font-weight: 800; } /* ---- Долна секция: Търси по автомобил ---- */ .carfinder__search { padding: 16px 24px 22px; } /* Ред 1: заглавие + линия + изчисти */ .carfinder__search-top { display: flex; align-items: center; margin-bottom: 14px; } .carfinder__search-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; } .carfinder__search-label svg { width: 18px; height: 18px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 2; } .carfinder__search-line { flex: 1; height: 1px; background: var(--accent); margin: 0 16px; opacity: .35; } .carfinder__clear { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; transition: color .2s; } .carfinder__clear:hover { color: var(--accent); } .carfinder__clear svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; } /* Ред 2: полета + бутон */ .carfinder__search-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; } /* Вариант без поле "Марка" (страница на фиксирана марка) — 4 равни селекта, разпънати на цялата ширина на карето (без дупка вдясно). */ .carfinder__search-row--nomake { grid-template-columns: repeat(4, 1fr); } /* Вариант без поле "Модел" (фиксирани марка+модел) — 3 равни селекта. */ .carfinder__search-row--nomodel { grid-template-columns: repeat(3, 1fr); } .carfinder__field label { display: block; font-size: 13px; font-weight: 600; color: var(--dark); margin-bottom: 7px; } .carfinder__field-inner { position: relative; display: flex; align-items: center; } .carfinder__field-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.7; pointer-events: none; z-index: 1; } .carfinder__select { width: 100%; height: 48px; border: 1.5px solid var(--line); border-radius: 10px; padding: 0 34px 0 38px; font-size: 14px; font-family: inherit; color: var(--muted); background: #f8f9fb url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; -webkit-appearance: none; appearance: none; cursor: pointer; transition: border-color .2s, background-color .2s; } .carfinder__select:focus { outline: none; border-color: var(--accent); background-color: #fff; } .carfinder__select:not(:disabled) { color: var(--ink); } .carfinder__select:disabled { cursor: not-allowed; } .carfinder__btn { height: 48px; padding: 0 26px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: opacity .2s; } .carfinder__btn:hover { opacity: .88; } .carfinder__btn svg { width: 17px; height: 17px; } /* ---- Тесен вариант: странична лента (ръководствата в блога) ---- Същото каре, но в колона от 330px: полетата един под друг, картите на гаража също, без изнесената сянка и отрицателния отстъп на хедъра. */ .carfinder--compact { margin: 0; box-shadow: none; border-radius: 16px; } .carfinder--compact .carfinder__garage { padding: 18px 18px 16px; } .carfinder--compact .carfinder__head { margin-bottom: 12px; } .carfinder--compact .carfinder__title { font-size: 14px; } .carfinder--compact .carfinder__head svg { width: 18px; height: 18px; } .carfinder--compact .carfinder__manage { font-size: 12px; } .carfinder--compact .garage-cards { flex-direction: column; gap: 8px; } .carfinder--compact .garage-card { flex: none; width: 100%; padding: 9px 11px; gap: 10px; } .carfinder--compact .garage-card__img { width: 40px; height: 30px; } .carfinder--compact .garage-card__model { font-size: 12.5px; } .carfinder--compact .garage-card__spec { font-size: 11px; } .carfinder--compact .garage-card--add__plus { width: 30px; height: 30px; font-size: 18px; } .carfinder--compact .carfinder__search { padding: 16px 18px 18px; } .carfinder--compact .carfinder__search-top { margin-bottom: 4px; } .carfinder--compact .carfinder__search-label { font-size: 12.5px; letter-spacing: .3px; white-space: normal; } .carfinder--compact .carfinder__search-label svg { width: 16px; height: 16px; flex: none; } .carfinder--compact .carfinder__search-line { display: none; } .carfinder--compact .carfinder__clear { font-size: 11.5px; align-self: flex-start; margin-left: 8px; } .carfinder--compact .carfinder__lead { margin: 0 0 12px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .carfinder--compact .carfinder__search-row { grid-template-columns: 1fr; gap: 9px; } .carfinder--compact .carfinder__field label { font-size: 11px; margin-bottom: 4px; } .carfinder--compact .carfinder__select { height: 42px; font-size: 13px; padding: 0 30px 0 34px; } .carfinder--compact .carfinder__field-icon { left: 10px; width: 16px; height: 16px; } /* Списъкът с модификации е тесен → иконата и кодът минават на един ред с текста. */ .carfinder--compact .fn-result__item a { grid-template-columns: auto 1fr; padding: 10px 11px; gap: 10px; } .carfinder--compact .fn-result__code { grid-column: 2; grid-row: auto; justify-self: start; } /* ======== КАТЕГОРИЯ + МАРКА: "за Honda" ред под заглавието ======== */ .cathero__title-for { display: block; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; color: inherit; margin-top: 6px; line-height: 1.15; } /* ======== МОДЕЛИ на марката (грид с карти) ======== */ .hmodels { padding: 0 0 60px; } /* ---- Популярни модели ---- */ .hmodels__pop { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 24px 24px; margin-bottom: 36px; box-shadow: 0 4px 24px rgba(0,0,0,.05); } .hmodels__pop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; } .hmodels__pop-head svg { width: 22px; height: 22px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; } .hmodels__pop-head h2 { font-size: 16px; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: .4px; margin: 0; } .hmodels__pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* ---- Всички модели ---- */ .hmodels__all-title { font-size: 20px; font-weight: 800; color: var(--dark); text-align: center; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 20px; } /* Карта на модел (споделя се между двете секции) */ .hmodel-card { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; text-decoration: none; transition: border-color .18s, box-shadow .18s; min-width: 0; } .hmodel-card:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(0,0,0,.08); } .hmodel-card__img { width: 84px; height: 56px; object-fit: contain; flex: none; border-radius: 6px; } /* Липсваща снимка → неутрална икона на кола */ .hmodel-card__img--none { display: flex; align-items: center; justify-content: center; background: #f4f5f8; color: #c3c8d2; } .hmodel-card__img--none svg { width: 40px; height: 40px; } .hmodel-card__info { min-width: 0; display: flex; flex-direction: column; } .hmodel-card__name { display: block; font-size: 14px; font-weight: 800; color: var(--dark); line-height: 1.25; transition: color .18s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hmodel-card:hover .hmodel-card__name { color: var(--accent); } .hmodel-card__label { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; } .hmodel-card__years { color: var(--muted); opacity: .8; } .hmodel-card__years::before { content: " · "; } /* Грид всички модели */ .hmodels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* Responsive грид за модели */ @media (max-width: 980px) { .hmodels__pop-grid { grid-template-columns: repeat(3, 1fr); } .hmodels-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .hmodels__pop-grid { grid-template-columns: repeat(2, 1fr); } .hmodels-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .hmodels__pop-grid { grid-template-columns: 1fr; } .hmodels-grid { grid-template-columns: 1fr; } } /* ── Моделите — по новата визия (04.11.2026): плочките като марките (рамка, сянка и зелено посочване от началната), каре „Популярни модели" със сянката на търсачката, заглавието на „Всички модели" — като „Избери марка" (вляво, не с главни). ── */ .hmodels__pop { border: 1px solid #e3eadc; border-radius: 20px; padding: 20px 22px 22px; background: linear-gradient(180deg, #fff 0%, #f8fbf4 100%); box-shadow: 0 1px 2px rgba(15,27,38,.05), 0 20px 44px -28px rgba(15,27,38,.38); } .hmodels__pop-head h2 { text-transform: none; letter-spacing: 0; font-size: 18px; } .hmodels__all-title { text-align: left; text-transform: none; letter-spacing: 0; font-size: 22px; margin-bottom: 18px; } .hmodel-card { border: 1px solid #edf0ee; border-radius: 16px; box-shadow: 0 8px 20px -14px rgba(15,27,38,.3); transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s; } .hmodel-card:hover { background: #f3faea; border-color: #b5dc86; box-shadow: 0 14px 26px -14px rgba(79,135,1,.55); transform: translateY(-2px); } .hmodels-grid { gap: 14px; } /* ======== МОДИФИКАЦИИ (акордеон: поколение → двигатели) ======== */ .mods { padding: 0 0 60px; } .mods__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; } .mods__title { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--dark); margin: 0 0 4px; position: relative; padding-bottom: 10px; } .mods__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 3px; background: var(--accent); border-radius: 2px; } .mods__sub { font-size: 14px; color: var(--muted); margin: 0; } .mods__list { display: flex; flex-direction: column; gap: 12px; } /* Карта модификация */ .mod { background: #fff; border: 1px solid #edf0ee; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 20px -14px rgba(15,27,38,.3); /* като плочките с марки (04.11.2026) */ transition: border-color .18s, box-shadow .18s; } .mod:hover { border-color: #b5dc86; box-shadow: 0 12px 24px -14px rgba(79,135,1,.5); } .mod.is-open { border-color: #b5dc86; box-shadow: 0 16px 32px -18px rgba(79,135,1,.5); } /* Шапка на модификацията (clickable) */ .mod__head { display: grid; grid-template-columns: 96px 1fr auto auto; align-items: center; gap: 18px; width: 100%; padding: 14px 18px; background: none; border: none; font-family: inherit; text-align: left; cursor: pointer; } .mod__img { width: 96px; height: 60px; object-fit: contain; flex: none; } /* Липсваща снимка → неутрална икона на кола */ .mod__img--none { display: flex; align-items: center; justify-content: center; background: #f4f5f8; color: #c3c8d2; border-radius: 8px; } .mod__img--none svg { width: 44px; height: 44px; } .mod__info { min-width: 0; } .mod__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 16px; font-weight: 800; color: var(--dark); line-height: 1.2; } /* Купето — зелен етикет с колата (Мариян, 05.11.2026: „важно е тук"). */ .mod__body-type { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #eef6e4; font-size: 12.5px; font-weight: 800; color: #3f6e00; } .mod__body-type svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* „Виж N двигателя ⌄" — вдясно, вместо папката; отворено — „Скрий ⌃". При посочване на реда светва. */ .mod__cta { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px 8px 15px; border: 1px solid #cfe3b6; border-radius: 999px; background: #f6faf1; font-size: 13px; font-weight: 700; color: #3f6e00; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; } .mod__cta b { font-weight: 900; } .mod__cta svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; } .mod__cta-b { display: none; } .mod.is-open .mod__cta-a { display: none; } .mod.is-open .mod__cta-b { display: inline; } .mod.is-open .mod__cta svg { transform: rotate(180deg); } .mod__head:hover .mod__cta, .mod__head:focus-visible .mod__cta { border-color: var(--accent); background: var(--accent-grad, var(--accent)); color: #fff; box-shadow: 0 6px 14px -6px rgba(79,135,1,.6); } .mod.is-open .mod__cta { border-color: #dde5d3; background: #fff; color: #5f6b56; } .mod--off .mod__cta { border-color: #e1e4e8; background: #f4f5f7; color: var(--muted); } /* Подсказката до заглавието на списъка */ .mods__hint { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; padding: 7px 13px; border: 1px dashed #cfe3b6; border-radius: 999px; background: #f8fbf4; font-size: 12.5px; font-weight: 600; color: #4b5a40; } .mods__hint svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mod__badge { font-size: 10px; font-weight: 800; color: var(--accent); background: #ecf4e7; border: 1px solid #cadfbb; border-radius: 20px; padding: 2px 9px; text-transform: none; letter-spacing: 0; } .mod__years { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); white-space: nowrap; } .mod__years svg { width: 18px; height: 18px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; } .mod__caret { width: 22px; height: 22px; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 2.2; justify-self: end; transition: color .18s; } /* Папка: затворена по подразбиране, отворена при .is-open. */ .mod__folder .mod__folder-open { display: none; } .mod.is-open .mod__caret { color: var(--accent); } .mod.is-open .mod__folder .mod__folder-closed { display: none; } .mod.is-open .mod__folder .mod__folder-open { display: block; } /* Тяло — двигатели */ .mod__engines { display: none; border-top: 1px solid var(--line); padding: 4px 18px 8px; } .mod.is-open .mod__engines { display: block; } .mod__engine-head, .mod__engine { display: grid; /* Последната колона е „накъде води редът": стрелка при наличност, надпис при липса. Затова е широка колкото етикет, а съдържанието ѝ е дясно подравнено. */ grid-template-columns: 1.4fr 1.2fr 1fr 1.2fr 168px; align-items: center; gap: 14px; } .mod__engine-head > :last-child, .mod__engine > :last-child { justify-self: end; } .mod__engine-head { padding: 12px 0 8px; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; } .mod__engine { padding: 12px 0; border-top: 1px solid var(--line); text-decoration: none; font-size: 14px; color: var(--ink); cursor: pointer; transition: background .15s; } .mod__engine:first-of-type { border-top: 1px solid var(--line); } .mod__engine:hover { background: #f7f8f6; } /* Обвивките на редовете 2 и 3 съществуват само за телефона. Тук са display:contents, тоест мощността, годините и кодът попадат право в колоните на таблицата. Първата е клетката „Двигател": името и, ако има, по-точното гориво под него. */ .mod__engine-l1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; } .mod__engine-l2, .mod__engine-l3 { display: contents; } /* Значката с иконката е само за телефон — тук горивото е в заглавието на групата. */ .mod__engine-ic { display: none; } /* Заглавието на група гориво („Бензин 10") — когато в модификацията има повече от едно. */ .mod__fgroup { display: flex; align-items: center; gap: 8px; padding: 22px 0 8px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--dark); } .mod__engine-head + .mod__fgroup { padding-top: 6px; } .mod__fgroup.is-hidden { display: none; } .mod__fgroup-n { padding: 1px 8px; border-radius: 999px; background: var(--bg-soft); font-size: 11px; color: var(--muted); letter-spacing: 0; } /* Лентата с горивата: над таблицата, в реда на колонките. */ .mod__fuelbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 4px; } .mod__fchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #fff; border: 1px solid var(--line); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--dark); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .mod__fchip .mod__fuel-ic { width: 15px; height: 15px; stroke: var(--muted); } .mod__fchip:hover { border-color: #d0dfc6; } .mod__fchip.is-on { border-color: var(--accent); color: var(--accent); background: #f6faf3; } .mod__fchip.is-on .mod__fuel-ic { stroke: var(--accent); } .mod__engine.is-hidden { display: none; } /* Кодовете са отделни елементи заради чиповете на телефона — тук се четат като обикновен текст, значи запетаите се връщат. */ .mod__code { font-style: normal; } .mod__code + .mod__code::before { content: ", "; } .mod__engine-name { font-weight: 700; color: var(--dark); } /* По-точното гориво до името („Бензин/Метан (CNG)") — само когато групата не го казва. */ .mod__engine-fuel { font-size: 12px; color: var(--muted); } .mod__engine-years { font-variant-numeric: tabular-nums; } .mod__fuel-ic { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; } .mod__engine--off .mod__fuel-ic, .mod__engine--none .mod__fuel-ic { stroke: var(--muted); } .mod__kw { font-style: normal; color: var(--muted); } .mod__engine-code { font-weight: 600; color: var(--dark); } .mod__engine .mod__caret { width: 18px; height: 18px; } /* Двигатели без стока. --off: страницата съществува, но е празна витрина (noindex), затова е с data-href, не линк. --none: няма части изобщо → 404, значи и клик няма. И в двата случая сивото казва „има го, но няма какво да купиш". */ .mod__engine--off, .mod__engine--none { color: var(--muted); background: #fafbfc; } .mod__engine--off .mod__engine-name, .mod__engine--off .mod__engine-code, .mod__engine--none .mod__engine-name, .mod__engine--none .mod__engine-code { color: var(--muted); font-weight: 600; } .mod__engine--off .mod__caret { opacity: .45; } .mod__engine--off:hover { background: #f2f4f6; } .mod__engine--none { cursor: default; } .mod__engine--none:hover { background: #fafbfc; } /* Надписът на мястото на стрелката — казва защо редът е мъртъв, без да вика. */ .mod__engine-flag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--muted); white-space: nowrap; } .mod__engine-flag svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; } /* Цяло поколение без нито един двигател със стока — приглушена шапка. */ .mod--off .mod__head { opacity: .62; } .mod--off .mod__img { filter: grayscale(1); } /* ============ ФИЛТЪРЪТ НАД ДВИГАТЕЛИТЕ (.gflt, .gf) ============ Общ за избора на двигател на поколението (partials.generation-pick) и модификациите на модела с много двигатели (partials.mod-list) — изнесен от generation-styles на 05.11.2026. */ /* Филтърът — отделно каре (Мариян, 05.11.2026: „да личи, че филтрира резултатите надолу"): светлозелено, шапка с броя показани и „Изчисти", а всеки ред е превключвател — бутоните в обща бяла писта. При избран филтър рамката светва. */ .gflt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-bottom: 16px; padding: 10px 14px 12px; border: 1px solid #e3ecd9; border-radius: 16px; background: linear-gradient(180deg, #f9fbf6 0%, #f1f7ea 100%); transition: border-color .15s, box-shadow .15s; } .gflt.is-active { border-color: #b5dc86; box-shadow: 0 0 0 3px rgba(143,209,58,.14); } .gflt__top { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; min-height: 28px; padding-bottom: 9px; border-bottom: 1px dashed #d6e3c7; } .gflt__ttl { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: #13222e; white-space: nowrap; } .gflt__ttl i { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-grad, var(--accent)); color: #fff; box-shadow: 0 4px 10px -4px rgba(79,135,1,.6); } .gflt__ttl svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; } .gflt__res { margin-left: auto; font-size: 12.5px; color: #6b757d; white-space: nowrap; } .gflt__res b { font-weight: 800; color: #13222e; } .gflt__reset { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid #d6dccf; border-radius: 999px; background: #fff; font: inherit; font-size: 12px; font-weight: 700; color: #4a545c; cursor: pointer; white-space: nowrap; } .gflt__reset svg { flex: none; width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; } .gflt__reset:hover { border-color: var(--accent); color: var(--accent); } .gflt__reset[hidden] { display: none; } .gflt__grp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .gflt__lbl { min-width: 56px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #5f6b56; } .gflt__seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid #dde5d3; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(19,34,46,.04); } .gf { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; background: transparent; font-size: 13px; font-weight: 700; line-height: 1.1; color: var(--dark); cursor: pointer; transition: border-color .15s, background .15s, color .15s, opacity .15s; } .gf small { font-size: inherit; font-weight: 600; color: var(--muted); } .gf svg { flex: none; width: 14px; height: 14px; } .gf:hover:not(:disabled):not(.is-on) { background: #eef6e4; } .gf.is-on { background: var(--accent-grad, var(--accent)); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(79,135,1,.25); } .gf.is-on small, .gf.is-on svg { color: #fff !important; } .gf:disabled { opacity: .35; cursor: default; } @media (max-width: 560px) { .gflt__ttl-x, .gflt__res-w { display: none; } } /* „Филтрирай · 2 от 4 · Изчисти" — да се събира на телефон */ /* Търсенето (при много двигатели) — в шапката на филтъра, до броя; на телефон — ред под нея. */ .gflt__q { position: relative; flex: 0 1 280px; margin-left: auto; } .gflt__q + .gflt__res { margin-left: 6px; } .gflt__q svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); } .gflt__q input { width: 100%; height: 32px; padding: 0 12px 0 34px; border: 1px solid #dde5d3; border-radius: 999px; font: inherit; font-size: 13px; background: #fff; } .gflt__q input:focus { outline: none; border-color: var(--accent); } /* Цветът на горивото — на плочката и на бутона: бензин зелено, дизел синьо. */ .gf--petrol svg { color: #4f8701; } .gf--diesel svg { color: #2563eb; } .gf--hybrid svg { color: #0d9488; } .gf--electric svg { color: #0891b2; } .gf--other svg { color: #6b717c; } @media (max-width: 860px) { /* Филтрите — всеки ред хоризонтално с плъзгане, търсенето на цял ред. */ .gflt { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; padding: 9px 10px 11px; } /* nowrap — иначе редът се разпъва колкото най-широкия бутон */ .gflt__grp { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -10px; padding-right: 10px; } .gflt__seg { flex: none; flex-wrap: nowrap; } .gflt__lbl { flex: none; min-width: 54px; } .gflt__grp::-webkit-scrollbar { display: none; } .gf { flex: none; } .gflt__top { flex-wrap: wrap; row-gap: 8px; } .gflt__q { order: 9; flex: 1 0 100%; margin-left: 0; } .gflt__q + .gflt__res { margin-left: auto; } } /* Телефон (Мариян, 06.11.2026 — „компактен, стилен, модерен, лесен"): вместо редовете с бутони — две падащи менюта едно до друго („Гориво" / „Обем"): надписът горе вляво в карето, изборът под него, стрелка вдясно; избраното светва в зелено. Менютата строи main.js от бутоните (.gf) и само ги натиска — филтрирането си е на мястото. Отварят стандартния избор на телефона. */ .gflt__sels { display: none; } @media (max-width: 767px) { .gflt { gap: 10px; padding: 10px 10px 12px; } .gflt__top { padding-bottom: 8px; } .gflt__grp { display: none; } .gflt__sels { display: flex; gap: 8px; } .gflt__sel { position: relative; flex: 1 1 0; min-width: 0; } .gflt__sel-lbl { position: absolute; left: 13px; top: 8px; pointer-events: none; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #6b757d; } .gflt__sel select { width: 100%; height: 54px; padding: 21px 34px 6px 13px; border: 1px solid #dde5d3; border-radius: 13px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f8701' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center / 16px no-repeat; -webkit-appearance: none; appearance: none; font: inherit; font-size: 14.5px; font-weight: 800; color: var(--dark); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgba(19,34,46,.05); transition: border-color .15s, background-color .15s, box-shadow .15s; } .gflt__sel select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(143,209,58,.2); } .gflt__sel.is-set select { border-color: #8fd13a; background-color: #f2f9e8; } .gflt__sel.is-set .gflt__sel-lbl { color: var(--accent); } } /* ---- Визията на сайта (Мариян, 05.11.2026) — като „Избери двигател" на поколението: лентата с горивата е превключвател с фунийка, групите — заглавие с цветна иконка, брой и линия, а на компютър двигателите са карти по три на ред (на телефон — mobile.css). Старата таблица: ~/tools/backup-sauto-modlist-2026-11-05. ---- */ .mod__fuelbar { align-items: center; gap: 10px; } .mod__flabel { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #5f6b56; } .mod__flabel i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-grad, var(--accent)); color: #fff; box-shadow: 0 4px 10px -4px rgba(79,135,1,.6); } .mod__flabel svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; } .mod__ftrack { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid #dde5d3; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(19,34,46,.04); } .mod__fuelbar .mod__fchip { height: 30px; padding: 0 13px; border: 1px solid transparent; background: transparent; } .mod__fuelbar .mod__fchip small { font-size: inherit; font-weight: 600; color: var(--muted); } .mod__fuelbar .mod__fchip:hover:not(.is-on) { background: #eef6e4; border-color: transparent; } .mod__fuelbar .mod__fchip.is-on { background: var(--accent-grad, var(--accent)); border-color: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(79,135,1,.25); } .mod__fuelbar .mod__fchip.is-on small, .mod__fuelbar .mod__fchip.is-on .mod__fuel-ic { color: #fff; stroke: #fff; } .mod__fchip--diesel .mod__fuel-ic { stroke: #2563eb; } .mod__fchip--petrol .mod__fuel-ic { stroke: #4f8701; } .mod__fchip--hybrid .mod__fuel-ic, .mod__fchip--electric .mod__fuel-ic { stroke: #0d9488; } .mod__fgroup { gap: 10px; padding: 14px 0 0; font-size: 15.5px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #13222e; } .mod__fgroup::after { content: ""; flex: 1; height: 1px; background: #e3e7df; } .mod__fgroup .mod__fuel-ic { width: 30px; height: 30px; padding: 6px; border-radius: 9px; background: #eef6e4; stroke: #4f8701; stroke-width: 1.9; } .mod__fgroup[data-fuel="diesel"] .mod__fuel-ic { background: #e9effd; stroke: #2563eb; } .mod__fgroup[data-fuel="hybrid"] .mod__fuel-ic, .mod__fgroup[data-fuel="electric"] .mod__fuel-ic { background: #e5f5f3; stroke: #0d9488; } .mod__fgroup-n { padding: 3px 9px; background: #f2f4f1; font-size: 12px; font-weight: 700; color: #6b757d; } /* Разделителят над двигателите без части — както на поколението (.gpick__divider). */ .mod__nopart-div { display: flex; align-items: center; gap: 14px; padding: 16px 0 2px; } .mod__nopart-div::before, .mod__nopart-div::after { content: ""; flex: 1; height: 1px; background: #e2e5ea; } .mod__nopart-div span { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #9aa0aa; white-space: nowrap; } .mod__nopart-div.is-hidden { display: none; } .mod__engine[data-fuel="diesel"] .mod__engine-ic { background: #e9effd; } .mod__engine[data-fuel="diesel"] .mod__engine-ic .mod__fuel-ic { stroke: #2563eb; } .mod__engine[data-fuel="hybrid"] .mod__engine-ic, .mod__engine[data-fuel="electric"] .mod__engine-ic { background: #e5f5f3; } .mod__engine[data-fuel="hybrid"] .mod__engine-ic .mod__fuel-ic, .mod__engine[data-fuel="electric"] .mod__engine-ic .mod__fuel-ic { stroke: #0d9488; } @media (min-width: 861px) { .mod.is-open .mod__engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; padding: 16px 18px 20px; background: #fafcf7; } .mod__engines > .mod__fuelbar, .mod__engines > .gflt, .mod__engines > .mod__fgroup, .mod__engines > .mod__nopart-div, .mod__engines > .mod__engine-head { grid-column: 1 / -1; } .mod__engines > .gflt { margin: 0; } .mod__engines > .gflt + .mod__engine-head + .mod__fgroup { padding-top: 6px; } .mod__fuelbar { padding: 0 0 2px; } .mod__engines > .mod__fuelbar + .mod__engine-head + .mod__fgroup { padding-top: 6px; } .mod__engine-head { display: none; } .mod__engine, .mod__engine:first-of-type { grid-template-columns: 38px minmax(0, 1fr) 28px; grid-template-rows: auto auto auto; gap: 3px 12px; align-items: center; padding: 12px 14px; border: 1px solid #e3e7df; border-radius: 14px; background: #fff; transition: border-color .15s, box-shadow .15s, background .15s, transform .15s; } .mod__engine:hover { border-color: var(--accent); background: #f6faf2; box-shadow: 0 10px 22px rgba(79,135,1,.12); transform: translateY(-2px); } .mod__engine > .mod__engine-ic { display: grid; place-items: center; grid-area: 1 / 1 / 4 / 2; width: 38px; height: 38px; border-radius: 11px; background: #eef6e4; } .mod__engine > .mod__engine-ic .mod__fuel-ic { width: 19px; height: 19px; } .mod__engine > .mod__engine-l1, .mod__engine > .mod__engine-l2, .mod__engine > .mod__engine-l3 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; min-width: 0; } .mod__engine > .mod__engine-l1 { grid-area: 1 / 2 / 2 / 3; } .mod__engine > .mod__engine-l2 { grid-area: 2 / 2 / 3 / 3; } .mod__engine > .mod__engine-l3 { grid-area: 3 / 2 / 4 / 3; } .mod__engine .mod__engine-name { font-size: 15.5px; font-weight: 800; } .mod__engine .mod__engine-fuel { padding: 2px 8px; border-radius: 999px; background: #f2f4f1; font-size: 11px; } .mod__engine .mod__engine-power { font-size: 13px; font-weight: 600; color: #13222e; } .mod__engine .mod__engine-years { font-size: 12.5px; color: var(--muted); } .mod__engine .mod__engine-years::before { content: "· "; } .mod__engine .mod__engine-code { display: flex; flex-wrap: wrap; gap: 5px; } .mod__engine .mod__code { padding: 2px 7px; border-radius: 6px; background: #f2f4f1; font-size: 11.5px; font-weight: 700; color: #3b4650; } .mod__engine .mod__code + .mod__code::before { content: none; } .mod__engine > .mod__caret--arrow { grid-area: 1 / 3 / 4 / 4; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: #eef6e4; color: var(--accent); stroke-width: 2.4; transition: background .15s, color .15s; } .mod__engine:hover > .mod__caret--arrow { background: var(--accent-grad, var(--accent)); color: #fff; } .mod__engine > .mod__engine-flag { grid-area: 4 / 1 / 5 / 4; justify-self: start; margin-top: 6px; } .mod__engine--off, .mod__engine--none, .mod__engine--off:first-of-type, .mod__engine--none:first-of-type { background: #f6f7f9; border: 1.5px dashed #d6d9df; } .mod__engine--off > .mod__engine-ic, .mod__engine--none > .mod__engine-ic { background: #eceef1; } .mod__engine--off > .mod__engine-ic .mod__fuel-ic, .mod__engine--none > .mod__engine-ic .mod__fuel-ic { stroke: var(--muted); } .mod__engine--off:hover, .mod__engine--none:hover { border-color: #b9bec7; background: #f6f7f9; box-shadow: none; transform: none; } .mod__engine--off:hover > .mod__caret--arrow { background: #eceef1; color: var(--muted); } } @media (min-width: 861px) and (max-width: 1100px) { .mod.is-open .mod__engines { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .mod__fuelbar { flex-wrap: nowrap; } .mod__flabel { flex: none; font-size: 0; gap: 0; } /* на телефон — само фунийката, бутоните на същия ред */ .mod__ftrack { flex: none; } } /* Responsive */ @media (max-width: 780px) { .mods__head { flex-direction: column; align-items: stretch; } .mods__hint { align-self: flex-start; } .mod__head { grid-template-columns: 72px 1fr 28px; gap: 12px; } .mod__img, .mod__img--none { width: 72px; height: 48px; } .mod__years { grid-column: 2 / 3; } .mod__engine-head { display: none; } .mod__engine { grid-template-columns: 1fr 1fr; gap: 6px 14px; } .mod__engine .mod__caret { display: none; } /* Надписът остава и на телефон — той е информацията, не украсата. */ .mod__engine > .mod__engine-flag { justify-self: start; grid-column: 1 / -1; } } /* ======== СТРАНИЦА С ЧАСТИ ЗА КОЛА (4-то ниво) ======== */ /* Компактен hero (само заглавие + breadcrumb) */ .cathero--slim .cathero__inner { padding-top: 14px; padding-bottom: 30px; } .cathero--slim .cathero__title { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 0; } .cathero--slim.cathero--product .cathero__product { display: none; } .catmain { min-width: 0; } /* ---- Избран автомобил (инфо карта) ---- */ .selcar { display: flex; align-items: center; gap: 16px; max-width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; margin-bottom: 20px; box-shadow: 0 2px 14px rgba(0,0,0,.04); } .selcar__img { width: 96px; height: 62px; object-fit: contain; flex: none; } .selcar__img--none { display: flex; align-items: center; justify-content: center; background: #f4f5f8; color: #c3c8d2; border-radius: 8px; } .selcar__img--none svg { width: 46px; height: 46px; } .selcar__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .selcar__name { font-size: 17px; font-weight: 800; color: var(--dark); } .selcar__name span { font-weight: 600; color: var(--muted); } .selcar__specs { display: flex; flex-wrap: nowrap; gap: 18px; min-width: 0; width: 100%; } .selcar__spec { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; } .selcar__spec + .selcar__spec { padding-left: 18px; border-left: 1px solid var(--line); } .selcar__spec-label { font-size: 11px; font-weight: 500; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .selcar__spec-val { font-size: 13px; font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 720px) { .selcar { flex-wrap: wrap; } .selcar__specs { flex-wrap: wrap; row-gap: 12px; } .selcar__spec { flex: 1 1 40%; } .selcar__spec + .selcar__spec { padding-left: 0; border-left: none; } } /* ---- „Избран автомобил" на кола × категория (десктоп, макет от 12.10.2026) ---- Зелено каре, за да се чете като НАСТРОЙКА, а не като поредната стъпка. Един ред: снимка | отметка + име + характеристики (само иконка и стойност) | черта | „Всички части за този автомобил" + пояснение + „Смени автомобил". Под ~1180px действията слизат на ред под името (виж долу). На телефон е скрито — там е partials.selected-car (.ccar в mobile.css). */ .selcar--picked { position: relative; display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; grid-template-areas: "pic head act"; gap: 0 18px; align-items: center; padding: 14px 18px; background: #f5fbf7; border: 1.5px solid #cfe8d6; box-shadow: none; transition: border-color .15s; } .selcar--picked:hover { border-color: #a8d8b6; } .selcar__pic { grid-area: pic; display: block; width: 110px; height: 76px; } .selcar--picked .selcar__img { width: 110px; height: 76px; object-fit: cover; border-radius: 10px; } .selcar__head { grid-area: head; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .selcar__picked { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--dark); } .selcar__picked svg { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #22a352; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; } /* Името е връзката към страницата на колата; ::after я разпъва върху карето. */ .selcar--picked .selcar__name { font-size: 20px; line-height: 1.2; color: var(--dark); text-decoration: none; } .selcar--picked a.selcar__name::after { content: ""; position: absolute; inset: 0; border-radius: 14px; } .selcar--link:hover .selcar__name { color: #17733b; } .selcar--here:hover { border-color: #cfe8d6; } /* без връзка — няма и посочване */ /* Характеристиките — иконка и стойност в един ред; надписът („Година"…) остава за екранните четци и като подсказка при посочване (title). */ .selcar--picked .selcar__specs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; width: auto; } .selcar--picked .selcar__spec { flex: none; flex-direction: row; align-items: center; gap: 5px; } .selcar--picked .selcar__spec + .selcar__spec { padding-left: 0; border-left: 0; } .selcar--picked .selcar__spec svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #6b7280; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .selcar--picked .selcar__spec-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .selcar--picked .selcar__spec-val { font-size: 13px; font-weight: 600; color: var(--ink); } /* Действията вдясно, отделени с черта. Над разпънатата връзка (z-index). */ .selcar__act { grid-area: act; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; align-self: stretch; justify-content: center; padding-left: 18px; border-left: 1px solid #d6eadc; } .selcar__all { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 14px; border-radius: 10px; background: #16a34a; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 12px rgba(22,163,74,.25); transition: background .15s; } .selcar__all:hover { background: #12833d; } .selcar__all svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .selcar__hint { font-size: 10.5px; line-height: 1.3; color: var(--muted); text-align: center; white-space: nowrap; } .selcar__change { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #17733b; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; } .selcar__change:hover { color: #0f5a2c; } /* На самата страница на колата „Смени" е единственото действие — бутон с рамка. */ .selcar--here .selcar__change { height: 40px; padding: 0 16px; border: 1.5px solid #bfe0c9; border-radius: 10px; background: #fff; font-weight: 700; text-decoration: none; } .selcar--here .selcar__change:hover { border-color: #16a34a; } .selcar__change svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Продуктовата страница: карето за телефон (partials.selected-car, .ccar--sr) носи H1-а. На компютър колата е в зеленото каре отгоре, а от това остава само H1-ът — скрит за окото, НЕ display:none (правилото за единия H1, виж .dpd-top__title). */ @media (min-width: 861px) { .ccar.ccar--sr { display: block; margin: 0; } .ccar--sr .ccar__car, .ccar--sr .ccar__logo { display: none; } .ccar--sr .ccar__title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } } /* „Запази в гаража" — розова лента в долната част на карето (страницата на колата). Същото като на телефон, само в един ред. */ .selcar__garage { grid-column: 1 / -1; position: relative; z-index: 1; /* над разпънатата връзка */ display: flex; align-items: center; gap: 14px; margin: 14px -18px -14px; padding: 12px 18px; border-top: 1px solid #e0e7db; border-radius: 0 0 13px 13px; background: linear-gradient(90deg, #fff 0%, #f3f8ef 100%); } .selcar__garage[hidden] { display: none; } .selcar__gico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #e1efd8; color: var(--accent); } .selcar__gico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .selcar__gtxt { flex: none; } .selcar__gtitle { font-size: 15px; font-weight: 800; line-height: 1.2; color: var(--dark); } .selcar__glead { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); } .selcar__gperks { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 0; padding: 0; list-style: none; } .selcar__gperks li { display: flex; align-items: center; gap: 6px; padding: 0 14px; font-size: 13px; color: var(--ink); white-space: nowrap; } .selcar__gperks li + li { border-left: 1px solid #d5e1cd; } .selcar__gperks svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .selcar__gbtn { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--accent-grad); color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 12px rgba(79,135,1,.25); cursor: pointer; transition: filter .15s; } .selcar__gbtn:hover { filter: brightness(1.08); } .selcar__gbtn:disabled { cursor: default; filter: none; } .selcar__gbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Под ~1180px трите предимства не се събират на един ред — третото отпада. */ @media (max-width: 1180px) { .selcar__gperks li:nth-child(3) { display: none; } } /* вече е в гаража — зелено */ .selcar__garage.is-done { background: linear-gradient(90deg, #fff 0%, #effaf2 100%); border-top-color: #dcefe2; } .selcar__garage.is-done .selcar__gico { background: #dcf3e4; color: #16a34a; } .selcar__garage.is-done .selcar__gbtn { background: #16a34a; box-shadow: none; } /* Заглавието над карето — от partials.selected-car, тук само на десктоп (основното `display:none` е в mobile.css, затова двойният клас). */ @media (min-width: 861px) { .ccar.ccar--desk { display: block; margin: 0 0 16px; } .ccar--desk .ccar__car { display: none; } .ccar--desk .ccar__title { margin: 0; font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.3px; color: var(--dark); } /* „за Honda Accord…" — на същия ред след името на категорията, не под него. */ .ccar--desk .ccar__title span { display: inline; font-size: 24px; font-weight: 600; letter-spacing: -.2px; color: var(--muted); } /* Броят и бележката „само съвместими" — в ЕДНО зелено каре (Мариян, 12.10.2026): отметка, „132 подходящи продукта" и под него бележката. Същият ред като на телефон, само в каре. Основните `display:none` са в mobile.css — затова двойните класове. */ /* Височината е ЕДНА с подредбата и изгледа до нея (44px) — редът е равен. */ .catbar__count--fit { box-sizing: border-box; height: 44px; display: grid; grid-template-columns: 22px auto; gap: 0 9px; align-items: center; align-content: center; margin: 0; padding: 0 16px 0 10px; border-radius: 10px; background: #effaf2; border: 1px solid #cfe8d6; color: #1d4d2e; } .catbar__count--fit .catbar__ok { display: grid; place-items: center; grid-row: 1 / 3; width: 22px; height: 22px; border-radius: 50%; background: #22a352; } .catbar__count--fit .catbar__ok svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; } .catbar__count--fit .catbar__num { font-size: 13.5px; font-weight: 800; line-height: 1.15; } .catbar__count--fit .catbar__num b { color: #14532d; } .catbar__count--fit .catbar__fit { display: inline; } .catbar__count--fit .catbar__note { display: block; grid-column: 2; font-size: 11.5px; line-height: 1.2; color: #3f6b4f; } .catbar--car .catbar__tools { margin-left: auto; } .catbar--car { gap: 12px; } /* Подредбата — иконка вместо „Сортирай по:" (надписът остава за екранните четци), както на телефон. Иначе редът не се събира в колоната до филтрите. */ .catbar--car .catsort { box-sizing: border-box; height: 44px; gap: 6px; padding-left: 12px; } .catbar--car .catsort::before { content: ""; flex: none; width: 18px; height: 18px; background: no-repeat center / 18px 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M3.5 7.5L7 4l3.5 3.5M17 20V4M13.5 16.5L17 20l3.5-3.5'/%3E%3C/svg%3E"); } .catbar--car .catsort label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } } /* Колоната до филтрите (.catmain) е под ~840px — трите части на карето не се събират в един ред. Действията слизат под името, в ред: бутон, пояснение, „Смени". Страницата на колата е без филтри — там редът се събира. */ @media (min-width: 861px) and (max-width: 1180px) { .catmain .selcar--picked { grid-template-columns: 110px minmax(0, 1fr); grid-template-areas: "pic head" "act act"; row-gap: 12px; } .catmain .selcar__act { flex-direction: row; align-self: auto; justify-content: flex-start; gap: 14px; padding: 12px 0 0; border-left: 0; border-top: 1px solid #d6eadc; } .catmain .selcar__all { flex: none; } .catmain .selcar__hint { flex: 1 1 auto; min-width: 0; text-align: left; white-space: normal; } .catmain .selcar__change { flex: none; margin-left: auto; } } /* ---- Филтрирай по марка (с лога) ---- */ .fbrands { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; } .fbrand { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; background: #fff; transition: border-color .15s, box-shadow .15s; min-width: 0; } .fbrand:hover { border-color: var(--accent); } .fbrand input { flex: none; accent-color: var(--accent); } .fbrand__logo { height: 18px; width: auto; max-width: 64px; object-fit: contain; flex: none; } .fbrand__name { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } .fbrand__count { font-size: 10px; font-weight: 700; color: var(--muted); flex: none; } .fbrand:has(input:checked), .fbrand--active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .fbrand:has(input:checked) .fbrand__name, .fbrand--active .fbrand__name { color: var(--dark); } .fbrand { text-decoration: none; } .fbrand--hidden { display: none; } .fbrand--no-match { display: none !important; } /* Оригиналите — първият ред на списъка. Синьото е същото като на значката „OE" по картите и лентата горе (#1f4e9c), за да се познае откъде идва отметката. Отделена е с черта отдолу: под нея започват афтърмаркет марките. */ .fbrand--oe { border-color: #c6d6ef; background: #f4f8ff; } .fbrand--oe:hover { border-color: #1f4e9c; } .fbrand--oe .fbrand__name { color: #33475f; } .fbrand--oe:has(input:checked) { border-color: #1f4e9c; box-shadow: 0 0 0 1px #1f4e9c inset; } .fbrand--oe:has(input:checked) .fbrand__name { color: #1f4e9c; } .fbrand__oe { display: inline-block; padding: 1px 5px; margin-right: 3px; border-radius: 4px; background: #1f4e9c; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; } /* Дъх между оригиналите и първата афтърмаркет марка под тях. */ .fbrand--oe + .fbrand { margin-top: 4px; } .fmore--brands { margin-top: 12px; } /* Търсене на марка */ .fsearch { width: 100%; height: 38px; margin-bottom: 10px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 10px; font-size: 13px; font-family: inherit; color: var(--ink); background: #f8f9fb; } .fsearch:focus { outline: none; border-color: var(--accent); background: #fff; } /* Продукт: placeholder за снимка (докато нямаме снимки на частите) */ .product__img-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 90px; color: #cfd4dd; } .product__img-ph svg { width: 52px; height: 52px; } /* Цена "По запитване" (докато няма реални цени) */ .plist-price--ask { font-size: 15px; font-weight: 800; color: var(--muted); white-space: nowrap; } /* Няма части / няма резултати */ .prods-none { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 40px 24px; text-align: center; color: var(--muted); font-size: 15px; } .prods-empty { padding: 24px 4px; color: var(--muted); } .prods-none__reset { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: var(--accent); font-weight: 700; text-decoration: underline; } /* facet групи като
    (reset на списъка) + clear като