/* ============================================================
   main.css — Outdoor Design System entry point
   Import this one file in every HTML page.
   Change a component file → updates everywhere.
   ============================================================ */

@import url('tokens.css');

/* ── Atoms ── */
@import url('components/atoms/button.css');
@import url('components/atoms/input.css');
@import url('components/atoms/label.css');
@import url('components/atoms/select.css');
@import url('components/atoms/checkbox.css');
@import url('components/atoms/radio.css');
@import url('components/atoms/badge.css');
@import url('components/atoms/tag.css');
@import url('components/atoms/pill.css');
@import url('components/atoms/divider.css');
@import url('components/atoms/skeleton.css');
@import url('components/atoms/loader.css');
@import url('components/atoms/icon.css');
@import url('components/atoms/icon-button.css');
@import url('components/atoms/chip-toggle.css');

/* ── Molecules ── */
@import url('components/molecules/form-group.css');
@import url('components/molecules/qty.css');
@import url('components/molecules/breadcrumb.css');
@import url('components/molecules/pagination.css');
@import url('components/molecules/steps.css');
@import url('components/molecules/color-chip.css');
@import url('components/molecules/category-tile.css');
@import url('components/molecules/filter-toolbar.css');

/* ── Organisms ── */
@import url('components/organisms/header.css');
@import url('components/organisms/footer.css');
@import url('components/organisms/card.css');
@import url('components/organisms/modal.css');
@import url('components/organisms/m-nav.css');
@import url('components/organisms/table.css');

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: #ffffff;
  color: var(--c-text);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky footer: тянем страницу на всю высоту, футер всегда прижат книзу */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* main занимает всё свободное место — при коротком контенте футер уходит вниз */
main { flex: 1 0 auto; }

a { color: inherit; }
button { font-family: inherit; }

/* ── Глобальная типографика ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
}

/* Заголовки секций */
.section__title {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ── Layout ── */
.container {
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; align-items: center; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-10) var(--sp-6); }

/* ── Category card ── */
.category-card {
  position: relative;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
}
.category-card .img--category { background: var(--gray-200); }
.category-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.category-card__label { font-size: var(--text-body-m); line-height: var(--lh-body-m); font-weight: 400; color: var(--color-text); }

/* ── Image placeholders ── */
.img {
  background: var(--gray-200);
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  font-size: 0;
  border-radius: var(--r-xs);
  overflow: hidden;
}
.img--hero     { width: 100%; height: 560px; }
.img--category { width: 100%; aspect-ratio: 1/1; }
.img--card     { width: 100%; aspect-ratio: 4/3; }
.img--card-lg  { width: 100%; aspect-ratio: 1/1; }
.img--gallery  { width: 100%; aspect-ratio: 1/1; }
.img--thumb    { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r-sm); }
.img--cart     { width: 96px; height: 96px; flex-shrink: 0; border-radius: var(--r-sm); }

/* ── Section layout ── */
.section     { padding-block: var(--sp-20); }
.section--sm { padding-block: var(--sp-12); }
.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--sp-10);
}
/* Второе объявление .section__title — оно и выигрывает в каскаде, поэтому
   начертание держим здесь: H2 по макету светлый, 400, а не 600. */
.section__title {
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.section__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-text-3);
  text-decoration: none;
  transition: color 0.12s;
}
.section__link:hover { color: var(--c-text); }

/* ── Utilities ── */
.hidden  { display: none !important; }
.muted   { color: var(--c-text-3); }
.bold    { font-weight: 700; }
.medium  { font-weight: 500; }

.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.tracking { letter-spacing: -0.02em; }

.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.gap-6 { gap: var(--sp-6); }
.gap-8 { gap: var(--sp-8); }

.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.pt-6 { padding-top: var(--sp-6); }
.pb-6 { padding-bottom: var(--sp-6); }

.w-full { width: 100%; }
.flex-1 { flex: 1; }
.center { text-align: center; }

/* Link utilities */
.link-plain { text-decoration: none; color: inherit; }
.link-muted  { color: var(--c-text-3); text-decoration: none; }
.link-muted:hover { color: var(--c-text); }

/* ── Responsive — Tablet (769px–1024px) ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding-inline: var(--sp-5); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-5); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
  .header__nav { gap: var(--sp-1); }
  .section { padding-block: var(--sp-16); }
}

/* ── Responsive — Mobile (≤768px) ── */
@media (max-width: 768px) {
  .container { padding-inline: var(--sp-4); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8) var(--sp-4); }
  .header__nav { display: none; }
  .hamburger   { display: flex; }
  .section     { padding-block: var(--sp-12); }
  .section--sm { padding-block: var(--sp-8); }
  .section__head  { margin-bottom: var(--sp-6); }
  .section__title { font-size: var(--text-h3); line-height: var(--lh-h3); }
  .img--hero { height: 260px; }
}

/* ── Responsive — Extra-small (≤480px) ── */
@media (max-width: 480px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
}