/*
 * Блок «Магазин Хузур» в правой колонке главной (24.08.2026). Виджет из
 * состава этапа 3, макета нет - сетка 2 колонки под ширину правой колонки
 * (256fr, около 250-300px), обложка + название, без цены и без описания.
 *
 * 🛑 Локальный сброс обязателен: блок живёт и на страницах старой вёрстки,
 * где общий base.css не подключён (то же правило, что у остальных блоков).
 */

.it-shop,
.it-shop * {
    box-sizing: border-box;
}

.it-shop__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-16);
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-shop__item {
    margin: 0;
    padding: 0;
    list-style: none;
}

.it-shop__item::before {
    content: none;
}

.it-shop__link {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    color: var(--c-text);
    text-decoration: none;
}

.it-shop__img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 4px;
    /* Белый, а не --c-sand-bg (тот был позаимствован у блока «Благородный
       Куръан» не по смыслу): часть обложек в каталоге магазина - обычные
       непрозрачные JPG на белом фоне, часть - вырезанные PNG с прозрачными
       полями. На белом фоне карточки оба вида смотрятся одинаково; на
       песочном прозрачные поля PNG давали заметную жёлтую рамку только
       у части книг (28.08.2026, вопрос Гузели). */
    background: var(--c-white);
}

.it-shop__title {
    color: var(--c-text);
    font-family: var(--font-main);
    font-size: var(--fs-14);
    font-weight: 500;
    line-height: 1.3;
    /* Название книги режем до трёх строк - карточка узкая, длинные заголовки
       иначе растянули бы сетку неровно. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.it-shop__link:hover .it-shop__title {
    color: var(--c-accent);
}

/* Кнопка «Показать другие» - сброс до вида ссылки `.it-feed__action`, тот же
   класс задаёт цвет и кегль, здесь только снимаем стандартный вид кнопки. */
.it-shop__more {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    cursor: pointer;
}