/* Атрибут hidden должен прятать элемент всегда.
   Правило браузера [hidden] { display: none } живёт в его таблице стилей,
   поэтому любой наш селектор с display перебивает его по весу: блок с
   display: grid оставался видимым, даже получив hidden. Так и случилось
   с полями области и города при самовывозе. Ставим один раз глобально,
   чтобы не выискивать такие места по одному. */
[hidden] { display: none !important; }

/* Утилиты контура v2: типографика, контейнер, сетка.
   Глобальный сброс вынесен в reset.css — он безопасен не на всех страницах.
   Bootstrap, main.css, add.css и admin.css в v2 не подключаются — контур самодостаточен. */

/* Скрытие, доступное скринридерам */
.vp-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Типографика --- */

.vp-h1 {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    font-size: var(--vp-fs-h1);
    line-height: var(--vp-lh-h1);
}

.vp-h2 {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
}

.vp-h3 {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    font-size: var(--vp-fs-h3);
    line-height: var(--vp-lh-h3);
}

.vp-h4 {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    font-size: var(--vp-fs-h4);
    line-height: var(--vp-lh-h4);
}

/* «1000+» в секции категорий */
.vp-display {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    font-size: var(--vp-fs-display);
    line-height: var(--vp-lh-display);
    color: var(--vp-brand);
}

.vp-text-lg { font-size: var(--vp-fs-lg); line-height: var(--vp-lh-lg); }
.vp-text-md { font-size: var(--vp-fs-md); line-height: var(--vp-lh-md); }
.vp-text-sm { font-size: var(--vp-fs-sm); line-height: var(--vp-lh-sm); }
.vp-text-xs { font-size: var(--vp-fs-xs); line-height: var(--vp-lh-xs); }

.vp-medium  { font-weight: var(--vp-fw-medium); }
.vp-brand   { color: var(--vp-brand); }
.vp-muted   { color: var(--vp-text-soft); }

/* Заголовки секций набраны капителью в макете */
.vp-section-title {
    font-family: var(--vp-font-head);
    font-weight: var(--vp-fw-normal);
    font-size: var(--vp-fs-h2);
    line-height: var(--vp-lh-h2);
    text-transform: uppercase;
    text-align: center;
}

/* --- Контейнер и секции --- */

.vp-container {
    width: 100%;
    max-width: calc(var(--vp-container) + var(--vp-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--vp-gutter);
}

.vp-section {
    padding-block: var(--vp-section-y);
}

.vp-section--cream { background: var(--vp-bg-cream); }
.vp-section--sand  { background: var(--vp-bg-sand); }
.vp-section--beige { background: var(--vp-bg-beige); }

/* --- Сетка --- */

.vp-grid { display: grid; gap: var(--vp-space-6); }

.vp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.vp-grid--6 { grid-template-columns: repeat(6, 1fr); }
.vp-grid--7 { grid-template-columns: repeat(7, 1fr); }

/* --- Адаптив ---
   Макет даёт только 390 и 1440. Промежуточные ширины не нарисованы,
   поэтому раскладка сжимается по здравому смыслу; проверяется на шаге 11. */

@media (max-width: 1023px) {
    :root {
        --vp-gutter: 32px;
        --vp-fs-h1: 40px;  --vp-lh-h1: 46px;
        --vp-fs-display: 56px; --vp-lh-display: 58px;
    }
    .vp-grid--6, .vp-grid--7 { grid-template-columns: repeat(3, 1fr); }
    .vp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    :root {
        --vp-gutter: var(--vp-gutter-mobile);
        --vp-section-y: var(--vp-section-y-mobile);
        --vp-fs-h1: 32px;  --vp-lh-h1: 38px;
        --vp-fs-h2: 24px;  --vp-lh-h2: 30px;
        --vp-fs-h3: 20px;  --vp-lh-h3: 26px;
        --vp-fs-display: 48px; --vp-lh-display: 50px;
    }
    .vp-grid { gap: var(--vp-space-4); }
    .vp-grid--3, .vp-grid--4, .vp-grid--6, .vp-grid--7 { grid-template-columns: repeat(2, 1fr); }
}