/* ============================================================================
   lift.css — натискаемото излиза над фона (Мариян, 07.11.2026)

   Сайтът стоеше бяло върху бяло: картите имаха само тънка рамка (#e4e4e7) и
   почти никаква сянка, затова окото не намираше кое се натиска. Тук са три неща:
     1. --lift-1 — сянка на два слоя (остър ръб + мек ореол) и рамка една идея
        по-тъмна за всички натискаеми карти в съдържанието;
     2. --canvas — светъл сиво-зелен фон на ЦЕЛИЯ сайт (body), за да има бялата
        карта върху какво да стои;
     3. на телефон снимката на продукта стои на светла плочка.

   КОНЦЕПЦИЯТА (за всяка нова страница): фонът е --canvas; натискаемото и панелите
   със съдържание са БЕЛИ карти (рамка --surface-line + --lift-1); текстът стои направо
   върху фона. НЕ слагай бял или светлосив фон на секция/main от край до край — върху
   фона става ивица (така бяха контакти, 404, статиите и осем страници с #f6f7f9).
   Светлосиво/светлозелено (#f4f6f3, #ecf4e7, --bg-soft) върху фона се слива — там
   карето/иконката става бяло.

   Зарежда се ПОСЛЕДЕН, за да надделява над style.css, mobile.css и CSS-а на
   страниците — на ТРИ места: layouts/app (след @stack('head')), home.blade.php
   и ai-chat.blade.php (тези двете имат СВОЙ <head> и не минават през layout-а —
   нова самостоятелна страница трябва да го добави сама). Връщане: махаш трите
   реда с lift.css — нищо друго не зависи от този файл.

   СПЕЦИФИЧНОСТТА — внимателно, тук беше капанът:
   - Компонентите от свързаните CSS файлове се хващат с ЕДИН клас (0,1,0) и
     печелят само по реда. Така собствените им :hover/.is-on правила (0,2,0)
     остават над нас — зелената рамка при посочване и избраното не се губят.
   - Партиалите с вграден <style> (car-tiers, oe-parts, generation-styles) са
     с @push('head') — и те идват ПРЕДИ този файл. Затова и там е един клас.
     Ако нов компонент вгради <style> в ТЯЛОТО, той ще надделее над нас —
     тогава му се добавя правило тук с :root отпред (0,2,0), не !important.
   - НЕ ползвай :is() със сложен селектор вътре — :is() взима специфичността
     на най-тежкия си аргумент и вдига целия списък (така прототипът прегази
     зелената рамка на избрания клас).
   ========================================================================== */

:root{
  --surface-line: #d8dde2;  /* рамката на натискаемите карти; --line (#e4e4e7) остава за разделителите */
  --lift-1: 0 1px 2px rgba(15,27,38,.07), 0 6px 16px -6px rgba(15,27,38,.22);
  --canvas: #eef1ec;        /* фонът зад картите — сив с полъх от зеленото на марката */
}

/* 1) Натискаемите карти в покой ------------------------------------------ */

/* а) рамката им е общата сива (--line) → по-тъмна рамка + сянка */
.product, .subitem, .mfilt, .ccar__change, .h-post,
.catbar--car .catsort{
  border-color:var(--surface-line);
  box-shadow:var(--lift-1);
}

/* б) имат СВОЯ оцветена рамка (синята на OE, зеленикавата на класовете и на
   картите от новата визия) → само сянката, рамката им си остава.
   car-tiers и oe-parts са с @push('head') — идват ПРЕДИ този файл, значи
   тук важи редът, както при свързаните файлове. */
.h-brand, .popcats__item, .brand-card, .catlinks__a,
.ctq__b, .oecard, .oe-jump{
  box-shadow:var(--lift-1);
}
/* избраният клас: пръстенът си остава, сянката отдолу се добавя */
.ctq__b.is-on{ box-shadow:0 0 0 3px rgba(143,209,58,.16), var(--lift-1) }

/* в) поколенията (partials/generation-styles — и той е в @push('head')).
   Техните :hover / .is-on (0,2,0) печелят — зелената сянка на избраното остава. */
.grel, .gbody, .geng{ box-shadow:var(--lift-1) }
/* двигател без части не се натиска за покупка — не бива да изпъква */
.geng.geng--nopart{ box-shadow:none }

/* Телефонът: mobile.css гаси сянката на :hover (там :hover „залепва" след
   докосване) — без това картата губи сянката си след първото натискане. */
@media (max-width:860px){
  .product:hover{ box-shadow:var(--lift-1); border-color:var(--surface-line) }
}

/* 2) Фонът — на ЦЕЛИЯ сайт ------------------------------------------------ */

/* Първо беше само зад списъците, после на началната; Мариян (07.11.2026): „обиколи всички
   страници и я имплементирай по еднакъв начин". Хедърът и футърът са със свой фон. */
body{ background:var(--canvas) }
/* модалът с подкатегориите (началната и хъбът на колата) — той е бял лист над страницата */
.catmodal__body{ background:var(--canvas) }

/* Какво се чупеше от фона — всяко с причината: */

/* началната: горната част беше градиент от сиво към БЯЛО — оставяше бяла ивица */
.page-home .h-top{ background:transparent }
/* Картите с главните категории (началната и хъбът на колата) бяха сиви (#f4f6f3), за да
   личат върху бялото — върху фона почти изчезваха. Стават бели, както при посочване.
   :not(:hover) — за да не прегазим зелената рамка при посочване (cat-cards.css). */
.h-cats .h-cat.card--photo:not(:hover){
  background:#fff;
  border-color:var(--surface-line);
  box-shadow:var(--lift-1);
}
/* „Покажи още части" беше бледозелен — върху фона се губеше */
.popcats__morebtn:not(:hover){ background:#fff; box-shadow:var(--lift-1) }

/* Статиите в блога (.bx) — всяка със СВОЙ style.css (database/content/blog/<статия>/), който
   слага бял фон на цялата статия и на навигацията ѝ: бяла ивица от край до край, а картите в нея
   — бяло върху бяло. Стилът им е в @push('head') — идва ПРЕДИ този файл, затова стига редът.
   Тук, а не във всяка статия: важи и за бъдещите (урокът е и в умението /sauto-blog). */
.bx{ background:transparent }
.bx .bx-sec--tint{ background:transparent }
.bx .bx-nav{ background:var(--canvas) }      /* лепкава — трябва ѝ плътен фон над текста */
.bx .bx-nav a:not(:hover){ background:#fff } /* чиповете бяха светлозелени — върху фона се губеха */

/* 3) Снимката на продукта на телефон — на светла плочка ------------------- */
/* multiply слива бялото на снимката с плочката, иначе стои бял правоъгълник */
@media (max-width:860px){
  .product__img{ background:#f4f5f3 }
  .product__img img{ mix-blend-mode:multiply }
}