/* ═══════════════════════════════════════════════════════════════════
   mimiart.bg - мостът към токените на темата

   Зарежда се СЛЕД `main.css` и след `koja-mimiart-dizajn.css`.

   Защо се презаписва СУРОВАТА палитра, а не семантичните роли:
   `main.css` е едновременно основата И кожата на Loralux. Теракотата
   и Manrope стоят в неговия `:root`, няма отделен `koja-loralux.css`.
   Семантичните имена (`--surface-page`, `--action-primary`) сочат към
   суровите (`--paper-100`, `--clay-400`), тоест смяната на суровите
   премества всичко наведнъж и нищо не остава забравено. Поотделно се
   пипат само местата, където mimiart РАЗДЕЛЯ нещо, което темата
   държи слято - марката и действието.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Шрифтове ─────────────────────────────────────────────────────
   Локални woff2, субсетнати с кирилица - без заявка към Google,
   без IP на посетителя навън и без блокирано рендиране. */
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/rubik-400.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/rubik-500.woff2') format('woff2')}
@font-face{font-family:'Rubik';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/rubik-600.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/golostext-400.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/golostext-500.woff2') format('woff2')}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/golostext-600.woff2') format('woff2')}

/* Резервни с изравнени метрики. Числата са СМЕТНАТИ от самите woff2
   с fontTools (средна ширина на буквите плюс hhea метриките), не
   предположени - виж `tools/build_fonts_mimiart.py`. Без тях смяната
   на шрифта мести текста и Lighthouse го брои като разместване. */
@font-face{font-family:'Rubik Fallback';src:local('Arial');size-adjust:102.03%;ascent-override:91.64%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:'Golos Fallback';src:local('Arial');size-adjust:105.13%;ascent-override:93.22%;descent-override:20.93%;line-gap-override:0%}

:root{
  /* ── Хартия: почти бяла, с едва доловим розов отенък ──────────────
     Розовото е ЗАГАТВАНЕ, не основен цвят (Никола, 22.10.2026). Преди
     това страницата беше #FFF1F3 и всичко плуваше в розово: лентата
     горе, фонът под снимките, полето на слайда. Сега носителят е бялото,
     а розовото остава само там, където казва чия е марката - знакът,
     значката „Ново", активната точка на плъзгача, ръбът при посочване.

     Неутралните не са сиви: в тях има следа от розовото, за да не
     изглеждат студени до него. */
  --paper-50:#FFFFFF;
  --paper-100:#FCFBFC;
  --paper-200:#F4F1F2;
  --paper-300:#E8E3E5;
  --paper-400:#CFC8CB;
  --paper-500:#A89DA1;

  /* ── Мастило ───────────────────────────────────────────────────── */
  --ink-900:#2E2226;
  --ink-800:#3A2C31;
  --ink-700:#54434A;
  --ink-600:#6E5A60;
  --ink-500:#8A7076;
  --ink-400:#A8939A;

  /* ── „Глина" вече е ПЕТРОЛЕНО СИНЬО ────────────────────────────
     Темата черпи от тази скала и за действието, и за марката. В
     mimiart двете са различни цветове, затова тук стои действието,
     а марката се отделя по-долу. Името на скалата не се сменя -
     то е част от основата и смяната му би поискала редакция в
     `main.css`, който е общ за трите сайта. */
  --clay-50:#E8F1F5;
  --clay-100:#CFE3EC;
  --clay-200:#8FC0D4;
  --clay-400:#1B5E7E;
  --clay-500:#174F6A;
  --clay-600:#123D52;

  /* ── Розово: самата марка ──────────────────────────────────────── */
  --rose-50:#FFF1F3;
  --rose-100:#F8E4E9;
  --rose-200:#EFC3CF;
  --rose-400:#D4749A;
  --rose-500:#C2185B;
  --rose-600:#A3134C;

  /* ── Второстепенни скали, пренасочени към розовото ─────────────── */
  --sage-50:#F3F7F5;
  --sage-100:#DCEAE4;
  --sage-400:#2E8A68;
  --sage-500:#1F7A5A;
  --moss-50:#E6F4EE;
  --moss-400:#1F7A5A;
  --rust-400:#C2185B;
  --ochre-200:#F3D2A6;
  --ochre-300:#D99B4A;

  /* ── Текст ─────────────────────────────────────────────────────
     Връзката и акцентът са ПЕТРОЛЕНИ, не розови: розовото е 2,4:1
     върху бяло и не може да носи дребен текст. */
  --text-accent:var(--clay-500);
  --text-link:var(--clay-500);
  --text-link-hover:var(--clay-600);
  --text-subtle:var(--ink-600);

  /* ── Действие ──────────────────────────────────────────────────── */
  --action-primary:var(--clay-400);
  --action-primary-hover:var(--clay-500);
  --action-primary-fg:#FFFFFF;

  /* ── Марка: тук и само тук розовото ───────────────────────────── */
  --brand:var(--rose-400);
  --brand-dark:var(--rose-500);
  --brand-soft:var(--rose-100);
  --accent:var(--rose-400);
  --accent-soft:var(--rose-100);
  --sale:var(--rose-500);

  /* ── Значки и състояния ────────────────────────────────────────
     „Ново" е розово поле с МАСТИЛЕН текст, не розов текст. */
  --badge-new-surface:var(--rose-100);
  --badge-new-fg:var(--ink-900);
  --status-success:#1F7A5A;
  --status-success-surface:#E6F4EE;
  --status-danger:var(--rose-500);
  --line-focus:var(--clay-400);

  /* ── Шрифтове ──────────────────────────────────────────────────── */
  --font-display:var(--mi-font-display);
  --font-sans:var(--mi-font-text);

  /* Golos Text е по-тесен от Manrope, тоест същият размер се чете
     по-дребен. Основният текст се вдига с един пункт. */
  --type-body:16px;
  --type-body-sm:14.5px;
  --type-caption:13px;

  /* Rubik е гротеска, не серифен шрифт: заглавията не искат
     отрицателна разредка колкото Playfair. */
  --tracking-display:-.012em;

  /* ── Радиуси: скалата на дизайн системата ──────────────────────── */
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-media:16px;
  --radius-card:16px;

  /* ── Сенки: тонирани в мастилото на кожата, никога неутрално черни ── */
  --shadow-sm:0 1px 2px rgba(46,34,38,.05);
  --shadow-card:0 1px 2px rgba(46,34,38,.04),0 8px 24px -12px rgba(46,34,38,.10);
  --shadow-lifted:0 2px 4px rgba(46,34,38,.05),0 18px 40px -16px rgba(46,34,38,.16);
  --shadow-button:0 18px 40px -16px rgba(27,94,126,.28);
  --shadow-overlay:0 24px 60px -20px rgba(46,34,38,.30);
  --glass-light:rgba(255,255,255,.90);
  --surface-scrim:rgba(46,34,38,.44);
}

/* ── Основният бутон ──────────────────────────────────────────────
   `main.css` закотвя `.btn--primary` ТВЪРДО върху `--clay-500`
   заради един контрастен проблем на Loralux (бял текст върху
   теракота беше 3,65). Тук скалата вече е петролена, тоест
   правилото работи в наша полза - но го повтаряме изрично, за да
   не зависим от чужда поправка, която утре може да се промени. */
.btn--primary,
.btn--primary:link,
.btn--primary:visited{background:var(--clay-400);border-color:var(--clay-400)}
.btn--primary:hover{background:var(--clay-500);border-color:var(--clay-500)}

/* ── Тъмните блокове ──────────────────────────────────────────────
   Колонтитулът и тъмните секции стъпват на мастилото на кожата, а
   приглушеният текст в тях сочи НАГОРЕ по стълбицата, не надолу. */
.section--dark,
.site-footer{
  background:var(--ink-900);
  --text-subtle:var(--paper-300);
  --text-muted:var(--paper-200);
  --text-body:var(--paper-200);
}

/* ── Знакът ───────────────────────────────────────────────────────
   Розетата е `currentColor`, тоест се пребоядисва с един ред, без
   втори файл. В колонтитула фонът е тъмен и розовото губи сила -
   там знакът светва. */
.brand-mark{color:var(--rose-400)}
.site-footer .brand-mark{color:var(--rose-200)}

/* ── Полета за писане ─────────────────────────────────────────────
   Рамката на поле е СОБСТВЕН токен, по-тъмен от косъма между
   картите: косъмът дели, рамката огражда и трябва да се види. */
input:not([type=checkbox]):not([type=radio]),
select,
textarea{border-color:var(--mi-border-control)}
input:focus,
select:focus,
textarea:focus{border-color:var(--mi-focus);outline-color:var(--mi-focus)}

/* Знакът в колонтитула и в чекмеджето: вграденият SVG е 64x64 по рождение. */
.site-footer .brand-mark,
.drawer__head .brand-mark{width:26px;height:26px;vertical-align:middle}
.site-footer__logo,
.drawer__head{display:flex;align-items:center;gap:8px}

/* ═══ Начална страница: търговски герой ══════════════════════════════

   Героят не разказва за марката, а ПРОДАВА: кампанийно поле, едър
   надпис, една оферта, две плочки с конкретна стока и един бутон.

   Контрастите са мерени: розовото поле носи МАСТИЛЕН текст (4,93:1) и
   никога бял (3,10:1); петроленото носи бял (7,12:1).

   Никаква анимация от прозрачност в първия екран: fade-in от
   `opacity: 0` отлага LCP точно с времето на анимацията. */

.mi-lenta{background:var(--paper-100);border-bottom:1px solid var(--rose-200)}
.mi-lenta__inner{display:flex;gap:clamp(14px,3vw,34px);flex-wrap:wrap;justify-content:center;padding:10px 0;font-size:13.5px;color:var(--ink-700)}

.mi-promo{padding:clamp(16px,2.5vw,28px) 0 0}
/* `min-width: 0` е задължително: клетка в grid/flex не пада под
   min-content на съдържанието си и лентата би станала широка колкото
   СБОРА на слайдовете. */
.mi-promo__lenta{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;min-width:0}
.mi-promo__lenta::-webkit-scrollbar{display:none}

.mi-slaid{flex:0 0 100%;scroll-snap-align:start;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,40px);align-items:center;padding:clamp(22px,4vw,52px);border-radius:var(--radius-lg)}
/* Две полета, редуващи се: бледорозово и бяло. Бялото носи косъм, за
   да се отдели от страницата, която сама е бледорозова. */
.mi-slaid--soft{background:var(--rose-100);color:var(--ink-900)}
.mi-slaid--bial{background:#FFFFFF;color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--paper-300)}

.mi-slaid__nadpis{font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0;opacity:.85}
.mi-slaid__zaglavie{font-family:var(--font-display);font-size:clamp(28px,4vw,52px);line-height:1.04;margin:8px 0 0;letter-spacing:-.012em;text-wrap:balance;color:inherit}
.mi-slaid__oferta{font-size:17px;line-height:1.5;margin:14px 0 0;max-width:34ch;opacity:.92}
.mi-slaid__buton{display:inline-block;margin-top:22px;padding:13px 26px;border-radius:var(--radius-pill);font-weight:500;font-size:16px;text-decoration:none;background:var(--clay-400);color:#FFFFFF}
.mi-slaid__buton:hover{background:var(--clay-500)}

.mi-slaid__plochki{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
/* Една плочка не бива да заема половин ширина и да оставя празно до
   себе си - заема цялата колона, но с таван, за да не се раздуе на
   широк екран. */
.mi-slaid__plochki--edna{grid-template-columns:minmax(0,1fr);max-width:300px;margin-inline:auto}
.mi-plochka{display:block;background:var(--surface-card);border:1px solid var(--paper-300);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:var(--ink-900)}
.mi-plochka:hover{border-color:var(--rose-200)}
.mi-plochka img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.mi-plochka__etiket{display:block;padding:10px 12px;font-size:14px;line-height:1.3;text-align:center}

.mi-promo__nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.mi-strelka{width:40px;height:40px;border-radius:var(--radius-pill);border:1px solid var(--paper-300);background:var(--surface-card);color:var(--ink-700);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.mi-strelka:hover{border-color:var(--mi-border-control)}
.mi-promo__tochki{display:flex;gap:8px;align-items:center}
.mi-tochka{width:9px;height:9px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--paper-400);cursor:pointer;transition:width var(--dur-fast) var(--ease-standard),background var(--dur-fast) var(--ease-standard)}
.mi-tochka.e-tekushta{background:var(--rose-400);width:26px}

.mi-zakogo{margin-top:var(--section-y)}
.mi-zakogo__snimka{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}
.mi-zakogo__snimka img{display:block;width:100%;height:auto}
.mi-zakogo__nadpis{position:absolute;right:clamp(16px,4vw,56px);top:50%;transform:translateY(-50%);max-width:38%}
.mi-zakogo__nadpis h2{font-family:var(--font-display);font-size:clamp(22px,2.6vw,34px);line-height:1.1;margin:6px 0 0;color:var(--ink-900);text-wrap:balance}

.mi-karti{margin-top:8px}
.mi-karta{background:var(--surface-card);border:1px solid var(--paper-300);border-radius:var(--radius-lg);padding:20px}
.mi-karta h3{font-family:var(--font-display);font-size:18px;margin:0 0 8px;color:var(--ink-900)}
.mi-karta p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-600)}

@media (max-width:860px){
  .mi-slaid{grid-template-columns:1fr;gap:16px}
  .mi-slaid__oferta{font-size:16px;max-width:none}
  /* Плочките остават две една до друга и на телефон: те са самата
     стока и под текста се четат като „ето какво". */
  .mi-zakogo__nadpis{position:static;transform:none;max-width:none;margin-top:14px}
}

/* Знакът в шапката. Подзаглавието е дълго („материали за ръчна изработка"),
   затова под 420 px пада - иначе хедърът става по-широк от екрана. Това вече
   ни е хапало на Loralux: при 360 px количката излизаше наполовина извън
   екрана и не личеше на широк монитор. */
.site-header .brand-mark{width:30px;height:30px;flex:0 0 auto}
.logo{display:flex;align-items:center;gap:8px}
@media (max-width:420px){
  .site-header .brand-mark{width:26px;height:26px}
}
@media (max-width:359px){
  .logo__tag{display:none}
}

/* Телефон: слайдът се стяга, за да остане място и за стоката под него.
   Преди това едно обещание се чупеше на три реда, а заглавието и бутонът
   заемаха целия екран. */
@media (max-width:620px){
  .mi-promo{padding-top:12px}
  .mi-slaid{padding:18px 16px;gap:14px;border-radius:var(--radius-md)}
  .mi-slaid__nadpis{font-size:11.5px;letter-spacing:.12em}
  .mi-slaid__zaglavie{font-size:26px;line-height:1.08;margin-top:6px}
  .mi-slaid__oferta{font-size:15px;margin-top:8px}
  .mi-slaid__buton{margin-top:14px;padding:11px 20px;font-size:15px}
  .mi-plochka__etiket{font-size:13px;padding:8px 10px;line-height:1.25}
  .mi-promo__nav{margin-top:12px;gap:10px}
  .mi-strelka{width:36px;height:36px}
}

/* ═══ Бутонът „Купи" в картата ═══════════════════════════════════════
   `main.css` прави hover-а НАЙ-ТЪМНОТО мастило. Това е проблем на две
   нива. Първо, почти черен бутон насред светла карта изглежда като
   грешка, а не като действие. Второ и по-лошо: на телефон hover
   ЗАЛЕПВА след докосване - бутонът остава тъмен, докато човекът не
   пипне другаде, и това изглежда като счупена анимация.

   Тук hover е петроленият цвят на действието и важи САМО там, където
   има истински показалец. На докосване обратната връзка идва от
   натискането, не от задържането. */
.btn--add{
  border-color:var(--mi-border-control);
  color:var(--ink-800);
  font-weight:500;
  letter-spacing:0;
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard);
}
@media (hover:hover){
  .btn--add:hover{background:var(--clay-400);color:#FFFFFF;border-color:var(--clay-400)}
}
@media (hover:none){
  .btn--add:hover{background:var(--surface-card);color:var(--ink-800);border-color:var(--mi-border-control)}
}
.btn--add:active{background:var(--clay-500);color:#FFFFFF;border-color:var(--clay-500);transform:scale(var(--press-scale))}
.btn--add:focus-visible{outline:2px solid var(--clay-400);outline-offset:2px}