/* prices — цены. Общее: .price-num, .price-per, .price-note, .hot, .price-flag. */
.price-num { font-size: 34px; font-weight: 800; color: var(--s-text); margin: 8px 0 2px; font-family: var(--font-head); }
.price-per { font-size: 13px; color: var(--s-muted); }
.price-note { margin-top: 18px; }

/* cards */
.price-card { text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.price-card ul { list-style: none; margin: 16px 0 22px; font-size: 14px; color: var(--s-muted); flex: 1; }
.price-card li { padding: 5px 0; border-bottom: 1px dashed var(--s-line); }
.price-card.hot { border-color: var(--s-accent); box-shadow: 0 12px 34px rgba(0, 0, 0, .12); }
.price-flag {
  position: absolute; top: 14px; right: -34px; transform: rotate(38deg); background: var(--s-btn-bg);
  color: var(--s-btn-text); font-size: 11px; padding: 3px 40px;
}

/* table: прайс-лист строками */
.price-list { border-top: 1px solid var(--s-line); }
.price-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 24px; align-items: center;
  padding: 20px 14px; border-bottom: 1px solid var(--s-line);
}
.price-row.hot { background: var(--s-surface); border-left: 3px solid var(--s-accent); }
.price-row h3 { font-size: 18px; margin: 0; }
.price-badge {
  display: inline-block; vertical-align: middle; font-size: 11px; font-weight: 600; padding: 2px 10px;
  border-radius: var(--radius-btn); background: var(--s-btn-bg); color: var(--s-btn-text);
  font-family: var(--font-body);
}
.price-row-notes { font-size: 13px; color: var(--s-muted); margin-top: 4px; }
.price-row-num { font-size: 24px; font-weight: 800; font-family: var(--font-head); white-space: nowrap; text-align: right; }
.price-row .btn { padding: 10px 22px; font-size: 14px; }
@media (max-width: 600px) {
  .price-row { grid-template-columns: 1fr auto; }
  .price-row .btn { grid-column: 1 / -1; }
}

/* featured: первый популярный (нет популярных — первый) крупно на всю ширину, остальные мельче.
   «Первый популярный» = .hot без предыдущего .hot среди соседей (чистый css, без логики в шаблоне). */
.price-feat { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.price-item { display: flex; flex-direction: column; padding: 22px; }
.price-item-head { text-align: center; }
.price-item h3 { font-size: 17px; margin-bottom: 4px; }
.price-item .price-num { font-size: 28px; }
.price-item ul { list-style: none; margin: 14px 0 18px; font-size: 14px; color: var(--s-muted); flex: 1; }
.price-item li { padding: 5px 0; border-bottom: 1px dashed var(--s-line); }
.price-feat > .hot:not(.hot ~ .hot),
.price-feat:not(:has(> .hot)) > .price-item:first-child {
  order: -1; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px 40px;
  align-items: center; padding: 38px; border-color: var(--s-accent); box-shadow: 0 16px 44px rgba(0, 0, 0, .14);
}
.price-feat > .hot:not(.hot ~ .hot) .price-num,
.price-feat:not(:has(> .hot)) > .price-item:first-child .price-num { font-size: 52px; }
.price-feat > .hot:not(.hot ~ .hot) h3,
.price-feat:not(:has(> .hot)) > .price-item:first-child h3 { font-size: 24px; }
.price-feat > .hot:not(.hot ~ .hot) ul,
.price-feat:not(:has(> .hot)) > .price-item:first-child ul { margin: 0; }
.price-feat > .hot:not(.hot ~ .hot) .btn,
.price-feat:not(:has(> .hot)) > .price-item:first-child .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 700px) {
  .price-feat > .hot:not(.hot ~ .hot),
  .price-feat:not(:has(> .hot)) > .price-item:first-child { grid-template-columns: 1fr; padding: 26px; }
  .price-feat > .hot:not(.hot ~ .hot) .price-num,
  .price-feat:not(:has(> .hot)) > .price-item:first-child .price-num { font-size: 42px; }
  .price-feat > .hot:not(.hot ~ .hot) .price-item-head,
  .price-feat:not(:has(> .hot)) > .price-item:first-child .price-item-head { text-align: left; }
}