/* Точка сборки стилей.
   ВАЖНО: по спецификации CSS все @import должны идти ДО любых правил. */

/* ---- Токены и база ---- */
@import "./_variables.css";
@import "./_reset.css";
@import "./_breakpoints.css";

/* ---- Компоненты ---- */
@import "./components/_button.css";
@import "./components/_header.css";
@import "./components/_bottom-nav.css";
@import "./components/_nav.css";
@import "./components/_footer.css";
@import "./components/_section.css";
@import "./components/_product-card.css";
@import "./components/_breadcrumbs.css";
@import "./components/_catalog.css";
@import "./components/_product-page.css";
@import "./components/_cart.css";
@import "./components/_checkout.css";
@import "./components/_favorites.css";
@import "./components/_error-page.css";
@import "./components/_about.css";
@import "./components/_legal-page.css";
@import "./components/_account.css";
@import "./components/_auth.css";
@import "./components/_staff.css";
@import "./components/_staff-clients.css";
@import "./components/_service.css";

/* ---- Секции главной ---- */
@import "./components/_hero.css";
@import "./components/_featured.css";
@import "./components/_categories.css";
@import "./components/_advantages.css";
@import "./components/_reviews.css";
@import "./components/_obzor.css";
@import "./components/_steps.css";

/* ---------- База документа ---------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-bg);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Шапка прозрачная и абсолютная поверх hero — отступ сверху не нужен */
#main { padding-top: 0; }

/* На мобильном/планшете внизу — фиксированный bottom-nav, контенту нужен отступ, чтобы футер не перекрывался */
@media (max-width: 1023px) {
  #main { padding-bottom: 64px; }
  /* footer лежит ПОСЛЕ #main, поэтому отступ #main его не спасает: без клиренса на body
     последние 64px футера («Авторские права») навсегда скрыты под fixed bottom-nav
     даже на максимальной прокрутке (DOK-133). */
  body { padding-bottom: 64px; }
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.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;
}

/* Иконки (SVG-спрайт) — базовый размер */
.icon { width: 24px; height: 24px; display: inline-block; flex: 0 0 auto; }

/* Логотип DA — векторный знак из Figma (серая D + бирюзовая A со штрихом) */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo__img { display: block; height: 46px; width: auto; }
.logo--sm .logo__img { height: 38px; }