/* Define CSS Variables */
:root {
    --typeHeaderSize: 35px;
}

/* Reset default margins and ensure full width */
* {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Default h2 styling */
h2 {
    font-size: 1.3em !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    font-weight: 900 !important;
    font-family: Arial !important;
}

body {
    width: 100% !important;
    min-width: 100vw !important;
    overflow-x: hidden !important;
    background-color: white !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Header and Mobile Menu */
.nav-menu {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: -90% !important;
    width: 90% !important;
    height: 100vh !important;
    background-color: white !important;
    padding: 0px 0 20px !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    border-top: 1px solid #eee !important;
    box-shadow: none !important;
    transition: left 0.3s ease-in-out !important;
}

.nav-menu::-webkit-scrollbar {
    display: none !important;
}

.nav-menu li {
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
}

.nav-menu li a,
.nav-menu li span {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-decoration: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    position: relative !important;
    text-transform: none !important;
    background-color: white !important;
}

.nav-menu li span {
    text-transform: none !important;
}

.logo img {
    width: 200px !important;
    height: auto !important;
    padding-top: 5px !important;
    vertical-align: middle !important;
}

#menu-toggle:checked ~ nav .nav-menu {
    left: 0 !important;
}

.menu-icon {
    display: block !important;
    font-size: 30px !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 50% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 1002 !important;
    transition: opacity 0.3s ease-in-out !important;
}

#menu-toggle:checked ~ .menu-icon {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.close-icon {
    padding-bottom: 20px !important;
    margin-bottom: 20px !important;
    padding-left: 20px !important;
    display: block !important;
    font-size: 36px !important;
    cursor: pointer !important;
    width: 36px !important;
    height: 36px !important;
    background: #fff !important;
/*  opacity: 0;  */
/*  visibility: hidden; */
    transition: opacity 0.3s ease-in-out !important;
}

/* Corrected selector to match HTML structure */
#menu-toggle:checked ~ .close-icon {
    opacity: 1 !important;
    visibility: visible !important;
}

.menu-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important;
    z-index: 998 !important;
    transition: opacity 0.3s ease-in-out !important;
}

#menu-toggle:checked ~ .menu-overlay {
    display: block !important;
}

.menu-icon:focus,
.menu-icon:active,
.close-icon:focus,
.close-icon:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.header-top {
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    padding: 20px 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: white !important;
    box-shadow: none !important;
    z-index: 1000 !important;
}

.smm-link {
    display: inline-block !important;
    padding: 20px 10px !important;
    text-align: center !important;
    border-bottom: none !important;
    width: auto !important;
}

.smm-icon {
    width: 32px !important;
    height: 32px !important;
}

.nav-menu li a:active,
.nav-menu li span:active {
    background-color: #f8f8f8 !important;
}

/* Dropdown Menu Styles */
.dropdown-content {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
    background-color: white !important;
    height: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    transition: none !important;
    z-index: 1002 !important;
}

.dropdown-content-container {
    width: 100% !important;
    display: block !important;
    background-color: white !important;
}

.dropdown-content img {
    display: none !important;
}

.dropdown-item .dropdown-title a {
    padding: 12px 20px !important;
    font-size: 14px !important;
    text-transform: none !important;
    display: block !important;
    text-align: left !important;
    color: #333 !important;
    background-color: white !important;
}

.dropdown-item li a {
    padding: 12px 30px 12px 40px !important;
    font-size: 14px !important;
    text-transform: none !important;
    display: block !important;
    text-align: left !important;
    background-color: white !important;
}

.dropdown-item li {
    text-align: left !important;
    position: relative !important;
    background-color: white !important;
}

.dropdown-item li::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    background: #000 !important;
    left: 17px !important;
    height: 100% !important;
}

.dropdown-item li.dropdown-title::before {
    content: none !important;
}

.dropdown-item li:first-child::before {
    top: 1em !important;
    bottom: 0 !important;
}

.dropdown-item li:last-child::before {
    top: 0 !important;
    bottom: 1em !important;
}

.dropdown ul {
    padding-bottom: 10px !important;
    background-color: white !important;
}

.dropbtn-wrapper {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 15px 20px !important;
    position: relative !important;
    background-color: white !important;
    z-index: 1003 !important;
}

.dropbtn-link {
    text-decoration: none !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    flex-grow: 1 !important;
}

.arrow-button {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 15px !important;
    z-index: 1004 !important;
}

.arrow {
    font-size: 20px !important;
    color: #666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: rotate(0deg) !important;
    width: 24px !important;
    height: 24px !important;
    transition: transform 0.3s ease !important;
}

/* Menu Overlay */
.menu-overlay {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: transparent !important; /* Keep transparent to test shadow */
    z-index: 998 !important;
    transition: opacity 0.3s ease-in-out !important;
    box-shadow: none !important;
}

#menu-toggle:checked ~ .menu-overlay {
    display: block !important;
}

/* Other sections remain unchanged for brevity */

.quote-block {
    background-color: #f9f9f9;
    padding: 20px !important;
    text-align: center;
    font-size: 1.1em;
    border: 2px solid #ccc;
    border-radius: 10px;
    margin: 20px auto !important;
    max-width: 1200px;
}

.hero {
    position: relative !important;
    width: 100vw !important;
    height: 100vw !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    z-index: 1 !important;
}

.hero-image {
    width: 100vw !important;
    height: 100vw !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
}

.hero-text {
    position: absolute !important;
    bottom: 30px !important;
    left: 30px !important;
    right: 0px !important;
    transform: none !important;
    text-align: left !important;
    color: #fff !important;
    z-index: 2 !important;
    max-width: 80% !important;
    text-transform: uppercase !important;
}

.hero-text h1 {
    font-size: calc(var(--typeHeaderSize) * 0.9) !important;
    line-height: 1.2 !important;
}

.hero-subtitle {
    margin-bottom: 15px !important;
}

.hero-text .btn {
    display: inline-block !important;
    padding: 10px 20px !important;
    background-color: #007bff !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 5px !important;
}

.product-grid {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    gap: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: 0 !important;
    scroll-behavior: smooth !important;
    transition: scroll-left 0.3s ease !important;
    justify-content: flex-start !important;
    margin-bottom: 30px !important;
    z-index: 1 !important;
}

.product {
    flex: 0 0 calc(100vw / 3 - 10px) !important;
    max-width: calc(100vw / 3 - 10px) !important;
    min-width: 0 !important;
    text-align: center !important;
    border: none !important;
    outline: none !important;
}

.image-container {
    position: relative !important;
    margin-bottom: 10px !important;
    width: 100% !important;
}

.product-image,
.hover-image {
    width: 100 !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
}

.product .buy-button {
    display: none !important;
}

.product p {
    font-size: 14px !important;
    margin-top: 5px !important;
    text-transform: uppercase !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.banners {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100vw !important;
    margin-bottom: 30px !important;
    z-index: 1 !important;
}

.banner {
    width: 90vw !important;
    height: auto !important;
    position: relative !important;
}

.banner img {
    width: 100% !important;
    height: 70vw !important;
    display: block !important;
    object-fit: cover !important;
}

.banner-text {
    position: absolute !important;
    bottom: 30px !important;
    left: 30px !important;
    transform: none !important;
    text-align: left !important;
    color: #fff !important;
    padding: 0 !important;
}

.banner-name {
    font-size: 1.6em !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
}

.banner-subtitle {
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
}

.banner-text .btn {
    display: inline-block !important;
    padding: 8px 15px !important;
    background-color: #007bff !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 5px !important;
}

.blog-content {
    width: 100% !important;
    z-index: 1 !important;
}

.blog-content .blog-image {
    width: 100 !important;
    height: auto !important;
    display: block !important;
    object-fit: cover !important;
    min-height: 250px !important;
    background-color: #f0f0f0 !important;
    overflow: visible !important;
}

.blog-content .blog-text-overlay-narrow {
    position: relative !important;
}

.blog-text-overlay-narrow {
    width: 100% !important;
    font-size: 1em !important;
    max-width: 100% !important;
    padding: 23px !important;
    background-color: #fff !important;
    text-align: left !important;
    margin-top: 0 !important;
    display: block !important;
}

.blog-text-overlay-narrow h3 {
    font-size: calc(var(--typeHeaderSize) * 0.62) !important;
    margin-bottom: 10px !important;
    color: #333 !important;
}

.blog-text-overlay-narrow p {
    font-size: 14px !important;
    color: #666 !important;
    margin-bottom: 15px !important;
}

.blog-text-overlay-narrow .btn {
    display: inline-block !important;
    margin-top: 10px !important;
    padding: 6px 12px !important;
    background-color: #007bff !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    visibility: visible !important;
    border: 1px solid #000 !important;
}

footer {
    text-align: center !important;
    padding: 20px !important;
    font-size: 14px !important;
    z-index: 1 !important;
}

/* Remove Browser Default Shadows */
.nav-menu:focus,
.dropdown-content:focus,
nav:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure no parent shadows or borders */
nav {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border: none !important;
    background-color: white !important;
    z-index: 1001 !important;
}

/* Force removal of any residual shadows or borders */
.nav-menu,
.dropdown-content {
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    -webkit-border-image: none !important;
    -moz-border-image: none !important;
    -o-border-image: none !important;
    border-image: none !important;
    -webkit-filter: none !important;
    filter: none !important;
}

/* Prevent hover-induced shadows */
.dropdown-content:hover,
.nav-menu:hover {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

/* ГЛАВНАЯ */

/* Варианты два в ряд */


.catalog_block.items .item {
width: 45%!important;
} 

.sku_props>div {
padding: 0px;
}


.bx_catalog_item_scu ul li.item {
width: 45%!important;
}

.catalog_block.items .item {
width: auto%!important;
}

body .ajax_load .bx_catalog_item_scu ul li.item {
width: auto!important;
}

bx_catalog_item_scu wrapper_sku sku_in_section {
padding: 0px!important;
}


.sku_props>div:last-of-type {
    padding: 0px 0px 20px 0px;
}













/* Browser-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .nav-menu {
        -webkit-box-shadow: none !important;
        border-bottom: 0 !important;
        -webkit-transform: translateZ(0) !important;
    }
    .dropdown-content {
        -webkit-box-shadow: none !important;
        border-bottom: 0 !important;
    }
}