/* ============================================================
   Бетина Фешън — shell.css
   Шрифтове + шелът (utility bar, header, footer, плаващи бутони,
   слайдер). Общ за index.html и faq.html — затова е отделен файл,
   а не inline: докато беше inline в index.html, faq.html тръгна
   съвсем без стил на шела.
   Зарежда се СЛЕД styles.css — редът на каскадата е запазен.
   Строителите НЕ пипат тези правила.
   ============================================================ */

/* ===== Шрифтове (собствен хостинг) =====
   Manrope е variable — един файл на подмножество покрива 200–800, затова
   четирите тегла на страницата не струват четири изтегляния.
   swap = текстът се вижда веднага със системен шрифт и се подменя после. */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(assets/fonts/manrope-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/cormorant-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/cormorant-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/cormorant-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Шел: utility bar, header, footer, плаващи бутони, слайдер (собственост на шела — строителите НЕ пипат тези правила) ===== */

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--ink-deep); color: var(--cream);
  padding: .75rem 1.25rem; text-decoration: none;
}
.skip:focus { left: 0; }
.utility :focus-visible, .site-foot :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Utility bar */
.utility { background: var(--ink-deep); color: var(--cream); }
/* 2.75rem = 44px. При 2.25rem лентата стягаше телефонния линк до 36px висок
   тап-цел, въпреки декларирания min-height: 44px върху самия линк. */
.utility__in {
  display: flex; align-items: stretch; justify-content: space-between; gap: 1rem;
  min-height: 2.75rem;
  font: 600 .7rem/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase;
}
.utility__in a { text-decoration: none; }
.utility__in p { display: flex; align-items: center; margin: 0; }
.utility__tel { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .1rem; }
.utility__mid, .utility__hours { color: rgba(250, 247, 242, .75); font-weight: 400; }
@media (max-width: 40em) { .utility__hours { display: none; } }

/* Header */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}
.site-head__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: 4.25rem;
}
/* Логото: два предварително оцветени PNG-а вместо CSS маска.
   Safari скрива изцяло елемент, чието маскиращо изображение не се е заредило
   (Chromium го показва немаскиран) — на file:// логото изчезваше напълно.
   Обикновен <img> няма този проблем и работи навсякъде. */
.brandmark { display: inline-flex; align-items: center; min-height: 44px; line-height: 0; }
.brandmark img {
  display: block;
  width: clamp(150px, 19vw, 200px);
  height: auto;
}
.site-nav { display: flex; gap: 1.75rem; }
.site-nav a {
  padding: .5rem 0;
  font: 600 .75rem/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
}
.site-nav a:hover { color: var(--gold-text); }
/* Текущата страница в навигацията (ползва се във faq.html) */
.site-nav a[aria-current="page"] { color: var(--gold-text); }
@media (max-width: 56em) { .site-nav { display: none; } }
/* CTA-то остава видимо и на телефон — то е основното действие на страницата.
   Под 26em само се свива, вместо да изчезва. */
@media (max-width: 26em) {
  .site-head__cta { padding-block: 1rem; padding-inline: .85rem; font-size: .65rem; letter-spacing: .08em; }
  .brandmark img { width: clamp(124px, 36vw, 150px); }
}

/* Footer */
.site-foot { background: var(--ink-deep); color: var(--cream); padding-block: var(--space-5) var(--space-3); font-size: .9rem; }
/* Телефонът, Viber и Instagram в подвала са реални тап-цели — бяха 20px високи */
.site-foot a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-foot a:hover { color: var(--gold); }
.site-foot__grid p { margin: 0; }
.site-foot__grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line-dark);
}
.site-foot .brandmark { margin-bottom: var(--space-2); }
.site-foot__title {
  margin-bottom: var(--space-2);
  font: 600 .72rem/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold);
}
.site-foot__muted { color: rgba(250, 247, 242, .65); }
.site-foot__legal {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-top: var(--space-3);
  font-size: .8rem; color: rgba(250, 247, 242, .65);
}

/* Плаващи кръгли бутони (единствените кръгли елементи освен аватара).
   Редът е нарочен: най-долният е най-близо до палеца, затова там стои
   обаждането — страницата сама казва «по телефона е най-бързо», а дотук
   единственият постоянен бутон беше Viber. Страницата е 14 екрана на
   телефон; без постоянен бутон „обади се" се стига само до сгъвката. */
.floaters { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: grid; gap: .6rem; justify-items: end; }
.floater {
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff; text-decoration: none;
  box-shadow: 0 6px 18px rgba(17, 17, 16, .28);
}
.floater svg { width: 1.5rem; height: 1.5rem; }
.floater--viber { background: #7360F2; }
.floater--ig { background: radial-gradient(circle at 30% 107%, #F9CE34 0%, #EE2A7B 45%, #C13584 62%, #6228D7 92%); }
.floater--call {
  width: 3.75rem; height: 3.75rem;
  background: var(--gold); color: var(--ink-deep);
  box-shadow: 0 8px 22px rgba(17, 17, 16, .34);
}
.floater--call svg { width: 1.7rem; height: 1.7rem; filter: none; }
.floater svg { filter: drop-shadow(0 1px 2px rgba(17,17,16,.55)); }
.floater--call svg { filter: none; }
/* В контактите бутоните се прибират: там телефонът, Viber и Instagram вече са
   на екрана, а долният десен ъгъл трябва да е свободен — под него са картата
   и нейните контроли. visibility ги вади и от реда на табулацията. */
.floaters.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(.75rem); }
@media (prefers-reduced-motion: no-preference) {
  .floaters { transition: opacity .3s ease, transform .3s ease, visibility .3s; }
}

/* Слайдер преди/след — маркъпът е дефиниран в договора; двете снимки са наслоени,
   горната (преди) е изрязана с clip-path. Без JS остава статично сравнение 50/50 —
   никога две снимки една до друга. */
.ba {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--cream-3);
  touch-action: pan-y; /* вертикалният скрол на телефон НЕ се краде */
  user-select: none; -webkit-user-select: none;
}
.ba img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba__img--after { z-index: 1; }
.ba__img--before { z-index: 2; clip-path: inset(0 50% 0 0); }
.ba__tag {
  position: absolute; z-index: 3; top: .75rem;
  padding: .35rem .6rem;
  font: 600 .65rem/1 var(--font-body);
  letter-spacing: .12em; text-transform: uppercase;
  background: rgba(17, 17, 16, .72); color: var(--cream);
  pointer-events: none;
}
.ba__tag--before { left: .75rem; }
.ba__tag--after { right: .75rem; }
.ba__handle {
  position: absolute; z-index: 4; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px;
  background: var(--gold);
  cursor: ew-resize;
}
.ba__handle::after {
  content: "\2039 \203A";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  background: var(--gold); color: var(--ink-deep);
  font: 700 1rem/1 var(--font-body);
  letter-spacing: .05em;
}
.ba__handle:focus-visible { outline: none; }
.ba__handle:focus-visible::after { outline: 3px solid var(--ink-deep); outline-offset: 3px; }

/* Миниатюри, които сменят двойката в слайдера */
.ba-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .75rem; }
.ba-thumbs__btn span { display: block; overflow-wrap: anywhere; }
.ba-thumbs__btn { display: block; padding: 0; border: 1px solid rgba(28,28,26,.38); background: none; cursor: pointer; }
.ba-thumbs__btn[aria-pressed="true"] { border-color: var(--gold-text); }
.ba-thumbs__btn img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.ba-thumbs__btn span {
  display: block; padding: .4rem .2rem;
  font: 600 .6rem/1.3 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(28, 28, 26, .7);
}
.ba-thumbs__btn[aria-pressed="true"] { border-color: var(--gold-text); }
.ba-thumbs__btn[aria-pressed="true"] span { color: var(--gold-text); }