/* ===================================================
   1. ROOT VARIABLES & GLOBAL BASE STYLES
   =================================================== */
:root {
    /* Фирменные цвета */
    --brand-yellow: #edda71;         /* Основной желтый */
    --brand-blue: #3a5aa4;           /* Основной синий */
    --brand-white: #ffffff;          /* Белый */
    --brand-black: #000000;          /* Черный (используйте 0,0,0 для rgba) */
    --brand-blue-darker: #2d437e;    /* Темно-синий (для границ, состояний hover) */
    --brand-yellow-darker: #d4c065;  /* Темно-желтый (для состояний hover) */
    
    /* Цвета для темных секций */
    --section-bg-dark: #193549;      /* Фон темных секций */
    --section-text-light: #e0e0e0;   /* Светлый текст на темных секциях */
    --section-heading-light: var(--brand-yellow); /* Заголовки на темных секциях */

    /* Переменные для карточек товаров */
    --card-border-radius: 12px;     /* Радиус скругления основной карточки */
    --card-border-radius-sm: 6px;   /* Радиус скругления для мелких элементов (бирка) */
    --card-image-height: 220px;     /* Высота изображения в карточке */
    --card-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);    /* Тень карточки */
    --card-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.12); /* Тень карточки при наведении */

    /* Настраиваемые цвета для текста в карточке */
    --modern-card-title-color: var(--brand-black);   /* Цвет названия товара в карточке */
    --modern-card-price-color: var(--brand-red); /* Цвет цены товара в карточке */
    /* --modern-card-bg-color: var(--brand-white); */ /* Можно добавить для фона карточки, если нужно */
}

/* Глобальный сброс и box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Базовые стили для body */
body {
    font-family: sans-serif; /* Резервный шрифт */
    font-size: 16px;
    background-color: var(--brand-white); /* Фон страницы по умолчанию */
    color: var(--brand-black); /* Цвет текста по умолчанию */
    line-height: 1.6;
}

/* Заголовки (вне темных секций) */
h1, h2, h3, h4, h5, h6 {
    color: var(--brand-blue);
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

/* Параграфы (вне темных секций) */
p {
    color: var(--brand-black);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* Ссылки (вне темных секций) */
a {
    color: var(--brand-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover, a:focus {
    color: var(--brand-yellow);
    text-decoration: none;
}

/* Горизонтальные линии (вне темных секций) */
hr {
    border: 0;
    border-top: 1px solid var(--brand-yellow);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* Изображения */
img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

/* Списки */
ul, ol {
  margin: 0;
  padding-left: 0; /* Убираем отступы по умолчанию */
}
ul li, ol li {
  list-style: none; /* Убираем маркеры по умолчанию */
}

/* ===================================================
   2. UTILITY CLASSES (Вспомогательные классы)
   =================================================== */
/* Отступы */
.mt-15 { margin-top: 15px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-50 { margin-top: 50px !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-50 { margin-bottom: 50px !important; }

/* Внутренние отступы для секций */
.section-padding-100 {
  padding-top: 100px;
  padding-bottom: 100px;
}
.section-padding-100-0 {
  padding-top: 100px;
  padding-bottom: 0;
}

/* Заголовок секции */
.section-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 40px;
  text-align: center;
}
.section-heading h2 {
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.section-heading p {
  font-size: 16px;
  margin-bottom: 0;
}

/* Выравнивание текста */
.text-center { text-align: center; }

/* Фон */
.bg-gray {
    background-color: #f0f0f0 !important; 
}

/* ===================================================
   3. GLOBAL SECTION STYLING (Стили для тега <section>)
   =================================================== */
section {
    background-color: var(--section-bg-dark); /* Фон для темных секций */
    color: var(--section-text-light);        /* Текст в темных секциях */
}

/* Заголовки в темных секциях */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
    color: var(--section-heading-light);
}
/* Заголовки и текст внутри .section-heading в темных секциях */
section .section-heading h2 {
    color: var(--section-heading-light);
}
section .section-heading p {
    color: var(--section-text-light);
}

/* Параграфы в темных секциях */
section p {
    color: var(--section-text-light);
}

/* Ссылки в темных секциях */
section a {
    color: var(--brand-yellow);
}
section a:hover, section a:focus {
    color: var(--brand-white);
}
/* Горизонтальные линии в темных секциях */
section hr {
    border-top-color: var(--brand-yellow);
}

/* ===================================================
   4. NAVBAR (Навигационная панель - стили для Bootstrap)
   =================================================== */
/* Основной контейнер навбара */
.navbar-default {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue-darker);
}
/* Логотип/название сайта в навбаре */
.navbar-default .navbar-brand {
    color: var(--brand-yellow);
    font-family: 'Pacifico', cursive; /* Пример шрифта для лого */
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: var(--brand-white);
}
/* Ссылки в навбаре */
.navbar-default .navbar-nav > li > a {
    color: var(--brand-white);
    font-weight: 500;
}
/* Ссылки в навбаре при наведении (с классом анимации) */
.navbar-default .navbar-nav > li > a.color_animation:hover,
.navbar-default .navbar-nav > li > a.color_animation:focus {
    color: var(--brand-yellow);
    background-color: transparent;
}
/* Активная ссылка в навбаре */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > li > a.navactive.color_animation {
    color: var(--brand-yellow) !important;
    background-color: var(--brand-blue-darker) !important;
}
/* Кнопка "гамбургер" для мобильного меню */
.navbar-default .navbar-toggle {
    border-color: var(--brand-yellow);
}
.navbar-default .navbar-toggle .icon-bar { /* Полоски в "гамбургере" */
    background-color: var(--brand-yellow);
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: var(--brand-blue-darker);
}

/* --- Стилизация логотипа в навбаре --- */
.navbar {
    min-height: 94px; /* Высота навбара */
}
.navbar-header { /* Контейнер для логотипа и "гамбургера" */
    height: auto;
}
.navbar-brand { /* Контейнер для текстового логотипа/бренда */
    position: relative;
    top: -15px; /* Смещение для выравнивания */
    height: 50px;
    padding-top: 5px;
    padding-bottom: 5px;
    line-height: 40px;
}
.navbar-logo { /* Изображение логотипа */
    position: relative;
     top: -5px; /* Смещение */
    width: 40px;
    max-height: 40px;
    display: inline-block;
    vertical-align: middle;
}
.navbar-toggle { /* Кнопка "гамбургер" */
    margin-top: calc((70px - 34px) / 2); /* Вертикальное центрирование */
    margin-bottom: calc((70px - 34px) / 2);
    margin-right: 15px;
}

/* ===================================================
   5. TOP HERO SECTION (#top - Верхняя секция "Hero")
   =================================================== */
#top.starter_container {
    padding: 30px 0; /* Внутренние отступы */
}
/* Главный заголовок в Hero секции */
#top .top-title {
    color: var(--brand-yellow);
    font-family: 'Pacifico', cursive; /* Пример шрифта */
    height: 400px; /* Высота контейнера заголовка */
    position: relative;
    font-size: 3.5em; /* Размер шрифта */
}
/* Второстепенный заголовок в Hero секции */
#top .white.second-title {
    color: var(--brand-white);
    font-family: 'Playball', cursive; /* Пример шрифта */
    font-size: 2em;
}

/* ===================================================
   6. ABOUT US SECTION (#story - Секция "О нас")
   =================================================== */
#story.description_content {
    padding: 60px 0;
    background-color: #142836;
}
/* Заголовок в секции "О нас" */
#story h1 {
    margin-bottom: 15px;
    font-size: 2.5em;
}
/* Иконка в секции "О нас" (пример) */
#story .fa-cutlery {
    color: var(--brand-yellow);
    margin-bottom: 15px;
}
/* Текстовое описание в секции "О нас" */
#story .text-content .desc-tex {
    line-height: 1.6;
}
/* Изображения в секции "О нас" */
#story .img-section img {
    margin: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 8px #142836; /* Тень для изображений */
}
/* Распорка для изображений (если используется) */
#story .img-section-space {
    display: block;
    width: 100%;
    height: 0;
}

/* ===================================================
   7. MENU SECTION (#menu - Секция меню/каталога товаров)
   =================================================== */

/* --- Кнопки категорий --- */
#category-buttons-container {
    text-align: center;
    margin-bottom: 40px;
}
.category-button { /* Кнопка фильтрации по категориям */
    background-color: var(--brand-yellow);
    border: 1px solid var(--brand-yellow);
    color: var(--brand-black);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 30px; /* Скругленные кнопки */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-weight: 500;
}
.category-button:hover { /* Кнопка категории при наведении */
    background-color: var(--brand-yellow-darker);
    color: var(--brand-black);
    border-color: var(--brand-yellow-darker);
}
.category-button.active { /* Активная кнопка категории */
    background-color: var(--brand-white);
    color: var(--section-bg-dark); /* Темный текст на белой кнопке */
    border-color: var(--brand-white);
}

/* --- Сетка товаров --- */
.products-grid {
    display: grid; /* Используем CSS Grid для раскладки */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Адаптивные колонки */
    gap: 20px; /* Промежуток между карточками */
    padding: 20px 0;
    max-width: 1200px; /* Максимальная ширина контейнера сетки */
    margin: 0 auto; /* Центрирование контейнера сетки */
}

/* --- Стилизация карточки товара --- */
.modern-card { /* Основной контейнер карточки */
  background-color: var(--brand-white); /* Фон карточки (белый) */
  border-radius: var(--card-border-radius); /* Скругление углов */
  box-shadow: var(--card-shadow); /* Тень карточки */
  border: 1px solid #ddd; /* Тонкая серая граница */
  overflow: hidden; /* Обрезка содержимого, выходящего за пределы скругления */
  display: flex; /* Flex для внутреннего расположения элементов */
  flex-direction: column; /* Элементы располагаются вертикально */
  height: 100%; /* Карточка занимает всю высоту ячейки грида */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Плавные переходы */
  position: relative; /* Для позиционирования абсолютно позиционированных дочерних элементов (бирка) */
}
.modern-card:hover { /* Карточка при наведении */
  transform: translateY(-5px); /* Легкий подъем */
  box-shadow: var(--card-shadow-hover); /* Усиленная тень */
}

/* Контейнер для изображения товара (может быть <p> или <div>) */
.modern-card p:first-child, 
.modern-card div:has(> img):first-child { 
  margin: 0;
  line-height: 0; /* Убирает лишнее пространство под изображением */
  height: var(--card-image-height); /* Фиксированная высота области изображения */
  overflow: hidden; /* Обрезка изображения, если оно больше контейнера */
}
.modern-card img { /* Изображение товара */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Масштабирует изображение, чтобы покрыть контейнер, может обрезать */
  display: block; /* Убирает лишнее пространство под изображением */
  transition: transform 0.3s ease; /* Плавный переход для эффекта увеличения */
}
.modern-card:hover img { /* Изображение при наведении на карточку */
    transform: scale(1.05); /* Легкое увеличение */
}

.modern-tag { /* Бирка на карточке (например, "Новинка", "Акция") */
  position: absolute; /* Абсолютное позиционирование относительно .modern-card */
  top: 15px;
  left: 15px;
  background-color: var(--brand-blue); /* Фон бирки */
  color: var(--brand-white); /* Текст на бирке */
  padding: 6px 12px;
  font-size: 0.75em;
  font-weight: 600;
  text-transform: uppercase; /* Текст заглавными буквами */
  letter-spacing: 0.5px;
  border-radius: var(--card-border-radius-sm); /* Скругление бирки */
  z-index: 1; /* Бирка поверх изображения */
}
.modern-tag.sale-tag { /* Специальная бирка для распродажи */
    background-color: #e61d47; /* Ярко-красный цвет */
}

.modern-card-body { /* Контейнер для текстового содержимого карточки */
  padding: 20px; /* Внутренние отступы */
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Позволяет этому блоку занять все доступное пространство по высоте */
  text-align: center; /* Центрирование текста */
}

.modern-card-title { /* Название товара */
  font-size: 1.15em;
  font-weight: 600;
  color: var(--modern-card-title-color); /* Используем CSS переменную для цвета */
  margin-bottom: 8px;
  line-height: 1.4;
}

.modern-card-price { /* Цена товара */
  font-size: 1.25em;
  font-weight: 700;
  color: var(--modern-card-price-color); /* Используем CSS переменную для цвета */
  margin-bottom: 8px;
}

.modern-card-sku { /* Артикул товара */
  font-size: 0.8em;
  color: #777; /* Серый цвет для артикула */
  margin-bottom: 15px;
}

.add-to-cart-btn { /* Кнопка "В корзину" */
  display: block; /* Кнопка занимает всю ширину */
  width: 100%;
  background-color: var(--brand-yellow); /* Фон кнопки */
  color: var(--brand-black); /* Текст на кнопке */
  text-align: center;
  padding: 12px 15px;
  border: none; /* Без рамки */
  border-radius: 30px; /* Скругленные углы, как у других кнопок */
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.15s ease, color 0.25s ease;
  margin-top: auto; /* Прижимает кнопку к низу карточки */
}
.add-to-cart-btn:hover,
.add-to-cart-btn:focus { /* Кнопка "В корзину" при наведении/фокусе */
  background-color: var(--brand-yellow-darker); /* Темнее фон */
  color: var(--brand-black);
  transform: translateY(-2px); /* Легкий подъем */
  outline: none;
}
.add-to-cart-btn:active { /* Кнопка "В корзину" при нажатии */
  transform: translateY(0); /* Возврат на место */
}

/* ===================================================
   8. MEDIA ROW SECTION (#media-row - Секция с медиа-контентом: видео, инстаграм)
   =================================================== */
#media-row.description_content {
    padding: 40px 0;
    background-color: #142836; /* Чуть другой оттенок фона для разнообразия */
}
#media-row .media-item { /* Контейнер для одного медиа-элемента */
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Центрирование по горизонтали */
}

/* --- Обёртка для локального видеоплеера --- */
.video-local-wrapper {
    position: relative;
    width: 100%;
    max-width: 340px; /* Максимальная ширина плеера */
    min-width: 300px; /* Минимальная ширина плеера */
    margin: 0 auto; /* Центрирование */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15);
    background-color: var(--brand-black); /* Черный фон под видео */
    height: 0; /* Для поддержания соотношения сторон через padding-bottom */
    padding-bottom: calc(100% * 9 / 16); /* Соотношение сторон 16:9 */
}
.video-local-wrapper #localVideoPlayer { /* Сам тег <video> */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Масштабирование видео */
    display: block;
    background-color: var(--brand-black);
    border-radius: inherit; /* Наследование скругления от родителя */
}
.video-local-wrapper + .desc-text { /* Текст описания под видеоплеером */
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 15px 0;
    font-size: 14px;
    color: var(--section-text-light);
    text-align: left;
    line-height: 1.4;
}

/* --- Кастомные элементы управления видео --- */
.video-local-wrapper .custom-controls { /* Панель управления */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background-color: rgba(0,0,0, 0.7); /* Полупрозрачный фон */
    color: var(--brand-white);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0; /* Скрыты по умолчанию */
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
.video-local-wrapper:hover .custom-controls,
.video-local-wrapper .custom-controls.focused { /* Появление контролов при наведении или фокусе */
    opacity: 1;
}
.video-local-wrapper .custom-controls button { /* Кнопки на панели (play, pause, volume, fullscreen) */
    background: none;
    border: none;
    color: var(--brand-white);
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    outline: none;
}
.video-local-wrapper .custom-controls button:hover {
    color: var(--brand-yellow); /* Изменение цвета при наведении */
}
/* Слайдеры времени и громкости */
.video-local-wrapper #localSeekBar,
.video-local-wrapper #localVolumeBar {
    cursor: pointer;
    margin: 0 8px;
    flex-grow: 1;
    outline: none;
    -webkit-appearance: none; /* Сброс стандартных стилей */
    appearance: none;
    height: 6px;
    background: #555; /* Цвет трека слайдера */
    border-radius: 3px;
}
/* Ползунок слайдера для Webkit (Chrome, Safari) */
.video-local-wrapper input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--brand-yellow); /* Цвет ползунка */
    border-radius: 50%;
    cursor: pointer;
    border: none;
    margin-top: -4px; /* Коррекция положения */
}
/* Ползунок слайдера для Firefox */
.video-local-wrapper input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--brand-yellow);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}
/* Отображение времени (current/duration) */
.video-local-wrapper .time-display {
    font-size: 11px;
    margin: 0 8px;
    min-width: 75px;
    text-align: center;
    white-space: nowrap;
}
/* Слайдер громкости (меньше по ширине) */
.video-local-wrapper #localVolumeBar {
    max-width: 70px;
    flex-grow: 0;
}
/* Стили для полноэкранного режима видео */
.video-local-wrapper:fullscreen {
    width: 100% !important; height: 100% !important; max-width: none !important;
    padding-bottom: 0 !important; border-radius: 0 !important; overflow: hidden !important;
}
.video-local-wrapper:fullscreen #localVideoPlayer {
    object-fit: contain; /* Вписать видео в экран, сохраняя пропорции */
    position: static; width: 100%; height: 100%; border-radius: 0;
}
.video-local-wrapper:fullscreen .custom-controls { border-radius: 0; }


/* --- Обёртка для поста Instagram --- */
.instagram-post-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Позволяет виджету определять свою высоту */
    width: 100%;
}
.instagram-media { /* Класс, используемый виджетом Instagram */
    margin: 1px auto !important; /* Центрирование и переопределение стилей виджета */
    min-width: 300px !important;
    max-width: 100% !important;
}

/* ===================================================
   9. CONTACT SECTION (#contact - Секция "Контакты")
   =================================================== */
#contact .map { /* Контейнер для карты */
    margin-bottom: 30px;
}
#contact .map iframe { /* Карта Google Maps или аналогичная */
    border-radius: 8px;
    display: block; /* Убрать лишнее пространство под картой */
    border: none; /* Убрать рамку по умолчанию */
}
/* Форма обратной связи */
#contact .inner.contact form label { /* Метки полей формы */
    color: var(--section-text-light);
    display: block;
    margin-bottom: 5px;
}
/* Поля ввода и текстовые области */
#contact .inner.contact form input,
#contact .inner.contact form textarea {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    border: 1px solid var(--brand-blue-darker); /* Рамка поля */
    border-radius: 4px;
    font-size: 1rem;
    background-color: #254053; /* Темный фон поля */
    color: var(--brand-white); /* Белый текст в поле */
}
/* Плейсхолдеры в полях */
#contact .inner.contact form input::placeholder,
#contact .inner.contact form textarea::placeholder {
    color: #a0b0c0; /* Светлый цвет для плейсхолдера */
}
/* Поля при фокусе */
#contact .inner.contact form input:focus,
#contact .inner.contact form textarea:focus {
    border-color: var(--brand-yellow);
    background-color: #2d4c61; /* Чуть светлее фон при фокусе */
    box-shadow: 0 0 0 0.2rem rgba(237, 218, 113, 0.25); /* Тень при фокусе (с цветом --brand-yellow) */
    outline: none;
}
/* Кнопка отправки формы */
#contact .inner.contact form button[type="submit"] {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    border-radius: 30px;
    background-color: var(--brand-yellow);
    color: var(--brand-black);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
#contact .inner.contact form button[type="submit"]:hover {
    background-color: var(--brand-yellow-darker);
}

/* ===================================================
   10. FOOTER (Подвал сайта)
   =================================================== */
footer.example-1 { /* Основной контейнер футера */
  background-color: #193549; /* Фон футера (совпадает с --section-bg-dark) */
  color: #ffffff; /* Основной цвет текста в футере */
  padding: 40px 0 20px; /* Внутренние отступы */
  font-family: 'Arial', sans-serif; /* Пример шрифта для футера */
}

.footer-container { /* Внутренний контейнер для колонок футера */
  display: flex;
  flex-wrap: wrap; /* Позволяет колонкам переноситься на новую строку */
  justify-content: space-between; /* Распределение колонок */
  max-width: 1200px; /* Максимальная ширина */
  margin: 0 auto; /* Центрирование */
  padding: 0 15px; /* Боковые отступы */
}

.footer-col { /* Колонка в футере */
  flex: 1 1 250px; /* Гибкость и базовая ширина колонки */
  margin: 20px 10px; /* Отступы вокруг колонки */
}
.footer-col:first-child { margin-left: 0; } /* Убрать левый отступ у первой колонки */
.footer-col:last-child { margin-right: 0; } /* Убрать правый отступ у последней колонки */


.footer-col img { /* Логотип в футере */
  max-width: 160px;
  margin-bottom: 15px;
}

.footer-col h4 { /* Заголовок колонки в футере */
  font-size: 18px;
  margin-bottom: 15px;
  color: var(--brand-white);
  position: relative;
  padding-bottom: 5px;
}
.footer-col h4::after { /* Декоративная линия под заголовком колонки */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background-color: #f9a825; /* Акцентный цвет (можно заменить на var(--brand-yellow)) */
}

/* Текст и ссылки в колонке футера */
.footer-col p,
.footer-col a {
  font-size: 14px;
  line-height: 1.8;
  color: #cccccc; /* Светло-серый текст */
  text-decoration: none;
  display: block; /* Ссылки как блочные элементы */
  transition: color 0.3s ease;
}
.footer-col a:hover {
  color: #f9a825; /* (var(--brand-yellow)) */
}

.footer-col li { /* Элемент списка в футере */
  margin-bottom: 10px;
}
.footer-col li i { /* Иконка в списке */
  margin-right: 8px;
  color: #f9a825; /* (var(--brand-yellow)) */
}

.bottombar { /* Самая нижняя часть футера (копирайт) */
  text-align: center;
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #29516b; /* Разделительная линия */
  font-size: 13px;
  color: #aaa; /* Очень светлый серый текст */
}
.bottombar a { /* Ссылка в bottombar */
  color: #f9a825; /* (var(--brand-yellow)) */
  text-decoration: none;
}
.bottombar a:hover {
  text-decoration: underline;
}

/* ===================================================
   11. GENERIC BUTTONS (Общие стили для кнопок)
   =================================================== */
/* Основная (желтая) кнопка */
.btn-primary-themed {
    background-color: var(--brand-yellow);
    color: var(--brand-black);
    border: 1px solid var(--brand-yellow);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    text-decoration: none;
    display: inline-block;
}
.btn-primary-themed:hover {
    background-color: var(--brand-yellow-darker);
    border-color: var(--brand-yellow-darker);
    color: var(--brand-black);
}

/* Второстепенная (синяя) кнопка */
.btn-secondary-themed {
    background-color: var(--brand-blue);
    color: var(--brand-white);
    border: 1px solid var(--brand-blue);
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 600;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    text-decoration: none;
    display: inline-block;
}
.btn-secondary-themed:hover {
    background-color: var(--brand-blue-darker);
    border-color: var(--brand-blue-darker);
    color: var(--brand-white);
}

/* ===================================================
   12. RESPONSIVE ADJUSTMENTS (Адаптивность)
   =================================================== */

/* --- Планшеты и небольшие десктопы (до 991px) --- */
@media (max-width: 991px) {
    /* Уменьшение отступов секций */
    .section-padding-100 {
      padding-top: 70px;
      padding-bottom: 70px;
    }
    /* Отступы для Hero секции */
    #top.starter_container { padding: 60px 0; }
    /* Размеры шрифтов в Hero */
    #top .top-title { font-size: 3em; height: auto; }
    #top .white.second-title { font-size: 1.8em; }
    /* Заголовок в "О нас" */
    #story h1 { font-size: 2.2em; }
    /* Промежуток в сетке товаров */
    .products-grid { gap: 15px; }

    /* Стили для раскрывающегося мобильного меню (Bootstrap 3/4/5-like) */
    #mainNavbar.collapse { /* Скрыто по умолчанию, управляется JS */
        display: none;
    }
    #mainNavbar.in, /* Класс Bootstrap 3 для открытого меню */
    #mainNavbar.show { /* Класс Bootstrap 4/5 для открытого меню */
        display: block !important; /* Принудительное отображение */
        background: var(--brand-blue-darker); /* Фон выпадающего меню */
        position: absolute; /* Позиционирование под основным навбаром */
        top: 100%;
        left: 0;
        right: 0;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Тень */
        padding: 10px 0; /* Внутренние отступы */
        z-index: 1000; /* Поверх другого контента */
    }
    .navbar-default .navbar-nav { /* Список ссылок в мобильном меню */
        margin: 0;
        width: 100%;
    }
    .navbar-default .navbar-nav > li > a { /* Ссылки в мобильном меню */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 15px;
        padding-right: 15px;
        width: 100%; /* На всю ширину */
    }
    /* Активная/наведенная ссылка в мобильном меню */
     .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > li > a.navactive.color_animation,
    .navbar-default .navbar-nav > li > a:hover,
    .navbar-default .navbar-nav > li > a:focus {
         background-color: var(--brand-blue) !important; /* Фон активной/наведенной ссылки */
         color: var(--brand-yellow) !important; /* Цвет текста */
    }
}

/* --- Телефоны (до 767px) --- */
@media (max-width: 767px) {
    /* Дальнейшее уменьшение отступов секций */
    .section-padding-100 {
      padding-top: 50px;
      padding-bottom: 50px;
    }
    /* Базовый размер шрифта */
    body { font-size: 15px; }
    /* Заголовок секции */
    section .section-heading h2 { font-size: 24px; }

    /* Hero секция */
    #top.starter_container { padding: 40px 0; }
    #top .top-title {
        font-size: 2.5em;
        height: 230px;
        display: flex; /* Для вертикального и горизонтального центрирования */
        align-items: center;
        justify-content: center;
        text-align: center;
        padding-left: 15px;  
        padding-right: 15px;
    }
    #top .white.second-title { font-size: 1.5em; }
    #top hr { max-width: 150px; margin-left: auto; margin-right: auto; } /* Центрирование линии */

    /* Секция "О нас" */
    #story h1 {
        font-size: 2em;
        text-align: center;
    }
    #story .img-section { text-align: center; }
    #story .img-section img { /* Две картинки в ряд */
        width: calc(50% - 10px);
        margin: 5px;
    }
    #story .text-content .desc-tex {
        text-align: justify; /* Выравнивание текста по ширине */
    }

    /* Секция меню/каталога */
    #menu.new-arrivals-products-area { padding: 50px 0; }
    .products-grid { /* Меньшие карточки в сетке */
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
    /* Адаптация карточки товара */
    .modern-card img { height: 180px; }
    .modern-card-body { padding: 0.8rem; }
    .modern-card-title { font-size: 1rem; }
    .modern-card-price { font-size: 1rem; }
    .add-to-cart-btn {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }

    /* Секция с медиа */
    #media-row.description_content { padding: 30px 0; }
    .video-local-wrapper { /* Видеоплеер на всю ширину с отступами */
        max-width: 95%;
        min-width: 0;
        padding-bottom: calc(95vw * 9 / 16); /* Соотношение сторон от ширины видимой области */
    }
    .video-local-wrapper + .desc-text { max-width: 95%; }
    .instagram-post-wrapper { /* Пост Instagram */
         margin-top: 30px;
         width: 100%;
    }
    .instagram-media { min-width: 280px !important; }

    /* Скрытие ненужных элементов в #media-row на мобильных */
    #media-row .inst,
    #media-row .foont {
        display: none !important;
    }

    /* Карта в контактах */
    #contact .map iframe { height: 300px; }

    /* Футер */
    .footer-container { /* Колонки футера вертикально */
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-col { /* Колонка на всю ширину */
        flex-basis: 100%;
        margin: 20px 0;
    }
    .footer-col h4::after { /* Центрирование линии под заголовком колонки */
        left: 50%;
        transform: translateX(-50%);
    }
    footer.example-1 { padding: 40px 0 0; } /* Убрать нижний отступ, т.к. bottombar имеет свой */
    footer.example-1 .footer-container .footer-col {
        background: transparent; /* Сброс стилей, если были на десктопе */
        box-shadow: none;
        padding: 15px;
        margin: 0 15px 30px; /* Боковые отступы и нижний между колонками */
        border-radius: 0;
        text-align: center;
    }
    footer.example-1 .footer-container .footer-col img { /* Центрирование лого в колонке */
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px;
    }
    footer.example-1 .bottombar { /* Самая нижняя часть футера */
        padding: 20px 15px;
        background-color: #070e14; /* Темнее фон */
        color: var(--brand-white);
        font-size: .9em;
    }

    /* Если используется .sub_footer (дополнительный футер) */
    .sub_footer .text-center { text-align: center !important; }
    .sub_footer .col-md-4 { /* Для Bootstrap 3 колонок */
        width: 100%;
        margin-bottom: 10px;
    }
    .sub_footer .col-md-4:last-child { margin-bottom: 0; }
}

/* --- Очень маленькие экраны (до 480px) --- */
@media (max-width: 480px) {
    /* Hero секция */
    #top .top-title {
        height: 200px; /* Еще меньше высота */
        font-size: 2em;  /* Еще меньше шрифт */
    }
}

/* ===================================================
   13. PRELOADER & SCROLLUP (Прелоадер и кнопка "Наверх" - опционально)
   =================================================== */
/* Раскомментируйте, если используете эти элементы
.preloader {
  background-color: var(--brand-white);
  width: 100%; height: 100%; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 999999; display: flex;
  justify-content: center; align-items: center;
}
.preloader .preloader-circle {
  width: 80px; height: 80px; position: relative;
  border: 2px solid transparent; border-top-color: var(--brand-yellow);
  border-radius: 50%; background-color: var(--brand-white);
  animation: zoom 1s infinite linear;
}
@keyframes zoom {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#scrollUp {
  background-color: var(--brand-blue); border-radius: 4px;
  bottom: 20px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
  color: var(--brand-white); font-size: 24px;
  height: 40px; line-height: 40px; right: 20px;
  text-align: center; width: 40px; transition: background-color 0.3s;
}
#scrollUp:hover {
  background-color: var(--brand-yellow); color: var(--brand-black);
}
*/

/* ===================================================
    14. COLLAPSE FUNCTIONALITY (Для работы раскрывающихся меню Bootstrap)
   =================================================== */
/* Эти стили могут быть уже встроены в Bootstrap.
   Если вы не используете Bootstrap JS для меню, они могут быть полезны.
.collapse {
  display: none;
  transition: height 0.3s ease; // Плавность для изменения высоты
}
.collapse.show, .collapse.in { // .in для Bootstrap 3, .show для Bootstrap 4/5
  display: block;
}
*/