/* Базовая раскладка и типографика Ostrov: сброс, контейнер, сетка, утилиты
   отступов и типографические размеры. Значения только var(--*) — никаких
   литеральных цветов; tokens.css — единственный файл с hex.

   Брейкпоинты (docs/design/analysis/01-brand-ds-header-footer.md):
   mobile ≤767 — 2 колонки, поля 16, gap 12;
   tablet 768–1023 — 3 колонки, поля 24, gap 16;
   desktop ≥1024 — 12 колонок, контент 1280, поля 32, gap 24. */

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

body {
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text); font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
/* Organic задаёт a { color: var(--color-accent) } — на фоне Organic (крем)
   контраст 4.5+; на --color-bg темы sage (светлый шалфей) это всего 3.34:1
   (axe: color-contrast serious). Все финальные макеты (Home/Index.dc.html и
   т.д.) поверх темы sage переопределяют ссылки на accent-700/800 — тот же
   акцент, тёмным шагом рэмпа, ради контраста на новом фоне. */
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — контейнер и сетка — */
.container {
  width: 100%; max-width: 1280px; margin-inline: auto;
  padding-inline: var(--space-4); /* 16px мобильный */
}
@media (min-width: 768px) {
  .container { padding-inline: 24px; }
}
@media (min-width: 1024px) {
  .container { padding-inline: 32px; }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, 1fr); gap: 24px; }
}

/* — типографика: H1/H2/H3 из Design System.dc.html, H3 используется и для
   цен; название товара — Figtree 600, никогда Caprasimo (болгарские
   названия длинные). — */
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
@media (min-width: 768px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
}

.product-title {
  font-family: var(--font-body); font-weight: 600; font-size: 14px; line-height: 1.3;
}
@media (min-width: 768px) {
  .product-title { font-size: 16px; }
}

/* Утилиты отступов на шкале --space-*. */
.m-0 { margin: 0; }
.p-0 { padding: 0; }
.m-1 { margin: var(--space-1); }
.mt-1 { margin-top: var(--space-1); }
.mr-1 { margin-right: var(--space-1); }
.mb-1 { margin-bottom: var(--space-1); }
.ml-1 { margin-left: var(--space-1); }
.mx-1 { margin-left: var(--space-1); margin-right: var(--space-1); }
.my-1 { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.m-2 { margin: var(--space-2); }
.mt-2 { margin-top: var(--space-2); }
.mr-2 { margin-right: var(--space-2); }
.mb-2 { margin-bottom: var(--space-2); }
.ml-2 { margin-left: var(--space-2); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.my-2 { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.m-3 { margin: var(--space-3); }
.mt-3 { margin-top: var(--space-3); }
.mr-3 { margin-right: var(--space-3); }
.mb-3 { margin-bottom: var(--space-3); }
.ml-3 { margin-left: var(--space-3); }
.mx-3 { margin-left: var(--space-3); margin-right: var(--space-3); }
.my-3 { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.m-4 { margin: var(--space-4); }
.mt-4 { margin-top: var(--space-4); }
.mr-4 { margin-right: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.ml-4 { margin-left: var(--space-4); }
.mx-4 { margin-left: var(--space-4); margin-right: var(--space-4); }
.my-4 { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.m-6 { margin: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }
.mr-6 { margin-right: var(--space-6); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-6 { margin-left: var(--space-6); }
.mx-6 { margin-left: var(--space-6); margin-right: var(--space-6); }
.my-6 { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.m-8 { margin: var(--space-8); }
.mt-8 { margin-top: var(--space-8); }
.mr-8 { margin-right: var(--space-8); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-8 { margin-left: var(--space-8); }
.mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
.my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.p-1 { padding: var(--space-1); }
.pt-1 { padding-top: var(--space-1); }
.pr-1 { padding-right: var(--space-1); }
.pb-1 { padding-bottom: var(--space-1); }
.pl-1 { padding-left: var(--space-1); }
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.p-2 { padding: var(--space-2); }
.pt-2 { padding-top: var(--space-2); }
.pr-2 { padding-right: var(--space-2); }
.pb-2 { padding-bottom: var(--space-2); }
.pl-2 { padding-left: var(--space-2); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.p-3 { padding: var(--space-3); }
.pt-3 { padding-top: var(--space-3); }
.pr-3 { padding-right: var(--space-3); }
.pb-3 { padding-bottom: var(--space-3); }
.pl-3 { padding-left: var(--space-3); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.p-4 { padding: var(--space-4); }
.pt-4 { padding-top: var(--space-4); }
.pr-4 { padding-right: var(--space-4); }
.pb-4 { padding-bottom: var(--space-4); }
.pl-4 { padding-left: var(--space-4); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.p-6 { padding: var(--space-6); }
.pt-6 { padding-top: var(--space-6); }
.pr-6 { padding-right: var(--space-6); }
.pb-6 { padding-bottom: var(--space-6); }
.pl-6 { padding-left: var(--space-6); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.p-8 { padding: var(--space-8); }
.pt-8 { padding-top: var(--space-8); }
.pr-8 { padding-right: var(--space-8); }
.pb-8 { padding-bottom: var(--space-8); }
.pl-8 { padding-left: var(--space-8); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* Скрыт визуально, читается скринридером — для меток полей без видимого
   текста (catalog.css, price-инпуты сайдбара фасетов). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

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