/* ============================================================================
   home.css — началната страница на Sauto.BG (по концепцията: зелено, черно, бяло).
   Зарежда се САМО на началната (resources/views/home.blade.php), след style.css
   и mobile.css. Класовете са с представка `h-` и не се срещат другаде, тоест
   вътрешните страници не се засягат. Цветовете са от общите променливи
   (--accent, --accent-dark, --dark, --line…, виж :root в style.css).
   ============================================================================ */

.page-home {
  --accent-hi: #6fb31a;        /* зеленото върху черно — по-светло, за да се чете */
  --h-ink: #121513;            /* почти черното на тъмните ленти */
  --h-soft: #f4f6f3;           /* светлият фон на картите */
}

/* ── Бутоните ── */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; border-radius: 8px;
  font-size: 13.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  text-decoration: none; cursor: pointer; border: 0;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.h-btn--primary { background: var(--accent); color: #fff; }
.h-btn--primary:hover { background: var(--accent-dark); transform: translateY(-1px); }
.h-btn--primary:disabled { background: #6c7a63; cursor: not-allowed; transform: none; opacity: .75; }
.h-btn:focus-visible { outline: 3px solid var(--accent-hi); outline-offset: 2px; }

/* ── Горе: категориите вляво, банерът и търсачката вдясно ── */
.h-top { padding: 22px 0 8px; background: linear-gradient(180deg, #f3f5f6 0%, #fff 100%); }
.h-top__grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; }

/* страничната колона — връзките от менюто, а долу помощта; разпъната до височината вдясно */
.h-top__grid { align-items: stretch; }
.h-side {
  display: flex; flex-direction: column; align-self: stretch;
  background: #fff; border-radius: 16px;      /* без overflow:hidden — „разделът" излиза извън колоната */
  box-shadow: 0 10px 30px rgba(15,27,38,.08); border: 1px solid #e6eaec;
  transition: background-color .2s;
}
.h-side__head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 14px; height: 58px; padding: 0 22px; flex: none; border-radius: 15px 15px 0 0;
  background: linear-gradient(135deg, #5a9a08 0%, #3f6e00 100%); color: #fff;
  font-size: 17px; font-weight: 800; text-decoration: none;
}
.h-side__head svg { width: 24px; height: 24px; flex: none; }
/* извивката вдясно: по-светло зелено зад лимонена линия */
.h-side__head::after {
  content: ''; position: absolute; z-index: -1; width: 240px; height: 170px; right: -120px; bottom: -118px; border-radius: 50%;
  background: rgba(143,209,58,.16); border-top: 2px solid rgba(166,227,82,.9); border-left: 2px solid rgba(166,227,82,.55);
}
.h-side__head:hover { filter: brightness(1.06); }
#cats { scroll-margin-top: 16px; }   /* „Всички категории" от колоната скролва дотук */
.h-side__list { list-style: none; margin: 0; padding: 10px 16px; }
.h-side__list li + li { border-top: 1px solid #eef1f2; }
.h-side__item {
  display: flex; align-items: center; gap: 14px; margin: 0 -8px; padding: 6px 8px; border-radius: 12px;
  color: var(--dark); font-size: 15px; font-weight: 700; line-height: 1.3; text-decoration: none;
  transition: background-color .15s;
}

.h-side__item .nav__ic {
  width: 40px; height: 40px; padding: 9px; box-sizing: border-box; flex: none; border-radius: 10px;
  background: #f2f5f1; color: #1c2228; transition: background-color .15s, color .15s;
}
.h-side__item .nav__ic--img { padding: 6px; object-fit: contain; }   /* цветните иконки (NavIcon::tile) — малко по-едри от контурните */
.h-side__item span { flex: 1; min-width: 0; }
.h-side__chev { width: 16px; height: 16px; flex: none; color: #9aa3a8; transition: transform .2s, color .2s; }
.h-side__item:hover { background: #ebf6dd; }
.h-side__item:hover .nav__ic { background: #d6edb8; color: #3f6e00; }
.h-side__item:hover .h-side__chev { color: var(--accent); }
.h-side__item:hover .h-side__chev { transform: translateX(2px); }
/* връзка-промоция — зелено каре, като „Промоции и оферти" в концепцията */
.h-side__item.is-sale { margin: 4px -8px; background: #eef7e2; color: #2f5a00; font-weight: 800; }
.h-side__item.is-sale .nav__ic { background: #d6edb8; color: var(--accent); }
/* „Обади се на Sauto.BG" — стъпва най-долу: тъмно каре, вдясно фарът на колата от
   банера (img/home/call-car.webp), светлото лого, светещ бутон с номера
   (по картинката на Мариян, 03.11.2026) */
.h-side__help {
  position: relative; overflow: hidden; isolation: isolate;
  margin: auto 16px 16px; padding: 20px 18px 18px; border-radius: 16px;
  background: #0b1310; color: #fff;
  display: flex; flex-direction: column; align-items: flex-start;
  box-shadow: 0 16px 30px -16px rgba(11,19,16,.7);
}
.h-side__car {
  position: absolute; z-index: -2; top: -6%; right: -46px; height: 112%; width: auto; aspect-ratio: 1; object-fit: cover;
}
/* текстът вляво трябва да се чете — тъмно отляво и отдолу, колата изплува вдясно */
.h-side__help::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background:
    linear-gradient(90deg, #0b1310 0%, rgba(11,19,16,.88) 34%, rgba(11,19,16,0) 72%),
    linear-gradient(0deg, rgba(11,19,16,.6) 0%, rgba(11,19,16,0) 42%);
}
.h-side__logo { display: block; width: 150px; height: auto; margin-bottom: 14px; }
.h-side__call { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.3px; color: #fff; }
.h-side__call b { display: block; font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: -.4px; }
.h-side__call i { font-style: inherit; color: #8fd13a; }
.h-side__phone {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin-top: 16px;
  border-radius: 14px; border: 1.5px solid #a6e352;
  background: linear-gradient(180deg, #7cc11f 0%, #4f8701 100%); color: #fff; text-decoration: none;
  font-size: 21px; font-weight: 800; letter-spacing: .2px;
  box-shadow: 0 0 22px rgba(143,209,58,.42), inset 0 1px 0 rgba(255,255,255,.28);
  transition: filter .15s, box-shadow .15s;
}
.h-side__phone svg { width: 23px; height: 23px; flex: none; }
.h-side__phone:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 0 30px rgba(143,209,58,.6), inset 0 1px 0 rgba(255,255,255,.28); }
/* Докато панелът е отворен, всичко останало плавно се замъглява и леко притъмнява —
   фокусът остава върху колоната и панела. Пластът е над хедъра (z 500), колоната и
   панелът — над пласта. pointer-events: none — мишката си стига до страницата. */
.h-dim {
  position: fixed; inset: 0; z-index: 600; pointer-events: none;
  background: rgba(10,16,22,.22); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s;
}
.h-top.is-flyout ~ .h-dim, body.is-flyout .h-dim { opacity: 1; visibility: visible; }
.h-top.is-flyout .h-side { position: relative; z-index: 620; }
.h-top.is-flyout .h-flyout { z-index: 610; }

/* панелът на връзките от колоната — точно на мястото на банера и търсачката */
.h-top__grid { position: relative; }
.h-flyout {
  /* absolute се мери от ръба на .container ЗАЕДНО с полето му (20px): 20 + колона 300 + пролука 8.
     Пролуката е тясна нарочно — мишката стига от колоната до панела почти без да излиза (Мариян, 03.11.2026) */
  position: absolute; left: 328px; right: 20px; top: 0; min-height: 100%; z-index: 480;   /* по-дълго съдържание — расте надолу */
  opacity: 0; visibility: hidden; transform: translateX(-8px); pointer-events: none;
  transition: opacity .2s var(--ease), transform .24s var(--ease), visibility .2s;
}
.h-flyout.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.h-flyout__in {
  min-height: 100%; display: flex; flex-direction: column; gap: 12px; position: absolute; inset: 0 0 auto 0;
  padding: 18px 22px; background: #fff; border-radius: 20px; border: 1px solid #e6eaec;
  box-shadow: 0 30px 70px -24px rgba(15,27,38,.35);
}
.sm__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid #eef1f2; }
.sm__title { font-size: 21px; font-weight: 900; letter-spacing: -.4px; color: var(--dark); }
.sm__lead { margin-top: 2px; font-size: 13.5px; color: #4b5249; }
.sm__all {
  flex: none; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 14px; font-weight: 800; text-decoration: none;
}
.sm__all svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm__all:hover { background: var(--accent-dark); }
.sm__groups { display: flex; flex-direction: column; gap: 12px; }
.sm__gtitle {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; padding-left: 10px; border-left: 3px solid var(--accent);
}
.sm__gtitle b { font-size: 13px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--dark); }
.sm__gtitle span { font-size: 12.5px; color: #4b5249; }
.sm__cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.sm__card {
  display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 6px 8px;
  border: 1px solid #e6eaec; border-radius: 12px; background: #fff; color: var(--dark); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.sm__card:hover { border-color: var(--accent); box-shadow: 0 10px 22px -12px rgba(15,27,38,.35); transform: translateY(-2px); }
/* снимките са 600×450 (4:3) — карето е със същата пропорция и с contain, тоест
   снимката се вижда ЦЯЛАТА (Мариян, 03.11.2026); панелът може да е по-висок */
.sm__cimg { display: block; aspect-ratio: 4 / 3; margin-bottom: 5px; border-radius: 8px; overflow: hidden; background: #fff; }
.sm__cimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sm__cimg > svg { width: 30px; height: 30px; margin: 20% auto 0; display: block; fill: none; stroke: #9aa3a8; stroke-width: 1.6; }
.sm__ctitle { font-size: 13px; font-weight: 800; line-height: 1.25; }
.sm__ctitle .mt__nw { white-space: nowrap; }
.sm__ctitle .mt__chev { width: 13px; height: 13px; margin-left: 2px; vertical-align: -1px; fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* пояснението — целият текст, без „…" */
.sm__csub { font-size: 12px; line-height: 1.35; color: #4b5249; }
.sm__ctext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* малка група — хоризонтални карета: снимка вляво, текст вдясно */
.sm__group--row .sm__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sm__group--row .sm__card { flex-direction: row; align-items: center; gap: 12px; padding: 8px; }
.sm__group--row .sm__card { padding: 6px; }
.sm__group--row .sm__cimg { flex: none; width: 76px; aspect-ratio: 4 / 3; margin: 0; }
.sm__feats {
  list-style: none; margin: auto 0 0; padding: 10px 0 0; border-top: 1px solid #eef1f2;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
}
.sm__feats li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #4b5249; }
.sm__feats b { display: block; color: var(--dark); font-weight: 800; }
.sm__feats small { font-size: 12.5px; }
.sm__fic {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #eef7e2; color: var(--accent);
}
.sm__fic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* „Разделът": докато панелът е отворен, колоната посивява, а посочената връзка става
   бяла пластинка със зелена черта, която минава през пролуката (8px) и влиза 1px в
   панела — покрива рамката му на този ред и двете стават една бяла форма. Върху
   панела е заради z-index (490 > 480 на .h-flyout). Без горна и долна рамка: тези
   две линии прекосяваха пролуката и се виждаха като две черти (Мариян, 03.11.2026). */
.h-top.is-flyout .h-side { background: #f3f5f4; }
.h-top.is-flyout .h-side__list li + li { border-top-color: #e4e8e6; }
.h-top.is-flyout .h-side__item .nav__ic { background: #fff; }   /* колоната е сива — квадратчетата стават бели */
.h-top.is-flyout .h-side__item.is-hot {
  position: relative; z-index: 490;
  margin: -1px -26px -1px -10px; padding: 7px 34px 7px 10px;   /* дясно: поле 16 + пролука 8 + 1px рамката на панела, плюс 1px колоната */
  background: #fff; color: var(--accent);
  border: 0; border-radius: 12px 0 0 12px;
  box-shadow: inset 4px 0 0 var(--accent), -8px 10px 22px -14px rgba(15,27,38,.35);
}
.h-top.is-flyout .h-side__item.is-hot .nav__ic { background: #ebf6dd; color: var(--accent); }
.h-top.is-flyout .h-side__item.is-hot .h-side__chev { color: var(--accent); transform: translateX(3px); }

/* банерът — тъмно каре с авточастите (img/home/hero-parts.webp; колата е долу, в търсачката) */
.h-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.h-hero {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; color: #fff;
  background: #0b1219; display: flex; align-items: center;   /* без min-height — по-нисък, колоната вляво няма толкова празно (Мариян, 03.11.2026) */
}
.h-hero__pic { position: absolute; inset: 0; z-index: -2; }
/* снимката — по цялата височина, закачена вдясно: частите се виждат целите (cover режеше горе
   и долу при по-ниския банер); лявото ѝ е тъмно като фона и е под текста, там може да не стига */
.h-hero__pic img { position: absolute; top: 0; right: 0; width: auto; height: 100%; max-width: none; }
.h-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8,14,20,.92) 0%, rgba(8,14,20,.72) 38%, rgba(8,14,20,.12) 70%, rgba(8,14,20,0) 100%);
}
.h-hero__inner { padding: 26px 44px; max-width: 720px; }
.h-hero__eyebrow { display: block; font-size: 17px; font-weight: 600; color: #e8eef2; }
.h-hero__eyebrow b { color: #8fd13a; font-weight: 900; }
.h-hero__title {
  margin: 6px 0 10px; font-size: clamp(34px, 3.8vw, 52px); line-height: 1.02; font-weight: 900; letter-spacing: -1.4px;
  text-wrap: balance;
}
.h-hero__title span { color: #8fd13a; }
.h-hero__sub { max-width: 44ch; margin: 0 0 18px; font-size: 17.5px; line-height: 1.45; color: rgba(255,255,255,.88); }
.h-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.h-hero__cta .h-btn { height: 50px; padding: 0 24px; font-size: 16px; text-transform: none; letter-spacing: 0; border-radius: 12px; }
.h-hero__cta .h-btn svg { width: 21px; height: 21px; flex: none; }
.h-btn--lime { background: #8fd13a; color: #0f1b26; }
.h-btn--lime:hover { background: #a3e04f; transform: translateY(-1px); }
.h-btn--outline-light { background: rgba(255,255,255,.04); color: #fff; border: 1.5px solid rgba(255,255,255,.75); }
.h-btn--outline-light:hover { background: #fff; color: #0f1b26; border-color: #fff; }
.h-hero__usp { display: flex; flex-wrap: wrap; margin: 18px 0 0; padding: 0; list-style: none; }
.h-hero__usp li { display: flex; align-items: center; gap: 9px; font-size: 13px; line-height: 1.25; color: rgba(255,255,255,.85); padding: 0 14px; white-space: nowrap; }
.h-hero__usp li:first-child { padding-left: 0; }
.h-hero__usp li + li { border-left: 1px solid rgba(255,255,255,.22); }
.h-hero__usp svg { width: 28px; height: 28px; flex: none; color: #8fd13a; }
.h-hero__usp b { display: block; color: #fff; font-weight: 800; }


/* ── Секциите: заглавие вляво, „Виж всички" вдясно ── */
.h-sec { padding: 52px 0; }
.h-sec--tight { padding: 8px 0 20px; }
.h-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
/* Заглавията на секциите — като „Най-търсени авточасти" (.popcats__title): зелената наклонена черта
   отпред, без главни букви, втората част (<span>) в зелено (Мариян, 06.11.2026; дотогава главни букви).
   Същото и за продуктите (#products долу). */
.h-sec__title, .page-home #products .section__title {
  position: relative; display: block; margin: 0; padding-left: 26px;
  font-size: clamp(24px, 2.4vw, 32px); font-weight: 900; letter-spacing: -.6px; line-height: 1.1;
  text-transform: none; color: #0f1b26; text-wrap: balance;
}
.h-sec__title::before, .page-home #products .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); }
.h-sec__title span, .page-home #products .section__title span { color: var(--accent); }
.h-sec__all { flex: none; font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.h-sec__all:hover { color: var(--accent-dark); text-decoration: underline; }
.h-sec__lead { color: var(--muted); }

/* ── Марките — търсачка, три подредби, решетка от карета (картинката на Мариян, 03.11.2026) ── */
.h-brands { padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.h-brands[data-lz]:not(.is-near) .bp-logo { background-image: none; }
.h-brands__row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 14px; }
/* Буквите при „Всички марки" — .alpha-filter (style.css); тук само отстоянието и влизането. */
.h-brands__letters { margin: -4px 0 18px; }
.h-brands__letters[hidden] { display: none; }   /* .alpha-filter е display:flex — без това hidden не скрива */
.h-brands__letters:not([hidden]) { animation: hLettersIn .22s ease-out; }
@keyframes hLettersIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.h-brand {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 116px;
  padding: 16px 8px 14px; background: #fff; border: 1px solid #edf0ee; border-radius: 16px;
  color: var(--dark); text-decoration: none; font: inherit; cursor: pointer;
  box-shadow: 0 8px 20px -14px rgba(15,27,38,.3);
  transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s;
}
.h-brand[hidden] { display: none; }
.h-brand .bp-logo { transform: scale(.74); margin: -8px 0; }
/* актуалните лога (файлове, 192×192 — CarBrandLogo) */
.h-brand .bp-logo--img { width: 58px; height: 58px; transform: none; margin: 0; transition: transform .18s; }
.h-brand:hover { background: #f3faea; border-color: #b5dc86; box-shadow: 0 14px 26px -14px rgba(79,135,1,.55); transform: translateY(-2px); }
.h-brand:hover .bp-logo--img { transform: scale(1.06); }
.h-brand:hover .bp-logo { filter: grayscale(0); }
.h-brand__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 800; text-align: center; }
.h-brand--all { order: 999; }
.h-brand__more { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: #e5f3d2; color: var(--accent); }
.h-brand__more svg { width: 26px; height: 26px; }
.h-brand--all .h-brand__name { color: var(--accent); white-space: normal; font-size: 13px; line-height: 1.25; }
.h-brands__none { order: 1000; grid-column: 1 / -1; margin: 0; padding: 18px; border-radius: 14px; background: #f6f8f5; color: var(--muted); text-align: center; }
.h-brands__none b { color: var(--dark); }
.h-brands__none button { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--accent); text-decoration: underline; cursor: pointer; }
@media (max-width: 1199px) { .h-brands__row { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* „Намери категория части" — в css/catfind.css (общо с /chasti, 06.11.2026) */

/* ── Категориите — картите са в css/cat-cards.css (общи с колата, car-hub; 05.11.2026) ── */

/* ── Моят гараж — бяло каре; гаражът (img/home/garage-room.webp) почва от --gx — точно след
   текста, а вълната над шева е вектор, за да няма бяла дупка на широк екран (Мариян, 03.11.2026) ── */
.h-garage {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; padding: 24px 40px;   /* без min-height — компактно (Мариян, 03.11.2026) */
  --gx: 700px;   /* откъдето почва гаражът */
  border-radius: 20px; background: #fff; color: var(--dark); text-decoration: none;
  border: 1px solid #e8ece9; box-shadow: 0 20px 44px -28px rgba(15,27,38,.35);
}
.h-garage__img { position: absolute; top: 0; right: 0; bottom: 0; left: var(--gx); width: calc(100% - var(--gx)); height: 100%; object-fit: cover; object-position: 75% center; z-index: -2; }
/* вълната — бяло отляво, зелена ивица и тънка лимонена линия над шева; горе е по-вдясно */
.h-garage__wave { position: absolute; top: 0; bottom: 0; left: calc(var(--gx) - 60px); width: 120px; height: 100%; z-index: -1; }
.h-garage__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 640px; }
@media (max-width: 1279px) { .h-garage { --gx: 620px; } .h-garage__text { max-width: 560px; } }   /* по-тясно — вълната идва по-рано; предимствата минават на два реда */
.h-garage__top { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.h-garage__ico {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 6px;
  background: linear-gradient(145deg, #6fb31a 0%, #355c00 100%); box-shadow: 0 4px 10px -4px rgba(63,110,0,.7);
}
.h-garage__ico svg { width: 18px; height: 18px; }
.h-garage__eyebrow {
  display: inline-flex; align-items: center; gap: 9px; padding: 3px 13px 3px 3px; border-radius: 9px; background: #eef6e3; color: #3f6e00;
  font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
}
.h-garage__title { font-size: clamp(22px, 2.2vw, 29px); line-height: 1.15; font-weight: 900; letter-spacing: -.5px; color: #0f1b26; }
.h-garage__sub { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.25; color: #1c2228; }
.h-garage__sub b { position: relative; display: inline-block; font-weight: 900; color: var(--accent); }
.h-garage__sub b svg { position: absolute; left: 0; right: 0; bottom: -9px; width: 100%; height: 10px; fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
/* предимствата — в един ред (при тясно — на два) */
.h-garage__feats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 14px; }
.h-garage__feats > span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: #1c2228; white-space: nowrap; }
.h-garage__fic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: #eef6e3; color: var(--accent); }
.h-garage__fic svg { width: 15px; height: 15px; }
.h-garage__btn {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px; border-radius: 12px;
  background: linear-gradient(135deg, #5a9a08 0%, #3f6e00 100%); color: #fff; font-size: 15.5px; font-weight: 800;
  box-shadow: 0 12px 24px -10px rgba(63,110,0,.65), inset 0 1px 0 rgba(255,255,255,.2);
  transition: filter .15s, box-shadow .15s;
}
.h-garage__btn svg { width: 20px; height: 20px; flex: none; }
.h-garage__btn svg:nth-child(2) { width: 24px; height: 24px; }
.h-garage:hover .h-garage__btn { filter: brightness(1.08); box-shadow: 0 16px 28px -10px rgba(63,110,0,.75), inset 0 1px 0 rgba(255,255,255,.2); }

/* ── Продуктите (partials/home-foryou) — заглавието като на другите секции ── */
.page-home #products { padding: 52px 0; }
.page-home #products .section__head { margin-bottom: 22px; }
.page-home #products .section__title::after { display: none; }   /* заглавието — горе, при .h-sec__title */
.page-home #products .section__lead { margin: 6px 0 0 26px; font-size: 15px; font-weight: 600; color: #6b726a; }   /* като .popcats__lead */


/* ── Блогът ── */
.h-blog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.h-post {
  display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff;
  border: 1px solid var(--line); color: var(--dark); text-decoration: none;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.h-post:hover { box-shadow: 0 12px 28px rgba(17,24,15,.09); transform: translateY(-2px); border-color: #cfd8c6; }
.h-post__img { position: relative; aspect-ratio: 16 / 9; background: #e6eae3; overflow: hidden; }
.h-post__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.h-post:hover .h-post__img img { transform: scale(1.04); }
.h-post__cat {
  position: absolute; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 5px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.h-post__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.h-post__title { font-size: 16.5px; font-weight: 800; line-height: 1.3; text-wrap: balance; }
.h-post__date { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.h-post__more { margin-top: auto; padding-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); }

/* ── „Най-търсени авточасти" — малки карета по 8 на ред: снимката на категорията горе, името
   и стрелка долу (по картинката на Мариян, 03.11.2026) ── */
.popcats__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.popcats__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;
}
.popcats__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); }
.popcats__title span { color: var(--accent); }
.popcats__lead { margin: 6px 0 0 26px; font-size: 15px; font-weight: 600; color: #6b726a; }
.page-home .popcats__grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; }
.page-home .popcats__item {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  background: #fff; border: 1px solid #e8ece9; border-radius: 14px; text-decoration: none; color: var(--dark);
  box-shadow: 0 10px 22px -18px rgba(15,27,38,.45); transition: border-color .18s, box-shadow .18s, transform .18s;
}
.page-home .popcats__item[hidden] { display: none; }
.page-home .popcats__item:hover { border-color: #b5dc86; box-shadow: 0 16px 28px -16px rgba(79,135,1,.45); transform: translateY(-2px); }
.popcats__img { display: block; height: 96px; padding: 12px 12px 2px; }
.page-home .popcats__img img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.page-home .popcats__item:hover .popcats__img img { transform: scale(1.04); }
.popcats__foot { display: flex; align-items: center; gap: 6px; padding: 6px 10px 10px 12px; min-height: 44px; }
.page-home .popcats__name { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; line-height: 1.2; text-align: left; }
.popcats__go { width: 15px; height: 15px; flex: none; color: var(--accent); transition: transform .15s; }
.page-home .popcats__item:hover .popcats__go { transform: translateX(2px); }
/* „Покажи още части" — капсула между две линии */
.popcats__more { display: flex; align-items: center; gap: 22px; margin-top: 24px; }
.popcats__more::before, .popcats__more::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #b5dc86); }
.popcats__more::after { background: linear-gradient(90deg, #b5dc86, transparent); }
.popcats__morebtn {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border: 0; border-radius: 999px;
  background: #eef6e3; color: #3f6e00; font: inherit; font-size: 15.5px; cursor: pointer; transition: background-color .15s;
}
.popcats__morebtn b { font-weight: 800; }
.popcats__morebtn svg { width: 20px; height: 20px; }
.popcats__morebtn:hover { background: #e0efcc; }
/* бройката в „Покажи още части" и бутонът само за телефон (виж home.blade.php) */
.popcats__n-m, .popcats__more--mob { display: none; }
@media (max-width: 767px) {
  .popcats__n-d { display: none; }
  .popcats__n-m { display: inline; }
  .popcats__more--mob { display: flex; }
  .popcats:not(.is-open) .popcats__item[data-pop-mob] { display: none; }   /* на телефон — 12, четири пълни реда */
}
@media (max-width: 1199px) { .page-home .popcats__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1023px) { .page-home .popcats__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .popcats__head { align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .popcats__title { font-size: 22px; padding-left: 20px; }
  .popcats__lead { margin-left: 20px; font-size: 13.5px; }
  .page-home .popcats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .popcats__img { height: 76px; padding: 10px 8px 0; }
  .popcats__foot { padding: 4px 8px 8px; min-height: 40px; }
  .popcats__go { display: none; }
  .page-home .popcats__name { font-size: 12px; text-align: center; }
}

/* ── „Защо да изберете Sauto.BG" — светлозелена лента с вълни в ъглите; вляво името, вдясно
   петте предимства (по картинката на Мариян, 03.11.2026) ── */
.h-why {
  position: relative; overflow: hidden; isolation: isolate; padding: 30px 0;
  background: linear-gradient(180deg, #f1f8e8 0%, #eaf4dd 100%);
}
.h-why::before, .h-why::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.h-why::before {   /* горе вляво */
  width: 560px; height: 220px; left: -160px; top: -150px;
  background: linear-gradient(100deg, rgba(166,227,82,.55), rgba(143,209,58,.15));
  box-shadow: 0 14px 0 -6px rgba(166,227,82,.35);
  transform: rotate(-8deg);
}
.h-why::after {    /* долу вдясно */
  width: 620px; height: 230px; right: -180px; bottom: -170px;
  background: linear-gradient(280deg, rgba(166,227,82,.6), rgba(143,209,58,.12));
  box-shadow: 0 -14px 0 -6px rgba(166,227,82,.35);
  transform: rotate(-8deg);
}
.h-why__inner { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 20px; }
.h-why__brand { margin: 0; display: flex; flex-direction: column; line-height: 1; }
.h-why__brand span { font-size: 17px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #1c2228; }
.h-why__logo { display: block; width: 200px; height: auto; margin-top: 10px; }
.h-why__brand svg { width: 150px; height: 12px; margin: 6px 0 0 34px; fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.h-why__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.h-why__item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 8px;
  padding: 2px 14px; min-width: 0;
}
.h-why__item + .h-why__item { border-left: 1px solid #d3e3c0; }
.h-why__ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #ddefc6; color: var(--accent); }
.h-why__ic svg { width: 23px; height: 23px; }
.h-why__item strong { font-size: 14px; line-height: 1.2; font-weight: 800; color: var(--dark); }
.h-why__txt { grid-column: 1 / -1; font-size: 13px; line-height: 1.4; color: #4b5249; }
@media (max-width: 1279px) {
  .h-why__inner { grid-template-columns: 170px minmax(0, 1fr); gap: 14px; }
  .h-why__brand span { font-size: 14px; }
  .h-why__logo { width: 165px; }
  .h-why__brand svg { width: 120px; margin-left: 20px; }
  .h-why__item { grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; padding: 2px 10px; }
  .h-why__ic { width: 34px; height: 34px; }
  .h-why__ic svg { width: 20px; height: 20px; }
  .h-why__item strong { font-size: 12.5px; }
  .h-why__txt { font-size: 12.5px; }
}
@media (max-width: 1099px) {   /* под 1100 петте не се събират в ред — по три */
  .h-why__inner { grid-template-columns: minmax(0, 1fr); }
  .h-why__brand { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
  .h-why__logo { width: 150px; margin: 0; }
  .h-why__brand svg { display: none; }
  .h-why__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .h-why__item:nth-child(4) { border-left: 0; }
}
@media (max-width: 767px) {
  .h-why { padding: 24px 0; }
  .h-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .h-why__item { padding: 0 10px; }
  .h-why__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .h-why__item:nth-child(4) { border-left: 1px solid #d3e3c0; }
  .h-why__item:last-child { grid-column: 1 / -1; }
}


/* по-тесен компютър — банерът е по-тесен, търсачката на два реда */
@media (max-width: 1279px) {
  .h-hero__inner { padding: 24px 32px; }
}

/* ============================ ТАБЛЕТ ============================ */
@media (max-width: 1023px) {
  .h-top__grid { grid-template-columns: minmax(0, 1fr); }
  .h-side { display: none; }                 /* категориите са в менюто (бургер) и по-долу */
  /* панелът се отваря САМО от колоната — без нея няма работа. Невидим, но с left: 328px и
     отстъпи 44px стърчеше вдясно: на 360px страницата ставаше 366 и се плъзгаше настрани (07.11.2026) */
  .h-flyout { display: none; }
  .h-brands__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .h-brand { min-height: 96px; padding: 12px 6px 10px; gap: 6px; border-radius: 14px; }
  .h-brand .bp-logo--img { width: 46px; height: 46px; }
  .h-brand__name { font-size: 12px; }
  .h-brand__more { width: 44px; height: 44px; }
  .h-brand--all .h-brand__name { font-size: 12px; }
  .h-brand__w { display: none; }   /* „Всички (48)" — на тясното каре „марки" пречупва на три реда */
}

/* ============================ ТЕЛЕФОН ============================ */
@media (max-width: 767px) {
  .h-top { padding: 12px 0 4px; }
  .h-hero { min-height: 0; border-radius: 16px; }
  .h-hero::after { background: linear-gradient(180deg, rgba(8,14,20,.55) 0%, rgba(8,14,20,.88) 60%, rgba(8,14,20,.95) 100%); }
  .h-hero__inner { padding: 24px 18px 22px; }
  .h-hero__eyebrow { font-size: 14px; }
  .h-hero__title { letter-spacing: -1px; }
  .h-hero__sub { font-size: 15px; margin-bottom: 18px; }
  .h-hero__cta .h-btn { flex: 1 1 100%; height: 50px; font-size: 15px; }
  .h-hero__usp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .h-hero__usp li { padding: 0; border: 0 !important; }
  .h-hero__usp svg { width: 26px; height: 26px; }
  .h-sec { padding: 36px 0; }
  /* заглавията — размерите на .popcats__title на телефон; „Всички …" под заглавието (06.11.2026) */
  .h-sec__head { flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 16px; }
  .h-sec__title, .page-home #products .section__title { padding-left: 20px; font-size: 22px; }
  .page-home #products .section__lead { margin-left: 20px; font-size: 13.5px; }
  .h-sec__all { font-size: 13px; }
  /* гаражът — лента най-горе, текстът под нея */
  .h-garage { display: block; min-height: 0; padding: 0 0 22px; }
  .h-garage__img { position: relative; left: auto; display: block; width: 100%; height: 150px; object-fit: cover; object-position: center; }
  .h-garage__wave { display: none; }
  .h-garage__text { padding: 16px 18px 0; max-width: none; }
  .h-garage__feats { flex-direction: column; gap: 6px; }
  .h-garage__feats > span { font-size: 14px; white-space: normal; }
  .h-garage__btn { width: 100%; justify-content: center; }
  .page-home #products { padding: 36px 0; }
  .h-blog__grid { grid-template-columns: 1fr; gap: 12px; }

  /* „Пазарувай по категории" — ЕДИН блок (Мариян, 07.11.2026: „да изглежда като общ блок, сега са
     разделени"): заглавието най-горе, под него полето от „Намери категория части", под него картите.
     БЕЗ каре около тях — на цялата ширина, както останалите секции (пробвано светлозелено каре:
     „стеснява, преди на целия екран ми харесваше повече"). Разметката не е местена — компютърът си е
     същият, редът тук е с order. Карето на търсачката се „разтваря" в блока: без фон, рамка и
     собствено заглавие — остават подсказката и полето (partials/catfind, catfind.css). */
  .page-home .h-cats > .container { display: flex; flex-direction: column; }
  /* главата се разпада (display: contents), за да се подредят поотделно: заглавието — най-горе,
     „Всички категории" — най-долу, като бутон след картите (иначе над полето стояха три реда текст) */
  .page-home .h-cats .h-sec__head { display: contents; }
  .page-home .h-cats .h-sec__title { order: -2; margin-bottom: 6px; }
  .page-home .h-cats .h-sec__all {
    order: 1; align-self: center; display: inline-flex; align-items: center; gap: 6px;
    height: 46px; margin-top: 16px; padding: 0 24px; border-radius: 999px;
    background: #fff; box-shadow: var(--lift-1); font-size: 14px;
  }
  .page-home .h-cats .h-catfind { order: -1; margin: 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .page-home .h-cats .h-catfind__title { display: none; }
  /* подсказката — под заглавието, подравнена с текста му (заглавието е с 20px отляво за чертата) */
  .page-home .h-cats .h-catfind__head { margin-bottom: 10px; padding-left: 20px; }
  .page-home .h-cats .h-catfind__sub { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .h-btn, .h-brand, .h-cat, .h-post, .h-post__img img { transition: none; }
}

/* ── „Продължи оттам, докъдето стигна" (partials/home-trail) — на компютър като на телефон
   (Мариян, 06.11.2026): без общо заглавие, три подгрупи със свои заглавия; колите —
   карти със снимката, категориите — плочки като „Най-търсени авточасти", търсенията — карти с
   лупа и „Потърси отново"; кръстчето — в ъгъла при посочване. Предишният вид (бяло каре с
   етикети вляво): ~/tools/backup-sauto-trail-desk-2026-11-06 (README там). ── */
@media (min-width: 861px) {
  .section--trail { padding: 40px 0 6px; }   /* без общо заглавие — групите си имат свои (06.11.2026) */

  .section--trail .foryou-group { display: block; padding: 0 0 28px; }
  .section--trail .foryou-group + .foryou-group { border-top: 0; }
  .section--trail .foryou-group__label { display: none; }
  .section--trail .foryou-group__title {
    position: relative; display: block; margin: 0 0 12px; padding-left: 18px;
    font-size: 19px; font-weight: 900; letter-spacing: -.3px; line-height: 1.15; color: #0f1b26;
  }
  .section--trail .foryou-group__title::before { content: ''; position: absolute; border-radius: 2px; background: linear-gradient(180deg, #6fb31a, #3f6e00); transform: skewX(-14deg); left: 3px; top: 1px; bottom: -1px; width: 6px; }
  .section--trail .foryou-group__title span { color: var(--accent); }

  /* колите — карти със снимката, по четири на ред */
  .section--trail .foryou-cars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .section--trail .rcar {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; padding: 0; overflow: hidden;
    border: 1px solid #e3e9de; border-radius: 16px; background: #fff; box-shadow: 0 12px 24px -18px rgba(15,27,38,.45);
    transition: border-color .2s, box-shadow .2s, transform .2s;
  }
  .section--trail .rcar:hover { border-color: #b5dc86; box-shadow: 0 18px 30px -18px rgba(79,135,1,.45); transform: translateY(-3px); }
  .section--trail .rcar__pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden;   /* като снимката (640×360) — нищо не се реже */
    color: #9fb08f; background: linear-gradient(160deg, #f5f9f0 0%, #e4eed8 100%); }
  .section--trail .rcar__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .section--trail .rcar__pic--small img { object-fit: contain; padding: 14px 24px; mix-blend-mode: multiply; }
  .section--trail .rcar__pic > svg { width: 50px; height: 50px; }
  .section--trail .rcar__body { display: flex; align-items: center; gap: 10px; padding: 12px 14px 14px 16px; border-top: 1px solid #edf1ea; }
  .section--trail .rcar .foryou-car__info { flex: 1; }
  .section--trail .rcar .foryou-car__model { font-size: 15.5px; font-weight: 800; }
  .section--trail .rcar .foryou-car__spec { font-size: 13px; }
  .section--trail .rcar__go {
    flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff;
    background: linear-gradient(135deg, #6fb31a 0%, #3f6e00 100%); box-shadow: 0 6px 14px -6px rgba(63,110,0,.75); transition: transform .15s;
  }
  .section--trail .rcar:hover .rcar__go { transform: translateX(2px); }
  .section--trail .rcar__go svg { width: 18px; height: 18px; }

  /* категориите — плочки като „Най-търсени авточасти" */
  .section--trail .foryou-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
  .section--trail .foryou-cat {
    flex-direction: column; justify-content: flex-start; gap: 8px; padding: 14px 10px 12px;
    border: 1px solid #e6ebe3; border-radius: 16px; background: #fff; text-align: center; font-size: 13.5px; font-weight: 800;
    box-shadow: 0 10px 20px -16px rgba(15,27,38,.45);
  }
  .section--trail .foryou-cat:hover { border-color: #b5dc86; color: var(--dark); box-shadow: 0 16px 28px -16px rgba(79,135,1,.45); transform: translateY(-2px); }
  .section--trail .foryou-cat__pic { display: grid; place-items: center; width: 100%; height: 76px; }
  .section--trail .foryou-cat__img { width: 76px; height: 76px; padding: 0; object-fit: contain; background: none; border-radius: 0; mix-blend-mode: multiply; }
  .section--trail .foryou-cat__pic:empty {
    width: 60px; height: 60px; margin: 8px 0; border-radius: 50%;
    background: #f1f7ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fb31a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5 9 5 9-5z'/%3E%3Cpath d='M3 8v8l9 5 9-5V8M12 13v8'/%3E%3C/svg%3E") center / 28px no-repeat;
  }
  .section--trail .foryou-cat__pic:empty + .foryou-cat__name { padding-left: 0; }
  .section--trail .foryou-cat__name { min-height: 2.5em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  /* търсенията — карти с лупа, номера и „Потърси отново" */
  .section--trail .foryou-searches { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .section--trail .foryou-search {
    display: flex; align-items: center; gap: 12px; height: auto; min-height: 66px; padding: 10px 46px 10px 12px;
    border: 1px solid #e3e9de; border-radius: 14px; background: #fff; box-shadow: 0 10px 20px -16px rgba(15,27,38,.45);
  }
  .section--trail .foryou-search:hover { border-color: #b5dc86; background: #fbfdf8; transform: translateY(-2px); }
  .section--trail .foryou-search > svg { width: 40px; height: 40px; flex: none; padding: 10px; border-radius: 12px; background: #eef6e4; color: var(--accent); }
  .section--trail .foryou-search__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .section--trail .foryou-search__q {
    font-family: inherit; font-size: 15.5px; font-weight: 800; letter-spacing: .2px; font-variant-numeric: tabular-nums;
    color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .section--trail .foryou-search__hint { display: block; font-size: 12.5px; font-weight: 600; color: #6b726a; }

  /* кръстчето — в ъгъла на карето, при посочване (style.css) */
  .section--trail .foryou-x { top: 8px; right: 8px; }
  .section--trail .foryou-search .foryou-x { top: 50%; right: 12px; margin-top: -11px; }
}
@media (max-width: 860px) {
  .foryou-group__ic, .foryou-group__n, .foryou-car__go, .foryou-trail__sub { display: none; }
}

/* Телефон: съдържанието на началната — на 8px от ръбовете, колкото редът „Моят гараж · Любими ·
   Профил" в хедъра (Мариян, 06.11.2026 — „по-симетрично"; дотогава 20px). Хедърът и футърът си
   пазят своето; лентите с плъзгане отиват до ръба на екрана. */
@media (max-width: 767px) {
  .page-home .container:not(.header__inner):not(.topbar__inner):not(.nav__inner):not(.mega__inner):not(.footer__grid):not(.footer__bottom-inner) {
    padding-left: 8px; padding-right: 8px;
  }
  .page-home .recent-cars__list, .page-home .section--trail .foryou-cars, .page-home .foryou-cats {
    margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; scroll-padding-inline: 8px;
  }
}