.nav-horizontal > header { height: 60px; background: #fff; color: var(--text); position: fixed; width: 100%; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
                           z-index: 100; transition: height 0.3s ease, background-color 0.3s ease; }
.nav-horizontal > main { padding-top: 60px; }
.nav-horizontal > header.small { height: 40px; }
.nav-horizontal > header > div > nav > ul { display: flex; }
.nav-horizontal > header > div > nav li a { display: block; padding: 0 20px; color: var(--text);
                                            text-transform: uppercase; font-weight: bold; }
.nav-horizontal > header > div > nav li a:hover { color: var(--text); }
.nav-horizontal > header > div > .logo h2 { color: var(--text); }

.cat a { margin: 2px 0; padding: 0 3px; display: inline-block; border-radius: 3px;
         transition: all .3s ease-in-out; border: 1px solid transparent; }
.cat a:hover { border: 1px solid #ccc; }
.cat input { zoom: 0.9; }
.bread { position: relative; display: inline-block; padding: 5px 0; }
.bread a { color: var(--text); margin: 0 10px; }
.bread-down { position: absolute; left: 0; top: 25px; background: #fff; display: none;
              transition: all 1s ease-in-out; z-index: 1; box-shadow: var(--box-shadow); }
.bread-down a { padding: 10px 20px; display: block; margin: 0; }
.bread-down a:hover { background: #ddd; }
.bread:hover .bread-down { display: block; }

.inner-cat { border: 1px solid #d1d4d7; padding: 5px 10px; border-radius: 5px; color: var(--text); display: block; }
.filter { width: 250px; background: #fff; padding: 10px; border-radius: 10px; }
.filter label { margin: 5px 0; display: block; }
.item { padding: 10px; width: calc(100% * (1/4) - 10px - 1px); transition: all .3s ease-in-out; border-radius: 10px; border: 1px solid #ddd;
        box-shadow: 0 1px 2px 0 #0000001a; min-width: 240px; position: relative; }
.item:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); border: 1px solid #4ac301; }
.item-image { height: 400px; width: 100%; object-fit: contain; }
.price { font-weight: bold; font-size: 18px; }
.item .item-hide { display: none; }
.fav { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url(../img/heart.svg) no-repeat; }
.fav-red { background: url(../img/heart-red.svg) no-repeat; }
.item-list { flex: 1; margin: 10px; padding: 20px 40px; }
.item-list .item-image { height: 150px; margin-right: 20px; width: auto; }

.swiper-slide img { width: 100%; height: 100%; object-fit: contain; object-position: top; }
.images-small { text-align: center; }
.images-small img { height: 100px; margin: 5px; cursor: pointer; }
.images-small img.active { border: 2px solid #3b9ff2; border-radius: 5px; }
.duplicate { margin-top: 10px; }
.duplicate-value { display: inline-block; border: 1px solid var(--td-border); border-radius: 5px; padding: 5px 10px; margin-right: 5px; margin-top: 5px; color: var(--text); cursor: pointer; }
.duplicate-value.active { background: var(--td-border); cursor: default; }
.cart-minus, .cart-plus { display: inline-block; border: 1px solid var(--td-border); border-radius: 30px; margin: 5px; color: var(--text); cursor: pointer;
                          width: 30px; height: 30px; line-height: 26px; font-size: 25px; text-align: center; }
.cart-num span { font-size: 16px; }
.cart-item { border-bottom: 1px solid var(--border); }
#cart .cart-item:last-child { border-bottom: none; }
.cart-item-img img { height: 70px; width: 70px; object-fit: contain; margin: 10px; }
.cart-item h3 { margin: 0; }
.cart-item-img, .cart-item-name { cursor: pointer; }
.remove { width: 20px; height: 20px; background: url(../img/remove.svg) 0/100% no-repeat; cursor: pointer; display: block; }
.placeholder { color: #888888; font-size: 13px; position: absolute; left: 17px; top: 4px; }
#order input[type="text"] { margin: 5px 0; border-radius: 5px; padding: 8px 16px; padding-top: 18px; font-size: 16px; }

.cat-hover {  border-radius: 10px; height: 400px; position: relative; overflow: hidden; }
.cat-hover::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transition: transform 0.5s ease; background-size: cover; background-position: center; background-repeat: no-repeat; }
#ch1::before { background-image: url(../img/Двери.jpg); }
#ch2::before { background-image: url(../img/Фурнитура.jpg); }
#ch3::before { background-image: url(../img/Ламинат.jpg); }
.cat-hover:hover::before { transform: scale(1.2); }
.cat-hover span { z-index: 1; font-size: 30px; /*background: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 5px; backdrop-filter: blur(2px);*/
                  opacity: 0; transition: opacity 0.3s ease-in-out; }
.cat-hover:hover span { opacity: 1; }
.shadow-text { color: #fff; text-shadow: 0 0 6px rgba(0, 0, 0, 1), 0 0 12px rgba(0, 0, 0, 0.8), 0 0 18px rgba(0, 0, 0, 0.5); }

.line-through { text-decoration: line-through; }
#search_bar { position: fixed; left: 0; top: -323px; width: 100%; height: 41px; background: #fff; z-index: 100; }
#search_result { position: absolute; top: 40px; max-height: 283px; width: 100%; overflow: auto; z-index: 100; width: 50%; background: #fff; left: 50%;
    transform: translate(-50%, 0) translateX(-30px); }
.search-result-item { cursor: pointer; border-bottom: 1px solid var(--border); padding: 10px 20px; transition: all .3s ease-in-out; }
.search-result-item img { height: 50px; width: 50px; object-fit: contain; margin: 0 10px; }
.search-result-item:hover { background-color: #f0f0f0; }
#search_result .search-result-item:last-child { border: none; }
.dot { position: absolute; right: 10px; top: -7px; width: 15px; height: 15px; background: #EB5757; border-radius: 15px; color: #fff; font-size: 11px; text-align: center; line-height: 15px; display: none }
#tiles.active, #list.active { background-color: #ddd; border-radius: 2px; }

.gallery-view { height: 600px; width: 400px; margin: 0 40px; }
.banner { background: url('../img/doors.png') fixed no-repeat; flex-direction: column; padding: 20px 30%; color: #fff; }
.text h2 { color: #555; margin-top: 20px; }
.text ul { margin-left: 20px; list-style-type: disc; }
.text li { margin: 5px 0; }
.highlight { font-weight: bold; color: #ddaf00; }
trix-editor { min-height: 500px !important; }


@media screen and (max-width: 480px) {
    .nav-horizontal > header > div > nav li a { padding: 0 10px; }
    .nav-horizontal > header > div > .main-nav > ul { display: block; }
    .nav-horizontal > header > div > .main-nav li a { padding: 10px 20px; }
    .main-nav { background: #fff; }
    .dot { right: 0; }
    .nav-horizontal > header { height: 40px; }

    .filter { position: fixed; left: 0; top: 40px; bottom: 0; overflow: auto; z-index: 100; display: none; }
    .item { width: 100%; margin-bottom: 20px; }
    .gallery-view { width: calc(100% - 100px); margin: 0 auto; height: auto; }
    .swiper-button-prev, .swiper-button-next { display: none; }

    .cat-hover { height: 200px; margin: 10px 0; }
    .nav-horizontal > main { padding-top: 40px; }
    .banner { padding: 20px; }
}