/* Каталог смартфонів і порівняння. Лише власні класи sp-*, глобальні стилі теми не змінюються.
   Кольори й шрифт успадковуються від теми. */

.sp-brand { margin: 0 0 1em; }
.sp-photo { max-width: 100%; height: auto; }
.sp-source { font-size: .875em; opacity: .75; }

/* Таблиці */
.sp-table { width: 100%; border-collapse: collapse; table-layout: auto; margin: 1em 0; }
.sp-table th,
.sp-table td { padding: .5em .75em; text-align: left; vertical-align: top; border: 1px solid rgba(128, 128, 128, .3); overflow-wrap: anywhere; }
.sp-table tbody th[scope="row"] { width: 38%; font-weight: 600; }
.sp-table__group { background: rgba(128, 128, 128, .12); }
.sp-table--compare tbody th[scope="row"] { width: 28%; }
.sp-table--compare thead th { width: 36%; }
.sp-diff td { font-weight: 600; }

/* Таблиця варіантів: на вузьких екранах прокручується всередині себе, а не розширює сторінку */
.sp-table--variants { display: block; overflow-x: auto; }

/* Бренди та фільтр */
.sp-brands ul,
.sp-list,
.sp-grid { list-style: none; margin: 0; padding: 0; }
.sp-brands ul { display: flex; flex-wrap: wrap; gap: .5em 1.25em; margin-bottom: 1em; }
.sp-brands__count { opacity: .6; font-size: .875em; }

.sp-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75em 1em; margin-bottom: 1.5em; }
.sp-filter label { display: flex; flex-direction: column; gap: .25em; font-size: .875em; }

/* Сітка карток */
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25em; margin-bottom: 1.5em; }
.sp-card__img { display: block; margin-bottom: .5em; }
.sp-card__img img { display: block; max-width: 100%; height: auto; }
.sp-card__title { margin: 0 0 .35em; font-size: 1.05em; }
.sp-card__specs { margin: 0; padding: 0; list-style: none; font-size: .875em; opacity: .8; }

/* Список порівнянь */
.sp-list li { padding: .6em 0; border-bottom: 1px solid rgba(128, 128, 128, .25); }
.sp-list__models { display: block; font-size: .875em; opacity: .7; }

@media (max-width: 480px) {
    .sp-table th,
    .sp-table td { padding: .4em .5em; font-size: .9em; }
}