@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/Montserrat-Thin.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-weight: 100;
    font-display: swap;
    src: url(../fonts/Montserrat-ThinItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/Montserrat-ExtraLight.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 200;
    src: url(../fonts/Montserrat-ExtraLightItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/Montserrat-Light.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/Montserrat-LightItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/Montserrat-Regular.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/Montserrat-Italic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 500;
    src: url(../fonts/Montserrat-Medium.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 500;
    src: url(../fonts/Montserrat-MediumItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/Montserrat-SemiBold.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 600;
    src: url(../fonts/Montserrat-SemiBoldItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/Montserrat-Bold.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/Montserrat-BoldItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/Montserrat-ExtraBold.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 800;
    src: url(../fonts/Montserrat-ExtraBoldItalic.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/Montserrat-Black.woff2) format("woff2")
}

@font-face {
    font-family: MontserratDev;
    font-style: italic;
    font-weight: 900;
    src: url(../fonts/Montserrat-BlackItalic.woff2) format("woff2")
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

input[type=number] {
    -webkit-appearance: textfield;
    appearance: textfield;
    -moz-appearance: textfield
}

input, select, textarea {
    background: #ebebeb !important;
    border: none;
    border-radius: 4px;
    font-family: MontserratDev, sans-serif !important
}

select {
    cursor: pointer
}

.input, .textarea {
    background: #ebebeb !important;
    border: 1px solid #646868 !important;
    border-radius: 4px;
    color: #1b2354 !important;
    padding-left: 10px;
    padding-right: 10px
}

.input::-webkit-input-placeholder, .textarea::-webkit-input-placeholder {
    color: #646868
}

.input::-moz-placeholder, .textarea::-moz-placeholder {
    color: #646868
}

.input:-ms-input-placeholder, .textarea:-ms-input-placeholder {
    color: #646868
}

.input::-ms-input-placeholder, .textarea::-ms-input-placeholder {
    color: #646868
}

.input::placeholder, .textarea::placeholder {
    color: #646868
}

.input {
    min-height: 2.25rem;
    min-width: 3.125rem
}

a:active, a:focus, button:active, button:focus, input, input:active, input:focus, select:active, select:focus, textarea, textarea:active, textarea:focus {
    outline: none
}

html {
    font-size: 16px;
    scroll-behavior: smooth
}

/* Cart checkbox styles */
.cart__product {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #e0e0e0;
}

.cart__product-checkbox {
    flex-shrink: 0;
}

.cart__checkbox {
    display: none;
}

.cart__checkbox-label {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #ebebeb;
    border: 1px solid #646868;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cart__checkbox-label::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #1b2354;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cart__checkbox:checked + .cart__checkbox-label {
    background: #1b2354;
    border-color: #1b2354;
}

.cart__checkbox:checked + .cart__checkbox-label::after {
    opacity: 1;
    border-color: #fff;
}

.cart__checkbox-label:hover {
    border-color: #1b2354;
}

.cart__product-left {
    flex: 1;
    display: flex;
    gap: 15px;
}

.cart__product-right {
    flex-shrink: 0;
}

/* Disabled button styles */
.button-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
}

.button-disabled:hover {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
    transform: none !important;
}

.button-disabled:active {
    background-color: #cccccc !important;
    border-color: #cccccc !important;
    color: #666666 !important;
}

/* Cart selection controls styles */
.cart__select-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cart__selection-counter {
    font-size: 14px;
    color: #646868;
    font-weight: 400;
    text-align: right;
}

.cart__selection-counter span {
    font-weight: 500;
    color: #1b2354;
}

body, html {
    overflow-x: hidden;
    width: 100%
}

body {
    color: #1b2354;
    font-family: MontserratDev, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    height: 100%;
    letter-spacing: .5px;
    line-height: 1.5;
    position: relative
}

.white {
    color: #fff
}

.ttu {
    text-transform: uppercase
}

.w-100 {
    width: 100%
}

.h-100 {
    height: 100%
}

.d-none {
    display: none !important
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.d-block {
    display: block
}

.d-iblock {
    display: inline-block
}

.d-table {
    display: table
}

.d-grid {
    display: -ms-grid;
    display: grid
}

.flex-row {
    -webkit-box-orient: horizontal;
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-column, .flex-row {
    -webkit-box-direction: normal
}

.flex-column {
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    flex-direction: column
}

.justify-content-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.align-items-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.overflow-y-hidden {
    overflow-y: hidden !important
}

.overflow-y-scroll {
    overflow-y: scroll
}

.text-center {
    text-align: center
}

.visible {
    visibility: visible
}

.invisible {
    height: 0;
    visibility: hidden;
    width: 0
}

.position-absolute {
    position: absolute
}

.position-relative {
    position: relative
}

.mt-1 {
    margin-top: .625rem
}

.mt-2 {
    margin-top: 1.25rem
}

.mt-3 {
    margin-top: 1.875rem
}

.mt-4 {
    margin-top: 2.5rem
}

.mt-5 {
    margin-top: 3.125rem
}

.mb-1 {
    margin-bottom: .625rem
}

.mb-2 {
    margin-bottom: 1.25rem
}

.mb-3 {
    margin-bottom: 1.875rem
}

.mb-4 {
    margin-bottom: 2.5rem
}

.mb-5 {
    margin-bottom: 3.125rem
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    word-wrap: break-word !important;
    color: #1b2354
}

h1 {
    font-size: 1.875rem
}

h2 {
    font-size: 1.75rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.25rem
}

fieldset {
    border: none;
    margin: 0;
    padding: 0
}

a {
    color: #3f538e;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

a:active, a:focus, a:hover {
    color: #ecd900
}

.button, button {
    background-color: #ecd900;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: MontserratDev, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.button:disabled, button:disabled {
    background-color: #646868;
    cursor: default
}

.button:disabled:focus, .button:disabled:hover, button:disabled:focus, button:disabled:hover {
    background-color: #646868
}

.button:focus, .button:hover, button:focus, button:hover {
    background-color: #3f538e
}

.button_mini {
    padding: 10px 14px
}

.button_big {
    font-size: 20px;
    padding: 12px 24px
}

.button_disabled {
    background: grey;
    cursor: auto;
}

.button_disabled:active, .button_disabled:focus, .button_disabled:hover {
    background: grey;
    color: #fff
}

.button_blue {
    background: #3f538e;
}


.button_blue:active, .button_blue:focus, .button_blue:hover {
    background: #ecd900;
    color: #fff
}

.small {
    font-size: 14px
}

.fw-300, .small {
    font-weight: 300
}

.fw-400 {
    font-weight: 400
}

.fw-500 {
    font-weight: 500
}

.fw-600 {
    font-weight: 600
}

.fw-700 {
    font-weight: 700
}

.fw-800 {
    font-weight: 800
}

.fw-900 {
    font-weight: 900
}

.body-overflow-y-hidden {
    height: 100vh;
    overflow-y: hidden
}

.container {
    width: 1140px
}

.container, .container-fluid {
    margin: 0 auto;
    padding: 0 20px;
    position: relative
}

.container-fluid {
    width: 100%
}

.wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-height: 100vh
}

.main {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    z-index: 1
}

.footer, .main {
    position: relative
}

.footer {
    -webkit-box-flex: 0;
    background-color: #1b2354;
    color: #fff;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding: 40px 0 20px;
    z-index: 2
}

.footer a {
    text-decoration: none
}

.footer ul {
    padding: 0
}

.footer li {
    list-style: none;
    margin-bottom: 5px
}

.footer ul > li > a {
    color: #fff;
    padding: 5px 0
}

.footer ul > li > a:active, .footer ul > li > a:focus, .footer ul > li > a:hover {
    color: #ecd900
}

.footer .header__tel {
    display: inline-block;
    margin-bottom: 5px
}

.footer .header__tel-0800-text {
    display: block !important
}

.footer__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

.footer__item {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0px;
    flex: 1 0 0;
    min-width: 200px
}

.footer__title {
    font-size: 1.125rem;
    font-weight: 600
}

.footer__infoblock {
    margin: 15px 0 20px
}

.footer__social {
    font-size: 24px;
    margin-top: 16px
}

.footer__social a {
    color: #ecd900;
    margin-right: 20px
}

.footer__social a:active, .footer__social a:focus, .footer__social a:hover {
    color: #fff
}

.header {
    background-color: #1b2354;
    color: #fff;
    padding: 20px 0;
    position: relative;
    width: 100%;
    z-index: 9
}

.header a {
    text-decoration: none
}

.header li, .header ul {
    list-style: none
}

.header__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 30px
}

.header__logo {
    line-height: 0;
    margin: 0;
    width: 130px
}

.header__logo-text {
    position: absolute;
    text-indent: -9999px
}

.header__logo-img {
    width: 100%
}

.header__center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

.header__info {
    -ms-flex-pack: justify;
    border-bottom: 1px solid #3f538e;
    gap: 34px;
    padding-bottom: 20px
}

.header__info, .header__infoblock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.header__infoblock {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -ms-flex-pack: justify;
    gap: 4px
}

.header__tel {
    color: #fff;
    font-size: 16px
}

.header__tel-0800 {
    color: #ecd900;
    font-size: 20px;
    font-weight: 800
}

.header__tel-0800:active, .header__tel-0800:focus, .header__tel-0800:hover {
    color: #fff
}

.header__tel-0800-text {
    font-size: 13px
}

.header__address {
    color: #fff;
    font-size: 14px
}

.header__link {
    color: #ecd900;
    font-weight: 600;
    text-align: right
}

.header__link:active, .header__link:focus, .header__link:hover {
    color: #fff
}

.header__menu-box::-webkit-scrollbar {
    display: none
}

.header__menu-box_visible {
    height: 80vh !important;
    opacity: 1 !important;
    visibility: visible !important
}

.header__menu {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    gap: 16px;
    justify-content: space-between;
    padding-top: 20px
}

.header__menu, .header__menu .button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header__menu .button {
    gap: 10px;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto
}

.header__menu_visible {
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important
}

.header__catalog {
    position: relative
}

.header__catalog > ul {
    display: none;
    position: absolute;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 47px;
    padding: 0;
    top: 17px;
    z-index: 1
}

.header__catalog > ul:before {
    content: "";
    height: 30px;
    position: absolute;
    top: -30px;
    width: 100%;
    z-index: 0
}

.header__catalog > ul.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.header__catalog > ul > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 230px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.header__catalog > ul a {
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    margin-right: -1px;
    margin-top: -1px;
    padding: 10px 16px;
    text-transform: uppercase;
    width: 100%
}

.header__catalog > ul > li > a {
    background: #3f538e;
    border: 1px solid #6b7eb6;
    color: #fff
}

.header__catalog > ul > li > a:active, .header__catalog > ul > li > a:focus, .header__catalog > ul > li > a:hover {
    background: #ecd900;
    color: #3f538e
}

.header__catalog > ul > li > ul {
    display: none;
    position: absolute;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    background: hsla(0, 0%, 100%, .8);
    border-radius: 4px;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    left: 100%;
    padding: 0;
    top: 0
}

.header__catalog > ul > li > ul.show {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.header__catalog > ul > li > ul > li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-width: 400px
}

.header__catalog > ul > li > ul > li > a {
    background: #ebebeb;
    border: 1px solid #6b7eb6;
    color: #3f538e
}

.header__catalog > ul > li > ul > li > a:active, .header__catalog > ul > li > ul > li > a:focus, .header__catalog > ul > li > ul > li > a:hover {
    background: #ecd900
}

.header__catalog > ul > li > ul > li > ul {
    display: none
}

.header__catalog > .header__li-expand {
    background: #ecd900;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #fff
}

.header__catalog > .header__li-expand:active, .header__catalog > .header__li-expand:focus, .header__catalog > .header__li-expand:hover {
    background: #3f538e
}

.header__li-expand {
    background: #3f538e;
    border-bottom: 1px solid #6b7eb6;
    border-left: 1px solid #6b7eb6;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 49px;
    position: absolute;
    width: 49px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    right: 0;
    top: 0
}

.header__li-expand:active, .header__li-expand:focus, .header__li-expand:hover {
    background: #1b2354
}

.header__li-expanded {
    height: auto !important
}

.header__arr-rotate {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.header__catalog-button {
    padding: 6px 14px
}

.header__catalog-button i {
    color: #fff;
    font-size: 24px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.header__catalog-button:active, .header__catalog-button:focus, .header__catalog-button:hover {
    background: #ecd900;
    color: #3f538e
}

.header__catalog-button:active i, .header__catalog-button:focus i, .header__catalog-button:hover i {
    color: #3f538e
}

.header__top-menu {
    -webkit-box-flex: 1;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    font-size: 14px
}

.header__top-menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    padding: 0
}

.header__top-menu a {
    color: #fff;
    font-weight: 600
}

.header__top-menu a:active, .header__top-menu a:focus, .header__top-menu a:hover {
    color: #ecd900
}

.header__search-form {
    top: -18px;
    position: relative;
    width: 116px
}

.header__search-input {
    background: #ebebeb;
    border: none;
    border-radius: 4px;
    height: 36px;
    padding: 0 10px;
    position: absolute;
    top: 0;
    right: 33px;
    width: 84px;
    transition-duration: 300ms;
}

.header__search-input:focus,
.header__search-input:active
{
    width: 581px;
}

.header__search-button {
    background: #ebebeb;
    border: none;
    border-radius: 0 4px 4px 0;
    height: 36px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px
}

.header__search-button:active i, .header__search-button:focus i, .header__search-button:hover i {
    color: #fff
}

.header__search-button i {
    color: #3f538e;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.header__login {
    background: #6b7eb6;
    padding: 10px 14px
}

.header__login:active, .header__login:focus, .header__login:hover {
    background: #6b7eb6;
    color: #ecd900
}

.header__cart {
    background: #3f538e;
    padding: 10px 14px
}

.header__cart:active, .header__cart:focus, .header__cart:hover {
    color: #ecd900
}

.header__right {
    display: none
}

.header__burger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #6b7eb6;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    height: 40px;
    width: 40px
}

.overlay {
    background: rgba(0, 0, 0, .8);
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    visibility: hidden;
    width: 100vw;
    z-index: 5
}

.overlay_visible {
    opacity: 1;
    visibility: visible
}

.swiper-home {
    aspect-ratio: 110/50;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    margin: 50px 0 10px;
    overflow: hidden;
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.swiper-home:hover {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.swiper-home__button {
    color: #ecd900;
    cursor: pointer;
    font-size: 60px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    z-index: 5
}

.swiper-home__button:active, .swiper-home__button:focus, .swiper-home__button:hover {
    color: #3f538e
}

.swiper-home__button_next {
    right: 20px
}

.swiper-home__button_prev {
    left: 20px
}

.swiper-home a {
    display: block;
    height: 100%;
    width: 100%
}

.swiper-home a img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.popup {
    background: rgba(0, 0, 0, .9);
    height: 100vh;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    width: 100vw;
    z-index: 15 !important
}

.popup__close {
    text-align: center
}

.popup__close svg {
    height: 50px;
    padding: 10px;
    width: 50px;
    fill: #fff;
    cursor: pointer;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.popup__close svg:active, .popup__close svg:focus, .popup__close svg:hover {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.popup__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    height: calc(100% - 60px);
    justify-content: center;
    overflow-y: auto;
    padding: 20px 15px;
    scrollbar-width: none;
    width: 100%
}

.popup__box::-webkit-scrollbar {
    display: none
}

.popup__box_large-content {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start
}

.popup.show {
    opacity: 1 !important;
    z-index: 12
}

.callback {
    max-width: 320px;
    text-align: center;
    width: 100%
}

.callback__heading {
    font-size: 1.25rem;
    text-transform: uppercase
}

.callback__heading, .callback__input {
    color: #ebebeb;
    margin-bottom: 1.875rem;
    text-align: center
}

.callback__input {
    color: #1a1d20;
}


.callback__input {
    height: 3.125rem;
    max-width: 300px
}

.callback__input, .callback__textarea {
    background: none;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    font-size: 1.125rem;
    width: 100%
}

.callback__textarea {
    color: #ebebeb;
    font-family: MontserratDev, sans-serif;
    height: 12.5rem;
    margin-bottom: 1.875rem;
    padding-top: .625rem;
    text-align: center
}

.callback__button {
    background: #3f538e;
    font-size: 1.125rem;
    margin-top: .3125rem
}

.callback__button:active, .callback__button:focus, .callback__button:hover {
    background: #ecd900
}

.warning {
    border-radius: 4px 4px 0 0;
    bottom: 0;
    left: 50%;
    max-width: 760px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    text-align: center;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    width: 100%;
    z-index: 8
}

.warning__back {
    background: rgba(63, 83, 142, .8);
    color: #fff;
    display: inline-block;
    font-weight: 600;
    padding: .875rem 2.25rem .75rem .625rem;
    pointer-events: auto;
    position: relative;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    width: 100%
}

.warning__back:focus, .warning__back:hover {
    background: #3f538e
}

.warning__back a {
    color: #ecd900
}

.warning__back a:focus, .warning__back a:hover {
    text-decoration: underline
}

.warning__close {
    cursor: pointer;
    padding: 15px;
    position: absolute;
    right: 8px;
    top: 12px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.warning__close:after, .warning__close:before {
    background: #fff;
    content: "";
    height: 3px;
    position: absolute;
    right: 5px;
    top: 12px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    width: 20px
}

.warning__close:after {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.warning__close:focus:before, .warning__close:hover:before {
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg)
}

.warning__close:focus:after, .warning__close:hover:after {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.warning.show {
    opacity: 1 !important;
    z-index: 12
}

.categories_home {
    margin: 3.75rem 0
}

.categories_page {
    margin: 2.5rem 0 3.75rem
}

.categories__h2 {
    margin-bottom: 2.5rem;
    text-transform: uppercase
}

.categories__item {
    aspect-ratio: 1/1;
    background: #000;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    line-height: 0;
    overflow: hidden;
    position: relative
}

.categories__item:active, .categories__item:focus, .categories__item:hover {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.categories__item:active .categories__darken, .categories__item:focus .categories__darken, .categories__item:hover .categories__darken {
    background: rgba(63, 83, 142, .6)
}

.categories__item:active .categories__h3, .categories__item:focus .categories__h3, .categories__item:hover .categories__h3 {
    color: #ecd900
}

.categories__img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.categories__darken {
    background: rgba(0, 0, 0, .5);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.25rem
}

.categories__darken, .categories__h3 {
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.categories__h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase
}

.categories__link {
    margin-top: 2.5rem
}

.grid-2, .grid-3 {
    grid-template-columns:repeat(auto-fit, minmax(min(300px, 100%), 1fr))
}

.grid-2, .grid-3, .grid-4 {
    display: -ms-grid;
    display: grid;
    gap: 20px
}

.grid-4 {
    grid-template-columns:repeat(auto-fit, minmax(min(210px, 100%), 1fr))
}

.grid-4 > :only-child {
    max-width: 555px
}

.home-banner {
    background: #9da9cf
}

.home-banner__box {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 40px;
    padding: 40px 0
}

.home-banner__box, .home-banner__left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.home-banner__left {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    -webkit-box-flex: 1;
    color: #fff;
    -ms-flex: 1 1 min-content;
    flex: 1 1 min-content;
    gap: 10px
}

.home-banner__h2 {
    color: #fff;
    font-size: 40px;
    font-weight: 400;
    margin: 0;
    padding: 0
}

.home-banner__center {
    height: 200px;
    width: 200px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.home-banner__img {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    height: 100%;
    margin-left: -15px;
    -o-object-fit: cover;
    object-fit: cover;
    opacity: .4;
    width: 100%
}

.home-banner__right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 300px;
    text-align: right;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.home-banner__input {
    background: #ebebeb;
    border: none;
    border-radius: 4px;
    height: 44px;
    margin-bottom: 20px;
    text-align: center;
    width: 100%
}

.home-banner__button {
    width: 100%
}

.products__box {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.products__h2 {
    margin-bottom: 1.875rem;
    text-transform: uppercase
}

.products_home {
    margin: 3.75rem 0
}

.products_product {
    margin-bottom: 3.125rem
}

.products__item {
    border: 1px solid #646868;
    border-radius: 12px;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    overflow: hidden;
    padding-bottom: 20px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.products__item:active, .products__item:focus, .products__item:hover {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.products__item:active .products__img, .products__item:focus .products__img, .products__item:hover .products__img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

.products__img-box {
    aspect-ratio: 1/1;
    display: block;
    overflow: hidden;
    width: 100%
}

.products__img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transition-duration: .3s;
    transition-duration: .3s;
    width: 100%
}

.products__h3 {
    line-height: .8;
    margin: 20px 0;
    padding: 0 20px;
    min-height: 100px
}

.products__h3-link {
    color: #1b2354;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.products__h3-link:active, .products__h3-link:focus, .products__h3-link:hover {
    color: #ecd900
}

.products__article, .products__instock {
    font-size: 12px;
    margin-bottom: 5px;
    padding: 0 20px
}

.products__cost {
    color: #1b2354;
    font-size: 24px;
    font-weight: 600;
    margin: 15px 0;
    padding: 0 20px;
    min-height: 36px;
}

.products__button {
    margin-left: 20px
}

.products__button i {
    margin-left: 10px
}

.products__sort {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    text-align: right
}

.products__sort-text {
    font-weight: 600
}

/* Products Table Styles */
.products-table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 30px;
}

.products-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 1px #646868;
}

.products-table__header {
    background: #f8f9fa;
    color: #1b2354;
    font-weight: 600;
    font-size: 14px;
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #646868;
}

.products-table__row {
    border-bottom: 1px solid #e9ecef;
    transition-duration: .3s;
}

.products-table__row:hover {
    background: #f8f9fa;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.products-table__row:last-child {
    border-bottom: none;
}

.products-table__cell {
    padding: 15px 20px;
    vertical-align: middle;
}

.products-table__cell--image {
    width: 80px;
    padding: 10px;
}

.products-table__img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 8px;
    transition-duration: .3s;
}

.products-table__img:hover {
    transform: scale(1.1);
}

.products-table__cell--name {
    min-width: 200px;
}

.products-table__name-link {
    color: #1b2354;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition-duration: .3s;
    line-height: 1.4;
}

.products-table__name-link:hover {
    color: #ecd900;
}

.products-table__cell--article {
    font-size: 12px;
    color: #646868;
    min-width: 120px;
}

.products-table__cell--availability {
    min-width: 130px;
}

.products-table__availability {
    font-size: 12px;
    color: #646868;
    font-weight: bold;
}

.products-table__cell--price {
    min-width: 120px;
    white-space: nowrap;
}

.products-table__price {
    color: #1b2354;
    font-size: 18px;
    font-weight: 600;
}

.products-table__price--unavailable {
    color: #646868;
    font-size: 16px;
}

.products-table__cell--action {
    width: 140px;
    text-align: center;
}

.products-table__button {
    margin: 0;
    white-space: nowrap;
}

.products-table__button i {
    margin-left: 10px;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .products-table-container {
        overflow-x: scroll;
    }
    
    .products-table {
        min-width: 600px;
    }
    
    .products-table__header,
    .products-table__cell {
        padding: 10px 15px;
    }
    
    .products-table__cell--image {
        width: 60px;
        padding: 5px;
    }
    
    .products-table__img {
        width: 50px;
        height: 50px;
    }
}

.benefits__h2 {
    text-transform: uppercase
}

.benefits__box {
    counter-reset: itemCounter;
    margin: 100px 0 20px
}

.benefits__item {
    background: #ecd900;
    border-radius: 12px;
    margin-bottom: 3.75rem;
    padding: 30px;
    position: relative
}

.benefits__item:before {
    color: #ecd900;
    content: counter(itemCounter, decimal-leading-zero);
    counter-increment: itemCounter;
    font-size: 90px;
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: -95px
}

.benefits__title {
    color: #1b2354;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: .625rem;
    text-transform: uppercase
}

.benefits__text {
    color: #646868;
    font-size: 1rem
}

.questions {
    background-position: 0;
    background-size: cover;
    padding: 3.75rem 0;
    position: relative;
    text-align: center
}

.questions__h2 {
    margin: 0 0 .625rem;
    text-transform: uppercase
}

.questions__darken {
    background: rgba(63, 83, 142, .8);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.questions__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px;
    margin: 1.875rem auto 0;
    max-width: 480px;
    width: 100%
}

.questions__input {
    height: 44px;
    padding: 0 1.25rem;
    text-align: center;
    width: 100%
}

.questions__textarea {
    height: 100px;
    padding: .9375rem 1.25rem;
    text-align: center;
    width: 100%
}

.questions__button {
    width: 100%
}

.questions__man {
    aspect-ratio: .653/1;
    background-position: 50%;
    background-size: cover;
    bottom: 0;
    height: calc(100% + 20px);
    left: calc(50% + 250px);
    position: absolute;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px)
}

.home-text {
    padding: 1.875rem 0
}

.scrollup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    bottom: 10px;
    color: #ecd900;
    cursor: pointer;
    font-size: 50px;
    opacity: .5;
    position: fixed;
    right: 10px;
    -webkit-transition-duration: .5s;
    transition-duration: .5s;
    z-index: 3
}

.scrollup:hover {
    opacity: 1
}

.scrollup_show {
    opacity: .5
}

.scrollup_hide {
    opacity: 0
}

.breadcrumbs {
    font-size: .875rem;
    margin-top: 2.5rem
}

.breadcrumbs ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0
}

.breadcrumbs li {
    list-style: none
}

.breadcrumbs li:after {
    content: ">";
    margin: 0 8px
}

.breadcrumbs li:last-child:after {
    content: none
}

.product {
    margin: 1.875rem 0 2.5rem
}

.product__box {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr;
    grid-template-columns:repeat(2, 1fr);
    -ms-grid-rows: auto 20px 1fr;
    gap: 20px;
    grid-template-rows:auto 1fr
}

.product__box > :first-child {
    -ms-grid-column: 1;
    -ms-grid-row: 1
}

.product__box > :nth-child(2) {
    -ms-grid-column: 3;
    -ms-grid-row: 1
}

.product__box > :nth-child(3) {
    -ms-grid-column: 1;
    -ms-grid-row: 3
}

.product__box > :nth-child(4) {
    -ms-grid-column: 3;
    -ms-grid-row: 3
}

.product__left {
    -ms-grid-row: 1;
    height: auto;
    margin-bottom: 20px;
    min-width: 0;
    -ms-grid-row-span: 2;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
    grid-area: 1/1/3/2
}

.product__swiper {
    margin-bottom: 15px;
    width: 100%
}

.product__swiper-slide {
    aspect-ratio: 1/1;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden
}

.product__swiper-slide img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.product__center {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 1/2/2/3
}

.product__right {
    -ms-grid-row: 2;
    height: auto;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-area: 2/2/3/3
}

.product__h2 {
    font-size: 20px;
    margin: 0 0 -15px;
    text-transform: none
}

.product__text {
    margin-bottom: 20px
}

.product__article, .product__instock {
    font-weight: 600;
    margin-bottom: 8px
}

.product__instock--absent {
    color: red;
}

.product__instock--present {
    color: green;
}

.product__instock--manager {
    color: #e89211;
}

.product__cost {
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    margin-bottom: 1.25rem
}

.product__hr {
    margin: 1.875rem 0
}

.product__infobox {
    display: -ms-grid;
    display: grid;
    gap: 20px;
    grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr))
}

.product__button {
    margin-bottom: 1.875rem
}

.product__button i {
    margin-left: 10px
}

.product__additional-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 20px;
    margin-bottom: 1.25rem
}

.product__additional-info .product__additional-icons {
    width: 24px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-top: 5px
}

.product__additional-info .product__additional-icons i {
    display: inline-block;
    font-size: 20px
}

.product__info-left {
    margin-bottom: -20px
}

.product__info-left, .product__info-right {
    -webkit-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0
}

.swiper-slide-thumb-active {
    border: 1px solid #646868
}

.page__box {
    margin: 2.5rem 0 3.125rem
}

.page__h2 {
    text-align: center;
    text-transform: uppercase
}

.category {
    margin: 2.5rem 0 3.75rem
}

.category__h2 {
    text-align: center;
    text-transform: uppercase
}

.category__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 20px;
    margin-top: 3.125rem
}

.filters {
    margin-bottom: 10px;
    max-width: 310px;
    min-width: 210px;
    overflow: hidden
}

.filters__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 10px auto 20px
}

.filters__title a {
    color: #1b2354;
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 0;
    text-decoration: none
}

.filters__title a:active, .filters__title a:focus, .filters__title a:hover {
    color: #1b2354
}

.filters__block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px
}

.filters__name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px
}

.filters__label {
    cursor: pointer
}

.filters__input_text {
    margin-left: 10px
}

.filters__button {
    margin-right: 10px;
    margin-top: 20px;
    width: 162px;
}

.filters.show {
    height: auto
}

.pagination {
    margin-top: 20px;
    margin-bottom: 20px;
}

.pagination ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 5px
}

.pagination li {
    list-style: none
}

.pagination .button {
    background: #3f538e
}

.pagination .button:active, .pagination .button:focus, .pagination .button:hover {
    background: #ecd900;
    color: #fff
}

.pagination .disabled {
    background: #6b7eb6
}

.pagination .disabled:active, .pagination .disabled:focus, .pagination .disabled:hover {
    background: #6b7eb6
}

.pagination .active {
    background: #ecd900
}

.cart {
    margin: 3.75rem 0
}

.cart__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px
}

.cart__left {
    width: 33%
}

.cart__right {
    width: calc(66% - 50px)
}

.cart__h2, .cart__h3 {
    text-transform: uppercase
}

.cart__h3 {
    font-size: 20px;
    font-weight: 600
}

.cart__info {
    margin-top: 30px
}

.cart__info-text {
    font-weight: 600;
    margin-bottom: 3px;
    margin-top: 15px;
    text-transform: uppercase
}

.cart__input {
    width: 100%
}

.cart__info-error {
    color: #e40800;
    margin-top: 5px
}

.cart__info-error ul {
    list-style: none;
    padding: 0;
}

.cart__info-error.show {
    display: block
}

.cart__info-success {
    color: #28a745;
    margin-top: 5px
}

.cart__info-success ul {
    list-style: none;
    padding: 0;
}

.cart__info-success.show {
    display: block
}

.cart__textarea {
    margin-bottom: 15px;
    max-width: 100%;
    min-height: 100px;
    width: 100%
}

.cart__registration {
    background: #ebebeb;
    border-radius: 4px;
    color: #1b2354;
    display: block;
    margin-top: 30px;
    padding: 15px;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.cart__registration:active, .cart__registration:focus, .cart__registration:hover {
    background: #1b2354;
    color: #fff
}

.cart__registration-title {
    font-weight: 700;
    margin-bottom: 5px;
    text-decoration: underline;
    text-transform: uppercase
}

.cart__registration-text {
    font-size: 14px;
    line-height: 1.2
}

.cart__products {
    position: relative
}

.cart__product {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    border-bottom: 1px solid #646868;
    justify-content: space-between;
    padding: 20px 0
}

.cart__product, .cart__product-left, .cart__product-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px
}

.cart__img {
    border-radius: 12px;
    height: 120px;
    overflow: hidden;
    width: 120px;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.cart__img img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.cart__product-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 5px
}

.cart__product-cost, .cart__product-title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2
}

.cart__product-link {
    color: #1b2354;
    text-decoration: none
}

.cart__product-link:active, .cart__product-link:focus, .cart__product-link:hover {
    color: #ecd900
}

.cart__controls {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 24px
}

.cart__decrease, .cart__increase {
    cursor: pointer;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.cart__increase:active, .cart__increase:focus, .cart__increase:hover {
    -webkit-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    transform: translateY(-2px)
}

.cart__decrease:active, .cart__decrease:focus, .cart__decrease:hover {
    -webkit-transform: translateY(2px);
    -ms-transform: translateY(2px);
    transform: translateY(2px)
}

.cart__amount {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    width: 44px
}

.cart__remove {
    background: none;
    color: #1b2354;
    font-size: 24px;
    margin-left: -10px;
    padding: 0
}

.cart__remove:active, .cart__remove:focus, .cart__remove:hover {
    background: none;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.cart__total {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    font-size: 24px;
    font-weight: 700;
    justify-content: space-between;
    margin-top: 30px
}

.search {
    margin: 3.75rem 0
}

.search__h2 {
    text-align: center;
    text-transform: uppercase
}

.registration {
    margin: 3.75rem 0
}

.registration__h2 {
    text-align: center;
    text-transform: uppercase
}

.registration__h3 {
    font-size: 20px;
    font-weight: 600
}

.registration__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px
}

.registration__left, .registration__right {
    width: 100%
}

.authorization {
    margin: 3.75rem 0
}

.authorization__h2 {
    text-align: center;
    text-transform: uppercase
}

.authorization__box {
    margin: 30px auto;
    max-width: 500px;
    text-align: center;
}

.authorization__forgot {
    display: block;
    margin-top: 20px;
    text-decoration: underline
}

.authorization__reg {
    font-size: 20px;
    font-weight: 600;
    margin-top: 30px
}

.authorization__link {
    text-decoration: underline
}

.cabinet {
    margin: 3.75rem 0
}

.cabinet__h2 {
    text-align: center;
    text-transform: uppercase
}

.cabinet__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 50px;
    margin-top: 40px
}

.cabinet__left {
    max-width: 360px;
    width: 100%
}

.cabinet__right {
    width: 100%
}

.cabinet__user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 15px;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #ebebeb;
    border: 1px solid #646868;
    border-radius: 4px;
    gap: 15px
}

.cabinet__user-icon {
    font-size: 30px
}

.cabinet__user-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 5px
}

.cabinet__links-box {
    margin-top: 10px
}

/* Fix for Choices.js font glitch on some systems */
.choices {
    font-family: MontserratDev, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.choices__inner {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.choices__list--dropdown .choices__item,
.choices__list--single .choices__item,
.choices__input {
    font-family: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cabinet__link {
    border-bottom: 1px solid #646868;
    display: block;
    font-size: 20px;
    font-weight: 600;
    padding: 15px 0;
    text-decoration: none
}

.cabinet__title-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: start;
    gap: 20px;
    margin-bottom: 30px
}

.cabinet__h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0
}

.cabinet__search {
    position: relative
}

.cabinet__search-input {
    background: #ebebeb;
    border: none;
    border-radius: 4px;
    height: 36px;
    padding: 0 10px;
    width: 150px
}

.cabinet__search-button {
    background: #ebebeb;
    border: none;
    border-radius: 0 4px 4px 0;
    height: 36px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 36px
}

.cabinet__search-button:active i, .cabinet__search-button:focus i, .cabinet__search-button:hover i {
    color: #fff
}

.cabinet__search-button i {
    color: #3f538e;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.orders__item {
    border: 1px solid #646868;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    margin-bottom: 10px;
    max-height: 50px;
    overflow: hidden;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.orders__item:active, .orders__item:focus, .orders__item:hover {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

.orders__item.show {
    max-height: 500px
}

.orders__header {
    background: #fff;
    padding: 0 10px 0 15px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    border-bottom: 1px solid #646868;
    cursor: pointer;
    height: 50px;
    justify-content: space-between
}

.orders__header, .orders__header-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 20px
}

.orders__header-left {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.orders__number, .orders__total {
    font-weight: 600
}

.orders__date, .orders__status {
    color: #3f538e;
    font-size: 14px
}

.orders__status {
    font-weight: 600
}

.orders__open {
    font-size: 24px;
    line-height: 1;
    -webkit-transition-duration: .3s;
    transition-duration: .3s
}

.orders__open.show {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.orders__content {
    background: #ebebeb;
    font-size: 14px;
    padding: 0 15px
}

.orders__info-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid #646868;
    gap: 20px;
    padding: 10px 0
}

.orders__info-item:last-child {
    border-bottom: none
}

.orders__info-item-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 15px
}

.orders__info-name {
    font-weight: 600
}

.orders__button {
    font-size: 20px
}

.data-edit__info {
    max-width: 500px
}

.tab {
    scroll-margin-top: 150px
}

.logout {
    margin: 3.75rem 0
}

.logout__h2 {
    text-align: center;
    text-transform: uppercase
}

.mini-cart {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    padding: 76px 20px 20px;
    position: relative
}

.mini-cart__header {
    height: 56px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: #3f538e;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase
}

.mini-cart__footer, .mini-cart__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.mini-cart__footer {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 20px
}

.mini-cart__total {
    font-size: 24px;
    font-weight: 700
}

.contacts {
    margin: 2.5rem 0
}

.contacts__box {
    margin-top: 40px
}

.contacts__right iframe {
    height: calc(100% - 30px);
    min-height: 500px;
    width: 100%
}

.contacts__block {
    margin-bottom: 30px
}

.contacts__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px
}

.contacts__icon {
    font-size: 24px;
    margin-bottom: 0;
    flex-shrink: 0
}

.contacts__link {
    font-size: 20px;
    font-weight: 600;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px
}

.contacts__link a {
    text-decoration: none
}

.contacts__link-description {
    font-size: 16px;
    font-weight: 400;
    margin-top: 0;
    white-space: nowrap
}

.payment {
    margin: 2.5rem 0 3.75rem
}

@media only screen and (min-width: 1200px) {
    .main {
        margin-top: 0 !important
    }

    .header__menu-box {
        height: auto !important
    }

    .header__li-expand {
        display: none
    }

    .overlay {
        display: none !important
    }

    .home-banner__left {
        min-width: 450px
    }
}

@media only screen and (max-width: 1199px) {
    .container {
        width: 100%
    }

    .header {
        left: 0;
        padding: 10px 0;
        position: fixed;
        top: 0
    }

    .header__logo {
        width: 100px
    }

    .header__info {
        border-bottom: none;
        padding-bottom: 0
    }

    .header__infoblock_2 {
        text-align: center
    }

    .header__infoblock_3 {
        display: none
    }

    .header__menu-box {
        height: 0;
        left: 50%;
        max-width: 480px;
        opacity: 0;
        overflow-y: auto;
        position: absolute;
        top: 110px;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        visibility: hidden;
        width: 100%
    }

    .header__menu {
        left: 0;
        max-width: 480px;
        position: relative;
        top: 0;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 0;
        overflow: hidden;
        padding: 0;
        -webkit-transition-duration: .5s;
        transition-duration: .5s
    }

    .header__catalog {
        height: 49px;
        overflow: hidden;
        width: 100%
    }

    .header__catalog > ul:before {
        display: none
    }

    .header__catalog > ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin: 0;
        opacity: 1;
        padding: 0;
        position: relative;
        top: 0;
        visibility: visible
    }

    .header__catalog > ul.show {
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }

    .header__catalog > ul > li {
        position: relative;
        width: 100%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        height: 49px;
        overflow: hidden;
        -webkit-transition-duration: .3s;
        transition-duration: .3s
    }

    .header__catalog > ul a {
        border-radius: 0;
        margin: 0;
        padding: 12px 20px;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        font-size: 16px
    }

    .header__catalog > ul > li > a {
        border: none;
        border-bottom: 1px solid #6b7eb6;
        width: 100%
    }

    .header__catalog > ul > li > ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        left: 0;
        opacity: 1;
        position: relative;
        visibility: visible;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        background: none;
        border-radius: 0;
        height: auto;
        width: 100%
    }

    .header__catalog > ul > li > ul > li {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
        width: 100%
    }

    .header__catalog > ul > li > ul > li > a {
        border: none;
        border-bottom: 1px solid #6b7eb6;
        max-width: 480px;
        width: 100%
    }

    .header__catalog-button {
        border-bottom: 1px solid #fff;
        border-radius: 0;
        padding: 12px 20px
    }

    .header__top-menu {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        width: 100%
    }

    .header__top-menu ul {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
        margin: 0;
        width: 100%
    }

    .header__top-menu a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: start;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background: #1b2354;
        border-bottom: 1px solid #6b7eb6;
        font-size: 16px;
        padding: 12px 20px;
        text-transform: uppercase;
        width: 100%
    }

    .header__search-form {
        height: 50px;
        right: 0;
        top: 0;
        width: 100%
    }

    .header__search-input {
        border-bottom: 1px solid #9da9cf;
        border-radius: 0;
        height: 50px;
        right: 0;
        padding: 0 20px;
        width: 100%
    }
    .header__search-input:focus,
    .header__search-input:active {
        right: 0;
        width: 100%
    }
    .header__search-button {
        border-left: 1px solid #3f538e;
        border-radius: 0;
        font-size: 20px;
        height: 49px;
        width: 49px
    }

    .header__cart, .header__login {
        border-bottom: 1px solid #9da9cf;
        border-radius: 0;
        padding: 16px 20px;
        width: 100%
    }

    .header__right {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

@media only screen and (max-width: 1100px) {
    .home-banner__center {
        display: none
    }
}

@media only screen and (max-width: 950px) {
    .cabinet__box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media only screen and (max-width: 900px) {
    .questions__man {
        display: none
    }
}

@media only screen and (max-width: 860px) {
    .header__logo {
        width: 70px
    }

    .header__link {
        display: none
    }

    .header__menu-box {
        top: 80px
    }

    .swiper-home__button {
        font-size: 40px
    }

    .breadcrumbs {
        display: none
    }

    .product {
        margin-top: 3.125rem
    }
}

@media only screen and (max-width: 800px) {
    .home-banner__box {
        gap: 30px
    }

    .home-banner__left {
        text-align: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .home-banner__right {
        max-width: 100%;
        text-align: center;
        width: 100%
    }
}

@media only screen and (max-width: 740px) {
    .cart__box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }

    .cart__left, .cart__right {
        width: 100%
    }
}

@media only screen and (max-width: 720px) {
    .category__box, .products__sort {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .category__box {
        margin-top: .625rem
    }

    .filters {
        height: 45px;
        max-width: 100%
    }

    .filters__title {
        text-align: center
    }

    .filters__title a {
        background: #3f538e;
        border-radius: 4px;
        color: #fff;
        cursor: pointer;
        padding: 10px 20px;
        text-align: center
    }

    .filters__title a:active, .filters__title a:focus, .filters__title a:hover {
        background: #1b2354;
        color: #fff
    }

    .filters__button {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
}

@media only screen and (max-width: 700px) {
    .registration__box {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

@media only screen and (max-width: 640px) {
    .header__info {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 6px
    }

    .header__tel, .header__tel-0800 {
        text-align: center
    }

    .header__tel-0800-text {
        display: none
    }

    .header__menu-box {
        top: 104px
    }

    .swiper-home {
        margin: 30px 0
    }
}

@media only screen and (max-width: 575px) {
    body {
        font-size: .875rem
    }

    .container, .container-fluid {
        padding: 0 15px
    }

    .footer__box {
        gap: 10px
    }

    .swiper-home__button_next {
        right: 10px
    }

    .swiper-home__button_prev {
        left: 10px
    }

    .grid-4 {
        gap: 10px;
        grid-template-columns:repeat(auto-fit, minmax(min(150px, 100%), 1fr))
    }

    .products__h3 {
        margin-top: 10px
    }

    .products__article, .products__cost, .products__h3, .products__instock {
        padding: 0 15px
    }

    .products__button {
        margin-left: 15px
    }

    .benefits__item {
        padding: 20px
    }

    .product {
        margin-top: 2.5rem
    }

    .product__box {
        -ms-grid-columns: 1fr;
        grid-template-columns:1fr;
        -ms-grid-rows: 1fr;
        gap: 10px;
        grid-template-rows:1fr
    }

    .product__box > :first-child {
        -ms-grid-column: 1;
        -ms-grid-row: 1
    }

    .product__left {
        margin-bottom: 0;
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        grid-area: auto;
        order: 2
    }

    .product__center {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        grid-area: auto;
        order: 1
    }

    .product__right {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        grid-area: auto;
        order: 3
    }

    .product__h2 {
        margin-bottom: 10px
    }

    .cart__img {
        height: 100px;
        width: 100px
    }

    .cart__product-cost, .cart__product-title {
        font-size: 16px
    }

    .cart__product-cost__product-article, .cart__product-title__product-article {
        font-size: 14px
    }
}

@media only screen and (max-width: 500px) {
    .home-banner__h2 {
        font-size: 30px
    }

    .orders__item {
        max-height: 100px
    }

    .orders__header {
        height: 100px
    }

    .orders__header, .orders__header-left {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center
    }
}

@media only screen and (max-width: 480px) {
    .swiper-home {
        margin: 20px 0
    }
}

@media only screen and (max-width: 400px) {
    .cart__img {
        height: 50px;
        width: 50px
    }
}

@media only screen and (max-width: 385px) {
    .header__tel {
        font-size: 14px
    }

    .header__tel-0800 {
        font-size: 16px
    }

    .header__menu-box {
        top: 92px
    }
}

@media only screen and (max-width: 355px) {
    .header__logo {
        width: 50px
    }

    .header__tel {
        font-size: 12px
    }

    .header__tel-0800 {
        font-size: 14px
    }

    .header__menu-box {
        top: 83px
    }

    .header__burger {
        font-size: 18px;
        height: 30px;
        width: 30px
    }
}

@media only screen and (max-width: 350px) {
    .cart__img {
        display: none
    }
}

section.registration div.container {
    max-width: 400px;
}

.autocomplete-suggestions {
    border: 1px solid #999;
    background: #FFF;
    overflow: auto;
}

.autocomplete-suggestion {
    padding: 2px 5px;
    white-space: nowrap;
    overflow: hidden;
}

.autocomplete-selected {
    background: #F0F0F0;
}

.autocomplete-suggestions strong {
    font-weight: normal;
    color: #3399FF;
}

.autocomplete-group {
    padding: 2px 5px;
}

.autocomplete-group strong {
    display: block;
    border-bottom: 1px solid #000;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1b2354 !important;
    margin-top: 4px !important;
    padding-left: 0 !important;
}

#cart__alert {
    padding: 10px;
    border-radius: 4px;
    border: 1px solid black;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
    font-weight: bold;
    display: none;
}

.cart__error {
    background: red;
    color: white;
}

.cart__success {
    background: green;
    color: white;
}


/* Orders responsive styles */
.orders-grid {
    display: grid;
    grid-template-columns:repeat(12, 1fr);
    gap: 16px
}

.order-card {
    grid-column: span 12;
    background: #fff;
    border: 1px solid #E1E5EE;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
    display: flex;
    flex-direction: column
}

.order-card__header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #EAECEF;
    background: #F8FAFD
}

.order-card__number {
    font-weight: 700
}

.order-card__date {
    color: #6B7280;
    font-size: .9rem
}

.order-card__body {
    padding: 12px 16px;
    display: grid;
    gap: 8px
}

.order-card__row {
    display: flex;
    justify-content: space-between;
    gap: 8px
}

.order-card__label {
    color: #6B7280
}

.order-card__status {
    font-weight: 600
}

.order-card__status_new {
    color: #1E90FF
}

.order-card__status_processing {
    color: #F59E0B
}

.order-card__status_completed {
    color: #10B981
}

.order-card__total {
    font-weight: 700
}

.order-card__footer {
    padding: 12px 16px;
    border-top: 1px solid #EAECEF;
    display: flex;
    justify-content: flex-end
}

/* Detail page */
.order-demo__title-box {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center
}

.order-summary {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 12px;
    border: 1px solid #E1E5EE;
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    margin-bottom: 16px
}

.order-summary__row {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.order-summary__label {
    color: #6B7280
}

.order-summary__total {
    font-weight: 700
}

.order-block__title {
    font-size: 1.1rem;
    margin: 12px 0
}
.order-block__content {
    border: 1px solid #E1E5EE;
    border-radius: 8px;
    background: #fff;
    padding: 12px
}

.order-delivery__grid, .order-delivery__warehouse {
    display: grid;
    gap: 8px;
}
.order-delivery__grid {
    grid-template-columns:repeat(2, 1fr);
    padding-bottom: 12px;
}
.order-delivery__warehouse {
    grid-template-columns:repeat(1, 1fr);
}

.order-block__item span {
    color: #6B7280;
    margin-right: 6px;
    display: block;
}

.order-items__table {
    border: 1px solid #E1E5EE;
    border-radius: 8px;
    background: #fff
}

.order-items__thead, .order-items__row {
    display: grid;
    grid-template-columns:80px 4fr 2fr 1fr 2fr 2fr;
    gap: 8px;
    padding: 10px 12px
}

.order-items__thead {
    background: #F8FAFD;
    color: #6B7280;
    font-weight: 600
}

.order-items__row {
    border-top: 1px solid #EAECEF
}

.order-items__tfoot {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px;
    font-weight: 700
}

.text-right {
    text-align: right
}

/* Adaptive */
@media (max-width: 1024px) {
    .order-summary {
        grid-template-columns:1fr
    }

    .order-delivery__grid {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media (max-width: 640px) {
    .orders-grid {
        grid-template-columns:repeat(6, 1fr)
    }

    .order-card {
        grid-column: span 6
    }

    .order-items__thead, .order-items__row {
        grid-template-columns:1fr 1fr 1fr 1fr 1fr
    }

    .order-items__row .order-items__cell {
        display: flex;
        justify-content: space-between
    }

    /* Hide thumbnails on mobile */
    .order-card__row_photos {
        display: none !important
    }

    .order-card__thumbs {
        display: none !important
    }

    .order-photos {
        display: none !important
    }

    .order-card__thumbs-fade {
        display: none !important
    }
}

/* Order list thumbnails */
.order-card__thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto
}

/* Inline style moved from order-show.html.twig */
.order-items__thumb img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
}


/* Product promo: product-card styles */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #e5e7eb; /* gray-200 */
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.product-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08);
    transform: translateY(-2px);
}

.product-card__image-link {
    display: block;
    background: #f9fafb; /* gray-50 */
    aspect-ratio: 4 / 3;
    padding: 8px;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    flex: 1;
}

.product-card__title {
    color: #111827; /* gray-900 */
    font-weight: 600;
    text-decoration: none;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card__title:hover {
    color: #0d6efd; /* primary */
}

.product-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: #6b7280; /* gray-500 */
    font-size: .875rem;
}

.product-card__article {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-card__availability {
    white-space: nowrap;
}

.product-card__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 12px 12px;
}

.product-card__price-value {
    font-weight: 700;
    font-size: 1.125rem; /* 18px */
    color: #111827;
}

.product-card__price-value--unavailable {
    color: #9ca3af; /* gray-400 */
}

.product-card__button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
}

@media only screen and (max-width: 575px) {
    .product-card__footer {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .product-card__button {
        width: 100%;
        justify-content: center;
    }
}

/* Manager Contact Notification */
.manager-contact {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 16px;
    margin-top: 12px;
}

.manager-contact__title {
    font-weight: 600;
    color: #3f538e;
    margin-bottom: 8px;
    font-size: 14px;
}

.manager-contact__button {
    background: #3f538e;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    transition: background-color 0.3s ease;
    margin-bottom: 12px;
}

.manager-contact__button:hover {
    background: #ecd900;
}

.manager-contact__popup {
    display: none;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 16px;
    margin-top: 8px;
}

.manager-contact__popup.show {
    display: block;
}

.manager-contact__working-hours {
    background: #e3f2fd;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 14px;
}

.manager-contact__working-hours-title {
    font-weight: 600;
    color: #1976d2;
    margin-bottom: 8px;
}

.manager-contact__managers {
    display: grid;
    gap: 12px;
}

.manager-contact__manager {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #3f538e;
}

.manager-contact__manager-name {
    font-weight: 600;
    color: #212529;
    margin-bottom: 6px;
}

.manager-contact__manager-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

.manager-contact__manager-phone,
.manager-contact__manager-email {
    color: #3f538e;
    text-decoration: none;
}

.manager-contact__manager-phone:hover,
.manager-contact__manager-email:hover {
    color: #ecd900;
}

@media only screen and (max-width: 768px) {
    .manager-contact {
        padding: 12px;
    }
    
    .manager-contact__popup {
        padding: 12px;
    }
}


/* --- Autocity fix (2025-11-07): ensure Popular Categories tiles are block-level so aspect-ratio applies --- */
.categories__item { display: block; }