/* =====================================================================
   Design tokens — «СОЛОДЪ / vp-app»
   Источник: Дизайн/Веб-дизайн по мобильной версии (1)/design_handoff_solod_store/README.md
   Брейкпоинт: 900px (единый).
   ===================================================================== */

:root {
  /* Surfaces / основной фон */
  --bg: #1a1211;
  --s1: #221917;
  --s2: #2a1f1c;
  --s3: #33261f;
  --s4: #40302a;

  /* Текст */
  --tx: #EDE0DB;
  --tx2: #C4AEA6;

  /* Линии / контуры */
  --line: #3a2b26;
  --outline: #9C8A84;

  /* Акценты */
  --acc: #E0A96D;
  --acc2: #C77B54;
  --price: #F1CBA0;
  --onacc: #2a1707;

  /* Статусы */
  --ok: #7FC98A;
  --danger: #E5776B;

  /* Скругления */
  --r: 16px;
  --r-sm: 10px;
  --r-md: 12px;
  --r-pill: 22px;

  /* Отступы контента */
  --pad: 16px;
  --heroH: 300px;
  --heroTitle: 26px;
  --heroSub: 14px;
  --heroPad: 20px;
  --h1: 26px;
  --catHeroH: 180px;
  --pdTitle: 26px;
  --pdCols: 1fr;
  --pdGap: 22px;
  --pdBottomPad: 96px;

  /* Сетки */
  --catCols: repeat(2, minmax(0, 1fr));
  --listCols: minmax(0, 1fr);
  --prodCols: repeat(2, minmax(0, 1fr));
  --storeCols: minmax(0, 1fr);

  /* Тени */
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, .45);

  /* Штриховка отключена: пустой градиент, чтобы CSS-references остались валидны. */
  --stripe: none;
  --stripe-acc: none;

  /* Оверлей модалок */
  --overlay: rgba(0, 0, 0, .55);
}

@media (min-width: 900px) {
  :root {
    --pad: 32px;
    --heroH: 380px;
    --heroTitle: 44px;
    --heroSub: 16px;
    --heroPad: 44px;
    --h1: 34px;
    --catHeroH: 240px;
    --pdTitle: 34px;
    --pdCols: 1fr 2fr;
    --pdGap: 40px;
    --pdBottomPad: 40px;
    --catCols: repeat(4, minmax(0, 1fr));
    --listCols: 260px minmax(0, 1fr);
    --prodCols: repeat(3, minmax(0, 1fr));
    --storeCols: 1.3fr minmax(0, 1fr);
  }
}
@media (min-width: 1400px) {
  :root {
    --prodCols: repeat(4, minmax(0, 1fr));
    --catCols: repeat(5, minmax(0, 1fr));
    --listCols: 280px minmax(0, 1fr);
  }
}
@media (min-width: 1800px) {
  :root {
    --prodCols: repeat(5, minmax(0, 1fr));
    --catCols: repeat(6, minmax(0, 1fr));
  }
}
@media (min-width: 2400px) {
  :root {
    --prodCols: repeat(6, minmax(0, 1fr));
  }
}