/* DeliGame — карточка товара. Тот же стиль, что у страницы профиля.
   Мобильная вёрстка по умолчанию, десктоп от 900px. */

.dg {
  --dg-bg: #F5F5F7;
  --dg-card: #FFFFFF;
  --dg-text: #1D1D1F;
  --dg-text-2: #6E6E73;
  --dg-text-3: #86868B;
  --dg-line: #D2D2D7;
  --dg-line-soft: #E5E5EA;
  --dg-accent: #0071E3;
  --dg-accent-soft: #EAF3FF;
  --dg-link: #0066CC;
  --dg-green: #34C759;
  --dg-green-text: #1F7A35;
  --dg-green-soft: #E8F8EC;
  --dg-pink: #FF2D55;
  --dg-shadow: inset 0 0 0 .5px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.04);
  --dg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", sans-serif;
  --dg-ease: cubic-bezier(.2,.8,.2,1);
  --dg-spring: cubic-bezier(.34,1.56,.64,1);

  position: relative; isolation: isolate; overflow-x: clip;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--dg-bg); color: var(--dg-text);
  font-family: var(--dg-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body { margin: 0; background: #F5F5F7; }
.dg *, .dg *::before, .dg *::after { box-sizing: border-box; }
.dg a { color: var(--dg-link); }
.dg button { font-family: inherit; }
.dg [hidden] { display: none !important; }
.desk-only { display: none !important; }

/* Цветная глубина */
.dg::before, .dg::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .4; animation: dg-float 16s ease-in-out infinite; }
.dg::before { width: 360px; height: 360px; top: 420px; right: -160px; background: radial-gradient(circle, #C9A2FF, transparent 70%); }
.dg::after  { width: 320px; height: 320px; top: 900px; left: -160px; background: radial-gradient(circle, #FFB3C7, transparent 70%); animation-delay: -8s; }
@keyframes dg-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-24px,18px) scale(1.08); } }

/* ---------- Шапка ---------- */
.dg-header { position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); transition: background .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s, backdrop-filter .3s; }
.dg-header__inner { max-width: 1180px; margin: 0 auto; padding: 0 12px; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dg-header.is-scrolled { background: rgba(245,245,247,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(0,0,0,.06); }
.dg-header__left { display: flex; align-items: center; gap: 28px; }
.dg-logo { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--dg-text) !important; text-decoration: none; }
.dg-topnav { display: flex; gap: 22px; font-size: 13px; }
.dg-topnav a { color: #424245; text-decoration: none; }
.dg-topnav a:hover { color: var(--dg-text); }
.pd-header__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 15px; font-weight: 600; letter-spacing: -.01em; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--dg-ease); }
.dg-header.is-scrolled .pd-header__title { opacity: 1; transform: none; }
.pd-header__actions { display: flex; align-items: center; }

.dg-iconbtn { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; color: var(--dg-text) !important; text-decoration: none; cursor: pointer; }
.dg-iconbtn__circle { position: relative; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: 0 1px 3px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; transition: transform .25s var(--dg-spring); }
.dg-iconbtn:hover .dg-iconbtn__circle { transform: scale(1.06); }
.dg-iconbtn:active .dg-iconbtn__circle { transform: scale(.9); }
.dg-iconbtn:focus-visible { outline: none; }
.dg-iconbtn:focus-visible .dg-iconbtn__circle { box-shadow: 0 0 0 3px rgba(0,113,227,.45); }
.pd-online-dot { position: absolute; top: 1px; right: 1px; width: 8px; height: 8px; border-radius: 50%; background: var(--dg-green); box-shadow: 0 0 0 1.5px #fff; }
.pd-cart-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--dg-pink); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.pd-cart-badge.is-bump { animation: pd-bump .45s var(--dg-spring); }
@keyframes pd-bump { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ---------- Каркас ---------- */
.pd-main { width: 100%; max-width: 1180px; margin: -60px auto 0; flex: 1; }
.pd-grid { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Галерея ---------- */
.pd-gallery { position: relative; }
.pd-gallery__main { position: relative; }
.pd-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 0 0 28px 28px; background: #111; outline: none; }
.pd-gallery__track::-webkit-scrollbar { display: none; }
.pd-slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 4 / 3.3; overflow: hidden; }
.pd-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); transition: transform 1.2s var(--dg-ease); }
.pd-slide.is-current img { transform: scale(1); }
.pd-gallery__track:focus-visible { box-shadow: 0 0 0 3px rgba(0,113,227,.5); }
.pd-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pd-chip--glass { background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); color: var(--dg-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pd-gallery__main::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%; border-radius: 0 0 28px 28px; background: linear-gradient(to top, rgba(0,0,0,.45), transparent); pointer-events: none; }
.pd-gallery__chips { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 12px; display: flex; gap: 8px; pointer-events: none; }
.pd-gallery__chips > .pd-chip-panel { flex: 1 1 0; min-width: 0; max-width: calc(50% - 4px); }
.pd-chip-panel { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-height: 58px; padding: 9px 13px; border-radius: 16px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.35), 0 4px 16px rgba(0,0,0,.12); font-size: 13px; font-weight: 600; line-height: 1.3; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0,0,0,.25); animation: pd-chip-in .6s var(--dg-ease) .35s backwards; }
.pd-chip-panel + .pd-chip-panel { animation-delay: .47s; }
.pd-chip-panel small { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.78); margin-bottom: 1px; }
@keyframes pd-chip-in { from { opacity: 0; transform: translateY(12px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.pd-chip--info { height: auto; padding: 6px 11px; flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 12px; font-size: 12px; line-height: 1.2; }
.pd-chip--info small { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-text-2); }
.pd-slide--empty { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; background: radial-gradient(circle at 20% 20%, #5B3CC4, transparent 55%), radial-gradient(circle at 80% 80%, #E0457B, transparent 55%), #1D1D1F; color: #fff; font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pd-gallery__count { position: absolute; right: 12px; bottom: 12px; font-variant-numeric: tabular-nums; }
.pd-dots { position: absolute; left: 0; right: 0; top: calc(100% + 3px); display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.pd-dots i { width: 6px; height: 6px; border-radius: 999px; background: #C7C7CC; transition: width .35s var(--dg-ease), background .3s; }
.pd-dots i.is-active { width: 18px; background: var(--dg-text); }

.pd-thumbs { display: flex; gap: 10px; margin-top: 4px; padding: 6px 16px 6px; scroll-padding: 0 16px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.pd-thumbs::-webkit-scrollbar { display: none; }
.pd-thumb { flex: 0 0 calc((100% - 20px) / 3.15); scroll-snap-align: start; padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; cursor: pointer; background: #ddd; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .25s, outline-color .25s, transform .25s var(--dg-spring); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb:hover { opacity: .85; }
.pd-thumb.is-active { opacity: 1; outline-color: var(--dg-accent); --pd-thumb-op: 1; }
.pd-thumb { border-radius: 12px; }
.pd-thumb:focus-visible { outline-color: var(--dg-accent); opacity: 1; }

/* ---------- Блок покупки ---------- */
.pd-buy { margin: 0 16px; background: var(--dg-card); border-radius: 24px; padding: 20px 16px 16px; box-shadow: var(--dg-shadow); display: flex; flex-direction: column; gap: 16px; }
.pd-buy__head { display: flex; flex-direction: column; gap: 6px; }
.pd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-text-3); }
.pd-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; }
.pd-meta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dg-text-2); }

.pd-field { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-variants legend.pd-label { margin-bottom: 8px; float: left; width: 100%; }
.pd-label { padding: 0; font-size: 13px; font-weight: 600; color: var(--dg-text-2); }

.pd-seg { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: #EEEEF1; }
.pd-seg__item { position: relative; z-index: 1; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--dg-text-2) !important; text-decoration: none; text-align: center; transition: color .2s, background .2s; }
.pd-seg__item { transition: color .2s, background .25s, box-shadow .25s; }
.pd-seg__item.is-active { background: #fff; color: var(--dg-text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.04); }
button.pd-seg__item { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
button.pd-seg__item:not(.is-active):hover, a.pd-seg__item:hover { color: var(--dg-text) !important; background: rgba(255,255,255,.5); }
.pd-seg__item:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: -2px; }

.pd-label--big { font-size: 17px; font-weight: 700; color: var(--dg-text); letter-spacing: -.01em; }
.pd-editions { display: flex; flex-direction: column; gap: 8px; }
.pd-edition { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 14px 12px 16px; border-radius: 16px; border: 1.5px solid var(--dg-line-soft); background: #fff; color: var(--dg-text) !important; text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.3; transition: border-color .2s, background .2s, transform .25s var(--dg-spring), box-shadow .25s; }
.pd-edition__name { min-width: 0; }
a.pd-edition:hover { border-color: #C7C7CC; }
a.pd-edition:hover .pd-chev { transform: translateX(3px); }
a.pd-edition:active { transform: scale(.98); }
a.pd-edition:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }
.pd-edition.is-active { border-color: var(--dg-accent); background: #F2F7FF; box-shadow: 0 0 0 3px rgba(0,113,227,.10); }
.pd-edition__check { position: relative; width: 22px; height: 22px; border-radius: 50%; background: var(--dg-accent); flex-shrink: 0; }
.pd-edition__check::after { content: ""; position: absolute; left: 7.5px; top: 4px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.2px 2.2px 0; transform: rotate(45deg); }
.pd-variants__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pd-variant { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px 14px; border-radius: 16px; background: #fff; border: 1.5px solid var(--dg-line-soft); cursor: pointer; transition: border-color .2s, background .2s, transform .25s var(--dg-spring), box-shadow .25s; }
.pd-variant:hover { border-color: #C7C7CC; }
.pd-variant:active { transform: scale(.98); }
.pd-variant input { position: absolute; opacity: 0; pointer-events: none; }
.pd-variant:has(input:checked) { border-color: var(--dg-accent); background: #F5F9FF; box-shadow: 0 0 0 3px rgba(0,113,227,.10); }
.pd-variant:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(0,113,227,.4); }
.pd-variant__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pd-variant__name { font-size: 13px; font-weight: 600; }
.pd-variant__check { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #C7C7CC; flex-shrink: 0; position: relative; transition: background .2s, border-color .2s; }
.pd-variant:has(input:checked) .pd-variant__check { background: var(--dg-accent); border-color: var(--dg-accent); }
.pd-variant:has(input:checked) .pd-variant__check::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); animation: pd-pop .3s var(--dg-spring); }
@keyframes pd-pop { from { transform: rotate(45deg) scale(0); } to { transform: rotate(45deg) scale(1); } }
.pd-variant__price.is-sale { color: #C9002B; }
.pd-variant__sale { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--dg-text-3); }
.pd-variant__sale b { padding: 1px 5px; border-radius: 5px; background: #FF3B30; color: #fff; font-size: 10.5px; font-weight: 800; }
.pd-variant__sale i { font-style: normal; color: #C9002B; }
.pd-variant__mid { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pd-variant__plat { flex-shrink: 0; padding: 3px 7px; border-radius: 6px; background: #F0F0F3; color: #6E6E73; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; }
.pd-variant:has(input:checked) .pd-variant__plat { background: rgba(0,113,227,.1); color: var(--dg-accent); }
.pd-variant.is-out .pd-variant__plat { background: transparent; color: #AEAEB2; box-shadow: inset 0 0 0 1px #E5E5EA; }
.pd-variant__price { font-size: 19px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--dg-green-text); }
.pd-stock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dg-green); position: relative; }
.pd-stock__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: dg-ping 1.8s cubic-bezier(0,0,.2,1) infinite; }
@keyframes dg-ping { 0% { transform: scale(1); opacity: .7; } 80%,100% { transform: scale(2.8); opacity: 0; } }
.pd-variants__grid.is-swapping .pd-variant { animation: pd-variant-swap .45s var(--dg-ease); }
@keyframes pd-variant-swap { from { transform: translateY(8px) scale(.98); } to { transform: none; } }
@keyframes pd-swap { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.pd-variant.is-out { cursor: default; opacity: .55; }
.pd-variant.is-out:hover { border-color: var(--dg-line-soft); }
.pd-stock.is-out { color: var(--dg-text-2); }
.pd-stock.is-out .pd-stock__dot { background: #C7C7CC; }
.pd-stock.is-out .pd-stock__dot::after { display: none; }
.dg-btn[disabled] { opacity: .45; cursor: default; filter: none; box-shadow: none; }
.pd-link { align-self: flex-start; font-size: 13px; font-weight: 500; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.pd-link:hover { text-decoration: underline; }

.pd-price { font-size: 30px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pd-price.is-ticking { animation: pd-tick .4s var(--dg-ease); }
@keyframes pd-tick { from { opacity: 0; transform: translateY(30%); } to { opacity: 1; transform: none; } }
.pd-points { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: linear-gradient(90deg, #F3EBFF, #FFEAF1); color: #6B2FBF; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.pd-actions { display: flex; gap: 10px; padding-top: 14px; border-top: .5px solid var(--dg-line-soft); }
.pd-points-line { margin: -6px 0 0; text-align: center; font-size: 12px; color: var(--dg-text-2); }
.pd-points-line b { display: inline-block; font-weight: 600; color: #6B2FBF; font-variant-numeric: tabular-nums; }
.pd-points-line b.is-ticking { animation: pd-tick .4s var(--dg-ease); }
.dg-btn { position: relative; overflow: hidden; height: 52px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .25s var(--dg-spring), filter .2s, box-shadow .25s, background .3s; }
.dg-btn:active { transform: scale(.96); }
.dg-btn:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }
.dg-btn--primary { background: linear-gradient(180deg, #1A84F2, #0071E3); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 2px rgba(0,113,227,.3); }
.dg-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(0,113,227,.32); }
.dg-btn--shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); pointer-events: none; }
.dg-btn--shine:hover::before { animation: dg-shine .8s var(--dg-ease); }
@keyframes dg-shine { to { left: 130%; } }
.dg-btn__label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; }
.dg-btn.is-done { background: linear-gradient(180deg, #3DD163, #2DB84F); box-shadow: 0 8px 22px rgba(52,199,89,.3); }
.dg-btn.is-loading { color: transparent; }
.dg-btn.is-loading .dg-btn__label { visibility: hidden; }
.dg-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: dg-spin .7s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }
.pd-add { flex: 1; }

.pd-fav { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--dg-line-soft); background: #fff; color: var(--dg-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .25s var(--dg-spring), border-color .2s, color .2s, background .2s; }
.pd-fav:hover { border-color: #FFC2CF; color: var(--dg-pink); }
.pd-fav:active { transform: scale(.88); }
.pd-fav:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }
.pd-fav[aria-pressed="true"] { background: #FFF0F3; border-color: #FFC2CF; color: var(--dg-pink); }
.pd-fav[aria-pressed="true"] svg { fill: currentColor; animation: pd-heart .5s var(--dg-spring); }
@keyframes pd-heart { 0% { transform: scale(.6); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }

.pd-promo { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--dg-green-soft); color: #14532D !important; text-decoration: none; font-size: 13px; line-height: 1.35; transition: transform .25s var(--dg-spring), filter .2s; }
.pd-promo:hover { filter: brightness(.98); }
.pd-promo:active { transform: scale(.98); }
.pd-promo b { color: var(--dg-green-text); }
.pd-promo__icon { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--dg-green-text); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(52,199,89,.2); }
.pd-promo__text { flex: 1; min-width: 0; }
.pd-promo:hover .pd-promo__icon svg { animation: dg-spin 1s var(--dg-ease); }
.pd-chev { color: #A1A1A6; flex-shrink: 0; transition: transform .3s var(--dg-spring); }
a:hover > .pd-chev { transform: translateX(3px); }

.pd-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pd-perks li { display: flex; flex-direction: column; gap: 8px; padding: 12px 10px; border-radius: 14px; background: var(--dg-bg); font-size: 11px; line-height: 1.35; color: var(--dg-text-2); }
.pd-perks b { display: block; font-size: 12px; color: var(--dg-text); font-weight: 600; margin-bottom: 2px; }
.pd-perks__icon { width: 28px; height: 28px; border-radius: 9px; background: #fff; color: var(--dg-accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* ---------- Подробности ---------- */
.pd-details { margin: 0 16px; display: flex; flex-direction: column; gap: 12px; }
.pd-card { background: var(--dg-card); border-radius: 20px; box-shadow: var(--dg-shadow); }
/* Из account2.css: локальный префикс блока информации Share. */
.pd-share-about { margin: 0 16px; padding: 18px 16px 6px; display: flex; flex-direction: column; min-width: 0; }
.pd-share-about [hidden], .pd-share-about[hidden] { display: none; }
.pd-share-about__h { margin: 0 0 4px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pd-share-info-list { margin: 0 0 6px; }
.pd-share-info-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 14px; }
.pd-share-info-row + .pd-share-info-row { border-top: .5px solid var(--dg-line-soft); }
.pd-share-info-row dt { color: var(--dg-text-2); flex-shrink: 0; }
.pd-share-info-row dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.pd-share-desc { border-top: .5px solid var(--dg-line-soft); margin: 0 -16px; padding: 14px 16px 16px; }
.pd-share-desc__title { margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pd-share-desc-body { font-size: 14px; line-height: 1.55; color: var(--dg-text); white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; max-height: 7.75em; overflow: hidden; }
.pd-share-desc-body.is-expanded { display: block; max-height: none; -webkit-line-clamp: unset; }
.pd-share-desc-body p { margin: 0 0 10px; }
.pd-share-desc-body p:last-child { margin-bottom: 0; }
.pd-share-desc-toggle { display: block; min-height: 44px; margin: 8px 0 -8px; padding: 8px 0; border: 0; background: transparent; color: var(--dg-link); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-align: left; }
.pd-share-desc-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }
.pd-share-desc-toggle:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 900px) {
  .pd-grid:has(.pd-share-about:not([hidden])) { grid-template-areas: "gallery buy" "about buy"; grid-template-rows: auto 1fr; }
  .pd-grid:has(.pd-share-about:not([hidden])) .pd-buy { grid-row: 1 / span 2; }
  .pd-share-about { grid-area: about; margin: 0; padding: 22px 24px 8px; border-radius: 24px; }
  .pd-share-desc { margin: 0 -24px; padding: 16px 24px 20px; }
}
.pd-readme { overflow: hidden; }
.pd-readme__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; min-height: 44px; }
.pd-readme__head::-webkit-details-marker { display: none; }
.pd-readme__head:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: -2px; border-radius: 20px; }
.pd-readme__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--dg-accent-soft); color: var(--dg-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-readme__text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--dg-text-2); }
.pd-readme__text b { display: block; font-size: 15px; color: var(--dg-text); font-weight: 600; margin-bottom: 1px; }
.pd-readme__toggle { width: 30px; height: 30px; border-radius: 50%; background: var(--dg-bg); color: var(--dg-text-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform .35s var(--dg-spring), background .2s; }
.pd-readme.is-open .pd-readme__toggle, .pd-readme[open] .pd-readme__toggle { transform: rotate(180deg); background: var(--dg-accent-soft); color: var(--dg-accent); }
.pd-readme__body { overflow: hidden; transition: height .32s var(--dg-ease); }
.pd-docs { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; }
.pd-docs li + li { border-top: .5px solid var(--dg-line-soft); margin-left: 52px; }
.pd-docs li + li .pd-docs__item { margin-left: -52px; }
.pd-docs__item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 12px; text-decoration: none; color: var(--dg-text) !important; font-size: 14px; transition: background .15s; }
.pd-docs__item:hover { background: var(--dg-bg); }
.pd-docs__item:hover .pd-chev { transform: translateX(3px); }
.pd-docs__icon { width: 30px; height: 30px; border-radius: 9px; background: var(--dg-bg); color: var(--dg-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-docs__item--green .pd-docs__icon { background: var(--dg-green-soft); color: var(--dg-green-text); }
.pd-docs__label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-docs__label small { font-size: 12px; color: var(--dg-text-2); }
.pd-readme[open] .pd-docs li { animation: pd-swap .4s var(--dg-ease) backwards; }
.pd-readme[open] .pd-docs li:nth-child(1) { animation-delay: 0.03s; }
.pd-readme[open] .pd-docs li:nth-child(2) { animation-delay: 0.06s; }
.pd-readme[open] .pd-docs li:nth-child(3) { animation-delay: 0.09s; }
.pd-readme[open] .pd-docs li:nth-child(4) { animation-delay: 0.12s; }
.pd-readme[open] .pd-docs li:nth-child(5) { animation-delay: 0.15s; }
.pd-readme[open] .pd-docs li:nth-child(6) { animation-delay: 0.18s; }
.pd-readme[open] .pd-docs li:nth-child(7) { animation-delay: 0.21s; }
.pd-readme[open] .pd-docs li:nth-child(8) { animation-delay: 0.24s; }
.pd-readme[open] .pd-docs li:nth-child(9) { animation-delay: 0.27s; }
.pd-info { padding: 16px; }
.pd-h2 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -.015em; }
.pd-kv { margin: 0; }
.pd-kv div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; font-size: 14px; }
.pd-kv div + div { border-top: .5px solid var(--dg-line-soft); }
.pd-kv dt { color: var(--dg-text-2); }
.pd-kv dd { margin: 0; font-weight: 500; text-align: right; }

/* ---------- Подвал ---------- */
.dg-footer { width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 24px calc(88px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--dg-text-2); font-size: 11px; text-align: center; }

/* ---------- Нижняя панель (телефон) ---------- */
.pd-bar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; border-radius: 999px; background: rgba(255,255,255,.8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 10px 40px rgba(0,0,0,.14), inset 0 0 0 .5px rgba(0,0,0,.06); transform: translateY(140%); transition: transform .45s var(--dg-ease); }
.pd-bar.is-visible { transform: none; }
.pd-bar__info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pd-bar__price { font-size: 17px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pd-bar__variant { font-size: 12px; color: var(--dg-text-2); }
.pd-bar .dg-btn { height: 46px; font-size: 15px; padding: 0 22px; }

/* ---------- Поддержка ---------- */
.pd-support { position: fixed; right: 16px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 25; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, #1A84F2, #0071E3); color: #fff !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,113,227,.4), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .3s var(--dg-spring), bottom .45s var(--dg-ease); }
.pd-support:hover { transform: scale(1.08) rotate(-6deg); }
.pd-support:focus-visible { outline: 3px solid rgba(0,113,227,.4); outline-offset: 3px; }
.pd-support__dot { position: absolute; top: 3px; right: 3px; width: 11px; height: 11px; border-radius: 50%; background: var(--dg-green); box-shadow: 0 0 0 2px #fff; }

/* на телефоне кнопка поддержки прячется, пока на экране кнопки покупки, чтобы их не перекрывать */
.pd-support { transition: transform .35s var(--dg-spring), opacity .25s, bottom .45s var(--dg-ease); }

/* ---------- Уведомление ---------- */
.pd-toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 40; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(29,29,31,.92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 12px 40px rgba(0,0,0,.25); transform: translate(-50%, -160%); transition: transform .45s var(--dg-spring); }
.pd-toast.is-visible { transform: translate(-50%, 0); }
.pd-toast__icon { width: 22px; height: 22px; border-radius: 50%; background: var(--dg-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-toast__text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-toast__link { flex-shrink: 0; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff !important; text-decoration: none; font-weight: 600; }
.pd-toast__link:hover { background: rgba(255,255,255,.22); }

/* ---------- Окно «Чем отличаются варианты» ---------- */
.pd-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.pd-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.pd-modal__sheet {
  position: relative; width: 100%; max-height: 88%; display: flex; flex-direction: column;
  background: #fff; border-radius: 28px 28px 0 0; padding: 8px 0 calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 60px rgba(0,0,0,.2); transform: translateY(105%); transition: transform .42s var(--dg-ease);
}
.pd-modal__sheet:focus { outline: none; }
.pd-modal.is-open .pd-modal__backdrop { opacity: 1; }
.pd-modal.is-open .pd-modal__sheet { transform: none; }
.pd-modal__grab { width: 36px; height: 5px; border-radius: 999px; background: #D1D1D6; margin: 0 auto 6px; }
.pd-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 20px 12px; }
.pd-modal__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pd-modal__close { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--dg-bg); color: var(--dg-text-2); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .25s var(--dg-spring), background .2s; }
.pd-modal__close:hover { background: #E8E8ED; transform: rotate(90deg); }
.pd-modal__close:focus-visible { outline: 2px solid var(--dg-accent); outline-offset: 2px; }
.pd-modal__tabs { margin: 0 20px 4px; }
.pd-modal__tabs .pd-seg__item { gap: 6px; }
.pd-modal__tabs small { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.06); color: var(--dg-text-2); }
.pd-modal__tabs .is-active small { background: var(--dg-accent-soft); color: var(--dg-accent); }
.pd-modal__body::-webkit-scrollbar { display: none; width: 0; height: 0; }
.pd-modal__body { scrollbar-width: none; -ms-overflow-style: none; overflow-y: auto; overscroll-behavior: contain; padding: 12px 20px 8px; -webkit-overflow-scrolling: touch; }
.pd-info-panel { animation: pd-panel .35s var(--dg-ease); }
@keyframes pd-panel { from { opacity: 0; transform: translateX(var(--pd-dir, 12px)); } to { opacity: 1; transform: none; } }
.pd-info-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.45; color: var(--dg-text); }
.pd-info-h { margin: 18px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--dg-text-3); }
.pd-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pd-steps li { counter-increment: step; position: relative; padding-left: 36px; font-size: 14px; line-height: 1.45; min-height: 24px; }
.pd-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; width: 24px; height: 24px; border-radius: 50%; background: var(--dg-accent-soft); color: var(--dg-accent); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pd-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pd-checks li { position: relative; padding-left: 28px; font-size: 14px; line-height: 1.45; }
.pd-checks li::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--dg-green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7A35' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pd-checks li.is-no::before { background: #FFECEE url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D70015' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pd-checks li.is-warn::before { background: #FFF3DC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B25E00' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pd-checks li.is-net::before { background: var(--dg-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E") center / 12px no-repeat; }
.pd-info-note { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--dg-bg); font-size: 12px; line-height: 1.45; color: var(--dg-text-2); }
.pd-info-panel sup { color: var(--dg-accent); font-weight: 700; }
.pd-callout { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #FFF6E5; color: #6B3A00; font-size: 14px; line-height: 1.45; }
.pd-callout p { margin: 0; }
.pd-callout b { color: #4A2800; }
.pd-callout__icon { width: 22px; height: 22px; border-radius: 50%; background: #FF9500; color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.pd-modal__foot { padding: 12px 20px 0; border-top: .5px solid var(--dg-line-soft); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pd-modal__pick { width: 100%; }
.pd-modal__more { font-size: 13px; font-weight: 500; text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }
.pd-modal__more:hover { text-decoration: underline; }

/* ---------- Окно «Сдай игру обратно» ---------- */
.pd-ret-hero { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #E8F8EC, #F1FBF3); }
.pd-ret-hero__num { flex-shrink: 0; font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--dg-green-text); }
.pd-ret-hero p { margin: 0; font-size: 14px; line-height: 1.4; color: #14532D; }
.pd-callout--info { margin-top: 16px; background: var(--dg-accent-soft); color: #0B3A6E; }
.pd-callout--info b { color: #082C55; }
.pd-callout--info .pd-callout__icon { background: var(--dg-accent); font-style: italic; font-family: Georgia, serif; }
.pd-callout__list { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pd-ret-transfer { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.pd-ret-transfer__price { flex-shrink: 0; display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: var(--dg-bg); font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.pd-ret-transfer__price small { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dg-text-2); }
.pd-ret-transfer p { margin: 0; font-size: 14px; line-height: 1.4; color: var(--dg-text-2); }

/* ---------- Окно документа ---------- */
.pd-doc-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pd-doc-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dg-accent); }
.pd-doc-lead { margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--dg-bg); font-size: 14px; line-height: 1.45; color: var(--dg-text-2); }
.pd-doc-body { font-size: 14px; line-height: 1.55; color: var(--dg-text); overflow-wrap: anywhere; }
.pd-doc-body > :first-child { margin-top: 0; }
.pd-doc-body h3 { margin: 4px 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.pd-doc-body h4 { margin: 20px 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.pd-doc-body p { margin: 0 0 10px; }
.pd-doc-body strong { font-weight: 600; }
.pd-doc-body ul, .pd-doc-body ol { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pd-doc-body ul li { position: relative; padding-left: 18px; }
.pd-doc-body ul li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--dg-accent); opacity: .7; }
.pd-doc-body ol { counter-reset: dl; }
.pd-doc-body ol li { counter-increment: dl; position: relative; padding-left: 30px; min-height: 22px; }
.pd-doc-body ol li::before { content: counter(dl); position: absolute; left: 0; top: .1em; width: 20px; height: 20px; border-radius: 50%; background: var(--dg-accent-soft); color: var(--dg-accent); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pd-doc-body hr { border: 0; height: .5px; background: var(--dg-line-soft); margin: 18px 0; }
.pd-doc-body pre { white-space: pre-wrap; font: inherit; margin: 0 0 10px; padding: 12px 14px; border-radius: 12px; background: var(--dg-bg); }
.pd-modal__sheet--doc .pd-modal__title { font-size: 19px; }

/* ---------- Появление ---------- */
@keyframes dg-rise { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.dg-rise { animation: dg-rise .7s var(--dg-ease) backwards; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }

/* ---------- Телефон: без рамки вокруг блока покупки ---------- */
.pd { background: #FFFFFF; }
.pd .dg-header.is-scrolled { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pd .dg-header { pointer-events: none; }
.pd .dg-header .dg-iconbtn { pointer-events: auto; }
.pd-buy { margin: 0; padding: 8px 16px 0; background: transparent; border-radius: 0; box-shadow: none; }
.pd-buy .pd-readme { background: var(--dg-bg); box-shadow: none; border-radius: 16px; }
.pd-buy .pd-readme__head { padding: 12px 14px; }
.pd-docs__icon, .pd-readme__toggle { background: #FFFFFF; }
.pd-docs__item:hover { background: #ECECF0; }
.pd-perks li { background: var(--dg-bg); }
.pd-dots { top: calc(100% + 8px); }
.pd-gallery { margin-bottom: 0; }

/* ---------- Отсчёт до релиза ---------- */
.pd-countdown { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px; background: var(--dg-bg); }
.pd-countdown__head { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--dg-text-2); }
.pd-countdown__icon { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #5856D6, #0A84FF); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 3px 10px rgba(88,86,214,.35); }
.pd-countdown__icon svg { animation: pd-tick-rot 60s linear infinite; }
@keyframes pd-tick-rot { to { transform: rotate(360deg); } }
.pd-countdown__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pd-cd { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; }
.pd-cd b { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; display: inline-block; }
.pd-cd b.is-flip { animation: pd-flip .45s var(--dg-ease); }
@keyframes pd-flip { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.pd-cd small { font-size: 12px; color: var(--dg-text-2); }

/* ---------- Анимации ---------- */
/* медленный «наезд» камеры на текущий слайд */
@keyframes pd-kenburns { from { transform: scale(1.0); } to { transform: scale(1.08) translate(-1%, -1%); } }
.pd-slide.is-current img { animation: pd-kenburns 14s ease-in-out infinite alternate; }
/* параллакс обложки при прокрутке (переменная задаётся из JS) */
.pd-slide img { translate: 0 calc(var(--pd-par, 0) * 1px); }

/* миниатюры появляются по очереди */
@keyframes pd-thumb-in { from { opacity: 0; transform: translateY(10px) scale(.94); } to { opacity: var(--pd-thumb-op, .55); transform: none; } }
.pd-thumb { animation: pd-thumb-in .5s var(--dg-ease) backwards; }
.pd-thumb:nth-child(2) { animation-delay: .08s; } .pd-thumb:nth-child(3) { animation-delay: .16s; } .pd-thumb:nth-child(4) { animation-delay: .24s; } .pd-thumb:nth-child(5) { animation-delay: .32s; }

/* блоки «всплывают», когда доходят до экрана */
@keyframes pd-reveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pd-reveal.is-in { animation: pd-reveal .6s var(--dg-ease) backwards; animation-delay: calc(var(--rv, 0) * 70ms); }

/* выбор варианта: волна от галочки и подпрыгивание цены */
.pd-variant { overflow: hidden; }
.pd-variant::after { content: ""; position: absolute; top: 21px; right: 21px; width: 10px; height: 10px; border-radius: 50%; background: rgba(0,113,227,.18); transform: scale(0); opacity: 0; pointer-events: none; }
.pd-variant.is-picked::after { animation: pd-ripple .6s var(--dg-ease); }
@keyframes pd-ripple { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(40); opacity: 0; } }
.pd-variant.is-picked .pd-variant__price { animation: pd-bounce .5s var(--dg-spring); }
@keyframes pd-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.pd-variant__plat { transition: transform .3s var(--dg-spring), background .2s; }
.pd-variants__grid.is-swapping .pd-variant__plat { animation: pd-plat .5s var(--dg-spring); }
@keyframes pd-plat { 0% { transform: rotateX(90deg); } 100% { transform: none; } }

/* издания: блик при наведении */
a.pd-edition { position: relative; overflow: hidden; }
a.pd-edition::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(0,113,227,.08), transparent); transform: skewX(-20deg); pointer-events: none; }
a.pd-edition:hover::before { animation: dg-shine .9s var(--dg-ease); }

/* сердечко: искры */
.pd-fav { position: relative; overflow: visible; }
.pd-burst { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; pointer-events: none; animation: pd-burst .65s var(--dg-ease) forwards; }
@keyframes pd-burst { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) scale(.2); opacity: 0; } }

/* «полёт» обложки в корзину */
.pd-fly { position: fixed; z-index: 70; width: 64px; height: 64px; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 10px 30px rgba(0,0,0,.25); pointer-events: none; }
.dg-iconbtn.is-catch .dg-iconbtn__circle { animation: pd-catch .5s var(--dg-spring); }
@keyframes pd-catch { 0% { transform: scale(1); } 40% { transform: scale(1.25) rotate(-8deg); } 100% { transform: scale(1); } }

/* кнопка поддержки слегка «дышит» */
@keyframes pd-breathe { 0%, 100% { box-shadow: 0 10px 30px rgba(0,113,227,.4), 0 0 0 0 rgba(0,113,227,.35), inset 0 1px 0 rgba(255,255,255,.25); } 50% { box-shadow: 0 10px 30px rgba(0,113,227,.4), 0 0 0 10px rgba(0,113,227,0), inset 0 1px 0 rgba(255,255,255,.25); } }
.pd-support { animation: pd-breathe 2.8s ease-in-out 1.5s infinite; }

/* =========================================================
   ДЕСКТОП (от 900px)
   ========================================================= */
@media (min-width: 900px) {
  .mob-only { display: none !important; }
  .desk-only { display: flex !important; }

  .dg-header { background: rgba(245,245,247,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: .5px solid var(--dg-line); }
  .dg-header__inner { padding: 0 32px; min-height: 56px; }
  .dg-header__inner > .dg-iconbtn:first-child { display: none; }
  .dg-iconbtn__circle { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }

  .pd-main { margin-top: 0; padding: 32px 32px 0; }
  .pd { background: var(--dg-bg); }
  .pd .dg-header, .pd .dg-header.is-scrolled { background: rgba(245,245,247,.78); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); pointer-events: auto; }
  .pd-buy { background: var(--dg-card); box-shadow: var(--dg-shadow); }
  .pd-docs__item:hover { background: #ECECF0; }
  .pd-gallery { margin-bottom: 0; }
  .pd-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 1fr);
    grid-template-areas: "gallery buy";
    gap: 24px 28px;
    align-items: start;
  }
  .pd-gallery { grid-area: gallery; }
  .pd-buy { grid-area: buy; position: sticky; top: 80px; margin: 0; padding: 28px; border-radius: 28px; gap: 18px; }
  .pd-details { grid-area: details; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .pd-info { grid-column: 1 / -1; }
  .pd-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pd-kv div + div { border-top: 0; }
  .pd-kv div { border-bottom: .5px solid var(--dg-line-soft); }

  .pd-gallery__track { border-radius: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.14); }
  .pd-thumbs { padding: 6px 4px; gap: 10px; margin-top: 6px; scroll-padding: 0 4px; }
  .pd-thumb { flex: 0 0 calc((100% - 20px) / 3); border-radius: 14px; }
  .pd-thumbs { margin-left: -4px; margin-right: -4px; }
  .pd-slide { aspect-ratio: 16 / 10.5; }
  .pd-gallery__chips { left: 16px; right: 16px; bottom: 16px; gap: 10px; }
  .pd-gallery__main::after { border-radius: 0 0 28px 28px; }
  .pd-chip-panel { min-height: 64px; padding: 11px 16px; font-size: 14px; }
  .pd-gallery__count { bottom: 18px; right: 18px; }

  .pd-title { font-size: 34px; letter-spacing: -.03em; }
  .pd-countdown { background: var(--dg-bg); }
  .pd-cd b { font-size: 26px; }
  .pd-price { font-size: 34px; }
  .pd-info { padding: 18px 20px; }

  .dg-footer { justify-content: flex-start; padding: 40px 32px 48px; font-size: 12px; }
  .pd-support { bottom: 28px !important; right: 28px; }
  .pd-modal { align-items: center; padding: 24px; }
  .pd-modal__sheet { max-width: 560px; max-height: min(760px, 90%); border-radius: 28px; padding: 18px 0 18px; transform: scale(.94); opacity: 0; transition: transform .32s var(--dg-spring), opacity .22s ease; box-shadow: 0 30px 90px rgba(0,0,0,.28); }
  .pd-modal.is-open .pd-modal__sheet { transform: none; opacity: 1; }
  .pd-modal__grab { display: none; }
  .pd-modal__head, .pd-modal__body, .pd-modal__foot { padding-left: 28px; padding-right: 28px; }
  .pd-modal__tabs { margin: 0 28px 4px; }
}

@media (max-width: 359px) {
  .pd-variants__grid { grid-template-columns: minmax(0, 1fr); }
  .pd-perks { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .dg *, .dg *::before, .dg *::after, .dg::before, .dg::after { animation: none !important; transition: none !important; }
}

/* стрелки галереи */
.pd-arrows { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 10px; pointer-events: none; }
.pd-arrows[hidden] { display: none; }
.pd-arrow { pointer-events: auto; width: 38px; height: 38px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255,255,255,.2); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.4), 0 4px 14px rgba(0,0,0,.18); cursor: pointer; transition: transform .25s cubic-bezier(.34,1.56,.64,1), background .2s, opacity .25s; }
.pd-arrow:hover { background: rgba(255,255,255,.34); }
.pd-arrow:active { transform: scale(.88); }
.pd-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pd-arrow--prev svg { margin-left: -2px; } .pd-arrow--next svg { margin-right: -2px; }
@media (hover: hover) and (min-width: 900px) {
  .pd-arrows { padding: 0 16px; }
  .pd-arrow { width: 44px; height: 44px; opacity: 0; }
  .pd-gallery__main:hover .pd-arrow, .pd-arrow:focus-visible { opacity: 1; }
}

/* Host safe areas and API loading/error states. */
.dg-header { padding-top: var(--app-content-top, env(safe-area-inset-top)); }
.pd-support { bottom: calc(20px + var(--app-content-bottom, env(safe-area-inset-bottom))); }
.pd-load-status { max-width: 1180px; margin: 24px auto; padding: 24px; border-radius: 18px; background: #fff; }
.pd-load-status a { display: inline-block; margin-top: 16px; }
.pd[data-state="loading"] .pd-grid { visibility: hidden; }
.pd[data-state="error"] .pd-grid { display: none; }
.pd[data-state="ready"] .pd-load-status { display: none; }
.pd[data-state="loading"] .pd-load-status::before { content: ''; display: block; height: 160px; border-radius: 14px; margin-bottom: 20px; background: linear-gradient(100deg,#eee 20%,#fafafa 45%,#eee 70%); background-size: 200% 100%; animation: pd-skeleton 1.5s linear infinite; }
@keyframes pd-skeleton { to { background-position: -200% 0; } }
@media(prefers-reduced-motion:reduce) { .pd[data-state="loading"] .pd-load-status::before { animation: none; } }