/* ============================================================
   PAGE · МАГАЗИН (store.html, в т.ч. inapp-iframe в кабинете)
   По образу главной: мягкие нейоморф-карточки, картинка во
   ВДАВЛЕННОМ колодце; красный — только мелкими акцентами;
   фикс наезда табов/фильтров (тени сталкивались в nowrap).
   Подключается ПОСЛЕ store-page.css/neo-theme.css. Скоуп: .store-page.
   ============================================================ */

/* --- Табы/фильтры: больше воздуха, чтобы тени не сталкивались (наезд) --- */
html.neo .store-page .sp-tabs, html.neo .store-page .sp-filters { gap: 14px !important; padding: 7px 2px !important; }
/* в inapp строки скроллятся горизонтально — даём вертикальный воздух теням */
html.inapp-mode .sp-tabs, html.inapp-mode .sp-filters { gap: 14px !important; padding: 9px 4px !important; }

html.neo .store-page .sp-tab, html.neo .store-page .sp-filter {
  background: var(--color-surface) !important; border: none !important;
  box-shadow: var(--shadow-raised-sm) !important; color: var(--color-text) !important;
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease) !important;
}
html.neo .store-page .sp-tab:hover, html.neo .store-page .sp-filter:hover { color: var(--color-accent) !important; }
/* активная — НЕ красная заливка, а вдавленная + красный текст (мелкий акцент) */
html.neo .store-page .sp-tab.active, html.neo .store-page .sp-filter.active {
  background: var(--color-surface) !important; color: var(--color-accent) !important;
  box-shadow: var(--shadow-pressed-sm) !important;
}

/* --- Карточка товара: мягкая выпуклая, картинка во вдавленном колодце --- */
html.neo .store-page .sp-card {
  background: var(--color-surface) !important; border: none !important;
  box-shadow: var(--shadow-raised) !important; border-radius: var(--radius-lg) !important;
  padding: 10px !important; overflow: visible !important;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
html.neo .store-page .sp-card:hover { box-shadow: var(--shadow-hover) !important; transform: translateY(-4px) !important; }
html.neo .store-page .sp-card-img {
  border-radius: var(--radius-md) !important; box-shadow: var(--shadow-pressed-sm) !important;
  background: var(--color-surface) !important; overflow: hidden !important;
}
html.neo .store-page .sp-card-body { padding: 14px 10px 4px !important; }
html.neo .store-page .sp-card-region { color: var(--color-text-muted) !important; }   /* было красным */
html.neo .store-page .sp-card-label  { color: var(--color-text-muted) !important; }
html.neo .store-page .sp-card-denom  { color: var(--color-text-strong) !important; }
html.neo .store-page .sp-card-price  { color: var(--color-accent) !important; font-weight: 600 !important; } /* единственный акцент */

/* --- Кнопка покупки: НЕ сплошной красный, а нейоморф; акцент по наведению --- */
html.neo .store-page .sp-card-btn {
  background: var(--color-surface) !important; color: var(--color-text-strong) !important;
  border: none !important; box-shadow: var(--shadow-raised-sm) !important;
  border-radius: var(--radius-pill) !important;
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease) !important;
}
html.neo .store-page .sp-card-btn:hover { color: var(--color-accent) !important; box-shadow: var(--shadow-hover) !important; transform: translateY(-2px) !important; opacity: 1 !important; }
html.neo .store-page .sp-card-btn:active { box-shadow: var(--shadow-pressed-sm) !important; transform: translateY(0) !important; }

/* модалки магазина: главная кнопка — акцент, остальное нейтрально */
html.neo .store-page .sp-modal, html.neo .store-page .sp-modal-overlay ~ * { }
html.neo .store-page .sp-modal-btn-store { background: linear-gradient(145deg, var(--color-accent-hover), var(--color-accent-press)) !important; color: #fff !important; border: none !important; }
html.neo .store-page .sp-modal-alt-btn { background: var(--color-surface) !important; border: none !important; box-shadow: var(--shadow-raised-sm) !important; }