@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --Red-Berry: #900;
    --Black-Alto-Grey: #D8D8D8;
    --Black-Black-EEL: #2B2B2B;
    --Black-Thundra-Grey: #474747;
    --White: #FFF;
}

body * {
    font-family: "Poppins", sans-serif;
}

.page {}

.header {
    position: sticky;
    top: -45px;
    left: 0;
    z-index: 10;
    background-color: #fff;
}

.header__top {
    border-bottom: 1px solid #D9D9D9;
    position: relative;
    z-index: 13;
}

.headerTop__content {
    height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.container {
    max-width: 1600px;
    width: calc(100% - 80px);
    margin: 0 auto;
}

.container2 {
    max-width: 1308px;
    width: calc(100% - 80px);
    margin: 0 auto;
}

.headerTop__left {}

.headerTop__textWrap {}

.headerTop__text {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.headerTop__link {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    text-decoration-line: underline;
    color: var(--Red-Berry);
}

.headerTop__link:hover {
    text-decoration: none;
}

.headerTop__right {
    display: flex;
    height: 100%;
}

.headerTop__menu {
    height: 100%;
    position: relative;
}

.headerTopMenu__current {
    cursor: pointer;
}

.headerTopMenu__current {
    padding: 0 20px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
}

.headerTop__menu:not(:last-of-type) .headerTopMenu__current:after {
    content: "";
    clear: both;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5px;
    height: 16px;
    background: var(--Black-Alto-Grey);
    border-radius: 10px;
}

.headerTopMenu__current-text {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Black-EEL);

}

.headerTopMenu__arrow {}

.headerTopMenu__content {}

.headerTopMenu__icon {}

.header__main {
    border-bottom: 1px solid #D9D9D9;
    position: relative;
    z-index: 12;
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo__link {}

.logo__img {}

.nav {
    display: flex;
    gap: 40px;
    height: 100%;
}

.nav__link {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
}

.nav__link::after {
    content: "";
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background: var(--Black-Black-EEL);
    opacity: 0;
    transition: 500ms all;
}

.nav__linkWrap:hover .nav__link:after {
    opacity: 1;
}

.navLink__title {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
}

.helpful__block {
    display: flex;
    align-items: center;
    gap: 20px;
}

.search__wrap {
    position: relative;
}

.search__input {
    background-color: var(--Black-White-Smoke, #EDEDED);
    border: none;
    border-radius: 30px;
    height: 42px;
    width: 300px;
    padding: 12px 20px;
    box-sizing: border-box;
    transition: 500ms all;
    border: 1px solid transparent;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.search__input:hover,
.search__input:focus {
    border-color: var(--Black-Black-EEL);
    outline: none;
}

.search__btn {
    border: none;
    background: no-repeat;
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.searchBtn__icon {}

.cartBlock {
    position: relative;
}

.cartBlock__link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.cartBlock__icon {
    width: 24px;
    height: 24px;
}

.cartBlock__count {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #E31E24;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.cartBlock__count.animate {
    animation: cartRipple 0.8s ease-out;
}

@keyframes cartRipple {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4);
        transform: scale(1);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
        transform: scale(1);
    }
}

.cartDropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 400px;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 1000;
}

.cartBlock:hover .cartDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cartDropdown__content {
    max-height: 400px;
    overflow-y: auto;
    padding: 20px;
}

.cartDropdown__empty {
    padding: 40px 20px;
    text-align: center;
}

.cartDropdown__emptyText {
    color: #666;
    font-size: 16px;
}

.cartDropdown__items {
    margin-bottom: 20px;
}

.cartDropdownItem {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #EEEEEE;
}

.cartDropdownItem:last-child {
    border-bottom: none;
}

.cartDropdownItem__image {
    width: 80px;
    height: 80px;
    margin-right: 15px;
    flex-shrink: 0;
}

.cartDropdownItem__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.cartDropdownItem__info {
    flex-grow: 1;
}

.cartDropdownItem__title {
    font-size: 14px;
    font-weight: 600;
    color: #2B2B2B;
    margin-bottom: 8px;
}

.cartDropdownItem__details {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.cartDropdownItem__details p {
    margin-bottom: 4px;
}

.cartDropdownItem__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cartDropdownItem__quantity {
    font-size: 14px;
    color: #666;
}

.cartDropdownItem__price {
    font-size: 14px;
    font-weight: 600;
    color: #2B2B2B;
}

.cartDropdown__footer {
    padding-top: 15px;
    border-top: 1px solid #EEEEEE;
}

.cartDropdown__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.cartDropdown__totalLabel {
    font-size: 16px;
    color: #2B2B2B;
}

.cartDropdown__totalValue {
    font-size: 18px;
    font-weight: 600;
    color: #2B2B2B;
}

.cartDropdown__button {
    width: 100%;
    text-align: center;
}

.cartDropdown__content::-webkit-scrollbar {
    width: 6px;
}

.cartDropdown__content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.cartDropdown__content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.cartDropdown__content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.headerMain__wrap {
    height: 64px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__sub {
    position: absolute;
    width: 100%;
    left: 0;
    top: 101%;
    background-color: #fff;
    z-index: 2;
    padding: 50px 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
}

.nav__linkWrap:hover .nav__sub {
    opacity: 1;
    visibility: visible;
}

.nav__linkWrap {
    /* position: relative; */
}

.navSub__wrap {
    display: flex;
    justify-content: space-between;
}

.navSub__menu {
    display: flex;
    flex: 1;
    gap: 20px;
}

.navSubMenu__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 180px;
    width: 100%;
}

.navSubMenu__block {}

.navSubMenu__titleWrap {}

.navSubMenu__title {
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
}

.navSubMenu__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.navSubMenu__link {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Mine-Shaft, #333);
    transition: 500ms all;
}

.navSubMenu__link:hover {
    color: var(--Red-Berry);
}

.navSubMenu__title-red {
    color: var(--Red-Berry);
}

.navSub__imgWrap {
    display: flex;
}

.navSub__img {}

.sliderSection {
    margin-top: 20px;
}

.sliderBlock {
    position: relative;
}

.sliderBlock__btnWrap {
    /* position: relative; */
    /* z-index: 1; */
}

.sliderBlock__btn {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: 500ms all;
    background-color: #fff;
    z-index: 1;
    cursor: pointer;
}

.sliderBlock__btn:hover {
    border-color: var(--Black-Black-EEL);
}

.sliderBlock__btn-prev {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
}

.sliderBlock__btn-next {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.sliderBlock__btn-img {}

.mainSlider__link {
    position: relative;
    display: flex;
}

.mainSlider__link::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--Black-Black-EEL);
    opacity: 0;
    transition: 500ms all;
}

.mainSlider__link:hover:after {
    opacity: 0.5;
}

.productCarusel {
    margin: 40px 0 110px;
}

.productCarusel__block {}

.productCarusel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productCaruselHeader__title {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 31.2px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
}

.productCaruselHeader__btn {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Thundra-Grey);
    display: flex;
    align-items: center;
    gap: 5px;
    transition: 500ms all;
}

.productCaruselHeader__btn span {
    transition: 500ms all;
}

.productCaruselHeader__btn:hover {
    color: var(--Red-Berry);
}

.productCaruselHeader__btn-icon {}

.productCarusel__main {
    margin-top: 30px;
}

.productCarusel__main::-webkit-scrollbar {
    display: none;
}

.productCarusel__main.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}

.product {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* flex: 1 0 240px; */
    width: 240px;
}

.w-240 {
    width: 240px !important;
}

.w-360 {
    width: 360px !important;
}

.product__top {
    position: relative;
}

.productTop__imgWrap {
    display: flex;
    position: relative;
}

.productTop__orange {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    color: var(--White);
    background: #E3990F;
    padding: 2px 8px;
}

.productTop__green {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    color: var(--White);
    background: #27C249;
    padding: 2px 8px;
}

.productTop__red {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    color: var(--White);
    background: #E30F0F;
    padding: 2px 8px;
}

.productTop__img {}

/* .product__bottom {
    display: flex;
    justify-content: space-between;
} */

.productBottom__top {
    display: flex;
    justify-content: space-between;
}

.productBottom__left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.productBottom__text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Thundra-Grey);
}

.productBottom__link {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
    transition: 500ms all;
}

.productBottom__link:hover {
    color: var(--Red-Berry);
}

.productBottom__right {}

.productBottom__price {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Black-EEL);
}

.productTop__params {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.50);
    transition: 500ms all;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 20px;
    opacity: 0;
}

.product__top:hover .productTop__params {
    opacity: 1;
}

.productTop__param {}

.productTopParam__labelWrap {}

.productTopParam__label {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
    color: var(--White);
}

.productTopParam__colors {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.productTopParam__color {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    cursor: pointer;
    transition: 500ms all;
}

.productTopParam__color:hover {
    transform: scale(1.1);
    border-color: var(--Black-Black-EEL);
    ;
}

.productTopParam__sizes {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.productTopParam__size {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
    color: var(--White);
    background: no-repeat;
    cursor: pointer;
    border: 1px solid transparent;
    width: auto;
    height: 26px;
    transition: 500ms all;
}


.productTopParam__size.active {
    border-color: var(--White);
}

.productTopParam__size:hover {
    border-color: var(--White);
}

.categoriesBlock {}

.categoriesBlock__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Default: 4 columns */
    gap: 20px;
}

.category {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.category__imgWrap {
    display: flex;
}

.category__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 365 / 547; /* Adjust aspect ratio to be taller */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    transition: 500ms all;
}

.category:hover .category__img {
    transform: scale(1.1);
}

.category__link {
    position: absolute;
    bottom: 16px;
    width: calc(100% - 40px);
    left: 50%;
    transform: translateX(-50%);
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--White);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 24px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
    border: 2px solid transparent;
    transition: 500ms all;
}

.category__link:hover {
    border-color: var(--Black-Black-EEL);
}

.mb-80 {
    margin-bottom: 80px;
}

.brandsSection {}

.brands {
    display: flex;
    justify-content: space-between;
}

.brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.brand__img {
    transition: 500ms all;
}

.brand:hover .brand__img {
    transform: scale(1.1);
}

.productBottom__price .new {
    color: var(--Red-Berry);
    margin-left: 3px;
}

.productBottom__price .old {
    position: relative;
}

.productBottom__price .old:after {
    content: "";
    clear: both;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
    background-color: var(--Black-Black-EEL);
    ;
}

.whyChooseSection {}

.whyChoose__content {}

.whyChoose__header {}

.mw-1056 {
    max-width: 1056px;
    width: 100%;
    margin: 0 auto;
}

.h1 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 31.2px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
}

.h2 {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 24px */
    text-transform: uppercase;
}

.text__wrap {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 22.4px */
    color: var(--Black-Mine-Shaft, #333);
}

.text b {
    font-weight: 700;
}

.text span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-60 {
    margin-top: 60px;
}

.mb-40 {
    margin-bottom: 40px;
}

.subscribeSection {
    background: var(--Black-White-Smoke, #EDEDED);
    padding: 60px 0;
}

.subscribe {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subscribe__left {}

.subscribe__titleWrap {}

.subscribe__textWrap {
    margin-top: 10px;
}

.subscribe__right {
    max-width: 560px;
    width: 100%;
}

.subscribe__form {
    height: 56px;
    display: flex;
}

.subscribeForm__input {
    width: 100%;
    background: var(--White);
    border: 1px solid transparent;
    transition: 500ms all;
    padding: 0 20px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Thundra-Grey, #474747);
}

.subscribeForm__input:focus,
.subscribeForm__input:hover {
    outline: none;
    border-color: var(--Black-Black-EEL);
}

.subscribeForm__btn {
    max-width: 154px;
    width: 100%;
    background: var(--Black-Black-EEL);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--White);
    cursor: pointer;
    transition: 500ms all;
    border: 1px solid var(--Black-Black-EEL);
}

.subscribeForm__btn:focus {
    outline: none;
}

.subscribeForm__btn:hover {
    background: var(--White);
    color: var(--Black-Black-EEL);
}

.footer {
    background: var(--Black-Black-EEL);
}

.footer__content {}

.footer__top {
    padding: 60px 0;
    display: flex;
    gap: 40px;
}

.footer__contacts {
    min-width: 300px;
}

.footerContacts__header {}

.footer__title {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--White);
}

.footerContacts__content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footerContacts__text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--White);
}

.footerContacts__text span {
    font-weight: 600;
}

.footer__managers {
    flex: 1;
}

.footerManagers__content {
    margin-top: 30px;
    display: flex;
    gap: 30px;
}

.footerManagers__col {
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 200px;
}

.footerManagers__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__socials {}

.footerSocials__titleWrap {}

.footerSocials__title {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--White);
}

.footerSocials__content {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}

.footerSocials__link {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: 500ms all;
}

.footerSocials__link:hover {
    background: var(--White);
}

.footerSocials__link path {
    transition: 500ms all;
}

.footerSocials__link:hover path {
    fill: var(--Black-Black-EEL);
}


.footerSocials__link-img {}

.footer__bottom {
    border-top: 1px solid var(--Black-Mine-Shaft, #333);
    padding: 30px 0;
    display: flex;
    justify-content: space-between;
}

.footerBottom__left {}

.copyright__text {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--White);
}

.footerBottom__right {}

.footerBottom__menu {
    display: flex;
    align-items: center;
    gap: 18px;
}

.footerBottomMenu__link {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--White);
    transition: 500ms all;
}

.footerBottomMenu__link:hover {
    color: var(--Black-Alto-Grey);
}

.page.overlay:after {
    content: "";
    clear: both;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 8;
}

.page.overlay2 .header:after {
    content: "";
    clear: both;
    position: fixed;
    top: 44px;
    left: 0;
    width: 100%;
    height: calc(100vh - 44px);
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 12;
}

.page.overlay3 .filtersBlock:after {
    content: "";
    clear: both;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.50);
    z-index: 12;
}

.headerTopMenuCurrent__wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 100%;
    transition: 500ms all;
    position: relative;
}

.headerTopMenuCurrent__wrap:after {
    content: "";
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background: var(--Black-Black-EEL);
    opacity: 0;
    transition: 500ms all;
}

.headerTop__menu:hover .headerTopMenuCurrent__wrap:after {
    opacity: 1;
}

.language__sub {
    position: absolute;
    width: 100%;
    top: 102%;
    background-color: var(--White);
    z-index: 2;
    padding: 50px 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    width: 140px;
    right: 0;
    padding: 22px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-bottom: 1px solid #D9D9D9;
}

.languageSub__link {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Black-EEL);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 500ms all;
}

.languageSub__link:hover {
    color: var(--Red-Berry);
}

.headerTop__menu:hover .language__sub {
    opacity: 1;
    visibility: visible;
}

.headerTopMenu__content {
    position: absolute;
    width: 100%;
    top: 102%;
    background-color: var(--White);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    width: 220px;
    right: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #D9D9D9;
}

.headerTop__menu:hover .headerTopMenu__content {
    opacity: 1;
    visibility: visible;
}


.headerTopMenu__block {
    padding: 20px 24px;
    box-sizing: border-box;
}

.headerTopMenuBlock__titleWrap {}

.headerTopMenuBlock__title {
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Black-EEL);
}

.headerTopMenuBlock__links {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.headerTopMenuBlock__link {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Mine-Shaft, #333);
    transition: 500ms all;
}

.headerTopMenuBlock__link:hover {
    color: var(--Red-Berry);
}

.headerTopMenu__block:not(:last-of-type) {
    border-bottom: 1px solid #D9D9D9;
}

.mainSection {}

.breadcrumbs {
    margin: 30px 0;
}

.breadcrumbs__content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb {}

.breadcrumb__link {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
    color: var(--Black-Black-EE);
    transform: 500ms all;
}

.breadcrumb__link:hover {
    color: var(--Red-Berry);
}

.breadcrumb__current {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
    color: var(--Black-Dusty-Gray, #959595);
}

.breadcrumb__arrow {
    max-width: 12px;
}

.content {
    margin-top: 20px;
}

.page__titleWrap {}

.h1 {}

.filtersBlock {
    margin: 30px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.filters {
    position: relative;
}

.filters__btn {
    border: none;
    background: no-repeat;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 500ms all;
}

.filtersBtn__icon {
    transition: 500ms all;
}

.filtersBtn__text {
    color: var(--Black-Black-EE);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    transition: 500ms all;
}

.filters__btn:hover .filtersBtn__icon path {
    stroke: var(--Red-Berry);
}

.filters__btn:hover .filtersBtn__text {
    color: var(--Red-Berry);
}

.items {}

.items__text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Dusty-Gray, #959595);
}

.products {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
}

.products .product {
    width: 100%;
}

.pagintaion {
    margin: 40px 0;
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
}

.pagintaion__link {
    color: var(--Black-Dusty-Gray, #959595);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
    transition: 500ms all;
    display: flex;
    align-items: center;
}

.pagintaion__link:hover {
    color: var(--Black-Black-EEL);
}

.pagintaion__link.active {
    color: var(--Black-Black-EEL);
}

.pagintaionLinj__icon {
    width: 16px;
    height: 16px;
}

.filtersContent {
    position: fixed;
    top: 0;
    left: 0;
    max-width: 390px;
    width: 100%;
    background-color: var(--White);
    height: 100vh;
    z-index: 11;
    display: flex;
    flex-direction: column;
    transform: translateX(-390px);
    transition: 500ms all;
}

.filtersContent__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px;
    border-bottom: 1px solid var(--Black-Alto-Grey);
}

.filtersContentHeader__title {
    color: var(--Black-Black-EEL);
    /* Semibold/17 */
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 20.4px */
}

.filtersContentHeader__close {
    background: no-repeat;
    cursor: pointer;
    transition: 500ms all;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

.filtersContentHeaderClose__icon {}

.filtersContent__scroll {
    flex: 1;
    overflow-y: scroll;
    padding: 12px;
}

.filtersContent__main {}

.filter__collapse {
    border-bottom: 1px solid var(--Black-Alto-Grey);
    padding: 10px 8px;
}

.filterCollapse__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    cursor: pointer;
}

.filterCollapseHeader__title {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    color: var(--Black-Black-EEL);
}

.filterCollapseHeader__iconWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 500ms all;
}

.filter__collapse.active .filterCollapseHeader__iconWrap {
    transform: rotate(-180deg);
}

.filterCollapseHeader__icon {}

.filterCollapse__content {
    height: 0;
    visibility: hidden;
    opacity: 0;
    transition: 100ms all;
}

.filtersContent__btnWrap {
    padding: 20px;
    display: flex;
    gap: 8px;
}

.button {
    flex: 1;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1.5px solid var(--Black-Black-EEL);
    background: var(--White);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 16.8px */
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
    transition: 500ms all;
    cursor: pointer;
}

.button2 {
    flex: 1;
    height: 47px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--Black-Black-EEL);
    color: var(--White);
    cursor: pointer;
    transition: 500ms all;
    border: 1.5px solid var(--Black-Black-EEL);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 16.8px */
    text-transform: uppercase;
    color: var(--White);
}

.button:not(:disabled):hover {
    color: var(--White);
    background: var(--Black-Black-EEL);
}

.button2:not(:disabled):hover {
    background: var(--Black-Thundra-Grey, #474747);
}

button:disabled {
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    background: var(--Black-White-Smoke, #EDEDED);
    color: var(--Black-Dusty-Gray, #959595);
    cursor: no-drop;
}

.filtersContent__scroll {
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.filtersContent__scroll::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.radio__container {
    display: block;
    position: relative;
    padding-left: 26px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Black-EEL);
    padding: 8px 8px 8px 26px;
}

.radio__container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio__checkmark {
    position: absolute;
    top: 8px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: var(--White);
    border-radius: 50%;
    border: 1px solid var(--Black-Dusty-Gray, #959595);
}

.radio__container input:checked~.radio__checkmark {
    border-color: var(--Red-Berry);
}

.radio__container:hover input~.radio__checkmark {
    border-color: var(--Red-Berry);
}

.radio__container:hover input~.radio__checkmark:after {
    display: block;
}

.radio__checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.radio__container input:checked~.radio__checkmark:after {
    display: block;
}

.radio__container .radio__checkmark:after {
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--Red-Berry);
    transform: translate(-50%, -50%);
}

.mb-10 {
    margin-bottom: 10px;
}

.filter__collapse.active .filterCollapse__content {
    visibility: visible;
    opacity: 1;
    height: 100%;
}

.checkbox__container {
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Black-EEL);
    padding: 8px 8px 8px 26px;
}

.checkbox__container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox__checkmark {
    position: absolute;
    top: 8px;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: var(--White);
    border: 1px solid var(--Black-Dusty-Gray, #959595);
    transition: 500ms all;
}

.checkbox__container:hover input~.checkbox__checkmark {
    background-color: var(--Red-Berry, #900);
    border-color: var(--Red-Berry, #900);
}

.checkbox__container input:checked~.checkbox__checkmark {
    background-color: var(--Red-Berry, #900);
    border-color: var(--Red-Berry, #900);
}

.checkbox__checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checkbox__container input:checked~.checkbox__checkmark:after {
    display: block;
}

.checkbox__container:hover input~.checkbox__checkmark:after {
    display: block;
}

.checkbox__container .checkbox__checkmark:after {
    left: 6px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.filter__collapse.active .filter__inputWrap {
    margin: 10px 0;
}

.filter__input {
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    height: 48px;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    color: var(--Black-Thundra-Grey);
}

.filter__input:focus {
    outline: none;
}

.filtersBlock.active .filtersContent {
    transform: initial;
}

.range_container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sliders_control {
    position: relative;
    min-height: 25px;
}

.form_control {
    position: relative;
    display: flex;
    justify-content: space-between;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    /* box-shadow: 0 0 0 1px #900; */
    border: 3px solid #900;
    cursor: pointer;
}

input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    pointer-events: all;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    /* box-shadow: 0 0 0 1px #900; */
    border: 3px solid #900;
    cursor: pointer;
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #f7f7f7;
}

/* input[type=range]::-webkit-slider-thumb:active {
    box-shadow: inset 0 0 3px #900, 0 0 9px #900;
    -webkit-box-shadow: inset 0 0 3px #900, 0 0 9px #900;
} */

input.form_control_container__time__input[type="number"] {
    color: #8a8383;
    width: 100px;
    height: 40px;
    font-size: 20px;
    border: 1px solid var(--Black-Dusty-Gray, #959595);
    box-sizing: border-box;
    padding: 0 12px 0 24px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: var(--Black-Black-EEL, #2B2B2B);
}

input.form_control_container__time__input[type="number"]::-webkit-inner-spin-button,
input.form_control_container__time__input[type="number"]::-webkit-outer-spin-button {
    opacity: 1;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    width: 100%;
    position: absolute;
    background-color: red;
    pointer-events: none;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: var(--Black-Black-EEL, #2B2B2B);
    border-radius: 10px;
}

#fromSlider {
    height: 0px;
    z-index: 1;
    transform: translateY(2px);
}

.form_control_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.range__line {
    width: 16px;
    height: 1px;
    background-color: var(--Black-Black-EEL, #2B2B2B);
}

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

input.form_control_container__time__input[type="number"] {
    -moz-appearance: textfield;
}

.form_control_container {
    position: relative;
}

.symbol {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    color: var(--Black-Black-EEL, #2B2B2B);
}

.cart {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 30px 0 80px;
}

.cart__left {
    flex: 1;
}

.cart__products {}

.cart__product {
    display: flex;
    border-bottom: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 20px 0;
}

.cartProduct__link {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.cartProduct__img {}

.cartProduct__info {
    flex: 1;
}

.cartProductInfo__link {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cartProductInfo__title {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--Black-Thundra-Grey, #474747);
}

.cartProductInfo__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    text-decoration-line: underline;
}

.cartProduct__params {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 15px;
}

.cartProduct__param {}

.cartProductParam__text {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Black-EEL, #2B2B2B);
}

.cartProductParam__text2 {
    color: var(--Black-Dusty-Gray, #959595);
}

.cartProduct__deleteBtnWrap {
    margin-top: 20px;
}

.cartProduct__deleteBtn {
    color: var(--Black-Mine-Shaft, #333);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    text-decoration-line: underline;
    background: no-repeat;
    border: none;
    padding: 0;
    transition: 500ms all;
    cursor: pointer;
}

.cartProduct__deleteBtn:hover {
    text-decoration: none;
}

.cartProduct__quantity {
    display: flex;
    align-items: flex-start;
    margin-right: 135px;
}

.cartProductQuantity__btn {
    width: 40px;
    height: 40px;
    border: none;
    background: no-repeat;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #2B2B2B;
    font-weight: 500;
    font-size: 16px;
    color: var(--Black-Black-EEL, #2B2B2B);
    cursor: pointer;
    transition: 500ms all;
}

.cartProductQuantity__btn:not(:disabled):hover {
    background-color: var(--Black-Black-EEL, #2B2B2B);
    color: var(--White);
    border-color: var(--Black-Black-EEL, #2B2B2B);
}

.cartProductQuantity__input {
    width: 58px;
    text-align: center;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    border-left: none;
    border-right: none;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
    color: var(--Black-Black-EEL, #2B2B2B);
}

.cartProductQuantity__input {}

.cartProductQuantity__input::-webkit-outer-spin-button,
.cartProductQuantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.cartProductQuantity__input.form_control_container__time__input[type="number"] {
    -moz-appearance: textfield;
}

.cartProductQuantity__input:focus {
    outline: none;
}

.cartProduct__sum {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    min-width: 120px;
    width: 120px;
}

.cartProductSum__value {

    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
    color: var(--Black-Black-EEL, #2B2B2B);
}

.cartProductSum__value-old {
    position: relative;
}

.cartProductSum__value-old:after {
    content: "";
    clear: both;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--Black-Black-EEL, #2B2B2B);
    transform: translateY(-50%);
}

.cartProductSum__value-new {
    color: var(--Red-Berry, #900);
}

.cart__right {
    max-width: 380px;
    width: 100%;
    position: relative;
}

.cart__info {
    background: var(--Black-White-Smoke, #EDEDED);
    padding: 50px 30px 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky;
    top: 80px;
    left: 0;
}

.cartInfo__row {
    display: flex;
    justify-content: space-between;
}

.cartInfo__label {
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 24px */
    color: var(--Black-Thundra-Grey, #474747);
}

.cartInfo__value {
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    color: var(--Black-Black-EEL, #2B2B2B);
}

.cartInfo__line {
    width: 100%;
    height: 1px;
    background-color: var(--Black-Alto-Grey, #D8D8D8);
    margin: 10px 0;
}

.cartInfo__btnWrap {
    width: 100%;
    margin-top: 10px;
}

.cartInfo__btn {
    background: var(--Green, #67B826);
    border: 1.5px solid var(--Green, #67B826) !important;
    height: 56px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    color: var(--White);
    transition: 500ms all;
    cursor: pointer;
}

.cartInfo__btn:hover {
    background: transparent;
    color: var(--Black-Black-EEL, #2B2B2B);
}

.aboutPage__banner {
    display: flex;
    justify-content: center;
    align-items: center;
}

.aboutPage__content {
    margin-top: 60px;
}

.numbers {
    margin: 60px 0;
}

.numbers__header {}

.h1 {}

.numbers__content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(528px, 1fr));
    grid-gap: 8px;
    margin-top: 30px;
}

.number {
    background: var(--Black-Inputs, #F6F6F6);
    padding: 30px;
    box-sizing: border-box;
}

.number__titleWrap {}

.number__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 54px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    /* 64.8px */
    text-transform: uppercase;
}

.number__textWrap {
    margin-top: 15px;
}

.number__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 24px */
}

.aboutPage {
    margin: 40px 0 80px;
}

.contactPage {
    margin: 40px 0 80px;
}

.simplePage {
    margin: 40px auto 80px;
}

.contacts {
    display: flex;
    gap: 30px;
}

.contacts__left {
    flex: 1;
}

.map {
    width: 100%;
    height: 100%;
}

.map iframe {
    width: 100%;
    height: 100%;
}

.contacts__right {
    flex: 1;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.contactsBlock {
    background: var(--Black-Inputs, #F6F6F6);
    border-bottom: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 40px;
    box-sizing: border-box;
}

.contactsBlock__header {}

.h1 {}

.contactsBlock__content {
    display: flex;
    margin-top: 30px;
}

.contactsBlock__elem {
    flex: 1;
}

.contactsBlock__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Semibold/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
}

.contactsBlock__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 210%;
    /* 19.6px */
    margin-top: 12px;
}

.contacts__form {
    padding: 40px;
}

.contactsForm__header {}

.contactsForm__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 24px */
    margin-top: 5px;
}

.contactsForm__content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contactsForm__row {
    display: flex;
    gap: 10px;
}

.contactsForm__elem {
    flex: 1;
}

.input {
    width: 100%;
    box-sizing: border-box;
    background: var(--Black-Inputs, #F6F6F6);
    border: none;
    height: 52px;
    padding: 0 20px;
    color: var(--Black-Black-EEL);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    border: 1px solid transparent;
    transition: 500ms all;
}

.input:focus,
.input:hover {
    border-color: var(--Black-Dusty-Gray, #959595);
    outline: none;
}

.custom-select__option--value {
    width: 100%;
    box-sizing: border-box;
    background: var(--Black-Inputs, #F6F6F6);
    border: none;
    height: 52px;
    padding: 0 20px;
    color: var(--Black-Black-EEL);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    border: 1px solid transparent;
    transition: 500ms all;
    border-radius: initial;
}

.custom-select__dropdown {
    background: var(--Black-Inputs, #F6F6F6);
    border-color: var(--Black-Dusty-Gray, #959595);
    border-radius: initial !important;
}

.custom-select--active .custom-select__option--value {
    border-radius: initial;
}

.custom-select__option--value:focus,
.custom-select__option--value:hover {
    border-color: var(--Black-Dusty-Gray, #959595);
    outline: none;
}

.custom-select--active .custom-select__option--value:hover,
.custom-select--active .custom-select__option--value:focus {
    background: var(--Black-Inputs, #F6F6F6);
}

.custom-select--active .custom-select__option--value {
    border: 1px solid var(--Black-Dusty-Gray, #959595);
}

.input::placeholder {
    color: var(--Black-Dusty-Gray, #959595);
}

.custom-select__option {
    height: 52px;
    padding: 0 20px;
    color: var(--Black-Black-EEL);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.custom-select__option:not(.custom-select__option--value):hover,
.custom-select__option:not(.custom-select__option--value):focus {
    background: var(--White);
}

.custom-select__option--value::after {
    background: url(../img/arrow-icon.svg);
    width: 16px;
    height: 16px;
    border: none;
    right: 20px;
}

.textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--Black-Inputs, #F6F6F6);
    border: none;
    padding: 16px 20px;
    color: var(--Black-Black-EEL);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    border: 1px solid transparent;
    transition: 500ms all;
    resize: none;
}

.textarea:focus,
.textarea:hover {
    border-color: var(--Black-Dusty-Gray, #959595);
    outline: none;
}

.textarea::placeholder {
    color: var(--Black-Dusty-Gray, #959595);
}

.contactsForm__btnWrap {}

.cartInfo__btn {}

.contactsForm__btn {}

.staff {
    margin-top: 60px;
}

.staff__header {}

.h1 {}

.staff__content {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(313px, 1fr));
    grid-gap: 8px;
}

.staff__elem {
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--Black-Inputs, #F6F6F6);
}

.staff__info {

    width: 100%;

    margin-top: 20px;
}

.staff__imgWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.staff__img {}

.staff__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Semibold/17 */
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 20.4px */
}

.staff__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 24px */
    margin-top: 10px;
}

.ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.li {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 22.4px */
    position: relative;
    padding-left: 22px;
}

.ul .li:after {
    content: "";
    clear: both;
    position: absolute;
    top: 6px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--Black-Black-EEL, #2B2B2B);
}

.ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ol .li {
    list-style: decimal;
    margin-left: 15px;
}

.onlineCatalog {
    margin: 40px 0 80px;
}

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

.catalog {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: 500ms all;
}

.catalog::after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--Black-Black-EEL);
    opacity: 0;
    transition: 500ms all;
}

.catalog:hover:after {
    opacity: 0.5;
}


.catalog__img {}

.footer-light {
    background-color: var(--White);
    border-top: 1px solid #D9D9D9;
}

.simpleHeader {
    border-bottom: 1px solid #D9D9D9;
    position: sticky;
    top: 0;
    left: 0;
    background-color: var(--White);
    z-index: 1;
}

.simpleHeader__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
}

.simpleHeader__logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.simpleHeaderLogo__img {}

.footer-light .copyright__text {
    color: var(--Black-Black-EEL, #2B2B2B);
}

.footer-light .footerBottomMenu__link {
    color: var(--Black-Black-EEL, #2B2B2B);
}

.footer-light .footerBottomMenu__link:hover {
    color: var(--Red-Berry);
}

.footer-light .footer__bottom {
    border: none;
}

.footer-light .footerBottomMenu__link {
    position: relative;
}

.footer-light .footerBottomMenu__link:not(:last-of-type):after {
    content: "";
    clear: both;
    position: absolute;
    top: 1px;
    right: -10px;
    width: 1px;
    height: 16px;
    border-radius: 10px;
    background: var(--Black-Black-EEL, #2B2B2B);
}

.simpleMain {
    overflow: hidden;
}

.loginPage {}

.login__wrap {
    display: flex;
    height: calc(100vh - 144px);
}

.loginPage__left {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login__form {
    max-width: 592px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 40px;
    box-sizing: border-box;
}

.loginForm__header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h1 {}

.loginForm__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 24px */
}

.loginForm__content {
    margin-top: 50px;
}

.loginForm__wrap {}

.loginForm__row {
    position: relative;
}

.input {}

.loginForm__showBtn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: initial;
    color: var(--Black-Dusty-Gray, #959595);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    cursor: pointer;
}

.loginForm__addBtns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.checkbox__container {}

.checkbox__checkmark {}

.loginForm__link {
    color: var(--Black-Mine-Shaft, #333);
    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    transition: 500ms all;
}

.loginForm__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.loginForm__btnWrap {
    margin-top: 30px;
}

.lcartInfo__btn {}

.oginForm__btn {}

.loginForm__textWrap {
    text-align: center;
    margin-top: 20px;
}

.loginFormText__link {
    color: var(--Black-Black-EEL, #2B2B2B);
    text-align: center;
    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
    text-decoration-line: underline;
}

.loginFormText__link:hover {
    text-decoration: none;
}

.loginPage__right {
    max-width: 648px;
    width: 100%;
    padding: 140px 0;
    position: relative;
    display: flex;
    align-items: center;
}

.loginPage__right:after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: var(--Black-Black-EEL, #2B2B2B);
}

.registrationBlock {
    position: relative;
    z-index: 1;
    margin-left: 160px;
}

.registrationBlock__header {}

.registrationBlock__title {
    color: var(--White, #FFF);
    /* H1 */
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 31.2px */
    text-transform: uppercase;
}

.registrationBlock__points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
}

.registrationBlock__point {
    display: flex;
    align-items: center;
    gap: 15px;
}

.registrationBlock__iconWrap {}

.registrationBlock__icon {}

.registrationBlock__text {
    color: var(--White, #FFF);
    /* Medium/16 */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
}

.registrationBlock__btnWrap {
    margin-top: 30px;
}

.registrationBlock__btn:hover {
    border-color: var(--White);
}

.page-simple {
    display: flex;
    flex-direction: column;
    position: relative;
}

.page-simple .simpleMain {
    flex: 1;
}

.registration__btnWrap {
    margin-top: 50px;
}

.registrationPage {
    margin: 80px 0;
}

.registration {
    max-width: 956px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 40px;
    box-sizing: border-box;
}

.registration__header {
    text-align: center;
}

.h1 {}

.registration__content {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.registration__col {
    /* display: flex; */
    /* flex-direction: column; */
    /* gap: 10px; */
}

.registrationCol__header {}

.registrationCol__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.registrationCol__content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.registrationCol__row {
    display: flex;
    gap: 10px;
}

.registrationCol__elem {
    flex: 1;
}

.input {}

.text-small {
    font-size: 12px;
    color: var(--Black-Black-EEL, #2B2B2B);
}

.errorPage {
    position: relative;
    min-height: 34vh;
    margin: 180px 0;
    display: flex;
    align-items: center;
}

.errorPage__bg {
    color: var(--Black-Alto-Grey);
    font-size: 440px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
}

.errorPage__content {
    max-width: 512px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.errorPage__header {}

.h1 {}

.errorPage__text {
    margin-top: 8px;
}

.errorPage__btnWrap {
    max-width: 143px;
    width: 100%;
    margin: 30px auto 0;
}

.button {}

.errorPage__btn:hover {
    border-color: var(--Black-Black-EEL) !important;
    background-color: transparent !important;
    color: var(--Black-Black-EEL) !important;
}

.profileMenu {
    border-bottom: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.profileMenu__content {
    display: flex;
    justify-content: space-between;
}

.deliveyLocation {
    display: flex;
    align-items: center;
    position: relative;
}

.deliveyLocation__header {}

.deliveyLocation__label {
    color: var(--Black-Dusty-Gray, #959595);
    /* Regular/12 */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
}

.deliveyLocation__value {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    cursor: pointer;
}

.deliveyLocationValue__iconWrap {}

.deliveyLocationValue__icon {}

.deliveyLocationValue__title {
    width: 178px;
    white-space: nowrap;
    /* Текст не переносится */
    overflow: hidden;
    /* Обрезаем всё за пределами блока */
    text-overflow: ellipsis;
    /* Добавляем многоточие */
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/14 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.deliveyLocationValue__arrowWrap {}

.deliveyLocationValue__arrow {}

.profileMenu__menu {
    display: flex;
    align-items: center;
    gap: 24px;
}

.profileMenu__link {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    height: 64px;
    display: flex;
    align-items: center;
    position: relative;
    transition: 500ms all;
}

.profileMenu__link:after {
    content: "";
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--Black-Black-EEL);
    opacity: 0;
    transition: 500ms all;
    border-radius: 10px;
}

.profileMenu__link.active:after {
    opacity: 1;
}

.profileMenu__link:hover:after {
    opacity: 1;
}

.profileMenu__logoutWrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profileMenu__logout {
    background: initial;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: 500ms all;
    height: 64px;
    position: relative;
}

.profileMenu__logout:after {
    content: "";
    clear: both;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--Black-Black-EEL);
    opacity: 0;
    transition: 500ms all;
    border-radius: 10px;
}

.profileMenu__logout:hover:after {
    opacity: 1;
}

.profileMenu__logout-text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.profileMenu__logout-icon {}

.orderHistoryPage {
    margin-bottom: 150px;
}

.orderHistoryPage__header {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.orderHistoryPageHeader__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page__titleWrap {}

.orderSearch {
    position: relative;
    max-width: 280px;
    width: 100%;
}

.orderSearch__input {
    height: 50px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
    color: var(--Black-Thundra-Grey, #474747);
    /* Regular/13 */
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    transition: 500ms all;
}

.flex1 {
    flex: 1;
}

.orderSearch__input:focus,
.orderSearch__input:hover {
    outline: none;
    border-color: var(--Black-Black-EEL);
}

.orderSearch__btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background: no-repeat;
    border: none;
    cursor: pointer;
    transition: 500ms all;
}

.orderSearch__btn-icon {}

.orderHistoryPageHeader__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.orderHistoryPageHeader__categories {
    display: flex;
    align-items: center;
    gap: 4px;
}

.orderHistoryPageHeader__category {
    height: 44px;
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    /* 18.2px */
    text-transform: uppercase;
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    background: var(--White, #FFF);
    transition: 500ms all;
    cursor: pointer;
    transition: 500ms all;
}

.orderHistoryPageHeader__category:focus {
    outline: none;
}

.orderHistoryPageHeader__category:hover,
.orderHistoryPageHeader__category.active {
    background-color: var(--Black-Black-EEL, #2B2B2B);
    border-color: var(--Black-Black-EEL, #2B2B2B);
    color: var(--White);
}

.orderHistoryPageHeaderBottom__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    justify-content: flex-end;
}

.dateWrap {
    width: 100%;
    height: 47px;
    display: flex;
    align-items: center;
    position: relative;
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 0 40px;
    box-sizing: border-box;
    max-width: 160px;
    transition: 500ms all;
    cursor: pointer;
}

.dateWrap:hover {
    border-color: var(--Black-Black-EEL);
}

.date__icon {
    position: absolute;
    top: 49%;
    left: 20px;
    transform: translateY(-50%);
    z-index: 1;
}

.date {
    width: 100%;
    border: none;
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/13 */
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
}

.date:focus {
    outline: none;
}

.redBtn__wrap {
    max-width: 160px;
    width: 100%;
}

.redBtn {
    height: 47px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--White, #FFF);
    /* Semibold/14 CAPS */
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 16.8px */
    text-transform: uppercase;
    background: var(--Red-Berry, #900);
    cursor: pointer;
    transition: 500ms all;
    border: 1.5px solid var(--Red-Berry, #900);
}

.redBtn:focus {
    outline: none;
}

.redBtn:hover {
    background-color: var(--White);
    color: var(--Black-Thundra-Grey);
}

.date__arrow {
    position: absolute;
    top: 49%;
    right: 20px;
    transform: translateY(-50%);
    z-index: 1;
}

.datepicker {
    position: absolute !important;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.datepicker__header {
    background: var(--Black-Black-EEL, #2B2B2B);
}

.datepicker__wrapper {
    border-color: var(--Black-Black-EEL, #2B2B2B);
}

.datepicker__prev:hover,
.datepicker__next:hover {
    background-color: var(--Black-Thundra-Grey);
}

.datepicker table th {
    color: var(--Black-Thundra-Grey);
}

.datepicker__day.is-disabled,
.datepicker__day.is-otherMonth {
    color: var(--Black-Alto-Grey);
}

.datepicker__day.is-today {
    color: var(--Red-Berry);
}

.datepicker__day.is-selected div {
    background: var(--Red-Berry);
}

.datepicker__day div:hover,
.datepicker__day.is-highlighted div {
    background: var(--Black-Alto-Grey);
}

.orderHistoryPage__content {
    margin-top: 30px;
}

.h__scroll {}

.order__table {
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.orderTable__row {
    display: flex;
    border-bottom: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.orderTable__row:last-of-type {
    border-bottom: none;
}

.orderTable__row-header {}

.orderTable__elem {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 15px;
    color: var(--Black-Black-EEL, #2B2B2B);
    background: var(--Black-Inputs, #F6F6F6);
    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    height: 64px;
    box-sizing: border-box;
    position: relative;
}

.orderTable__row-header .orderTable__elem {
    background: var(--Black-Black-EEL, #2B2B2B);
    height: 48px;
}

.orderTable__elem:not(:last-of-type) {
    border-right: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}


.orderTable__row-header .orderTable__elem {
    border-color: var(--Black-Thundra-Grey, #474747);
}

.orderTable__row-header .orderTable__elem {
    color: var(--White, #FFF);
    font-weight: 600;
}

.orderTable__elem-1 {}

.orderTable__elem-2 {
    flex: 2;
}

.orderTable__elem-3 {
    flex: 4;
}

.orderTable__elem-4 {
    flex: 3;
}

.orderTable__elem-5 {
    flex: 1.5;
}

.orderTable__btnWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 10px;
}

.orderTable__btn {
    cursor: pointer;
    transition: 500ms all;
    background: none;
    border: none;
    padding: 0;
    position: relative;
}

.orderTable__btn:focus {
    outline: none;
}

.orderTable__btn-icon {
    transition: 500ms all;
}

.orderTable__btn path {
    transition: 500ms all;
}

.orderTable__checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
}

.orderTable__checkbox .checkbox__checkmark {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.orderTable__btn-hover-icon {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 500ms all;
}

.orderTable__btn:hover .orderTable__btn-hover-icon {
    opacity: 1;
}

.orderTable__btn {
    width: 24px;
    height: 24px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}


.orderTable__btn:hover .orderTable__btn-icon {
    opacity: 0;
}

.orderTable__row:not(.orderTable__row-header):nth-of-type(2n) .orderTable__elem {
    background: var(--White);
}

.orderTable__select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.orderTable__select .custom-select__option {
    height: 64px;
}

.select-cancled {}

.select-processing {}

.orderTable__select .custom-select__option--value {
    background: transparent;
    color: var(--Black-Black-EEL, #2B2B2B);

}

.orderTable__select .custom-select__option--value::after {
    background: url(../img/arrow-black-icon.svg);
}

.select-completed .custom-select__option--value {
    background: #EEFFF5;
    color: #07C155;
}

.select-completed .custom-select__option--value::after {
    background: url(../img/arrow-green-icon.svg);
}

.select-processing .custom-select__option--value {
    background: #FFF9EA;
    color: #D19003;
}

.select-processing .custom-select__option--value::after {
    background: url(../img/arrow-orange-icon.svg);
}

.select-canceled .custom-select__option--value {
    background: var(--Black-Inputs, #F6F6F6);
    color: var(--Black-Dusty-Gray, #959595);
}

.select-canceled .custom-select__option--value::after {
    background: url(../img/arrow-gray-icon.svg);
}

.deliveyLocation {
    position: relative;
}

.deliveyLocation__header {
    cursor: pointer;
}

.deliveyLocation__content {
    position: absolute;
    width: 322px;
    right: -60px;
    top: calc(100% + 10px);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: 0.3s all;
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--Black-White-Smoke, #EDEDED);
    background: var(--White, #FFF);
    box-shadow: 0px 12px 30px 0px rgba(0, 0, 0, 0.12);
    padding: 24px;
    box-sizing: border-box;
}

.deliveyLocation.active .deliveyLocation__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.deliveyLocationValue__arrow {
    transition: 0.3s transform;
}

.deliveyLocation.active .deliveyLocationValue__arrow {
    transform: rotate(180deg);
}

.button2 {}

.deliveyLocation__btn {
    width: 100%;
}

.deliveyLocation__address {
    margin-top: 24px;
}

.deliveyLocationAddress__row {
    padding: 4px 0;
    border-top: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    position: relative;
}

.deliveyLocationAddress__btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
}

.deliveyLocationAddress__btn-icon {
    max-width: 16px;
}

.deliveyLocationAddress__row .radio__container {
    padding-right: 25px;
}

.deliveyLocationAddress__row .radio__checkmark {
    top: 50%;
    transform: translateY(-50%);
}

.deliveyLocationAddress__row .radio__container:hover input~.radio__checkmark {
    border-color: var(--Black-Black-EEL, #2B2B2B);
}

.deliveyLocationAddress__row .radio__container .radio__checkmark:after {
    background: var(--Black-Black-EEL, #2B2B2B);
}

.deliveyLocationAddress__row .radio__container input:checked~.radio__checkmark {
    border-color: var(--Black-Black-EEL, #2B2B2B);
}

.detailPage {
    margin: 40px 0 120px;
    display: flex;
    gap: 166px;
}

.detail__sidebar {
    max-width: 376px;
    width: 100%;
}

.detailSidebar__content {
    padding: 40px 30px;
    box-sizing: border-box;
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    position: sticky;
    top: 90px;
    left: 0;
}

.detailSidebar__labelWrap {}

.detailSidebar__label {
    color: var(--Black-Thundra-Grey, #474747);
    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 21px */
}

.detailSidebar__menu {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
}

.detailSidebarMenu__link {
    padding: 10px 10px 10px 22px;
    position: relative;
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Medium/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    transition: 500ms all;
    position: relative;
}

.detailSidebarMenu__link:after {
    content: "";
    clear: both;
    position: absolute;
    top: 13px;
    left: 0;
    background: url(../img/arrow-point.svg);
    background-repeat: no-repeat;
    opacity: 0;
    transition: 500ms all;
    width: 12px;
    aspect-ratio: 1;
}

.detailSidebarMenu__link.active {
    color: var(--Red-Berry, #900);
}

.detailSidebarMenu__link.active:after {
    opacity: 1;
}

.detailSidebarMenu__link:hover {
    color: var(--Red-Berry, #900);
}


.detailSidebarMenu__link:hover:after {
    opacity: 1;
}

.detailSidebar__btnWrap {
    margin-top: 30px;
}

.button {}

.detailSidebar__btn {
    background: var(--Red-Berry, #900);
    border-color: var(--Red-Berry, #900);
    color: var(--White);
}

.detailSidebar__btn:hover {
    color: var(--Black-Black-EEL) !important;
    background: transparent !important;
}

.detail__content {
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.mt-20 {
    margin-top: 20px;
}

.mt-10 {
    margin-top: 10px;
}

.borderRed {
    border: 1.5px solid var(--Red-Berry, #900);
    padding: 30px;
}

.grayBlock {
    background: var(--Black-White-Smoke, #EDEDED);
    padding: 30px;
}

.imgsBlock {
    display: flex;
    gap: 12px;
}

.imgsBlock__elem {
    flex: 1;
}

.imgsBlock__img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.black-border {
    border: 1.5px solid var(--Black-Black-EEL, #2B2B2B);
}

.videoBlock {}

.video-js {
    width: 100%;
    aspect-ratio: 2 / 1;
    height: initial;
}

.swiper-pagination-bullet {
    width: 12px !important;
    height: 12px !important;
    background: rgba(255, 255, 255, 0.5) !important;
}

.swiper-pagination-bullet-active {
    background: #fff !important;
}

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 30px !important;
}

.orderHistory__topLine {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.orderHistory__user {
    display: flex;
    align-items: center;
    max-width: 600px;
    width: 100%;
    justify-content: space-between;
    padding: 0 20px;
    border: 1px solid var(--Black-White-Smoke, #EDEDED);
    padding: 20px;
}

.orderHistoryUser__left {}

.orderHistoryUser__info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.orderHistoryUserInfo__imgWrap {
    display: flex;
}

.orderHistoryUserInfo__img {}

.orderHistoryUserInfo__main {}

.orderHistoryUserInfo__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/17 */
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 20.4px */
}

.orderHistoryUserInfo__position {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.orderHistoryUser__right {}

.orderHistoryUser__text {}

.orderSearch-gray .orderSearch__input {
    background: var(--Black-Inputs, #F6F6F6);
}

.orderHistoryTopLine__right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.sortBy__wrap {
    width: 180px;
}

.sortBy__wrap .custom-select:not(.custom-select--active) .custom-select__option--value {
    border: 1.5px solid var(--Black-White-Smoke, #EDEDED);
    background: var(--White);
}

.orderHistoryPage1 {
    margin-top: 40px;
}

.orders {
    margin-top: 30px;
}

.order__row {
    border: 1px solid var(--Black-White-Smoke, #EDEDED);
    background: var(--White, #FFF);
}

.orderRow__header {
    display: flex;
    justify-content: space-between;
    padding: 0 150px 0 30px;
    position: relative;
}

.orderRow__header:after {
    content: "";
    clear: both;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    background: url(../img/arrow-icon.svg);
    background-repeat: no-repeat;
    transition: 500ms all;
    width: 16px;
    aspect-ratio: 1;
}

.orderRowHeader__elem {
    height: 84px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.orderRowHeader__elem-left {}

.orderRowHeader__label {
    color: var(--Black-Dusty-Gray, #959595);
    text-align: right;

    /* Regular/12 */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
}

.orderRowHeader__value {
    color: var(--Black-Black-EEL, #2B2B2B);
    text-align: right;

    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.processing {}

.orderRowHeader__elem-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.orderRowHeader__elem1 .orderRowHeader__label {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
}

.orderRowHeader__elem1 .orderRowHeader__value {}

.orderRowHeader__elem-left .orderRowHeader__label {
    text-align: left;
}

.orderRowHeader__elem-left .orderRowHeader__value {
    text-align: left;
}

.orderRowHeader__elem-left .orderRowHeader__value span {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.processing {
    color: #D19003;
}

.orderRow__content {
    border-top: 1px solid var(--Black-White-Smoke, #EDEDED);
    display: flex;
    padding: 0 30px;
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: 100ms all;
}

.orderRowContent__left {
    flex: 1;
    padding: 10px 0 30px;
}

.orderRowContent__products {}

.orderRowContent__product {
    display: flex;
    justify-content: space-between;
    padding-right: 40px;
    padding: 20px 40px 20px 0;
    border-bottom: 1px solid var(--Black-White-Smoke, #EDEDED);
}

.order__row.active .orderRow__content {
    opacity: 1;
    visibility: visible;
    height: initial;
}

.order__row.active .orderRow__header:after {
    transform: rotate(180deg) translateY(50%);
}

.orderRowContentProduct__left {
    flex: 1;
    display: flex;
}

.orderRowContentProduct__link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}

.orderRowContentProduct__imgWrap {}

.orderRowContentProduct__img {}

.orderRowContentProduct__info {}

.orderRowContentProduct__title {
    color: var(--Black-Thundra-Grey, #474747);

    /* Semibold/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.orderRowContentProduct__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    text-decoration-line: underline;
}

.orderRowContentProduct__params {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 15px;
}

.orderRowContentProduct__param {}

.orderRowContentProduct__text2 {
    color: var(--Black-Dusty-Gray, #959595);
}

.orderRowContentProduct__right {}

.orderRowContentProduct__status {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.orderRowContentProductStatus__elem {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Medium/14 */
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.orderRowContent__right {
    max-width: 360px;
    width: 100%;
    border-left: 1px solid var(--Black-White-Smoke, #EDEDED);
    padding: 40px 0 40px 40px;
    box-sizing: border-box;
    position: relative;
}

.orderRowContentProductParam__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.orderRowContentProductParam__text2 {
    color: var(--Black-Dusty-Gray, #959595);
}

.orderRowContentProductInfo__link {}

.showMoreBtn__wrap {
    margin-top: 20px;
}

.showMoreBtn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: 500ms all;
    color: var(--Black-Thundra-Grey, #474747);

    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
    display: flex;
    align-items: center;
}

.showMoreBtn__icon {
    margin-right: 8px;
    font-size: 23px;
    font-weight: 300;
    line-height: 100%;
    color: var(--Black-Thundra-Grey, #474747);
}

.order__priceBlock {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 20px 0;
}

.orderPriceBlock__row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.orderPriceBlock__label {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.orderPriceBlock__value {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Medium/18 */
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 25.2px */
}

.orderSingle__btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 40px;
}

.orderSingle__btn {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--Black-White-Smoke, #EDEDED);
    background: transparent;
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Medium/14 caps */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    /* 16.8px */
    text-transform: uppercase;
    gap: 5px;
    cursor: pointer;
    transition: 500ms all;
}

.orderSingle__btn:focus {
    outline: none;
}

.orderSingle__btn:hover {
    background: var(--Black-White-Smoke, #EDEDED);
}

.orderSingle__btn-icon {}

.comment__block {
    margin-top: 40px;
}

.comment__title {
    color: var(--Black-Dusty-Gray, #959595);

    /* Regular/12 */
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 16.8px */
}

.comment__text {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/Long text tablet */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 20.8px */
    margin-top: 5px;
}

.orderRowContent__wrap {
    position: sticky;
    top: 100px;
    left: 0;
}

.productDetail {
    display: flex;
    gap: 80px;
}

.productDetail__main {
    margin-bottom: 80px;
}

.container2 {}

.productDetail__content {}

.productDetail__left {
    max-width: 596px;
    width: 100%;
}

.productDetail__right {
    flex: 1;
    display: flex;
    gap: 120px;
}

.productDetail__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.productDetailTop__categories {
    display: flex;
    align-items: center;
    gap: 18px;
}

.productDetailTop__category {
    color: var(--Black-Thundra-Grey, #474747);
    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    position: relative;
}

.productDetailTop__category:not(:last-of-type):after {
    content: "";
    clear: both;
    position: absolute;
    top: 0;
    right: -9px;
    width: 1px;
    height: 100%;
    border-radius: 10px;
    background: var(--Black-Alto-Grey, #D8D8D8);
}

.productDetailTop__article {}

.productDetailTopArticle__text {
    color: var(--Black-Dusty-Gray, #959595);

    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.productDetail__titleWrap {
    margin-top: 16px;
}

.productDetail__priceWrap {
    display: flex;
    margin-top: 16px;
    gap: 8px;
}

.productDetail__price {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 28px */
}

.productDetail__price-old {
    text-decoration-line: line-through;
}

.productDetail__price-new {
    color: var(--Red-Berry, #900);
}

.productDetail__colorBlock {
    padding: 25px 0;
    border-top: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    margin-top: 25px;
}

.colorBlock__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.colorBlockTop__left {}

.colorBlockTop__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.colorBlockTop__title b {
    text-transform: uppercase;
    font-weight: 600;
}

.colorBlockTop__right {}

.colorBlockTop__info {
    color: var(--Black-Dusty-Gray, #959595);

    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.colorBlock__content {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.colorBlock__link {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    transition: 500ms all;
    cursor: pointer;
    position: relative;
}

.colorBlock__link:after {
    content: "";
    clear: both;
    position: absolute;
    top: -7px;
    left: -7px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border: 1px solid var(--Black-Black-EEL, #2B2B2B);
    border-radius: 50%;
    transition: 500ms all;
    opacity: 0;
}

.colorBlock__link.active:after {
    opacity: 1;
}

.colorBlock__link:hover:after {
    opacity: 1;
}

.colorBlock__btnWrap {
    margin-top: 25px;
}

.showMoreBtn {}

.showMoreBtn__icon {}

.productDetail__main {}

.productDetail__sizeBlock {
    padding: 25px 0;
    border-top: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.sizeBlock__top {
    display: flex;
    justify-content: space-between;
}

.sizeBlockTop__left {}

.sizeBlockTop__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.sizeBlockTop__title b {
    text-transform: uppercase;
    font-weight: 600;
}

.sizeBlockTop__right {}

.sizeBlockTop__info {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
    display: flex;
    align-items: center;
    gap: 6px;
}

.sizeBlockTop__info-icon {}

.sizeBlock__content {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.sizeBlock__link {
    width: 52px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    border-right: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    transition: 500ms all;
    cursor: pointer;
}

.sizeBlock__link:last-of-type {
    border-right: none;
}

.sizeBlock__link:focus {
    outline: none;
}

.sizeBlock__link:hover {
    color: var(--Red-Berry);
}

.sizeBlock__link.active {
    color: var(--Red-Berry);
}

.product__description {
    padding: 25px 0;
    border-top: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.productDescription__titleWrap {}

.productDescription__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.productDescription__textWrap {
    margin-top: 20px;
}

.productDescription__text {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/Long Text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 22.4px */
}

.productDescription__btnWrap {
    margin-top: 20px;
    max-width: 250px;
    width: 100%;
}

.productDescription__btn {
    width: 100%;
    border-color: var(--Black-Alto-Grey, #D8D8D8);
}

.product__2cols {
    padding: 25px 0;
    border-top: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    display: flex;
    gap: 40px;
}

.product__col {
    flex: 1;
}

.productCol__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.productCol__textWrap {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.productCol__text {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/Long Text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 22.4px */
}

.product__delivery {
    padding: 25px 0;
    border-top: 1px solid var(--Black-Alto-Grey, #D8D8D8);
}

.productDelivery__titleWrap {}

.productDelivery__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.productDelivery__content {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.productDelivery__row {
    display: flex;
    gap: 15px;
}

.productDelivery__iconWrap {}

.productDelivery__icon {}

.productDelivery__main {}

.productDeliveryMain__titleWrap {}

.productDeliveryMain__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
}

.productDeliveryMain__textWrap {
    margin-top: 5px;
}

.productDeliveryMain__text {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/Long Text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 22.4px */
}

.peoductPrint__btnWrap {
    max-width: 154px;
    width: 100%;
    margin-top: 20px;
}

.productDetail__slider {
    display: flex;
    gap: 20px;
    position: sticky;
    top: 80px;
    left: 0;
}

.thumbnail__wrap {
    max-width: 64px;
    width: 100%;
}

.productSlider {
    flex: 1;
}

.thumbnail-slider .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.thumbnail-slider .swiper-slide {
    transition: 500ms all;
    padding: 4px;
    box-sizing: border-box;
    border: 1.5px solid transparent;
}

.thumbnail-slider .swiper-slide-thumb-active {
    border-color: var(--Black-Black-EEL, #2B2B2B);
}

.product-slider__btnsWrap {
    position: absolute;
    bottom: 24px;
    right: 20px;
    display: flex;
    gap: 12px;
}

.product-sliderBtn {}

.product-slider-next {}

.product-slider-prev {}

.makeOrder {
    margin-top: 40px;
    margin-bottom: 30px;
}

.makeOrder__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.makeOrderHeader__titleWrap {}

.makeOrderHeader__right {
    display: flex;
    align-items: flex-start;
    /* Align items to the top */
    gap: 20px;
    /* Space between filters */
    /* Remove width if filters should take content width */
}

.customSelect {
    max-width: 200px;
    width: 100%;
}

.customSelect__header {
    height: 46px;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
}

.customSelectHeader__label {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.customSelectHeader__icon {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.makeOrder__table {
    margin-top: 10px;
}

.makeOrderTable__row {
    display: flex;
    transition: 500ms all;
}

.makeOrderTable__row:hover {
    background: var(--Black-White-Smoke, #EDEDED);
}

.makeOrderTable__row-header {}

.makeOrderTable__row:not(.makeOrderTable__row-header) {
    border-bottom: 1px solid var(--Black-White-Smoke, #EDEDED);
    display: flex;
    align-items: center;
    justify-content: center;
}

.makeOrderTable__elem {
    flex: 1;
}

.makeOrderTable__row:not(.makeOrderTable__row-header) .makeOrderTable__elem {}

.makeOrderTable__row-header .makeOrderTable__elem {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Black-Black-EEL, #2B2B2B);
    color: var(--White, #FFF);
    /* Semibold/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    box-sizing: border-box;
    border-right: 1px solid var(--Black-Thundra-Grey, #474747);
    box-sizing: border-box;
}

.makeOrderTable__row-header .makeOrderTable__elem2 {
    justify-content: flex-start;
    padding: 0 16px;
}

.makeOrderTable__elem2 {
    flex: 3;
    justify-content: flex-start;
    padding: 10px 16px;
}

.makeOrderTable__elem:last-of-type {
    border-right: none;
}

.makeOrderTable__product {
    display: flex;
    align-items: center;
    gap: 15px;
    box-sizing: border-box;
}

.makeOrderTableProduct__imgWrap {}

.makeOrderTableProduct__img {}

.makeOrderTableProduct__content {}

.makeOrderTableProduct__article {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.makeOrderTableProduct__titleWrap {}

.makeOrderTableProduct__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.makeOrderTableProduct__textWrap {
    margin-top: 5px;
}

.makeOrderTableProduct__text {
    color: var(--Black-Dusty-Gray, #959595);

    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.makeOrderTable__inputWrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.makeOrderTable__input {
    width: 60px;
    box-sizing: border-box;
    height: 56px;
    text-align: center;
    border: 1px solid var(--Black-White-Smoke, #EDEDED);
    background: var(--White, #FFF);
    color: var(--Black-Black-EEL, #2B2B2B);
    text-align: center;

    /* Medium/16 */
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 22.4px */
}

.makeOrderTable__input-text {
    color: var(--Black-Dusty-Gray, #959595);
    text-align: center;

    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.makeOrder__btnsWrap {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin: 50px 0 20px;
}

.makeOrder__btn {
    max-width: 252px;
    width: 100%;
}

.makeOrder__btn2 {
    max-width: 252px;
    width: 100%;
    height: 47px;
}

.recommendProducts {}

.recommendProducts__header {}

.recommendProductsHeader__title {

    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/15 */

    font-size: 15px;

    font-style: normal;

    font-weight: 600;

    line-height: 120%;
    /* 18px */

}

.recommendProducts__contentScroll {
    margin-top: 10px;
    overflow-y: scroll;
}

.recommendProducts__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recommend__product {}

.recommendProduct__imgWrap {
    display: flex;
}

.recommendProduct__img {}

.recommendProduct__content {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.recommendProduct__category {
    color: var(--Black-Thundra-Grey, #474747);
    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
}

.recommendProduct__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Semibold/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;

}

.recommendProduct__price {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.productDetail__mainWrap {
    flex: 1;
}

.recommendProducts__contentScroll::-webkit-scrollbar {
    display: none;
}

.recommendProducts__contentScroll {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.cartInfo__textWrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.cartInfo__text {
    color: var(--Black-Thundra-Grey, #474747);
    /* Regular/13 */
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 18.2px */
}

.header2 {
    height: 64px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #D9D9D9;
    background: var(--White);
    position: sticky;
    top: 0;
    left: 0;
    z-index: 3;
}

.header2__content {
    display: flex;
    justify-content: space-between;
}

.header2__backBtnWrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header2__backBtn {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
}

.header2__backBtn-icon {
    transform: rotate(180deg);
}

.header2__logoWrap {}

.header2__logoLink {}

.header2LogoLink__img {}

.header2__helpBtnWrap {
    display: flex;
    align-items: center;
}

.header2HelpBtn {
    color: var(--Black-Thundra-Grey, #474747);

    /* Regular/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    /* 19.6px */
    display: flex;
    align-items: center;
    gap: 8px;
}

.header2HelpBtn-icon {}

.cart__left2 {
    border: 1px solid var(--Black-White-Smoke, #EDEDED);
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cartLeft__titleWrap {}

.cartLeft__title {
    color: var(--Black-Black-EEL, #2B2B2B);
    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.cart__left2 .cart__product:last-of-type {
    border-bottom: none;
}

.checkout__contact {
    border: 1px solid var(--Black-White-Smoke, #EDEDED);
    padding: 40px;
    margin-top: 30px;
}

.checkoutContact__form {}

.checkoutContactForm__titleWrap {}

.checkoutContactForm__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/15 CAPS */
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
    /* 18px */
    text-transform: uppercase;
}

.checkoutContactForm__choose {
    display: flex;
    align-items: center;
    margin-top: 30px;
    gap: 30px;
}

.checkoutContactForm__content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    height: 0;
    transition: 100ms all;
}

.checkoutContactForm__content.active {
    visibility: visible;
    opacity: 1;
    height: initial;
}

.checkoutContactForm__content.active {}

.checkoutContactForm__row {
    display: flex;
    gap: 10px;
}

.checkoutContactForm__elem {
    flex: 1;
}

.deliveryBlock {
    margin-top: 30px;
}

.deliveryBlock__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.deliveryBlock__row {
    padding: 20px 0;
    border-bottom: 1px solid var(--Black-Alto-Grey, #D8D8D8);
    transition: 500ms all;
}

.deliveryBlock__row:last-of-type {
    border-bottom: none;
}

.deliveryBlock__header {
    display: flex;
    cursor: pointer;
}

.deliveryBlock__left {
    flex: 1;
    display: flex;
    gap: 15px;
}

.deliveryBlock__radioWrap {}

.deliveryBlock__radio {
    width: 16px;
    height: 16px;
    border: 1px solid var(--Black-Dusty-Gray, #959595);
    border-radius: 50%;
    position: relative;
}

.deliveryBlock__radio::after {
    content: "";
    clear: both;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--Red-Berry);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 500ms all;
}

.deliveryBlock__iconWrap {}

.deliveryBlock__icon {}

.deliveryBlock__title {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Semibold/15 */
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 18px */
}

.deliveryBlock__text {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Regular/Long Text */
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    /* 22.4px */
}

.deliveryBlock__right {}

.deliveryBlock__price {
    color: var(--Black-Black-EEL, #2B2B2B);

    /* Medium/14 */
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 19.6px */
}

.deliveryBlock__row.active .deliveryBlock__radio {
    border-color: var(--Red-Berry);
}

.deliveryBlock__row:hover .deliveryBlock__radio {
    border-color: var(--Red-Berry);
}

.deliveryBlock__row.active .deliveryBlock__radio:after {
    opacity: 1;
}

.deliveryBlock__row:hover .deliveryBlock__radio:after {
    opacity: 1;
}

.adaptiveMenu__btn {
    cursor: pointer;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.adaptiveMenu__btn:focus {
    outline: none;
}

.adaptiveMenu__btnWrap {
    display: none;
}

.search__btn2 {
    display: none;
}

.orderHistoryPageHeader__categoriesMobile {
    display: none;
}

.mobileBlock {
    display: none;
}

@media(max-width: 1500px) {
    .footerManagers__content {
        gap: 20px;
    }

    .footer__contacts {
        min-width: 214px;
    }

    .nav {
        gap: 30px;
    }

    .login__wrap {
        gap: 30px;
    }

    .loginPage__right {
        max-width: 560px;
    }

    .registrationBlock {
        margin-left: 90px;
    }

    .orderHistoryPageHeader__bottom {
        gap: 20px;
    }

    .orderHistoryPageHeader__category {
        padding: 0 14px;
        font-size: 12px;
    }

    .detailPage {
        gap: 50px;
    }

    .orderHistory__user {
        max-width: 460px;
    }

    .recommendProducts {
        display: none;
    }

    .productDetail {
        gap: 20px;
    }
}

@media(max-width: 1200px) {
    .footer__top {
        gap: 60px;
        flex-direction: column;
    }

    .footer__content {
        position: relative;
    }

    .footerManagers__col {
        flex: 1;
    }

    .footer__socials {
        position: absolute;
        right: 40px;
        z-index: 1;
    }

    .search__input {
        width: 230px;
    }

    .navLink__title {
        font-size: 14px;
    }

    .nav {
        gap: 20px;
    }

    .logo__img {
        max-width: 100px;
    }

    .navSub__imgWrap {
        align-items: flex-start;
    }

    .navSub__img {
        max-width: 260px;
    }

    .subscribe {
        gap: 30px;
    }

    .subscribe__right {
        max-width: 480px;
    }

    .categoriesBlock__content .category__link {
        font-size: 16px;
    }

    .products {
        grid-template-columns: repeat(4, 1fr);
    }

    .cart {
        flex-direction: column;
    }

    .cart__right {
        max-width: initial;
    }

    .cart__product:last-of-type {
        border-bottom: none;
    }

    .cart__info {
        padding: 30px;
    }

    .numbers__content {
        grid-template-columns: 1fr 1fr;
    }

    .contacts {
        flex-direction: column;
    }

    .contacts__left {
        flex: initial;
        height: 653px;
    }

    .staff__content {
        grid-template-columns: repeat(3, 1fr);
    }

    .login__wrap {
        flex-direction: column;
        gap: 60px;
        height: initial;
        margin: 60px 0 0;
    }

    .loginPage__right:after {
        left: -40px;
    }

    .registrationBlock {
        margin-left: 0;
    }

    .loginPage__right {
        max-width: initial;
        padding: 60px 0;
    }

    .registrationBlock {
        max-width: 648px;
        width: 100%;
        margin: 0 auto;
    }

    .orderHistoryPageHeader__bottom {
        flex-direction: column;
    }

    .orderHistoryPageHeader__categories {
        width: 100%;
    }

    .orderHistoryPageHeaderBottom__right {
        width: 100%;
    }

    .orderHistoryPage__content {
        width: calc(100% + 40px);
    }

    .h__scroll {
        overflow-x: scroll;
    }

    .order__table {
        width: 1600px;
        margin-right: 40px;
    }

    .h__scroll::-webkit-scrollbar {
        display: none;
    }

    .h__scroll {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .detailPage {
        flex-direction: column;
        gap: 60px;
    }

    .detail__sidebar {
        max-width: initial;
    }

    .detailSidebar__content {
        padding: 0;
        border: none;
    }

    .detailSidebar__menu {
        flex-direction: row;
        overflow-x: auto;
        white-space: nowrap;
        scroll-snap-type: y mandatory;
        width: calc(100% + 40px);
        border-bottom: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    }

    .detailSidebarMenu__link {
        padding: 15px 20px;
        flex-shrink: 0;
    }

    .detailSidebarMenu__link:after {
        content: none;
    }

    .detailSidebar__menu::-webkit-scrollbar {
        display: none;
    }

    .detailSidebar__menu {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .detailSidebarMenu__link.active:before,
    .detailSidebarMenu__link:hover:before {
        content: "";
        clear: both;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1.5px;
        background: var(--Red-Berry);
    }

    .detailSidebar__btnWrap {
        display: none;
    }

    .orderHistory__user {
        max-width: 390px;
    }

    .productDetail__left {
        max-width: 456px;
    }

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

    .productCarusel__main {
        width: calc(100% + 40px);
    }

    .categoriesBlock__content {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for medium screens */
    }
}

@media(max-width: 1024px) {
    .headerTop__right {
        display: none;
    }

    .headerTop__content {
        justify-content: center;
    }

    .header__main .nav {
        display: none;
    }

    .adaptiveMenu__btnWrap {
        display: flex;
    }

    .search__wrap form {
        display: none;
    }

    .search__btn2 {
        background: none;
        border: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .search__btn2:focus {
        outline: none;
    }

    .container {
        width: calc(100% - 60px);
    }

    .productCarusel__main {
        width: calc(100% + 30px);
    }

    .categoriesBlock__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: initial;
        grid-gap: 16px;
    }

    .categoriesBlock__content .category__link {
        font-size: 20px;
    }

    .productCarusel {
        margin-bottom: 80px;
    }

    .brandsSection .container {
        width: calc(100%);
    }

    .brands {
        overflow-x: scroll;
        scroll-snap-type: y mandatory;
    }

    .brand {
        min-width: 110px;
        margin: 0 10px;
    }

    .brands::-webkit-scrollbar {
        display: none;
    }

    .brands {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .w-360 {
        width: 320px !important;
    }

    .w-240 {
        width: 210px !important;
    }

    .w-240 .product {
        width: 210px;
    }

    .text {
        font-size: 13px;
    }

    .subscribe {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .subscribe__right {
        max-width: initial;
    }

    .mm-menu {
        top: 65px !important;
        height: calc(100% - 65px) !important;
    }

    .products {
        grid-template-columns: repeat(3, 1fr);
    }

    .cartProduct__quantity {
        margin-right: 60px;
    }

    .cartProduct__params {
        flex-wrap: wrap;
        gap: 10px 30px;
    }

    .catalogs {
        grid-template-columns: 1fr;
    }

    .registrationBlock {
        max-width: 526px;
    }

    .registrationCol__row {
        flex-direction: column;
    }

    .registration {
        max-width: 526px;
        margin: 60px 0;
    }

    .errorPage__bg {
        font-size: 350px;
    }

    .orderHistoryPage__content {
        width: calc(100% + 30px);
    }

    .order__table {
        margin-right: 30px;
    }

    .profileMenu__menu {
        display: none;
    }

    .profileMenu__logoutWrap {
        display: none;
    }

    .deliveyLocation {
        margin-bottom: 10px;
    }

    .orderHistoryPageHeader__top {
        flex-direction: column;
        gap: 20px;
    }

    .page__titleWrap {
        width: 100%;
    }

    .orderSearch {
        max-width: initial;
    }

    .orderSearch__input {
        background: var(--Black-Inputs, #F6F6F6);
    }

    .orderHistoryPageHeader__categoriesMobile {
        display: block;
        flex: 1;
    }

    .orderHistoryPageHeader__categories {
        display: none;
    }

    .orderHistoryPageHeader__bottom {
        flex-direction: row;
    }

    .dateWrap {
        flex: 1;
        max-width: initial;
        padding: initial;
    }

    .redBtn__wrap {
        max-width: initial;
        flex: 1;
    }

    .orderHistoryPageHeader__categoriesMobile .custom-select__option--value {
        border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
        background-color: var(--White);
        height: 47px;
    }

    .orderHistoryPageHeader__categoriesMobile .custom-select--active .custom-select__option--value:hover,
    .orderHistoryPageHeader__categoriesMobile .custom-select--active .custom-select__option--value:focus {
        border: 1px solid var(--Black-Dusty-Gray, #959595);
    }

    .date {
        text-align: left;
        padding-left: 50px;
        box-sizing: border-box;
    }

    .orderHistoryPage {
        margin-bottom: 80px;
    }

    .profileMenu {
        margin-bottom: 40px;
    }

    .detailSidebar__menu {
        width: calc(100% + 30px);
    }

    .orderHistoryPageHeader__top2 {
        flex-direction: row;
    }

    .orderHistoryPageHeader__top2 .redBtn__wrap {
        max-width: 160px;
        width: 100%;
    }

    .orderHistory__topLine {
        flex-direction: column;
        width: 100%;
        align-items: initial;
        gap: 20px;
    }

    .orderHistory__user {
        max-width: initial;
        box-sizing: border-box;
    }

    .orderHistoryTopLine__right .sortBy__wrap {
        width: initial;
        flex: 1;
    }

    .orderHistoryTopLine__right .orderSearch {
        flex: 1;
    }

    .orderRow__header {
        padding: 0 80px 0 30px;
    }

    .orderRow__content {
        flex-direction: column;
    }

    .orderRowContent__product {
        padding-right: 0;
    }

    .orderRowContent__left {
        position: relative;
    }

    .orderRowContent__left:after {
        content: "";
        clear: both;
        position: absolute;
        bottom: 0;
        left: -30px;
        width: calc(100% + 60px);
        height: 1px;
        background: var(--Black-White-Smoke, #EDEDED);
    }

    .orderRowContent__right {
        border-left: none;
        max-width: initial;
        padding: 30px 0;
    }

    .orderRowContent__wrap {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "totalComment"
            "totalPrice"
            "totalBtns";

    }

    .order__priceBlock {
        grid-area: totalPrice;
        margin: 50px 0 20px;
    }

    .orderSingle__btns {
        grid-area: totalBtns;
        margin-top: 20px;
    }

    .comment__block {
        grid-area: totalComment;
        margin-top: 0;
    }

    .mobileBlock {
        display: block;
    }

    .productDetail__left {
        max-width: 344px;
    }

    .mm-wrapper--opened .mm-wrapper__blocker {
        opacity: 0.5;
        background: var(--Black-Black-EEL, #2B2B2B);
    }

    .mobLanguage {}

    .mobLanguage__ul {}

    .mobLanguage__li {}

    .mobLanguage__icon {}

    .mobLanguage__sub {}

    .mobLanguageSub__li {}

    .mobLanguageSub__link {}

}

@media(max-width: 768px) {
    .footerManagers__content {
        flex-direction: column;
    }

    .footer__top {
        gap: 40px;
    }

    .footer__top {
        padding: 50px 0;
    }

    .footer__socials {
        right: initial;
        left: 0;
    }

    .footer__contacts {
        margin-top: 130px;
    }

    .products {
        grid-template-columns: repeat(2, 1fr);
    }

    .cartProduct__link {
        grid-area: imgBlock;
    }

    .cartProduct__info {
        grid-area: infoBlock;
    }

    .cartProduct__quantity {
        grid-area: quantityBlock;
        margin: 15px 0;
    }

    .cartProduct__sum {
        grid-area: priceBlock;
    }

    .cart__product {
        display: grid;
        grid-template-areas:
            "imgBlock infoBlock"
            ". quantityBlock"
            "priceBlock priceBlock";
    }

    .aboutPage__content {
        margin-top: 30px;
    }

    .contacts__left {
        height: 356px;
    }

    .staff__content {
        grid-template-columns: repeat(2, 1fr);
    }

    .mt-60 {
        margin-top: 40px;
    }

    .errorPage__bg {
        font-size: 260px;
    }

    .errorPage {
        margin: 100px 0;
    }

    .orderRowHeader__elem-fix {
        position: absolute;
        top: -10px;
        left: 20px;
    }

    .orderRowHeader__elem1 {
        flex-direction: row-reverse;
        gap: 10px;
    }

    .orderRow__header {
        padding: 30px 70px 20px 20px;
    }

    .orderRow__header:after {
        top: 35px;
    }

    .orderRowHeader__label {
        text-align: left;
    }

    .categoriesBlock__content {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for smaller screens */
    }
}

@media(max-width: 576px) {
    .productCaruselHeader__title {
        font-size: clamp(20px, calc(1.25rem + ((1vw - 3.8px) * 3.0612)), 26px);
    }

    .h2 {
        font-size: clamp(18px, calc(1.125rem + ((1vw - 3.8px) * 1.0204)), 20px);
    }

    .headerTop__text {
        font-size: 12px;
        text-align: center;
    }

    .container {
        width: calc(100% - 24px);
    }

    .productCarusel__main {
        width: calc(100% + 12px);
        margin-top: 20px;
    }

    .productCarusel {
        margin-bottom: 60px;
    }

    .w-240 {
        width: 166px !important;
    }

    .w-240 .product {
        width: 166px;
    }

    .productBottom__text {
        font-size: 12px;
    }

    .productBottom__link {
        font-size: 14px;
    }

    .productBottom__price {
        font-size: 12px;
    }

    .productTop__orange {
        font-size: 10px;
    }

    .productTopParam__color {
        width: 15px;
        height: 15px;
    }

    .productTopParam__size {
        font-size: 12px;
        width: 30px;
        height: 20px;
    }

    .categoriesBlock__content {
        display: flex;
        overflow-x: auto; /* Enable horizontal scrolling */
        scroll-snap-type: x mandatory; /* Optional: snap scrolling */
        gap: 16px;
        padding-bottom: 10px; /* Add padding for scrollbar visibility if needed */
        margin-left: -12px; /* Adjust to align with container padding */
        margin-right: -12px; /* Adjust to align with container padding */
        padding-left: 12px;
        padding-right: 12px;
    }

    .categoriesBlock__content .category {
        flex: 0 0 auto; /* Prevent shrinking/growing, allow natural width */
        width: 280px; /* Fixed width for scrolling items */
        scroll-snap-align: start; /* Optional: align items on snap */
    }

    /* Hide scrollbar visually */
    .categoriesBlock__content::-webkit-scrollbar {
        display: none;
    }
    .categoriesBlock__content {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }

    .mb-80 {
        margin-bottom: 60px;
    }

    .w-360 {
        width: 280px !important;
    }

    .h1 {
        font-size: clamp(20px, calc(1.25rem + ((1vw - 3.8px) * 3.0612)), 26px);
    }

    .mt-30 {
        margin-top: 20px;
    }

    .subscribe__form {
        flex-direction: column;
        gap: 8px;
    }

    .subscribeForm__input {
        height: 48px;
        box-sizing: border-box;
    }

    .subscribeForm__btn {
        max-width: initial;
    }

    .subscribe__form {
        height: initial;
    }

    .subscribeForm__btn {
        height: 56px;
    }

    .footer__bottom {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    .footerBottomMenu__link {
        position: relative;
    }

    .footerBottomMenu__link:not(:last-of-type):after {
        content: "";
        clear: both;
        position: absolute;
        top: 0;
        right: -10px;
        width: 1px;
        height: 100%;
        background: var(--Black-Mine-Shaft, #333);
        border-radius: 10px;
    }

    .footer__bottom {
        padding: 20px 0;
    }

    .cart__info {
        padding: 40px 20px;
    }

    .cart {
        margin-bottom: 60px;
    }

    .numbers__content {
        grid-template-columns: 1fr;
    }

    .numbers {
        margin: 30px 0;
    }

    .aboutPage {
        margin-bottom: 60px;
    }

    .contactPage {
        margin: 30px 0 60px;
    }

    .contactsBlock {
        padding: 30px;
    }

    .contacts {
        gap: 20px;
    }

    .contactsBlock__content {
        margin-top: 20px;
        flex-direction: column;
        gap: 20px;
    }

    .contacts__form {
        padding: 30px;
    }

    .contactsForm__text {
        font-size: 13px;
    }

    .contactsForm__content {
        margin-top: 20px;
    }

    .contactsForm__row {
        flex-direction: column;
    }

    .staff__content {
        grid-template-columns: 1fr;
    }

    .staff__elem {
        padding: 20px;
    }

    .staff__imgWrap {
        width: 100%;
        height: 190px;
        overflow: hidden;
    }

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

    .simplePage {
        margin: 30px auto 60px;
    }

    .onlineCatalog {
        margin: 30px 0 60px;
    }

    .login__form {
        padding: 30px;
    }

    .loginForm__text {
        font-size: 14px;
    }

    .loginForm__content {
        margin-top: 40px;
    }

    .loginPage .checkbox__container {
        font-size: 12px;
        padding: 9px 8px 8px 26px;
    }

    .loginForm__link {
        font-size: 12px;
    }

    .registrationBlock__title {
        font-size: clamp(20px, calc(1.25rem + ((1vw - 3.8px) * 3.0612)), 26px);
    }

    .registrationBlock__text {
        font-size: 14px;
    }

    .registration {
        padding: 30px;
    }

    .registration__content {
        margin-top: 30px;
        gap: 30px;
    }

    .mt-50 {
        margin-top: 30px;
    }

    .registration__btnWrap {
        margin-top: 30px;
    }

    .errorPage {
        flex-direction: column;
        gap: 50px;
        margin: 80px 0;
    }

    .errorPage__bg {
        position: initial;
        top: initial;
        left: initial;
        transform: initial;
        font-size: 160px;
    }

    .errorPage__text {
        font-size: 14px;
        line-height: 140%;
    }

    .profileMenu {
        margin-bottom: 30px;
    }

    .orderHistoryPage__header {
        gap: 20px;
    }

    .order__table {
        margin-right: 12px;
    }

    .orderHistoryPage__content {
        width: calc(100% + 12px);
    }

    .orderHistoryPageHeader__categoriesMobile {
        grid-area: categories;
    }

    .dateWrap {
        grid-area: date;
    }

    .redBtn__wrap {
        grid-area: redBtn;
    }

    .orderHistoryPageHeaderBottom__right:not(.orderHistoryPageHeaderBottom__right2) {
        display: grid;
        grid-template-areas:
            "categories date"
            "redBtn redBtn";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        flex: initial;
        justify-content: initial;
    }

    .orderHistoryPage__content {
        margin-top: 20px;
    }

    .orderHistoryPage {
        margin-bottom: 60px;
    }

    .detailSidebarMenu__link {
        font-size: 13px;
        padding: 12px 16px;
    }

    .detailPage {
        gap: 40px;
    }

    .detailSidebar__menu {
        width: calc(100% + 12px);
    }

    .imgsBlock {
        flex-direction: column;
    }

    .detailPage {
        margin-bottom: 60px;
    }

    .orderRowHeader__elem-hide {
        display: none;
    }

    .orderRow__header {
        padding: 30px 50px 20px 20px;
    }

    .orderRowContentProduct__link {
        grid-area: oh-img;
    }

    .orderRowContentProductInfo__link {
        grid-area: oh-title;
    }

    .orderRowContentProduct__params {
        grid-area: oh-params;
    }

    .orderRowContentProduct__left {
        display: grid;
        grid-template-columns: 80px 1fr;
        grid-template-areas:
            "oh-img oh-title"
            "oh-params oh-params";
        grid-row-gap: 15px;
    }

    .orderRowContent__product {
        flex-direction: column;
    }

    .orderRowContentProduct__status {
        flex-direction: row;
        justify-content: space-between;
        margin-top: 20px;
    }

    .orderRowContentProduct__info {
        display: contents;
    }

    .orderRow__content {
        padding: 0 20px;
    }

    .orderHistoryPageHeader__top2 {
        flex-direction: column;
    }

    .orderHistoryPageHeader__top2 .redBtn__wrap {
        max-width: initial;
    }

    .orderHistory__user {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .orderHistoryUser__right {
        display: flex;
        align-items: center;
        gap: 30px;
    }
}

.is-invalid {
    border-color: var(--Red-Red-Light, #FF0000) !important;
}

.invalid-feedback {
    font-size: 12px !important;
    color: var(--Red-Red-Light, #FF0000) !important;
}

.languageSub__link.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.languageSubLink__icon.grayscale {
    filter: grayscale(100%);
}

.static-text {
    max-width: 1056px;
    margin: 0 auto;
}

.static-text h1,
.formatted-text h1 {
    font-size: 26px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    text-transform: uppercase;
    color: var(--Black-Black-EEL);
}

.static-text h2,
.formatted-text h2 {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    text-transform: uppercase;
}

.static-text p,
.formatted-text p {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    color: var(--Black-Mine-Shaft, #333);
}

.static-text p b,
.formatted-text p b {
    font-weight: 700;
}

.static-text ul,
.formatted-text ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.static-text li,
.formatted-text li {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    position: relative;
    padding-left: 22px;
}

.static-text ol,
.formatted-text ol {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.static-text ol li,
.formatted-text ol li {
    list-style: decimal;
    margin-left: 15px;
}

.static-text ul li:after,
.formatted-text ul li:after {
    content: "";
    clear: both;
    position: absolute;
    top: 6px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--Black-Black-EEL, #2B2B2B);
}

.static-text a,
.formatted-text a {
    color: var(--Black-Black-EEL, #2B2B2B);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    text-decoration-line: underline;
}

.static-text strong,
.formatted-text strong {
    font-weight: 700;
}

.loginForm__inputWrap {
    position: relative;
}

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
}

.modal__content {
    background: var(--White);
    padding: 30px;
    border-radius: 4px;
    max-width: 500px;
    width: 100%;
    position: relative;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal__title {
    color: var(--Black-Black-EEL);
    font-size: 20px;
    font-weight: 600;
}

.modal__close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.modal__close img {
    width: 16px;
    height: 16px;
}

.error-message {
    color: var(--Red-Berry);
    font-size: 12px;
    margin-top: 4px;
    display: none;
}

.error-message.active {
    display: block;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9);
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(2px);
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    position: relative;
    width: 60px;
    height: 60px;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid transparent;
    border-top-color: var(--Red-Berry);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-ring::before,
.spinner-ring::after {
    content: '';
    position: absolute;
    border: 3px solid transparent;
    border-radius: 50%;
}

.spinner-ring::before {
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-top-color: var(--Black-Black-EEL);
    animation: spin 2s linear infinite;
}

.spinner-ring::after {
    top: 12px;
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-top-color: var(--Black-Thundra-Grey);
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

.filtersBlock.active .filters {
    z-index: 13;
}

.productCol__textWrap p {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.h-captcha.is-invalid {
    border: 1px solid #dc3545 !important;
    border-radius: 4px !important;
    padding: 2px !important;
}

.invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 14px;
    margin-top: 4px;
}

.invalid-feedback.active {
    display: block;
}

/* Form validation styles */
form .h-captcha.is-invalid {
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 2px;
}

form .is-invalid-iframe-container iframe {
    border: 1px solid #dc3545;
    border-radius: 4px;
    padding: 2px;
}

form .invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 14px;
    margin-top: 4px;
}

form .invalid-feedback.active {
    display: block;
}

.modal__success-message {
    text-align: center;
    padding: 20px 0;
}

.modal__success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.success-icon {
    width: 64px;
    height: 64px;
    animation: scaleIn 0.3s ease-out;
}

.success-title {
    color: var(--Black-Black-EEL);
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    animation: fadeInUp 0.3s ease-out 0.1s both;
}

.success-text {
    color: var(--Black-Thundra-Grey);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    max-width: 320px;
    margin: 0 auto;
    animation: fadeInUp 0.3s ease-out 0.2s both;
}

@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Make Order Table Styles */
.makeOrder {
    margin-top: 40px;
}

.makeOrder__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.customFilter--always-visible .customFilterDropdown {
    display: block;
    /* Ensure it's always block */
    visibility: visible;
    /* Override hidden visibility */
    opacity: 1;
    /* Override zero opacity */
    position: relative;
    /* Change from absolute if it was */
    border: 1px solid #eee;
    /* Example border */
    padding: 15px;
    background: #fff;
    max-height: 250px;
    /* Limit height */
    overflow-y: auto;
    /* Add scroll if needed */
    width: 200px;
    /* Example fixed width */
}

.customFilter__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: #222;
    margin-bottom: 15px;
    display: block;
}

#colorFilter .customFilterDropdown__list {
    max-height: calc(250px - 90px);
    /* Adjust based on padding/search bar */
    overflow-y: auto;
}

#sizeFilter .customFilterDropdown__list {
    max-height: calc(250px - 60px);
    /* Adjust based on padding */
    overflow-y: auto;
}

.customFilterDropdown__search {
    margin-bottom: 10px;
    /* Space below search */
}

.customFilterDropdown__list {
    /* Remove fixed height if set elsewhere, rely on max-height */
}

.makeOrder .select2-container {
    min-width: 200px;
    width: 200px !important;
}

.makeOrder .select2-container .select2-selection--single {
    height: 46px;
    display: flex;
    align-items: center;
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 0 20px;
    box-sizing: border-box;
    position: relative;
    border-radius: 0;
    background-color: transparent;
}

.makeOrder .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-left: 0;
}

.makeOrder .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px;
    right: 20px;
}

.makeOrder .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.makeOrder .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: url('../img/arrow-black-icon.svg') no-repeat center;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.makeOrder .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    transform: translateY(-50%) rotate(180deg);
}

.select2-dropdown {
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    border-radius: 0;
    margin-top: 4px;
    background-color: var(--White);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--Black-White-Smoke, #EDEDED);
    color: var(--Black-Black-EEL, #2B2B2B);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--Black-White-Smoke, #EDEDED);
}

.select2-results__option {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--Black-Black-EEL, #2B2B2B);
}

.select2-search--dropdown {
    display: block;
    padding: 10px;
}

.select2-search--dropdown .select2-search__field {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    border: 1.5px solid var(--Black-Alto-Grey, #D8D8D8);
    padding: 0 20px;
    color: var(--Black-Black-EEL, #2B2B2B);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
}

.select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: var(--Black-Black-EEL, #2B2B2B);
}

.select2-results {
    padding: 10px;
}

.makeOrderTable__row {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.makeOrderTable__row-header {
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 0;
}

.makeOrderTable__elem {
    flex: 1;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.makeOrderTable__elem2 {
    flex: 2;
    justify-content: flex-start;
}

.makeOrderTable__product {
    display: flex;
    align-items: center;
    gap: 15px;
}

.makeOrderTableProduct__imgWrap {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
}

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

.makeOrderTableProduct__content {
    flex: 1;
}

.makeOrderTableProduct__article {
    color: #666;
    font-size: 14px;
    margin-bottom: 5px;
}

.makeOrderTableProduct__title {
    font-weight: 600;
    margin-bottom: 5px;
}

.makeOrderTableProduct__text {
    color: #666;
    font-size: 14px;
}

.makeOrderTable__inputWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.makeOrderTable__input {
    width: 60px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.makeOrderTable__input:focus {
    outline: none;
    border-color: #007bff;
}

.makeOrderTable__input-text {
    font-size: 12px;
    color: #666;
}

.makeOrder__btnsWrap {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 30px;
}

.makeOrder__btn {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.makeOrder__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-all-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.clear-all-btn:hover:not(:disabled) {
    background-color: #f8f9fa;
}

.add-to-cart-btn {
    background: var(--Green, #67B826);
    border: 1.5px solid var(--Green, #67B826) !important;
    color: #fff;
}

.add-to-cart-btn:hover {
    background: transparent;
    color: var(--Black-Black-EEL, #2B2B2B);
}

/* Loading Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 50px;
    height: 50px;
}

.spinner-ring {
    width: 100%;
    height: 100%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.makeOrder .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.makeOrderTable__row {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 15px 0;
}

.makeOrderTable__row-header {
    font-weight: bold;
    background-color: #f8f9fa;
    padding: 10px 0;
}

.makeOrderTable__elem {
    flex: 1;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.makeOrderTable__elem2 {
    flex: 2;
    justify-content: flex-start;
}

.makeOrderTable__product {
    display: flex;
    align-items: center;
    gap: 15px;
}

.makeOrderTableProduct__imgWrap {
    width: 60px;
    height: 60px;
    overflow: hidden;
    border-radius: 4px;
}

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

.makeOrderTableProduct__content {
    flex: 1;
}

.makeOrderTableProduct__article {
    color: #666;
    font-size: 14px;
    margin-bottom: 5px;
}

.makeOrderTableProduct__title {
    font-weight: 600;
    margin-bottom: 5px;
}

.makeOrderTableProduct__text {
    color: #666;
    font-size: 14px;
}

.makeOrderTable__inputWrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.makeOrderTable__input {
    width: 60px;
    height: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.makeOrderTable__input:focus {
    outline: none;
    border-color: #007bff;
}

.makeOrderTable__input-text {
    font-size: 12px;
    color: #666;
}

.makeOrder__btnsWrap {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    margin-top: 30px;
}

.makeOrder__btn {
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.makeOrder__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.clear-all-btn {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #333;
}

.clear-all-btn:hover:not(:disabled) {
    background-color: #f8f9fa;
}

/* Loading Overlay */
.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 50px;
    height: 50px;
}

.spinner-ring {
    width: 100%;
    height: 100%;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.select2-container .select2-selection--single {
    height: 46px !important;
}

@keyframes blink-highlight {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    75% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

.makeOrderTable__row.highlight-row {
    animation: blink-highlight 1.5s ease-in-out;
}

/* Remove the direct animation from the cell */
.makeOrderTable__elem.highlight-column {
    position: relative;
}

.makeOrder {
    position: relative;
    overflow: hidden;
    /* Contain the extended highlights */
}

.makeOrderTable__elem {
    position: relative;
    /* Keep this for z-indexing */
}

@keyframes blink-highlight {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    75% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

.makeOrderTable__row.highlight-row {
    animation: blink-highlight 1.5s ease-in-out;
}

.makeOrder {
    position: relative;
}

.makeOrder__table {
    position: relative;
    overflow: hidden;
}

.makeOrderTable__elem {
    position: relative;
}

@keyframes blink-highlight {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    75% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

/* Row highlight */
.makeOrderTable__row.highlight-row {
    animation: blink-highlight 1.5s ease-in-out;
}

/* Table structure */
.makeOrder {
    position: relative;
}

.makeOrder__table {
    position: relative;
    overflow: hidden;
}

/* Loading Overlay styles and other existing styles ... */

/* Single definition of highlight animation */
@keyframes blink-highlight {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    75% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

/* Table structure */
.makeOrder {
    position: relative;
}

.makeOrder__table {
    position: relative;
    overflow: hidden;
}

.makeOrderTable__elem {
    position: relative;
}

/* Row highlight */
.makeOrderTable__row.highlight-row {
    animation: blink-highlight 1.5s ease-in-out;
}

/* Column highlight - new implementation */
.makeOrderTable__elem.column-highlight-new::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300%;
    background-color: transparent;
    animation: blink-highlight 1.5s ease-in-out;
    pointer-events: none;
    z-index: -1;
}

@keyframes blink-highlight {
    0% {
        background-color: transparent;
    }

    25% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    75% {
        background-color: rgba(153, 0, 0, 0.1);
    }

    100% {
        background-color: transparent;
    }
}

/* Row highlight */
.makeOrderTable__row.highlight-row {
    animation: blink-highlight 1.5s ease-in-out;
}

/* Table structure */
.makeOrder {
    position: relative;
}

.makeOrder__table {
    position: relative;
    overflow: hidden;
}

/* Column highlight */
.makeOrderTable__elem.highlight-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--highlight-height, 100%);
    background-color: transparent;
    animation: blink-highlight 1.5s ease-in-out;
    pointer-events: none;
    z-index: -1;
}

.deliveryBlock__details {
    padding: 20px;
    background: #F8F8F8;
    border-radius: 10px;
    margin-top: 15px;
    margin-left: 20px;
    margin-right: 20px;
}

.deliveryBlock__details .checkoutContactForm__row {
    margin-bottom: 15px;
}

.deliveryBlock__details .checkoutContactForm__row:last-child {
    margin-bottom: 0;
}

.deliveryBlock__details .input {
    width: 100%;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 14px;
    line-height: 45px;
    color: #333333;
    transition: all 0.3s ease;
}

.deliveryBlock__details .input:focus {
    border-color: #333333;
    outline: none;
}

.deliveryBlock__details .input::placeholder {
    color: #999999;
}

/* Add these styles at the end of your css.css file */

.orderSuccess {
    max-width: 800px;
    margin: 60px auto;
    padding: 40px;
    text-align: center;
}

.orderSuccess__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.orderSuccess__icon {
    animation: scaleIn 0.5s ease-out;
}

.orderSuccess__header {
    text-align: center;
}

.orderSuccess__title {
    color: var(--Black-Black-EEL);
    font-size: 32px;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 10px;
    animation: fadeInUp 0.5s ease-out 0.2s both;
}

.orderSuccess__subtitle {
    color: var(--Black-Thundra-Grey);
    font-size: 18px;
    font-weight: 500;
    line-height: 140%;
    animation: fadeInUp 0.5s ease-out 0.3s both;
}

.orderSuccess__details {
    width: 100%;
    max-width: 400px;
    margin: 20px auto;
    animation: fadeInUp 0.5s ease-out 0.4s both;
}

.orderSuccessDetails__row {
    display: flex;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--Black-Alto-Grey);
}

.orderSuccessDetails__row:last-child {
    border-bottom: none;
}

.orderSuccessDetails__label {
    color: var(--Black-Thundra-Grey);
    font-size: 16px;
    font-weight: 400;
}

.orderSuccessDetails__value {
    color: var(--Black-Black-EEL);
    font-size: 16px;
    font-weight: 500;
}

.orderSuccess__message {
    color: var(--Black-Thundra-Grey);
    font-size: 15px;
    line-height: 160%;
    max-width: 600px;
    margin: 0 auto;
    animation: fadeInUp 0.5s ease-out 0.5s both;
}

.orderSuccess__message p:not(:last-child) {
    margin-bottom: 10px;
}

.orderSuccess__actions {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    animation: fadeInUp 0.5s ease-out 0.6s both;
}

.orderSuccess__btn {
    min-width: 200px;
}

.button--outline {
    background: transparent;
    border: 2px solid var(--Black-Black-EEL);
    color: var(--Black-Black-EEL);
}

.button--outline:hover {
    background: var(--Black-Black-EEL);
    color: var(--White);
}

@keyframes scaleIn {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Add these styles to your existing CSS file */

.search__wrap {
    position: relative;
}

.search-dropdown-wrapper {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-top: 4px;
    z-index: 1000;
}

.search-dropdown {
    max-height: 400px;
    overflow-y: auto;
}

.search-dropdown__item {
    display: flex;
    padding: 12px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
}

.search-dropdown__item:last-child {
    border-bottom: none;
}

.search-dropdown__item:hover {
    background-color: #f5f5f5;
}

.search-dropdown__image {
    width: 60px;
    height: 60px;
    margin-right: 12px;
    flex-shrink: 0;
}

.search-dropdown__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.search-dropdown__info {
    flex: 1;
}

.search-dropdown__title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px;
    color: var(--Black-Black-EEL);
}

.search-dropdown__sku {
    font-size: 12px;
    color: #666;
    margin: 0 0 4px;
}

.search-dropdown__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--Red-Berry);
    margin: 0;
}

.search-dropdown__empty {
    padding: 20px;
    text-align: center;
    color: #666;
}

.search-no-results {
    text-align: center;
    padding: 40px 0;
    color: #666;
}

/* Scrollbar styles for the dropdown */
.search-dropdown::-webkit-scrollbar {
    width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.search-dropdown::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.search-dropdown::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Add these styles to your existing CSS file */
.subscribe__message {
    margin-top: 10px;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.subscribe__message.success {
    color: #4CAF50;
}

.subscribe__message.error {
    color: #f44336;
}

@keyframes subscribed {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.subscribed {
    animation: subscribed 0.5s ease-in-out;
}

.shake {
    animation: shake 0.5s ease-in-out;
}

.subscribeForm__input.disabled,
.subscribeForm__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Add these styles to your existing CSS file */
.subscribe__message {
    margin-top: 10px;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.subscribe__message.success {
    color: var(--Red-Berry);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: successMessageIn 0.5s ease forwards 0.3s;
}

.subscribe__message.error {
    color: var(--Red-Berry);
    font-size: 13px;
    margin-top: 5px;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes successMessageIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes subscribed {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.subscribed {
    animation: subscribed 0.5s ease-in-out;
}

.shake {
    animation: shake 0.5s ease-in-out;
}

.subscribeForm__input.disabled,
.subscribeForm__btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Add these styles to your existing CSS file */
.subscribe__form {
    position: relative;
    transition: all 0.5s ease;
}

.subscribe__form.success {
    transform: scale(0.95);
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.subscribe__message.success {
    color: var(--Red-Berry);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    animation: successMessageIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards 0.2s;
}

.subscribe__message.error {
    color: var(--Red-Berry);
    font-size: 13px;
    margin-top: 5px;
    opacity: 0;
    animation: fadeIn 0.3s ease forwards;
}

@keyframes successMessageIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes formOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.95);
        opacity: 0;
    }
}

.productBottom__right {
    width: 84px;
}

.productTop__img {
    width: 100%;
    height: 362px;
    object-fit: cover;
}

.orderRowContentProduct__img {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

/* Login Error Styles */
.login-error {
    margin-bottom: 20px;
    animation: slideInDown 0.3s ease-out;
}

.login-error__content {
    background-color: rgba(153, 0, 0, 0.1);
    border: 1px solid var(--Red-Berry);
    border-radius: 4px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.login-error__icon {
    color: var(--Red-Berry);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-error__message {
    color: var(--Red-Berry);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
}

@keyframes slideInDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Enhance invalid input styling */
.input.is-invalid {
    border-color: var(--Red-Berry);
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* Custom Filter Styles */
.customFilter {
    position: relative;
    margin-right: 16px;
    min-width: 200px;
}

.customFilterHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    padding: 0 16px;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #E0E0E0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.customFilterHeader:hover {
    border-color: #2B2B2B;
}

.customFilterHeader__label {
    color: #2B2B2B;
    font-size: 14px;
    font-weight: 400;
}

.customFilterHeader__icon {
    position: relative;
    width: 10px;
    height: 10px;
}

.customFilterHeader__icon::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2B2B2B;
    transition: transform 0.3s ease;
}

.customFilter.active .customFilterHeader__icon::after {
    transform: rotate(180deg);
}

.customFilterDropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    padding: 16px;
    margin-top: 8px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 100%;
    width: 480px;
    /* Wider width for better display */
    border: 1px solid #E0E0E0;
}

#colorFilter .customFilterDropdown {
    width: 520px;
    /* Extra width for color filter */
}

.customFilter.active .customFilterDropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.customFilterDropdown__search {
    margin-bottom: 16px;
}

.customFilterDropdown__searchInput {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.customFilterDropdown__searchInput:focus {
    border-color: #2B2B2B;
}

.customFilterDropdown__list {
    max-height: 300px;
    overflow-y: auto;
}

.customFilterDropdown__list::-webkit-scrollbar {
    width: 4px;
}

.customFilterDropdown__list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.customFilterDropdown__list::-webkit-scrollbar-thumb {
    background: #bdbdbd;
    border-radius: 2px;
}

.customFilterDropdown__list::-webkit-scrollbar-thumb:hover {
    background: #9e9e9e;
}

.customFilterDropdown__columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.customFilterDropdown__item {
    margin-bottom: 10px;
}

.customFilterDropdown__item .checkbox__container {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #2B2B2B;
    cursor: pointer;
    white-space: nowrap;
}

.color-circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    margin: 0 8px;
    border: 1px solid #E0E0E0;
    flex-shrink: 0;
}

.size-name,
.color-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media(max-width: 768px) {

    .customFilterDropdown,
    #colorFilter .customFilterDropdown {
        width: 380px;
    }

    .customFilterDropdown__columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 576px) {

    .customFilterDropdown,
    #colorFilter .customFilterDropdown {
        width: 300px;
    }

    .customFilterDropdown__columns {
        grid-template-columns: 1fr;
    }
}

/* Highlight styles for filtered table cells */
.makeOrderTable__elem.highlight-column {
    position: relative;
    z-index: 1;
}

.makeOrderTable__elem.highlight-column::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(245, 245, 245, 0.6);
    z-index: -1;
    border-radius: 4px;
    animation: blink-highlight 0.5s ease-in-out;
}

.makeOrderTable__row.highlight-row .makeOrderTable__elem:first-child {
    position: relative;
    z-index: 1;
}

.makeOrderTable__row.highlight-row .makeOrderTable__elem:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(245, 245, 245, 0.6);
    z-index: -1;
    border-radius: 4px;
    animation: blink-highlight 0.5s ease-in-out;
}

@keyframes blink-highlight {
    0% {
        background-color: rgba(255, 153, 51, 0.4);
    }

    50% {
        background-color: rgba(255, 153, 51, 0.2);
    }

    100% {
        background-color: rgba(245, 245, 245, 0.6);
    }
}

/* Stock notification popup */
.stock-notification {
    position: absolute;
    z-index: 100;
    min-width: 250px;
    max-width: 300px;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    padding: 12px 16px;
    margin-top: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    text-align: center;
    top: 64px;
    right: -15px;
}

.stock-notification:before {
    content: '';
    position: absolute;
    top: -8px;
    left: 20px;
    width: 16px;
    height: 16px;
    background-color: white;
    border-left: 1px solid #E0E0E0;
    border-top: 1px solid #E0E0E0;
    transform: rotate(45deg);
}

.stock-notification.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.stock-notification__header {
    color: #2B2B2B;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stock-notification__title {
    color: #2B2B2B;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 6px;
}

.stock-notification__message {
    color: #2B2B2B;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 0;
}

.cart__emptyText {
    margin-bottom: 50px;
}

.orderTable__row.orderTable__row-address .orderTable__elem {
    background: rgba(7, 193, 85, 0.3) !important;
}

.orderTable__row.orderTable__row-address-express .orderTable__elem {
    background: rgba(0, 123, 255, 0.3) !important;
}

.orderTable__row.orderTable__row-express .orderTable__elem {
    background: rgba(255, 0, 0, 0.25) !important;
}

.orderTable__row.orderTable__row-prepared .orderTable__elem {
    background: rgba(21, 255, 0, 0.63) !important;
}

/* Custom File Input Styles */
.file-input-label {
    display: flex;
    /* Use flex to align text and icon */
    align-items: center;
    /* Vertically center icon and text */
    justify-content: center;
    /* Center content horizontally */
    box-sizing: border-box;
    cursor: pointer;
    padding: 12px 15px;
    /* Adjust padding */
    border-radius: 4px;
    /* Match other inputs/buttons */
    border: 1px dashed #A7A7A7;
    /* Use a dashed border */
    background-color: #f9f9f9;
    /* Lighter background */
    color: #474747;
    /* Text color */
    width: 100%;
    /* Make it full width */
    text-align: center;
    margin-bottom: 5px;
    /* Reduced bottom margin */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.file-input-label:hover {
    background-color: #f0f0f0;
    border-color: #888888;
}

.file-input-hidden {
    display: none;
}

.file-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    /* Adjusted margin */
    max-height: 100px;
    /* Limit height and make scrollable */
    overflow-y: auto;
    border: 1px solid #D8D8D8;
    /* Optional: Add a border */
    border-radius: 4px;
    padding: 5px;
}

.productCol__text {
    font-size: 14px;
    line-height: 1.4;
    color: var(--gray-dark);
}

/* New styles for combined info columns */
.product__info-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* Responsive columns */
    gap: 30px;
    /* Adjust gap as needed */
    margin-top: 40px;
    /* Spacing from content above */
    margin-bottom: 40px;
    /* Spacing from content below */
}

.product__info-col {
    /* Style individual columns if needed */
}

.product__info-col .productCol__title {
    margin-bottom: 15px;
    /* Adjust spacing */
}

.product__info-col .productCol__textWrap {
    margin-bottom: 20px;
    /* Adjust spacing */
}

.product__info-col .productDescription__text p:last-child,
.product__info-col .productCol__text p:last-child {
    margin-bottom: 0;
}

/* Delivery Info Modal Styles (adjust as needed, reuse existing modal styles where possible) */
#deliveryInfoModal .modal__content {
    max-width: 600px;
    /* Adjust max width */
}

#deliveryInfoModal .modal__body {
    padding: 20px 30px 30px;
    /* Adjust padding */
}

#deliveryInfoModal .productDelivery__content {
    /* Styles for the delivery content within the modal */
}

#deliveryInfoModal .productDelivery__row {
    margin-bottom: 20px;
}

#deliveryInfoModal .productDelivery__row:last-child {
    margin-bottom: 0;
}

/* Responsive adjustments for the columns */
@media(max-width: 768px) {
    .product__info-cols {
        grid-template-columns: 1fr;
        /* Stack columns on smaller screens */
        gap: 20px;
    }
}


.product__delivery {
    margin-top: 40px;
}

/* === Filter Block Styling === */
.makeOrderHeader__right {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping on smaller screens if needed */
    align-items: flex-start;
    /* Align items to the top */
    gap: 20px;
    /* Space between filters */
    margin-bottom: 20px;
    /* Add some space below the filters */
}

.customFilter--always-visible {
    flex: 1 1 200px;
    /* Allow filters to grow and shrink, base width 200px */
    min-width: 180px;
    /* Prevent filters from becoming too narrow */
    display: flex;
    /* Use flex for internal layout */
    flex-direction: column;
}

/* Style the dropdown container */
.customFilter--always-visible .customFilterDropdown {
    display: block;
    visibility: visible;
    opacity: 1;
    position: relative;
    border: 1px solid #e0e0e0;
    /* Use a common border color */
    border-radius: 4px;
    /* Add slight rounding */
    padding: 15px;
    background: #fff;
    flex-grow: 1;
    /* Allow dropdown to take available vertical space in the filter container */
    /* Removed fixed width and max-height for desktop, height will be content-based + list max-height */
}

/* Filter Title */
.customFilter__title {
    font-weight: 600;
    font-size: 15px;
    /* Slightly smaller */
    line-height: 1.3;
    color: #333;
    /* Darker color */
    margin-bottom: 10px;
    /* Reduced space */
    display: block;
}

/* Search input specific to color filter */
#colorFilter .customFilterDropdown__search {
    margin-bottom: 10px;
}

#colorFilter .customFilterDropdown__searchInput {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
}

/* Scrollable list area */
.customFilterDropdown__list {
    max-height: 160px;
    /* Compact vertical height for desktop */
    overflow-y: auto;
    padding-right: 5px;
    /* Space for scrollbar */
    margin-right: -5px;
    /* Offset padding */
}

/* Scrollbar styling (match existing if possible, example below) */
.customFilterDropdown__list::-webkit-scrollbar {
    width: 6px;
}

.customFilterDropdown__list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.customFilterDropdown__list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.customFilterDropdown__list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Layout for filter options */
.customFilterDropdown__columns {
    display: flex;
    /* flex-direction: column; */
    gap: 8px;
    /* Space between items */
}

#colorFilter .customFilterDropdown__columns {
    /* Optionally use grid for colors if many */
    /* display: grid; */
    /* grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); */
    /* gap: 8px; */
}

/* Individual filter item */
.customFilterDropdown__item .checkbox__container {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between checkbox/circle and text */
    cursor: pointer;
}

.customFilterDropdown__item .checkbox__container .color-circle {
    flex-shrink: 0;
    /* Prevent circle from shrinking */
}

.customFilterDropdown__item .checkbox__container .color-name,
.customFilterDropdown__item .checkbox__container .size-name {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === Mobile Optimizations === */
@media (max-width: 768px) {
    .makeOrderHeader__right {
        flex-direction: column;
        /* Stack filters vertically */
        gap: 15px;
    }

    .customFilter--always-visible {
        flex-basis: auto;
        /* Reset flex-basis */
        width: 100%;
        /* Take full width */
    }

    .customFilter--always-visible .customFilterDropdown {
        padding: 12px;
    }

    .customFilter__title {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .customFilterDropdown__list {
        max-height: 180px;
        /* Allow slightly more height on mobile */
    }

    /* Optionally hide color search on small screens */
    /* 
    #colorFilter .customFilterDropdown__search {
        display: none;
    }
    #colorFilter .customFilterDropdown__list {
        max-height: 180px; 
    } 
    */
}

@media (max-width: 480px) {
    .customFilterDropdown__list {
        max-height: 150px;
        /* Further adjust for very small screens */
    }
}


/* Remove styles related to header/toggle that might interfere */
.customFilterHeader,
.customFilterHeader:hover,
.customFilterHeader__label,
.customFilterHeader__icon,
.customFilterHeader__icon::after,
.customFilter.active .customFilterHeader__icon::after,
.customFilter.active .customFilterDropdown {
    /* Reset potentially conflicting properties */
    all: revert;
}

/* Re-apply essential base customFilter styles if revert was too broad */
.customFilter {
    position: relative;
}

/* Ensure the always-visible dropdown styles take precedence */
.customFilter--always-visible .customFilterDropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    /* Re-add specific styles needed */
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px;
    background: #fff;
    flex-grow: 1;
}

@media (max-width: 768px) {
    .customFilter--always-visible .customFilterDropdown {
        padding: 12px;
    }
}

@media (max-width: 768px) {
    .makeOrder__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .makeOrder__header > div {
        width: 100%;
    }
}

/* Style for the color swatch itself */
.color-swatch {
    display: inline-block;
    width: 24px;  /* Increased size */
    height: 24px; /* Increased size */
    border: 1px solid #ccc; /* Default border */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    vertical-align: middle; /* Align with text if any were present */
    margin: 2px; /* Add small margin for spacing */
}

/* Hover effect */
.color-swatch:hover {
    transform: scale(1.1);
    border-color: #888;
}

/* Selected state */
.color-swatch.selected {
    border: 2px solid var(--Red-Berry, #900); /* Prominent border */
    box-shadow: 0 0 3px rgba(144, 0, 0, 0.5); /* Optional shadow */
    transform: scale(1.05); /* Slightly larger when selected */
}

/* Adjust columns gap and item alignment */
.customFilterDropdown__columns {
    gap: 8px 12px; /* Row gap, Column gap */
}

.customFilterDropdown__item {
    display: flex; /* Use flex for alignment */
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin if using gap */
}

@media(max-width: 768px) {

    .customFilterDropdown,
    #colorFilter .customFilterDropdown {
        width: 380px;
    }

    .customFilterDropdown__columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 576px) {

    .customFilterDropdown,
    #colorFilter .customFilterDropdown {
        width: 300px;
    }

    .customFilterDropdown__columns {
        grid-template-columns: 1fr;
    }
}

.customFilter__container {
    display: flex;
    gap: 10px;
    align-items: center;
}

.customFilter__container .customFilter__title {
    margin-bottom: 0px;
}

.makeOrder__top {
    padding: 10px 20px;
    background-color: var(--Black-White-Smoke, #EDEDED);
}

.clear-all-btn:hover {
    color: #999 !important;
}

.partners-header-text-bold {
    font-weight: 700;
}