* {
    	font-family: Arial, Helvetica,sans-serif;

}
/* Text */
img {border:0 none;}

a {color: #204d74; }
a:hover {color: #CC0007;}

h1, h2, h3, h4, h5, h6
{
	font-family: Arial, Helvetica,sans-serif;
	margin:1.3em 0 0.7em;
	font-weight:normal;
	line-height:1.2;
}

h1 { font-size:190%; margin:0 0 1em; }
h2 { font-size:150%; }
h3 { font-size:130%; font-weight: bold;}
h4 { font-size:120%;}
h5
{
	border-bottom:1px solid #E5E5E5;
	font-size:140%;
	font-weight:normal;
	margin:0 0 1.1em;
	padding:0 0 1em;
}
h6 { font-size:100%; }

hr, .hr
{
	border-top:1px solid;
	display:block;
	font-size:1px;
	height:1px;
	line-height:1px;
	margin:12px 0;
	overflow:hidden;
	padding:0;
}


        body { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; background: #fff; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

        /* Верхняя зона: Лого и Контакты */
        .header-top { padding: 15px 0; display: flex; align-items: center; justify-content: space-between; }
        .header-phone { font-size: 20px; font-weight: bold; color: #333; text-decoration: none; }

        /* Черная полоса навигации */
        .nav-bar { background: #1a1a1a; height: 50px; }
        .nav-container { display: flex; align-items: center; height: 100%; }

        /* Красная кнопка Каталога */
        .btn-catalog-red {
            background: #204d74; color: #fff; text-decoration: none;
            padding: 0 30px; line-height: 50px; font-weight: bold;
            display: inline-block; text-transform: uppercase; border: none; cursor: pointer;
        }
        .btn-catalog-red:hover { background: #204d74; }
.header-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}
.logo-area {
    flex: 0 0 180px;
}
.logo-area img{
    max-height: 70px;
}
.contact-item {
    padding: 0 10px;
    border-right: 1px solid #eee;
    text-align: left;
    list-style: none;
}
.contact-item li a {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-decoration: none;
}
.work-time {
    padding: 0 20px;
    font-size: 13px;
    color: #888;
    list-style: none;
    border-right: 1px solid #eee;
}
    .search-area form { display: flex; border: 1px solid #ddd; border-radius: 3px; overflow: hidden; }
    .search-area input { border: none; padding: 7px; width: 100%; outline: none; font-size: 14px;}
    .search-area button { background: #fff; border: none; padding: 10px; cursor: pointer; color: #999; }
    .search-box { width: 100%;    }


        /* Горизонтальное меню */
        .top-menu-list { list-style: none; margin: 0; padding: 0 20px; display: flex; }
        .top-menu-list li a { color: #fff; text-decoration: none; padding: 0 15px; line-height: 50px; font-size: 14px; text-transform: uppercase; }
        .top-menu-list li a:hover { color: #d4222a; }



#workarea ul { list-style-type: none;  padding:0; margin: 0 0 0 1.5em;}
#workarea ul li:before { content:'\2014\a0'; }
#workarea li {
	text-indent:-1.35em;
	margin: 0.6em 0
}

.sort-options, .catalog-sort {
    font-size: 12px;
}

#workarea ul ul { padding:0 0 0 1.5em; margin: 0.6em 0}


table.data-table { width: 100%; border-bottom: 1px solid #F0F0F0; border-top: 1px solid #F0F0F0}
table.data-table th { text-align: left;}
table.data-table td, table.data-table th { padding: 1em; font-size: 0.85em;}
table.data-table tr.alt-row { background-color: #F0F0F0; }


.footer-catalog-map { background: #252525;; padding: 40px 0; font-family: sans-serif; }
.footer-sections-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}
.footer-section-col { flex: 1; min-width: 200px; margin-bottom: 20px; }
.footer-root-link {
    display: block; font-weight: bold; font-size: 13px; color: #FFF;
    text-transform: uppercase; text-decoration: none; margin-bottom: 10px;
}
.footer-subsections-list { list-style: none; padding: 0; margin: 0; }
.footer-subsections-list li { margin-bottom: 5px; }
.footer-subsections-list a { color: #CCC; text-decoration: none; font-size: 12px; }
.footer-subsections-list a:hover { color: #d4222a; }

/* Темная часть */
.footer-bottom-dark { background: #111; color: #fff; padding: 30px 0; font-size: 13px; }
.footer-delivery-text { border-bottom: 1px solid #888; padding-bottom: 15px; margin-bottom: 20px; color: #ccc; }
.footer-contacts-row { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-logo img { max-height: 40px; margin-bottom: 15px; }
.footer-contacts a { color: #fff; text-decoration: none; line-height: 1.8; }
.footer-nav-links { list-style: none; padding: 0; }
.footer-nav-links a { color: #fff; text-decoration: underline; text-transform: uppercase; font-weight: bold; font-size: 12px; line-height: 2; }


.product-card-item { padding: 10px; }
.product-card-inner {
    background: #fff; border: 1px solid #eee; padding: 20px; height: 100%;
    display: flex; flex-direction: column; transition: 0.3s;
}
.product-card-inner:hover { border-color: #ddd; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

.product-card-image { height: 180px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.product-card-image img { max-width: 100%; max-height: 100%; object-fit: contain; }

.product-card-title {
    font-weight: bold; font-size: 14px; color: #333; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 38px;
}

.cart-btn-circle {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: #eee; color: #333; cursor: pointer; display: flex;
    align-items: center; justify-content: center; transition: 0.3s;
}
.cart-btn-circle:hover { background: #d4222a; color: #fff; }

/* таблица предложнеий в модальном окне и на странице товара

    .product-detail-page { font-family: 'Roboto', sans-serif; color: #333; line-height: 1.5; padding: 20px 0; }

    /* Верхний блок: Заголовок и Артикул */
    .product-header-block { margin-bottom: 7px; }
    .product-main-title { font-size: 28px; font-weight: 700; margin: 0 0 10px 0; color: #222; }
    .product-sku-top { color: #999; font-size: 14px; }
    .product-sku-top b { color: #333; margin-left: 5px; }

    /* Сетка верхнего блока */
    .product-top-grid { display: flex; gap: 40px; margin-bottom: 60px; flex-wrap: wrap; }
    .product-media-col { flex: 0 0 450px; max-width: 100%; }
    .product-offers-col { flex: 1; min-width: 320px; }

    /* Главное фото */
    .main-photo-wrapper { border: 1px solid #f0f0f0; padding: 20px; text-align: center; background: #fff; }
    .main-photo-wrapper img { max-width: 100%; height: auto; }

    /* Таблица торговых предложений (Размеры/Цены) */
    .offers-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .offers-table thead tr { border-bottom: 2px solid #f0f0f0; text-align: left; color: #999; text-transform: uppercase; font-size: 11px; }
    .offers-table th { padding: 10px 5px; }
    .offers-table td { padding: 15px 5px; border-bottom: 1px solid #f6f6f6; }
    .price-val { font-size: 15px; color: #d4222a; font-weight: 700; white-space: nowrap; }


/* Возвращаем таблице табличный вид */
.offers-table {
    width: 100%;
    border-collapse: collapse;
    display: table !important; /* Гарантируем, что это таблица, а не флекс */
    margin-top: 7px;
}
.offers-table thead tr {
    display: table-row !important;
}
.offers-table tr {
    display: table-row !important;
    border-bottom: 1px solid #f0f0f0;
}
.offers-table td, .offers-table th {
    display: table-cell !important; /* Возвращаем стандартное поведение ячеек */
    padding: 3px;
    vertical-align: middle;
    text-align: left; /* Прижимаем всё влево, чтобы не расползалось */
}

/* Задаем фиксированную ширину колонкам, чтобы они стояли плотно */
.offers-table th:nth-child(1), .offers-table td:nth-child(1) { width: 70%;font-size: 15px; } /* Размер */
.offers-table th:nth-child(2), .offers-table td:nth-child(2) { width: 10%; white-space: nowrap; } /* Цена */
.offers-table th:nth-child(3), .offers-table td:nth-child(3) { width: 10%; } /* Наличие */
.offers-table th:nth-child(4), .offers-table td:nth-child(4) { width: 10%; text-align: right; } /* Заказ */
.offers-table th:nth-child(4), .offers-table td:nth-child(4) div input { width: 35px; } /* Заказ */

.offers-table td:nth-child(1) { width: 70%;font-size: 13px; }

/* Убираем "псевдо-заголовки" на десктопе, если они успели просочиться */
.offers-table td:before {
    display: none !important;
}
/* Стилизуем блок кнопок, чтобы он не растягивался на всю ячейку */
.qty-control {
    display: inline-flex; /* Важно: inline-flex, чтобы не занимал всю ширину */
    align-items: center;
    border: 1px solid #ddd;
    background: #fff;
}

    /* Кнопки +/- и Итого */
    .qty-control { display: flex; align-items: center; border: 1px solid #ddd; width: fit-content; background: #fff; margin-left: auto; }
    .qty-btn { border: none; background: #f9f9f9; padding: 5px 12px; cursor: pointer; font-weight: bold; font-size: 16px; transition: 0.2s; }
    .qty-btn:hover { background: #eee; }
    .qty-input { width: 40px; text-align: center; border: none; font-weight: bold; outline: none; }

    .total-sum-bar { display: flex; justify-content: flex-end; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #eee; }
    .btn-cart-red { background: #d4222a; color: #fff; border: none; padding: 16px 45px; font-weight: 700; text-transform: uppercase; cursor: pointer; border-radius: 2px; transition: 0.3s; }
    .btn-cart-red:hover { background: #b31d23; }

    /* БЛОК ВКЛАДОК (КАК НА СКРИНШОТЕ) */
    .product-tabs-nav { border-bottom: 1px solid #eee; display: flex; gap: 40px; margin-bottom: 3px; }
    .tab-trigger { padding-bottom: 12px; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 13px; color: #999; position: relative; }
    .tab-trigger.active { color: #d4222a; }
    .tab-trigger.active:after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: #d4222a; }

    /* Сетка вкладок (Описание + Характеристики рядом) */
    .tabs-grid { display: flex; gap: 60px; flex-wrap: wrap; }
    .tab-col-desc { flex: 1.3; min-width: 350px; }
    .tab-col-props { flex: 1; min-width: 300px; }

    .tab-h3 { font-size: 18px; font-weight: 700; text-transform: uppercase; border-left: 5px solid #d4222a; padding-left: 15px; margin-bottom: 25px; color: #000; }

    /* Текст описания */
    .detail-text-content { color: #444; line-height: 1.8; font-size: 14px; }
    .detail-text-content ul { padding-left: 20px; list-style: none; margin: 0; }
    .detail-text-content li { position: relative; margin-bottom: 10px; }
    .detail-text-content li:before { content: '-'; position: absolute; left: -15px; }

    /* Таблица характеристик */
    .props-table { width: 100%; border-collapse: collapse; }
    .props-table tr { border-bottom: 1px solid #f2f2f2; }
    .props-table td { padding: 3px 0; font-size: 14px; vertical-align: top; }
    .prop-name { color: #555; width: 45%; }
    .prop-value { font-weight: 400; text-align: right; color: #333; width: 55%; }


.offers-table tr.is-selected {
    background-color: #9AB6EF !important; /* Нежный розовый фон */
}
.offers-table tr.is-selected td:first-child {
    border-left: 3px solid #d4222a; /* Красная черта слева для акцента */
}


/* Стиль для неактивной кнопки */
.btn-cart-red.is-disabled {
    background-color: #ccc !important; /* Серый цвет */
    border-color: #bbb !important;
    color: #888 !important;
    cursor: not-allowed; /* Курсор "запрещено" */
    opacity: 0.6;
    pointer-events: none; /* Полностью отключает клики на уровне браузера */
}

/* Плавный переход цвета */
.btn-cart-red {
    transition: all 0.3s ease;
}

/* For mobile

@media (max-width: 768px) {


/* Фон (оверлей) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px); /* Легкое размытие фона */
}

/* Контент окна */
.modal-success-content {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    animation: slideUp 0.3s ease-out; /* Плавный выезд снизу */
}

.success-icon {
    width: 60px; height: 60px;
    background: #2ecc71;
    color: #fff;
    font-size: 30px;
    line-height: 60px;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.modal-success-buttons {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.btn-continue, .btn-cart-confirm {
    flex: 1;
    padding: 12px 5px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    border: none;
}

.btn-continue { background: #f0f0f0; color: #333; }
.btn-cart-confirm { background: #e30613; color: #fff; }

/* Анимация появления */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}


/* Поп-ап уведомление */
.cart-notification { position: fixed; top: 20px; right: -300px; background: #28a745; color: #fff; padding: 12px 20px; border-radius: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 11000; transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); font-size: 14px; font-weight: bold; display: flex; align-items: center; }
.cart-notification.is-show { right: 20px; }
.cart-notification::before { content: '✓'; margin-right: 10px; background: rgba(255,255,255,0.2); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 12px; }



/* --- АДАПТИВНОСТЬ КАТАЛОГА --- */

/* 1. Планшеты (до 1024px) — делаем по 3 товара в ряд */
@media screen and (max-width: 1024px) {
    .sub-tiles-grid,
    .catalog-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }

    #sidebar,
    .left-column,
    .catalog-filter-aside,
    .footer-catalog-map {
        display: none !important;
    }



}
/* --- СКРЫТИЕ ФИЛЬТРА НА МОБИЛЬНЫХ --- */

@media screen and (max-width: 900px) {
    /* Скрываем боковую колонку с фильтром */

    /* Растягиваем основной контент с товарами на всю ширину */
    #content,
    .main-column,
    .catalog-content-right {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 0 10px;
    }

    /* Обнуляем Grid/Flex обертку, если она фиксировала колонку */
    .catalog-wrapper,
    .main-container {
        display: block;
    }

@media screen and (max-width: 900px) {
    /* 1. Убираем боковой вылет и делаем развертывание вниз */
    .menu-list {
        transform: translateY(-100%); /* Прячем наверх за шапку */
        left: 0;
        top: 60px; /* Высота твоей мобильной шапки */
        width: 100%; /* На всю ширину экрана */
        bottom: auto; /* Чтобы не тянулось до низа экрана, если меню короткое */
        max-height: calc(100vh - 60px); /* Ограничиваем высотой экрана */
        transition: transform 0.4s ease-in-out;
        box-shadow: 0 10px 15px rgba(0,0,0,0.1);
        border-right: none;
        border-bottom: 1px solid #d3d3d3;
    }

    /* 2. Состояние при открытии (когда чекбокс нажат) */
    .burger-checkbox:checked ~ .menu-list {
        transform: translateY(0); /* Плавно выезжает вниз */
    }

    /* 3. Оптимизируем внутренние пункты */
    .menu-list li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .menu-list a {
        padding-left: 50px; /* Немного уменьшим отступ для узких экранов */
        background-position: 15px center;
    }

    /* 4. Фиксируем шапку, чтобы меню выезжало именно из-под неё */
    #mainHeader {
        position: sticky;
        top: 0;
        z-index: 100;
    }
    .col-md-3, .col-sm-4 {
        display: none;
    }

}


}

/* 2. Крупные смартфоны (до 768px) — по 2 товара в ряд */
@media screen and (max-width: 768px) {
    .sub-tiles-grid,
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0 5px;
    }

    /* Уменьшаем шрифты, чтобы названия не резались */
    .sub-tile-name, .product-card-name {
        font-size: 14px;
        line-height: 1.2;
    }

    .sub-tile-img { height: 120px; } /* Оптимизируем высоту под малые экраны */

.header-top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
}
.logo-area {
    flex: 0 ;
}
.search-area {
    display: none;
}


}

/* 3. Малые смартфоны (до 480px) — 2 в ряд (сетка) или 1 в ряд (список) */
@media screen and (max-width: 480px) {

    .sub-tiles-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Если карточки товаров становятся слишком мелкими, можно сделать в 1 колонку */
    /*
    .catalog-grid { grid-template-columns: 1fr; }
    */

    /* Прячем лишние отступы в обертке */
    .wrapper { padding: 0 10px; }
}


.sizes-wrapper table {
    border-collapse: collapse;
    width: 100%;
    color: #333;
}

.sizes-wrapper table td {
    border: none;
    border-top: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    padding: 7px;
    text-align: center;

}
.table-wrapper {
    overflow: auto;
}