/*
Theme Name: Armata-M
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: Borland
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfour
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

*::-webkit-scrollbar {
  width: 10px;             
}

*::-webkit-scrollbar-track {
  background: transparent;      
}

*::-webkit-scrollbar-thumb {
  background-color: #DB011B;  
  border-radius: 0;     
  /*border: 3px solid white; */
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Montserrat';
    background:#FCFCFC;
}
body > .container {
    flex-grow:1;
}
a {
    text-decoration:none;
    color:black;
    transition:0.3s;
}
a:hover {
    color:#DB011B;
}
header {
    padding-top:21px;
    padding-bottom:25px;
    border-bottom:1px solid #D7D7D7;
    font-weight:500;
}
.upperheader {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(20px, 4vw, 50px); 
}
.header-right-border {
    border-right: 1px solid #DB011B42;
    padding-right: clamp(20px, 4vw, 50px);
    gap: clamp(15px, 3vw, 48px); 
}
.header-left-border {
    padding-left: clamp(20px, 4vw, 50px);
    gap: clamp(15px, 3vw, 48px); 
}
.header-left-border a, .header-right-border a {
    gap: clamp(15px, 4vw, 22px); 
}

.top-menu {
    background:#F9F9F9;
    padding:19px 0;
}
.menu-header {
    display:flex;
    flex-wrap:wrap;
    gap: 20px; 
    list-style:none;
    padding:0;
    margin:0;
    justify-content:space-between;
    font-size:20px;
    font-weight:500;
}
.menu-header a {
    font-size: 20px;
    font-weight: 500;
    text-transform: uppercase;
}
/* ==========================================================================
   1. ГЛАВНЫЙ КОНТЕЙНЕР (На всю ширину экрана)
   ========================================================================== */
.full-width-slider {
    width: 100%;
    position: relative;
    /* Резервируем место снизу под слайдером для кнопок и точек */
    padding-bottom: 60px; 
    box-sizing: border-box;
}

/* Ограничиваем только саму ленту со слайдами, чтобы контент не прижимался к краям экрана */
.full-width-slider .slick-list {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}
.full-width-slider:not(.slick-initialized) {
    display: flex;
    overflow: hidden;
}

.full-width-slider:not(.slick-initialized) .slider-item {
    width: 100%;
    flex-shrink: 0;
}

/* Скрываем со 2-го и все последующие слайды */
.full-width-slider:not(.slick-initialized) .slider-item:nth-child(n+2) {
    display: none;
}
/* ==========================================================================
   2. СТРЕЛКИ (Выносим под слайдер по бокам контентной зоны)
   ========================================================================== */
.full-width-slider .slick-arrow {
    position: absolute;
    /* Опускаем стрелки в зарезервированную нижнюю область */
    bottom: 15px; 
    border: none;
    background: transparent;
    color: #333;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    padding: 10px;
    z-index: 10;
}

/* Левая стрелка — выравниваем по левому краю контентной зоны (1200px) */
 .slick-prev {
    left: 15px; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 89px;
    height: 89px;
    border-radius: 50%;
    border: 0;
    background: white;
    color: #DB011B;
    font-weight: bold;
}

/* Правая стрелка — выравниваем по правому краю контентной зоны (1200px) */
 .slick-next {
    /* Формула: (100% - ширина_контента) / 2 */
    right: 15px; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 89px;
    height: 89px;
    border-radius: 50%;
    border: 0;
    background: white;
    color: #DB011B;
    font-weight: bold;
}

/* ==========================================================================
   3. ИНДИКАТОРЫ-ПОЛОСКИ (Dots — по центру между стрелками)
   ========================================================================== */
.full-width-slider .slick-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex !important;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 10px; /* Расстояние между полосками */
    z-index: 5;
}

/* Элемент списка (li) */
.full-width-slider .slick-dots li {
    display: block;
    margin: 0;
    padding: 0;
}

/* Превращаем дефолтные круглые кнопки с цифрами в полоски */
.full-width-slider .slick-dots li button {
    width: 40px; /* Длина одной полоски */
    height: 3px; /* Толщина полоски */
    background: #e0e0e0; /* Серый цвет неактивных линий */
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    outline: none;
    transition: background 0.3s ease;
    
    /* Скрываем дефолтный текст цифр (1, 2, 3), который вывела библиотека */
    font-size: 0;
    line-height: 0;
    color: transparent; 
}

/* Активная полоска из вашего графического примера */
.full-width-slider .slick-dots li.slick-active button {
    background: #cc0022; /* Красный цвет активной линии */
}

/* Эффект при наведении на неактивные полоски */
.full-width-slider .slick-dots li:not(.slick-active):hover button {
    background: #b5b5b5;
}

.redborder {
    position: relative;
    display: inline-block; /* Чтобы полоска была по ширине текста, а не на всю строку */
    padding-bottom: 10px;  /* Отступ между текстом и полоской */
}

.redborder::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 200px;           /* Полоска растягивается на всю ширину заголовка */
    height: 3px;           /* Толщина полоски */
    background-color: #d30613; /* Красный цвет (можно заменить на нужный hex) */
}
.our-works {
    display:flex;
    max-width:700px;
    text-align:center;
    margin:20px auto;
    color:#696969;
    font-size:20px;
}

.btn-detail {
    color:black;
    display:flex;
    width:263px;
    padding:20px 25px;
    position:relative;
    border-radius:16px;
    border:1px solid #C7C7C7;
    font-weight:500;
    font-size:20px;
    transition:0.3s ease-in;
    justify-content:space-between;
    align-content:center;
}
.btn-detail img {
    display: flex;
    margin: auto 0;
}

footer {
    background:#F0F0F0;
    padding:23px 0;
}
.products {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap:15px;
}
.product-card {
        display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: relative;
    padding-top: 25px;
}
.product-card h3 {
    font-size: 16px;
    font-weight: bold;
}
.redh4 {
    color:#F3021F;
    font-size: 40px;
    font-weight: 700;
}
.h2back {
    color:white;
    background: #DB011B;
    font-weight: 500;
    border-radius: 8px;
    padding: 6px;
}
.czvets {
    flex-grow: 1;
}
.product-card-price {
    font-size: 22px;
    font-weight: bold;
}
.product-card-price-secondary {
    font-size: 20px;
}
.sostoyanie_sklad {
    text-transform: uppercase;
    background: #0bc535;
    color: white;
    font-weight: 600;
    padding: 8px;
    border-radius: 8px;
}
.sostoyanie_zakaz {
    background: white;
    color: black;
    font-weight: 600;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
}
.sostoyanie_skoro {
    background: #ec6657;
    color: white;
    font-weight: 600;
    padding: 8px;
    border-radius: 8px;
}
.sostoyanie_other {
    background: #ffe92680;
    color: black;
    font-weight: 600;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #e1e1e1;
}
.product-card-param {
    font-size: 14px;
}
.komplekt_span {
    font-size: 12px;
}
.seriya_h2 {
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 500;
    text-align: center;
    margin-bottom: 25px;
    margin-top: 25px;
}
.product-card-label {
    position: absolute;
    top: 0;
}

.catalog-categories {
    margin-top: 30px;
}

.catalog-category-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.catalog-category {
    background: #fff;
    height: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.catalog-category-link:hover .catalog-category {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}


/* Изображение */

.catalog-category-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 20px;
    overflow: hidden;
    flex-grow: 1;
}

.catalog-category-image img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: 203px;
    height: auto;
    object-fit: contain;
}


/* Нижняя часть карточки */

.catalog-category-content {
    border-top: 1px solid #e5e5e5;
    text-align: center;
    padding: 14px 10px 16px;
    min-height: 85px;
}

.catalog-category-content h4 {
    margin: 0 0 5px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    text-transform: uppercase;
    color: #111;
}

.catalog-category-description {
    font-size: 12px;
    line-height: 1.35;
    color: #b5b5b5;
}

.mega-menu {
    width: 100%;
    background: #e9e9e9;
    position: relative;
}

.mega-menu-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.mega-menu-list > li {
    /*flex: 1 1 0;*/
    position: static;
    text-align: center;
}

.mega-menu-list > li > a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 55px;
    padding: 10px 5px;

    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;

    color: #222;
    text-decoration: none;
}
/* Выпадающая панель */

.mega-menu-list > li > .sub-menu {
    display: none;

    position: absolute;
    top: 100%;
    left: 0;
    right: 0;

    z-index: 1000;

    background: #e9e9e9;

    padding: 30px 40px;

    list-style: none;
}


/* Открытие при наведении */

.mega-menu-list > .menu-item-has-children:hover > .sub-menu {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 30px;
}


/* Второй уровень */

.mega-menu-list > li > .sub-menu > li > a {
    display: block;

    font-size: 16px;
    font-weight: 700;

    color: #222;

    text-decoration: none;

    margin-bottom: 15px;
}


/* Третий уровень */

.mega-menu-list > li > .sub-menu > li > .sub-menu {
    display: block;

    list-style: none;

    padding: 0;
    margin: 0;
}


/* Ссылки третьего уровня */

.mega-menu-list > li > .sub-menu > li > .sub-menu > li > a {
    display: block;

    font-size: 14px;
    font-weight: 400;

    color: #333;

    text-decoration: none;

    margin-bottom: 10px;
}


/* Hover */

.mega-menu-list a:hover {
    text-decoration: underline;
}
.footer-contacts * {
    width: fit-content;
}
.door-carousel img {
    max-height: 500px;
}
.carousel-control-next-icon, .carousel-control-prev-icon {
    filter: invert(1);
}
.carousel-indicators {
    filter: invert(1);
}

/* Содержание каталога */

.catalog-contents-item {
    display: flex;
    height: 100%;
}

.catalog-contents-color {
    flex: 0 0 22px;
    min-height: 100px;
    margin-right: 20px;
}

.catalog-contents-body {
    flex: 1;
    min-width: 0;
}

.catalog-contents-body h5 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 8px;
}

.catalog-contents-body h5 small {
    font-size: 9px;
    font-weight: 400;
}

.catalog-contents-body a {
    display: block;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.5;
    border-bottom: 1px dotted #999;
}

.catalog-contents-body a:hover {
    color: #000;
}

.catalog-contents-subtitle {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}


/* Цветные полосы */

.bg-strong-flex {
    background-color: #d63845;
}

.bg-emalex {
    background-color: #31578e;
}

.bg-emalex-lp {
    background-color: #31578e;
}

.bg-ecoshpon {
    background-color: #31578e;
}

.bg-jemal {
    background-color: #bd2878;
}

.bg-patina {
    background-color: #bd2878;
}

.bg-invisible {
    background-color: #bd2878;
}

.bg-decor {
    background-color: #b65b2c;
}

.bg-entrance {
    background-color: #367b4d;
}