/* ═══════════════════════════════════════════════════════════════
   Общ слой върху страниците.

   Страниците идват с оформление в самите елементи (style="…"), затова
   правилата тук носят !important. Без него всеки ред щеше да отстъпи
   пред стила в елемента. Пипаме само това, което трябва да се промени.
   ═══════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   Ширината на колоната със съдържание, на едно място.

   1200px e обичайната ширина за сайт с текст и снимки: на екран 1600
   остават по 200px от двете страни, на 1920 по 360px. При 1400px редовете
   стигаха почти до ръба и окото нямаше къде да се опре.

   Стойността се пише САМО тук. Страничните полета в секциите ги
   пише oformlenie.py при строежа, но счита с var(--shirina), затова числото
   не се повтаря на второ място.
   ════════════════════════════════════════════════════════════════ */

:root {
  --shirina: 1200px;
}

/* ── Клетките в решетка могат да се свиват ────────────────────────
   По подразбиране min-width на клетка в решетка е auto, тоест клетката не
   слиза под най-широкото нещо в себе си. На телефон това разпъваше стълба
   до 366 или 399 пиксела в кутия от 310 и текстът излизаше извън екрана,
   а страницата го отрязваше. Страниците пишат оформлението си в самите
   елементи, затова се хващат по style.

   Само на телефон и само за решетките с фиксиран брой стълбове. Списъците
   с `repeat(auto-fit, minmax(min(100%, 17rem), 1fr))` разчитат точно на
   auto ширината: без нея процентът в minmax пада до нула, auto-fit прави
   по един стълб на елемент и четири карти се смачкват на по сто пиксела с
   надписи един върху друг. */
@media (max-width: 760px) {
  [style*="display: grid"]:not([style*="auto-fit"]) > * {
    min-width: 0;
  }
}

/* ── Картите се подреждат една под друга ─────────────────────────
   Досега това го решаваше само скриптът, при зареждане и при промяна
   на размера. Докато той се обади, картата стоеше на две колони и на
   телефон снимката се свиваше до петдесет пиксела, покрита от текста.
   Тук същото стои в CSS, затова е вярно от първия кадър и когато
   скриптът закъснее. */
@media (max-width: 1100px) {

  [data-spread] {
    grid-template-columns: 1fr !important;
  }

  [data-spread] > [data-media] {
    position: relative !important;
    top: auto !important;
    order: 0 !important;
    align-self: stretch !important;
    height: clamp(15rem, 40vh, 22rem) !important;
    min-height: 0 !important;
  }

  [data-spread] > [data-body] {
    order: 0 !important;
    margin: 0 !important;
  }
}

/* ── Двата бутона в херото: златният и телефонът ─────────────────
   ⛔ На телефон двойката я няма в херото: долу стои постоянната лента със
   същите две действия (assets/css/lenta.css). Скрива се само ред, в който
   има телефон; „Вижте процедурите“ и „Вижте апаратите“ в „За нас“ остават.

   На десктоп двата са еднакви златни бутона, по желание на Атанас:
   телефонът е само номерът, без иконка. Двата са компактни, за да не
   стига двойката до средата на страницата.

   ⛔ При посочване и двата реагират ЕДНАКВО и ясно: изсветляват, получават
   тъмна рамка отвътре, повдигат се и леко растат (scale). Растат с
   transform, не с разредка или поле, затова съседът не мърда. Разредката е
   заключена с !important: старият ефект разреждаше буквите само на левия,
   той ставаше по-широк, а десният не, и двата изглеждаха различно. */
@media (max-width: 760px) {
  [data-hero-cta]:has(> a[href^="tel:"]) { display: none !important; }
  /* Описанието под заглавието в херото на началната на процедурите. */
  [data-skrij-telefon] { display: none !important; }
  /* Херото расте с текста си, без долна граница. Скриптът на страницата му
     дава поне 82% от екрана; откакто бутоните паднаха, херо без снимка
     (интимно подмладяване) оставаше наполовина празно. Херо със снимка е
     по-високо от 82% и така или иначе не се мени. */
  [data-hero] { min-height: 0 !important; }
}

/* На много тесен телефон заглавието в херото се смалява с ширината. Думите
   с тире и кратките думи в заглавията са свързани, за да не се чупят
   грозно („и увереността“), и на 320 px свързаното парче при най-
   малкия размер от 2.7rem излизаше вдясно от екрана. От 370 px нагоре си
   остава 2.7rem. */
@media (max-width: 370px) {
  [data-hero] h1 { font-size: clamp(2.1rem, 11.2vw, 2.7rem) !important; }
}

/* Картите с ползите на тесен телефон: заглавието стои вдясно до кръгчето,
   в тясна колона, и дълга дума като „възстановителен“ при 1.7rem излизаше
   от картата. Полетата на лентата и на картата падат, а заглавието се
   смалява с ширината; ако и така не стига, думата се пренася, вместо да
   излезе навън. */
@media (max-width: 400px) {
  [data-polzi] { padding-left: 1.2rem !important; padding-right: 1.2rem !important; }
  [data-polzi] li { padding: 1.1rem !important; column-gap: 0.8rem !important; }
  [data-polzi] li > b { font-size: clamp(1.25rem, 7.2vw, 1.7rem) !important; overflow-wrap: break-word; }
}

@media (min-width: 761px) {
  [data-hero-cta]:has(> a[href^="tel:"]) { column-gap: 1rem !important; }
  [data-hero-cta]:has(> a[href^="tel:"]) > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.95rem 1.5rem !important;
    border-radius: 5px;
    background: linear-gradient(135deg, #E4C98F 0%, #B8934F 52%, #8A6B3F 100%) !important;
    font-family: "Manrope", "Segoe UI", sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    color: #241A12 !important;
    white-space: nowrap;
    transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
  }
  [data-hero-cta]:has(> a[href^="tel:"]) > a:hover,
  [data-hero-cta]:has(> a[href^="tel:"]) > a:focus-visible {
    filter: brightness(1.18) saturate(1.08) !important;
    box-shadow: 0 14px 30px rgba(138,107,63,0.45), inset 0 0 0 2px rgba(59,44,33,0.9) !important;
    transform: translateY(-2px) scale(1.06) !important;
  }
}

/* ── Стрелките на трансформациите на телефон ────────────────────────
   Новите стрелки идват от assets/js/strelki.js и стоят отляво и отдясно
   върху снимката. На телефон оригиналните бутони под табовете и броячът
   „01 / 08“ се крият (скриптът ги е белязал); на десктоп новите ги няма и
   всичко е както преди. */
.dd-strelka { display: none; }
@media (max-width: 760px) {
  [data-strelki-red],
  [data-strelka-izvor] { display: none !important; }
  .dd-strelka {
    position: absolute; top: 50%; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin-top: -21px; padding: 0 0 3px;
    border: 1px solid #B8934F; border-radius: 5px;
    background: rgba(248,244,237,0.92); color: #3B2C21;
    font-family: inherit; font-size: 1.7rem; line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(38,35,32,0.2);
    -webkit-tap-highlight-color: transparent;
  }
  .dd-strelka:active { background: #B8934F; color: #F8F4ED; }
  .dd-strelka--l { left: 0.6rem; }
  .dd-strelka--d { right: 0.6rem; }
}

/* ── Телефон ─────────────────────────────────────────────────── */
@media (max-width: 760px) {

  /* Бутоните минават от край до край. На тесен екран златният бутон
     стоеше свит вляво и се уцелваше трудно с палец. */
  [data-dd-btn] {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    /* Пълната ширина прави широкото странично поле излишно, а то
       буташе дългите надписи на втори ред: „ЗАПАЗЕТЕ ЧАС ОНЛАЙН"
       и „БЕЗПЛАТНА КОНСУЛТАЦИЯ" се чупеха на два. С 1rem от двете
       страни най-дългият надпис (265px) се побира в един ред. */
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Обвивките около бутона също се разпъват, иначе бутонът пълни
     контейнер, който сам се е свил до текста си.

     [data-hero-cta] е изключен: в херото на студиата той е пряко дете на
     <header> и си има свои полета от 1.7rem, зададени от скрипта на
     страницата. width: 100% там значеше 100% от целия екран и редът с
     бутона излизаше 31 пиксела извън телефона. */
  *:not([data-hero-cta]):has(> [data-dd-btn]) {
    width: 100% !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
  }

  /* Редът с бутоните става колона, за да не се смачкват един до друг. */
  [data-hero-cta],
  *:has(> * > [data-dd-btn]) {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ── Менюто остава на един ред ──────────────────────
     Горните две правила говорят за обвивките около златния бутон.
     Златният бутон стои и в менюто, вътре в [data-navpaths], затова
     <nav> също се връщаше колона: логото отгоре, а бургерът под него
     вляво. Тук менюто си връща реда: лого вляво, бургер вдясно. */
  [data-nav] {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: auto !important;
  }

  /* Бургерът се залепя за десния ръб, дори ако скритият
     [data-navpaths] между двата реши да заеме място. */
  [data-nav] > [data-burger] {
    margin-left: auto !important;
    flex: 0 0 auto !important;
    width: 48px !important;
  }

  /* Телефонният номер до бутона също заема целия ред. */
  [data-hero-cta] > a[href^="tel:"],
  [data-hero-cta-phone] {
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Текстът върху снимката в картите беше колкото на десктоп и на
     триста пиксела ширина изяждаше кадъра. */
  [data-media] b {
    font-size: 1.45rem !important;
  }

  [data-media] span {
    font-size: 0.66rem !important;
    letter-spacing: 0.12em !important;
  }

  /* Лентата с номера и името сяда по-плътно до ръба. */
  [data-media] > span[style*="position: absolute"][style*="bottom"] {
    padding: 0.6rem 0.9rem !important;
    gap: 0.5rem !important;
  }

  /* Значките в горния ъгъл на картата. */
  [data-media] > span[style*="position: absolute"][style*="top"] {
    padding: 0.35rem 0.7rem !important;
  }
}

/* ── Широк екран ─────────────────────────────────────────────────
   Таванът на ширината седи в самите секции (padding: max(…)), за да
   остане фонът от край до край.

   Две места нямат странично поле в маркъпа и затова оставаха
   разпънати: текстът в херото, който е закачен абсолютно, и лентата
   с трите числа под него. Тук получават същия таван. */

/* Херото. Страниците на апаратите и тази за Деница ползват
   [data-hero-text], останалите [data-hero-content]; и двете са закачени
   абсолютно и без таван заглавието им тръгваше на 96 пиксела, докато
   всяко заглавие под тях тръгва на 193. */
[data-hero-content],
[data-hero-text] {
  left: max(clamp(1.8rem, 6vw, 6rem), calc((100% - var(--shirina)) / 2)) !important;
  right: max(clamp(1.8rem, 6vw, 6rem), calc((100% - var(--shirina)) / 2)) !important;
}

/* На страницата за Деница текстът не е закачен абсолютно, а стои в решетка
   със свое поле, затова горното правило не го стига. */
[data-hero-grid] {
  padding-left: max(clamp(1.8rem, 6vw, 6rem), calc((100% - var(--shirina)) / 2)) !important;
  padding-right: max(clamp(1.8rem, 6vw, 6rem), calc((100% - var(--shirina)) / 2)) !important;
}

[data-promise] {
  padding-left: max(0px, calc((100% - var(--shirina)) / 2)) !important;
  padding-right: max(0px, calc((100% - var(--shirina)) / 2)) !important;
}

/* Лентата с трите числа стоеше по-навътре от всичко останало: върху тавана
   сядаха още две полета, едно на обвивката и едно на първата клетка, и
   текстът тръгваше на 295 пиксела вместо на 193 като заглавията наоколо.
   Обвивката остава без странично поле, а крайните клетки без своето. */
[data-promise] > div {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (min-width: 761px) {
  [data-promise] > div > :first-child { padding-left: 0 !important; }
  [data-promise] > div > :last-child { padding-right: 0 !important; }
}

@media (max-width: 760px) {
  [data-promise] > div > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* „Преди и след“ е лента като всяка друга. Скриптът на хъба ѝ дава свое
   поле от 64 пиксела при всяко преоразмеряване, затова тук стои !important:
   иначе секцията стърчи по-широка от съседите си. */
[data-ba-section] {
  padding: clamp(3.6rem, 9vh, 6rem)
           max(clamp(1.8rem, 6vw, 6rem), calc((100% - var(--shirina)) / 2)) !important;
}

/* ── Заглавието стои, докато списъкът до него минава ──────────────
   При секциите с два стълба късият стълб със заглавието се залепя, а
   дългият тече покрай него. Така работят „бизнес модел“ и „зоните в
   групата“, но при въпросите, параметрите и MPT липсваше и заглавието
   изчезваше нагоре още на първия екран.

   Границата е същата, която ползва скриптът на страниците за своите
   лепкави стълбове: при 1100 и надолу двата стълба стават един, а лепкаво
   заглавие там би покрило текста под себе си. */
@media (min-width: 1101px) {
  #vaprosi > div > div:first-child,
  #parametri > div > div:first-child,
  #mpt > div > div:first-child,
  [data-picker] > [data-list] {
    position: sticky !important;
    top: 104px !important;
    align-self: start !important;
  }
}

/* ── Никоя карта не остава сама на втори ред ──────────────────────
   Редиците карти се редят с repeat(auto-fit, minmax(min(100%, 17rem), 1fr)).
   При колона 1400 четирите карти на „Как минава посещението“ се побираха
   точно; при 1200 четвъртата пада сама на втори ред и редът изглежда счупен.

   Ширината на колоната е решението, което искаме, затова тук се фиксира
   броят колони по броя карти. Между телефона и широкия екран четирите
   стават две по две, пак без самотна карта.

   Стойността в minmax е белегът, по който се разпознава редицата: 17rem
   са картите с номер и заглавие, 22rem са по-широките с повече текст.

   Границите са в пиксели нарочно. В media query rem се смята с началните
   16px, а не с 19-те на страницата, затова 68rem значеше 1088 и четирите
   карти се включваха твърде рано, по 232 пиксела всяка. */

@media (min-width: 640px) {
  [style*="minmax(min(100%, 17rem)"]:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 1290 е ширината, при която колоната стига 1170 и всяка от четирите
   карти получава около 270 пиксела: заглавието се събира на два реда. */
@media (min-width: 1290px) {
  [style*="minmax(min(100%, 17rem)"]:has(> :last-child:nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1180px) {
  [style*="minmax(min(100%, 22rem)"]:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ── Редовете „название · стойност“ на телефон ────────────────────
   Тези редове са решетка от три или две клетки: точица, название и
   стойност вдясно. Стойността е `auto`, тоест взима каквото ѝ трябва,
   а названието е `1fr`. На телефон мястото не стига, `1fr` пада до
   нула и названието се изписва върху стойността: точно припокриването
   от снимката. Затова на телефон стойността слиза под названието и
   тръгва отляво, вместо да се бори за същия ред. */
@media (max-width: 760px) {

  /* Само `li`. Същата решетка носи и редове, чиято последна клетка е
     стрелка: „›“ в бутоните на списъците и кръгчето в разгъващите се
     заглавия. Слезе ли и тя на нов ред, стрелката увисва под текста,
     вместо да стои до него. Стойност за сваляне има само в `li`. */
  li[style*="grid-template-columns: auto 1fr auto"] {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
    row-gap: 0.3rem !important;
  }

  li[style*="grid-template-columns: auto 1fr auto"] > :last-child {
    grid-column: 2 !important;
    text-align: left !important;
  }

  /* Пипне ли скрипт кое да е поле от style, браузърът пренаписва целия
     атрибут в своя запис и `minmax(0, 1fr)` става `minmax(0px, 1fr)`.
     Затова тук стоят и двата изписа: иначе правилото хваща едните редове,
     а другите остават счупени, според това по кой ред е минал скриптът. */
  li[style*="grid-template-columns: minmax(0, 1fr) auto"],
  li[style*="grid-template-columns: minmax(0px, 1fr) auto"] {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0.3rem !important;
  }

  li[style*="grid-template-columns: minmax(0, 1fr) auto"] > :last-child,
  li[style*="grid-template-columns: minmax(0px, 1fr) auto"] > :last-child {
    text-align: left !important;
  }
}

/* ── Лентата с числата иска поле и на телефон ─────────────────────
   Горе ѝ махнахме страничното поле, за да седне на същата линия като
   заглавията на голям екран. На телефон обаче таванът е нула и текстът
   опира до самия ръб на екрана, а едрите числа изглеждат отрязани.
   Тук лентата си връща същото поле, с което вървят всички секции. */
@media (max-width: 760px) {
  [data-promise] {
    padding-left: clamp(1.8rem, 6vw, 6rem) !important;
    padding-right: clamp(1.8rem, 6vw, 6rem) !important;
  }

  [data-promise] > div > * {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  [data-promise] > div > * + * {
    border-top: 1px solid rgba(184,147,79,0.32) !important;
  }
}

/* ── Дръжката на трансформациите ──────────────────────────────────
   В кръгчето стояха знаците „‹ ›“. На iPhone системата ги рисува с
   друг шрифт и вместо две стрелки излиза странна иконка. Знакът пада,
   а стрелките се рисуват като картинка: една и съща на всеки телефон. */
[data-ba-handle] > span {
  font-size: 0 !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cg fill='none' stroke='%23F8F4ED' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5 4 6l4 3.5'/%3E%3Cpath d='M14 2.5 18 6l-4 3.5'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px 12px !important;
}

/* ── Контактите ──────────────────────────────────────────────────
   На широк екран формата се закача и стои на екрана, докато вляво
   минават картите на двата салона, както на страницата „Контакти“. На
   тесен екран колоните са една под друга и закачането се маха. */
@media (max-width: 1100px) {

  [data-kontakt-karta], [data-kontakt-forma-kolona] {
    position: static !important;
    top: auto !important;
  }
}

/* Номерът в контактите е с едри цифри и на тесен екран се пречупваше на
   два реда в бутона. Полето отстрани се свива и шрифтът пада точно
   толкова, колкото номерът да седне на един ред. */
@media (max-width: 760px) {

  [data-kontakt-tel] {
    padding-left: 0.8rem !important;
    padding-right: 0.8rem !important;
    font-size: 1.32rem !important;
  }

  /* Линкът към Google Maps сяда под бутона, не до него. Редът е flex с
     пренасяне, затова align-self не му дава ширина — трябва width. */
  [data-kontakt-vrazka] {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ── Падащият списък във формата за контакти ─────────────────────
   Същият, който стои на страниците за запитване: панел точно с ширината
   на полето, със собствено превъртане. Системният <select> се мери по
   най-дългото име в него и на телефон излизаше извън страницата. */
.izbor { position: relative; }

.izbor-buton {
  width: 100%; text-align: left;
  padding: 0.85rem 2.6rem 0.85rem 1rem;
  border: 1px solid rgba(184,147,79,0.4); border-radius: 5px;
  background-color: #FFFFFF; color: #262320;
  font-family: inherit; font-size: 1rem; line-height: 1.4; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A6B3F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
}

.izbor-buton[data-prazno] { color: rgba(38,35,32,0.72); }
.izbor-buton:focus { outline: none; border-color: #B8934F; }

.izbor-spisak {
  position: absolute; z-index: 40; top: calc(100% + 0.35rem); left: 0; right: 0;
  max-height: 17rem; overflow-y: auto;
  display: flex; flex-direction: column;
  border: 1px solid rgba(184,147,79,0.4); border-radius: 5px;
  background: #FFFFFF;
  box-shadow: 0 16px 40px rgba(38,35,32,0.18);
}

.izbor-spisak[hidden] { display: none; }

.izbor-spisak button {
  padding: 0.8rem 1rem; border: 0; border-bottom: 1px solid rgba(184,147,79,0.22);
  background: transparent; color: #262320;
  font-family: inherit; font-size: 1rem; line-height: 1.4;
  text-align: left; cursor: pointer;
}

.izbor-spisak button:last-child { border-bottom: 0; }

.izbor-spisak button:hover,
.izbor-spisak button[aria-selected="true"] { background: rgba(184,147,79,0.14); }

[data-kontakt-forma] input:focus,
[data-kontakt-forma] textarea:focus { outline: 2px solid #B8934F; outline-offset: 1px; }

/* Списъкът не е <input> и браузърът не го пази сам, затова празният избор
   се показва с рамката на полето и с ред под него. */
[data-izbor][data-greshka] .izbor-buton { border-color: #A33A28; }


/* ── Отзиви ─────────────────────────────────────────────────────────
   Релсата с отзивите, пренесена от `Отзиви секция.dc.html`. Оттам идва
   и този ред: лентата се влачи с мишка, затова браузърната лента за
   скрол само шуми под нея. */
[data-otz-rail] { scrollbar-width: none; }
[data-otz-rail]::-webkit-scrollbar { display: none; }


/* ── Екипът ─────────────────────────────────────────────────────────
   Друг ритъм от процедурните разтвори: изправен кадър отгоре, после
   името и началото на текста. Разтворите са широки и се застъпват,
   тези стоят събрани, за да има контраст между двете. */
.ekip-karti {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 19.5rem));
  justify-content: start;
  gap: clamp(1.4rem, 2.6vw, 2.2rem);
  margin-top: clamp(2rem, 4.5vh, 3rem);
}
.ekip-karti.dve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ekip-karta {
  display: flex; flex-direction: column; background: #FFFFFF;
  border-top: 2px solid #B8934F; border-radius: 5px; overflow: hidden;
  box-shadow: 0 18px 44px rgba(160,140,125,0.22);
}
.ekip-karta img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.ekip-tqlo { display: flex; flex-direction: column; gap: 0.55rem; padding: clamp(1.2rem, 2.2vw, 1.7rem); }
.ekip-rolq {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #8A6B3F;
}
.ekip-ime {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: 1.6rem; line-height: 1.12; color: #262320;
}
.ekip-tekst {
  position: relative; max-height: 7.4rem; overflow: hidden;
  font-size: 0.94rem; line-height: 1.7; color: #3B2C21;
}
.ekip-tekst p + p { margin-top: 0.7rem; }
.ekip-senka {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3rem; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), #FFFFFF 78%);
}
.ekip-povece {
  align-self: flex-start; margin-top: 0.35rem; padding: 0.55rem 1.1rem;
  border: 1px solid #B8934F; border-radius: 5px; background: transparent; color: #3B2C21;
  font-family: inherit; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; cursor: pointer; transition: background 0.35s, color 0.35s;
}
.ekip-povece:hover { background: #B8934F; color: #F8F4ED; }

/* ── Връзка вътре в текста на картата ──────────────────────────
   Само Деница има собствена страница, затова само в нейния текст
   името на бранда е връзка. Подчертаването я отличава от думите
   около нея, без да къса реда. */
.ekip-tekst a {
  color: #8A6B3F; border-bottom: 1px solid rgba(184,147,79,0.55);
  transition: color 0.35s, border-color 0.35s;
}
.ekip-tekst a:hover { color: #B8934F; border-color: #B8934F; }

@media (max-width: 900px) {
  .ekip-karti, .ekip-karti.dve { grid-template-columns: minmax(0, 1fr); }
}

/* Превключвателите на трансформациите. Кой свети се решава от класа,
   защото рендерът пренаписва инлайн стила при всяко натискане. */
[data-tab]:not(.tab-aktiven) { background: transparent !important; }
[data-tab].tab-aktiven { background: #B8934F !important; }
/* На телефон табовете са в две колони и „Двойна брадичка“, „Гневна бръчка“
   се пречупваха на два реда. По-малка разредка и отстъп, за да са на един. */
@media (max-width: 760px) {
  [data-tab] {
    padding-left: 0.35rem !important; padding-right: 0.35rem !important;
    font-size: 0.74rem !important; letter-spacing: 0.04em !important; line-height: 1.3;
  }
}

/* Мега менюто за групите апарати е в navigacia.css. */

/* Панелът на зоната на десктоп стои до списъка и не е по-висок от екрана:
   текстът в него се превърта с колелцето, без видима лента. Докато има още
   за четене, на долния ръб стои кръгче със стрелка, като при разгъващите
   се списъци: половината е в празното поле на панела, половината под него,
   и не покрива текст. Натиснато, превърта панела надолу; на края изчезва.
   Точната височина, кръгчето и data-oshte ги слага razgavane.js. */
.dd-oshte-strelka { display: none; }
@media (min-width: 1001px) {
  [data-panels] > [data-panel] {
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  [data-panels] > [data-panel]::-webkit-scrollbar { display: none; }
  .dd-oshte-strelka {
    position: absolute; left: 50%; bottom: -1.3rem; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; margin-left: -1.3rem; padding: 0;
    border: 1px solid #B8934F; border-radius: 50%;
    background: #F8F4ED; color: #8A6B3F; cursor: pointer;
    box-shadow: 0 6px 16px rgba(160,140,125,0.28);
    transition: background-color 0.25s ease, transform 0.25s ease;
  }
  .dd-oshte-strelka:hover, .dd-oshte-strelka:focus-visible { background: #ECDFCC; transform: translateY(2px); }
  .dd-oshte-strelka[hidden] { display: none; }
}

/* ── „С какво работим“: апаратите на страниците на процедурите ──────
   На десктоп е разпределена като трансформациите: вляво заглавие, бутони
   с апаратите и обяснение, вдясно снимката. На телефон редът е бутони,
   снимка, обяснение, така че името, снимката и текстът се виждат заедно.
   Поведението е в aparati.js. */
.dd-ap {
  padding: clamp(3.6rem, 9vh, 6rem) max(clamp(1.8rem, 6vw, 6rem), calc((100% - 1200px) / 2));
  background: #FFFFFF;
}
.dd-ap-mreja {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "glava scena" "opisi scena";
  column-gap: clamp(2rem, 5vw, 4rem); row-gap: 1.6rem;
  max-width: 94rem; margin: 0 auto;
}
.dd-ap-glava { grid-area: glava; align-self: end; }
.dd-ap-scena { grid-area: scena; align-self: center; }
.dd-ap-opisi { grid-area: opisi; }
.dd-ap-kiker {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-size: 0.86rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #8A6B3F;
}
.dd-ap-kiker > span { display: block; width: 2.6rem; height: 2px; background: linear-gradient(90deg, #B8934F, rgba(184,147,79,0)); }
.dd-ap-zaglavie {
  margin-top: 1.2rem; font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400; font-size: clamp(2rem, 3.6vw, 3.1rem);
}
.dd-ap-zaglavie em { font-style: italic; color: #8A6B3F; }
.dd-ap-butoni { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.dd-ap-buton {
  padding: 0.7rem 1.3rem; border: 1px solid #B8934F; border-radius: 5px; background: transparent;
  color: #241A12; font-family: inherit; font-size: 0.84rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color 0.35s ease;
}
.dd-ap-buton.dd-ap-on { background: #B8934F; }
.dd-ap-ramka { position: relative; }
.dd-ap-lenta {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: 5px; background: #DCCBB4; outline: none;
  box-shadow: 0 20px 48px rgba(160,140,125,0.28);
}
.dd-ap-lenta::-webkit-scrollbar { display: none; }
/* докато лентата се движи от стрелка, прилепването не я дърпа обратно */
.dd-ap-lenta.dd-ap-lenta--dvizhi { scroll-snap-type: none; }
.dd-ap-kadar {
  position: relative; flex: 0 0 100%; margin: 0; aspect-ratio: 1 / 1; overflow: hidden;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.dd-ap-kadar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dd-ap-kadar--izrez { background: #ECDFCC; }
.dd-ap-kadar--izrez img { object-fit: contain; padding: 10% 14%; box-sizing: border-box; }
/* Етикетът с името върху снимката е скрит (на двата сайта): името стои под
   нея и в бутоните, а надписът закриваше какво се вижда на снимката. */
.dd-ap-etiket { display: none; }
.dd-ap-opis { display: none; }
.dd-ap-opis.dd-ap-on { display: block; animation: dd-ap-poyava 0.4s ease both; }
@keyframes dd-ap-poyava { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dd-ap-opis h3 {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500;
  font-size: clamp(1.7rem, 2.4vw, 2.1rem); color: #262320;
}
.dd-ap-opis p { margin-top: 0.6rem; max-width: 36rem; font-size: 1.04rem; line-height: 1.6; color: rgba(38,35,32,0.82); }
/* един апарат, без бутони (страниците на апаратите): заглавието стои в
   средата до снимката, няма ред за обяснение */
.dd-ap--edin .dd-ap-mreja { grid-template-areas: "glava scena"; }
.dd-ap--edin .dd-ap-glava { align-self: center; }
@media (max-width: 760px) { .dd-ap--edin .dd-ap-mreja { grid-template-areas: "glava" "scena"; } }
/* стрелките и броячът стоят под бутоните, както при трансформациите */
.dd-ap-upravlenie { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.dd-ap-str {
  width: 46px; height: 46px; border: 1px solid #B8934F; border-radius: 5px; background: transparent;
  color: #3B2C21; font-size: 1.1rem; cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease;
}
.dd-ap-str:hover, .dd-ap-str:focus-visible { background: #B8934F; color: #F8F4ED; }
.dd-ap-broi { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.2rem; color: #8A6B3F; }
.dd-ap-tochki { display: none; }
@media (max-width: 760px) {
  .dd-ap-mreja { grid-template-columns: minmax(0, 1fr); grid-template-areas: "glava" "scena" "opisi"; row-gap: 1.1rem; }
  /* редът стига до двата ръба на екрана, за да не се реже бутон насред полето */
  .dd-ap-butoni {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 1.4rem;
    margin-left: calc(-1 * clamp(1.8rem, 6vw, 6rem)); margin-right: calc(-1 * clamp(1.8rem, 6vw, 6rem));
    padding: 0 clamp(1.8rem, 6vw, 6rem);
  }
  .dd-ap-butoni::-webkit-scrollbar { display: none; }
  .dd-ap-kadar { aspect-ratio: 5 / 4; }
  .dd-ap-upravlenie { display: none; }
  .dd-ap-tochki { display: flex; justify-content: center; gap: 0.45rem; margin-top: 0.8rem; }
  .dd-ap-tochki > span { width: 7px; height: 7px; border-radius: 50%; background: rgba(184,147,79,0.35); transition: background-color 0.3s ease; }
  .dd-ap-tochki > span.dd-ap-on { background: #B8934F; }
}

/* ── Безплатният анализ с AISIA на началната страница на процедурите ──
   Същото разпределение като апаратите; под текста три числа и бутон. */
.dd-analiz-chisla {
  list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 36rem;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem;
}
.dd-analiz-chisla li {
  display: grid; gap: 0.3rem; align-content: start;
  padding-top: 0.9rem; border-top: 1px solid rgba(184,147,79,0.45);
}
.dd-analiz-chisla b {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem); line-height: 1; color: #8A6B3F;
}
.dd-analiz-chisla span { font-size: 0.86rem; line-height: 1.35; color: rgba(38,35,32,0.72); }
.dd-analiz-buton {
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1.9rem;
  padding: 1.05rem 2.1rem; border-radius: 5px;
  background: linear-gradient(135deg, #E4C98F 0%, #B8934F 52%, #8A6B3F 100%);
  color: #241A12; font-size: 0.88rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  transition: filter 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.dd-analiz-buton:hover, .dd-analiz-buton:focus-visible {
  color: #241A12; filter: brightness(1.22) saturate(1.08);
  box-shadow: 0 18px 38px rgba(138,107,63,0.45); transform: translateY(-3px);
}
@media (max-width: 760px) {
  /* на тесен екран надписът се пречупваше: по-малка разредка, за да е на един ред */
  .dd-analiz-buton { display: flex; text-align: center; padding-left: 1rem; padding-right: 1rem; font-size: 0.8rem; letter-spacing: 0.07em; }
}

/* ── Параметрите на апарата ──────
   Всеки ред е етикет вляво и стойност вдясно. Стойността беше колона
   „auto“ и дългата („Висока при упорити пигментации и татуировки“)
   смачкваше етикета до нула, та двата текста се застъпваха. Сега етикетът
   пази своята ширина, а стойността взима остатъка, пренася се на втори ред
   и стои подравнена вдясно. Само на десктоп: на телефон стойността слиза
   под етикета и тръгва отляво (блокът с max-width: 760px по-горе). */
@media (min-width: 761px) {
  section[data-screen-label="Параметри"] li {
    grid-template-columns: max-content minmax(0, 1fr) !important;
    align-items: start;
    column-gap: 1.6rem !important;
  }
  section[data-screen-label="Параметри"] li > b { text-align: right; text-wrap: pretty; overflow-wrap: anywhere; }
}

/* ── Галерия с апарата на страниците на апаратите ──────
   Четири снимки в ред на десктоп, две на таблет, а на телефон лента,
   която се плъзга с пръст и показва края на следващата снимка. */
.dd-galeria {
  padding: clamp(3.6rem, 9vh, 6rem) max(clamp(1.8rem, 6vw, 6rem), calc((100% - 1200px) / 2));
  background: #F8F4ED;
}
.dd-galeria-vatre { max-width: 94rem; margin: 0 auto; }
.dd-galeria-red {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.6vw, 1.4rem); margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.dd-galeria-kadar {
  margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 5px;
  background: #DCCBB4; box-shadow: 0 16px 36px rgba(160,140,125,0.24);
}
.dd-galeria-kadar img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1000px) { .dd-galeria-red { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dd-galeria-red {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(-1 * clamp(1.8rem, 6vw, 6rem)); padding-right: clamp(1.8rem, 6vw, 6rem);
  }
  .dd-galeria-red::-webkit-scrollbar { display: none; }
  .dd-galeria-kadar { flex: 0 0 78%; scroll-snap-align: start; }
}