/*
 * IM TSAGHIK — базовые стили.
 *
 * Минимальный сброс и читаемость: без цветов, компоновки блоков и
 * декора — вёрстка дизайна впереди, в следующих планах. Единственная
 * задача этого файла — чтобы страница не отдавала 404 на собственную
 * таблицу стилей и уже сейчас оставалась читаемой и удобной для тапа
 * на мобильном.
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #1a1a1a;
    background: #fff;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
    margin: 0 0 1em;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
}

header,
main,
footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Кликабельная область не меньше 44×44 (ориентир WCAG 2.5.5). Сейчас
   это ссылки шапки: переключатели города и языка. */
header a {
    display: inline-block;
    min-height: 44px;
    padding: 10px 8px;
}

/* То же правило — для ссылок в подвале: политика конфиденциальности
   (всегда) и телефон (только когда контакты заполнены,
   SiteContext::contacts()). */
footer a {
    display: inline-block;
    min-height: 44px;
    padding: 10px 8px;
}

/* Каталог: сетка категорий, витрина товаров, варианты размера на
   карточке товара. Mobile-first — минимум колонок задаёт сама плитка
   через auto-fill, без медиазапросов. */
.categories,
.products,
.variants {
    display: grid;
    gap: 1rem;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.categories img,
.products img {
    width: 100%;
    height: auto;
    display: block;
}

.categories a,
.products a,
.variants a {
    display: block;
    min-height: 44px;
    padding: .5rem 0;
}

.products__price {
    display: block;
    font-weight: 600;
}

.cta__call {
    display: inline-block;
    min-height: 44px;
    padding: .75rem 1.25rem;
}

/* Форма заявки на карточке товара (задача 5 плана 5). Поля идут
   столбцом: mobile-first, и на десктопе многоколоночная форма из шести
   полей читается не быстрее. */
.order-form {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.order-form__delivery {
    color: #444;
}

.order-form__notice {
    color: #b91c1c;
    border: 1px solid #b91c1c;
    padding: .5rem .75rem;
    border-radius: 4px;
}

.order-form__fields {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.order-form__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.order-form label {
    font-weight: 600;
}

/* Правило проекта: поля и кнопка — не меньше 44px по высоте
   (тот же приём, что в admin.css). Ширина 100% — форма в один
   столбец на любом экране, полю незачем быть уже контейнера. */
.order-form input,
.order-form select,
.order-form textarea,
.order-form button {
    min-height: 44px;
    width: 100%;
    font: inherit;
    padding: .5rem .75rem;
}

.order-form textarea {
    min-height: 88px;
}

.order-form button {
    font-weight: 600;
    cursor: pointer;
}

.order-form [role="alert"] {
    display: block;
    color: #b91c1c;
    font-weight: 400;
}

/* Строка итога над кнопкой отправки: что и почём заказывают (находка 5
   финального ревью плана 5). Отделена рамкой сверху, а не блоком — это
   не отдельный экран, а последняя проверка перед нажатием. */
.order-form__summary {
    border-top: 1px solid #e5e7eb;
    padding-top: .75rem;
}

.order-form__summary-product {
    margin: 0 0 .5rem;
    font-weight: 600;
}

/* Пары «название — сумма» в две колонки: сумма прижата вправо, поэтому
   числа читаются столбиком и итог виден без чтения подписей. */
.order-form__summary dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    margin: 0;
}

.order-form__summary dt {
    color: #444;
}

.order-form__summary dd {
    margin: 0;
    text-align: right;
}

.order-form__summary-note {
    margin: .5rem 0 0;
    color: #444;
    font-size: .9rem;
}

/* Чекбокс согласия: сам квадратик маленький (стандарт браузера), но
   кликабельная область — весь <label> — не меньше 44px, иначе на
   мобильном по нему не попасть пальцем. */
.order-form__consent label {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    font-weight: 400;
}

.order-form__consent input[type="checkbox"] {
    width: 20px;
    min-height: 20px;
    flex-shrink: 0;
}

/* Поле-приманка: уводится из потока стилем, а не type="hidden" — такие
   поля боты, автозаполняющие форму по имени, пропускают, и приманка
   никого не ловит. Скрыто и от зрячего посетителя, и (вместе с
   aria-hidden в разметке) от скринридера. */
.order-form__trap {
    position: absolute;
    left: -9999px;
}