/* ============================================================
   «Бизнес ПК» — СТРАНИЦА КАТАЛОГА «ПЕРИФЕРИЯ»
   Карточки с вариантами товара. Общие стили карточки — в card.css.
   Подключать ПОСЛЕ: theme-mono.css -> ui/* -> site.css
                      -> card.css -> periphery.css
   ============================================================ */

body.periphery main { padding-bottom: 110px; }

/* ---------- Дельта изображения: выше и крупнее плейсхолдер ---------- */
body.periphery .card-media { height: 170px; }

body.periphery .card-ph svg { width: 108px; }

/* ---------- Низ карточки как у ПК: те же отступы (.card-content
   из card.css), компактно, без растягивания ---------- */
body.periphery .card-variant {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
body.periphery .per-foot {
    order: 2;
    margin-top: auto;
    padding-top: 16px;
}

.per-variant-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ---------- Низ карточки: цена + кнопка ---------- */
.per-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 18px;
}

.per-price {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--black);
    white-space: nowrap;
}

/* ---------- Адаптивность (вид кнопок — из канона ui/buttons.css) ---------- */
@media (max-width: 640px) {
    .per-foot { flex-wrap: wrap; }
    .btn--block { flex: 1 1 auto; }
}