/* --- ШРИФТЫ (.ttf) --- */

/* Exo 2 (Основной текст) */
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/public/fonts/Exo2-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/public/fonts/Exo2-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Exo 2';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/public/fonts/Exo2-SemiBold.ttf') format('truetype');
}

/* Oswald (Заголовки и Цены) */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/public/fonts/Oswald-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/public/fonts/Oswald-Bold.ttf') format('truetype');
}

/* --- 1. CSS ПЕРЕМЕННЫЕ (Вставляем в самое начало) --- */
:root {
  /* Цвета */
  --bg-main: #121212;
  --bg-surface: #1A1A1C;
  --bg-surface-hover: #27272A;

  --accent-primary: #E63946;
  --accent-hover: #D90429;

  --text-main: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #52525B;

  --border-main: #27272A;

  /* Шрифты */
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Exo 2', sans-serif;

  /* Структура */
  --radius-strict: 4px;
  --transition-fast: 0.2s ease;
}

/* --- 2. ШРИФТЫ И ТИПОГРАФИКА --- */
/* Семейства шрифтов */
.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

/* Размеры заголовков (Oswald) */
.title-xl {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.title-lg {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.title-md {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.3;
}

/* Размеры основного текста (Exo 2) */
.text-base {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}

.text-sm {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
}

.text-xs {
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.4;
}

/* Начертания */
.font-bold {
  font-weight: 700;
}

.font-medium {
  font-weight: 500;
}

.font-regular {
  font-weight: 400;
}

/* --- 3. ЦВЕТА ТЕКСТА --- */
.color-main {
  color: var(--text-main);
}

/* Белый (для заголовков и цен) */
.color-secondary {
  color: var(--text-secondary);
}

/* Светло-серый (для описаний) */
.color-muted {
  color: var(--text-muted);
}

/* Темно-серый (для артикулов, недоступных товаров) */
.color-accent {
  color: var(--accent-primary);
}

/* Красный (для скидок, выделения важных деталей) */

/* --- 4. ФОНЫ И БЛОКИ --- */
.bg-main {
  background-color: var(--bg-main);
}

.bg-surface {
  background-color: var(--bg-surface);
}

.bg-accent {
  background-color: var(--accent-primary);
  color: #fff;
}

/* Карточка товара (базовая настройка) */
.card-strict {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-strict);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.card-strict:hover {
  background-color: var(--bg-surface-hover);
  border-color: var(--accent-primary);
  /* Легкий красный акцент при наведении */
}

/* --- 5. КНОПКИ --- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Отступ между иконкой и текстом */
  background-color: var(--accent-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-strict);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

/* --- 6. НАСТРОЙКИ ДЛЯ TABLER ICONS --- */
/* Этот класс делает иконки более техничными и строгими */
.ti {
  stroke-width: 1.5;
  /* Строгая тонкая линия */
  stroke: currentColor;
  /* Цвет иконки наследуется от цвета текста */
  fill: none;
  width: 24px;
  height: 24px;
  stroke-linecap: square;
  /* Острые концы линий вместо круглых */
  stroke-linejoin: miter;
  /* Острые углы */
}

:root {
  --bg-main: #121212;
  --bg-surface: #1A1A1C;
  --bg-surface-hover: #27272A;
  --accent-primary: #E63946;
  --accent-hover: #D90429;
  --text-main: #FFFFFF;
  --text-secondary: #A1A1AA;
  --text-muted: #52525B;
  --border-main: #27272A;
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Exo 2', sans-serif;
  --radius-strict: 4px;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-body);
}

/* Типографика */
.font-heading {
  font-family: var(--font-heading);
}

.title-lg {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Цвета */
.color-main {
  color: var(--text-main) !important;
}

.color-secondary {
  color: var(--text-secondary) !important;
}

.color-accent {
  color: var(--accent-primary) !important;
}

.bg-main {
  background-color: var(--bg-main) !important;
}

.bg-surface {
  background-color: var(--bg-surface) !important;
}

.bg-accent {
  background-color: var(--accent-primary) !important;
  color: #fff !important;
}

/* Иконки */
.icon-strict {
  stroke-width: 1.5;
  stroke: currentColor;
  fill: none;
  width: 20px;
  height: 20px;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Элементы интерфейса */
.border-main {
  border-color: var(--border-main) !important;
}

.radius-strict {
  border-radius: var(--radius-strict) !important;
}

.btn-primary-strict {
  background-color: var(--accent-primary);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-strict);
  transition: background-color 0.2s ease;
}

.btn-primary-strict:hover {
  background-color: var(--accent-hover);
  color: #fff;
}

/* Переопределение Bootstrap */
.form-control-strict {
  background-color: var(--bg-main);
  border: 1px solid var(--border-main);
  color: var(--text-main);
  border-radius: var(--radius-strict);
}

.form-control-strict:focus {
  background-color: var(--bg-main);
  border-color: var(--accent-primary);
  color: var(--text-main);
  box-shadow: none;
}

.dropdown-menu-strict {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-main);
  border-radius: var(--radius-strict);
}

.dropdown-item-strict {
  color: var(--text-secondary);
  transition: all 0.2s;
}

.dropdown-item-strict:hover {
  background-color: var(--bg-surface-hover);
  color: var(--text-main);
}

.nav-link {
  color: var(--text-secondary) !important;
  transition: color 0.2s;
  font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
  color: var(--text-main) !important;
}

input[name="q"]::placeholder {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
}

.breadcrumb-item+.breadcrumb-item::before {
  color: var(--text-secondary);
}