/* ==========================================================================
   MeBaby — основен стилов лист
   Не съдържа нито един твърдо зададен брандов цвят: всичко идва от brand.css
   ========================================================================== */

/* ---------- 1. Основа ---------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Изнесеното вдясно мобилно меню не бива да разширява документа и да
   поражда хоризонтално плъзгане. `clip` спира преливането, без да прави
   нов контейнер за скролване — така sticky хедърът продължава да работи
   (за разлика от overflow: hidden). */
html,
body { overflow-x: clip; }

/* Позволява преход към `height: auto` — иначе разгъването на въпросите
   във „Често задавани въпроси“ няма как да се анимира без JavaScript. */
:root { interpolate-size: allow-keywords; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--brand-cream);
  color: var(--brand-ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: var(--fw-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--brand-primary-deep);
  text-decoration: none;
  transition: color .18s ease;
}
a:hover { color: var(--brand-accent-deep); }

:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Скрито, но достъпно за екранни четци */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand-paper);
  color: var(--brand-ink);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  box-shadow: var(--shadow);
}
.skip-link:focus { left: 0; }

/* ---------- 2. Типография ------------------------------------------------ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--brand-ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3.7rem); }
h2 { font-size: clamp(1.8rem, 1.1rem + 2.6vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
h4 { font-size: 1.15rem; font-weight: var(--fw-bold); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--sec-deep);
  margin: 0 0 .85rem;
}
.eyebrow--accent { color: var(--brand-accent-deep); }

/* Втора дума в надочието — редът („Класика“, „Заливка“) до категорията.
   По-тиха от нея, но по СВОЯ цвят: надочието стои и върху цветната лента
   на страницата, където зададен тъмен текст става невидим. Оттам и
   currentColor — каквото и да е наоколо, надписът се вижда. */
.eyebrow span {
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  opacity: .72;
}

/* Късото цветно правило под заглавието на секцията — тихият разделител,
   който държи центрирания блок заедно. */
.rule {
  display: block;
  width: 54px;
  height: 3px;
  margin: 20px 0 24px;
  border-radius: var(--radius-pill);
  background: var(--sec);
}
/* В центрирания блок правилото също застава в средата. */
.section-head .rule,
.text-center .rule { margin-inline: auto; }

.lede {
  font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem);
  color: var(--brand-ink-soft);
  line-height: 1.7;
}

.text-center { text-align: center; }

/* Заглавие на секция — надпис, заглавие, късо правило, подзаглавие. */
.section-head {
  max-width: 680px;
  margin: 0 auto clamp(38px, 5.5vw, 62px);
  text-align: center;
}
.section-head h2 { margin-bottom: 0; }
.section-head p {
  color: var(--brand-ink-soft);
  font-size: clamp(1rem, .96rem + .25vw, 1.1rem);
  line-height: 1.75;
}

/* Ръчно нарисувано подчертаване под ключова дума */
.underline-brush {
  position: relative;
  white-space: nowrap;
  /* Собствен контекст на наслагване: така ::after стои под текста,
     но над фона на секцията, а не зад него. */
  isolation: isolate;
}
.underline-brush::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: .04em;
  height: .32em;
  background: var(--brand-accent-soft);
  border-radius: var(--radius-pill);
  z-index: -1;
}

/* ---------- 3. Оформление ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

/* Лентите се редуват: бяло → топло → бяло. Всяка знае цвета си в --band,
   за да може скъсаният ръб да се оцвети сам. */
.section {
  --band: transparent;
  position: relative;
  padding-block: var(--section-y);
}
.section--tint  { --band: var(--brand-primary-tint); background: var(--band); }
.section--paper { --band: var(--brand-paper);        background: var(--band); }
.section--blush { --band: var(--brand-accent-tint);  background: var(--band); }
.section--warm  { --band: var(--brand-warm);         background: var(--band); }

.section--tight { padding-block: var(--section-y-md); }
.section--slim  { padding-block: var(--section-y-sm); }

.section--tint + .section--tint,
.section--warm + .section--warm,
.section--paper + .section--paper { padding-top: 0; }

/* ---------- 3б. Скъсан лист между лентите -------------------------------- */
/* Пластът стърчи извън секцията, боядисан с нейния цвят и изрязан по
   маската — така лентата „къса" съседната, вместо да я реже с права линия. */
.section--torn-top,
.section--torn-bottom { border: 0; }

.section--torn-top::before,
.section--torn-bottom::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--torn-h);
  background: var(--band);
  pointer-events: none;
  z-index: 1;
}

.section--torn-top::before {
  top: calc(1px - var(--torn-h));
  -webkit-mask: var(--torn-top) repeat-x bottom / 1200px 100%;
          mask: var(--torn-top) repeat-x bottom / 1200px 100%;
}

.section--torn-bottom::after {
  bottom: calc(1px - var(--torn-h));
  -webkit-mask: var(--torn-bottom) repeat-x top / 1200px 100%;
          mask: var(--torn-bottom) repeat-x top / 1200px 100%;
  transform: scaleY(-1);
}

/* Скъсаният ръб изяжда част от горното поле — връщаме му го. */
.section--torn-top    { padding-top: calc(var(--section-y) - var(--torn-h) + 18px); }
.section--torn-bottom { padding-bottom: calc(var(--section-y) - var(--torn-h) + 18px); }

/* ---------- 4. Бутони ---------------------------------------------------- */

.btn {
  --btn-bg: var(--brand-primary-deep);
  --btn-fg: #fff;
  --btn-bg-hover: var(--brand-ink);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .85em 1.9em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: .01em;
  text-align: center;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease,
              box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); }

.btn--accent {
  --btn-bg: var(--brand-accent);
  --btn-bg-hover: var(--brand-accent-dark);
  box-shadow: 0 10px 24px rgba(238, 129, 137, .3);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--brand-primary-deep);
  --btn-bg-hover: var(--brand-primary-tint);
  border-color: var(--brand-primary);
}
.btn--ghost:hover { color: var(--brand-primary-deep); }

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--brand-primary-deep);
  --btn-bg-hover: var(--brand-primary-soft);
}

/* Тихият бутон на секция: светла плоскост, тънък кант в цвета на секцията.
   Използва се за „виж всичко" и други второстепенни подкани, за да не се
   надвикват две плътни копчета в една лента. */
.btn--pill {
  --btn-bg: var(--brand-paper);
  --btn-fg: var(--sec-deep);
  --btn-bg-hover: var(--sec-soft);
  border-color: var(--sec-soft);
  padding: .78em 1.7em;
  font-size: .95rem;
  font-weight: var(--fw-bold);
  box-shadow: none;
}
.btn--pill:hover {
  color: var(--sec-deep);
  border-color: var(--sec);
  box-shadow: none;
}

.btn--block { display: flex; width: 100%; }
.btn--lg { padding: 1.05em 2.4em; font-size: 1.06rem; }
.btn--sm { padding: .6em 1.3em; font-size: .9rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.btn-row--center { justify-content: center; }

/* ---------- 5. Лента със съобщение --------------------------------------- */

.announce {
  background: var(--brand-primary-deep);
  color: #fff;
  font-size: .88rem;
  font-weight: var(--fw-medium);
  text-align: center;
  padding: 9px var(--gutter);
}
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.announce strong { font-weight: var(--fw-bold); }

/* ---------- 6. Хедър ----------------------------------------------------- */

/* Централизирана глава: логото само на ред, менюто под него, действията
   вдясно на същия ред. Спокойна витрина, а не лента с инструменти. */
.site-header {
  position: relative;
  z-index: 100;
  background: var(--brand-paper);
  border-bottom: 1px solid var(--brand-line);
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 22px 14px;
}

.header-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
}

.site-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.site-brand img,
.site-brand svg { height: 52px; width: auto; }
.site-brand .custom-logo { height: 52px; width: auto; }

/* Текстов резервен вариант, ако липсва файл с лого */
.brand-wordmark {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: 1;
}
.brand-wordmark .is-me   { color: var(--brand-accent); }
.brand-wordmark .is-baby { color: var(--brand-primary); }

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-family: var(--font-display);
  font-size: .85rem;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-accent);
  transition: right .22s ease;
}
.main-nav a:hover,
.main-nav .current-menu-item > a { color: var(--brand-primary-deep); }
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after { right: 0; }

.header-actions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-ink);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.icon-btn:hover { background: var(--brand-primary-soft); color: var(--brand-primary-deep); }
.icon-btn svg { width: 22px; height: 22px; }

.cart-count {
  position: absolute;
  top: 4px;
  right: 2px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: #fff;
  font-size: .68rem;
  font-weight: var(--fw-bold);
  line-height: 19px;
  text-align: center;
}

.nav-toggle { display: none; }

/* Мобилна навигация */
@media (max-width: 900px) {
  /* На телефон централизираната глава се сгъва обратно в един ред:
     лого вляво, действия вдясно. */
  .header-inner {
    flex-direction: row;
    justify-content: space-between;
    gap: 14px;
    padding-block: 14px;
  }
  .header-bar { width: auto; min-height: 0; }
  .header-actions { position: static; transform: none; }
  .site-brand img,
  .site-brand svg,
  .site-brand .custom-logo { height: 42px; }

  .nav-toggle { display: inline-flex; }
  .main-nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(320px, 84vw);
    padding: 96px 28px 32px;
    background: var(--brand-paper);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    /* visibility пази връзките от табулация, докато менюто е затворено */
    visibility: hidden;
    transition: transform .28s ease, visibility .28s ease;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); visibility: visible; }
  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .main-nav a {
    padding: 12px 0;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--brand-line);
  }
  .main-nav a::after { display: none; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(44, 74, 82, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s ease;
    z-index: 99;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }
}

/* ---------- 7. Герой ----------------------------------------------------- */

/* Геройът показва стоката, не описва я: шестте цветови теми са разпилени
   като на маса, а текстът стои в средата върху тях. Първото, което вижда
   родителят, са самите картички — и веднага се вижда, че са шест цвята. */
.hero {
  --band: var(--brand-cream);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(42% 46% at 12% 14%, var(--c-sky-soft) 0%, transparent 64%),
    radial-gradient(40% 44% at 88% 18%, var(--c-rose-soft) 0%, transparent 62%),
    radial-gradient(46% 42% at 78% 88%, var(--c-sun-soft) 0%, transparent 64%),
    radial-gradient(44% 44% at 18% 86%, var(--c-mint-soft) 0%, transparent 62%),
    var(--band);
  padding-block: clamp(44px, 5.5vw, 72px) clamp(48px, 6vw, 82px);
  text-align: center;
}

/* Разпиляните картички. Подредени са по двойки отляво и отдясно, така че
   средната колона да остане чиста за текста. Част от тях излизат извън
   кадъра — оттам идва усещането за отрязана снимка, а не за галерия. */
.hero-collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-collage img {
  position: absolute;
  width: var(--w);
  left: var(--x);
  top: var(--y);
  rotate: var(--r);
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(44, 74, 82, .16);
  transition: rotate .6s ease, translate .6s ease;
}

/* Мека светла „поляна" под текста, за да остане четлив над картичките. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    34% 44% at 50% 40%,
    rgba(253, 251, 249, .93) 0%,
    rgba(253, 251, 249, .74) 46%,
    rgba(253, 251, 249, 0) 78%
  );
  pointer-events: none;
}

.hero-stack {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-stack h1 {
  max-width: 15ch;
  margin-bottom: .5em;
}
.hero-stack .lede { max-width: 56ch; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 7px 16px 7px 8px;
  margin-bottom: 22px;
  border-radius: var(--radius-pill);
  background: var(--brand-paper);
  box-shadow: var(--shadow-sm);
  font-size: .86rem;
  font-weight: var(--fw-medium);
  color: var(--brand-ink-soft);
}
.hero-pill b {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hero-actions { margin-top: 30px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin-top: 30px;
  font-size: .92rem;
  color: var(--brand-ink-soft);
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: .45em;
}
.hero-meta svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: var(--brand-primary-dark);
}

/* Визуалът: картичката в рамка, леко наклонена, точно под подканата */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  /* Ширината следва картичката, за да остане значката закачена за рамката,
     а не за края на секцията. */
  width: min(100%, 348px);
  margin: clamp(28px, 3.6vw, 46px) auto 0;
}
.hero-visual .frame-shot {
  width: min(100%, 392px);
  transform: rotate(-2.2deg);
  transition: transform .5s ease;
}
.hero-visual .frame-shot:hover { transform: rotate(0deg) scale(1.015); }

.hero-badge {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  right: -6px;
  bottom: 14px;
  padding: 10px;
  border-radius: 50%;
  background: var(--brand-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-align: center;
  box-shadow: var(--shadow);
  rotate: 8deg;
}

@media (max-width: 1100px) {
  /* По-тесен екран — външните две картички излизат прекалено много. */
  .hero-collage img:nth-child(2),
  .hero-collage img:nth-child(6) { display: none; }
}

@media (max-width: 880px) {
  .hero-stack h1 { max-width: 100%; }
  .btn-row { justify-content: center; }
  /* На телефон разпиляното става каша — остава само едрата картичка. */
  .hero-collage { display: none; }
  .hero::after { display: none; }
  .hero-badge {
    width: 92px;
    height: 92px;
    right: -4px;
    font-size: .74rem;
  }
}

/* ---------- 8. Рамка на продукта (CSS мокъп) -----------------------------

   Дотук „рамката“ беше един бял правоъгълник с мека сянка. Бяла хартия
   върху бяло каре — трите плоскости се сливат и нищо не подсказва, че
   там има предмет. Затова рамката се СГЛОБЯВА от частите, които я правят
   рамка:

     летва      четири летви с истински челни съединения в ъглите. Всяка си
                има свой тон според това накъде гледа: лявата е с лице към
                светлината и е най-светла, дясната е обърната и е в сянка.
     фалц       тъмната чертичка там, където стъклото влиза под летвата.
                Това е най-силният знак, че предметът е рамка, а не лист.
     паспарту   с фаска на прозореца: горе и отляво в сянка, долу и отдясно
                огряна. Оттам се разделят двете бели плоскости.
     стъкло     лек полъх светлина по диагонал.
     сянка      пада надясно и надолу — светлината е отгоре вляво, както и
                в снимките на стаите.

   Мерките са в проценти и отговарят на истинските сантиметри: летва 1.4 см
   и паспарту 1.6 см при рамка 26 см, тоест 5.4% и 6.9% от вътрешното.

   ЗА ДЕБЕЛИНАТА НА ЛЕТВАТА. Летвата е еднакво дебела и по четирите страни,
   но процентите за фон се смятат по ширина за ширината и по височина за
   височината — тоест „5.4%“ горе значи нещо друго от „5.4%“ отляво. Двата
   явни опита се счупиха: ъгловият градиент дели КРЪГА и 45° минава през
   ъгъла само на квадрат, а `cqw` изисква `container-type`, което пък маха
   вътрешната ширина и рамката в галерията се сплеска на ивица.

   Работи трето: фонът е SVG със собствено съотношение 1:1. При
   `background-size: 5.4% auto` височината се смята от съотношението, а не
   от височината на кутията — тоест излиза КВАДРАТ със страна 5.4% от
   ширината, при всякакъв размер и всякаква пропорция. Горната и долната
   летва са същият квадрат, повторен настрани.

   Всеки ъгъл си има петно с диагонал в него, за да тръгва чертата от
   външния ъгъл и да стига точно до вътрешния — както е при истинска
   рамка, сглобена от четири летви. */

.frame-shot {
  --f-mould: 5.4%;
  position: relative;
  padding: var(--f-mould);
  border-radius: 2px;
  background: #f8fafb;
  box-shadow:
    2px 3px 4px -1px rgba(30, 52, 58, .22),
    8px 12px 26px -6px rgba(30, 52, 58, .18),
    18px 28px 62px -14px rgba(30, 52, 58, .16);
}
/* Летвите. Четирите ъглови петна са първи, значи най-отгоре — иначе
   съединенията щяха да се скрият под самите летви.
   Тоновете: горе #f8fafb, дясно #dde4e8 (обърнато от светлината),
   долу #e6ecef, ляво #ffffff (с лице към светлината), шев #c3ced2. */
.frame-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(44, 74, 82, .18);
  background-image:
    /* горе-ляво */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 0H10V10Z' fill='%23f8fafb'/%3E%3Cpath d='M0 0V10H10Z' fill='%23ffffff'/%3E%3Cpath d='M0 0L10 10' stroke='%23c3ced2' stroke-width='.35'/%3E%3C/svg%3E"),
    /* горе-дясно */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 0H10L0 10Z' fill='%23f8fafb'/%3E%3Cpath d='M10 0V10H0Z' fill='%23dde4e8'/%3E%3Cpath d='M10 0L0 10' stroke='%23c3ced2' stroke-width='.35'/%3E%3C/svg%3E"),
    /* долу-ляво */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 0H10L0 10Z' fill='%23ffffff'/%3E%3Cpath d='M10 0V10H0Z' fill='%23e6ecef'/%3E%3Cpath d='M0 10L10 0' stroke='%23c3ced2' stroke-width='.35'/%3E%3C/svg%3E"),
    /* долу-дясно */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M0 0H10V10Z' fill='%23dde4e8'/%3E%3Cpath d='M0 0V10H10Z' fill='%23e6ecef'/%3E%3Cpath d='M0 0L10 10' stroke='%23c3ced2' stroke-width='.35'/%3E%3C/svg%3E"),
    /* горна и долна летва — същият квадрат, повторен настрани */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23f8fafb'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23e6ecef'/%3E%3C/svg%3E"),
    /* лява и дясна — тук и двете мерки са явни, затова стига градиент */
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(#dde4e8, #dde4e8);
  background-size:
    var(--f-mould) auto, var(--f-mould) auto,
    var(--f-mould) auto, var(--f-mould) auto,
    var(--f-mould) auto, var(--f-mould) auto,
    var(--f-mould) 100%, var(--f-mould) 100%;
  background-repeat:
    no-repeat, no-repeat, no-repeat, no-repeat,
    repeat-x, repeat-x,
    no-repeat, no-repeat;
  background-position:
    left top, right top, left bottom, right bottom,
    left top, left bottom,
    left top, right top;
}
/* Стъклото. Стои над паспартуто, затова е след него в реда на рисуване. */
.frame-shot::after {
  content: "";
  position: absolute;
  z-index: 2;               /* над паспартуто — стъклото е отгоре */
  inset: var(--f-mould);
  pointer-events: none;
  background: linear-gradient(108deg,
    rgba(255, 255, 255, .38) 0%,
    rgba(255, 255, 255, .11) 19%,
    rgba(255, 255, 255, 0) 35%,
    rgba(28, 44, 50, .02) 72%,
    rgba(28, 44, 50, .05) 100%);
}
.frame-shot__mat {
  position: relative;
  z-index: 1;
  padding: 6.9%;
  background: linear-gradient(100deg, #ffffff 0%, #fdfefe 62%, #f1f4f5 100%);
  box-shadow:
    0 0 0 1px rgba(20, 36, 42, .34),                 /* фалцът */
    0 1px 5px rgba(30, 52, 58, .16),                 /* сянката му върху летвата */
    inset 4px 4px 9px -3px rgba(44, 74, 82, .18);    /* сянката от летвата */
}
/* Фаската на паспартуто. Отпечатъкът е ПОД него, затова чертата се рисува
   навън от снимката — навътре сянка върху <img> не се вижда. */
.frame-shot__mat img {
  width: 100%;
  display: block;
  box-shadow:
    0 -1.5px 0 rgba(96, 116, 122, .40),
    -1.5px 0 0 rgba(96, 116, 122, .30),
    0 1.5px 0 rgba(96, 116, 122, .14),
    1.5px 0 0 rgba(96, 116, 122, .12);
}

/* Кадър, който вече си носи рамка (стая, близък план) — показва се гол. */
.frame-shot--bare { padding: 0; background: none; box-shadow: none; border: 0; }
.frame-shot--bare::before,
.frame-shot--bare::after { display: none; }
.frame-shot--bare .frame-shot__mat {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: var(--radius);
  overflow: hidden;
}
.frame-shot--bare .frame-shot__mat img { box-shadow: none; }


/* ---------- 9. Лента с предимства ---------------------------------------- */

.usp-bar {
  background: var(--brand-paper);
  border-block: 1px solid var(--brand-line);
}
.usp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-block: 26px;
}
/* Подравняване по горния ръб, не по средата: описанията са различни на
   дължина и при центриране заглавията им играеха с по 10px нагоре-надолу.
   Отгоре надолу всички започват на един ред. */
.usp {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-inline: 14px;
  border-right: 1px solid var(--brand-line);
}
/* Кръгчето е по-високо от реда на заглавието — сваля се с два пиксела,
   за да седне оптически на неговата линия. */
.usp__icon { margin-top: 2px; }
.usp:last-child { border-right: 0; }
/* Плътно цветно кръгче с бял знак — четирите ползи са първото цветно
   ударение след героя и трябва да се видят от един поглед. */
.usp__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--sec);
  color: #fff;
}
.usp__icon svg { width: 23px; height: 23px; }
.usp b {
  display: block;
  font-family: var(--font-display);
  font-size: .97rem;
  line-height: 1.3;
}
/* :not(.usp__icon) е задължително. Иконата също е <span>, а „.usp span“
   е по-специфично от „.usp__icon“ и ѝ отнемаше display:grid — знакът
   вътре падаше в горния край на кръгчето вместо в средата. */
.usp span:not(.usp__icon) {
  display: block;
  font-size: .84rem;
  color: var(--brand-ink-soft);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .usp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
  .usp:nth-child(2n) { border-right: 0; }
}
@media (max-width: 520px) {
  .usp-grid { grid-template-columns: 1fr; }
  .usp { border-right: 0; }
}

/* ---------- 10. Продуктови карти ----------------------------------------- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: clamp(20px, 3vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover {
  transform: translateY(-5px);
  border-color: var(--brand-primary-soft);
  box-shadow: var(--shadow-lg);
}

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--brand-primary-tint);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.045); }

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  padding: 20px 22px 24px;
  text-align: center;
}
.product-card__title {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  margin: 0;
}
.product-card__title a { color: var(--brand-ink); }
.product-card__title a:hover { color: var(--brand-primary-deep); }

.product-card__excerpt {
  font-size: .9rem;
  color: var(--brand-ink-soft);
  margin: 0;
}
.product-card__price {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  color: var(--brand-primary-deep);
}
.product-card .btn { margin-top: 14px; }

.badge-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: .74rem;
  font-weight: var(--fw-bold);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.badge-tag--soft {
  background: var(--brand-primary-soft);
  color: var(--brand-primary-deep);
}

/* ---------- 11. Разделена секция (картина + текст) ----------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
}
.split--reverse .split__media { order: 2; }

.split__media img,
.split__media .frame-shot { border-radius: var(--radius-lg); }
.split__media .frame-shot { border-radius: 6px; }

.check-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.55;
}
.check-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f7d' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 14px no-repeat;
}
.check-list b { font-family: var(--font-display); }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
}

/* ---------- 12. Стъпки „как работи” -------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 30px);
  counter-reset: step;
}
.step {
  position: relative;
  padding: 34px 24px 28px;
  background: var(--brand-paper);
  border: 1px solid var(--sec-soft);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: transform .22s ease, box-shadow .22s ease;
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -21px;
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--sec);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.14rem;
  font-weight: var(--fw-bold);
  box-shadow: 0 6px 16px rgba(44, 74, 82, .2);
}
.step__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 6px auto 14px;
  border-radius: var(--radius-pill);
  background: var(--sec-soft);
  color: var(--sec-deep);
}
.step__icon svg { width: 27px; height: 27px; }
.step h3 { font-size: 1.08rem; margin-bottom: .4em; }
.step p { font-size: .92rem; color: var(--brand-ink-soft); }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); row-gap: 44px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- 13. Отзиви --------------------------------------------------- */

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: clamp(20px, 3vw, 30px);
}
/* Лек разнобой във височината — редът от балони не бива да е строй. */
.reviews > :nth-child(2) { margin-top: clamp(14px, 2.4vw, 30px); }
.reviews > :nth-child(3) { margin-top: clamp(6px, 1.1vw, 14px); }
/* Отзивът е реплика, не картонче: бял балон с опашка, а името стои под
   него — така страницата звучи като разговор, а не като таблица. */
.review {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.review blockquote {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 0;
  padding: 28px 26px 26px;
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--brand-ink);
  transition: transform .22s ease, box-shadow .22s ease;
}
.review:hover blockquote { transform: translateY(-4px); box-shadow: var(--shadow); }

/* Опашката: два наслагани триъгълника — външният рисува канта. */
.review blockquote::before,
.review blockquote::after {
  content: "";
  position: absolute;
  left: 38px;
  width: 0;
  height: 0;
  border-style: solid;
}
.review blockquote::before {
  bottom: -14px;
  border-width: 14px 15px 0 0;
  border-color: var(--brand-line) transparent transparent transparent;
}
.review blockquote::after {
  bottom: -12.5px;
  border-width: 13px 13px 0 0;
  border-color: var(--brand-paper) transparent transparent transparent;
}

.stars { display: flex; gap: 3px; color: var(--brand-accent); }
.stars svg { width: 17px; height: 17px; }

.review figcaption {
  margin-top: 26px;
  padding-left: 40px;
  font-size: .86rem;
  color: var(--brand-muted);
}
.review figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: .88rem;
  font-weight: var(--fw-bold);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--sec-deep);
}

@media (max-width: 900px) {
  .reviews { grid-template-columns: 1fr; }
  .reviews > :nth-child(2),
  .reviews > :nth-child(3) { margin-top: 0; }
}

/* ---------- 14. Въпроси и отговори --------------------------------------- */

.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s ease;
}
.faq details[open] { border-color: var(--sec); }

/* Отговорът се разгъва, вместо да изскочи.
   `<details>` не се поддава на преход по стария начин — браузърът крие
   съдържанието напълно. `::details-content` заедно с `interpolate-size`
   отваря височината. Където ги няма, отговорът се показва както досега:
   без анимация, но напълно четим. */
.faq details::details-content {
  height: 0;
  overflow: hidden;
  transition:
    height var(--dur-panel) var(--ease-out),
    content-visibility var(--dur-panel) allow-discrete;
}
.faq details[open]::details-content { height: auto; }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-right: 2.5px solid var(--sec-deep);
  border-bottom: 2.5px solid var(--sec-deep);
  rotate: 45deg;
  translate: 0 -3px;
  transition: rotate .22s ease, translate .22s ease;
}
.faq details[open] summary::after { rotate: -135deg; translate: 0 3px; }
.faq .faq__body {
  padding: 0 22px 20px;
  color: var(--brand-ink-soft);
}

/* ---------- 15. Бюлетин / призив ----------------------------------------- */

.cta-band {
  position: relative;
  overflow: hidden;
  padding-block: clamp(48px, 7vw, 80px);
  background:
    radial-gradient(50% 120% at 12% 0%, rgba(255,255,255,.28) 0%, transparent 60%),
    var(--sec);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .92); }

.subscribe {
  display: flex;
  gap: 10px;
  max-width: 470px;
  margin: 26px auto 12px;
}
.subscribe input {
  flex: 1 1 auto;
  min-width: 0;
  padding: .9em 1.2em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink);
}
.subscribe input::placeholder { color: var(--brand-muted); }
.subscribe .btn { flex: 0 0 auto; }
.cta-band small { color: rgba(255, 255, 255, .82); font-size: .82rem; }

@media (max-width: 520px) {
  .subscribe { flex-direction: column; }
  .subscribe .btn { width: 100%; }
}

/* ---------- 16. Форми ---------------------------------------------------- */

/* align-content: start пази полетата подравнени, когато съседното в реда
   е по-високо заради подсказка под него. */
.field { display: grid; align-content: start; gap: 7px; margin-bottom: 18px; }
.field--full { grid-column: 1 / -1; }
.field label,
.form-label {
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
}
.field .req { color: var(--brand-accent-deep); }

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  padding: .82em 1.05em;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius-sm);
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--brand-primary-soft);
}
textarea { min-height: 148px; resize: vertical; }
.field textarea { min-height: 96px; }

/* Датата и часът са системни джаджи и по подразбиране не приличат на
   останалите полета — рамка на браузъра, друга височина, друг шрифт.
   Затова влизат в същия списък по-горе, а тук се изравнява и вътрешността
   им: иконката и цифрите. */
input[type="date"],
input[type="time"] {
  min-height: 3.15em;              /* колкото text/number с този padding */
  font-variant-numeric: tabular-nums;
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: .55;
  cursor: pointer;
  transition: opacity var(--dur-ui) var(--ease-out);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator,
input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { color: var(--brand-ink); }
input[type="date"]:invalid::-webkit-datetime-edit,
input[type="time"]:invalid::-webkit-datetime-edit { color: var(--brand-muted); }

/* Числата не искат стрелки — теглото се пише, не се щрака. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Мерната единица е В полето: „3450 г“ се чете като едно нещо, докато
   „Тегло (грама)“ в етикета кара окото да се връща нагоре. */
.field__box { position: relative; display: block; }
.field__box--unit input { padding-right: 3.2em; }
.field__unit {
  position: absolute;
  right: 1.05em;
  top: 50%;
  translate: 0 -50%;
  font-size: .95rem;
  color: var(--brand-muted);
  pointer-events: none;
}

.field-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-hint { font-size: .84rem; color: var(--brand-muted); }
.field-count {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--brand-muted);
  font-variant-numeric: tabular-nums;
}

/* Звездичките изчезнаха: почти всичко е задължително, значи по-тихо е да
   се отбележи изключението и да се каже веднъж отдолу. */
.field .opt {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 400;
  color: var(--brand-muted);
}
.field-legend {
  margin: 2px 0 0;
  font-size: .82rem;
  color: var(--brand-muted);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .9rem;
  color: var(--brand-ink-soft);
  line-height: 1.5;
}
.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--brand-primary-deep);
}

/* ---------- 17. Страница „Контакти” -------------------------------------- */

/* Заглавието на вътрешна страница носи същата лента като продукта —
   цветна плоскост, скъсана отдолу. */
.page-hero {
  --band: var(--sec-deep);
  position: relative;
  padding-block: clamp(46px, 6.5vw, 82px) clamp(58px, 7.5vw, 96px);
  background: var(--band);
  text-align: center;
}
.page-hero h1 { color: #fff; }
.page-hero .lede {
  max-width: 58ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, .84);
}
.page-hero .breadcrumb { color: rgba(255, 255, 255, .72); }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, .82); }
.page-hero .breadcrumb a:hover { color: #fff; }

.breadcrumb {
  margin-bottom: 14px;
  font-size: .86rem;
  color: var(--brand-muted);
}
.breadcrumb a { color: var(--brand-ink-soft); }
.breadcrumb span { padding-inline: 6px; }

/* ---------- 17б. Заглавна лента на вътрешна страница --------------------- */
/* Името на продукта се обявява едро върху цветна лента, а не се примъква
   до формата. Долният ръб е скъсан — оттам започва бялата част. */
.page-band {
  --band: var(--sec-deep);
  position: relative;
  background: var(--band);
  padding-block: clamp(46px, 6.5vw, 82px) clamp(58px, 7.5vw, 96px);
  text-align: center;
}
.page-band__title {
  max-width: 20ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.3rem);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: #fff;
  text-wrap: balance;
}
/* Лентата е тъмна, значи всичко в нея е светло. Досега само
   `.page-band__title` беше бяло и всяко ново заглавие без този клас
   излизаше тъмносиньо върху тъмен фон — нечетимо. */
.page-band h1 {
  max-width: 20ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.1rem + 3.2vw, 3.3rem);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: #fff;
  text-wrap: balance;
}
.page-band .lede {
  max-width: 62ch;
  margin: 16px auto 0;
  color: rgba(255, 255, 255, .82);
}
.page-band .eyebrow { color: rgba(255, 255, 255, .78); }
.page-band .breadcrumb { color: rgba(255, 255, 255, .72); }
.page-band .breadcrumb a { color: rgba(255, 255, 255, .82); }
.page-band .breadcrumb a:hover { color: #fff; }
/* Връзка в текста на лентата (напр. към книжката в магазина) — без това
   беше тюркоазена върху тюркоазено, тоест невидима. */
.page-band .lede a { color: #fff; font-weight: var(--fw-bold); text-decoration: underline; text-underline-offset: .18em; }
.page-band .lede a:hover { text-decoration-thickness: 2px; }

.contact-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }

.card-panel {
  padding: clamp(26px, 3.4vw, 42px);
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.contact-list li { display: flex; gap: 15px; align-items: flex-start; }
.contact-list__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--brand-accent-soft);
  color: var(--brand-accent-deep);
}
.contact-list__icon svg { width: 21px; height: 21px; }
.contact-list b {
  display: block;
  font-family: var(--font-display);
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand-muted);
  margin-bottom: 2px;
}
.contact-list a { font-size: 1.06rem; font-weight: var(--fw-medium); }
.contact-list span { font-size: 1.02rem; color: var(--brand-ink); }

.hours { margin: 0; }
.hours div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--brand-line);
  font-size: .96rem;
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--brand-ink-soft); }
.hours dd { margin: 0; font-weight: var(--fw-medium); }

.socials { display: flex; gap: 10px; margin-top: 6px; }
.socials a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-soft);
  color: var(--brand-primary-deep);
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.socials a:hover { background: var(--brand-primary-deep); color: #fff; transform: translateY(-2px); }
.socials svg { width: 20px; height: 20px; }

.map-embed {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-line);
  background: var(--brand-primary-tint);
  aspect-ratio: 21 / 8;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.form-note {
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: var(--brand-primary-tint);
  font-size: .89rem;
  color: var(--brand-ink-soft);
}

/* ---------- 18. Футър ---------------------------------------------------- */

.site-footer {
  background: var(--brand-ink);
  color: rgba(255, 255, 255, .76);
  padding-block: clamp(46px, 6vw, 72px) 0;
  font-size: .94rem;
}
/* Малко цветно тире пред всяко заглавие в подножието — единственият цвят
   на тъмната лента и връзка с правилата по секциите горе. */
.site-footer h4 {
  position: relative;
  color: #fff;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1.1em;
  padding-left: 20px;
}
.site-footer h4::before {
  content: "";
  position: absolute;
  left: 0;
  top: .18em;
  width: 4px;
  height: 1em;
  border-radius: var(--radius-pill);
  background: var(--sec);
}
/* Първата колона е брандовият блок без заглавие — цветовете тръгват от втората. */
.footer-grid > div:nth-child(2) h4 { --sec: var(--c-sun); }
.footer-grid > div:nth-child(3) h4 { --sec: var(--c-coral); }
.footer-grid > div:nth-child(4) h4 { --sec: var(--c-mint); }
.footer-grid > div:nth-child(5) h4 { --sec: var(--c-lilac); }
.site-footer a { color: rgba(255, 255, 255, .76); }
.site-footer a:hover { color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: clamp(28px, 4vw, 48px);
  padding-bottom: 44px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

/* Бутонът за отказ — под менюто, извън него (виж inc/withdrawal.php).
   Законът иска да е видим; рамката го отделя от обикновените връзки, без
   да крещи. */
.footer-withdraw {
  display: inline-block;
  margin-top: 16px;
  padding: .5em .9em;
  border: 1px solid rgba(255, 255, 255, .32);
  /* Не хапче: в тясната колона на десктоп текстът минава на два реда, а
     хапче на два реда става овал. */
  border-radius: 10px;
  font-size: .86rem;
  line-height: 1.4;
  text-wrap: balance;
}
.footer-withdraw:hover { border-color: #fff; }

.footer-brand .brand-wordmark { margin-bottom: 16px; }
.footer-brand img,
.footer-brand svg { height: 40px; width: auto; margin-bottom: 16px; }
.footer-brand p { max-width: 34ch; line-height: 1.6; }

/* Идентификацията на търговеца — над чертата на последния ред.
   Тиха е нарочно: задължителна е, но не е това, което купувачът търси. */
.footer-legal {
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}
.footer-legal + .footer-bottom { border-top: 0; padding-top: 10px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  font-size: .86rem;
  color: rgba(255, 255, 255, .58);
}
.pay-methods { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-methods span {
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-sm);
  font-size: .78rem;
  letter-spacing: .02em;
}

@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- 19. WooCommerce — единичен продукт --------------------------- */

.product-layout {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; } }

.product-gallery { display: grid; gap: 14px; position: sticky; top: 100px; }
@media (max-width: 900px) { .product-gallery { position: static; } }

/* Кутията е с ПОСТОЯННА пропорция.
   Преди се менеше според кадъра: висока при визитката, ниска при снимката
   в стая, и цялата страница подскачаше при всеки клик. Сега 4:5 държи
   размера, а кадърът се вписва вътре, без да се реже. Мокъпите също се
   правят 4:5 (виж tools/make-arch-web.js), за да пълнят кутията, вместо
   да плуват в празно. */
.gallery-main {
  aspect-ratio: 4 / 5;
  padding: clamp(18px, 3.4vw, 40px);
  background: var(--brand-primary-tint);
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.gallery-main .frame-shot {
  width: auto;
  max-width: 100%;
  height: 100%;
  display: flex;
}
.gallery-main .frame-shot__mat { display: flex; min-height: 0; }
.gallery-main .frame-shot img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Кадър, който сам си носи рамка — пълни кутията ДОКРАЙ, без поле.
   Снимка с поле около себе си изглежда сякаш не се е побрала; отпечатъкът
   има нужда от въздух, снимката — не. */
.gallery-main:has(.frame-shot--bare) { padding: 0; }
.gallery-main .frame-shot--bare,
.gallery-main .frame-shot--bare .frame-shot__mat { width: 100%; height: 100%; }
.gallery-main .frame-shot--bare .frame-shot__mat { border-radius: var(--radius-lg); }
.gallery-main .frame-shot--bare img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 620px) { .gallery-main { aspect-ratio: 5 / 6; } }

.gallery-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.gallery-thumbs button {
  padding: 8px;
  border: 2px solid var(--brand-line);
  border-radius: var(--radius);
  background: var(--brand-paper);
  cursor: pointer;
  transition: border-color .18s ease;
}
.gallery-thumbs button:hover,
.gallery-thumbs button[aria-current="true"] { border-color: var(--brand-primary); }
/* Квадратни миниатюри, при това с `contain`, а не `cover`.
   В галерията стоят две различни неща: изправената картичка и легнала
   снимка на стаята. Изрязани в изправено каре, легналите се свеждаха до
   ивица от средата, в която понякога рамката изобщо не влизаше — тоест
   миниатюрата на мокъпа не показваше мокъпа. */
.gallery-thumbs img {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 6px;
  width: 100%;
  background: var(--brand-paper);
}

/* Едрото име вече стои в заглавната лента; тук остава тихо повторение,
   което държи колоната закотвена, без да се надвиква с цената. */
.product-summary .product-title {
  margin: 0 0 .55em;
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: var(--fw-bold);
  letter-spacing: .13em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--sec-deep);
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: .9rem;
  color: var(--brand-ink-soft);
}

.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 6px;
}
.price {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.3rem);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  line-height: 1;
}
.price del { font-size: .52em; color: var(--brand-muted); font-weight: var(--fw-medium); }
.price-secondary { font-size: 1rem; color: var(--brand-ink-soft); }
.price-note { font-size: .86rem; color: var(--brand-muted); margin-bottom: 22px; }

.stock-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  font-size: .92rem;
  font-weight: var(--fw-medium);
  color: var(--brand-success);
}
.stock-line::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(63, 157, 109, .16);
}

.product-short {
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--brand-line);
  color: var(--brand-ink-soft);
}

/* Опции: цвят на рамката, персонализация */
.option-group { margin-bottom: 24px; }
.option-group > .form-label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 10px;
}
.option-group > .form-label em {
  margin-left: auto;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: var(--fw-body);
  font-size: .88rem;
  color: var(--brand-muted);
}

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 10px;
  border: 2px solid var(--brand-line);
  border-radius: var(--radius-pill);
  background: var(--brand-paper);
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: var(--fw-medium);
  color: var(--brand-ink);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.swatch:hover { border-color: var(--brand-primary-soft); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-tint);
}
.swatch__chip {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px rgba(44, 74, 82, .16);
}
.swatch__chip--sec   { background: var(--sec); }
.swatch__chip--white { background: linear-gradient(145deg, #ffffff, #e6eaec); }
.swatch__chip--oak   { background: linear-gradient(145deg, #e5cfae, #bd9c72); }
.swatch__chip--black { background: linear-gradient(145deg, #4a4a4a, #191919); }

.qty-add {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}
.qty {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--brand-paper);
}
.qty button {
  width: 44px;
  height: 100%;
  min-height: 52px;
  border: 0;
  background: transparent;
  color: var(--brand-ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .18s ease;
}
.qty button:hover { background: var(--brand-primary-tint); }
.qty input {
  width: 46px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: var(--fw-bold);
}
.qty input:focus { box-shadow: none; }
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input[type=number] { -moz-appearance: textfield; }

.qty-add .btn { flex: 1 1 auto; }

.assurances {
  display: grid;
  gap: 12px;
  margin-top: 26px;
  padding: 20px 22px;
  background: var(--brand-primary-tint);
  border-radius: var(--radius);
}
.assurances div {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--brand-ink-soft);
}
.assurances svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--brand-primary-deep);
}
.assurances b { color: var(--brand-ink); font-family: var(--font-display); }

/* Табове с описание */
.product-tabs { margin-top: clamp(46px, 6vw, 78px); }
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--brand-line);
}
.tab-nav a {
  display: block;
  padding: 13px 22px;
  margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  color: var(--brand-ink-soft);
}
.tab-nav .is-active a,
.tab-nav a:hover { color: var(--brand-primary-deep); border-bottom-color: var(--brand-primary); }

.spec-table { width: 100%; border-collapse: collapse; }
.spec-table th,
.spec-table td {
  padding: 13px 4px;
  text-align: left;
  border-bottom: 1px solid var(--brand-line);
  font-size: .96rem;
  vertical-align: top;
}
.spec-table th {
  width: 42%;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
}
.spec-table td { color: var(--brand-ink-soft); }

/* ---------- 20. WooCommerce — общи корекции ------------------------------ */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 15px 20px;
  margin-bottom: 26px;
  border: 1px solid var(--brand-line);
  border-left: 4px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: var(--brand-primary-tint);
  list-style: none;
  font-size: .95rem;
}
.woocommerce-error { border-left-color: var(--brand-danger); background: #fdf1ef; }

.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--brand-paper);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--brand-line);
  text-align: left;
}
.woocommerce table.shop_table th { font-family: var(--font-display); font-weight: var(--fw-bold); }

/* Количката.

   Темата стилизираше таблицата, но не и това, което WooCommerce слага
   ВЪТРЕ в реда. Снимката влизаше в цял ръст, а данните на бебето — шест
   двойки в <dl> — падаха стъпаловидно, всяка стойност на нов ред и с
   отстъп. Количката е страница, която клиентът задължително вижда. */
.woocommerce .product-thumbnail img {
  width: 84px;
  height: auto;
  border-radius: calc(var(--radius) / 2);
  border: 1px solid var(--brand-line);
  background: #fff;
}
.woocommerce td.product-name > a { font-weight: var(--fw-bold); }
.woocommerce .variation {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1px 8px;
  margin: 8px 0 0;
  font-size: .85rem;
  line-height: 1.5;
}
.woocommerce .variation dt {
  margin: 0;
  color: var(--brand-muted);
  font-weight: var(--fw-normal);
}
.woocommerce .variation dd { margin: 0; }
.woocommerce .shipping-note {
  display: block;
  margin-top: 2px;
  color: var(--brand-muted);
}
.woocommerce .cart_totals { max-width: 26rem; margin-left: auto; }
.woocommerce .cart_totals h2 { margin: 28px 0 12px; font-size: 1.5rem; }
.woocommerce .cart-back { margin-top: 10px; font-size: .92rem; }

/* На телефон таблицата не се побира на шест колони: редът става карта,
   а заглавията идват от data-title. Така е и в отзивчивия шаблон на
   WooCommerce — тук просто го има и в нашите стилове. */
@media (max-width: 720px) {
  .woocommerce table.shop_table thead { display: none; }
  .woocommerce table.shop_table.cart tr { display: block; padding: 6px 0; }

  /* Надписът е ИЗВАДЕН ОТ ПОТОКА, а не първа клетка на решетка.
     С решетка стойността се разпада: „34,90 €“ и „(68,26 лв.)“ са два
     отделни възела, тоест две клетки, и левовете падат на следващия ред
     чак до левия ръб. Абсолютен надпис + отстъп държи цялата стойност
     заедно, каквото и да сложи WooCommerce в клетката. */
  .woocommerce table.shop_table.cart td {
    display: block;
    position: relative;
    border-bottom: 0;
    padding: 7px 16px 7px 8.8rem;
    min-height: 1.6em;
  }
  .woocommerce table.shop_table.cart td::before {
    content: attr(data-title);
    position: absolute;
    left: 16px;
    top: 7px;
    width: 7.6rem;
    color: var(--brand-muted);
    font-size: .85rem;
    line-height: 1.5;
  }
  .woocommerce table.shop_table.cart td.product-remove,
  .woocommerce table.shop_table.cart td.product-thumbnail { padding-left: 16px; }
  .woocommerce table.shop_table.cart td.product-remove::before,
  .woocommerce table.shop_table.cart td.product-thumbnail::before { content: ""; }
  .woocommerce table.shop_table.cart td.product-thumbnail img { width: 110px; }
  .woocommerce .variation { grid-template-columns: auto 1fr; }
  .woocommerce .cart_totals { max-width: none; }
  .woocommerce .cart_totals h2 { font-size: 1.5rem; }
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .85em 1.9em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--brand-primary-deep);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
  background: var(--brand-ink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--brand-accent);
}
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--brand-accent-dark);
}

/* Стъпките на количка → каса */
.checkout-steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin-bottom: clamp(28px, 4vw, 44px);
  padding: 0;
  list-style: none;
  counter-reset: cstep;
}
.checkout-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: var(--fw-bold);
  color: var(--brand-muted);
}
.checkout-steps li::before {
  counter-increment: cstep;
  content: counter(cstep);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: 2px solid currentColor;
  font-size: .88rem;
}
.checkout-steps .is-current { color: var(--brand-primary-deep); }
.checkout-steps .is-done { color: var(--brand-success); }

/* Методи за доставка в касата */
#shipping_method,
.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
#shipping_method li,
.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius);
  background: var(--brand-paper);
  transition: border-color .18s ease, background-color .18s ease;
}
#shipping_method li:has(input:checked),
.woocommerce-shipping-methods li:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-tint);
}
#shipping_method input[type="radio"],
.woocommerce-shipping-methods input[type="radio"] {
  width: 20px; height: 20px;
  accent-color: var(--brand-primary-deep);
}
#shipping_method label,
.woocommerce-shipping-methods label {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* Куриерите: кой плаща доставката и изборът на офис или автомат (inc/couriers.php) */
.mebaby-payer td {
  padding-top: 4px;
  font-size: .88rem;
  color: var(--brand-ink-soft);
}
.mebaby-point-row td { padding-top: 6px; }
.mebaby-point__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
}
.mebaby-point__chosen {
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: var(--brand-primary-tint);
  color: var(--brand-primary-deep);
  font-weight: 600;
}
.mebaby-point__chosen:empty { display: none; }
.mebaby-point__q { width: 100%; }
.mebaby-point__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 280px;
  overflow-y: auto;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius-sm);
  background: var(--brand-paper);
}
.mebaby-point__list:empty { display: none; }
.mebaby-point__item {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--brand-line);
  background: none;
  color: var(--brand-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mebaby-point__item:hover,
.mebaby-point__item:focus-visible { background: var(--brand-primary-tint); }
.mebaby-point__item span {
  display: block;
  font-size: .86rem;
  color: var(--brand-ink-soft);
}
.mebaby-point__note {
  padding: 10px 14px;
  font-size: .86rem;
  color: var(--brand-muted);
}
/* До офис и автомат адресът на клиента не трябва. С !important, защото
   address-i18n.js на WooCommerce показва полетата с инлайн display. */
form.checkout.mebaby-pickup #billing_address_1_field,
form.checkout.mebaby-pickup #billing_address_2_field,
form.checkout.mebaby-pickup #billing_postcode_field,
form.checkout.mebaby-pickup #billing_state_field { display: none !important; }

.wc_payment_methods {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.wc_payment_method {
  padding: 14px 16px;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius);
  background: var(--brand-paper);
}
.wc_payment_method:has(input:checked) {
  border-color: var(--brand-primary);
  background: var(--brand-primary-tint);
}
.wc_payment_method label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  cursor: pointer;
}
.payment_box {
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand-cream);
  font-size: .9rem;
  color: var(--brand-ink-soft);
}
.payment_box p:last-child { margin-bottom: 0; }

/* ==========================================================================
   21. ЦВЕТОВЕ ПО СЕКЦИИ
   Всеки блок с data-accent="…" сменя --sec за всичко в себе си. Компонентите
   не знаят конкретни цветове — четат само --sec / --sec-soft / --sec-deep.
   ========================================================================== */

[data-accent="sky"]   { --sec: var(--c-sky);   --sec-soft: var(--c-sky-soft);   --sec-deep: var(--c-sky-deep);   }
[data-accent="coral"] { --sec: var(--c-coral); --sec-soft: var(--c-coral-soft); --sec-deep: var(--c-coral-deep); }
[data-accent="sun"]   { --sec: var(--c-sun);   --sec-soft: var(--c-sun-soft);   --sec-deep: var(--c-sun-deep);   }
[data-accent="mint"]  { --sec: var(--c-mint);  --sec-soft: var(--c-mint-soft);  --sec-deep: var(--c-mint-deep);  }
[data-accent="lilac"] { --sec: var(--c-lilac); --sec-soft: var(--c-lilac-soft); --sec-deep: var(--c-lilac-deep); }
[data-accent="peach"] { --sec: var(--c-peach); --sec-soft: var(--c-peach-soft); --sec-deep: var(--c-peach-deep); }
[data-accent="rose"]  { --sec: var(--c-rose);  --sec-soft: var(--c-rose-soft);  --sec-deep: var(--c-rose-deep);  }

/* Фон на секция в активния акцент */
.section--accent { background: var(--sec-soft); }

/* Топлата лента. Плоска и спокойна — цветът идва от съдържанието вътре,
   не от фона. Двата преливащи кръга отпреди дърпаха окото към ъглите. */
.section--wash {
  --band: var(--brand-warm);
  background: var(--band);
}

/* ---------- 22. Плочки с цветовите теми --------------------------------- */

/* Шест теми, шест колони. Изрично, а не auto-fit — auto-fit оставяше
   последната плочка сама на втори ред. */
.theme-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1040px) { .theme-tiles { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .theme-tiles { grid-template-columns: repeat(2, 1fr); } }

.theme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px 24px;
  border-radius: var(--radius-lg);
  background: var(--sec-soft);
  border: 2px solid transparent;
  text-align: center;
  overflow: hidden;
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}
.theme-tile:hover {
  transform: translateY(-6px);
  border-color: var(--sec);
  box-shadow: var(--shadow-lg);
}

/* Кръг в акцентния цвят зад картичката */
.theme-tile::before {
  content: "";
  position: absolute;
  top: -34%;
  left: 50%;
  translate: -50% 0;
  width: 150%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sec);
  opacity: .16;
}

.theme-tile img {
  position: relative;
  width: 100%;
  max-width: 148px;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(44, 74, 82, .16);
  transition: rotate .24s ease;
}
.theme-tile:hover img { rotate: -2.5deg; }

.theme-tile b {
  position: relative;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--sec-deep);
}

/* ---------- 23. Макетите „Арка“ ------------------------------------------
   Четири плочки, всяка с отпечатъка на визитката. Тук снимката е стоката,
   затова тя е едра, а буквите под нея са тихи. Рамката е бяла, а не в
   акцентния цвят: картичката вече си носи цвета и две гами една до друга
   се бият. */

.designs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.4vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1040px) { .designs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .designs { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }

.designs li { display: flex; }

.design {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  padding: 18px 18px 22px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1.5px solid var(--brand-line);
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out),
    border-color var(--dur-ui) var(--ease-out);
}
.design:hover,
.design:focus-visible {
  transform: translateY(-6px);
  border-color: var(--sec);
  box-shadow: var(--shadow-lg);
  color: inherit;
}

/* Мека подложка в акцентния цвят — отпечатъкът е бял и се губи без нея. */
.design__shot {
  display: block;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--sec-soft);
}
.design__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(44, 74, 82, .17);
}

.design__body { display: flex; flex-direction: column; gap: 5px; }

.design__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sec-deep);
}
.design__cat b {
  font-size: .64rem;
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
  color: #fff;
  background: var(--brand-primary-deep);
  border-radius: 999px;
  padding: 2px 8px;
}

.design__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
}
.design__note {
  font-size: .87rem;
  line-height: 1.5;
  color: var(--brand-ink-soft);
}

/* Изборът на макет в страницата на продукта.
   Тук не стигат цветни кръгчета както при рамката и гамата — макетът е
   рисунка и се избира с очи, затова се показва самата картичка. */

.design-picker {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 420px) { .design-picker { grid-template-columns: repeat(2, 1fr); } }

.design-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--brand-line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition:
    border-color var(--dur-ui) var(--ease-out),
    box-shadow var(--dur-ui) var(--ease-out);
}
.design-pick:hover { border-color: var(--sec-soft); }

/* Радиобутонът остава достъпен за клавиатура и екранен четец — скрит е
   визуално, но не и от браузъра, затова не е display:none. */
.design-pick input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.design-pick:has(input:checked) {
  border-color: var(--sec);
  box-shadow: 0 0 0 3px var(--sec-soft);
}
.design-pick:has(input:focus-visible) {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

.design-pick img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--sec-soft);
}
.design-pick__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: center;
  line-height: 1.25;
}
.design-pick__label b { font-size: .84rem; color: var(--brand-ink); }
.design-pick__label em {
  font-style: normal;
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}

/* Изборът на размер.
   Разметката е на WooCommerce (<table class="variations">), затова се
   стилизира тя, а не наш собствен блок — иначе плъгинът рисува едно, а
   прегледът показва друго. Таблицата се разгъва като обикновени редове:
   един признак с две стойности не е таблица. */

.variations {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
}
.variations tbody,
.variations tr { display: block; }
.variations th,
.variations td {
  display: block;
  padding: 0;
  text-align: left;
}
.variations th label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-ink);
}
.variations select {
  width: 100%;
  padding: 11px 14px;
  border: 2px solid var(--brand-line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--brand-ink);
}
.variations select:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}
.reset_variations { display: none; }

/* Цената на избрания вариант, която WooCommerce вмъква под избора. */
.woocommerce-variation-price { margin: 0 0 14px; }
.woocommerce-variation-price .price {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--brand-ink);
}
.woocommerce-variation-description { color: var(--brand-ink-soft); }

/* Заглавие на реда над плочките — „Класика“ и под него с какво се
   различава. Без него двата реда изглеждат като един дълъг списък. */
.design-line-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 18px 0 8px;
}
.design-line-head:first-of-type { margin-top: 4px; }
.design-line-head b {
  font-family: var(--font-display);
  font-size: .92rem;
  color: var(--brand-ink);
}
.design-line-head em {
  font-style: normal;
  font-size: .78rem;
  color: var(--brand-ink-soft);
}

/* Близнакът — същата рисунка в другото оформление. Един ред, не плочка:
   това е една възможност, а не още един избор от списък. */
.design-twin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px 8px 8px;
  border: 2px solid var(--brand-line);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  transition: border-color var(--dur-ui) var(--ease-out);
}
.design-twin:hover { border-color: var(--sec); }
.design-twin img {
  width: 54px;
  height: auto;
  border-radius: 3px;
  background: var(--sec-soft);
}
.design-twin span { display: flex; flex-direction: column; gap: 2px; }
.design-twin b { font-size: .9rem; color: var(--brand-ink); }
.design-twin em {
  font-style: normal;
  font-size: .78rem;
  color: var(--brand-ink-soft);
}

/* ---------- 24. Пътят до поръчката --------------------------------------
   Четирите стъпки стоят на всяка страница от пътя. Клиентът плаща за
   нещо, което още не е отпечатано, затова му трябва да вижда къде е и
   че печатът чака неговото одобрение. */

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .flow { grid-template-columns: 1fr; } }

/* По мястото, а не по екрана: в количката и касата стъпките стоят в
   колоната на страницата, и четири карти в 600 px излизаха извън
   кутията си. Правилата горе остават за браузъри без @container. */
.flow-section > .wrap { container-type: inline-size; }
@container (min-width: 761px) { .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (max-width: 760px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 400px) { .flow { grid-template-columns: 1fr; } }

.flow__step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 16px 18px;
  border-radius: var(--radius);
  background: #fff;
  border: 1.5px solid var(--brand-line);
}
.flow__step[data-state="now"] {
  border-color: var(--sec);
  box-shadow: 0 0 0 3px var(--sec-soft);
}
.flow__step[data-state="next"] { opacity: .6; }

.flow__num {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-top: 1px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: var(--fw-bold);
  color: var(--brand-ink-soft);
  background: var(--brand-line);
}
.flow__step[data-state="now"] .flow__num  { background: var(--sec); color: #fff; }
.flow__step[data-state="done"] .flow__num { background: var(--sec-soft); color: var(--sec-deep); }

.flow__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.flow__body b {
  font-family: var(--font-display);
  font-size: .96rem;
  color: var(--brand-ink);
}
.flow__body em {
  font-style: normal;
  font-size: .8rem;
  line-height: 1.4;
  color: var(--brand-ink-soft);
}

/* Мрежата с продуктите.
   WooCommerce слага `columns-4` и разчита на своите стилове; ние ги не
   зареждаме, затова мрежата е тук. Без нея всяка карта заемаше цялата
   ширина. */
ul.products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 34px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1040px) { ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { ul.products { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; } }
ul.products::before,
ul.products::after { content: none; }

.product-card .design__cat { margin: 0 0 2px; }

/* ---------- 25. Филтърът в магазина ------------------------------------- */

.shop-filter {
  border-bottom: 1px solid var(--brand-line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 3;
}
.shop-filter .wrap {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-block: 12px;
  scrollbar-width: none;
}
.shop-filter .wrap::-webkit-scrollbar { display: none; }

.shop-filter a {
  flex: 0 0 auto;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: var(--fw-bold);
  color: var(--brand-ink-soft);
  text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.shop-filter a:hover { background: var(--brand-primary-tint); color: var(--brand-primary-deep); }
.shop-filter a[aria-current="page"] {
  background: var(--brand-primary);
  color: #fff;
}

/* ---------- 26. Празна количка и „благодарим“ --------------------------- */

.cart-empty,
.thankyou { max-width: 720px; margin-inline: auto; text-align: center; }
.cart-empty h2,
.thankyou h2 {
  margin: 6px 0 12px;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  text-wrap: balance;
}
.cart-empty .lede,
.thankyou .lede { margin-inline: auto; }

.designs--compact { margin-top: 34px; }
.designs--compact .design { padding: 10px 10px 14px; gap: 12px; }
.designs--compact .design__note { display: none; }

.thankyou__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  background: var(--brand-line);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
}
.thankyou__meta li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: #fff;
}
.thankyou__meta span {
  font-size: .68rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}
.thankyou__meta b {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--brand-ink);
  font-variant-numeric: tabular-nums;
}

.thankyou__withdraw {
  margin-top: 22px;
  font-size: .9rem;
  color: var(--brand-ink-soft);
}
.thankyou__withdraw a { white-space: nowrap; }

/* /otkaz/ — отказ от поръчка. */
.withdraw h2 { margin-top: 0; }
.withdraw__meta { margin: 18px 0; }
.withdraw__items { margin: 0 0 18px; padding-left: 1.2em; }
.withdraw form { margin-top: 22px; }

/* Другите макети в страницата на продукта — връзки, не радиобутони. */
.design-picker--links .design-pick { text-decoration: none; }

.empty-note { color: var(--brand-ink-soft); text-align: center; }

/* ---------- 27. Прости таблици по страниците ---------------------------- */

.table-scroll { overflow-x: auto; }
.info-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  margin-top: 18px;
}
.info-table th,
.info-table td {
  padding: 13px 16px 13px 0;
  text-align: left;
  border-bottom: 1px solid var(--brand-line);
}
.info-table th {
  font-size: .7rem;
  font-weight: var(--fw-bold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-ink-soft);
}

.step-block { padding-block: 22px; border-bottom: 1px solid var(--brand-line); }
.step-block:last-of-type { border-bottom: 0; }
.step-block h2 {
  margin: 0 0 8px;
  font-size: 1.22rem;
  color: var(--sec-deep);
}
.step-block p { margin: 0; color: var(--brand-ink-soft); }

.note { font-size: .88rem; color: var(--brand-ink-soft); }

/* ---------- 28. Поводи (цветни етикети) --------------------------------- */

.occasions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.occasion {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  background: var(--sec-soft);
  color: var(--sec-deep);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  transition: transform .2s ease, box-shadow .2s ease;
}
.occasion:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.occasion svg { width: 19px; height: 19px; }

/* ---------- 24. Цветна лента с числа ------------------------------------ */

.stat-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.stat {
  padding: 26px 18px;
  border-radius: var(--radius-lg);
  background: var(--sec-soft);
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--sec-deep);
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: .92rem;
  color: var(--brand-ink-soft);
}

@media (max-width: 760px) { .stat-band { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 25. Декоративни фигури в героя ------------------------------ */

.confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.confetti span {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: .34;
}
/* Кръговете стоят по краищата — центърът остава чист за текста. */
.confetti span:nth-child(1) { width: 88px;  height: 88px;  top: 11%;  left: 2%;   background: var(--c-sun-soft); }
.confetti span:nth-child(2) { width: 44px;  height: 44px;  top: 72%;  left: 6%;   background: var(--c-mint-soft); }
.confetti span:nth-child(3) { width: 130px; height: 130px; top: -5%;  right: 4%;  background: var(--c-lilac-soft); }
.confetti span:nth-child(4) { width: 58px;  height: 58px;  bottom: 14%; right: 5%; background: var(--c-peach-soft); }
.confetti span:nth-child(5) { width: 30px;  height: 30px;  top: 40%;  left: 8%;   background: var(--c-rose-soft); }

@media (max-width: 880px) { .confetti { display: none; } }

/* ---------- 26. Лента с изображения -------------------------------------- */

.strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.strip li { list-style: none; }
.strip a,
.strip span {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sec-soft);
  aspect-ratio: 3 / 4;
}
.strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.strip a:hover img { transform: scale(1.06); }

@media (max-width: 900px) { .strip { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 27. Цветна карта с призив ------------------------------------ */

.promo {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--radius-lg);
  background: var(--sec-soft);
  overflow: hidden;
}
.promo h2 { color: var(--sec-deep); }
.promo__media { display: flex; justify-content: center; }
.promo__media img {
  width: min(100%, 250px);
  border-radius: 8px;
  rotate: 3deg;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 780px) {
  .promo { grid-template-columns: 1fr; text-align: center; }
  .promo .btn-row { justify-content: center; }
  .promo__media { order: -1; }
}

/* ---------- 28. Помощни ------------------------------------------------- */

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 26px; }
.mt-l { margin-top: 44px; }

.divider-heart {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block: 8px 22px;
  color: var(--brand-accent);
}
.divider-heart::before,
.divider-heart::after {
  content: "";
  width: 54px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand-line-strong);
}
.divider-heart svg { width: 18px; height: 18px; }

/* ---------- 22. Влизане ---------------------------------------------------
   Малко движение, и то само на две места: колажа в началото и групите
   картички, когато влязат в кадър. И двете се виждат по веднъж на
   посещение — там е мястото на такова движение. Бутоните и менюто НЕ се
   пипат: те се натискат десетки пъти и анимацията там само бави.

   Всичко виси на `.js-motion`, което скриптът слага сам. Ако скриптът не
   се зареди или потребителят е поискал по-малко движение, страницата е
   точно каквато беше — нищо не се крие, нищо не се чака.

   Движи се само `transform` и `opacity`: те не карат браузъра да
   преизчислява подредбата и вървят на видеокартата. */

/* Колажът се сглобява при отваряне. Заглавието НЕ участва: то е най-
   едрият елемент на екрана и забавянето му разваля показателя за
   зареждане (LCP). */
.js-motion .hero-collage img {
  animation: mb-collage-in var(--dur-enter) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * var(--stagger));
}
@keyframes mb-collage-in {
  from { opacity: 0; transform: translateY(18px) scale(.965); }
}

/* Групите картички. Преход, а не keyframes — ако се задейства повторно
   при бързо превъртане, тръгва от текущата стойност, вместо да мига. */
.js-motion [data-reveal] > * {
  opacity: 0;
  transform: translateY(12px);
}
.js-motion [data-reveal].is-in > * {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

@media print {
  .site-header, .site-footer, .announce, .nav-backdrop { display: none !important; }
  body { background: #fff; }
  .js-motion .hero-collage img { animation: none; }
  .js-motion [data-reveal] > * { opacity: 1; transform: none; }
}

/* ---------- Книжката на началната страница ------------------------------- */

/* Хармониката е широка снимка — стои над текста, не до него. */
.book-wide {
  display: block;
  max-width: 1100px;
  margin: 0 auto clamp(26px, 4vw, 44px);
}
.book-wide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.book-buy { text-align: center; }
.book-buy .price-row { justify-content: center; }

/* Галерията на книжката: снимки, не отпечатък — без поле, квадратна кутия,
   а широката хармоника се вписва цяла вместо да се реже до средата. Фонът е
   на снимките, за да не личи къде свършват. */
.gallery-main--book { aspect-ratio: 1 / 1; padding: 0; background: #ece4d8; }
.gallery-main--book .frame-shot--bare img { object-fit: contain; }

/* ---------- Абонаментът „Очаквате бебе?“ --------------------------------- */

/* Месецът, имейлът с бутона и съгласието — едно под друго, подравнени
   вляво като текста над тях; на телефон — в средата, както цялата карта. */
.subscribe-form { display: grid; gap: 12px; max-width: 470px; margin-top: 22px; }
.subscribe-form .subscribe { margin: 0; max-width: none; }
.subscribe-form__label { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: .9rem; color: var(--sec-deep); }
/* Полето за месеца и полето за имейла са от една форма и трябва да
   изглеждат като едно: хапче, бял фон, без сива рамка. Общото правило
   за input[type="email"] идва по-късно във файла и печелеше над
   .subscribe input, затова тук селекторите са по-тежки.
   Стрелката е наша: системната стои до самия ръб, а при заоблен край
   ляга върху кривата. */
.subscribe input[type="email"],
.subscribe-form select {
  padding: .9em 1.2em;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: #fff;
}
.subscribe-form select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 3.2em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5l5.5 5.5 5.5-5.5' fill='none' stroke='%232c4a52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4em center;
  background-size: 14px 9px;
  cursor: pointer;
}
.subscribe input[type="email"]:focus,
.subscribe-form select:focus { border-color: var(--brand-primary); }
.subscribe-form .consent { text-align: left; }
.promo .woocommerce-message, .promo .woocommerce-error { margin: 18px 0 0; max-width: 470px; }
@media (max-width: 780px) {
  .subscribe-form, .promo .woocommerce-message, .promo .woocommerce-error { margin-inline: auto; }
}

/* Лентата за съгласие с бисквитките (inc/analytics.php). Двата бутона са
   еднакво големи: „Отказвам“ трябва да е толкова лесен, колкото „Приемам“. */
.consent-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  max-width: 760px;
  margin-inline: auto;
  padding: 16px 20px;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius);
  background: var(--brand-paper);
  box-shadow: var(--shadow);
  color: var(--brand-ink);
  font-size: .92rem;
}
.consent-bar[hidden] { display: none; }
.consent-bar p { flex: 1 1 320px; margin: 0; }
.consent-bar a { color: var(--brand-primary-deep); text-decoration: underline; }
.consent-bar__actions { display: flex; gap: 10px; }

.footer-cookies {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  opacity: .8;
}
.footer-cookies:hover { opacity: 1; }

/* ---------- 28. Телефонът: подравняване ---------------------------------
   Проверено на 390 px (iPhone) страница по страница. Всяко правило тук е
   поправка на нещо, което стърчеше, беше смачкано или се застъпваше. */

/* Датата и часът в Safari на iPhone: системната джаджа има собствена
   минимална ширина и не слуша width: 100% — полетата излизаха по-широки
   от останалите. С appearance: none и min-width: 0 застават в реда. */
input[type="date"],
input[type="time"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.45em;
}

/* Стъпките под количката и касата: скъсаният ръб се застъпваше с бутона
   „Приключване на поръчката“ / „Поръчай“ над него. */
.flow-section { margin-top: calc(var(--torn-h) + 28px); }

/* Количеството и бутонът — един ред: малко поле за броя, бутонът до него.
   Досега полето беше на цял ред, а бутонът под него — по-къс. */
.woocommerce div.quantity {
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px 0 0;
}
.woocommerce div.quantity input.qty {
  display: block;
  width: 76px;
  min-height: 54px;
  padding-inline: .4em;
  border-radius: var(--radius-pill);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
.woocommerce .single_add_to_cart_button {
  vertical-align: middle;
  width: calc(100% - 100px); /* място и за интервала между двата елемента */
  min-height: 54px;
}

/* Артикулният номер и категорията под бутона: клиентът няма нужда от тях,
   а нестилизирани се четяха като част от формата. */
.single-product .product_meta { display: none; }

/* Разделите под продукта: бутончета, не списък с точки. */
.woocommerce-tabs ul.tabs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
}
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .55em 1.15em;
  border: 1.5px solid var(--brand-line-strong);
  border-radius: var(--radius-pill);
  background: var(--brand-paper);
  color: var(--brand-ink);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: .92rem;
  text-decoration: none;
}
.woocommerce-tabs ul.tabs li.active a {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary-deep);
  color: #fff;
}
.woocommerce-tabs .panel > h2:first-child { display: none; }

/* Общата сума в количката и в касата: редове, не две колони. Колоната
   с надписите заемаше половината ширина и начините за доставка се
   смачкваха — „Спиди: до / автомат“ на два реда. */
.woocommerce .cart_totals table.shop_table,
.woocommerce table.woocommerce-checkout-review-order-table,
.woocommerce .cart_totals table.shop_table tbody,
.woocommerce table.woocommerce-checkout-review-order-table thead,
.woocommerce table.woocommerce-checkout-review-order-table tbody,
.woocommerce table.woocommerce-checkout-review-order-table tfoot { display: block; }
.woocommerce .cart_totals table.shop_table tr,
.woocommerce table.woocommerce-checkout-review-order-table tr {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  border-bottom: 1px solid var(--brand-line);
}
.woocommerce .cart_totals table.shop_table tr:last-child,
.woocommerce table.woocommerce-checkout-review-order-table tfoot tr:last-child { border-bottom: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td,
.woocommerce table.woocommerce-checkout-review-order-table th,
.woocommerce table.woocommerce-checkout-review-order-table td {
  display: block;
  border-bottom: 0;
}
.woocommerce table.woocommerce-checkout-review-order-table td.product-name { flex: 1 1 auto; min-width: 0; }
.woocommerce table.woocommerce-checkout-review-order-table td.product-total { flex: 0 0 auto; white-space: nowrap; }
.woocommerce .cart_totals tr.woocommerce-shipping-totals,
.woocommerce .woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.woocommerce tr.woocommerce-shipping-totals th { padding-bottom: 4px; }
.woocommerce tr.woocommerce-shipping-totals td { padding-top: 6px; width: 100%; }
.woocommerce tr.mebaby-payer td,
.woocommerce tr.mebaby-point-row td { width: 100%; }

/* В количката WooCommerce пише „Изпращане до София, Област“ и „Промяна
   на адреса“ — още преди клиентът да е казал къде живее. До офис или
   автомат адресът изобщо не трябва. */
.woocommerce-cart .woocommerce-shipping-destination,
.woocommerce-cart .woocommerce-shipping-calculator { display: none; }

/* Бутоните, които водят напред, са на цял ред. */
.woocommerce .wc-proceed-to-checkout .checkout-button,
.woocommerce #place_order {
  display: flex;
  width: 100%;
}

/* Кодът за отстъпка: полето и бутонът на един ред. */
.woocommerce table.shop_table.cart td.actions .coupon {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.woocommerce table.shop_table.cart td.actions .coupon .input-text { flex: 1 1 auto; width: auto; }

/* Кодът за отстъпка и „Обновяване“ в количката на телефон: на цял ред,
   без отстъпа за надписите, който имат другите клетки. */
@media (max-width: 720px) {
  .woocommerce table.shop_table.cart td.actions { padding-left: 16px; }
  .woocommerce table.shop_table.cart td.actions::before { content: none; }
  .woocommerce table.shop_table.cart td.actions .coupon {
    display: grid;
    gap: 10px;
    margin-bottom: 10px;
  }
  .woocommerce table.shop_table.cart td.actions .coupon .input-text,
  .woocommerce table.shop_table.cart td.actions .button { width: 100%; }
}

/* Таблицата „Доставка“ на телефон: без минимална ширина — колоната
   „Цена“ иначе оставаше извън екрана. */
@media (max-width: 520px) {
  .info-table { min-width: 0; font-size: .92rem; }
  .info-table th,
  .info-table td { padding-right: 10px; }
}

/* ---------- 29. Количката и касата на широк екран ------------------------
   Двете страници бяха в тясната колона на текстовите (780 px): на широк
   екран таблицата се смачкваше, снимката в нея ставаше като печат, а
   стъпките под нея излизаха извън кутията си. До 960 px всичко си остава
   една колона, както на телефон. Над това — две: отляво продуктите или
   данните на клиента, отдясно сумата, доставката и бутонът. */

.wrap--checkout { max-width: var(--wrap-narrow); }

/* Снимката в количката не се свива до нищо: в таблица с автоматична
   ширина max-width: 100% я оставяше без място. */
@media (min-width: 721px) {
  .woocommerce table.shop_table.cart td.product-thumbnail { width: 108px; }
  .woocommerce table.shop_table.cart td.product-thumbnail img { max-width: none; }
}

/* Количката: таблицата и сумата една до друга — от 1180 px, когато
   колоната е цялата ширина на сайта. Таблицата не се свива под ~620 px
   (шест колони и полето за количество); при по-тясно тя се пъхаше под
   сумата. Всичко останало (известия, стъпките) е на цял ред. */
@media (min-width: 1180px) {
  .woocommerce-cart .wrap--checkout .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    column-gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
  }
  .woocommerce-cart .wrap--checkout .woocommerce > * { grid-column: 1 / -1; }
  .woocommerce-cart .wrap--checkout .woocommerce > .woocommerce-cart-form { grid-column: 1; }
  .woocommerce-cart .wrap--checkout .woocommerce > .cart-collaterals { grid-column: 2; }
  .woocommerce-cart .wrap--checkout table.shop_table.cart th,
  .woocommerce-cart .wrap--checkout table.shop_table.cart td { padding-inline: 12px; }
  .woocommerce-cart .cart_totals { max-width: none; margin: 0; }
  .woocommerce-cart .cart_totals h2 { margin: 0 0 14px; font-size: 1.5rem; }
}

@media (min-width: 960px) {
  .wrap--checkout { max-width: var(--wrap); }

  /* Касата: данните отляво, поръчката отдясно. Грешките при изпращане
     WooCommerce слага първи във формата — те са на цял ред отгоре, за да
     се виждат там, където страницата скача. */
  .wrap--checkout form.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 440px);
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(28px, 3.5vw, 48px);
    align-items: start;
  }
  .wrap--checkout form.woocommerce-checkout > * { grid-column: 1; }
  .wrap--checkout form.woocommerce-checkout > .woocommerce-NoticeGroup { grid-column: 1 / -1; grid-row: 1; }
  .wrap--checkout form.woocommerce-checkout > #customer_details { grid-row: 2 / span 2; }
  .wrap--checkout form.woocommerce-checkout > #order_review_heading { grid-column: 2; grid-row: 2; margin-top: 0; }
  .wrap--checkout form.woocommerce-checkout > #order_review { grid-column: 2; grid-row: 3; }
  .wrap--checkout .woocommerce-billing-fields > h3:first-child { margin-top: 0; }
}