/* Страница товара: слева фото из галереи как есть, справа — выбор и покупка.
   Ниже — только заполненные блоки. */

.pp { padding-top: 112px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; line-height: 20px; color: var(--muted); }
.crumbs a { transition: color 150ms var(--ease); }
.crumbs a:hover { color: var(--ink); }
.pp-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; margin-top: 24px; align-items: start; }

/* ---------- галерея: фото как загружены, со скруглёнными углами ---------- */
.pp-gallery { position: sticky; top: 104px; }
.pp-main { width: min(100%, calc(100vh - 264px)); aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #fff; }
.pp-main .ph-none { border-radius: 16px; background: var(--surface); }
.pp-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.pp-thumb { width: 72px; height: 72px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 150ms var(--ease); }
.pp-thumb .ph { pointer-events: none; }
.pp-thumb:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.pp-thumb[aria-current] { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- выбор и покупка ---------- */
.pp-info { padding-top: 24px; }
.pp-kind { font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pp-h1 {
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: 125%;
  font-size: clamp(40px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.01em;
}
.pp-purpose { margin-top: 16px; max-width: 32em; font-size: 20px; line-height: 1.45; color: var(--muted); }
.pp-opts { margin-top: 32px; }
.pp-legend { display: flex; gap: 6px; margin-bottom: 8px; padding: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.pp-legend-v { color: var(--ink); }
.pp-legend-v:not(:empty)::before { content: "· "; color: var(--muted); }
.pp-opts .chip-face { min-height: 48px; padding: 0 18px; font-size: 15px; }
.pp-opts .chip.is-swatch .chip-face { width: 48px; padding: 0; }
.pp-opts .chip.is-swatch .chip-dot { width: 34px; height: 34px; }
.pp-pass:empty { display: none; }
.pp-pass { display: grid; grid-template-columns: auto 1fr; gap: 4px 24px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; line-height: 24px; }
.pp-pass dt { color: var(--muted); }
.pp-pass dd { font-weight: 600; }
.pp-pass .tbd { font-weight: 400; }
.pp-buy { margin-top: 32px; }
.pp-price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: 100%;
  font-size: 40px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pp-price.is-text { font-size: 28px; }
.pp-stock { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 15px; line-height: 22px; }
.pp-stock::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: currentColor; }
.pp-stock[data-state="out"] { color: var(--muted); }
.pp-stock[data-state="out"]::before { background: none; border: 1px dashed currentColor; }
.pp-stock[data-state="request"] { color: var(--muted); }
.pp-stock[data-state="request"]::before { display: none; }
.pp-act { margin-top: 24px; }
.pp-btn { min-width: 240px; }
.btn.is-alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn.is-alt:hover { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.btn[aria-disabled="true"] { opacity: .45; }
.btn[aria-disabled="true"]:hover { background: var(--red); }
.pp-hint { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 22px; color: var(--red); }
.pp-hint:empty, .pp-incart:empty { display: none; }
.pp-incart { margin-top: 12px; font-size: 15px; line-height: 22px; }
.pp-link { padding: 0; border: 0; background: none; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pp-link:hover { color: var(--red); }
.pp-tiers { margin-top: 40px; }
.pp-tiers-h { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--muted); }
.pp-tiers ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; border: 1px solid var(--line); border-radius: 12px; }
.pp-tiers li { padding: 12px 16px; display: flex; flex-direction: column; }
.pp-tiers li + li { border-left: 1px solid var(--line); }
.pp-tiers b { font-family: var(--font-display); font-weight: var(--display-weight); font-stretch: 100%; font-size: 22px; line-height: 28px; transition: color 250ms var(--ease); }
.pp-tiers span { font-size: 13px; line-height: 18px; color: var(--muted); }
.pp-tiers li.on b { color: var(--red); }
.pp-tiers-note { margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--muted); }
.pp-ship { margin-top: 24px; font-size: 15px; line-height: 22px; color: var(--muted); }

/* ---------- блоки ниже ---------- */
.pp-sec { padding-top: 128px; }
.pp-sec-h {
  margin-bottom: 32px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.04;
}
.pp-search { display: flex; gap: 12px; max-width: 880px; }
.pp-search-in { flex: 1; min-width: 0; height: 56px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: transparent; font-size: 18px; }
.pp-search-in:focus { outline: none; border-color: var(--ink); }
.pp-facts { max-width: 880px; }
.pp-facts li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid var(--line); font-size: 17px; line-height: 26px; }
.pp-facts b { font-weight: 600; }
.pp-facts span { color: var(--muted); }
.pp-more { display: inline-block; margin-top: 24px; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.pp-more:hover { color: var(--red); }
main#product { padding-bottom: 128px; }

/* ---------- описание с сайта ---------- */
.ds { max-width: 880px; }
.ds > * + * { margin-top: 16px; }
.ds-p { font-size: 17px; line-height: 1.6; }
.ds-h { margin-top: 40px !important; font-size: 20px; font-weight: 600; line-height: 28px; }
.ds-h + * { margin-top: 12px; }
.ds-ul { padding-left: 0; }
.ds-ul li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.6; }
.ds-ul li + li { margin-top: 6px; }
.ds-ul li::before { content: ""; position: absolute; left: 4px; top: .75em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.ds-dl { border-top: 1px solid var(--line); }
.ds-dl div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 24px; }
.ds-dl dt { color: var(--muted); }
.ds-dl dd { font-weight: 500; }

/* ---------- панель покупки на телефоне ---------- */
.pp-bar { display: none; }

@media (max-width: 899px) {
  .pp { padding-top: 104px; }
  .pp-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 16px; }
  .pp-gallery { position: static; }
  .pp-main { width: 100%; }
  .pp-thumbs { gap: 8px; }
  .pp-thumb { width: 64px; height: 64px; }
  .pp-info { padding-top: 0; }
  .pp-btn { width: 100%; }
  .pp-sec { padding-top: 96px; }
  .pp-facts li { grid-template-columns: 1fr; }
  .ds-p, .ds-ul li { font-size: 16px; }
  .ds-dl div { grid-template-columns: 1fr; }
  .pp-search { flex-direction: column; }
  main#product { padding-bottom: 96px; }
  .pp-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid var(--line);
    background: rgb(244 245 247 / .94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateY(100%);
    transition: transform 250ms var(--ease);
  }
  .pp-bar.is-on { transform: none; }
  .pp-bar-in { min-width: 0; display: flex; flex-direction: column; }
  .pp-bar-name { font-size: 14px; line-height: 20px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-bar-price { font-size: 18px; font-weight: 600; line-height: 24px; white-space: nowrap; }
  .pp-bar-btn { height: 48px; padding: 0 24px; flex: none; }
  .page-product .toast { bottom: 148px; }
}
@media (max-width: 599px) {
  .pp-purpose { font-size: 18px; }
  .pp-price { font-size: 34px; }
  .pp-tiers ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-tiers li:nth-child(3) { border-left: 0; }
  .pp-tiers li:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* Телефон: шкала шрифтов по эталонным сайтам (Stripe, Linear, Vercel: H1 24–38, H2 22–34, текст 15–16) — 18.10.2026 */
@media (max-width: 767px) {
  .pp-h1 { font-size: 30px; }
  .pp-sec-h { font-size: 24px; }
  .pp-price { font-size: 28px; }
  .pp-purpose { font-size: 16px; }
  .ds-h { font-size: 18px; line-height: 24px; }
}