/* =============================================================
   dveri21.kz — простые стили (OpenCart без Bootstrap CSS)
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body {
    margin: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #222;
    background: #fff;
    overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: #0a6ebd; text-decoration: none; }
a:hover { color: #084f88; text-decoration: underline; }
h1,h2,h3,h4,h5 { margin: 0 0 12px; font-family: 'PT Sans Narrow', 'Open Sans', Arial, sans-serif; color: #1f2a37; }
h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 19px; }
ul, ol { padding-left: 20px; }

/* ---- BS3 grid fallback ---- */
.container, .container-fluid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}
[class*="col-"] {
    padding: 0 15px;
    width: 100%;
}
.col-sm-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.col-sm-2  { flex: 0 0 16.666%; max-width: 16.666%; }
.col-sm-3  { flex: 0 0 25%;     max-width: 25%; }
.col-sm-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-sm-5  { flex: 0 0 41.666%; max-width: 41.666%; }
.col-sm-6  { flex: 0 0 50%;     max-width: 50%; }
.col-sm-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.col-sm-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-sm-9  { flex: 0 0 75%;     max-width: 75%; }
.col-sm-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.col-sm-11 { flex: 0 0 91.666%; max-width: 91.666%; }
.col-sm-12 { flex: 0 0 100%;    max-width: 100%; }
.col-md-3  { flex: 0 0 25%;     max-width: 25%; }
.col-md-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-6  { flex: 0 0 50%;     max-width: 50%; }
.col-md-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.col-md-9  { flex: 0 0 75%;     max-width: 75%; }
.col-md-12 { flex: 0 0 100%;    max-width: 100%; }
.col-lg-12 { flex: 0 0 100%;    max-width: 100%; }
[class*="col-xs-"] { flex: 0 0 100%; max-width: 100%; }

.pull-left  { float: left; }
.pull-right { float: right; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.list-unstyled, .list-inline { list-style: none; padding-left: 0; margin: 0; }
.list-inline > li { display: inline-block; padding-right: 8px; }

.hidden-xs, .visible-xs { display: none; }
.hidden-sm { display: none; }
.hidden-md { display: none; }

/* ---- Header ---- */
/* Тема OpenCart задаёт .site-wrapper { height: 996px } хардкодом,
   из-за чего #main-text (~9500px) вылезает и перекрывается с секциями,
   идущими ПОСЛЕ .site-wrapper в DOM. */
.site-wrapper { width: 100%; height: auto !important; min-height: 0 !important; }
header.containerero {
    position: relative !important;
    z-index: 100;
    width: 100%;
    max-width: 100%;
    background: #1f2a37;
    padding: 14px 0 0;
    color: #fff;
}
header.containerero a { color: #fff; }
header.containerero h1, header.containerero h2, header.containerero h3 { color: #fff; }
header.containerero .container { max-width: 1200px; }
.bg-dark { background: transparent; }
#logo svg { max-height: 70px; width: auto; display: block; }

/* ---- Main menu ---- */
#menu.navbar {
    background: #162029;
    margin: 18px 0 0 !important;
    padding: 0;
    border: none !important;
}
#menu .navbar-header { display: none; }
#menu .navbar-collapse { width: 100%; }
#menu ul.nav.navbar-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
#menu ul.nav > li {
    position: relative;
    list-style: none;
}
#menu ul.nav > li > a {
    display: block;
    padding: 14px 18px;
    color: #fff !important;
    text-decoration: none;
    font-size: 15px;
    line-height: 1.2;
    white-space: nowrap;
}
#menu ul.nav > li:hover > a { background: #0a6ebd; color: #fff !important; }
#menu .dropdown-toggle1 { display: none !important; }

#menu .dropdown-menu,
#menu .mimenu1 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e1e5ea;
    box-shadow: 0 6px 18px rgba(0,0,0,.1);
    z-index: 1000;
    padding: 10px 0;
    margin: 0;
}
#menu ul.nav > li.dropdown:hover > div > .dropdown-menu,
#menu ul.nav > li.dropdown:hover > .dropdown-menu,
#menu ul.nav > li.dropdown:hover .mimenu1 { display: block; }
#menu .dropdown-menu a,
#menu .mimenu1 a { color: #222 !important; padding: 6px 16px; display: block; }
#menu .dropdown-menu a:hover,
#menu .mimenu1 a:hover { background: #f5f7fa; color: #0a6ebd !important; }
#menu .dropdown-menu .list-unstyled,
#menu .mimenu1 .list-unstyled { padding: 0 8px; }
#menu .dropdown-menu .list-unstyled ul {
    padding-left: 14px;
    border-left: 1px solid #eee;
    margin: 4px 0 8px;
}

/* hide BS3 navbar toggle icon block */
#menu .btn-navbar, #menu .navbar-toggle { display: none; }

/* ---- Top strip (hidden by default but keep readable) ---- */
.topper { background: #162029; color: #d8dde3; padding: 4px 0; font-size: 13px; }
.topper a { color: #d8dde3; }

/* ---- Gallery / collection banners (the oversized 2793px images) ---- */
.box {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    border-radius: 6px;
    background: #f5f7fa;
    max-width: 100%;
}
.box .img-gallery, .box img.img-gallery.modal-img {
    width: 100% !important;
    height: auto;
    max-width: 100%;
    display: block;
}
.gallery-title {
    position: absolute;
    left: 18px; top: 18px;
    background: rgba(31,42,55,.85);
    color: #fff;
    padding: 8px 14px;
    border-radius: 4px;
    font-family: 'PT Sans Narrow', sans-serif;
}
.gallery-title p { margin: 0; font-size: 12px; text-transform: uppercase; color: #b8c4d1; }
.gallery-title h3 { margin: 0; color: #fff; font-size: 18px; }
.link-gallery { display: block; }

/* ---- Sections (group-1, group-2) ---- */
section, .group-1, .group-2 { max-width: 1200px; margin: 20px auto; padding: 0 15px; }
.justify-content-center { text-align: center; }

/* ---- MultiCarousel -> static flex grid ---- */
.MultiCarousel {
    float: none !important;
    overflow: visible !important;
    width: 100% !important;
    padding: 10px 0 !important;
    margin: 20px 0;
}
.MultiCarousel > h2 { margin: 0 0 14px; }
.MultiCarousel .MultiCarousel-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px;
    float: none !important;
    width: 100% !important;
    transform: none !important;
    transition: none !important;
}
.MultiCarousel .item {
    float: none !important;
    width: auto !important;
    flex: 0 1 calc((100% - 64px) / 5);
    max-width: 240px;
}
.MultiCarousel .leftLst, .MultiCarousel .rightLst { display: none !important; }

/* ---- Product thumb ---- */
.product-layout {
    position: relative;
    overflow: hidden;
    padding: 0 8px 16px;
}
.MultiCarousel .item { position: relative; overflow: hidden; }
.product-thumb {
    position: relative;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
    overflow: hidden;
    text-align: center;
    transition: box-shadow .15s;
}
.product-thumb:hover { box-shadow: 0 4px 14px rgba(10,110,189,.14); }
.product-thumb .image { padding: 8px; }
.product-thumb img { width: 100%; height: 220px; object-fit: contain; background: #f8f9fb; }
.product-thumb a { color: #1f2a37; font-weight: 600; display: block; padding: 8px 10px; }
.product-thumb .caption { padding: 6px 10px 12px; }

/* Инлайн-ярлык "NEW" (`position:absolute; margin-left:54%; width:25%;`)
   в HTML привязывается к .product-layout — после относительного позиционирования
   ограничиваем размеры, чтобы не разъезжался. */
.product-layout > div[style*="position:absolute"],
.product-layout > div[style*="position: absolute"] {
    left: auto !important;
    right: 6px !important;
    top: 6px !important;
    margin: 0 !important;
    width: auto !important;
    min-width: 42px;
    padding: 3px 8px !important;
    font-size: 12px;
    border-radius: 3px;
    z-index: 4;
}

/* ---- FontAwesome fallback: файлы шрифта битые (404 HTML вместо woff).
       Полностью убираем иконки, чтобы не было "крякозябр". ---- */
.fa, i.fa, i.fas, i.fab, i.far, span.fa { display: none !important; }
/* Но не трогаем bg-иконки, если .fa применён как модификатор у кнопки */
.btn .fa { display: none !important; }

/* ---- Breadcrumb ---- */
.breadcrumb {
    display: flex; flex-wrap: wrap; list-style: none;
    padding: 10px 16px; margin: 0 0 20px;
    background: #f5f7fa; border-radius: 4px;
}
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: "/"; padding: 0 10px; color: #9aa4b2; }

/* ---- Callme widget ---- */
.callme, #callme {
    position: fixed; right: 16px; bottom: 16px;
    z-index: 1200; padding: 10px 16px; border-radius: 24px;
    background: #0a6ebd; color: #fff; box-shadow: 0 6px 18px rgba(10,110,189,.35);
}
.callme a, #callme a { color: #fff; }

/* ---- Wab (floating whatsapp/contact button) ---- */
.wab { position: fixed; right: 16px; bottom: 74px; z-index: 1200; }
.wab a { display: block; padding: 10px 14px; background: #25d366; color: #fff; border-radius: 24px; }

/* ---- Bootstrap 3 carousel (no BS CSS) ---- */
.carousel, .carousel.slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    max-height: 540px;
}
.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    max-height: 540px;
}
.carousel-inner .item {
    display: none;
    position: relative;
    width: 100%;
    max-width: 100%;
}
.carousel-inner .item.active,
.carousel-inner .item.next,
.carousel-inner .item.prev { display: block; }
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition: opacity .6s ease;
    position: absolute;
    inset: 0;
}
.carousel-fade .carousel-inner .item.active { opacity: 1; position: relative; }
.carousel-inner .item img {
    width: 100% !important;
    height: 540px !important;
    object-fit: cover;
    display: block;
}
.carousel-caption {
    position: absolute;
    left: 5%; right: 5%; bottom: 15%;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
    text-align: center;
}
.carousel-caption h2 { color: #fff; font-size: 36px; margin: 0 0 10px; }
.carousel-caption p { font-size: 18px; }
.carousel-control {
    position: absolute;
    top: 0; bottom: 0;
    width: 8%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 28px;
    background: rgba(0,0,0,.15);
    text-decoration: none;
    opacity: .6;
    transition: opacity .2s;
}
.carousel-control:hover { opacity: 1; color: #fff; text-decoration: none; }
.carousel-control.left  { left: 0; }
.carousel-control.right { right: 0; }
.lightsquad { display: none; }

/* ---- AI-SEO article block ---- */
#main-text {
    max-width: 900px;
    margin: 60px auto 30px;
    padding: 0 15px;
    line-height: 1.7;
    font-size: 16px;
}
@media (max-width: 768px) {
    #main-text { margin-top: 40px; }
}
#main-text h1 { font-size: 30px; margin-bottom: 20px; }
#main-text h2 { font-size: 24px; margin-top: 28px; }
#main-text h3 { font-size: 19px; margin-top: 20px; }
#main-text p { margin: 0 0 14px; }
#main-text ul, #main-text ol { margin: 0 0 14px 0; padding-left: 22px; }

/* ---- Footer ---- */
footer {
    width: 100% !important;
    background: #1f2a37;
    color: #d8dde3;
    padding: 30px 0 18px;
    margin-top: 40px;
}
footer .container { max-width: 1200px; }
footer a { color: #d8dde3; }
footer a:hover { color: #fff; }
footer h2, footer h3, footer h5 { color: #fff !important; font-size: 17px; margin-bottom: 12px; }
footer ul li { margin-bottom: 4px; list-style: none; }
footer .list-unstyled { padding: 0; }

/* ---- Hide inline style blocks leaking as text (defensive) ---- */
style { display: none !important; }

/* ---- Adaptive ---- */
@media (min-width: 769px) {
    .hidden-sm, .hidden-md { display: revert; }
    .visible-xs { display: none; }
}
@media (max-width: 768px) {
    #menu ul.nav.navbar-nav { flex-direction: column; }
    #menu ul.nav > li { width: 100%; }
    #menu .dropdown-menu, #menu .mimenu1 { position: static; box-shadow: none; border: none; }
    .MultiCarousel .item { flex-basis: calc(50% - 8px); max-width: 50%; }
    .col-sm-3, .col-sm-4, .col-sm-6, .col-sm-8, .col-sm-9 { flex: 0 0 100%; max-width: 100%; }
    .hidden-xs { display: none; }
    .visible-xs { display: revert; }
}