/* ===== Fonts: Inter ===== */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-cyrillic_latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter/inter-v20-cyrillic_latin-600.woff2') format('woff2');
}

/* ===== Base / Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden; /* страховка, но причину всё равно найдём */
  -webkit-text-size-adjust: 100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Медиа никогда не должны раздвигать страницу */
img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* Ссылки/кнопки */
a { color: inherit; }
button, input { font: inherit; }



:root{
  --page-gutter: 12px;
}

@media (min-width: 390px){
  :root{ --page-gutter: 16px; }
}

.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}









.breadcrumbs {
    font-size: 14px;
    margin: 0px 0;
}

.breadcrumbs ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.breadcrumbs li {
    margin-right: 6px;
}

.breadcrumbs li::after {
    content: "›";
    margin-left: 6px;
}

.breadcrumbs li:last-child::after {
    content: "";
}

.breadcrumbs a {
    text-decoration: none;
    color: #0077cc;
}

.breadcrumbs span {
    color: #555;
}

/* ======================================================================
   CATEGORY FILTERS (Off-canvas) — Anti-flicker / A11y sync
   ----------------------------------------------------------------------
   Зачем это нужно:
   - Убирает “мерцание” панели фильтров при загрузке/переходах (FOUC),
     когда HTML успевает отрисоваться до того, как JS выставит классы/состояние.
   - Синхронизирует видимость и кликабельность с aria-hidden (доступность).

   Важно:
   - JS (assets/js/category.js) управляет aria-hidden на #filtersPanel и #filtersOverlay.
   - Эти правила должны жить в style.css (глобально), чтобы применяться мгновенно,
     ещё до загрузки category.css и выполнения JS.
   ====================================================================== */

/* Пока aria-hidden="true" — панель реально невидима и не кликабельна */
#filtersPanel[aria-hidden="true"] {
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-105%);
}

/* Когда показываем — возвращаем клики */
#filtersPanel[aria-hidden="false"] {
  visibility: visible;
  pointer-events: auto;
}

/* Оверлей: скрыт */
#filtersOverlay[aria-hidden="true"] {
  opacity: 0;
  pointer-events: none;
}

/* Оверлей: показан */
#filtersOverlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

/* ======================================================================
   Static / Content pages — typography + readable layout
   ====================================================================== */

:root{
  --text: #111;
  --muted: #555;
  --border: #e7e7e7;
  --surface: #fff;
  --surface-2: #fafafa;
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);

  --content-max: 860px;   /* ширина “читаемого текста” */
  --content-gap: 14px;
}

body{
  color: var(--text);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

/* Универсальный блок страницы (под header/footer) */
.page{
  padding: 16px 0 28px;
}

@media (min-width: 768px){
  .page{ padding: 22px 0 40px; }
}

/* Контентный контейнер (чуть уже, чтобы читать было комфортно) */
.content{
  max-width: var(--content-max);
}

/* Карточка для статических страниц */
.content-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

@media (min-width: 768px){
  .content-card{ padding: 22px 24px; }
}

/* Заголовки */
.content h1{
  font-size: 22px;
  line-height: 1.2;
  margin: 6px 0 14px;
}

.content h2{
  font-size: 18px;
  line-height: 1.25;
  margin: 22px 0 10px;
}

.content h3{
  font-size: 16px;
  margin: 18px 0 8px;
}

/* Текст */
.content p{
  margin: 10px 0;
  color: var(--text);
}

.content .muted{
  color: var(--muted);
}

/* Списки */
.content ul, .content ol{
  margin: 10px 0 10px 20px;
  padding: 0;
}

.content li{ margin: 6px 0; }

/* Разделители */
.content hr{
  border: 0;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}

/* Небольшие инфо-блоки */
.note{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 12px;
  margin: 14px 0;
}

/* Таблички “как FAQ” */
.faq{
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.faq-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface);
}

.faq-q{
  font-weight: 600;
  margin: 0 0 6px;
}

.faq-a{
  margin: 0;
  color: var(--muted);
}

/* Ссылки внутри контента */
.content a{
  color: #0077cc;
  text-decoration: none;
}
.content a:hover{
  text-decoration: underline;
}

/* ===== Cart fly ("вжух в корзинку") ===== */
.cart-fly{
  position: fixed;
  z-index: 9999;
  transform: translate(0,0) scale(1);
  opacity: 1;

  padding: 10px 12px;
  border-radius: 10px;

  background: #22c55e; /* зелёный */
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;

  pointer-events: none;

  /* плавный "улёт" */
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 600ms ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* ===========================
   Cart buttons (pastel unified)
   =========================== */

:root{
  /* "В корзину" — строгий зелёный (emerald/forest) */
  --btn-primary-bg: #1f8f5f;
  --btn-primary-bd: #166d49;
  --btn-primary-tx: #ffffff;

  /* "В корзине" — оранжево-золотой */
  --btn-incart-bg:  #f97316;
  --btn-incart-bd:  #ea580c;
  --btn-incart-tx:  #ffffff;

  /* "Удалить" — белая с чёрной рамкой */
  --btn-danger-bg:  #ffffff;
  --btn-danger-bd:  #222222;
  --btn-danger-tx:  #111111;
}

/* базовая плавность для всех "корзинных" кнопок */
.btnCartToggle,
.btnCartRemove{
  transition: transform .06s ease, background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}

/* 1) "В корзину" (когда НЕ в корзине) */
.btnCartToggle:not(.is-in-cart){
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bd);
  color: var(--btn-primary-tx);
}

/* 2) "В корзине" — переопределяем твой яркий оранжевый на пастель */
.p-btn.is-in-cart.btnCartToggle,
.btnCartToggle.is-in-cart{
  background: var(--btn-incart-bg);
  border-color: var(--btn-incart-bd);
  color: var(--btn-incart-tx);
}

/* 3) "Удалить" — пастель, без резкого красного */
.btnCartRemove{
  margin-left: 8px;
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-bd);
  color: var(--btn-danger-tx);
}

/* 4) Актив/тап — только лёгкое затемнение (никакого “флэша”) */
.btnCartToggle:active,
.btnCartRemove:active{
  transform: translateY(1px);
  filter: brightness(0.97);
}

/* 5) Disabled */
.btnCartToggle:disabled,
.btnCartRemove:disabled{
  opacity: .45;
  cursor: default;
  filter: none;
}

/* 6) Фокус для клавиатуры */
.btnCartToggle:focus-visible,
.btnCartRemove:focus-visible{
  outline: 2px solid rgba(0,0,0,.18);
  outline-offset: 2px;
}