/* ============================================================
   keln.space — стили подстраниц (релиз, music, shop, blog, post).
   Подключается после keln.css + home.css.
   ============================================================ */

/* ---------- Шапка подстраницы ---------- */
.page-hero { padding-top: clamp(64px, 11vh, 140px); padding-bottom: clamp(20px, 4vh, 50px); text-align: center; }
.page-hero h1 { font-size: clamp(2.4rem, 8vw, 6rem); text-transform: lowercase; }
.page-hero p { color: var(--muted); margin: 14px auto 0; max-width: 50ch; }
.page-hero__media { margin: clamp(20px,4vh,46px) auto 0; width: min(820px, 100%); }
.page-hero__media video { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--glass-brd); }

.back-row { display: flex; gap: 10px; padding-top: clamp(20px, 4vh, 40px); }

/* ---------- Страница релиза (шаринг) ---------- */
.release-detail { min-height: 100vh; padding: clamp(70px, 11vh, 130px) var(--pad-x) calc(var(--nav-h) + 80px); position: relative; }
.release-detail__bg { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; filter: blur(60px) brightness(.4); transform: scale(1.2); opacity: .6; }
.release-card-detail {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px);
  align-items: center; max-width: 1080px; margin-inline: auto;
  background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg);
  backdrop-filter: blur(22px); padding: clamp(20px, 3vw, 44px);
}
.release-card-detail__cover { position: relative; border-radius: var(--r-md); overflow: hidden; aspect-ratio: 1; background: var(--bg-elev); }
.release-card-detail__cover.is-playing { aspect-ratio: 16 / 9; }
.release-card-detail__cover.is-playing iframe { width: 100%; height: 100%; border: 0; display: block; }
.release-card-detail__cover img { width: 100%; height: 100%; object-fit: cover; }
.release-card-detail__info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.release-card-detail__kicker { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; margin: 0; }
.release-card-detail__title { font-size: clamp(2.2rem, 6vw, 4.6rem); text-transform: lowercase; }
.release-card-detail__artist { color: var(--text); font-weight: 700; margin: 0; }
.release-card-detail__date { color: var(--muted); margin: 0; }
.release-card-detail__text { color: var(--text); margin: 0; max-width: 48ch; }
@media (max-width: 760px) { .release-card-detail { grid-template-columns: 1fr; } }

/* иконки площадок — белые кружки, без плашек/инверсии */
.platforms-row { display: flex; flex-wrap: wrap; gap: clamp(10px,1.4vw,16px); margin-top: 6px; }
.platform-ic { display: inline-flex; width: clamp(48px,5vw,58px); height: clamp(48px,5vw,58px); transition: transform .3s var(--ease); }
.platform-ic img { width: 100%; height: 100%; object-fit: contain; }
.platform-ic:hover { transform: translateY(-4px) scale(1.06); }
.platform-ic--text {
  width: auto; align-items: center; padding: 0 20px; border-radius: var(--r-pill);
  border: 1px solid var(--line); font-weight: 700; font-size: .9rem;
}
.platform-ic--text:hover { background: #fff; color: #000; }

/* ---------- Магазин: серии (фото слева, текст справа) ---------- */
.shop-series { display: flex; flex-direction: column; gap: clamp(46px, 8vh, 100px); }
.series__head { margin-bottom: clamp(16px, 3vh, 28px); }
.series__head h2 { font-size: clamp(1.8rem, 4vw, 3rem); text-transform: lowercase; }
.series__desc { color: var(--muted); margin: 8px 0 0; max-width: 54ch; }
.series__swiper { overflow: clip; overflow-clip-margin: 8px; padding-bottom: 36px; }
.series__swiper .swiper-pagination { bottom: 0; }
.series__swiper .swiper-pagination-bullet { background: #fff; opacity: .3; }
.series__swiper .swiper-pagination-bullet-active { opacity: 1; background: var(--pink); }
.product-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center;
}
.product-row__media { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg-elev); }
.product-row__media img { width: 100%; height: 100%; object-fit: cover; }
.product-row__info { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.product-row__name { font-size: clamp(1.8rem, 4vw, 3.2rem); text-transform: lowercase; font-weight: 900; }
.product-row__desc { color: var(--muted); max-width: 46ch; margin: 0; }
@media (max-width: 760px) { .product-row { grid-template-columns: 1fr; } }

/* ---------- Блог: лента Patreon/Boosty ---------- */
.blog-intro { max-width: 720px; margin: 18px auto 0; text-align: center; }
.blog-intro p { color: var(--muted); }
.blog-intro p b { color: var(--text); }
.blog-intro__topics { font-size: .92rem; color: var(--faint); margin-top: 10px; }
.blog-feed { max-width: 760px; margin: clamp(30px,5vh,60px) auto 0; display: flex; flex-direction: column; gap: clamp(20px, 4vh, 40px); }
.feed-post { background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-lg); overflow: hidden; backdrop-filter: blur(12px); }
.feed-post__cover { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-elev); }
.feed-post__cover img { width: 100%; height: 100%; object-fit: cover; }
.feed-post__body { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 12px; }
.feed-post__date { color: var(--muted); font-size: .82rem; }
.feed-post__title { font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-transform: lowercase; }
.feed-post__title a:hover { color: var(--pink); }
.feed-post__text { color: rgba(246,245,243,.82); }
.feed-post__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.feed-post__tag { font-size: .72rem; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px 10px; }
.feed-post__embed { position: relative; aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden; }
.feed-post__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Фасад YouTube: превью 16:9 + кнопка, плеер встаёт сюда же после клика */
.yt-facade { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 16/9; background: var(--bg-elev); border-radius: inherit; overflow: hidden; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), opacity .4s; }
.yt-facade iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-facade__play {
  position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.42)); border: 0; padding: 0;
}
.yt-facade__play svg { width: clamp(52px, 8vw, 68px); height: auto; filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)); transition: transform .3s var(--ease); }
.yt-facade__bg { fill: rgba(18,18,20,.82); transition: fill .3s; }
.yt-facade:hover img { transform: scale(1.035); }
.yt-facade:hover .yt-facade__bg { fill: #ff0033; }
.yt-facade:hover .yt-facade__play svg { transform: scale(1.06); }
.yt-facade__play:focus-visible { outline: 2px solid var(--pink); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) {
  .yt-facade img, .yt-facade__play svg, .yt-facade__bg { transition: none; }
  .yt-facade:hover img { transform: none; }
}

.tier-note { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--r-pill); padding: 5px 12px; }

/* Тарифы подписки (Boosty-стиль) */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,2vw,22px); max-width: 980px; margin: clamp(26px,4vh,46px) auto 0; }
.tier { position: relative; display: flex; flex-direction: column; border: 1px solid var(--glass-brd); border-radius: var(--r-lg); background: var(--glass); backdrop-filter: blur(12px); padding: clamp(22px,2.4vw,32px); }
.tier--featured { border-color: rgba(255,92,160,.55); background: radial-gradient(120% 120% at 50% 0%, rgba(255,92,160,.16), transparent 55%), var(--glass); }
.tier__badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--pink); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r-pill); }
.tier__name { font-size: clamp(1.3rem,2vw,1.7rem); text-transform: lowercase; font-weight: 900; }
.tier__price { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; margin: 6px 0 2px; }
.tier__price span { font-size: .9rem; font-weight: 500; color: var(--muted); }
.tier__desc { color: rgba(246,245,243,.8); font-size: .96rem; margin: 14px 0 0; }
.tier__btn { margin-top: auto; padding-top: 20px; }
.tier__btn a { display: inline-flex; width: 100%; justify-content: center; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 700; border: 1px solid var(--line); transition: background .25s, color .25s; }
.tier__btn a:hover { background: #fff; color: #000; }
.tier--featured .tier__btn a { background: var(--pink); color: #fff; border-color: transparent; }
.tier--featured .tier__btn a:hover { background: #ff77b3; color: #fff; }
@media (max-width: 820px){ .tiers { grid-template-columns: 1fr; max-width: 460px; } }

/* sr-only для SEO-заголовков */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Блог: баннер, счётчики, фильтр-бар ---------- */
.blog-banner { display: block; width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: clamp(26px,3.5vh,46px); }
.blog-banner img { width: 100%; height: auto; display: block; }
.blog-stats { display: flex; gap: 22px; justify-content: center; margin: 16px 0; }
.blog-stat b { display: block; font-size: 1.5rem; font-weight: 900; line-height: 1; }
.blog-stat span { font-size: .74rem; color: var(--muted); letter-spacing: .04em; }
.blog-about-title { display: block; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.blog-feed__empty { color: var(--muted); padding: 20px 0; }

/* компактный фильтр-бар (одна строка, иконки) */
.bfilter { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 22px 0 24px; position: relative; }
.bfilter .bchip, .bfilter .bdrop { flex: none; }
/* на узких экранах прячем подписи в чипах, оставляем иконки */
@media (max-width: 1180px) {
  .bfilter [data-f-sortlabel] { display: none; }
  .bfilter [data-f-tier] { width: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
}
.bchip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; white-space: nowrap; transition: background .2s, border-color .2s; }
.bchip:hover { background: var(--glass-2); }
.bchip svg { width: 16px; height: 16px; flex: none; }
.bchip.is-active { background: var(--pink); color: #fff; border-color: transparent; }
.bchip--icon { padding: 0; width: 40px; justify-content: center; }
.bchip .chev { width: 13px; height: 13px; opacity: .7; }
.bdrop { position: relative; }
.bmenu { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; min-width: 200px; padding: 8px; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(0,0,0,.45); display: none; }
.bmenu.is-open { display: block; }
.bmenu button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; color: var(--text); font: inherit; border-radius: var(--r-sm); cursor: pointer; text-align: left; }
.bmenu button:hover, .bmenu button.is-sel { background: var(--glass-2); }
.bmenu--tags { display: none; min-width: 240px; max-width: 320px; flex-wrap: wrap; gap: 8px; padding: 12px; }
.bmenu--tags.is-open { display: flex; }
.bmenu input[type="date"] { background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 12px; color: var(--text); font: inherit; color-scheme: dark; }
.blog-tag { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; font-size: .85rem; }
.blog-tag.is-on { background: var(--pink); color: #fff; border-color: transparent; }
/* поиск — растянутая строка, бар на всю ширину столбца */
.bsearch { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 120px; }
.bsearch svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.bsearch input { width: 100%; height: 40px; padding: 0 14px 0 40px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass); color: var(--text); font: inherit; }
.bsearch input:focus { outline: none; border-color: var(--text); }
.bchip--tiers { display: none; text-decoration: none; }
@media (max-width: 1040px) {
  .bchip--tiers { display: inline-flex; background: var(--pink); color: #fff; border-color: transparent; }
}
@media (max-width: 560px) {
  .bfilter { flex-wrap: wrap; }
  .bsearch { flex: 1 1 100%; order: -1; }
  .blog-side--left { padding: 18px; }
  .blog-side--left .blog-ava { width: 96px; height: 96px; }
  .blog-stats { gap: 18px; }
  .blog-banner { margin-bottom: 18px; }
}
/* компактные широкоформатные превью */
.blog-theme .feed-post__cover { aspect-ratio: 16 / 9; max-height: 300px; }
.blog-theme .feed-post__embed { aspect-ratio: 16 / 9; }
.blog-theme .feed-post__body { padding: clamp(16px,2vw,22px); gap: 8px; }
.blog-theme .feed-post__title { font-size: clamp(1.2rem,2.4vw,1.7rem); }
.blog-theme .blog-feed { gap: clamp(16px,2.4vh,28px); }

/* ---------- Блог: чуть более светлая тема + Boosty-раскладка ---------- */
body.keln.blog-theme { --bg: #14141a; --bg-elev: #1c1c24; --glass: rgba(255,255,255,.05); --glass-2: rgba(255,255,255,.08); --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.08); }
body.keln.blog-theme::before { background: radial-gradient(60vw 50vw at 80% -10%, rgba(255,92,160,.10), transparent 60%), radial-gradient(50vw 50vw at 0% 10%, rgba(120,150,255,.08), transparent 60%); }
.blog-hero { min-height: 46vh; display: flex; align-items: center; justify-content: center; text-align: center; }
.blog-hero h1 { font-size: clamp(2.8rem, 10vw, 6rem); text-transform: lowercase; font-weight: 900; }

.blog3 { display: grid; grid-template-columns: 268px minmax(0,1fr) 330px; gap: clamp(18px,2.4vw,34px); align-items: start; }
.blog-side--left { position: sticky; top: 24px; background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px,2vw,26px); text-align: center; }
.blog-side--left .blog-ava { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; margin: 0 auto 14px; border: 1px solid var(--line); }
.blog-side--left .nm { font-size: 1.6rem; font-weight: 900; text-transform: lowercase; }
.blog-side--left .bio { color: var(--muted); font-size: .92rem; margin: 6px 0 16px; }
.blog-side--left .social-row { justify-content: center; }
.blog-side--left .social-ic { width: 42px; height: 42px; }
.blog-side--right { position: sticky; top: 24px; display: grid; gap: 14px; }
.blog-side__title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.tier__cover { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; margin-bottom: 14px; }
@media (max-width: 1040px) { .blog3 { grid-template-columns: 1fr; } .blog-side--left, .blog-side--right { position: static; } .blog-side--right { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 720px) { .blog-side--right { grid-template-columns: 1fr; } }

/* ---------- Блог: профиль + лента + сайдбар тарифов (Boosty-стиль, старое) ---------- */
.blog-profile { display: flex; align-items: center; gap: clamp(16px,2.5vw,28px); flex-wrap: wrap; }
.blog-ava { width: clamp(84px,10vw,110px); height: clamp(84px,10vw,110px); border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex: none; }
.blog-profile__name { font-size: clamp(2rem,5vw,3.4rem); text-transform: lowercase; font-weight: 900; line-height: 1; }
.blog-profile__bio { color: var(--muted); max-width: 52ch; margin: 8px 0 12px; }
.blog-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: clamp(20px,3vw,44px); align-items: start; }
.blog-aside { position: sticky; top: 24px; display: grid; gap: 14px; }
.blog-aside__title { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.blog-about { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: clamp(20px,2.4vw,30px); margin-bottom: clamp(20px,3vh,32px); }
/* мелкая капсовая метка: на Sofia Sans вес 900 в таком кегле забивается в кляксу,
   и рядом стоят .blog-side__title / .blog-aside__title той же роли, но легче */
.blog-about h2 { font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.blog-about p { color: rgba(246,245,243,.82); margin: 0 0 8px; }
.blog-about b { color: var(--text); }
.tiers--aside { display: grid; grid-template-columns: 1fr; max-width: none; margin: 0; gap: 14px; }
.tiers--aside .tier { padding: 20px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } .blog-aside { position: static; } }

/* ---------- Пост целиком + комментарии ---------- */
.post-article { max-width: 760px; margin-inline: auto; }
.post-article__cover { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 24px; }
.post-body { color: rgba(246,245,243,.9); line-height: 1.7; }
.post-body p { margin: 0 0 1em; }
.post-body img { border-radius: var(--r-md); margin: 1em 0; }

.comments { max-width: 760px; margin: clamp(40px,6vh,70px) auto 0; }
.comments h3 { font-size: 1.4rem; text-transform: lowercase; margin-bottom: 18px; }
.comment { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 12px; }
.comment__head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.comment__author { font-weight: 700; }
.comment__date { color: var(--faint); font-size: .76rem; }
.comment__text { color: rgba(246,245,243,.85); white-space: pre-wrap; }
.comment-form { display: grid; gap: 12px; margin-top: 18px; }
.comment-form input, .comment-form textarea {
  width: 100%; background: var(--glass); border: 1px solid var(--glass-brd); border-radius: var(--r-sm);
  padding: 13px 16px; color: var(--text); font: inherit; resize: vertical;
}
.comment-form textarea { min-height: 110px; }
.comment-form__msg { font-size: .85rem; color: var(--muted); }
.comment-form__msg.is-error { color: #ff6b6b; }
.comment-form__msg.is-ok { color: #5ad19a; }

/* generic-секция страницы */
.page-section { padding-bottom: clamp(40px, 7vh, 90px); }

/* ---------- Страница kelnlab ---------- */
.lab-hero { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; }
.lab-hero__art { width: clamp(220px, 40vw, 460px); }
.lab-hero__art img { width: 100%; height: auto; }
.lab-intro { text-align: center; }
.lab-intro h1 { font-size: clamp(2.6rem, 9vw, 6rem); text-transform: lowercase; font-weight: 900; }
.lab-intro p { color: var(--muted); max-width: 52ch; margin: 14px auto 0; font-size: clamp(1.05rem,1.8vw,1.3rem); }
.section-head--center { justify-content: center; text-align: center; }
.section-head--center > div { margin-inline: auto; }
.section-head--center p { margin-inline: auto; }

.lab-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.lab-tool { padding: clamp(22px,2.6vw,34px); border: 1px solid var(--line); border-radius: var(--r-lg); background: #0a0a0d; transition: transform .4s var(--ease), border-color .4s; }
.lab-tool:hover { transform: translateY(-5px); border-color: rgba(154,108,255,.5); }
.lab-tool__ic { width: 40px; height: 40px; color: #9a6cff; margin-bottom: 14px; }
.lab-tool h3 { font-size: clamp(1.2rem,1.8vw,1.5rem); text-transform: lowercase; font-weight: 900; }
.lab-tool p { color: var(--muted); margin: 8px 0 0; font-size: .98rem; }
.lab-tool .tag { display: inline-block; margin-top: 12px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #9a6cff; }
@media (max-width: 900px) { .lab-tools { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lab-tools { grid-template-columns: 1fr; } }

.privatka { position: relative; text-align: center; max-width: 920px; margin-inline: auto; }
.privatka__badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-marker); color: #c2a6ff; font-size: 1.2rem; margin-bottom: 10px; }
.privatka h2 { font-size: clamp(2rem,4vw,3.4rem); text-transform: lowercase; font-weight: 900; }
.privatka__lead { color: rgba(246,245,243,.84); max-width: 60ch; margin: 14px auto clamp(24px,3.5vh,40px); }
.privatka__list { list-style: none; padding: 0; margin: 0 auto clamp(26px,3.5vh,40px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; text-align: left; }
.privatka__list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; color: rgba(246,245,243,.86); }
.privatka__list .n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #9a6cff; color: #fff; font-weight: 800; font-size: .85rem; }
@media (max-width: 720px) { .privatka__list { grid-template-columns: 1fr; } }
.btn--lab { background: #9a6cff; color: #fff; border-color: transparent; }
.btn--lab:hover { background: #ad84ff; }

/* ---------- GLightbox (плеер галереи) ---------- */
.glightbox-clean .gslide-media { position: relative; box-shadow: none; }
.glightbox-clean .gslide-description {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: linear-gradient(transparent, rgba(0,0,0,.8)); border-radius: 0; padding: 28px 22px 18px; text-align: center;
}
.glightbox-clean .gslide-title { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: #fff; margin: 0; }
.glightbox-clean .gslide-desc { display: none; }
.glightbox-clean .gprev, .glightbox-clean .gnext, .glightbox-clean .gclose {
  background: transparent; box-shadow: none; border: 0; opacity: .85;
}
.glightbox-clean .gprev svg, .glightbox-clean .gnext svg, .glightbox-clean .gclose svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)); }
.glightbox-clean .gprev:hover, .glightbox-clean .gnext:hover, .glightbox-clean .gclose:hover { opacity: 1; }
.glightbox-clean .gprev { left: 12px; }
.glightbox-clean .gnext { right: 12px; }
@media (min-width: 1000px){ .glightbox-clean .gprev { left: 3vw; } .glightbox-clean .gnext { right: 3vw; } }

/* ---------- Shop: hero на весь первый экран ---------- */
.shop-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.shop-hero__media { width: min(760px, 90%); margin: 0 auto; }
.shop-hero__media video { width: 100%; height: auto; mix-blend-mode: screen; }
.shop-hero p { color: var(--muted); margin: 18px auto 0; max-width: 46ch; }
.shop-hero__scroll { position: absolute; bottom: clamp(20px,4vh,40px); left: 50%; transform: translateX(-50%); color: var(--faint); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Beats: фон во весь первый экран ---------- */
.beats-hero { position: relative; min-height: 100vh; overflow: hidden; }
.beats-hero__bg { position: absolute; inset: 0; z-index: -1; }
.beats-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .beats-hero { min-height: 64vh; } .beats-hero__bg img { object-fit: contain; object-position: center; } }
.beats-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; z-index: -1; background: linear-gradient(180deg, transparent, var(--bg)); }
.beats-head { text-align: center; padding-top: clamp(40px, 8vh, 90px); }
.beats-head h1 { font-size: clamp(2.6rem, 9vw, 6.5rem); text-transform: lowercase; }
.beats-head p { color: var(--muted); max-width: 46ch; margin: 12px auto 0; }

.beats-list { max-width: 920px; margin: clamp(20px,4vh,40px) auto 0; display: flex; flex-direction: column; gap: 10px; }
.beats-headrow, .beat-row { display: grid; grid-template-columns: 68px minmax(0,1fr) 72px 64px 72px 130px; gap: 16px; align-items: center; }
.beats-headrow { padding: 0 18px 4px; border: 1px solid transparent; color: var(--faint); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.beats-headrow span:nth-child(3), .beats-headrow span:nth-child(4), .beats-headrow span:nth-child(5) { text-align: center; }
.beats-headrow span:nth-child(6) { text-align: center; }
.beat-row { background: var(--glass); border: 1px solid var(--line-soft); border-radius: var(--r-md); padding: 12px 18px; transition: border-color .25s; }
.beat-row.is-playing { border-color: var(--pink); }
.beat-row__cover { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; background: var(--bg-elev); border: 0; padding: 0; cursor: pointer; }
.beat-row__cover img { width: 100%; height: 100%; object-fit: cover; }
.beat-row__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 1rem; opacity: 1; transition: background .2s; }
.beat-row__cover:hover .beat-row__play, .beat-row.is-playing .beat-row__play { background: rgba(0,0,0,.62); }
.beat-row__main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.beat-row__title { font-weight: 700; font-size: 1.05rem; }
.beat-row__sub { color: var(--muted); font-size: .84rem; }
.beat-row__metam { display: none; color: var(--muted); font-size: .8rem; }
.beat-row__seek { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--line); margin-top: 6px; cursor: pointer; }
.beat-row__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--pink); cursor: pointer; }
.beat-row__seek::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--pink); cursor: pointer; }
.beat-row__seek:disabled { opacity: .4; }
.beat-row__time, .beat-row__bpm, .beat-row__key { text-align: center; color: rgba(246,245,243,.82); font-size: .9rem; font-variant-numeric: tabular-nums; }
.beat-row__buy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: stretch; background: var(--pink); color: #fff; font-weight: 800; padding: 11px 16px; border-radius: var(--r-pill); white-space: nowrap; transition: transform .25s, background .25s; }
.beat-row__buy svg { flex: none; width: 18px; height: 18px; display: block; }
.beat-row__buy span { line-height: 1; }
.beat-row__buy:hover { transform: translateY(-2px); background: #ff77b3; }
@media (max-width: 640px){
  .beats-headrow { display: none; }
  .beat-row { grid-template-columns: 56px 1fr auto; gap: 12px; }
  .beat-row__time, .beat-row__bpm, .beat-row__key { display: none; }
  .beat-row__metam { display: block; }
  .beat-row__cover { width: 56px; height: 56px; }
}