/* site-btn.css — кнопки покупки на странице методички (S65).
   Плоские пилюли без рамок, теней и анимации значков. Значки остаются, кроме «Предпросмотра» (там вместо значка стрелка ›).
   Подключается последним и только пока в админке выбраны «Плоские» кнопки (Страницы товаров, «Кнопки покупки»): выбор «Прежние» файл не подключает. */

.spp-btns .sp-btn,
.spp-mbar .sp-btn {
  border-radius: 980px;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background-color .2s ease, color .2s ease;
}
.spp-btns .sp-btn:active,
.spp-mbar .sp-btn:active { opacity: .8; }
.spp-btns .sp-btn:focus-visible,
.spp-mbar .sp-btn:focus-visible { outline: 2px solid var(--av-blue); outline-offset: 3px; }

/* «Купить в 1 клик» */
.spp-btns .sp-btn-buy,
.spp-mbar .sp-btn-buy { background: var(--av-blue); }
.spp-btns .sp-btn-buy:hover,
.spp-mbar .sp-btn-buy:hover { background: color-mix(in srgb, var(--av-blue) 86%, #fff); }

/* «В корзину» */
.spp-btns .sp-btn-soft {
  background: #EDEEF2;
  color: var(--av-ink) !important;
  box-shadow: none;
}
.spp-btns .sp-btn-soft:hover { background: #E2E4EA; box-shadow: none; }

/* «Предпросмотр»: без значка, со стрелкой */
.spp-btns .sp-btn-pre {
  background: transparent;
  color: var(--av-blue) !important;
  box-shadow: none;
  gap: 4px;
}
.spp-btns .sp-btn-pre svg,
.spp-mbar .sp-btn-pre svg { display: none; }
.spp-btns .sp-btn-pre::after { content: "\203A"; font-size: 1.3em; line-height: 1; }
.spp-btns .sp-btn-pre:hover {
  background: transparent;
  color: var(--av-blue) !important;
  box-shadow: none;
  text-decoration: none;
  opacity: .72;
}

/* «В корзине» */
.spp-btns .sp-btn.is-in {
  background: var(--av-sky);
  color: var(--av-blue-text, var(--av-blue)) !important;
  box-shadow: none;
}
.spp-btns .sp-btn.is-in:hover { background: color-mix(in srgb, var(--av-blue) 10%, var(--av-sky)); }

/* тёмное оформление PRO: те же плоские кнопки без рамок (золотая «Купить в 1 клик» остаётся) */
.spp.is-prodark .spp-btns .sp-btn-soft { background: rgba(255, 255, 255, .12); color: #FFFFFF !important; box-shadow: none; }
.spp.is-prodark .spp-btns .sp-btn-soft:hover { background: rgba(255, 255, 255, .2); box-shadow: none; }
.spp.is-prodark .spp-btns .sp-btn-pre { background: transparent; color: #F3D9A4 !important; box-shadow: none; }
.spp.is-prodark .spp-btns .sp-btn-pre:hover { background: transparent; color: #F3D9A4 !important; box-shadow: none; opacity: .72; }

/* «Перейти на PRO за …» в карточке обычной методички: та же плоская пилюля, без подчёркивания и анимации */
.spp .spp-vup .spp-vup-go {
  border-radius: 980px;
  box-shadow: none;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  background: var(--av-blue);
  color: #FFFFFF !important;
  transition: background-color .2s ease;
}
.spp .spp-vup .spp-vup-go:hover { background: color-mix(in srgb, var(--av-blue) 86%, #fff); text-decoration: none; filter: none; }
.spp .spp-vup .spp-vup-go:active { opacity: .8; }
.spp .spp-vup .spp-vup-go:focus-visible { outline: 2px solid var(--av-blue); outline-offset: 3px; }