/* stylesheet for the template main-catalogue */
/* стилевой файл для шаблона main-catalogue*/

#main-catalogue {
    padding-top: 20px;
    min-height: 600px;
}

#main-catalogue #left {
    width: 315px;
    display: inline-block;
    vertical-align: top;
}

#main-catalogue #right {
    width: 780px;
    display: inline-block;
    vertical-align: top;
    padding-bottom: 50px;
}

#main-catalogue #right h1 {
    font-size: 30px;
    line-height: 28px;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 50px;
}

#main-catalogue #navbar {
    border-bottom: 3px solid #fff; 
    padding: 10px 0px;
}

#main-catalogue #navbar.noborder {
    border-bottom: 0px; 
}

#main-catalogue #navbar em {
    display: inline-block;
    width: 6px;
    height: 11px;
    background: url(/project/img/navar.png) no-repeat;
    margin: 0px 10px;
}

#main-catalogue #navbar a:hover,
#main-catalogue #navbar a {
    text-transform: uppercase;
    color: #000;
    white-space: nowrap
}

#main-catalogue #navbar a:hover {
    text-decoration: none;
}

#main-catalogue #navbar span {
    text-transform: uppercase;
    color: #686868;
    white-space: nowrap
}

#main-catalogue .text-item  {
    padding-top: 20px;
    font-size: 16px;
}

#main-catalogue #search-form {
    background: #fff;
    padding: 10px 0px 10px 20px;
}

#main-catalogue #search-form * {
    display: inline-block;
    vertical-align: middle;
}

#main-catalogue #search-form h3 {
    color: #000;
    font-family: 'MyriadPro-Regular';
    font-size: 14px;
    font-weight: bold;
}

#main-catalogue #search-form input[type=text] {
    background: #c4c4c4;
    border: 0px;
    margin-left: 20px;
    width: 60%;
}

#main-catalogue #search-form input[type=button] {
    background: #a10400;
    color: #fff;
    font-family: 'MyriadPro-Regular';
    font-size: 14px;
    font-weight: bold;
    width: 110px;
    padding: 2px 0px;
    margin-left: 10px;
    border: 0px;
}


@media only screen and (max-width: 1100px) {

    #main-catalogue {
        padding-top: 10px;
    }

    #main-catalogue #left {
        height: 40px;
        overflow: hidden;
        width: calc(100% - 40px);
        padding-right: 20px;
        padding-left: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    #main-catalogue #right {
        width: calc(100% - 40px);
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 30px;
        
    }

    #main-catalogue #left h2 {
        font-style: normal;
        margin-left: 0px;
    }

    #main-catalogue #left:before {
        content: '';
        float: right;
        width: 30px;
        height: 30px;
        background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_113_648)'%3E%3Cpath d='M22.7824 14.0354L9.14599 0.399398C8.61354 -0.133148 7.75008 -0.133148 7.21754 0.399489C6.68508 0.932034 6.68508 1.7954 7.21763 2.32794L19.8897 14.9998L7.21754 27.6722C6.68508 28.2048 6.68508 29.0681 7.21763 29.6007C7.48381 29.8669 7.83281 30 8.18181 30C8.53081 30 8.87981 29.8669 9.14608 29.6006L22.7824 15.9639C23.0382 15.7081 23.1818 15.3613 23.1818 14.9997C23.1818 14.638 23.0382 14.2911 22.7824 14.0354Z' fill='black'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_113_648'%3E%3Crect width='30' height='30' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
        background-size: 50% 50%;
        background-position: center center;
        background-repeat: no-repeat;
        transform: rotate(90deg);
    }

    #main-catalogue #left.cat-mobile {
        height: auto;
    }

    #main-catalogue #left.cat-mobile h2 {
        margin-bottom: 20px;
    }

    #main-catalogue #left.cat-mobile:before {
        transform: rotate(270deg);
    }

    #main-catalogue #right .view {
        width: 100%;
        float: none;
    }
    #main-catalogue #navbar span {
        white-space: normal;
    }

    #main-catalogue #search-form {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    #main-catalogue #search-form input[type=text],
    #main-catalogue #search-form input[type=button] {
        margin-left: 0px;
    }
    #main-catalogue #search-form input[type=text] {
        width: calc(100% - 20px);
    }
}

/* stylesheet for the template cataloguesubmenu */
/* стилевой файл для шаблона defaultsubmenu*/
#submenu {
    padding: 10px 20px 20px 0px;
}

#submenu h2 {
    font-style: italic;
    font-weight: bold;
    font-family: 'MyriadPro-Regular';
    margin-bottom: 10px;
    margin-left: 20px;
}

#submenu a {
    display: block;
    padding-left: 20px;
}
#submenu a:hover {
    color: #000;
}

#submenu a.level0.s {
    background: #f9f9f9;
}

#submenu a.level0 {
    font-size: 18px;
    line-height: 20px;
    font-family: 'MyriadPro-Regular';
    text-decoration: none;
    padding-top: 7px;
    padding-bottom: 7px;
    margin-bottom: 5px; 
    text-transform: uppercase;
}


#submenu a.level1.s {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

#submenu a.level1 {
    font-size: 16px;
    color: #3d3d3d;
    font-family: 'MyriadPro-Regular';
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 1px;
}

#submenu a.level2.s {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

#submenu a.level2 {
    font-size: 14px;
    color: #3d3d3d;
    line-height: 16px;
    font-family: 'MyriadPro-Regular';
    padding-top: 2px;
    padding-bottom: 2px;
    padding-right: 0px;
    margin-bottom: 1px;
    margin-left: 20px;
}


/* stylesheet for the template otherproducts */
/* стилевой файл для шаблона otherproducts*/

.b-otherproducts {
    background: #fff;
    padding: 20px;
    margin-right: 15px;
    margin-bottom: 20px;
}
/* stylesheet for the template other */
/* стилевой файл для шаблона products.other*/
.product-other {
    width: 120px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.product-other h3 {
    font-family: 'MyriadPro-Regular';
    font-size: 14px;
    line-height: 14px;
    color: #a10400;
    display: inline;
}

.product-other h4 {
    font-family: 'MyriadPro-Regular';
    font-size: 14px;
    line-height: 14px;
    color: #000;
    display: inline;
}

.product-other img {
    width: 120px;
    height: 79px;
    margin-top: 5px;
}
/* stylesheet for the template item */
/* стилевой файл для шаблона products.item*/
.product-item {
    
}

.product-item .out-of-stock {
    font-size: 20px;
    padding: 20px;
}

.product-item .c-content {
    width: 500px;
    display: inline-block;
    vertical-align: top;
    margin-right: 25px;
}

.product-item .c-right {
    display: inline-block;
    vertical-align: top;
    width: 240px;
}

.product-item>.c-content>.prices {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #888;
    margin-bottom: 20px;
    height: 66px;
}

.product-item>.c-content>.prices .discount {
    width: 57px;
    height: 59px;
    display: block;
    position: absolute;
    background: url(/project/img/discount.png) no-repeat;
}

.product-item>.c-content>.prices .novelty {
    width: 57px;
    height: 59px;
    display: block;
    position: absolute;
    background: url(/project/img/novelty.png) no-repeat;
    overflow: hidden;
}


.product-item iframe {
    width: 100%;
    height: 320px;
}

.product-item .rounded {
    border-radius: 10px;
    padding: 15px 15px;
    margin-bottom: 20px;
}

.product-item .white {
    background: #fff;
}

.product-item .shadow {
    box-shadow: 0px 0px 5px #888;
}

.product-item .article {
    padding-bottom: 20px;    
}

.product-item .article h3 {
    font-weight: bold;
    color: #767676;
    font-size: 18px;
    margin-bottom: 5px;
}

.product-item .article h2 {
    color: #111111;
    font-weight: bold;
    font-size: 30px;
}

.product-item .rounded table {
    
}

.product-item .rounded table tr td {
    font-size: 14px;
    vertical-align: top;
}

.product-item .rounded>h3 {
    font-size: 18px;
    font-weight: bold;
    color: #000;
    margin-bottom: 15px;
}

.product-item .rounded p:last-child {
    padding-bottom: 0px;
}

.product-item>.c-content>.prices .op {
    display: block;
    font-size: 14px;
    font-weight: bold;
    text-decoration: line-through;
    color: #303030;
    height: 17px;
    margin-left: 80px;
    padding-top: 10px;
}

.product-item>.c-content>.prices .np {
    display: block;
    color: #303030;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 2px;
    margin-left: 80px;
}

.product-item>.c-content>.prices .np span {
    font-family: 'MyriadPro-Regular';
    font-size: 30px;
    color: #a10400;
}

.product-item>.c-content>.prices input[type=text] {
    float: right;
    margin-right: 30px;
    margin-top: 15px;
    width: 100px;
    border-radius: 10px;
    border: 1px solid #c0c0c0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding: 3px 0px;
}

.product-item>.c-content>.prices input[type=button] {
    float: right;
    height: 66px;
    margin-right: -5px;
    border: 0px;
    padding: 0px 25px;
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    color: #fff;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 0px 10px 10px 0;
    
    background: #ff0000; /* Old browsers */
    background: -moz-linear-gradient(top, #ff0000 0%, #8f0222 100%, #bb0000 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#8f0222), color-stop(100%,#bb0000)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ff0000 0%,#8f0222 100%,#bb0000 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ff0000 0%,#8f0222 100%,#bb0000 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ff0000 0%,#8f0222 100%,#bb0000 100%); /* IE10+ */
    background: linear-gradient(to bottom, #ff0000 0%,#8f0222 100%,#bb0000 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#bb0000',GradientType=0 ); /* IE6-9 */
}

.product-item .c-images {
    
}

.product-item .c-images a {
    border: 2px solid #fff;
    box-shadow: 0px 0px 10px #ccc;
    display: block;
    margin-bottom: 10px;
}

.product-item .c-images a img {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0, 0.1)
}

.product-item .c-images a img:hover {
    background: rgba(0,0,0, 0);
}

.product-item .c-recs {
    border-top: 2px solid #f2f2f2;
    margin-top: 20px;
    padding-top: 20px;
}

.product-item .c-recs>h3 {
    font-size: 18px;
    font-weight: bold;
}


@media only screen and (max-width: 1100px) {
    .product-item>div {
        width: 100% !important;
        margin-right: 0px !important;
        margin-left: 0px !important;
    }
    .product-item>.c-content>.prices {
        height: auto;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: stretch;
        padding-left: 10px;
        gap: 10px;
    }
    .product-item>.c-content>.prices input[type=button] {
        order: 4;
        margin: 0px;
        margin-left: auto;
    }
    .product-item>.c-content>.prices input[type=text] {
        margin: 0px;
        width: 60px;
    }
    .product-item>.c-content>.prices .op,
    .product-item>.c-content>.prices .np {
        margin: 0px;
        
    }
    .product-item>.c-content>.prices .op:empty {
        display: none;
    }
    .product-item>.c-content>.prices {
        position: relative;
    }
    .product-item>.c-content>.prices .novelty {
        left: 0px;
        top: 0px;
    }

    .product-item>.c-content>.prices .novelty + input[type=button] + input[type=text] {
        margin-left: 20px;
    }

    .product-item .shadow img {
        max-width: 100%;
        height: auto;
    }

    .product-item .shadow .shadow {
        box-shadow: none
    }

    .product-item .rounded .rounded {
        padding: 0px;
    }
    
    .product-item .c-images a {
        margin: 0 auto;
        max-width: 100%;
        background-position: center center !important;
    }

}