/*
  СОБСТВЕНИЯТ CSS НА МАГАЗИНА — пише се от вас (`sellanto push`).

  Зарежда се СЛЕД `theme.css` и марковите променливи, тоест правило тук печели
  същия селектор в темата. `theme.css` е доставен файл и не се качва цял (той
  самият съдържа правила, които правната проверка отказва); тук промяната е само
  вашата разлика. Правилата, които скриват цена, ДДС, право на отказ или
  съгласия, се отказват и тук.
*/

/* ── Главното меню: Книжки · Моите книжки · Контакти на реда с логото ─────────
   Лентата с категории под главата (mega menu) я няма: менюто е три точки и
   стои в самата глава. Под 1024px точките са в чекмеджето (snippets/nav-drawer). */
.talebuddy .mega,
.talebuddy .site-nav { display: none; }

.tb-nav { display: none; }

@media (min-width: 1024px) {
  .talebuddy .site-head__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav actions" "search search search";
  }
  .talebuddy .site-head__drawer { display: none; }
  .tb-nav { display: block; grid-area: nav; justify-self: center; min-inline-size: 0; }
  .tb-nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
  .tb-nav__link {
    text-decoration: none; text-transform: uppercase; white-space: nowrap;
    font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.05em; color: var(--text);
  }
  .tb-nav__link:hover,
  .tb-nav__link[aria-current="page"] { color: var(--primary); }
}

@media (min-width: 1280px) {
  .talebuddy .site-head__bar { grid-template-areas: "logo nav actions" "search search search"; }
}

/* ── „Виж как една снимка става приказка“: корицата цяла, A4 портрет ─────── */
.magic__to img {
  aspect-ratio: 1 / 1.414; object-fit: contain; background: var(--bg);
  max-inline-size: 11rem;
}
@media (min-width: 768px) { .magic__to img { max-inline-size: 12.5rem; } }

/* ── „Какво казват родителите“: карусел ──────────────────────────────────────
   Плъзга се с пръст; на широк екран и с копчетата (общият рафт от theme.js).
   Картите са по-малко от три на ред, за да се вижда, че има още. */
.voices__head { display: flex; align-items: flex-end; gap: var(--space); }
.voices__head > :first-child { flex: 1 1 auto; min-inline-size: 0; }
.voices__nav { display: flex; gap: 0.25rem; flex: none; margin: 0 0 var(--row); }
.voices[data-sellanto-rail-still] .voices__nav { display: none; }

.talebuddy .voices__list {
  display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 0.25rem;
}
.talebuddy .voices__list::-webkit-scrollbar { display: none; }
.talebuddy .voices__list > .voices__cell { flex: 0 0 85%; min-inline-size: 0; scroll-snap-align: start; }
@media (min-width: 768px) { .talebuddy .voices__list > .voices__cell { flex-basis: 48%; } }
@media (min-width: 1280px) { .talebuddy .voices__list > .voices__cell { flex-basis: 40%; } }

/* ── Продуктовата галерия: A4 портрет, снимката цяла; натискане = цял екран ── */
.talebuddy .gallery__slide { aspect-ratio: 1 / 1.414; background: var(--bg); }
.talebuddy .gallery__slide img { object-fit: contain; cursor: zoom-in; }

.tb-zoom { padding: 0; border: 0; background: transparent; max-inline-size: 100vw; max-block-size: 100vh; overflow: visible; }
.tb-zoom::backdrop { background: rgb(20 15 10 / 0.88); }
.tb-zoom__img {
  display: block; max-inline-size: 94vw; max-block-size: 90vh; inline-size: auto; block-size: auto;
  object-fit: contain; border-radius: var(--radius); cursor: zoom-out;
}
.tb-zoom__close {
  position: fixed; inset-block-start: calc(env(safe-area-inset-top, 0px) + 0.75rem); inset-inline-end: 0.75rem;
  inline-size: 2.75rem; block-size: 2.75rem; border: 0; border-radius: 999px;
  background: var(--bg); color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer;
}

/* ── Картите на книжките навсякъде по рафтовете — като на началната ─────────
   Корицата цяла (A4) върху бяло; цена и бутон на един ред. Важи за рафтовете
   (препоръчани, „Другите истории“) и за „Последно гледани“. */
.talebuddy :is(.shelf-section, .recent, .collection, .cart__more) .product-card__media { aspect-ratio: 1 / 1.414; background: var(--bg); }
.talebuddy :is(.shelf-section, .recent, .collection, .cart__more) .product-card__media img { object-fit: contain; }
.talebuddy :is(.shelf-section, .recent, .collection, .cart__more) .product-card__price { white-space: nowrap; }
.talebuddy :is(.shelf-section, .recent, .collection, .cart__more) .product-card__actions { flex-wrap: nowrap; gap: 0.375rem; }
.talebuddy :is(.shelf-section, .recent, .collection, .cart__more) .product-card__go { white-space: nowrap; min-inline-size: 0; padding-inline: 0.75rem; }
.talebuddy .recent .product-card { display: grid; gap: 0.5rem; }

/* „Другите истории“: карусел — 2 карти на телефон, 3 на таблет, 4 на широк екран. */
.shelf-section__nav { display: flex; gap: 0.25rem; margin: 0 0 0 auto; }
.shelf-section[data-sellanto-rail-still] .shelf-section__nav { display: none; }
.talebuddy .shelf-section--recommendations .grid--rail {
  display: flex; gap: var(--gap); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-block-end: 0.25rem;
}
.talebuddy .shelf-section--recommendations .grid--rail::-webkit-scrollbar { display: none; }
.talebuddy .shelf-section--recommendations .grid--rail > .grid__cell {
  flex: 0 0 calc((100% - var(--gap)) / 2); min-inline-size: 0; scroll-snap-align: start;
}
@media (min-width: 768px) {
  .talebuddy .shelf-section--recommendations .grid--rail > .grid__cell { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}
@media (min-width: 1280px) {
  .talebuddy .shelf-section--recommendations .grid--rail > .grid__cell { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
}
@media (max-width: 767.98px) {
  .talebuddy :is(.shelf-section--recommendations, .recent, .collection) .product-card { padding: 0.5rem; gap: 0.375rem; }
  .talebuddy :is(.shelf-section--recommendations, .recent, .collection) .product-card__title { font-size: 0.875rem; }
  .talebuddy :is(.shelf-section--recommendations, .recent, .collection) .product-card__go { font-size: 0.8125rem; padding-inline: 0.5rem; }
}

/* ══ „Твоята книжка“ и „Моите книжки“ (sections/book-pages.twig) ══════════════ */
.tb-books [hidden] { display: none !important; }
.tb-books { max-inline-size: 64rem; margin-inline: auto; }
.tb-book__title, .tb-mine__title { margin: 0 0 var(--row); text-align: center; font-size: clamp(1.625rem, 1.2rem + 2vw, 2.5rem); line-height: 1.15; text-wrap: balance; }
.tb-book__working, .tb-book__failed, .tb-book__done { display: grid; justify-items: center; gap: var(--space); text-align: center; }

/* Рисува се: магия — въртящ се пръстен, звездички по орбита, книжка с
   прелистваща се страница и проблясващи искри (без процент). */
.tb-magic {
  position: relative; display: grid; place-items: center;
  inline-size: clamp(10rem, 42vw, 13rem); aspect-ratio: 1; margin-block: 0.5rem;
  color: var(--cta);
}
.tb-magic > * { grid-area: 1 / 1; }
.tb-magic__glow {
  inline-size: 70%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cta) 28%, transparent), transparent 70%);
  animation: tb-magic-pulse 2.4s ease-in-out infinite;
}
.tb-magic__ring {
  inline-size: 100%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, color-mix(in srgb, var(--cta) 35%, transparent) 45%, var(--cta) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.45rem));
          mask: radial-gradient(farthest-side, transparent calc(100% - 0.5rem), #000 calc(100% - 0.45rem));
  animation: tb-magic-spin 1.4s linear infinite;
}
.tb-magic__orbit { inline-size: 80%; aspect-ratio: 1; position: relative; animation: tb-magic-spin 6s linear infinite reverse; }
.tb-magic__star { position: absolute; font-size: 1.125rem; line-height: 1; color: var(--cta); translate: -50% -50%; animation: tb-magic-twinkle 1.8s ease-in-out infinite; }
.tb-magic__star--1 { inset-block-start: 0; inset-inline-start: 50%; }
.tb-magic__star--2 { inset-block-start: 75%; inset-inline-start: 93%; animation-delay: 0.6s; font-size: 0.875rem; }
.tb-magic__star--3 { inset-block-start: 75%; inset-inline-start: 7%; animation-delay: 1.2s; }
.tb-magic__book { inline-size: 38%; overflow: visible; animation: tb-magic-float 2.6s ease-in-out infinite; }
.tb-magic__page { transform-origin: 32px 28px; animation: tb-magic-flip 2.6s ease-in-out infinite; }
.tb-magic__spark { position: absolute; font-size: 0.875rem; line-height: 1; color: var(--cta); opacity: 0; animation: tb-magic-rise 2.4s ease-out infinite; }
.tb-magic__spark--1 { inset-block-start: 34%; inset-inline-start: 36%; }
.tb-magic__spark--2 { inset-block-start: 30%; inset-inline-start: 60%; animation-delay: 0.6s; font-size: 0.75rem; }
.tb-magic__spark--3 { inset-block-start: 36%; inset-inline-start: 50%; animation-delay: 1.2s; font-size: 1rem; }
.tb-magic__spark--4 { inset-block-start: 32%; inset-inline-start: 44%; animation-delay: 1.8s; font-size: 0.625rem; }
@keyframes tb-magic-spin { to { rotate: 360deg; } }
@keyframes tb-magic-pulse { 0%, 100% { scale: 0.9; opacity: 0.7; } 50% { scale: 1.08; opacity: 1; } }
@keyframes tb-magic-twinkle { 0%, 100% { opacity: 0.35; scale: 0.7; } 50% { opacity: 1; scale: 1.15; } }
@keyframes tb-magic-float { 0%, 100% { translate: 0 0.25rem; } 50% { translate: 0 -0.25rem; } }
@keyframes tb-magic-flip { 0%, 30% { scale: 1 1; } 50% { scale: -1 1; } 80%, 100% { scale: 1 1; } }
@keyframes tb-magic-rise {
  0% { opacity: 0; translate: 0 0; scale: 0.5; }
  25% { opacity: 1; }
  100% { opacity: 0; translate: 0 -2.25rem; scale: 1.2; rotate: 90deg; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-magic__ring { animation-duration: 4s; }
  .tb-magic__orbit, .tb-magic__glow, .tb-magic__star, .tb-magic__book, .tb-magic__page, .tb-magic__spark { animation: none; }
}
.tb-book__status { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.tb-book__note, .tb-book__ready-note, .tb-book__saved { margin: 0; color: var(--muted); font-size: 0.9375rem; max-inline-size: 34rem; }

/* Готово: героят (квадрат, какъвто се рисува — без празно над и под него),
   после книгата: затворена корица → разтвори → край на прегледа. */
.tb-book__hero, .tb-book__book { display: grid; justify-items: center; gap: 0.5rem; margin: 0; inline-size: 100%; }
.tb-book__caption { font-weight: 700; color: var(--muted); }
.tb-book__hero-img { display: block; inline-size: min(100%, 20rem); aspect-ratio: 1 / 1; object-fit: cover; background: var(--bg); border-radius: var(--radius); box-shadow: 0 14px 34px rgb(43 33 24 / 0.16); }

/* ── Книгата (tb-flip) ─────────────────────────────────────────────────────
   Една страница е 1200 × 1664 (както ги рисува услугата). Тясно: един лист на
   екран. Широко (≥ 40rem): разтвор от два листа; затворената корица лежи
   като дясната половина, изместена към средата. */
.tb-flip { --tb-page: 1200 / 1664; --tb-ease: cubic-bezier(.3, .7, .2, 1); inline-size: 100%; display: grid; gap: 0.875rem; justify-items: center; overflow-x: clip; }
.tb-flip__stage { position: relative; inline-size: min(100%, 22rem); aspect-ratio: var(--tb-page); perspective: 2000px; touch-action: pan-y; transition: transform .9s var(--tb-ease); }
.tb-flip.is-wide .tb-flip__stage { inline-size: min(100%, 46rem); aspect-ratio: 2400 / 1664; }
.tb-flip.is-wide:not(.is-open) .tb-flip__stage { transform: translateX(-25%); }

.tb-flip__track { position: absolute; inset: 0; display: flex; overflow: hidden;
  overscroll-behavior-x: contain; scrollbar-width: none; background: #fff; border-radius: var(--radius); box-shadow: 0 14px 34px rgb(43 33 24 / 0.18); transition: opacity .3s .2s; }
.tb-flip__track::-webkit-scrollbar { display: none; }
.tb-flip:not(.is-open) .tb-flip__track { opacity: 0; transition-delay: .5s; }
/* Разтворът е ЕДНА картина, нарязана на два листа точно по средата (без
   застъпване — мерено). Затова двата листа са с една и съща височина, в
   естествената си пропорция, без отделно изрязване (object-fit), допрени
   един до друг в средата на слайда. Ако пропорцията не съвпада със сцената,
   излишъкът пада по външните ръбове, никога в шева. Без сянка на сгъвката. */
.tb-flip__slide { position: relative; display: flex; flex: 0 0 100%; justify-content: center; align-items: stretch; overflow: hidden; }
.tb-flip__page { display: block; flex: none; block-size: 100%; inline-size: auto; aspect-ratio: auto var(--tb-page); max-inline-size: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: #fff; }
.tb-flip__page--blank { aspect-ratio: var(--tb-page); background: #fbf6ef; }
.tb-flip__end { flex: none; block-size: 100%; aspect-ratio: var(--tb-page); box-sizing: border-box; display: grid; place-content: center; padding: 1.5rem; text-align: center; background: linear-gradient(160deg, #fff6e9, #fde7d6); }
.tb-flip__end p { margin: 0; max-inline-size: 20rem; font-size: 1.125rem; font-weight: 600; line-height: 1.45; color: var(--text); text-wrap: balance; }

/* Корицата: лицето е корицата, гърбът — левият лист на първия разтвор, така
   че щом се завърти докрай, подмяната с разтвора не се вижда. */
.tb-flip__cover { position: absolute; inset: 0; z-index: 2; cursor: pointer; transform-origin: left center; transform-style: preserve-3d;
  transition: transform .9s var(--tb-ease), opacity .9s var(--tb-ease); border-radius: var(--radius); }
.tb-flip.is-wide .tb-flip__cover { inset-inline-start: 50%; }
.tb-flip__cover-front, .tb-flip__cover-back { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; border-radius: inherit; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tb-flip__cover-front { object-fit: cover; background: var(--surface); box-shadow: 0 14px 34px rgb(43 33 24 / 0.25); }
.tb-flip__cover-back { transform: rotateY(180deg); background: #fbf6ef; overflow: hidden; }
.tb-flip__cover-back img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tb-flip.is-open .tb-flip__cover { transform: rotateY(-180deg); cursor: default; }
.tb-flip:not(.is-wide).is-open .tb-flip__cover { transform: rotateY(-110deg); opacity: 0; }
.tb-flip.is-done .tb-flip__cover { visibility: hidden; pointer-events: none; }
/* Тясно: корицата се завърта и чак после избледнява. */
.tb-flip:not(.is-wide) .tb-flip__cover { transition: transform .9s var(--tb-ease), opacity .9s cubic-bezier(.8, 0, .9, .5); }
/* Затваряне (широко): корицата се връща върху десния лист; левият лист вдига
   с нея (гърбът ѝ го носи), а книгата се връща в средата чак след това. */
.tb-flip.is-wide.is-closing .tb-flip__stage { transition-delay: .7s; }
.tb-flip.is-wide.is-closing .tb-flip__track { transition-delay: .7s; background: transparent; box-shadow: none; }
.tb-flip.is-wide.is-closing .tb-flip__slide:first-child > :first-child { visibility: hidden; }

/* Обръщане на страница (assets/tb-book-pages.js → turn): „под“ + „листът“
   над лентата за 0,9 с. Листът се върти около гръбчето; лицето и гърбът
   са долепени до гръбчето, затова шевът остава 0 px и по време на хода. */
.tb-flip__turn { position: absolute; inset: 0; z-index: 3; perspective: 2000px; pointer-events: none; }
.tb-flip__under { position: absolute; inset: 0; display: flex; justify-content: center; overflow: hidden; border-radius: var(--radius); background: #fff; }
.tb-flip__leaf { --tb-turn: cubic-bezier(.4, 0, .2, 1); position: absolute; inset-block: 0; transform-style: preserve-3d; transition: transform .9s var(--tb-turn), opacity .9s var(--tb-turn); }
.tb-flip__leaf.no-anim { transition: none; }
.tb-flip__leaf.is-right { inset-inline-start: 50%; inline-size: 50%; transform-origin: left center; }
.tb-flip__leaf.is-left { inset-inline-start: 0; inline-size: 50%; transform-origin: right center; }
.tb-flip__leaf.is-single { inset-inline: 0; transform-origin: left center; transition: transform .9s var(--tb-turn), opacity .9s cubic-bezier(.8, 0, .9, .5); }
/* Тясно назад: листът се връща и става плътен рано, не накрая. */
.tb-flip__leaf.is-single.is-back { transition: transform .9s var(--tb-turn), opacity .9s cubic-bezier(.1, .5, .2, 1); }
.tb-flip__leaf.is-right.is-turned { transform: rotateY(-180deg); }
.tb-flip__leaf.is-left.is-turned { transform: rotateY(180deg); }
.tb-flip__leaf.is-single.is-gone { transform: rotateY(-110deg); opacity: 0; }
.tb-flip__leaf-face { position: absolute; inset: 0; display: flex; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tb-flip__leaf-face--back { transform: rotateY(180deg); }
.is-right > .tb-flip__leaf-face--front, .is-left > .tb-flip__leaf-face--back { justify-content: flex-start; border-radius: 0 var(--radius) var(--radius) 0; }
.is-right > .tb-flip__leaf-face--back, .is-left > .tb-flip__leaf-face--front { justify-content: flex-end; border-radius: var(--radius) 0 0 var(--radius); }
.is-single > .tb-flip__leaf-face { justify-content: center; border-radius: var(--radius); }
/* Лека сянка по листа, докато е във въздуха (започва и свършва на нула). */
.tb-flip__leaf-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: tb-flip-shade .9s linear; }
.is-right > .tb-flip__leaf-face--front::after, .is-left > .tb-flip__leaf-face--back::after { background: linear-gradient(90deg, rgb(0 0 0 / .22), transparent 60%); }
.is-left > .tb-flip__leaf-face--front::after, .is-right > .tb-flip__leaf-face--back::after { background: linear-gradient(270deg, rgb(0 0 0 / .22), transparent 60%); }
@keyframes tb-flip-shade { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

.tb-flip__controls { display: flex; align-items: center; gap: 1rem; }
.tb-flip__btn { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; padding: 0; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text); cursor: pointer; box-shadow: 0 2px 8px rgb(43 33 24 / 0.08); transition: background-color .2s, border-color .2s, opacity .2s; }
.tb-flip__btn:hover:not([disabled]) { border-color: var(--cta); }
.tb-flip__btn[disabled] { opacity: .35; cursor: default; box-shadow: none; }
.tb-flip__btn--next:not([disabled]) { background: var(--cta); border-color: var(--cta); color: #fff; }
.tb-flip__btn--next:hover:not([disabled]) { background: var(--cta-hover, var(--cta)); }
.tb-flip__btn:focus-visible { outline: 3px solid var(--cta-2, #2b2118); outline-offset: 3px; }
/* „Напред“ леко пулсира, докато не бъде натиснат за първи път. */
.tb-flip__btn--next.is-hint:not([disabled]) { animation: tb-flip-hint 1.8s ease-in-out infinite; }
@keyframes tb-flip-hint {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta) 45%, transparent); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--cta) 0%, transparent); }
}
.tb-flip__dots { display: flex; gap: 0.375rem; }
.tb-flip__dots span { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--border); transition: background-color .2s; }
.tb-flip__dots span[aria-current="true"] { background: var(--cta); }
.tb-flip__live { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
.tb-flip.no-anim, .tb-flip.no-anim * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .tb-flip__stage, .tb-flip__cover, .tb-flip__track, .tb-flip__dots span, .tb-flip__leaf { transition: none; }
  .tb-flip__turn { display: none; }
  .tb-flip.is-open .tb-flip__cover, .tb-flip:not(.is-wide).is-open .tb-flip__cover { transform: none; opacity: 0; }
  .tb-flip__btn--next.is-hint:not([disabled]) { animation: none; }
}

.tb-book__specs { list-style: none; margin: 0; padding: var(--space) 0 0; border-block-start: 1px solid var(--border); inline-size: min(100%, 34rem);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1rem; text-align: start; color: var(--text); }
.tb-book__specs li::before { content: "✓"; color: var(--success); font-weight: 700; margin-inline-end: 0.5rem; }
.tb-book__price { margin: 0; font-size: 1.75rem; font-weight: 700; color: var(--cta); }
.tb-book__actions { display: grid; gap: 0.625rem; inline-size: min(100%, 24rem); }
.tb-book__actions .btn { inline-size: 100%; justify-content: center; }

/* Моите книжки */
.tb-mine__lede { margin: 0 0 var(--space); text-align: center; color: var(--muted); }
.tb-mine__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.tb-mine__item { display: grid; gap: 0.625rem; padding: 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 10px rgb(43 33 24 / 0.05); }
.tb-mine__media { display: block; border-radius: calc(var(--radius) * 0.8); overflow: hidden; background: var(--bg); }
.tb-mine__media img { display: block; inline-size: 100%; aspect-ratio: 1 / 1.414; object-fit: contain; }
.tb-mine__body { display: grid; gap: 0.375rem; }
.tb-mine__name { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.tb-mine__child, .tb-mine__status { margin: 0; font-size: 0.875rem; color: var(--muted); }
.tb-mine__status { color: var(--success); }
.tb-mine__price { margin: 0; font-size: 1.25rem; font-weight: 700; color: var(--cta); }
.tb-mine__actions { display: grid; gap: 0.5rem; margin-block-start: 0.25rem; }
.tb-mine__actions .btn { inline-size: 100%; justify-content: center; white-space: nowrap; }
.tb-mine__remove { justify-self: center; border: 0; background: none; color: var(--muted); text-decoration: underline; font: inherit; font-size: 0.875rem; cursor: pointer; }
.tb-mine__empty { display: grid; justify-items: center; gap: var(--space); padding-block: var(--space); color: var(--muted); }
@media (min-width: 768px) {
  .tb-book__done { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--section-space, 2.5rem); align-items: start; }
  .tb-book__done > * { grid-column: 1 / -1; }
}

/* Персонализацията в количката и поръчката: всяко свойство на свой ред. */
.cart-line__props, .order-line__meta { display: grid; gap: 0.125rem; }

/* ── 5 Oct 2026: product page ─────────────────────────────────────────────── */

/* "От снимка до приказка — три лесни стъпки": the number big, first, on the
   left; the icon, heading and text beside it. Homepage and product page. */
.talebuddy .steps__item {
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
}
.talebuddy .steps__item::before {
  position: static;
  grid-column: 1;
  grid-row: 1 / span 3;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  font-size: 1.625rem;
}
.talebuddy .steps__item > * { grid-column: 2; }
.talebuddy .steps__heading { padding-inline-end: 0; }

/* "За историята": the first lines, then "Прочети още" (custom.js). */
.tb-clamp[data-tb-clamped="true"] {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.tb-clamp-toggle {
  margin-block-start: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cta);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* "От снимка до герой": before/after slider. */
.tb-ba__head { text-align: center; margin-block-end: var(--space); }
.tb-ba__heading { margin: 0; }
.tb-ba__text { margin: 0.5rem 0 0; color: var(--muted); }
.tb-ba__frame {
  --tb-pos: 50%;
  position: relative;
  inline-size: min(100%, 44rem);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-2, #f0f0f0);
  user-select: none;
  touch-action: pan-y;
  aspect-ratio: 4 / 3;
}
.tb-ba__img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.tb-ba__before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--tb-pos)) 0 0);
}
.tb-ba__label {
  position: absolute;
  inset-block-start: 0.75rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  background: rgb(255 248 238 / 0.92);
  color: var(--text, #1d1d1b);
  font-size: 0.9375rem;
  pointer-events: none;
}
.tb-ba__label--before { inset-inline-start: 0.75rem; }
.tb-ba__label--after { inset-inline-end: 0.75rem; }
.tb-ba__line {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--tb-pos);
  inline-size: 3px;
  margin-inline-start: -1.5px;
  background: #fff;
  pointer-events: none;
}
.tb-ba__knob {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 999px;
  background: #e3f1ff;
  color: #1d1d1b;
  font-weight: 700;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
}
.tb-ba__range {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.tb-ba__range:focus-visible + .tb-ba__line,
.tb-ba__frame:focus-within .tb-ba__knob { outline: 3px solid var(--cta); outline-offset: 2px; }

/* The cover's badge stays on the cover (see .tb-media-frame in product-info). */
.talebuddy .tb-media-frame { position: relative; min-inline-size: 0; }
@media (max-width: 767px) {
  .talebuddy .product__media > .tb-media-frame { order: 2; }
}

/* Момче / Момиче labels, under the discount (product page and cards). */
.tb-gender { color: #fff; font-weight: 700; border: 0; text-transform: none; letter-spacing: normal; }
.tb-gender--boy { background: #2f7fd6; }
.tb-gender--girl { background: #e0559a; }
.tb-genders { display: flex; flex-wrap: wrap; gap: 0.25rem; flex-basis: 100%; }
.talebuddy .product-card__badges { flex-direction: column; align-items: flex-start; }
.talebuddy .product-card__badges .tb-genders { flex-direction: column; align-items: flex-start; }
.talebuddy .product-card__badges .tb-gender { border-radius: 999px; padding: 0.25rem 0.625rem; font-size: 0.75rem; }

/* Product page: a smaller cover (12 Oct 2026). The frame's width follows the
   screen's height, so the whole A4 cover stays visible and the price and
   "Създай книжката" come sooner: about 45% of the screen on a phone, 62% on a
   larger screen. Centred in its column; the thumbnails follow the same width. */
.talebuddy .tb-media-frame {
  inline-size: min(100%, calc(45svh / 1.414));
  margin-inline: auto;
}
/* 27 Oct 2026: from 768px the cover fills its column (up to 40rem). The
   height rule (62svh / 1.414) left a ~250px cover in a ~540px column on a
   laptop. Phones keep their own rule below. */
@media (min-width: 768px) {
  .talebuddy .tb-media-frame { inline-size: min(100%, 40rem); }
}
/* …and the badge on it stays on one line at that width. */
.talebuddy .tb-media-frame .product__media-badge {
  white-space: nowrap;
  max-inline-size: calc(100% - 1.5rem);
  font-size: 0.625rem;
  gap: 0.25rem;
  padding: 0.3rem 0.5rem;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
}
@media (min-width: 768px) {
  .talebuddy .tb-media-frame .product__media-badge { font-size: 0.75rem; padding: 0.375rem 0.75rem; }
}

/* Variant-only pictures (product-gallery.twig, custom.js): `hidden` wins over
   the theme's own display on slides and thumbnails. */
.talebuddy .gallery [data-tb-variant-image][hidden],
.talebuddy .gallery [data-tb-gender][hidden],
.talebuddy .gallery .gallery__thumbs[hidden] { display: none !important; }

/* Translated long descriptions: one <ul> per item, read as one list. */
.tab__rich .tb-desc-list + .tb-desc-list { margin-top: 0; }
.tab__rich .tb-desc-list { margin-bottom: 0; }

/* ── 26 Oct 2026: bigger pictures on phones (under 768px only) ─────────────
   Product page: the cover fills the content width again. The 12 Oct rule
   above sized the frame by the screen's HEIGHT (45svh / 1.414), which on a
   390×664 phone gave a 211px-wide cover — about half the screen. The
   thumbnails and the badge follow the frame. From 768px nothing changes. */
@media (max-width: 767.98px) {
  .talebuddy .tb-media-frame { inline-size: 100%; }
}

/* Home hero: the fan of covers runs edge to edge and the middle cover is
   bigger (sides 38% + middle 50% − 2×13% overlap = 100%, so no page scroll).
   More room above and below, so the tilted covers and the "Една снимка" card
   aren't clipped by the frame's `overflow: clip`. */
@media (max-width: 767.98px) {
  .talebuddy .hero-book__visual {
    margin-inline: calc(-1 * var(--gutter));
    padding: 1.25rem 0.5rem 2rem;
  }
  .talebuddy .hero-book__fan { max-inline-size: none; }
  .talebuddy .hero-book__cover { flex-basis: 38%; }
  .talebuddy .hero-book__cover:nth-child(2) { flex-basis: 50%; margin-inline: -13%; }
  .talebuddy .hero-book__photo { inset-block-start: 0.25rem; inset-inline-start: 0.75rem; }
}

/* TaleBuddy (26 Oct 2026): no bottom tab bar and no sticky price/"Създай моята книжка" bar on phones,
   in every language (the user's call). Their dock slots go to 0 too, so nothing keeps room for them. */
.bottom-bar,
.product__sticky { display: none; }
:root { --dock-bar: 0px; }
body:has(.product__sticky) { --dock-action: 0px; }

/* ══ „Стани автор“ (sections/tb-creators.twig) — 3 Nov 2026, макет ══════════ */
.tb-authors { max-inline-size: 60rem; margin-inline: auto; display: grid; gap: calc(var(--section-space, 2.5rem) * 0.8); }
.tb-authors__hero { display: grid; justify-items: center; gap: var(--space); text-align: center; padding: calc(var(--space) * 2) var(--space); border-radius: calc(var(--radius) * 1.4);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cta) 14%, var(--surface)), var(--surface)); box-shadow: 0 14px 34px rgb(43 33 24 / 0.08); }
.tb-authors__eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta); }
.tb-authors__title { margin: 0; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); line-height: 1.12; text-wrap: balance; max-inline-size: 40rem; }
.tb-authors__lede { margin: 0; max-inline-size: 36rem; color: var(--muted); font-size: 1.0625rem; }
.tb-authors__block { display: grid; gap: var(--space); }
.tb-authors__h2 { margin: 0; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.2; }
.tb-authors__h3 { margin: 0; font-size: 1.0625rem; }
.tb-authors__p { margin: 0; max-inline-size: 44rem; }
.tb-authors__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.tb-authors__steps li { display: grid; gap: 0.375rem; align-content: start; padding: var(--space); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.tb-authors__steps li span:last-child { color: var(--muted); font-size: 0.9375rem; }
.tb-authors__num { display: grid; place-items: center; inline-size: 2.25rem; block-size: 2.25rem; border-radius: 50%; background: var(--cta); color: #fff; font-weight: 700; }
.tb-authors__table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.tb-authors__table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tb-authors__table th, .tb-authors__table td { padding: 0.625rem 0.875rem; text-align: start; border-block-end: 1px solid var(--border); vertical-align: top; }
.tb-authors__table tr:last-child td { border-block-end: 0; }
.tb-authors__table th { background: var(--surface); font-weight: 700; }
.tb-authors__table td:first-child { font-weight: 700; white-space: nowrap; color: var(--cta); }
.tb-authors__cards { display: grid; gap: var(--space); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.tb-authors__card { display: grid; gap: 0.5rem; align-content: start; padding: var(--space); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.tb-authors__big { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--cta); font-variant-numeric: tabular-nums; }
.tb-authors__list, .tb-authors__rules { margin: 0; padding-inline-start: 1.125rem; display: grid; gap: 0.375rem; }
.tb-authors__list { color: var(--muted); font-size: 0.9375rem; }
.tb-authors__rules { max-inline-size: 48rem; }
.tb-authors__name { display: grid; gap: 0.75rem; padding: var(--space); border-radius: var(--radius); border: 2px dashed color-mix(in srgb, var(--cta) 45%, transparent); background: color-mix(in srgb, var(--cta) 6%, var(--surface)); }
.tb-authors__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; padding: 0.1em 0.35em; border-radius: 0.3em; background: color-mix(in srgb, var(--cta) 14%, var(--surface)); }
.tb-authors__example { margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline; }
.tb-authors__tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.2em 0.6em; border-radius: 999px; background: var(--text); color: var(--bg); }
.tb-authors__tag--out { background: var(--cta); color: #fff; }
.tb-authors__form { display: grid; gap: calc(var(--space) * 1.5); }
.tb-authors__fieldset { margin: 0; padding: var(--space); border: 1px solid var(--border); border-radius: var(--radius); display: grid; gap: var(--row); min-inline-size: 0; }
.tb-authors__legend { padding-inline: 0.5rem; font-weight: 700; font-size: 1.0625rem; }
.tb-authors__grid { display: grid; gap: var(--row); grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }
.tb-authors__hint { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.tb-authors__pages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space); }
.tb-authors__page { display: grid; gap: 0.375rem; padding-block-end: var(--space); border-block-end: 1px dashed var(--border); }
.tb-authors__page:last-child { border-block-end: 0; padding-block-end: 0; }
.tb-authors__page-label { font-weight: 700; }
.tb-authors__page-text { inline-size: 100%; resize: vertical; }
.tb-authors__girl summary { cursor: pointer; color: var(--cta); font-size: 0.875rem; font-weight: 700; }
.tb-authors__girl[open] summary { margin-block-end: 0.375rem; }
.tb-authors__agree { align-items: flex-start; font-size: 0.9375rem; }
.tb-authors__agree .field-check__box { margin-block-start: 0.2rem; flex: none; }
.tb-authors__submit { display: grid; justify-items: center; gap: 0.5rem; text-align: center; }
.tb-authors__submit .btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.tb-authors__soon { margin: 0; color: var(--muted); font-size: 0.875rem; }
.tb-authors textarea.field { font: inherit; }

/* ══ Home page rework (4 Nov 2026) ══════════════════════════════════════════ */
/* Hero: heading, text and button centred on phones only (left on desktop); the
   button's label is centred and wraps in balanced lines (long languages). */
.talebuddy .btn { text-align: center; }
.talebuddy .hero-book__heading, .talebuddy .hero-book__lead { text-wrap: balance; }
@media (max-width: 767.98px) {
  .talebuddy .hero-book__text { justify-items: center; text-align: center; }
  .talebuddy .hero-book__heading, .talebuddy .hero-book__lead { text-align: center; }
  .talebuddy .hero-book__lead { margin-inline: auto; }
  .talebuddy .hero-book__actions, .talebuddy .hero-book__proof { justify-content: center; }
}
.talebuddy .hero-book__actions .btn { text-wrap: balance; line-height: 1.25; }
/* Every primary call-to-action on the home page (hero, heroes, magic): a long
   label wraps in two even, centred lines instead of leaving one word alone. */
.talebuddy-main .btn--primary { text-wrap: balance; line-height: 1.25; }
@media (max-width: 767.98px) {
  .talebuddy .heroes-marquee .btn--xl, .talebuddy .magic .btn--primary {
    font-size: 1rem; padding-inline: 1.25rem; padding-block: 0.625rem; min-block-size: 3.25rem;
  }
}
@media (max-width: 767.98px) {
  .talebuddy .hero-book__grid { align-items: center; }
  .talebuddy .hero-book__heading { font-size: clamp(1.75rem, 1.2rem + 3vw, 2.25rem); }
  .talebuddy .hero-book__actions .btn--primary {
    flex: 1 1 100%; max-inline-size: 26rem; font-size: 1rem;
    padding-inline: 1.25rem; padding-block: 0.625rem; min-block-size: 3.25rem;
  }
}

/* Cards: the discount and Момче/Момиче sit in one row under the title, right
   above the price (not on the cover); badges + price keep to the card's foot. */
.talebuddy .product-card__badges { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.talebuddy .product-card__badges .tb-genders { flex-direction: row; flex-basis: auto; }
.talebuddy .product-card--grid .product-card__badges { margin-block-start: auto; }
.talebuddy .product-card--grid .product-card__badges ~ .product-card__price { margin-block-start: 0; }

/* Books shelf: Момче | Момиче filter (product-rail.twig `gender_filter`, custom.js). */
.tb-gfilter { display: flex; justify-content: center; gap: 0.5rem; margin-block: 0 var(--space); }
.talebuddy .tb-gfilter__btn {
  flex: 1 1 0; max-inline-size: 12rem; min-block-size: 2.75rem; font-size: 1rem;
  background: transparent; border: 2px solid currentColor; box-shadow: none;
}
.talebuddy .tb-gfilter__btn--boy { color: #1f63b0; }
.talebuddy .tb-gfilter__btn--girl { color: #b8336f; }
.talebuddy .tb-gfilter__btn[aria-pressed="true"] { color: #fff; }
.talebuddy .tb-gfilter__btn--boy[aria-pressed="true"] { background: #1f63b0; border-color: #1f63b0; }
.talebuddy .tb-gfilter__btn--girl[aria-pressed="true"] { background: #b8336f; border-color: #b8336f; }
.talebuddy .tb-gfilter__btn[aria-pressed="true"]::before { content: "✓"; font-weight: 800; }
.talebuddy .tb-gfilter__btn:focus-visible { outline: 3px solid var(--cta); outline-offset: 2px; }
.shelf-section .grid__cell[hidden] { display: none !important; }
/* The shelf with the Момче | Момиче filter: its heading centred too (desktop + phone). */
.talebuddy .shelf-section:has(.tb-gfilter) .rail__head { justify-content: center; text-align: center; }
.talebuddy .shelf-section:has(.tb-gfilter) .section__heading { text-align: center; text-wrap: balance; margin-inline: auto; }