/* ============================================================
   СТАЛЬЕРО — Кастомный CSS для Тильды
   Вставить в: Настройки сайта → Дополнительно → Свой CSS
   Версия: 1.0 · Май 2026
   ============================================================ */


/* ── 0. ШРИФТЫ ──────────────────────────────────────────────
   Три гарнитуры дизайн-системы через Google Fonts:
   · El Messiri       — бренд, названия изделий
   · Cormorant Garamond — редакционные заголовки, цены
   · Cormorant SC     — малые прописные (секционные эйбрау)
   · Jost             — навигация, тело, кнопки
   ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cormorant+SC:wght@300;400&family=El+Messiri:wght@400;500;600;700&family=Jost:wght@300;400;500&display=swap');


/* ── 1. ПЕРЕМЕННЫЕ ПАЛИТРЫ ──────────────────────────────────
   Полностью соответствуют токенам дизайн-системы Стальеро.
   Используются во всех блоках ниже.
   ─────────────────────────────────────────────────────────── */
:root {
  --st-espresso:      #2B1A0E;   /* тёмный фон, металл */
  --st-espresso-mid:  #3D2415;   /* чуть светлее espresso */
  --st-gold:          #C5A05A;   /* акцент — лазерный рез, латунь */
  --st-gold-light:    #D9BC7E;   /* hover-состояние золота */
  --st-gold-pale:     #EDD89A;   /* выделение текста */
  --st-wine:          #7A2E3C;   /* текстильная линия */
  --st-linen:         #F0EBE1;   /* тёплый крем — лён */
  --st-ivory:         #FAF7F2;   /* страница, карточки */
  --st-taupe:         #8B7B6E;   /* вторичный текст, captions */
  --st-graphite:      #2C2420;   /* основной тёмный текст */

  --st-border-gold:   rgba(197, 160, 90, 0.3);
  --st-border-hair:   rgba(0, 0, 0, 0.08);
  --st-shadow-card:   0 2px 4px rgba(43,26,14,.06), 0 12px 32px rgba(43,26,14,.10);
  --st-shadow-lift:   0 4px 8px rgba(43,26,14,.08), 0 24px 48px rgba(43,26,14,.16);
  --st-ease:          cubic-bezier(0.4, 0, 0.2, 1);
}


/* ── 2. СТРАНИЦА — ФОН И БАЗОВЫЙ ТЕКСТ ─────────────────────
   Тёплый айвори вместо белого. Jost Light как основной шрифт.
   ─────────────────────────────────────────────────────────── */
body,
.t-body {
  background-color: var(--st-ivory) !important;
  color: var(--st-graphite) !important;
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Выделение текста — золотой highlight */
::selection {
  background-color: var(--st-gold-pale);
  color: var(--st-graphite);
}

/* Фокус — золотой outline вместо синего */
:focus-visible {
  outline: 2px solid var(--st-gold) !important;
  outline-offset: 2px !important;
}


/* ── 3. ЗАГОЛОВКИ ───────────────────────────────────────────
   h1 — Cormorant Garamond Light, тёмный
   h2 — Cormorant Garamond Italic, золотой
   h3 — Cormorant SC, малые прописные
   ─────────────────────────────────────────────────────────── */

/* H1 — секционные заголовки страниц */
h1,
.t-title,
.t-cover__title,
.tn-atom__font-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  color: var(--st-graphite) !important;
}

/* H2 — italic золотой подзаголовок */
h2,
.t-descr,
.t-cover__subtitle,
.tn-atom__font-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: italic !important;
  line-height: 1.25 !important;
  color: var(--st-gold) !important;
}

/* H3 — Cormorant SC, малые прописные */
h3,
.tn-atom__font-h3 {
  font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 300 !important;
  font-style: normal !important;
  letter-spacing: 0.12em !important;
  color: var(--st-graphite) !important;
}

/* H4 — Jost Medium uppercase */
h4,
.tn-atom__font-h4 {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--st-taupe) !important;
}

/* Основной текст параграфов */
p,
.t-text,
.t-card__descr,
.tn-atom__font-text {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300 !important;
  line-height: 1.75 !important;
  color: var(--st-graphite) !important;
}

/* Горизонтальный разделитель — тонкая золотая линия */
hr,
.t-hr {
  border: none !important;
  height: 1px !important;
  background-color: var(--st-gold) !important;
  opacity: 0.35 !important;
}


/* ── 4. НАВИГАЦИЯ / ШАПКА ───────────────────────────────────
   Фон — espresso, текст — linen, hover и active — gold.
   Тонкая золотая черта снизу вместо серой тильдовской.
   ─────────────────────────────────────────────────────────── */
.t-header {
  background-color: var(--st-espresso) !important;
  border-bottom: 1px solid rgba(197, 160, 90, 0.2) !important;
}

/* Ссылки в навигации */
.t-menu__link,
.t-header__menu-link,
.t-header__menu li a {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--st-linen) !important;
  opacity: 1 !important;
  transition: color 220ms var(--st-ease) !important;
}

/* Hover и активный пункт */
.t-menu__link:hover,
.t-header__menu-link:hover,
.t-menu__link_active,
.t-header__menu-link_active,
.t-menu__link.active {
  color: var(--st-gold) !important;
  opacity: 1 !important;
}

/* Логотип — белая версия (инверсия) */
.t-header__logo img,
.t-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Иконка бургера */
.t-header__burger .t-header__burger-line {
  background-color: var(--st-linen) !important;
}

/* Мобильное меню — подложка */
.t-header__menu-mobile-overlay,
.t-header__menu-mobile {
  background-color: var(--st-espresso-mid) !important;
}

.t-header__menu-mobile .t-menu__link {
  color: var(--st-linen) !important;
  border-bottom-color: rgba(197, 160, 90, 0.15) !important;
}


/* ── 5. КНОПКИ ──────────────────────────────────────────────
   Primary: золотой фон (#C5A05A), тёмный текст, r=8px
   Hover: чуть светлее + лёгкий translateY
   ─────────────────────────────────────────────────────────── */
.t-btn,
.t-btn_md,
.t-btn_lg,
.t-btn_sm,
.t-submit,
input[type="submit"],
button[type="submit"] {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background-color: var(--st-gold) !important;
  color: var(--st-espresso) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 14px 28px !important;
  box-shadow: none !important;
  transition: background-color 220ms var(--st-ease),
              transform 220ms var(--st-ease) !important;
}

.t-btn:hover,
.t-btn_md:hover,
.t-btn_lg:hover,
.t-btn_sm:hover,
.t-submit:hover,
input[type="submit"]:hover {
  background-color: var(--st-gold-light) !important;
  color: var(--st-espresso) !important;
  transform: translateY(-1px) !important;
}

.t-btn:active,
.t-submit:active {
  transform: translateY(0) !important;
}

/* Кнопки магазина T-Store */
.t-store__btn-buy,
.t-store__btn-cart,
.t-store__card-btn {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background-color: var(--st-gold) !important;
  color: var(--st-espresso) !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background-color 220ms var(--st-ease) !important;
}

.t-store__btn-buy:hover,
.t-store__btn-cart:hover {
  background-color: var(--st-gold-light) !important;
  color: var(--st-espresso) !important;
}


/* ── 6. КАРТОЧКИ ТОВАРОВ ────────────────────────────────────
   Тонкая золотая рамка (30% opacity), r=2px.
   Hover: shadow-lift + translateY(-2px) + рамка ярче.
   Название — El Messiri. Цена — Cormorant 600.
   ─────────────────────────────────────────────────────────── */
.t-store__card,
.t696__card,
.t-card,
.t-col .t-col__items {
  background-color: var(--st-ivory) !important;
  border: 0.5px solid var(--st-border-gold) !important;
  border-radius: 2px !important;
  box-shadow: var(--st-shadow-card) !important;
  transition: transform 220ms var(--st-ease),
              box-shadow 220ms var(--st-ease),
              border-color 220ms var(--st-ease) !important;
  overflow: hidden !important;
}

.t-store__card:hover,
.t696__card:hover,
.t-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--st-shadow-lift) !important;
  border-color: rgba(197, 160, 90, 0.6) !important;
}

/* Название товара в карточке — El Messiri */
.t-store__card-title,
.t-card__title,
.t696__card-title {
  font-family: 'El Messiri', 'Times New Roman', serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--st-graphite) !important;
}

/* Цена — Cormorant 600 */
.t-store__card-price,
.t-store__card-cost,
.t696__card-price,
.t-card__price {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 22px !important;
  letter-spacing: 0.01em !important;
  color: var(--st-graphite) !important;
}

/* Описание в карточке */
.t-store__card-descr,
.t696__card-descr,
.t-card__descr {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  color: var(--st-taupe) !important;
}

/* Зона изображения карточки */
.t-store__card-image,
.t696__card-image {
  background-color: var(--st-linen) !important;
}


/* ── 7. ФОРМЫ ───────────────────────────────────────────────
   Инпуты на ivory-фоне, gold-акцент на focus.
   Лейблы — Jost Medium uppercase.
   ─────────────────────────────────────────────────────────── */
.t-input,
.t-sform__inputbox input,
.t-sform__inputbox textarea,
.t-sform__inputbox select,
.t-form__inputbox input,
.t-form__inputbox textarea {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-size: 15px !important;
  background-color: var(--st-ivory) !important;
  color: var(--st-graphite) !important;
  border: 1px solid rgba(43, 26, 14, 0.15) !important;
  border-radius: 4px !important;
  transition: border-color 220ms var(--st-ease),
              box-shadow 220ms var(--st-ease) !important;
}

.t-input:focus,
.t-sform__inputbox input:focus,
.t-sform__inputbox textarea:focus,
.t-form__inputbox input:focus {
  border-color: var(--st-gold) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(197, 160, 90, 0.15) !important;
}

/* Лейблы полей */
.t-sform__inputbox label,
.t-form__inputbox label,
.t-input-label {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--st-taupe) !important;
}


/* ── 8. СЕКЦИИ НА ТЁМНОМ ФОНЕ ───────────────────────────────
   Для секций с data-bgcolor="#2B1A0E" — тексты становятся
   linen, h2 gold. Применяется автоматически по атрибуту.
   ─────────────────────────────────────────────────────────── */
[data-bgcolor="#2B1A0E"],
[data-bgcolor="#3D2415"],
[data-bgcolor="#2b1a0e"],
[data-bgcolor="#3d2415"] {
  background-color: var(--st-espresso) !important;
}

[data-bgcolor="#2B1A0E"] .t-title,
[data-bgcolor="#2B1A0E"] .t-descr,
[data-bgcolor="#2B1A0E"] .t-text,
[data-bgcolor="#2B1A0E"] p,
[data-bgcolor="#3D2415"] .t-title,
[data-bgcolor="#3D2415"] .t-descr,
[data-bgcolor="#3D2415"] .t-text,
[data-bgcolor="#3D2415"] p,
[data-bgcolor="#2b1a0e"] .t-title,
[data-bgcolor="#2b1a0e"] p,
[data-bgcolor="#3d2415"] .t-title,
[data-bgcolor="#3d2415"] p {
  color: var(--st-linen) !important;
}

[data-bgcolor="#2B1A0E"] h2,
[data-bgcolor="#2B1A0E"] .t-descr,
[data-bgcolor="#3D2415"] h2,
[data-bgcolor="#3D2415"] .t-descr,
[data-bgcolor="#2b1a0e"] h2,
[data-bgcolor="#3d2415"] h2 {
  color: var(--st-gold) !important;
}


/* ── 9. ФУТЕР ───────────────────────────────────────────────
   Фон — espresso, основной текст — linen 65%.
   Заголовки колонок — gold uppercase Jost.
   Ссылки — hover к gold.
   ─────────────────────────────────────────────────────────── */
.t-footer,
.t-footer__container {
  background-color: var(--st-espresso) !important;
  color: rgba(240, 235, 225, 0.65) !important;
}

/* Заголовки колонок футера */
.t-footer h1,
.t-footer h2,
.t-footer h3,
.t-footer h4,
.t-footer .t-title,
.t-footer .t-name {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--st-gold) !important;
}

/* Текст и ссылки в футере */
.t-footer p,
.t-footer .t-text,
.t-footer li,
.t-footer a,
.t-footer .t-menu__link {
  font-family: 'Jost', system-ui, sans-serif !important;
  font-weight: 300 !important;
  font-size: 14px !important;
  color: rgba(240, 235, 225, 0.65) !important;
  text-decoration: none !important;
  transition: color 220ms var(--st-ease) !important;
}

.t-footer a:hover,
.t-footer .t-menu__link:hover {
  color: var(--st-gold) !important;
  opacity: 1 !important;
}

/* Нижняя строка копирайта */
.t-footer__copy,
.t-footer .t-copy {
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(240, 235, 225, 0.4) !important;
  border-top: 1px solid rgba(240, 235, 225, 0.1) !important;
  padding-top: 24px !important;
  margin-top: 40px !important;
  
  .t-store__card-descr {
  color: #8b7b6e !important;
}
}
/* Описание в попапе товара ST300 */
.t-store__product-popup-descr,
.t-store__product-popup-descr p {
  color: #8b7b6e !important;
  font-size: 18px !important;
}
.t754__descr.t-descr {
  color: #8b7b6e !important;
  font-size: 18px !important;
  font-style: normal !important;
}
.t-menu-base__imglogo,
.t-menu-base__imglogo img {
  width: 150px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}
.t338__title {
  color: #F0EBE1 !important;
}
/* Заголовки страниц изделий */
.t-title {
  font-family: 'Cormorant Garamond', serif !important;
}

/* Подзаголовки и описания */
.t-descr, .t-text {
  font-family: 'Jost', sans-serif !important;
}
/* Цена на странице товара */
.t-store-product-price,
.t-price {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 42px !important;
  color: #C5A05A !important;
}

/* Подписи и editorial-текст */
.t-descr {
  font-family: 'Cormorant Garamond', serif !important;
}
/* Заголовок страницы изделия */
.t017__title,
.t-title {
  color: #F0EBE1 !important;
}

/* Подзаголовок */
.t017__descr,
.t-descr {
  color: #8B7B6E !important;
}