/* ============================================================
   СТАЛЬЕРО — Кастомный CSS для Тильды
   Версия: 1.2 · Июнь 2026
   Типографика управляется настройками блоков в Тильде.
   CSS отвечает только за элементы, не настраиваемые через UI.
   ============================================================ */


/* ── 1. ПЕРЕМЕННЫЕ ПАЛИТРЫ ────────────────────────────────── */
:root {
  --st-espresso:      #2B1A0E;
  --st-espresso-mid:  #3D2415;
  --st-gold:          #C5A05A;
  --st-gold-light:    #D9BC7E;
  --st-gold-pale:     #EDD89A;
  --st-wine:          #7A2E3C;
  --st-linen:         #F0EBE1;
  --st-ivory:         #FAF7F2;
  --st-taupe:         #8B7B6E;
  --st-graphite:      #2C2420;

  --st-border-gold:   rgba(197, 160, 90, 0.3);
  --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. БАЗА СТРАНИЦЫ ─────────────────────────────────────── */
body,
.t-body {
  background-color: var(--st-ivory) !important;
}

::selection {
  background-color: var(--st-gold-pale);
  color: var(--st-graphite);
}

:focus-visible {
  outline: 2px solid var(--st-gold) !important;
  outline-offset: 2px !important;
}

hr,
.t-hr {
  border: none !important;
  height: 1px !important;
  background-color: var(--st-gold) !important;
  opacity: 0.35 !important;
}


/* ── 3. ШАПКА ─────────────────────────────────────────────── */
.t-header {
  background-color: var(--st-espresso) !important;
  border-bottom: 1px solid rgba(197, 160, 90, 0.2) !important;
}

.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-menu-base__imglogo,
.t-menu-base__imglogo img {
  width: 150px !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}


/* ── 4. КНОПКИ ────────────────────────────────────────────── */
.t-btn,
.t-btn_md,
.t-btn_lg,
.t-btn_sm,
.t-submit,
input[type="submit"],
button[type="submit"] {
  background-color: var(--st-gold) !important;
  color: var(--st-espresso) !important;
  border: none !important;
  border-radius: 8px !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__btn-buy,
.t-store__btn-cart,
.t-store__card-btn {
  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;
}


/* ── 5. КАРТОЧКИ ТОВАРОВ — рамки, тени, hover ─────────────── */
.t-store__card,
.t696__card,
.t-card {
  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;
}

.t-store__card-image,
.t696__card-image {
  background-color: var(--st-linen) !important;
}


/* ── 6. ФОРМЫ — focus-состояние ───────────────────────────── */
.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;
}


/* ── 7. ТЁМНЫЕ СЕКЦИИ ─────────────────────────────────────── */
[data-bgcolor="#2B1A0E"],
[data-bgcolor="#3D2415"],
[data-bgcolor="#2b1a0e"],
[data-bgcolor="#3d2415"] {
  background-color: var(--st-espresso) !important;
}


/* ── 8. ФУТЕР — только фон ────────────────────────────────── */
.t-footer,
.t-footer__container {
  background-color: var(--st-espresso) !important;
}

.t-footer__copy,
.t-footer .t-copy {
  border-top: 1px solid rgba(240, 235, 225, 0.1) !important;
  padding-top: 24px !important;
  margin-top: 40px !important;
}