/* ===== TOKENS ===== */
:root{
  --base-color:#FFF8F2;
  --accent-color:#E76F51;
  --primary-cta:#097B34;
  --headings-color:#0E1E25;
  --border-color:#E7D9C9;
  --body-text:#2A3A42;
}

/* ===== BASE ===== */
*{box-sizing:border-box;}
html { height: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
body{margin:0;background:var(--base-color);color:var(--body-text);font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
[type='text'], 
input:where(:not([type])), 
[type='email'], 
[type='url'], 
[type='password'], 
[type='number'], 
[type='date'], 
[type='datetime-local'], 
[type='month'], 
[type='search'], 
[type='tel'], 
[type='time'], 
[type='week'], 
[multiple], 
textarea, 
select {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border-color: #6b7280;
    border-width: 1px;
    border-radius: 0px;
    padding-top: 0.5rem;
    padding-right: 0.75rem;
    padding-bottom: 0.5rem;
    padding-left: 0.75rem;
    font-size: 1rem;
    line-height: 1.5rem;
    border-style: solid;
}
menu, ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

/* ===== CUSTOM COMPONENTS (из макета) ===== */
body {
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.font-headline { font-family: "Bebas Neue", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.clay-band{background:linear-gradient(135deg,var(--accent-color),#EB8A70)}
.clay-pattern{
  background-image:
    linear-gradient(rgba(255,255,255,0.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.08) 1px,transparent 1px);
  background-size:100px 100px,100px 100px;
}
.diagonal-hero{
  background:linear-gradient(to right top,
    var(--base-color) 0%,
    var(--base-color) 55%,
    var(--accent-color) 55%,
    var(--accent-color) 100%);
}
.card{
  background:#fff;border:1px solid var(--border-color);border-radius:1rem;
  box-shadow:0 24px 48px rgba(0,0,0,0.1);
}
.pill{
  display:inline-block;
  background:#fff;
  color:var(--headings-color);
  font-weight:700;
  padding:.5rem 1rem;
  border-radius:.375rem;
  box-shadow:0 1px 2px rgba(0,0,0,.06)
}
.pill-custom {
  border-radius: 0 0 .375rem 0;
}
.container-wide{max-width:80rem;margin:0 auto;padding:0 2rem}
@media (max-width:768px){
  .container-wide {
    padding:0 0.5rem;
  }
}
.section-padding{padding-top: 5rem;padding-bottom: 5rem;}
.subhero{width:100%;padding:4rem 0;}
.sticky-cta{position:sticky;bottom:0;z-index:50}

.btn-primary{
  background:var(--primary-cta);color:#fff;font-weight:700;
  padding:.75rem 2rem;border-radius:.5rem;text-transform:uppercase;letter-spacing:.05em;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
  border-width: 0;
  cursor: pointer;
}
.btn-primary:hover{background:#0a8a3a}
.btn-secondary{
  background:transparent;color:var(--accent-color);border:1px solid var(--accent-color);
  font-weight:700;padding:.75rem 2rem;border-radius:.5rem;text-transform:uppercase;letter-spacing:.05em;
  transition:background-color .2s ease,color .2s ease,transform .2s ease;
  cursor: pointer;
}
.btn-secondary:hover{background:var(--accent-color);color:#fff}



/* ===== GAP ===== */
.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-16{gap:4rem}

/* ===== PADDING / MARGIN ===== */
.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.p-10{padding:2.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}
.px-4{padding-left:1rem;padding-right:1rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}

/* stack spacing (space-y-*) */
.space-y-1 > :not([hidden]) ~ :not([hidden]){--space-y:.25rem;margin-top:var(--space-y)}
.space-y-3 > :not([hidden]) ~ :not([hidden]){--space-y:.75rem;margin-top:var(--space-y)}
.space-y-4 > :not([hidden]) ~ :not([hidden]){--space-y:1rem;margin-top:var(--space-y)}
.space-y-6 > :not([hidden]) ~ :not([hidden]){--space-y:1.5rem;margin-top:var(--space-y)}
.space-y-8 > :not([hidden]) ~ :not([hidden]){--space-y:2rem;margin-top:var(--space-y)}

/* ===== TYPOGRAPHY ===== */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-3xl{font-size:1.875rem;line-height:2.25rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-6xl{font-size:3.75rem;line-height:1}
.text-center{text-align:center}
.text-left{text-align:left}
.font-bold{font-weight:700}
.font-medium{font-weight:500}
.leading-tight{line-height:1.15}
.tracking-widest{letter-spacing:.1em}

/* text colors */
.text-white{color:#fff}
.text-white\/80{color:rgba(255,255,255,.8)}
.text-\[var\(--accent-color\)\]{color:var(--accent-color)}
.text-\[var\(--base-color\)\]{color:var(--base-color)}
.text-\[var\(--body-text\)\]{color:var(--body-text)}
.text-\[var\(--headings-color\)\]{color:var(--headings-color)}
.text-\[var\(--primary-cta\)\]{color:var(--primary-cta)}

/* opacity */
.opacity-0{opacity:0}.opacity-40{opacity:.4}.opacity-70{opacity:.7}
.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-90{opacity:.9}

/* ===== BACKGROUNDS ===== */
.bg-white{background:#fff}
.bg-white\/70{background:rgba(255,255,255,.7)}
.bg-black{background:#000}
.bg-black\/30{background:rgba(0,0,0,.3)}
.bg-\[var\(--base-color\)\]{background:var(--base-color)}
.bg-\[var\(--accent-color\)\]{background:var(--accent-color)}
.bg-\[var\(--border-color\)\]{background:var(--border-color)}
.bg-\[var\(--headings-color\)\]{background:var(--headings-color)}
.bg-cover{background-size:cover}
.bg-center{background-position:center}

/* ===== BORDERS / RADIUS ===== */
.border-4{border-width:4px;border-style:solid;border-color:var(--border-color)}
.border-b{
  border-bottom-width:1px;
  border-bottom-style:solid;
  border-bottom-color:var(--border-color);
}
.border-r-4{border-right:4px solid var(--accent-color);}
.border-\[var\(--border-color\)\]{border-color:var(--border-color)}
.border-\[var\(--accent-color\)\]{border-color:var(--accent-color)}
.border-t-\[var\(--accent-color\)\]{border-top-color:var(--accent-color)}
.border-white{border-color:#fff}

.rounded{border-radius:.25rem}
.rounded-md{border-radius:.375rem}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-full{border-radius:9999px}

/* ===== SHADOWS & EFFECTS ===== */
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.08)}
.shadow-2xl{box-shadow:0 25px 50px rgba(0,0,0,.25)}
.backdrop-blur{backdrop-filter:blur(8px)}
.transition-colors{transition:color .2s ease,background-color .2s ease,border-color .2s ease}
.transition-opacity{transition:opacity .2s ease}
.transition-transform{transition:transform .3s ease}
.duration-300{transition-duration:.3s}
.hover\:-translate-y-2:hover{transform:translateY(-.5rem)}
.hover\:bg-gray-200:hover{background:#e5e7eb}
.hover\:bg-white:hover{background:#fff}
.hover\:text-\[var\(--accent-color\)\]:hover{color:var(--accent-color)}
.hover\:underline:hover{text-decoration:underline}

/* ===== ASPECT RATIO ===== */
.aspect-video {
  aspect-ratio: 16/9;
  width: 100%;
  background: #000; /* чтобы не мигало белым */
  display: block;
}
.aspect-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* или contain, если не хочешь обрезку */
  display: block;
}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.aspect-\[4\/3\]{aspect-ratio:4/3}

/* ===== GROUP HOVER ===== */
.group{position:relative}
.group-hover\:opacity-100{opacity:1}
.group:hover .group-hover\:opacity-100{opacity:1}

/* ===== ANIMATIONS ===== */
@keyframes mini-pulse{50%{opacity:.5}}
.animate-pulse{animation:mini-pulse 2s cubic-bezier(0.4,0,0.6,1) infinite}

/* ===== RESPONSIVE ===== */
@media (min-width:640px){ /* sm */
  .sm\:flex-row{flex-direction:row}
}
@media (min-width:768px){ /* md */
  .md\:block{display:block}
  .md\:flex-row{flex-direction:row}
  .md\:grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .md\:col-span-1{grid-column:span 1 / span 1}
  .md\:col-span-2{grid-column:span 2 / span 2}
  .md\:col-span-3{grid-column:span 3 / span 3}
  .md\:col-span-11{grid-column:span 11 / span 11}
  .md\:py-0{padding-top:0;padding-bottom:0}
  .md\:text-left{text-align:left}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .md\:text-6xl{font-size:3.75rem;line-height:1}
  .md\:text-7xl{font-size:4.5rem;line-height:1}
}
@media (min-width:1024px){ /* lg */
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1 / span 1}
  .lg\:col-span-2{grid-column:span 2 / span 2}
}
@keyframes mini-spin { to { transform: rotate(360deg) } }
.animate-spin { animation: mini-spin 1s linear infinite; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .animate-spin { animation: none; }
}

/* === Sticky footer utilities === */
.min-h-screen{min-height:100vh}
@supports (height: 100svh){
  .min-h-screen{min-height:100svh} /* корректнее на мобильных */
}

.flex-1{flex:1 1 auto}        /* главный «растущий» блок */
.shrink-0{flex-shrink:0}      /* если захочешь пометить хедер/футер */

/* widths you use in markup */
.max-w-md{max-width:28rem}   /* 448px */
.max-w-2xl{max-width:42rem}  /* 672px */
.max-w-3xl{max-width:48rem}  /* 768px */
.max-w-4xl{max-width:56rem}  /* 896px */

/* list styles (ты обнулил ul, вернём их утилитами) */
.list-disc{list-style-type:disc}
.list-inside{list-style-position:inside}

/* выравнивание по высоте в флексе */
.items-stretch{align-items:stretch}

/* ширины */
.w-auto{width:auto}
@media (min-width:768px){ .md\:w-auto{width:auto} }
.object-cover{object-fit:cover}
.object-center{object-position:center}

@media (max-width:768px){
  .mobile-text-color {
    color:var(--body-text);
  }
}

/* === Buttons baseline (нормальные бокс-кнопки по всему сайту) === */
.btn-primary,
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;           /* не ломаем слова внутри */
  min-height:44px;              /* удобная тач-зона */
}

/* === Pagination: мобильная адаптация === */
@media (max-width: 640px){
  /* сам контейнер пагинации разрешаем переносить и центрируем */
  .guides-paginatiion > .flex{
    flex-wrap: wrap;            /* можно переносить на вторую строку */
    justify-content:center;     /* остаётся по центру даже в 2 ряда */
    gap: .75rem;                /* чуть компактнее, чем gap-4 */
  }

  /* кнопки в пагинации — компактнее по вертикали и размеру шрифта */
  .guides-paginatiion .btn-primary,
  .guides-paginatiion .btn-secondary{
    padding: .5rem 1rem;        /* было .75rem 2rem — ужмём для мобилки */
    font-size: .875rem;         /* = text-sm */
    line-height: 1.25rem;
  }

  /* чтобы длинные «Попередня/Наступна» не раздували ряд */
  .guides-paginatiion .btn-secondary{
    max-width: 48vw;            /* влезут в две колонки при переносе */
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* === Очень узкие экраны (опционально): ещё компактнее === */
@media (max-width: 360px){
  .guides-paginatiion .btn-primary,
  .guides-paginatiion .btn-secondary{
    padding: .5rem .75rem;
  }
}
.card{ display:flex; flex-direction:column; }                 /* карточка = колонка */
.card > .p-6{ display:flex; flex-direction:column; flex:1; }  /* контент тянется */
.card > .p-6 > .flex.justify-center.mt-6{
  margin-top:auto;        /* толкаем блок с кнопкой вниз */
  padding-top:1.5rem;     /* визуальный отступ вместо mt-6 */
}
/* === Buttons: безопасные многострочные, не вылезают на мобилке === */
.btn-primary,
.btn-secondary {
  display: inline-flex;             /* ровное центрирование текста */
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;              /* разрешаем перенос */
  overflow-wrap: anywhere;          /* перенос длинных слов/фраз */
  word-break: break-word;           /* старые браузеры */
  max-width: 100%;
  box-sizing: border-box;
  line-height: 1.2;                 /* компактнее многострочные */
}

@media (max-width: 640px) {
  .btn-primary,
  .btn-secondary {
    font-size: .95rem;              /* чуть меньше кегль */
    letter-spacing: .03em;          /* мягче трекинг */
    padding-left: 1rem;             /* комфортные поля */
    padding-right: 1rem;
  }
}

/* === /my: карточка покупки с превью слева на всю высоту === */
.purchase-item { display: flex; flex-direction: column; }
.purchase-item .thumb { height: 12rem; }
.purchase-item .thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.purchase-item .info {
  padding: 1.5rem; display: flex; flex-direction: column; gap: .75rem; flex: 1 1 auto;
}
.purchase-item .info-top { flex: 0 0 auto; }
.purchase-item .cta { margin-top: auto; }
.purchase-item .cta .btn-primary { width: 100%; }  /* на мобилке — во всю ширину */

@media (min-width: 768px) {
  .purchase-item { flex-direction: row; align-items: stretch; }
  .purchase-item .thumb { width: 16rem; height: auto; flex: 0 0 16rem; }
  .purchase-item .cta .btn-primary { width: auto; } /* на десктопе авто */
}
/* === Chip button for "Повний опис" === */
.btn-ghost{
  display:inline-flex; align-items:center; gap:.45rem;
  background:transparent; color:var(--accent-color);
  border:1px solid var(--accent-color);
  padding:.35rem .75rem; border-radius:9999px;
  font-weight:600; letter-spacing:.02em;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  cursor: pointer;
}
.btn-ghost:hover{ background:var(--accent-color); color:#fff; }
.btn-ghost:active{ transform:translateY(1px); }
.btn-ghost svg{ width:1em; height:1em; flex:0 0 auto; }

/* компактная версия (если нужно ещё меньше) */
.btn-ghost.btn-sm{ padding:.25rem .6rem; font-size:.875rem; line-height:1.25rem; }

/* === Modal (overlay + panel) === */
.modal-overlay{
  position:fixed; inset:0; z-index:50;
  background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  padding:1rem;            /* поля по краям экрана */
}
.modal-panel{
  /* базируется на .card, но дублируем критичное, чтобы можно было использовать и без .card */
  background:#fff; border:1px solid var(--border-color); border-radius:1rem;
  box-shadow:0 24px 48px rgba(0,0,0,.1);

  width:100%; max-width:48rem;  /* ≈ max-w-3xl */
  position:relative;

  display:flex; flex-direction:column;
  max-height:85vh;              /* ограничиваем высоту панели */
}
@supports (height: 100svh){
  .modal-panel{ max-height:85svh; }
}

.modal-header{
  display:flex; align-items:center; justify-content:flex-end;
  gap:.75rem; margin-bottom:.5rem;
}

.modal-body{
  overflow:auto; -webkit-overflow-scrolling:touch;
  /* чтобы flex-скролл работал корректно в Safari */
  min-height:0;
}

/* Кнопка «Закрити»: на десктопе абсолютная, на мобиле — обычная */
.modal-close{
  position:absolute; top:1rem; right:1rem;
}
/* ≤640px: кнопка становится «обычной» и участвует в потоке */
@media (max-width:640px){
  .modal-close{ position:static; margin-left:auto; }
  .modal-panel{ max-height:calc(100svh - 2rem); } /* учитываем отступы overlay */
}

/* Компактная версия любой кнопки (можно навесить поверх .btn-secondary/.btn-primary) */
.btn-compact{ padding:.4rem .75rem; font-size:.875rem; line-height:1.25rem; cursor: pointer;}

.playlist { display: grid; gap: .75rem; }
.playlist-item {
  display: grid; grid-template-columns: 96px 1fr; gap: .75rem;
  align-items: center; background: #fff; border:1px solid var(--border-color);
  border-radius: .75rem; padding:.5rem; cursor:pointer; transition: transform .2s ease;
}
.playlist-item:hover { transform: translateY(-2px); }
.playlist-item.active { border-color: var(--accent-color); background: #FFF4EF; }
.playlist-thumb { width:96px; height:64px; overflow:hidden; border-radius:.5rem; }
.playlist-thumb img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
.badge { display:inline-block; font-size:.75rem; opacity:.8; }
/* Mobile stack */
/* === WATCH layout: фиксируем 2 колонки и ширину === */

/* контейнер пошире (если вдруг где-то зажат) */
.container-wide{
  max-width: 1200px;   /* можешь поднять до 1280–1360 при желании */
}

/* две колонки уже с 768px; эта запись перебьёт всё, что выше */
@media (min-width: 768px){
  .watch-grid{
    display: grid !important;                 /* не даём упасть в flex/column */
    grid-template-columns: minmax(720px, 1fr) /* левая — не уже 720px */
                              clamp(320px, 26vw, 380px); /* сайдбар справа */
    gap: 2rem;
    align-items: start;
  }
  .watch-grid > * { min-width: 0; }           /* дети грида не распирают колонки */
  .sidebar{ position: sticky; top: 1rem; }
}

/* для очень широких экранов можно ещё растянуть контейнер */
@media (min-width: 1400px){
  .container-wide{ max-width: 1280px; }
}

/* стабильный плеер (как делали выше) */
.aspect-video{
  position: relative; width: 100%; height: 0;
  padding-top: 56.25%; background:#000; overflow:hidden;
  contain: layout size;
}
.aspect-video > video{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; object-fit:contain; max-width:none;
}

/* не мигать шириной из-за полосы прокрутки */
html{ scrollbar-gutter: stable; }

/* анти-дергание при переключении (если подключал JS-хук) */
.aspect-video.is-switching > video{ visibility: hidden; }

#page, .site, .page-wrap, .wrapper { 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main, .site-main, #content { 
  flex: 1 0 auto;
}
/* На всякий случай: чтобы шапка/футер не сплющивались */
header, footer { flex-shrink: 0; }
/* === Alerts === */
.alert{
  display:block;
  background:#fff;
  border:1px solid var(--border-color);
  border-left-width:6px;
  border-radius: .75rem;
  padding: .875rem 1rem;
  font-weight:600;
  margin: 0 0 1rem 0;
}
.alert-info    { border-left-color: var(--accent-color); }
.alert-success { border-left-color: var(--primary-cta); }
.alert-error   { border-left-color: #DC2626; } /* красный акцент */


/* ===== LAYOUT & DISPLAY ===== */
.block{display:block}
.inline-block{display:inline-block}
.hidden{display:none}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.grid{display:grid}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.relative{position:relative}
.absolute{position:absolute}
.sticky{position:sticky}
.top-6{top:1.5rem}
.inset-0{top:0;right:0;bottom:0;left:0}
.h-full{height:100%}
.h-16{height:4rem}.h-20{height:5rem}.h-24{height:6rem}
.w-full{width:100%}
.w-16{width:4rem}.w-20{width:5rem}.w-24{width:6rem}
.min-h-\[90vh\]{min-height:90vh}
.mx-auto{margin-left:auto;margin-right:auto}
.my-4{margin-top:1rem;margin-bottom:1rem}
.mr-3{margin-right:.75rem}
.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}
.cursor-pointer{cursor:pointer}

/* === Guides: Free Preview block === */
.preview-block .card{ max-width: 720px; margin: .25rem 0 0; }
@media (max-width: 640px){ .preview-block .card{ max-width: 100%; } }

.preview-block .aspect-video{
  border-radius: .75rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  border: 1px solid var(--border-color);
  background:#000;
}

/* панель вкладок */
#preview-tabs{
  display:flex; flex-wrap:wrap; gap:.5rem;
}
#preview-tabs .js-preview-tab{
  /* поверх .btn-secondary делаем «пилюлю» */
  border-color: var(--border-color);
  background:#fff; color: var(--headings-color);
  font-weight:700; border-radius:.75rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
#preview-tabs .js-preview-tab:hover{
  border-color: var(--accent-color); color: var(--accent-color); background:#fff;
}
#preview-tabs .js-preview-tab.active{
  background: var(--accent-color); color:#fff;
  border-color: var(--accent-color);
  box-shadow:0 8px 20px rgba(231,111,81,.35);
}
/* Guides: центрированный превью-блок */
.preview-block .aspect-video{
  border-radius:.75rem;
  box-shadow:0 16px 36px rgba(0,0,0,.12);
  border:1px solid var(--border-color);
  background:#000;
}
/* ===== Preview: соотношения сторон ===== */
.preview-block .aspect-video{
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;          /* по умолчанию — горизонтальное */
  border-radius: .75rem;
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
  border: 1px solid var(--border-color);
  background:#000;
}
.preview-block .aspect-video.aspect-portrait{
  aspect-ratio: 9 / 16;          /* для вертикальных */
}
.preview-block .aspect-video video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;           /* вписываем картинку без обрезки */
  background:#000;
}
/* Loader поверх превью */
.preview-block .aspect-video{ position:relative; }
.preview-block .aspect-video.is-loading::after{
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.22);
}
.preview-block .aspect-video.is-loading::before{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border:3px solid rgba(255,255,255,.7); border-top-color:transparent;
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ===== Guides: buy-bar ===== */
.buybar{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  flex-wrap:wrap;
}
.buybar-price{
  font-weight:800; font-size:1.125rem; line-height:1;
  padding:.6rem .9rem; border:1px solid var(--border-color); background:#fff;
  border-radius:.75rem; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.buybar-btn{
  padding:.75rem 1.25rem; border-radius:.75rem;
}
@media (max-width:640px){
  .buybar{ gap:.5rem; }
  .buybar-price{ font-size:1rem; }
}
/* ===== Guides: hero ===== */
.guide-hero .h1{ line-height: 1.15; }
.guide-hero img.shadow{ box-shadow: 0 12px 40px rgba(0,0,0,.12); }

/* ===== Preview block ===== */
.preview-block .aspect-video{
  position:relative; overflow:hidden;
  aspect-ratio:16 / 9;
  border-radius:.9rem;
  border:1px solid var(--border-color);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
  background:#000;
}
.preview-block .aspect-video.aspect-portrait{ aspect-ratio:9 / 16; }
.preview-block .aspect-video video{
  width:100%; height:100%; display:block; object-fit:contain; background:#000;
}
/* loader */
.preview-block .aspect-video.is-loading::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.22);
}
.preview-block .aspect-video.is-loading::before{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border:3px solid rgba(255,255,255,.7); border-top-color:transparent;
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Buy bar ===== */
.buybar{
  display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap;
}
.buybar-price{
  font-weight:800; font-size:1.125rem; line-height:1;
  padding:.6rem .9rem; border:1px solid var(--border-color); background:#fff;
  border-radius:.75rem; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.buybar-btn{ padding:.75rem 1.25rem; border-radius:.75rem; }
@media (max-width:640px){
  .buybar{ gap:.5rem; } .buybar-price{ font-size:1rem; }
}

/* ===== Chapters list ===== */
.chapters-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.chapter-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.75rem 1rem; border:1px solid var(--border-color); border-radius:.75rem; background:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.chapter-row.is-free{ border-color:#e7f4ed; }
.chapter-row.is-locked{ opacity:.9; }
.chapter-meta{ display:flex; align-items:center; gap:.5rem; }
.chapter-index{
  font-weight:800; width:1.65rem; height:1.65rem; border-radius:.5rem;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--soft-bg, #f3f4f6); color:var(--headings-color);
  border:1px solid var(--border-color);
}
.chapter-title{ font-weight:600; }
.chapter-dot{ opacity:.5; }
.chapter-duration{ opacity:.8; }
.chapter-cta .btn-compact{ padding:.45rem .7rem; border-radius:.6rem; }
.chapter-cta .lock{ font-size:.9rem; opacity:.75; }
/* Watch: спиннер при смене источника */
.aspect-video.is-switching::after{
  content:""; position:absolute; inset:0; background:rgba(0,0,0,.22);
}
.aspect-video.is-switching::before{
  content:""; position:absolute; left:50%; top:50%;
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border:3px solid rgba(255,255,255,.7); border-top-color:transparent;
  border-radius:50%; animation:spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Watch: портретная ориентация (если нужно) */
.aspect-video{ aspect-ratio:16/9; border-radius:.9rem; overflow:hidden; }
.aspect-video.aspect-portrait{ aspect-ratio:9/16; }
#player{ width:100%; height:100%; object-fit:contain; display:block; background:#000; }

/* Чтобы админ-бар WP не перекрывал якорь при переходе */
#cta { scroll-margin-top: 64px; scroll-margin-block-start: 64px; }

/* Фиксированная версия */
.sticky-cta--fixed{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1100;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
}

/* Отступ под фикс-панель, чтобы контент снизу не прятался */
body.has-fixed-cta { padding-bottom: var(--cta-h, 96px); }
/* TF: hero media always has black backdrop */
/* Hero: чёрный фон + ручной zoom для iframe превью */
.tf-hero-media{ background:#000; position:relative; }
.tf-hero-media .tf-player{ position:absolute; inset:0; overflow:hidden; background:#000; }
.tf-hero-media .tf-player iframe{
  position:absolute; inset:0; width:100%; height:100%;
  transform: scale(var(--tf-zoom, 1.30)); /* базовый zoom ~1.3 */
  transform-origin: center;
  background:#000;
}

/* Можно докрутить zoom по брейкпоинтам */
@media (min-width: 768px){ .tf-hero-media--zoom .tf-player iframe{ --tf-zoom:1.35; } }
@media (min-width:1024px){ .tf-hero-media--zoom .tf-player iframe{ --tf-zoom:1.45; } }
@media (min-width:1280px){ .tf-hero-media--zoom .tf-player iframe{ --tf-zoom:1.55; } }

/* Картинка-постер до клика — “cover”, как и раньше */
.tf-hero-media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* === Fixed header utilities === */
.fixed{position:fixed}
.top-0{top:0}
.left-0{left:0}
.right-0{right:0}
.z-50{z-index:50}

.tf-embed-html iframe,
.tf-embed-html video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}
.tf-embed-html{position:relative}

/* Fallback высоты, если JS не успел отработать */
:root{ --nav-h:72px; }         /* мобильная оценка */
@media (min-width:768px){ :root{ --nav-h:80px; } }
/* spacer под fixed-header — минимальный фолбэк */
#nav-spacer{ height:60px; }


/* Админбар WP (логин) */
.admin-bar #nav-spacer{ height: calc(var(--nav-h) + 32px); }
@media (max-width:782px){
  .admin-bar #nav-spacer{ height: calc(var(--nav-h) + 46px); }
}

/* a11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Base layout for the menu list */
.nav-list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.nav-list a{display:block;padding:8px 0}

/* MOBILE (<=767px): menu hidden until burger toggles */
@media (max-width:767.98px){
  .nav-links{
    display:none;
    position:absolute;
    top: var(--nav-h, 60px);
    left:0; right:0;
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.08);
    padding:12px 16px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
  }
  .nav-links.is-open{ display:block !important; }
}

/* Burger hover */
.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px;border-radius:8px;
  width:40px;height:40px;min-width:40px;
}
.nav-toggle svg{width:24px;height:24px;display:block}
.nav-toggle:hover{ background: rgba(0,0,0,.05); }

/* DESKTOP (>=768px): menu always visible, burger hidden */
@media (min-width:768px){
  .nav-toggle{ display:none; }
  .nav-links{
    display:flex !important;
    position:static;
    background:transparent;
    border:0;
    padding:0;
    gap:24px;
    align-items:center;
  }
  .nav-list{ flex-direction:row; gap:16px; }
  .nav-list a{ padding:0; }
}
/* --- FIX: make responsive grid cols win over .grid-cols-1 --- */
@media (min-width:768px){
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .md\:flex-row{ flex-direction: row !important; }
}
@media (min-width:1024px){
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
/* === Pagination (WP .page-numbers) — кнопочный вид === */
.guides-paginatiion ul.page-numbers{
  display:flex; gap:.5rem; flex-wrap:wrap;
  list-style:none; margin:0; padding:0;
}

.guides-paginatiion .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.6rem 1rem; 
  color:var(--accent-color);
  border-radius:.5rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; line-height:1.2;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Текущая страница — как «primary» */
.guides-paginatiion .page-numbers.current,
.guides-paginatiion .page-numbers[aria-current="page"]{
  background:var(--primary-cta); color:#fff; border-color:var(--primary-cta);
}

/* Prev/Next — нейтральнее */
.guides-paginatiion .page-numbers.btn-secondary,
.guides-paginatiion .page-numbers.btn-secondary{
  border-color:var(--border-color); 
  color:var(--headings-color);
}
.guides-paginatiion .page-numbers.btn-secondary:hover,
.guides-paginatiion .page-numbers.btn-secondary:hover{
  border-color:var(--accent-color); color:#fff; background:var(--accent-color);
}

/* Мобилка — компактнее */
@media (max-width:640px){
  .guides-paginatiion .page-numbers{
    padding:.5rem .9rem; font-size:.875rem; line-height:1.25rem;
    max-width:48vw; overflow:hidden; text-overflow:ellipsis;
  }
}

/* flex reverse на мобилке */
.flex-col-reverse{ flex-direction: column-reverse }

/* включаем grid только с md */
@media (min-width:768px){
  .md\:grid{ display: grid }
}

/* Old price (зачёркнутая, приглушённая) */
.price-old{
  display:inline-block;
  font-weight:700;
  opacity:.6;
  text-decoration: line-through;
  text-decoration-thickness: .12em;
  text-decoration-color: currentColor; /* наследует цвет (в т.ч. в белых зонах CTA) */
}

@media (max-width:640px){
  .price-old{ font-size:.95rem; }
}
/* переключатель языков */
.lang-switch {
  display: inline-flex;
  align-items: center;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2rem;
  padding: 0 .6rem;
  font-weight: 700;  
  font-size: .875rem;
  line-height: 1;
  opacity: .85;
}