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



@font-face {
    font-family: "helvetica_lt_geo_roman";
    src: url(/client/assets/fonts/HELVETICA_NEUE_LT_GEO_55_ROMAN.TTF);
}

@font-face {
    font-family: "helvetica_lt_geo_bold";
    src: url(/client/assets/fonts/HELVETICA_NEUE_LT_GEO_75_BOLD.TTF);
}

@font-face {
    font-family: "helvetica_lt_geo_medium";
    src: url(/client/assets/fonts/HELVETICA_NEUE_LT_GEO_65_MEDIUM.TTF);
}

:root {
    --default-font-size: .875rem;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;


}

html, body{
    font-family: "helvetica_lt_geo_roman";
    height: 100%;
    position: relative;
    font-size: var(--default-font-size);

}
body{
    color: #0D1E33;
    overflow-x: clip;
}

.prevent-scroll{
    overflow: hidden;
}




*::after,
*::before {
    position: absolute;
    content: "";
}

/* removes spacing between cells in tables */
table {
    border-collapse: collapse;
}

ol, ul {
    list-style: none;
}

img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}


a{
    text-decoration: none;

}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #fff;
}

::-webkit-scrollbar-thumb {
    width: 6px;
    height: 6px;
    background-color: #b7b7b7;
    border-radius: 10px;
}

.parent-category-container::-webkit-scrollbar-thumb{
    width: 3px;
    height: 3px;
    background-color: #b7b7b7;
    border-radius: 10px;
}


button{
    background-color: transparent;
    border: 0;
    cursor: pointer;
    outline: none;
}

.container{
    margin: auto;
    max-width: calc(1632px + 2rem);
    position: relative;


}

.main-padding{
    padding-left: 1rem;
    padding-right: 1rem;
}


.brand-navigation-wrapper{
    margin: auto;
    max-width: calc(1632px + 2rem);
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
}
.brand-nav-arrow{
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: none;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    color: #333;
    z-index: 10;
}
.brand-nav-arrow:hover{
    background: #ddd;
}
.brand-nav-arrow.swiper-button-disabled{
    opacity: 0.3;
    cursor: default;
}

.item-placeholder{
    min-width: 30rem;
    min-height: 5rem;
}


.swiper {
    width: 100%;
    height: 100%;

}

.swiper-slide {


    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: initial;

}

.header .top{
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    z-index: 22;
}

.lang-switcher{
    display: flex;
    gap: 1rem;
    align-items: center;
}
.lang-switcher li a{
    color: #0D1E33;
    opacity: 0.5;
    font-weight: bold;
}

.lang-switcher li a.active{
    opacity: 1;
}

.switch {
    position: relative;
    display: inline-block;
    width: 41px;
    height: 19px;
    cursor: pointer;
}

.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    -webkit-transition: .4s;
    transition: .4s;
    border: 1px solid #F7F7F7;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: #FAAB12;
    -webkit-transition: .4s;
    transition: .4s;
}

.switch.right .slider:before{
    left: initial;
    right: 2px;
}

.switch .slider.round {
    border-radius: 34px;
}

.switch .slider.round:before {
    border-radius: 50%;
}

.header .main{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header .main .logo{
    align-self: flex-end;
}
.navigation{
    display: flex;
    gap: 1rem;
}
.header .main .navigation{
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
}
.navigation li a{
    display: flex;
    gap: 0.25rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0D1E33;
    position: relative;
    border-radius: 0.5rem;
    padding: 0 1rem;
    transition: all 0.4s;
    min-width: 55px;
    height: 100%;
    white-space: nowrap;
    font-size: 0.875rem;
    min-height: 53px;
}
.navigation .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.mobile-bottom-menu .navigation{
    justify-content: center;
    gap: 0.25rem;
    height: fit-content;
}
.mobile-bottom-menu .navigation li a{
    font-size: 0.75rem;
    padding: 0.45rem 0.45rem;
}
.mobile-bottom-menu .navigation li svg {
    max-height: 18px;
}

.header .main .navigation li a{

    min-width: 94px;
}


.header .main .navigation li a:hover{
    background-color: #F5F5F5;
}
.header .main li a svg{
    fill: #0D1E33;
    transition: all 0.4s;
}
.navigation li a svg{
    fill: #0D1E33;
    transition: all 0.4s;
}
.header .main li a:hover svg{
    fill: #1492E6;
}
.navigation  li a:hover svg{
    fill: #1492E6;
}
.header .main li a:hover svg.cart{
    fill: #DDA15E;
}
.navigation li a:hover svg.cart{
    fill: #DDA15E;
}
.header .main li a:hover svg.favorites{
    fill: #FF6D6A;
}
.navigation li a:hover svg.favorites{
    fill: #FF6D6A;
}

.item-count{
    position: absolute;
    background-color: #FF6D6A;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    right: 0.7rem;
    top: 0;
    padding-top: 0.25rem;
    font-size: 0.8rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.btn{
    border-radius: 0.7rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 0.6rem;
    width: fit-content;
    cursor: pointer;
    font-size: .875rem;

}

.btn-70{
    min-height: 70px;
}
.main-btn{
    color: white;
    background-color: #FAAB12;
    padding: 1.1rem 1.4rem;
    text-wrap: nowrap;
}

.header .controls{
    display: flex;
    position: relative;
    z-index: 22;
    flex: 1;
}
.header .controls.search{

    z-index: initial;
}
.header .controls > div:last-child{
    padding-left: 2rem;
    position: relative;

}
.header .controls > div:nth-child(2){
    padding-right: 1rem;

}
.vertical-separator{
    background-color: #0D1E33;
    width: 2px;
    height: 50%;
}
.header .controls div:last-child .vertical-separator{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

}


.search-box-container{
    padding-left: 2rem;
    padding-right: 0.5rem;
    display: flex;
    align-items: flex-end;
    flex: 1;
}
.search-box{
    position: relative;
    background-color: #F5F5F5;
    width: 100%;
    width: 100%;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    z-index: 2;
}

.search-box input{
    border: 0;
    outline: none;
    width: 100%;
    background: transparent;
    padding: 1rem;

}
.search-icon{

}

.logo{
    height: 100%;
    display: flex;
    align-items: flex-end
}
.logo svg {
    height: 33px;
    width: auto;
}

.section{
    position: relative;
}

.section-title{
    font-weight: bold;
    font-size: 1.37rem;
    padding-bottom: 1.25rem;
}


.categories-nav{
    padding: 0.25rem;
    background-color: #F5F5F5;
    border-radius: 0.7rem;

    display: flex;

    width: 100%;

}
.categories-nav li:last-child {
    padding-left: 1rem;
}
.categories-nav li a{
    padding: 1.2rem 0.5rem;
    text-align: left;
    height: 100%;
    /*max-width: 235px;*/
}

.category-grid-wrapper {
    flex: 1;
    padding-left: 1rem;
}

.category-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem;
    overflow-x: auto;
    justify-content: space-between;
    width: 100%;
}



.category-grid .category-btn {
    padding: 0.75rem 0.5rem;
    text-align: left;
    min-height: 60px;
    min-width: 0;
    flex: 0 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 0.854rem;
}

.category-grid .category-btn span {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}

.category-grid .category-btn span.is-truncated {
    text-overflow: ellipsis;
}

/* Responsive breakpoints for category grid */
@media (max-width: 1400px) {
    .category-grid {
        flex-wrap: nowrap;
    }
}

@media (max-width: 1200px) {
    .category-grid {
        flex-wrap: nowrap;
    }
}

@media (max-width: 992px) {
    .category-grid {
        flex-wrap: nowrap;
    }
}

.categories-nav li .category-menu-btn{
    color: white;
    background-color: #0D1E33;
    text-wrap: nowrap;
    padding: 1rem 2rem ;
}
.categories-section{
    margin-top: 2rem;
}

.menu-icon{
    position: relative;
}
.menu-icon div {
    width: 31px;
    height: 3px;
    margin: 5px 0;
    transition: 0.3s;
    background-color: white;
}

.category-btn{
    color: #0D1E33;
    transition: all 0.4s;
}

.category-btn svg{
    fill: #0D1E33;
    transition: all 0.4s;
}

.category-btn:hover{
    color: #FAAB12;
    background-color: white;
}
.category-btn:hover svg{
    fill: #FAAB12;

}



.main-slider-section{
    margin-top: 2rem;
}

.main-slider-container{
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
}

.main-slider-container .gradient{

    background: #0D1E33;
    background: -webkit-linear-gradient(180deg, rgba(13, 30, 51, 0) 0%, rgba(13, 30, 51, 1) 100%);
    background: -moz-linear-gradient(180deg, rgba(13, 30, 51, 0) 0%, rgba(13, 30, 51, 1) 100%);
    background: linear-gradient(180deg, rgba(13, 30, 51, 0) 0%, rgba(13, 30, 51, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0D1E33", endColorstr="#0D1E33", GradientType=0);

    position: absolute;
    width: 100%;
    height: 100%;
    height: 33%;
    z-index: 1;
    bottom: 0;
    pointer-events: none;
    opacity: 0.5;
}

.slick-dotted.slick-slider {
    margin-bottom: 45px;
}

.slick-dots {

    bottom: -40px;

}

.main-slider.slick-dotted.slick-slider {
    margin-bottom: 0;
}

.main-slider{
    border-radius: 1rem;
    overflow: hidden;
}
.main-slider a{
    position: relative;
    display: block;
    padding-top: 28%;


}
.main-slider a img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-slider a video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mute-toggle{
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s, visibility 0.2s;
}
.mute-toggle.visible{
    visibility: visible;
    opacity: .55;
}
.mute-toggle.visible:hover{
    opacity: 1;
}
.mute-toggle .icon-unmuted{
    display: none;
}
.mute-toggle.unmuted .icon-muted{
    display: none;
}
.mute-toggle.unmuted .icon-unmuted{
    display: block;
}

.center-toggle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.5);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
.main-slider-container:hover .center-toggle.visible{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.center-toggle .icon-play{
    display: none;
}
.center-toggle.paused .icon-pause{
    display: none;
}
.center-toggle.paused .icon-play{
    display: block;
}

.main-slider-nav-container{
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 20;
}
.main-slider-nav{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    align-items: center;
    padding-bottom: 0.5rem;

}
.main-slider-nav-container .slick-dots{
    position: relative;
    bottom: 0;
    width:initial;
    z-index: 20;
}

.slick-dots li {

    width: 20px;
    height: 20px;
    margin: 0 2px;
    padding: 0;

}

.main-slider-nav-container .slick-dots li button:before {
    font-family: 'slick';

    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .4;
    color: rgb(255, 255, 255);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li button:before{
    font-size: 8px;
}

.main-slider-nav-container .slick-dots li.slick-active button:before {
    opacity: 1;
    color: white;
}

.relative{
    position: relative;
}

.main-slider-nav{
    display: flex;
    align-items: center;
    gap: 1rem;
}



.background-1,.background-2{
    position: relative;
    overflow: hidden;
}

.background-1 > svg{
    width: 100%;
    height: 100%;
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.background-2 > svg{

    bottom: 0;
    position: absolute;
    pointer-events: none;
    z-index: -1;
}


.section-brand-slider{

    margin-top: 2rem;

    padding-bottom: 1rem;
}

.brand-navigation{
    padding: 0.25rem 0.5rem;
    background-color: #ebebeb;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    overflow: hidden;
}

.brand-navigation a{
    transition: all 0.4s;
}

.brand-navigation a.active{
    background-color: rgba(255, 255, 255, 0.5);
}

.brand-navigation a:hover{
    opacity: 0.5;
}

.brand-navigation img{

    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.brand-btn{
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-categories{
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.brand-view-all-wrapper{
    margin-top: 1rem;
}

.brand-category-btn{
    background-color: #F5F5F5;
    padding: 1rem;
    color: #0D1E33;
    transition: all 0.4s;
}

.brand-category-btn.active{
    background-color: #FAAB12;
    padding: 1rem;
    color: white;
}

.overlay{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 51, 71, 0.85);
    z-index: 20;
    display: none;
}
.overlay.center-popup{
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.popup{
    display: none;

}
.overlay.popup{
    z-index: 100;
}
.overlay.right-popup{
    display: flex !important;
    justify-content: flex-end;
}

@keyframes slideInRight{
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

.category-menu{
    position: fixed;
    width: 85%;
    height: 100%;
    background-color: white;
    z-index: 21;
    right: -100%;
    opacity: 0;
    transition: all 0.4s;
    padding-left: 2rem;
}
.category-menu.opened{

    right: 0%;
    opacity: 1;

}

.category-menu-header{
    display: flex;

}
.align-items-center{
    align-items: center;
}

.category-filter{
    display: flex;

}
.category-filter li{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    position: relative;

}
.category-filter li::after{
    content: '';
    position: absolute;
    height: 60%;
    width: 2px;
    background-color: #E6E8EA;
    right: 0;
    top: 20%;
}
.category-filter li:first-child{
    padding-left: 0;
}
.category-filter li:last-child{
    padding-right: 0;
}

.category-filter li:last-child::after{
    background-color: transparent;
    width: 0;
    height: 0;
}
.category-filter-btn{

    gap: 0.25rem;
    color: #0D1E33;
    padding: 0.75rem 1rem;
    transition: all 0.4s;
}

.category-filter-btn:not(.liquidation):hover{

    background-color: #F5F5F5;
}

.category-filter-btn svg{
    width: max-content;
    flex: 0 0 auto;
    fill: #0D1E33;
    transition: all 0.2s;
}
.category-filter-btn:hover svg{
    fill: #FAAB12;
}



.liquidation{
    color: #AC1D1A !important;

}
.liquidation:hover{
    color: white !important;
    background-color: #AC1D1A !important;

}

.liquidation svg{
    fill: #AC1D1A !important;


}

.liquidation:hover svg{
    fill: white !important;


}

.horizontal-separator{
    width: 100%;
    height: 2px;
    background-color: #0D1E33;
    opacity: 0.1;
}

.category-menu .close-content{
    display: flex;
    align-items: center;
    gap: 1rem;
}


.top-controls-container{
    margin-top: 1rem;
}

.category-search-box{
    position: relative;
    background-color: #F5F5F5;
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    margin-bottom: 1rem;
}

.category-search-box input{
    border: 0;
    outline: none;
    width: 100%;
    background: transparent;
    padding: 0.85rem 0.75rem;
    color: #0D1E33;
    font-size: 0.95rem;
}

.category-search-box .search-icon{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.category-search-clear{
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0.5rem;
}

.category-search-box.has-value .category-search-clear{
    display: flex;
}

.price-loading{
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #e2e2e2;
    border-top-color: #FAAB12;
    border-radius: 50%;
    animation: price-loading-spin 0.7s linear infinite;
    font-size: 0;
    vertical-align: middle;
}

@keyframes price-loading-spin {
    to { transform: rotate(360deg); }
}

.delivery-type-title{
    font-weight: bold;
    color: #0D1E33;
    margin: 1rem 0 0.75rem;
}

.delivery-type-tabs{
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.delivery-type-tab{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 0.5rem;
    border: 2px solid #F5F5F5;
    background-color: #F5F5F5;
    border-radius: 0.75rem;
    cursor: pointer;
    color: #0D1E33;
    transition: all 0.2s;
    text-align: center;
}

.delivery-type-tab:hover{
    border-color: #FAAB12;
}

.delivery-type-tab.active{
    border-color: #FAAB12;
    background-color: #FFF7E8;
}

.delivery-type-tab.disabled{
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.delivery-type-tab .delivery-type-label{
    font-size: 0.85rem;
    font-weight: 600;
}

.delivery-type-tab .delivery-type-row{
    font-size: 0.72rem;
    color: rgba(13, 30, 51, 0.65);
}

.delivery-type-tab .delivery-type-price{
    font-size: 0.9rem;
    font-weight: bold;
    color: #FAAB12;
}

.delivery-type-note{
    background-color: #FFF7E8;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    line-height: 1.4;
    color: #0D1E33;
    margin-bottom: 1rem;
    max-height: 200px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease, margin-bottom 0.25s ease;
}

.delivery-type-note.hidden{
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

#category-search-empty.category-search-empty{
    display: none;
    padding: 1.5rem 0;
}

#category-search-empty.category-search-empty.show{
    display: flex;
}

.product-item{
    display: block;
    color: #0D1E33;
    background-color: white;
    border-radius: 0.75rem;
    padding: 0.75rem;
    height: 100%;
    border: 1px solid #F5F5F5;
    transition: all 0.2s;
    position: relative;
    /* Grid items default to min-width: auto (their content's min-content
       size), which refuses to shrink below that even when the 1fr track
       wants to be narrower - the whole grid then overflows its container
       instead of the columns getting narrower, pushing the last column(s)
       off-screen until the page is zoomed out. Let it shrink freely. */
    min-width: 0;
}

.img{
    position: relative;
    overflow: hidden;
}

.product-item .img{
    padding-top: 100%;
}

.product-item .img img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
    left: 0;
    transition: all 0.2s;
}

.product-item .title{
    margin-top: 1rem;
}

.product-item .title h3{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-item:hover{
    border-color: #FAAB12;
}

.product-item .side-menu-wrapper{
    position: absolute;
    right: 1px;
    top: 1px;

    visibility:hidden;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.2s;
    z-index: 1;


}
.product-item .side-menu{
    margin-right: 0.5rem;
}
.product-item .side-menu li{
    margin-top: 0.5rem;
}

.product-item .side-menu li button{
    background-color: #F5F5F5;
    border-radius: 0.35rem;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-item .side-menu li button svg{
    fill: #0D1E33;
    transition: all 0.2s;
}
.product-item .side-menu li button:hover svg{
    fill: #1492E6;
}
.product-item .side-menu li:nth-child(2) button:hover svg{
    fill: #FF6D6A;
}
.product-item .side-menu li:nth-child(1) button:hover svg{
    fill: #FAAB12;
}
.product-item .side-menu li button.clicked{
    background-color: #1492E6;
}
.product-item .side-menu li:nth-child(1) button.clicked{
    background-color: #FAAB12;
}
.product-item .side-menu li:nth-child(2) button.clicked{
    background-color: #FF6D6A;
}
.product-item .side-menu li button.clicked svg{
    fill: white !important;
}

.product-item:hover .side-menu-wrapper{
    visibility: visible;
    opacity: 1;
    transform: translateX(0px);
}
.product-item:hover .img img{
    opacity: 0.5;
}



.brand-products-slider{
    margin-top: 1rem;


}

/* Before Swiper's JS runs (init() sets each slide's real inline width),
   the bundled swiper CSS defaults every .swiper-slide to width:100%,
   which briefly renders the first card - and its image - stretched
   across the whole slider on page load. These pre-set widths (matching
   the JS breakpoints in script.js's brand_product_slider/product_slider/
   product_slider_new configs) close that gap; Swiper's own inline style
   always wins once it initializes. */
.brand-products-slider .swiper-slide,
.product-slider .swiper-slide,
.product-slider-new .swiper-slide{
    width: 160px;
}
@media (min-width: 768px){
    .brand-products-slider .swiper-slide,
    .product-slider .swiper-slide,
    .product-slider-new .swiper-slide{
        width: calc((100% - 2 * 20px) / 3);
    }
}
@media (min-width: 1024px){
    .brand-products-slider .swiper-slide,
    .product-slider .swiper-slide,
    .product-slider-new .swiper-slide{
        width: calc((100% - 3 * 20px) / 4);
    }
}
@media (min-width: 1200px){
    .brand-products-slider .swiper-slide,
    .product-slider .swiper-slide,
    .product-slider-new .swiper-slide{
        width: calc((100% - 4 * 20px) / 5);
    }
}
@media (min-width: 1400px){
    .brand-products-slider .swiper-slide,
    .product-slider .swiper-slide,
    .product-slider-new .swiper-slide{
        width: calc((100% - 5 * 20px) / 6);
    }
}

.brand-products-slider .slick-slide {
    margin: 0px 10px;
    height: initial;
}
.product-slider .slick-slide {
    margin: 0px 10px;
    height: initial;
}
.product-slider-new .slick-slide {
    margin: 0px 10px;
    height: initial;
}

.generic-slider .slick-slide {
    margin: 0px 10px;
    height: initial;
}

.brand-products-slider > div{

}

.brand-empty-state {
    width: 100%;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.brand-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #f4f6f8;
    color: #b0b8c1;
}

.brand-empty-icon svg {
    display: block;
}

.brand-empty-text {
    font-size: 16px;
    color: #9aa3ad;
    font-family: inherit;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.slick-track{

    display: flex;
    margin-left: initial;
}

.offer-item{
    display: flex;
    position: relative;
    overflow: hidden;
    padding: 0.25rem;
    border-radius: 0.75rem;
    height: 100%;
    background-color: #F1EAEA;
    border: 1px solid #FAAB12;
}

.offer-product{
    background-color: #F1EAEA;
    border-radius: 0.55rem;
    width: 100%;
    color: #0D1E33;
    padding: 1.5rem;
    position: relative;
}

.offer-product-content{
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.offer-product-media{
    flex: 1 1 140px;
    max-width: 180px;
}

.offer-product-specs{
    flex: 1 1 200px;
    min-width: 0;
}

.offer-specs-title{
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.offer-specs-title .dash{
    width: 14px;
    height: 2px;
    background: #FAAB12;
    display: inline-block;
    flex: 0 0 14px;
}

.offer-product-specs .product-spec-list li{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(13, 30, 51, 0.08);
}
.offer-product-specs .product-spec-list li:first-child{
    padding-top: 0;
}
.offer-product-specs .product-spec-list li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.offer-product-specs .product-spec-list .spec-icon{
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: flex;
}
.offer-product-specs .product-spec-list .spec-icon svg{
    width: 18px;
    height: 18px;
}
.offer-product-specs .product-spec-list .spec-label{
    color: #7a8794;
}
.offer-product-specs .product-spec-list .spec-value{
    color: #0D1E33;
    font-weight: bold;
    margin-left: auto;
    text-align: right;
}

.offer-product .icon-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.75rem;
    z-index: 1;
}

.offer-product .icon {
    position: relative;

}

.offer-product .title{
    margin-top: 1rem;
}

.offer-product .icon svg:last-child{
    position: absolute;
    top: 11px;
    left: 11px;
}

.offer-container{
    display: grid;

    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
}
.offer-container > div {
    flex: 0 0 50%;

}

.offer-product .img{
    padding-top: 100%;
}

.offer-product .img img{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: contain;
}

.section-new-products{
    margin-top: 2rem;
}

.advantages{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
}

.advantage-card{
    background-color: #F1EAEA;
    border-radius: 1.5rem;
    padding: 1rem 2rem;

}
.advantage-card .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.advantage-card .content .icon{
    position: relative;

}
.advantage-card .content .icon svg:last-child{
    position: absolute;
    top: 26px;
    left: 26px;

}
.advantages div:nth-child(2) .advantage-card .content .icon svg:last-child{

    top: 26px;
    left: 28px;

}

.advantages div:nth-child(3) .advantage-card .content .icon svg:last-child{

    top: 26px;
    left: 24px;

}

.advantage-card .content .value{
    font-weight: bold;
    font-size: 2.18rem;
    padding: 0.5rem 0;
}
.advantage-card .content .title{
    font-weight: bold;
    font-size: 1.12rem;
}

.section-advantages{
    margin-top: 4rem;
    padding-bottom: 4rem;
}

.section-exclusive-brand{
    margin-top: 1rem;
    background-color: #F1EAEA;
}
.section-exclusive-brand  .brand-info > svg{
    height: 150%;

    width: 100%;

    position: absolute;
    top: -15%;
    left: 0;


}

.section-exclusive-brand .banner img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-info{
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.brand-info .content{
    position: relative;
    display: flex;
}

.brand-info .content .info{
    /* max-width: 30rem; */
    padding-right: 4rem;
}

.text{
    line-height: 1.2;
}

.brand-info .content .info .text{
    max-width: 30rem;
    opacity: 0.5;
    padding: 1rem 0;
}

.brand-info .products{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 45rem;
    gap: 1rem;
}


.view-btn{
    background-color: #0D1E33;
    color: white;
    padding: 1rem 1rem;
    border: 1px solid transparent;
}
.view-btn:hover{
    background-color: #F5F5F5;
    color: #0D1E33;
    border-color: #0D1E33;
}

.footer{
    background-color: #F7F7F7;
    padding-top: 4rem;
    padding-bottom: 5rem;
}

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

.footer-content > div{
    flex: 0 0 50%;

}

.footer-content a{
    color: #0D1E33;
    font-weight: bold;
    font-size: 1rem;
}

.footer-nav li a{

}

.footer-content .left{
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 calc(100% - 500px);
}

.footer-content .left > div{
    flex: 0 0 50%;
}

.footer-content .right{
    display: flex;
    justify-content: end;
    flex: 0 0 500px;

}
.footer-content .right > div{

    flex: 0 0 100%;

}

.contact-info li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}


.footer-content .title{
    font-weight: bold;
    font-size: 1.36rem;
    margin-bottom: 1.5rem;
}

.footer .icons{
    flex: 0 0 100% !important;
    display: flex;

    height: fit-content;
    padding-top: 1rem;a
}

.footer-nav li {
    margin-bottom: 1rem;
}

.social-container{

    border-right: 1px solid #0D1E33;
    padding-right: 2rem;
}

.social{
    display: flex;
    gap: 2rem;
}

.social a{
    display: block;
    background-color: white;
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social a svg{
    max-width: 100%;
    max-height: 100%;
}




.payment-container{
    padding-left: 2rem;
}

.payment{
    display: flex;
    gap: 2rem;
}

.payment a{
    display: block;
    background-color: white;
    width: 60px;
    height: 40px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment a img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.map {
    overflow: hidden;
    position: relative;
    padding-top: 47%;
    border-radius: 0.75rem;
}

.map iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.category-list{
    margin-top: 1rem;
}

.parent-categories li{
    padding: 0 0;
}
.parent-categories li a{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0D1E33;
    font-weight: bold;
    border-radius: 0.5rem;
    padding: 1rem 0.5rem;
    /* transition: all 0.3s; */
    font-size: 1rem;
}

.parent-categories li a svg{
    /* transition: all 0.3s; */
    fill: #0D1E33;

}

.parent-categories li a.active{
    color: #FAAB12;
    background-color: #F5F5F5;
}
.parent-categories li a.active svg{
    fill: #FAAB12;

}

.category-list {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
}

.parent-category-container{
    grid-column: span 4 / span 4;
    align-self: start;
    padding-right: 2rem;
    border-right: 2px solid rgba(13, 30, 51, 0.1);
    max-height: calc(100dvh - 230px);
    overflow-y: auto;
}


.subcategories-container{

}

.subcategory-list{
    display: none;
}
.subcategory-list.active{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 2rem;
    align-items: start;
}

.subcategories-container{
    grid-column: span 8 / span 8;
    padding-left: 2rem;
    height: calc(100dvh - 230px);
    overflow-y: auto;
}

.category-list.search-mode .subcategory-list{
    display: none;
}

.category-list.search-mode .subcategory-list.search-active{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 2rem;
    align-items: start;
}

.category-list.search-mode .subcategory-list.search-active .subcategories{
    display: none;
}

.category-list.search-mode .subcategory-list.search-active .subcategories.search-match{
    display: block;
}
.subcategories{
    margin-bottom: 2rem;
}
.subcategories li a{
    display: block;
    color: #0D1E33;
    padding-bottom: 1rem;

}
.subcategories li a h2{
    font-weight: bold;
    margin-bottom: 0.3rem;
}

.subcategories li.subcat-extra{
    display: none;
}

.subcategories.expanded li.subcat-extra{
    display: block;
}

.subcategories li.subcat-toggle{
    padding-bottom: 0;
}

.subcategories-toggle-btn{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #FAAB12;
    font-weight: bold;
    font-size: inherit;
    font-family: inherit;
}

.category-list.search-mode .subcategories li.subcat-toggle{
    display: none;
}

.section-advantages-2{
    margin-top: 4rem;
    padding-bottom: 5rem;
}

.section-advantages-2 .advantage-card{
    padding: 2rem;
}


.section-advantages-2 .advantage-card .content{
    display: flex;
    align-items: center;
}

.section-advantages-2 .advantage-card .content .icon{
    position: relative;
}

.section-advantages-2 .advantage-card .content .icon svg:last-child{
    position: absolute;
    top: 29px;
    left: 36px;
}

.section-advantages-2 div:nth-child(2) .advantage-card .content .icon svg:last-child{

    top: 26px;
    left: 24px;
}

.section-advantages-2 div:nth-child(3) .advantage-card .content .icon svg:last-child{

    top: 28px;
    left: 31px;
}

.section-advantages-2 .advantage-card .content{
    display: flex;
    justify-content: center;
}

.section-advantages-2 .advantage-card .info{
    padding-top: 1rem;
}

.section-advantages-2 .advantage-card .info .title{
    font-weight: bold;
    padding-bottom: 1rem;
    font-size: 1.12rem;
}


.search-results{

    background-color: #F5F5F5;
    position: absolute;
    min-width: 100%;
    top: 25px;
    left: 0;
    border-radius: 0 0 1.5rem 1.5rem;
    padding: 0 1rem 1rem 1rem;
    display: none;
    z-index: -1;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;

}
.search-results .content{
    border-top: 2px solid rgba(13, 30, 51, 0.1);
    height: 100%;
    margin-top: 25px;
}
.search-box.active{
    border-radius: 1.5rem 1.5rem 0 0;
    z-index: 101;
}

.close-search{
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
}
.close-search.active{
    visibility: visible;
    opacity: 1;
}

.result-info{
    margin-top: 1rem;
    font-size: 0.8rem;
}

.search-product-list{
    margin-top: 1rem;
}

.search-product-list li {
    margin-top: 1rem;
}

.search-product-list .item{
    display: flex;
    border-radius: 0.5rem;
    background-color: white;
    color: #0D1E33;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
}

.search-product-list .item .img{
    height: 74px;
    width: 110px;
}

.search-product-list .item .info{
    padding-left: 0.5rem;
}
.search-product-list .item .img img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
}

.search-product-list .item .arrow{
    display: flex;
    align-items: center;
    padding-left: 1rem;
    margin-left: auto;
}
.search-product-list .item .discount{
    position: absolute;
    top: 1px;
    left: 1px;
    background-color: #AC1D1A;
    color: white;
    padding: 0.3rem;
    border-radius: 0.3rem;
    font-weight: bold;
    z-index: 1;
    font-size: 0.87rem;
}
.price{
    font-weight: bold;
    position: relative;
    font-size: 1.37rem;;
}
.price > div:last-child{
    display: flex;
    gap: 0.75rem;
    margin-top: 0.5rem;
    align-items: baseline;
}

.price .discount{
    position: absolute;
    top: -2rem;
    background-color: #AC1D1A;
    color: white;
    padding: 0.3rem;
    border-radius: 0.3rem;
    display: inline-block;
    font-size: 0.87rem;

}

.old-price{
    color: #0D1E33;
    opacity: 0.5;
    display: inline-block;
    position: relative;
    font-size: 1.25rem;
}
.old-price::before{
    height: 1px;
    width: 100%;
    background-color: #0D1E33;
    top: 50%;
}

.search-product-list .item .price{
    margin-top: 0.75rem;
}

.btn-expand{
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: #1492E6;
    font-weight: bold;
    position: relative;
    padding-right: 1rem;
}

.btn-expand svg{
    position: absolute;
    right: 0;

    top: 60%;
    transform: translateY(-50%);
    transition: all 0.2s;

}

.btn-expand.active svg{
    transform: rotateX(180deg) translateY(4px);
}

.search-results .btn-wrapper{
    text-align: center;
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.generic-slider{
    position: relative;
    padding: 0 2.5rem;
    margin: auto;
    max-width: calc(1632px + 2rem);

}

.slider-prev-btn, .slider-next-btn{
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}

.slider-prev-btn{
    left: 0;
}

.slider-next-btn{
    right: 0;
}

.authorization-popup{
    position: relative;
    background-color: #0D1D32;
    border-radius: 16px 0 0 16px;
    padding: 2rem 2rem 2rem;
    display: none;
    z-index: 22;
    width: 420px;
    min-width: 0;
    align-self: stretch;
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
    animation: slideInRight 0.3s ease;
}

.authorization-popup{
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) rgba(255,255,255,0.07);
}
.authorization-popup::-webkit-scrollbar{
    width: 4px;
}
.authorization-popup::-webkit-scrollbar-track{
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
}
.authorization-popup::-webkit-scrollbar-thumb{
    background-color: rgba(255,255,255,0.4);
    border-radius: 4px;
}
.authorization-popup::-webkit-scrollbar-thumb:hover{
    background-color: rgba(255,255,255,0.6);
}

/* Registration 2-step */
.reg-progress-wrap{
    margin-bottom: 0.75rem;
}
.reg-progress-labels{
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}
.reg-lbl{
    font-size: 0.88rem;
    font-weight: 600;
    color: #FAAB12;
    opacity: 0.4;
}
.reg-lbl.active{
    opacity: 1;
}
.reg-progress-track{
    height: 4px;
    background-color: #E6E8EA;
    border-radius: 2px;
    overflow: hidden;
}
.reg-progress-fill{
    height: 100%;
    width: 50%;
    background-color: #FAAB12;
    border-radius: 2px;
    transition: width 0.35s ease;
}
.reg-account-cards{
    display: flex;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.reg-account-card{
    flex: 1;
    border: 2px solid #E6E8EA;
    border-radius: 0.75rem;
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
}
.reg-account-card.selected{
    border-color: #FAAB12;
    background-color: #fffbf2;
}
.reg-card-icon{
    color: #C0C0C0;
    margin-bottom: 0.4rem;
    display: flex;
    justify-content: center;
}
.reg-account-card.selected .reg-card-icon{
    color: #FAAB12;
}
.reg-card-title{
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
}
.reg-account-card.selected .reg-card-title{
    color: #1B2B3F;
}
.reg-card-sub{
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 0.2rem;
}
.reg-account-card.selected .reg-card-sub{
    color: #888;
}
.phone-prefix{
    position: absolute;
    left: 3rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    color: #6B7280;
    pointer-events: none;
    user-select: none;
}
.reg-phone-wrap input{
    padding-left: 5.5rem;
}
.birth-errors{
    display: flex;
    margin-top: 0.25rem;
    margin-bottom: 0.4rem;
}
.birth-errors .reg-error-text{
    flex: 1;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
}
.birth-errors .reg-error-text.visible{
    display: block;
}
.reg-name-row{
    display: flex;
    gap: 1rem;
}
.reg-name-col{
    flex: 1;
    display: flex;
    flex-direction: column;
}
.reg-error-text{
    display: none;
    color: #FF6D6A;
    font-size: 0.72rem;
    padding-left: 0.5rem;
    margin-top: -1.1rem;
    margin-bottom: 0.6rem;
}
.reg-error-text.visible{
    display: block;
}
.reg-birth-wrap{
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #E6E8EA;
    border-radius: 0.5rem;
    padding: 0 0 0 3rem;
}
.reg-birth-wrap .reg-input-icon{
    top: 50%;
    transform: translateY(-50%);
}
.reg-birth-row{
    display: flex;
    flex: 1;
}
.reg-birth-row input{
    flex: 1;
    min-width: 0;
    border: none;
    border-radius: 0;
    padding: 1.17rem 0.5rem;
    background: transparent;
    text-align: center;
}
.reg-birth-row input + input{
    border-left: 1px solid #E6E8EA;
}
.reg-step2-btns{
    display: flex;
    gap: 1rem;
}
.reg-step2-btns .btn{
    flex: 1;
}
.reg-back-btn{
    flex: 0 0 auto;
    min-width: 90px;
}
.reg-input-wrap{
    position: relative;
}
.form-group > .reg-input-wrap{
    padding-bottom: 0;
    margin-bottom: 1.5rem;
}
.form-group > .reg-input-wrap:last-child{
    margin-bottom: 0;
}
.reg-input-wrap .reg-input-icon{
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #FAAB12;
    pointer-events: none;
}
.reg-input-wrap input{
    padding-left: 3rem;
}
.reg-phone-wrap.reg-input-wrap input{
    padding-left: 5.5rem;
}
.reg-birth-wrap .reg-birth-row input{
    padding-left: 0.5rem;
}

.authorization-popup .title{
    display: flex;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 2rem;
}
.auth-popup-logo{
    height: 28px;
    max-width: 100%;
    object-fit: contain;
}



.authorization-popup .content{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) rgba(255,255,255,0.07);
}
.authorization-popup .content::-webkit-scrollbar{
    width: 4px;
}
.authorization-popup .content::-webkit-scrollbar-track{
    background: rgba(255,255,255,0.07);
    border-radius: 4px;
}
.authorization-popup .content::-webkit-scrollbar-thumb{
    background-color: rgba(255,255,255,0.4);
    border-radius: 4px;
}
.authorization-popup .close-btn{
    position: absolute;
    top: 1rem;
    right: 1rem;
}
.authorization-popup .close-btn rect{
    fill: #FAAB12;
}

.address-popup{
    margin: auto;

    position: relative;
    background-color: white;
    border-radius: 1rem;
    padding: 4rem 4rem;
    display: none;
    z-index: 22;
    min-width: 600px;

}

.address-popup .close-btn{
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}

.popup .close-btn{
    cursor: pointer;
}

.authorization-popup .tab-controls{
    display: flex;
}
.authorization-popup .tab-controls > li{
    flex: 0 0 50%;
}
.authorization-popup .tab-controls li:first-child{
    border-right: 1px solid #E6E8EA;
    padding-right: 1rem;
}
.authorization-popup .tab-controls > li:last-child{
    text-align: right;
    padding-left: 1rem;
}
.authorization-popup .tab-controls > li button{
    color: #FAAB12;
    opacity: 0.4;
    font-weight: bold;
    font-size: 1.12rem;
}
.authorization-popup .tab-controls > li button.active{
    opacity: 1;
}

input{
    display: block;
    width: 100%;
    border: 1px solid #E6E8EA;
    border-radius: 0.5rem;
    padding: 1.17rem;
    outline: none;
}

input.error{
    border-color: #FF6D6A;
}

.form-group > div{
    padding-bottom: 0.65rem;
}
.form-group > div:last-child{
    padding-bottom: 0;
}
.reset-pass-btn{
    color: #1492E6;
    font-weight: bold;
}

.tab-container{
    position: relative;
    margin-top: 1rem;
    width: 100%;
    height: 100%;
    transition: all 0.2s;
}

.center-content{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0;
}

.authorization-popup .center-content > div{
    width: 100%;
}
#login-tab,
#register-tab{
    padding: 10px;
}

.second-btn{
    color: white;
    background-color: #0D1E33;

}
.third-btn{
    background-color: #F5F5F5;
    color: #0D1E33;
    border: 1px solid #0D1E33;

}
.second-hover{
    border: 1px solid transparent;
}
.second-hover:hover{
    background-color: #F5F5F5;
    color: #0D1E33;
    border-color: #0D1E33;
}
.authorization-popup .second-btn{
    width: 100%;
    background-color: #FAAB12;
}
.authorization-popup .third-btn{
    border-color: #FAAB12;
    color: #FAAB12;
    background-color: transparent;
}
.authorization-popup .chkb-container{
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}
.authorization-popup .link-privacy{
    color: #FAAB12;
}
.authorization-popup .reset-pass-btn{
    color: #FAAB12;
}
.authorization-popup #register_btn:disabled,
.authorization-popup #reg-next-btn:disabled{
    background-color: #FAAB12;
    opacity: 0.4;
    cursor: not-allowed;
}

.social-auth-divider{
    display: flex;
    align-items: center;
    text-align: center;
    margin: 16px 0 12px;
    color: #999;
    font-size: 13px;
}
.social-auth-divider::before,
.social-auth-divider::after{
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}
.social-auth-divider span{
    padding: 0 12px;
}
.social-auth-btns{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.social-auth-btn{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    background: #fff;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
}
.social-auth-btn:hover{
    background: #f5f5f5;
    border-color: #bbb;
    color: #111;
}

.tab{
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    top: 0;
    transition: all 0.2s;
}
.tab.active{
    opacity: 1;
    visibility: visible;
}


/* The container */
.chkb-container {
    display: block;
    position: relative;
    padding-left: 35px;

    cursor: pointer;
    font-size: 0.7rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding-top: 10px;

}

/* Hide the browser's default checkbox */
.chkb-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;

    border: 3px solid #F5F5F5;
    border-radius: 8px;
}

.link-privacy{
    text-decoration: underline;
    color: #0D1E33;
}





/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.chkb-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.chkb-container .checkmark:after {
    left: 2px;
    top: 2px;
    width: 15px;
    height: 15px;
    background-color: #FAAB12;
    border-radius: 4px;
}

.cart-popup{

    position: relative;
    background-color: white;
    border-radius: 1rem;
    padding: 1rem 1rem;
    display: none;
    z-index: 22;

    min-width: 657px;
    height: 680px;

    flex-direction: column;
}

.hidden{
    visibility: hidden;
    opacity: 0;
}
.visible{
    visibility: visible;
    opacity: 1;
}

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

.popup .top .title{
    font-weight: bold;
}

.cart-popup .bottom{
    margin-top: auto;
}
/* The popup has a fixed height - without its own scroll area a long list
   overflowed it and pushed the buy button off screen (behind the mobile
   bottom menu), so customers with many items couldn't check out. */
.cart-popup .cart-popup-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}
.cart-popup .top,
.cart-popup .bottom{
    flex-shrink: 0;
}
.cart-popup .second-btn{
    width: 100%;
}
.cart-popup .total-price{
    text-align: center;

    padding-bottom: 1rem;
    font-weight: bold;
}
.cart-popup .total-price span{

    font-size: 1.75rem;

}


.cart-product-list{
    margin-top: 1rem;
}

.cart-product-list > li {
    margin-top: 1rem;
}

.cart-product-list .item{
    display: flex;
    border-radius: 0.5rem;
    background-color: white;
    color: #0D1E33;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    align-items: center;
    border: 1px solid #F5F5F5;
}

.cart-product-list .item .product-item-link{
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.cart-product-list .item .quantity{
    margin-left: auto;
}

.cart-product-list .item .buttons{
    margin-left: auto;
}

.cart-product-list .item .img{
    height: 74px;
    width: 110px;
}

.cart-product-list .item .info{
    padding-left: 0.5rem;
    padding-right: 1.5rem;
    max-width: 20rem;
}
.cart-product-list .item .img img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
}

.cart-product-list .item .delete{

    padding-left: 1rem;
}

.cart-product-list .item .buttons{

    display: flex;
    gap: 1rem;
    align-items: center;
}
.cart-product-list .item .discount{
    position: absolute;
    top: 1px;
    left: 1px;
    background-color: #AC1D1A;
    color: white;
    padding: 0.3rem;
    border-radius: 0.3rem;
    font-weight: bold;
    z-index: 1;
}

.cart-product-list .item .price{
    margin-top: 0.5rem;
}

.delete-btn, .cart-btn, .compare-btn{
    border-radius: 0.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delete-btn:hover, .cart-btn:hover, .compare-btn:hover{
    background-color: #F5F5F5;
}

.delete-btn.table:hover{
    background-color: #ffffff;
}

.delete-btn svg, .cart-btn svg, .compare-btn svg{
    fill: #0D1E33;
}

.delete-btn:hover svg{
    fill: #FF6D6A;
}
.cart-btn:hover svg{
    fill: #FAAB12;
}
.compare-btn:hover svg{
    fill: #1492E6;
}

.quantity-changer{
    display: flex;
    flex-wrap: nowrap;

}
.quantity-changer button{
    border-radius: 0.5rem;
    background-color: #F5F5F5;
    flex-shrink: 0;

    text-align: center;
    width: 30px;
    height: 30px;

    padding-bottom: 3px;

}
.quantity-changer .value{
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
    /*padding: 0 10px;*/
    font-size: 28px;
    width: 50px;

}

.compare-selected-btn{
    background-color: #1492E6;
    padding: 1rem;
    width: 100%;
    color: white;
    border: 1px solid transparent;
}
.compare-selected-btn:hover{
    border-color: #1492E6;
    background-color: #F5F5F5;
    color: #1492E6
}


.cabinet-popup{
    padding: 2rem;
    background-color: #F5F5F5;
    border-radius: 1.5rem;

    flex-direction: column;
    height: fit-content;
    min-width: 317px;
}
.cabinet-popup .title{
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
    font-weight: bold;
}

.cabinet-popup .nav{
    margin-top: 1.5rem;
}
.cabinet-popup .nav li{

}
.cabinet-popup .nav  li a{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0D1E33;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s;
    min-height: 54px;
}
.cabinet-popup .nav  li a svg{
    width: 32px;
    fill: #0D1E33;
}

.cabinet-popup .nav li a:hover{
    background-color: white;
    color: #FAAB12;
}
.cabinet-popup .nav li a:hover svg{

    fill: #FAAB12;

}

.cabinet-popup .bottom{
    margin-top: auto;
}
.logout-btn{
    color: #1492E6;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem;
    margin-top: 2rem;
}

.notification-popup{
    background-color: #F7F7F7;
    border-radius: 0.5rem;
    position: fixed;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    box-shadow: 3px 10px 12px rgba(10, 23, 29, 0.06);
    z-index: 999;
    top: 50px;

    transform: translateY(25px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
}
.notification-popup .icon svg{
    display: none;
}
.notification-popup.success .icon #success{
    display: block;
}
.notification-popup .info .description{
    font-size: 0.8rem;
    opacity: 0.6;
    margin-top: 0.5rem;
}
.notification-popup.error .icon #error{
    display: block;
}
.notification-popup .link{
    color: #1492E6;
    font-weight: bold;
}
.notification-popup.view{
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

.section-products{
    margin-top: 2rem;

    padding-bottom: 4rem;
}

.section-products .top{
    display: flex;
    justify-content: space-between;
}
.section-products .top .buttons{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.breadcrumb{
    display: flex;
    gap: 1rem;
}
.breadcrumb li{
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
.breadcrumb li a{

    color: #0D1E33;

}
.dropdown-list{
    position: relative;
}
.dropdown-list .selected{
    display: flex;
    align-items: baseline;
    font-weight: bold;
    gap: 0.3rem;
}
.dropdown-list .options li a{
    color: #0D1E33;
    text-wrap: nowrap;

}
.dropdown-list .options{
    position: absolute;

    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
    background-color: white;
    border-radius: 0.7rem;
    padding: 0.7rem;
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    z-index: 2;
    right: 0;
}
.dropdown-list .options > li{
    padding: 0.35rem 0;
    text-align: right;
}

.dropdown-list .options.visible{
    visibility: visible;
    opacity: 1;

}

.section-products .content{
    display: flex;
    align-items: flex-start;
    margin-top: 2rem;
}

.section-products .product-list{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
}

.section-products .category-filter{
    display: block;

    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
    padding-bottom: 0.5rem;
}
.section-products .category-filter .selected-category{
    color: #FAAB12;
    font-weight: bold;
    display: flex;
    position: relative;
    align-items: center;
}
.selected-category, .selected-category a{
    color: #FAAB12;
}
.selected-category a{
    display: flex;
    align-items: center;

    gap: 0.5rem;
}
.selected-category a .arrow{
    margin-left: auto;
}
.section-products .category-filter .selected-category .arrow{
    margin-left: auto;
    visibility: hidden;
}
.section-products .category-filter .categories{
    margin-top: 1rem;
}
.section-products .category-filter .categories > li{
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 1rem;
}
.section-products .category-filter .categories > li::after{
    background-color: transparent;
}
.section-products .category-filter .categories > li a{
    display: flex;
    align-items: baseline;
    color: #0D1E33;
    justify-content: space-between;
    font-weight: bold;
}
.selected-category svg{
    fill: #FAAB12;

}
.section-products .category-filter.sub-category .selected-category .arrow{

    visibility: visible;
}
.section-products .category-filter.sub-category .categories li a svg{

    visibility: hidden;
}


.section-products .content .left{
    min-width: 360px;
    max-width: 360px;
    padding-right: 2rem;
}
.section-products .content .right{
    border-left: 2px solid rgba(13, 30, 51, 0.1);
    padding-left: 2rem;
    width: 100%;
}

.filter{
    margin-top: 1.5rem;
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
    padding-bottom: 1.5rem;
}
.filter:last-child{
    padding-bottom: 0;
    border-bottom: 0;
}

.filter .title{
    font-weight: bold;
    padding-bottom: 1rem;
}
.price-filter .inputs {
    display: flex;
    gap: 1.5rem;
}
.price-filter .inputs > div:first-child{
    display: flex;
    gap: 0.5rem;
}
.price-filter .separator{
    position: relative;
    width: 10px;
}
.price-filter .separator::before{
    width: 100%;
    height: 2px;
    top: 50%;
    background-color: rgba(13, 30, 51, 0.1);
}
.price-filter input{
    padding: 1rem;
    background-color: #F5F5F5;
}

.attribute-filter .attributes{
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
    display: none;
}
.attribute-filter .attributes  li{
    margin-bottom: 0.75rem;
}

.attribute-filter .chkb-container{
    font-size: var(--default-font-size);
    padding-top: 5px;
}

.filter-toggle-title{
    background: none;
    border: none;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
.filter-toggle-arrow{
    flex-shrink: 0;
    margin-left: 0.75rem;
    transition: transform 0.2s;
}
.filter-toggle-title.expanded .filter-toggle-arrow{
    transform: rotate(180deg);
}
.filter-toggle-title.expanded + .attributes{
    display: block;
}

.filter-groups{
    max-height: 70vh;
    overflow: hidden;
    position: relative;
}
.filter-groups.expanded{
    max-height: none;
    overflow: visible;
}
.filter-groups:not(.expanded)::after{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}
.show-all-filters-btn{
    display: none;
    width: 100%;
    background: none;
    border: none;
    padding: 0.75rem 0;
    cursor: pointer;
    color: #FAAB12;
    font-weight: bold;
    font-size: inherit;
    font-family: inherit;
    text-align: left;
}
.show-all-filters-btn.visible{
    display: block;
}

.section-products .pagination-wrapper{
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}
.section-user-cabinet .pagination-wrapper{
     display: flex;
    justify-content: end;
    margin-top: 2rem;
}
.pagination{
    display: flex;
    align-items: center;


}
.pagination li{
    margin: 0 1rem;
}
.pagination li:first-child{
    margin: 0 0;
}
.pagination li:last-child{
    margin: 0 0;
}

.pagination a{
    color: #0D1E33;
    font-size: 1.3rem;
    font-weight: bold;
}

.pagination a.active{
    color: #FAAB12;
}

.section-user-cabinet{
    margin-top: 2rem;
    padding-bottom: 4rem;
}

.section-user-cabinet .nav{
    margin-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}
.section-user-cabinet .nav li{

}
.section-user-cabinet .nav  li a{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0D1E33;
    padding: 0.5rem;
    min-height: 54px;
    border-radius: 0.5rem;
    transition: all 0.2s;
    border: 1px solid transparent;
}
.section-user-cabinet .nav  li a svg{
    width: 32px;
    fill: #0D1E33;
}

.section-user-cabinet .nav li a:hover{
    background-color: white;
    color: #FAAB12;

}
.section-user-cabinet .nav li a.active{
    color: #FAAB12;
    border-color: #FAAB12;
}
.section-user-cabinet .nav li a.active svg{
    fill: #FAAB12;

}
.section-user-cabinet .nav li a:hover svg{

    fill: #FAAB12;

}

.section-user-cabinet .content{
    display: flex;
}

.section-user-cabinet .content .left{
    display: flex;
    flex-direction: column;
    padding-right: 2rem;
    min-width: 360px;
    border-right: 2px solid rgba(13, 30, 51, 0.1);
}
.section-user-cabinet .content .left .bottom{
    margin-top: auto;
    padding-left: 2rem;
}

.section-user-cabinet .info{
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: #F5F5F5;
    padding: 2rem;

}
.section-user-cabinet > div{
    text-align: center;
}
.section-user-cabinet .info .icon{
    position: relative;
}
.section-user-cabinet .info .icon svg:last-child{
    position: absolute;
    top: 10px;
    left: 16px;
}
.section-user-cabinet .info .name{
    font-weight: bold;
    margin-top: 0.5rem;
}
.section-user-cabinet .info .greating{
    margin-top: 1rem;
}
.section-user-cabinet .info .id{
    margin-top: 2rem;
}

.section-user-cabinet .content .right{
    min-height: 700px;


    width: 100%;
}

.user-personal-info{
    display: flex;
    justify-content: center;
}

.section-user-cabinet .form{
    padding-top: 4rem;
    min-width: 25rem;
}

.form-input{
    position: relative;
    border: 2px solid #E6E8EA;
    border-radius: 0.5rem;
    padding: 0.6rem 2rem;
    width: 100%;
}

.form-input svg{
    fill: #0D1E33;
}

.form-input input{
    border: 0;
    border-radius: 0;
    padding: 0 0;
    padding-top: 1rem;
}
.form-input .edit-icon{
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

}

.form-input .view-pass-icon{
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);



}

.form-input .view-pass-icon svg{
    stroke: #0D1E33;
    opacity: 0.2;

}
.form-input .view-pass-icon.active svg{

    opacity: 1;

}
.form-input-wrapper{
    position: relative;
}
.error-icon{
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;

}
.form-input.password .error-icon{
    right: -26px;
    visibility: visible;
    opacity: 1;
    stroke: #e6e8ea;
}

.form-input.password.error .error-icon{
    stroke: #FF6D6A;
}

.form-input.editable .edit-icon{

    visibility: visible;
    opacity: 1;

}
.form-input.error .error-icon{

    visibility: visible;
    opacity: 1;

}
.form-input .placeholder{
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    padding-left: 2rem;
    align-items: center;
    opacity: 0.5;
    pointer-events: none;
    width: 100%;
    height: 100%;
    text-align: left;
}
.form-input .placeholder.active{

    width: initial;

    height: initial;
    padding-top: 0.2rem;

}

.form-input.focus{
    border-color: #FAAB12;
}
.form-input.error{
    border-color: #FF6D6A;
}
.form-input.error .edit-icon{
    visibility: hidden;
    opacity: 0;
}
.form-input.focus svg{
    fill: #FAAB12;
}

.order-field-error{
    display: block;
    color: #FF6D6A;
    font-size: 12px;
    margin-top: 4px;
    min-height: 16px;
}

.section-user-cabinet .form .form-input{
    margin-bottom: 1.5rem;
}

.profile-phone-prefix{
    position: absolute;
    bottom: 0.45rem;
    left: 0;
    font-size: 0.95rem;
    color: #1B2B3F;
    pointer-events: none;
    user-select: none;
}
.profile-phone-wrap input{
    padding-left: 2.8rem;
}
.profile-birth-label-inner{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}
.profile-birth-row .profile-birth-inputs{
    display: flex;
    gap: 0.75rem;
    padding-top: 1rem;
}
.profile-birth-row .profile-birth-inputs input{
    flex: 1;
    padding-top: 0;
    text-align: center;
    min-width: 0;
}
.profile-birth-row .placeholder{
    position: absolute;
    left: 0;
    top: 0;
}

.section-user-cabinet .center-content{
    flex-direction: column;

}

.section-user-cabinet .right .bottom{
    margin-top: auto;
    width: 100%;
}
.section-user-cabinet .right .bottom .second-btn{
    width: 100%;
}
.section-user-cabinet .right .bottom .third-btn{
    width: 100%;
}

.edit-enabled-btns{
    display: flex;
    display: none;

}
.edit-enabled-btns > li{
    flex: 0 0 50%;

}
.edit-enabled-btns > li:first-child{
    padding-right: 0.5rem;

}
.edit-enabled-btns > li:last-child{
    padding-left: 0.5rem;

}

.user-orders{
    padding-left: 2rem;
}

.table-wrapper{
    overflow-y: hidden;
    overflow-x: auto;
}

.user-orders-filter{
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
}
.user-orders-filter  li{
    border-right: 1px solid rgba(13, 30, 51, 0.2);
    padding: 0 1rem;
    padding-bottom: 0.2rem;
}
.user-orders-filter  li:first-child{

    padding-left: 0;
}
.user-orders-filter  li:last-child{
    border-right: 0;
    padding-right: 0;
}
.user-orders-filter  li a{
    color: #0D1E33;
    opacity: 0.7;
}
.user-orders-filter  li a.active{

    opacity: 1;
    font-weight: bold;
}

.user-orders-table{
    display: grid;


    grid-template-columns: auto auto auto auto auto;
    margin-top: 4rem;
    row-gap: 1rem;
}

.order-card{
    display: contents;
}

.user-orders-table > div{
    color: #0D1E33;
}
.user-orders-table .header{
    opacity: 0.7;
    padding: 0 1rem 0.5rem 1rem;
    position: relative;
}
.user-orders-table .header:first-child{
    text-align: left;
}
.user-orders-table .cell{
    background-color: #F5F5F5;
    /* padding-top: 1rem; */
    /* padding-bottom: 1rem; */
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-orders-table .first-cell{
    border-radius: 0.7rem 0 0 0.7rem;
    text-align: left;
    justify-content: flex-start;
}
.user-orders-table .last-cell{
    border-radius: 0 0.7rem 0.7rem 0;
}
.order-product-list{
    /* font-size: 0.8rem; */
}

.order-product-list > li, .order-product-price-list > li{
    margin-bottom: 0.5rem;
}
.order-product-list > li:last-child, .order-product-price-list > li:last-child{
    margin-bottom: 0;
}

.order-product-price-list{
    /* font-size: 0.8rem; */
}

.user-addreses-table{
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 1rem;
}

.user-address-card{
    display: contents;
}

.user-addreses-table .header{
    opacity: 0.7;
    padding: 0 1rem 0.5rem 1rem;
    position: relative;
}
.user-addreses-table .header:first-child{
    text-align: left;
}
.user-addreses-table .header:nth-child(2){
    justify-content: flex-start;
    text-align: left;
}
.user-addreses-table .header.last{
    text-align: right;
}

.user-addreses-table .cell{
    background-color: #F5F5F5;
    /* padding-top: 1rem; */
    /* padding-bottom: 1rem; */
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-addreses-table .first-cell{
    border-radius: 0.7rem 0 0 0.7rem;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
}
.user-addreses-table .cell.address{
    justify-content: flex-start;
    text-align: left;
}
.user-addreses-table .last-cell{
    border-radius: 0 0.7rem 0.7rem 0;
    justify-content: flex-end;
}

.user-addreses-table .chkb-container{
    padding-top: 0;
    padding-left: 0;
    width: 25px;
    height: 25px;
}
.user-addreses-table .checkmark{
    border-color: #868E99;
}

.user-addreses-table .chkb-container input:checked ~ .checkmark {
    border-color: #0D1E33;
}

.user-passwords{
    display: flex;
    justify-content: center;
}
.user-passwords .second-btn{
    width: 100%;
}

.user-bank-cards{
    padding-left: 2rem;
}

.user-bank-card-table{
    display: grid;
    grid-template-columns: auto auto auto auto;
    row-gap: 1rem;
}

.user-bank-card-card{
    display: contents;
}

.user-bank-card-table .header{
    opacity: 0.7;
    padding: 0 1rem 0.5rem 1rem;
    position: relative;
}
.user-bank-card-table .header:first-child{
    text-align: left;
}

.user-bank-card-table .header.last{
    text-align: right;
}

.user-bank-card-table .cell{
    background-color: #F5F5F5;
    /* padding-top: 1rem; */
    /* padding-bottom: 1rem; */
    padding: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.user-bank-card-table .cell.bank-card{
    padding: 0 1rem 0 1rem;
    display: flex;
    gap: 0.5rem;
}
.user-bank-card-table .first-cell{
    border-radius: 0.7rem 0 0 0.7rem;
    text-align: left;
    justify-content: flex-start;
    align-items: center;
}

.user-bank-card-table .last-cell{
    border-radius: 0 0.7rem 0.7rem 0;
    justify-content: flex-end;
}

.user-bank-card-table .chkb-container{
    padding-top: 0;
    padding-left: 0;
    width: 25px;
    height: 25px;
}
.user-bank-card-table .checkmark{
    border-color: #868E99;
}

.user-bank-card-table .chkb-container input:checked ~ .checkmark {
    border-color: #0D1E33;
}

.delete-confirm-popup{
    padding: 2rem;
    border-radius: 1.5rem;
    background-color: #F5F5F5;
    position: fixed;
    z-index: 30;
    bottom: 4rem;
    left: 50%;
    display: none;
}

.delete-confirm-popup .icon{
    display: flex;
    justify-content: center;
}
.delete-confirm-popup .icon button{
    border-radius: 0.5rem;
    background-color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-group{
    display: flex;


}
.btn-group > li{
    flex: 0 0 50%;
}
.btn-group > li:first-child{
    padding-right: 0.5rem;
}
.btn-group > li:last-child{
    padding-left: 0.5rem;
}
.btn-group .btn{
    width: 100%;

}

.delete-confirm-popup .text{
    text-align: center;
    padding: 1rem 0;
}
.delete-confirm-popup .card-number{
    text-align: center;
    opacity: 0.5;
    margin-bottom: 1rem;
}

.section-product{
    margin-top: 2rem;
}
.section-product .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 2rem;
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
}
.section-product .product-id{
    opacity: 0.3;
}
.section-product .content{
    margin-top: 2rem;
}
.section-full-description{
    margin-top: 2rem;
    padding-bottom: 2rem;
}
.section-full-description .full-description-title{
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #222;
}
.section-full-description .full-description-body{
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
    width: calc(100% - 450px);
}
.section-full-description .full-description-body ul,
.section-product .specifications .product-short-description ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.section-full-description .full-description-body ol,
.section-product .specifications .product-short-description ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
}
.section-full-description .full-description-body li,
.section-product .specifications .product-short-description li {
    margin-bottom: 0.25rem;
}
.section-similar-products{
    margin-top: 2rem;
    padding-bottom: 4rem;
}
.section-similar-products .product-list{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.product-thumb-slider{
    height: 100%;
}

.section-product .content{
    display: flex;

    padding-bottom: 4rem;
}
.section-product .content > div{

}
.section-product .content > div:first-child{
    flex: 0 0 40%;
    width: 40%;
    padding-right: 2rem;
    margin-right: 2rem;
    position: relative;
}
.section-product .content > div:first-child::after{
    display: none;
}




.product-gallery-wrapper{
    position: relative;
    padding-top: 66%;

}

.product-gallery{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.product-gallery > div:first-child{
    flex: 0 0 25%;
    width: 25%;
    padding-right: 1.7rem;
    height: 100%;
    position: relative;
}

.product-gallery > div:last-child{
    flex: 0 0 75%;
    width: 75%;
    height: 100%;
    padding-left: 1rem;
    position: relative;
}

.image-zoom-container{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    margin-left: 2rem;
    background: #F7F7F7;
    border-radius: 0.5rem;
    overflow: hidden;
    display: none;
    z-index: 100;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    background-repeat: no-repeat;
}

.image-zoom-container.active{
    display: block;
}

.zoom-cursor-square{
    position: absolute;
    border: 2px solid #1492e6;
    background: rgba(20, 146, 230, 0.1);
    pointer-events: none;
    z-index: 10;
    display: none;
    cursor: none;
}

@media (max-width: 768px){
    .image-zoom-container,
    .image-zoom-container.active,
    .zoom-cursor-square{
        display: none !important;
    }
}

.galery-slide{
    position: relative;
    border-radius: 0.5rem;
}

.img-zoom-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.galery-slide img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.product-thumb-slider{
    overflow: hidden;
    border-radius: 0.5rem;
}

.product-galery-slider{
    overflow: hidden;
    border-radius: 0.5rem;
}

.thumb-slide{
    position: relative;

    background-color: #F7F7F7;
    border-radius: 0.5rem;
    border: 1px solid transparent;
}

.thumb-slide img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
    top: 0;
}
.swiper-scrollbar{
    opacity: 1 !important;
}

.swiper-scrollbar.swiper-scrollbar-vertical, .swiper-vertical>.swiper-scrollbar {
    position: absolute;
    left: var(--swiper-scrollbar-left,auto);
    right: var(--swiper-scrollbar-right,4px);
    top: var(--swiper-scrollbar-sides-offset,1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size,2px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%));
}

.swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset,1%);
    bottom: var(--swiper-scrollbar-bottom,-2px);
    top: var(--swiper-scrollbar-top,auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size,2px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%));
}

.swiper-scrollbar-drag {
    height: 100%;
    width: 100%;
    position: relative;
    background: #0D1E33;
    border-radius: var(--swiper-scrollbar-border-radius,10px);
    left: 0px;
    top: 0;
}



.swiper-pagination-bullet {

    background: #fff;
    opacity: 0.4;
}
.swiper-pagination-bullet-active {
    opacity: 1;

}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 7px;
}

.swiper-pagination {
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
    padding-top: 2rem;
    min-height: 48px;
}
.swiper-pagination-lock {
    display: block;
}
.swiper-pagination .swiper-pagination-bullet{
    background: #0D1E33;
    opacity: 0.2;
}
.swiper-pagination .swiper-pagination-bullet-active{

    opacity: 1;
}

.product-thumb-slider .swiper-slide-thumb-active {
    border-color: #FAAB12;
}



.brand-navigation{
    overflow: hidden;
}
.brand-navigation-swiper{
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.brand-navigation .swiper-slide{
    height: initial;
    width: initial;
}

.brand-categories .swiper-slide{
    height: initial;
    width: initial;
}
.section-product .specifications{
    padding-left: 2rem;
    padding-right: 2rem;
    flex: 0 0 calc(60% - 450px) !important;
    display: flex;
    justify-content: flex-start;
}

.section-product .buy-content{
    flex: 0 0 450px;
}

.section-product .specifications .title{
    font-weight: bold;
}
.section-product .specifications .product-brand-link{
    display: inline-block;
    margin-bottom: 0.6rem;
}
.section-product .specifications .product-brand-logo{
    max-height: 70px;
    max-width: 70px;
    object-fit: contain;
}
.section-product .specifications .product-brand-name{
    font-weight: bold;
    font-size: 0.8rem;
    color: #0d1e33;
}
.section-product .specifications .product-brand-link:hover .product-brand-name{
    text-decoration: underline;
}
.section-product .specifications .short-desc-title{
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}
.section-product .specifications .product-short-description{
    font-size: 0.95rem;
    line-height: 1.6;
}

.section-product .specifications .product-spec-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.section-product .specifications .product-spec-list li{
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(13, 30, 51, 0.08);
}
.section-product .specifications .product-spec-list li:last-child{
    border-bottom: none;
    padding-bottom: 0;
}
.section-product .specifications .product-spec-list li:first-child{
    padding-top: 0;
}
.section-product .specifications .product-spec-list .spec-icon{
    flex: 0 0 20px;
    display: flex;
}
.section-product .specifications .product-spec-list .spec-label{
    color: #7a8794;
}
.section-product .specifications .product-spec-list .spec-value{
    color: #0D1E33;
    font-weight: bold;
    margin-left: auto;
    text-align: right;
}

.section-product .specifications .wrapper{
    height: 100%;
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
    position: relative;
    flex: 0 0 100%;
}
.section-product .specifications .wrapper .btn-wrapper{
    position: absolute;
    bottom: -3rem;
}

.section-similar-products .section-title{
    font-size: 1.12rem;
}

.product-attributes{
    margin-top: 2rem;
    width: 100%;


}

.product-attributes li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.product-attributes li span:last-child {
    font-weight: bold;
}

.product-buy-section{
    background-color: #F5F5F5;
    border-radius: 1rem;

    height: 100%;
    padding: 4rem 2rem 2rem 2rem;


}

.product-buy-section .btn-group {
    margin-top: 2rem;
}

.product-buy-section .price > div:last-child {
    font-size: 2.06rem;
    align-items: baseline;


}

.product-buy-section .price > div:last-child .old-price {
    font-size: 1.3rem;


}

.btn-compare{
    flex-direction: column;
    gap: 0.5rem;
    background-color: white;
    padding: 0.8rem;
    border-radius: 1rem;
}
.btn-favorites{
    flex-direction: column;
    gap: 0.5rem;
    background-color: white;
    padding: 0.7rem;
    border-radius: 1rem;
}

.add-to-cart-btn-wrapper{
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;

}
.add-to-cart-btn-wrapper .btn, .buy-btn-wrapper .btn{
    width: 100%;

    border-radius: 1rem;
}
.add-to-cart-btn-wrapper .quantity-changer{
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    background-color: white;
    border: 1px solid #FAAB12;
    border-radius: 1rem;

    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;

}
.add-to-cart-btn-wrapper .quantity-changer .value{

    color:  #FAAB12;


}
.add-to-cart-btn-wrapper .quantity-changer.visible{
    visibility: visible;
    opacity: 1;

}

.product-title{
    font-weight: bold;
    padding-top: 2rem;
    max-width: 30rem;
    font-size: 1.12rem;
}

.section-buy-personal-info{
    margin-top: 4rem;
    padding-bottom: 4rem;
}
.section-buy-personal-info .content{
    display: flex;
}

.section-buy-personal-info .content > div:first-child{
    flex: 0 0 66.6%;
}
.section-buy-personal-info .content > div:last-child{
    flex: 0 0 33.3%;
    padding-left: 4rem;
}

.buy-progress-wrapper .icons {
    display: flex;
    width: 100%;
}
.buy-progress-wrapper .icons > li{
    flex: 0 0 33.3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}
.buy-progress-wrapper .icons > li:first-child{

    align-items: start;
}

.buy-progress-wrapper .icons > li:last-child{

    align-items: end;
}

.buy-progress-wrapper .icons > li.done{
    opacity: 0.3;
}


.buy-progress-bar{
    margin-top: 1rem;
    position: relative;
}

.buy-progress-bar .progress{
    overflow: hidden;
    height: 3px;
    width: 100%;
    position: relative;
}

.buy-progress-bar .progress::before{
    content: '';
    width: 100%;
    height: 100%;
    background: #FFF;
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(250, 171, 18, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(250, 171, 18, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(250, 171, 18, 1) 50%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=1);
    transform: translateX(-33%);
    transition: all 0.3s;
}

.progress-wrapper{
    position: absolute;
    width: 100%;
    top: 11px;
    z-index: -1;
}


.buy-progress-steps{
    display: flex;
    justify-content: space-between;
}
.buy-progress-steps > li{
    border: 50%;
    width: 25px;
    height: 25px;
    background-color: #FAAB12;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.buy-progress-steps > li svg{
    position: absolute;
    width: 23px;
    height: 23px;
    visibility: hidden;
}

.buy-progress-steps > li.done span{

    visibility: hidden;
}

.buy-progress-steps > li.done svg{

    visibility: visible;
}

.arrow-bar{
    position: relative;
    height: 10px;
    margin-top: 4px;
}
.arrow-bar span{
    position: absolute;
    padding: 0 7px;
    display: block;
    transition: all 0.3s;
}

.buy-progress-bar.step-2 .progress::before{
    transform: translateX(0%);
}
.buy-progress-bar.step-2 .arrow-bar span{
    left: 50%;
    transform: translateX(-50%);
}

.buy-progress-bar.step-3 .progress::before{
    transform: translateX(33%);
}
.buy-progress-bar.step-3 .arrow-bar span{
    left: 100%;
    transform: translateX(-100%);
}

.section-buy-personal-info .inputs-container{
    margin-top: 0.5rem;
    border: 2px solid #E6E8EA;
    border-radius: 1rem;
    padding: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.section-buy-personal-info .inputs-container div > .title{
    font-weight: bold;
    text-align: center;
    font-size: 1.12rem;
}
.section-buy-personal-info .form{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.cart-total-info{
    background-color: #F5F5F5;
    border-radius: 1rem;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
}
.cart-total-info .bottom{
    margin-top: auto;
}
.cart-total-info .bottom .btn{
    width: 100%;
}

.cart-total-detail{

}

.cart-total-detail li{
    margin-bottom: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-total-detail li span:last-child{
    font-weight: bold;
    text-wrap: nowrap;
}

.cart-total-detail li:last-child{
    border-top: 2px solid rgba(13, 30, 51, 0.1);
    padding-top: 2rem;
}

.cart-total-detail li.discount{
    color: #83C977;
}

textarea{
    border: 2px solid #E6E8EA;
    border-radius: 0.5rem;
    padding: 1rem;
    width: 100%;
    outline: 0;
}

.map-search{
    position: relative;
    padding-top: 45%;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-top: 0.5rem;
}
#map{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.user-addreses{
    padding: 2rem 0;
}
.user-addreses .title{
    display: flex;
    align-items: center;
    gap: 0.5rem;

}
.user-addreses .title span{
    opacity: 0.5;
}

.address-list{
    margin-top: 1rem;
}
.address-list li {
    margin-bottom: 1rem;
}
.address-list li a{
    color: #0D1E33;
    font-weight: bold;
}
.address-popup .subtitle{
    margin-top: 1rem;
}

.address-popup .btn-group{
    margin-top: 1rem;
}
.address-popup .comment{
    margin-top: 1rem;
}

.section-payment .inputs-container{
    background-color: #F5F5F5;
    border: 0;
    display: block;
    padding: 1rem 1rem 2rem 1rem;
}
.section-payment .inputs-container > .title{
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-payment .selected-address{
    margin-top: 0.5rem;
}


.cart-products{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.delete-from-cart{
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 10;
}

.product-item .quantity-changer{
    margin-top: 1rem;
}

.cart-total-info .padding{
    padding: 0 0.5rem;
}
.cart-total-info .title{
    margin-top: 1rem;
}

.vaucher .vaucher-input{
    margin-top: 0.5rem;
}

.vaucher-input{
    display: flex;


}
.vaucher-input {
    border: 2px dashed #83C977;
    border-radius: 0.7rem;
    padding-right: 1rem;
    position: relative;
}
.vaucher-input input{
    height: 100%;
    border: 0;
    background-color: transparent;
    font-weight: bold;
    padding: 1rem;
}
.vaucher-input button{
    font-weight: bold;
}
.vaucher-input.error{
    border-color: #FF6D6A;
}

.vaucher-input .error-icon{
    right: -26px;

}
.vaucher-input.error .error-icon{
    visibility: visible;
    opacity: 1;


}

.vaucher-input .success-icon {
    position: absolute;
    right: -26px;
    top: 50%;
    transform: translateY(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.vaucher-input.success .success-icon {
    visibility: visible;
    opacity: 1;
}

.bank-selector-container{
    margin-top: 1rem;
}

.bank-selector{
    margin-top: 0.5rem;
}
.bank-selector li {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 1rem;
    border: 1px solid #E6E8EA;
    border-radius: 0.7rem;

    margin-bottom: 1rem;
    cursor: pointer;
    height: 70px;
}
.bank-selector li .check{
    width: 15px;
    height: 15px;
    border-radius: 3px;
    background-color: #FAAB12;
    margin-left: auto;
    visibility: hidden;
}
.bank-selector li.selected{

    border-color: #FAAB12;
}
.bank-selector li.selected .check{

    visibility: visible;
}

.bank-selector-container .chkb-container{
    font-size: 1rem;
    padding-bottom: 10px;
    padding-top: 2px;
}
.bank-selector-container .checkmark{
    border-color: #0D1E33;
}
.bank-selector-container .chkb-container input:checked ~ .checkmark {
    border-color: #E6E8EA;
}

.pay-btn{
    width: 100%;
    margin-top: 1rem;
}

.separator-or{
    display: flex;
    justify-content: space-between;
    padding: 2rem 0;

}
.separator-or div{
    width: calc(50% - 20px);
    position: relative;
}
.separator-or div:first-child{

}

.separator-or div:first-child::before{
    content: '';
    width: 100%;
    height: 2px;
    background-color: rgba(13, 30, 51, 0.1);
    top: 50%;
}
.separator-or div:last-child::before{
    content: '';
    width: 100%;
    height: 2px;
    background-color: rgba(13, 30, 51, 0.1);
    top: 50%;
}
.separator-or div:nth-child(2){
    display: flex;
    width: 20px;
    text-align: center;
}

.drop-down-list-wrapper{
    position: relative;
}
.drop-down-list-wrapper .selected{
    padding: 1rem;
    background-color: #0D1E33;
    border-radius: 0.75rem;

    color: white;
    position: relative;
    width: 100%;
    height: 70px;
}
.drop-down-list-wrapper .selected svg{
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s;

}

.drop-down-list-wrapper .selected.active svg{
    transform: rotateX(180deg) translateY(4px);
}
.drop-down-list-wrapper .options{
    position: absolute;
    background-color: white;
    width: 100%;
    padding: 1rem;
    box-shadow: 0 5px 6px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 1rem 1rem;
    margin-top: 5px;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s;
    z-index: 1;
    max-height: 340px;
    overflow-y: auto;
}
.drop-down-list-wrapper .options li.city-search-item{
    position: sticky;
    top: -1rem;
    background-color: white;
    padding-top: 0.5rem;
    margin-bottom: 0.75rem;
}
.drop-down-list-wrapper .options li.city-search-item input{
    width: 100%;
    border: 1px solid #eee;
    background-color: #F5F5F5;
    border-radius: 1.5rem;
    padding: 0.75rem 1.25rem;
    outline: none;
    color: #0D1E33;
    font-size: 0.95rem;
}
.drop-down-list-wrapper .options li{
    margin-bottom: 1rem;
}
.drop-down-list-wrapper .options li:last-child{
    margin-bottom:0;
}
.drop-down-list-wrapper .options li a{
    display: flex;
    align-items: center;
    color: #0D1E33;
    gap: 1rem;
}
.drop-down-list-wrapper .option-content{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.drop-down-list-wrapper .option-content.center{
    justify-content: center;
}
.drop-down-list-wrapper .options.visible{

    visibility: visible;
    opacity: 1;
}


.address-popup .drop-down-list-wrapper{
    margin-bottom: 1rem;
}
.address-popup .drop-down-list-wrapper .selected {
    padding: 0 1rem;
    background-color: white;
    border-radius: 0.5rem;
    color: #0D1E33;
    position: relative;
    border: 1px solid #E6E8EA;
    height: 58px;
}

.address-popup .drop-down-list-wrapper .option-content.center {
    justify-content: initial;
}

.nazil-nazil-btn{
    width: 100%;
    border: 1px solid #0D1E33;
    padding: 0 1rem;
    margin: 1rem 0;
    justify-content: flex-start;
}

.bog-bnpl-btn{
    border-color: #6c12d1;
    gap: 1.2rem;
}

.bog-bnpl-btn .img{
    flex-shrink: 0;
}

.bog-bnpl-btn .img:not(.bog-bnpl-logo){
    position: relative;
    padding-right: 1.2rem;
}

.bog-bnpl-btn .img:not(.bog-bnpl-logo)::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 32px;
    background-color: #6c12d1;
}

.bog-bnpl-btn .img.bog-bnpl-logo{
    width: 170px;
    height: 50px;
}

.bog-bnpl-btn .img.bog-bnpl-logo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.buy-company-btn{
    background-color: #FF9085;

    color: white;
    width: 100%;
}

.faq-header-wrapper{
    position: relative;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.faq-header{
    position: relative;
    background: #E0E0E0;
    background: -webkit-linear-gradient(90deg, rgba(224, 224, 224, 0.55) 0%, rgba(255, 255, 255, 1) 100%);
    background: -moz-linear-gradient(90deg, rgba(224, 224, 224, 0.55) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(90deg, rgba(224, 224, 224, 0.55) 0%, rgba(255, 255, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#E0E0E0", endColorstr="#FFFFFF", GradientType=1);
    border-radius: 0.75rem;
    height: 158px;
    display: flex;
    align-items: center;
    padding-left: 350px;
}

.section-faq{
    margin-top: 2rem;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

.section-faq .img {
    position: absolute;
    top: -26px;
    left: -17px;
}
.faq-header .title div:nth-child(1){
    font-weight: bold;
    font-size: 1.5rem;
}
.faq-header .title div:nth-child(2){
    font-weight: bold;
    padding: 0.5rem 0;
}

.section-faq .content{
    display: flex;
    margin-top: 2rem;
}

.section-faq .content > div:first-child{
    min-width: 350px;
}

.section-faq .content > div:last-child{
    width: 100%;
}

.faq-categories li a{
    color: #0D1E33;
}
.faq-categories li a.active{
    font-weight: bold;
}
.faq-categories li {
    margin-bottom: 2rem;
}

.faq-list{
    display: none;
}
.faq-list.active{
    display: block;
}
.faq-list li{
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.faq-list .question{
    font-weight: bold;
    position: relative;
    padding-bottom: 1rem;
    cursor: pointer;
    padding-right: 38px;
}
.faq-list .question button{
    position: absolute;
    right: 4px;
    top:0;

    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #F5F5F5;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    transition: all 0.2s;
}
.faq-list .answer{
    opacity: 0.5;
    display: none;
    line-height: 1.2;
}

.faq-list li.active{
    border-color: #FAAB12;
}
.faq-list li.active button{
    border-color: #FAAB12;
    color: #FAAB12;
}


.section-blogs{
    margin-top: 2rem;
    padding-bottom: 4rem;
}


.last-blog{
    display: grid;
    grid-template-columns: minmax(20rem, 40rem) minmax(20rem, 40rem);
}
.last-blog > div{
    flex: 0 0 50%;
}
.last-blog > div:last-child{
    padding-left: 2rem;
    display: flex;
    flex-direction: column;
}
.last-blog > div:last-child .bottom{
    margin-top: auto;
}
.last-blog > div:last-child .bottom .btn{
    width: 100%;
}
.last-blog .img{
    overflow: hidden;
    border-radius: 1rem;
    padding-top: 60%;
}
.last-blog .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
}

.last-blog .title{
    font-weight: bold;
    font-size: 2rem;
    margin-top: 2rem;
}
.last-blog .text{
    padding: 1rem 0;
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
}
.last-blog .date{
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.blog-categories{
    display: flex;
    gap: 1rem;
}
.blog-categories-wrapper{
    min-height: 3.5rem;
    display: flex;
    align-items: flex-start;
}
.blog-categories li a{
    background-color: #F5F5F5;
    border-radius: 0.75rem;
    color: #0D1E33;
    padding: 1rem;
    display: block;
}


.blog-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 4rem;
    row-gap: 6rem;
}
.blog-list > div:nth-child(odd){
    padding-right: 3rem;
    border-right: 1px solid #E6E8EA;
}

.blog-list > div:nth-child(even){
    padding-left: 3rem;

}

.blog-item{

}
.blog-item .content{
    display: flex;
    margin-top: 1rem;
}
.blog-item .content > div{
    flex: 0 0 50%;
}
.blog-item .content > div:first-child{
    padding-right: 1rem;
}
.blog-item .content > div:last-child{
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
}
.blog-item .content > div:last-child .bottom{
    margin-top: 1rem;
}
.blog-item .content > div:last-child .bottom .btn{
    width: 100%;
}
.blog-item .img{
    padding-top: 60%;
    overflow: hidden;

}
.blog-item .img img{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem;

}

.blog-item .title{
    font-weight: bold;
    font-size: 1.2rem;
}

.blog-item  .text {
    padding-top: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.section-single-blog{
    margin-top: 2rem;
    padding-bottom: 4rem;
}

.blog-content{
    max-width: 705px;
    margin: auto;
}

.cke-image {
    position: relative;
    border-radius: 0.75rem;
    overflow: hidden;
    margin: 1rem auto;
}

.cke-image img {
    top: 0;
    left: 0;
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

.blog-content .title{
    font-weight: bold;
    font-size: 2.18rem;
    margin-top: 2rem;
}
.blog-content .blog-categories{
    margin-top: 2rem;
}
.section-single-blog .text{
    margin-top: 2rem;
    padding-bottom: 4rem;
}
.blog-content .img{
    margin-top: 1rem;
    border-radius: 1rem;
    overflow: hidden;
}

.blog-content .img  img {
    position: relative;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.blog-content .date{
    text-align: right;
    margin-top: 2rem;
}


.section-compare{
    margin-top: 2rem;
    padding-bottom: 4rem;
}

.section-compare .top {
    display: flex;
    justify-content: space-between;

}

.table-compare-wrapper{
    margin-top: 2rem;
}

table{
    width: 100%;
}

.table-compare tr{
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
}
.table-compare.single-product tr{
    border-bottom: 0;
}

.table-compare tr:nth-child(1){
    border-bottom: 0;
}
.table-compare tr:nth-child(2){
    border-bottom: 0;
}
.table-compare tr.last, table tr.title{
    border-bottom: 0;
}


.table-compare tr td {
    border-right: 2px solid rgba(13, 30, 51, 0.1);
    width: 25%;
    vertical-align: bottom;
    font-weight: bold;
    padding: 1rem;
    text-align: center;
}
.table-compare.single-product tr td {
    border-right: 1px solid rgba(13, 30, 51, 0.1);

}
.table-compare.single-product tr td {

    border-bottom: 1px solid rgba(13, 30, 51, 0.1);

}

.table-compare.single-product tr td.last {

    border-bottom: 0;

}
.table-compare.single-product tr td.title {

    border-bottom: 0;

}
.table-compare tr td:first-child {
    font-weight: initial;
    text-align: initial;
}
.table-compare tr td svg {
    display: block;
    margin: 0 auto;
}
.table-compare tr td:last-child {
    border-right: 0;
}

.table-compare tr:nth-child(1) td{
    border: 0;
    font-weight: initial;
    text-align: initial;
    padding: 0 0.5rem 1rem 0.5rem;

}
.table-compare tr:nth-child(1) td:first-child{
    padding-left: 0;
}
#table-attributes tr:nth-child(1) td:first-child{
    padding-left: 1rem;
}
.table-compare tr:nth-child(1) td:last-child{
    padding-right: 0;
}

.table-compare tr td.title{
    background-color: #F5F5F5;
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    font-weight: bold;
    text-align: initial;
}

.clear-compare-btn{
    border: 1px solid #F5F5F5;
    padding: 2rem;
    width: 100%;
    font-weight: bold;
    color: #0D1E33
}

.clear-compare-btn svg{
    fill: #0D1E33;
}

.clear-compare-btn:hover{
    border-color: #FF6D6A;
    background-color: #F5F5F5;
    color: #FF6D6A;
}
.clear-compare-btn:hover svg{
    fill: #FF6D6A;
}

.compare-item {
    display: flex;
    border-radius: 0.5rem;
    background-color: white;
    color: #0D1E33;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    align-items: center;
    border: 1px solid #F5F5F5;
}
.compare-item .img {
    height: 74px;
    width: 110px;
    flex: 0 0 110px;
}
.compare-item .discount {
    position: absolute;
    top: 1px;
    left: 1px;
    background-color: #AC1D1A;
    color: white;
    padding: 0.3rem;
    border-radius: 0.3rem;
    font-weight: bold;
    z-index: 1;
}
.compare-item  .img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
}
.compare-item .info {
    padding-left: 0.5rem;
    padding-right: 1.5rem;
    max-width: 20rem;
}
.compare-item .buttons {
    display: flex;
    gap: 1rem;
}
.compare-item .price {
    margin-top: 0.5rem;
}

.table-compare-wrapper{
    overflow-x: auto;
}

.compare-blank{
    display: flex;
    justify-content: center;
    padding: 4rem;
}
.compare-blank .img svg:last-child{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-60%) translateY(-50%);
}
.compare-blank .title{
    color: #FAAB12;
    font-weight: bold;
    font-size: 1.2rem;
    text-align: center;
    padding: 1rem 0;
}
.compare-blank .text{

    text-align: center;

}

.discount-card{
    width: 497px;
    height: 270px;

    overflow: hidden;
    border-radius: 1.2rem;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    bottom: 2rem;
    z-index: 600;

    background-color: white;
    justify-content: center;
    align-items: center;
    color: white;
    box-shadow: 0px 8px 15px rgba(10, 23, 29, 0.25);
    display: none;
}
.discount-card .gradient{
    background: #0D1E33;
    background: -webkit-linear-gradient(180deg, rgba(13, 30, 51, 0.55) 0%, rgba(13, 30, 51, 0) 100%);
    background: -moz-linear-gradient(180deg, rgba(13, 30, 51, 0.55) 0%, rgba(13, 30, 51, 0) 100%);
    background: linear-gradient(180deg, rgba(13, 30, 51, 0.55) 0%, rgba(13, 30, 51, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0D1E33", endColorstr="#0D1E33", GradientType=0);
    position: absolute;
    width: 100%;
    height: 90%;
    pointer-events: none;
    top: 0;
    left: 0;
}
.discount-card .close-btn{
    position: absolute;
    z-index: 3;
    top: 15px;
    right: 15px;
}
.discount-card .content{
    position: relative;
    z-index: 3;
    max-width: 20rem;
}
.discount-card .content > div{
    text-align: center;
}
.discount-card .discount{
    font-weight: bold;
    font-size: 3rem;

}
.discount-card .text{
    padding: 1rem 0;
}
.discount-card .button{
    padding: 1rem;
    border: 1px solid white;
    border-radius: 2rem;
    display: inline-block;
    width: fit-content;
    font-size: 1.5rem;
}
.discount-card > div:last-child{
    text-align: center;
}

.buy-company-popup{
    background-color: white;
    padding: 4rem 5rem;
    position: relative;
    border-radius: 1rem;
}
.buy-company-popup .close-btn{
    position: absolute;
    right: 1rem;
    top: 1rem;

}
.buy-company-popup .title{
    font-weight: bold;
    padding-bottom: 1rem;
}

.buy-company-popup .form-group .btn{
    width: 100%;
}
.buy-company-popup .form-group{
    max-width: 18rem;
}

button:disabled{
    opacity: 0.3;
    cursor: initial;
}

.buy-company-popup .form-group > div:nth-child(2){
    padding-bottom: 3rem;
}



.buy-company-popup .form-group > div:nth-child(4){
    padding-bottom: 4rem;
    font-size: 0.8rem;
}
.buy-company-popup .form-group > div:nth-child(5){
    padding-bottom: 3rem;
}


.order-success-popup{
    background-color: white;
    padding: 4rem 5rem;
    position: relative;
    border-radius: 1rem;
}
.order-success-popup .close-btn{
    position: absolute;
    right: 1rem;
    top: 1rem;

}

.order-success-popup .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.order-success-popup .title{
    color: #FAAB12;
    font-weight: bold;
    padding-top: 2rem;
    font-size: 1.2rem;
}
.order-success-popup .text{
    padding: 1rem 0;
}


.my-orders-link{
    margin-top: 4rem;
    text-align: center;

}

.my-orders-link > div:first-child{
    opacity: 0.3;
}
.my-orders-link > div:last-child{
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

.my-orders-link-btn{
    background-color: #F5F5F5;
    color: #0D1E33;
    padding: 0.5rem 2rem;

}

.my-orders-link-btn svg{
    fill: #0D1E33;
}
.my-orders-link-btn:hover{
    color: #FAAB12;
}
.my-orders-link-btn:hover svg{
    fill: #FAAB12;
}

.order-success-popup.company .my-orders-link{
    display: none;
}

.section-delivery-address .address{
    margin-top: 1rem;
}
.section-delivery-address .comment{
    margin-top: 1rem;
}
.section-delivery-address .delivery-address-fields{
    margin-top: 1.5rem;
}
.section-delivery-address .delivery-address-fields.is-hidden{
    display: none;
}
.section-delivery-address .inputs-container .delivery-address-fields > .title{
    text-align: left;
    font-size: 0.875rem;
    font-weight: bold;
    margin-bottom: 0;
}
.section-delivery-address .saved-addresses select{
    width: 100%;
    border: 2px solid #E6E8EA;
    border-radius: 0.5rem;
    padding: 1rem 2.5rem 1rem 1rem;
    font-size: 16px; /* below 16px iOS Safari zooms the page on focus */
    color: #0D1E33;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230D1E33' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    text-overflow: ellipsis;
    cursor: pointer;
}
.section-delivery-address .saved-addresses select:focus{
    border-color: #1492E6;
}
/* "+ ახალი მისამართი" stands out - in the open list (where the browser
   allows styling options) and in the closed field while it's selected */
.section-delivery-address .saved-addresses select.is-new,
.section-delivery-address .saved-addresses select option[value=""]{
    font-weight: bold;
}
.section-delivery-address .saved-addresses select option:not([value=""]){
    font-weight: normal;
}
.section-delivery-address .address-field{
    margin-top: 1rem;
}
.section-delivery-address .address-field label{
    display: block;
    margin-bottom: 0.4rem;
    font-weight: bold;
}
.section-delivery-address .address-field label .required{
    color: #E53935;
}
.section-delivery-address .address-field input[type="text"]{
    border: 2px solid #E6E8EA;
    border-radius: 0.5rem;
    padding: 1rem;
    width: 100%;
    outline: 0;
    font-size: 16px; /* below 16px iOS Safari zooms the page on focus */
}
.section-delivery-address .address-field input[type="text"]:focus{
    border-color: #1492E6;
}
.section-delivery-address .address-field.error input[type="text"]{
    border-color: #E53935;
}
.section-delivery-address .field-error{
    color: #E53935;
    font-size: 0.85rem;
    margin-top: 0.3rem;
}
.section-delivery-address .field-error:empty{
    display: none;
}
.city-combobox{
    position: relative;
}
.city-results{
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 280px;
    overflow-y: auto;
    background: white;
    border: 2px solid #E6E8EA;
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(13, 30, 51, 0.12);
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
}
.city-results[hidden]{
    display: none;
}
.city-results li{
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
}
.city-results li.highlighted,
.city-results li[data-index]:hover{
    background: #f1f8fe;
}
.city-results .city-region{
    font-size: 0.8rem;
    opacity: 0.6;
    white-space: nowrap;
}
.city-results li.city-empty{
    cursor: default;
    opacity: 0.7;
}
.section-delivery-address .inputs-container .main-btn{
    width: 100%;
}
.section-delivery-address .inputs-container > div{
    min-width: 30rem;
}

.selected-address{
    display: flex;
    align-items: center;
    padding: 1.1rem;
    border: 2px solid #E6E8EA;
    border-radius: 0.7rem;

    position: relative;
    gap: 0.5rem;

}

.add-address-btn{
    padding: 1.2rem;
}

.selected-address svg{

}

.selected-address .address-label{
    border-right: 2px solid #E6E8EA;
    padding-right: 0.5rem;
    display: none;
}
.selected-address.show-label .address-label{
    display: block;
}

.selected-address .delete{
    position: absolute;
    right: -1.5rem;
}
#selected-address{
    display: none;
}

.btn-back{
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    color: #1492E6;
    font-weight: bold;
    margin-top: 4rem;
}

.table-attributes-wrapper{
    overflow: hidden;
    height: 0px;
    transition: all 0.4s;
}

.attr-content{
    display: inline-block;
    min-width: 600px;
}

@media (max-width: 620px){
    /* The 600px min-width above is wider than the viewport on mobile,
       pushing the value column off-screen - labels stay visible while
       every value just silently disappears past the edge. */
    .attr-content{
        min-width: 0;
        width: 100%;
    }
}

.attr-section-title{
    background-color: #F5F5F5;
    border-radius: 0.5rem;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
    font-weight: bold;
}

.attr-row{
    display: flex;
    border-bottom: 1px solid rgba(13, 30, 51, 0.1);
}

.attr-row.last{
    border-bottom: 0;
}

.attr-name{
    flex: 1 1 50%;
    padding: 1rem;
    font-weight: initial;
    word-break: break-word;
    overflow-wrap: break-word;
}

.attr-value{
    flex: 1 1 50%;
    padding: 1rem;
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(13, 30, 51, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    overflow-wrap: break-word;
}


.mobile-menu-btn{
    display: none;
    position: relative;
    z-index: 51;
    pointer-events: auto;

}

.menu-btn div {
    width: 35px;
    height: 3px;
    margin: 5px 0;
    transition: all 0.5s;
    background-color: #181818;
}

.mobile-menu-btn.clicked{
    /*position: fixed;
    right: 1rem;*/
}
.menu-btn.clicked div{
    /*background-color: white;*/
}


.menu-btn.clicked div:first-child {
    rotate: -135deg;
    translate: 0 9px;

}

.menu-btn.clicked div:nth-child(2){
    opacity: 0;
    visibility: hidden;
    rotate: -45deg;
    translate: 0 -3px;

}

.menu-btn.clicked div:last-child {
    rotate: -45deg;
    translate: 0 -7px;
}

.mobile-menu{
    position: fixed;
    top: 55px;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 503;
    display: none;
    padding: 0 0 1rem 1rem;
}

.mobile-menu *{
    font-size: 0.875rem;
}



.mobile-menu .parent-categories li a {

    gap: 0.5rem;

    font-weight: bold;
    border-radius: 0.5rem;
    padding: 0.75rem 0.5rem;
    /* transition: all 0.3s; */
    font-size: 0.875rem;

}
.mobile-menu .parent-categories li a svg.arrow{
    margin-left: auto;
}

.mobile-menu .parent-category-container {

    padding-right: 1rem;
    border-right: 0;
    height: calc(100dvh - 100px);
    overflow-y: auto;
    margin-top: 10px;
    position: relative;
}

.mobile-menu .subcategories-container {
    position: fixed;
    height: 100%;
    width: calc(100% - 1rem);
    top: 86px;
    z-index: 1;
    background-color: white;
    padding-left: 0;
    display: none;
}

.mobile-menu .subcategories{
    margin-bottom: 0;
    margin-top: 1rem;
}
.mobile-menu .subcategories li a{
    margin-bottom: 0;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
}
.mobile-menu .selected-category{
    padding-right: 1rem;
}
.mobile-menu .selected-category .arrow{
    transform: rotateY(180deg);
}

.mobile-menu .subcategory-list{
    display: none;
    padding-bottom: 1rem;


}
.mobile-menu .subcategory-list.active{
    display: block;


}

.mobile-menu .top{
    display: flex;

}

.mobile-bottom-menu{
    position: fixed;
    z-index: 502;
    background-color: #F5F5F5;
    padding: 1rem;
    bottom: 0;
    width: 100%;
    display: none;
    height: 100px;
    justify-content: center;
    align-items: center;


}

.filter-mobile-controls{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(13, 30, 51, 0.1);
    margin-bottom: 1rem;
}

.mobile {
    display: none;
}

.filter-btn{
    position: relative;
    padding: 0.5rem 0.75rem;
    border: 1px solid #0D1E33;
}

.address-search-input{
    position: relative;
}
.address-search-input .delete{
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.page-content *{
    font: initial !important;
    font-size: 100% !important;
    font-family: "helvetica_lt_geo_roman" !important;
    line-height: 1.5 !important;
    font-weight: revert;



}


.page-content ul, .page-content ol{
    list-style: revert;


    padding: 0 0 0 1.2rem;
}










@media (max-width: 1500px) {
    .section-products .product-list {

        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }


}



@media (max-width: 1420px) {
    .header .controls {
        width: 100%;
    }
    .search-box-container {
        width: 100%;
    }
    .search-box {

        width: 100%;


    }
    .category-menu {

        padding-left: 1rem;
    }

    .cart-products {

        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;

    }
}


@media (max-width: 1300px) {
    .section-products .product-list {

        grid-template-columns: repeat(4, 1fr);
        gap: 2em;
    }

    .payment{

        gap: 1rem;
    }
    .social {

        gap: 1rem;
    }
    .social-container {

        padding-right: 1rem;
    }
    .payment-container {
        padding-left: 1rem;
    }
    .footer-content .right {

        flex: 0 0 400px;
    }
    .map {

        padding-top: 59%;

    }

    .footer-content .left {
    display: flex;
    flex-wrap: wrap;
    flex: 0 0 calc(100% - 400px);
}
}

@media (max-width: 1100px) {
    .section-products .product-list {

        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .cart-products {

        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

    }

    .section-product .content {
        flex-wrap: wrap;
        padding-bottom: 2rem;
    }

    .section-product .content > div:first-child {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .section-product .specifications {
        flex: 0 0 100% !important;
        padding-left: 0;
        padding-right: 0;
        margin-top: 1rem;
        justify-content: initial;
    }

    .section-product .buy-content {
        flex: 0 0 100% !important;
        margin-top: 1rem;
    }

    .section-full-description .full-description-body {
        width: 100%;
    }
}

@media (max-width: 1050px) {
    .footer .icons {
        flex: 0 0 100% !important;
        display: flex;
        height: fit-content;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .social-container {
        border-right: 0;
        padding-right: 0;
    }
    .payment-container {
        padding-left: 0;
        margin-top: 1rem;
    }
    .map {
    padding-top: 75%;
}
}

@media (max-width: 900px) {
    .brand-info .content {
        flex-wrap: wrap;
    }
    .brand-info .content > div {
        width: 100%;
    }
    .brand-info .products {

        margin-top: 1rem;
        grid-template-columns: repeat(3, 1fr);


        gap: 1rem;
    }

    .footer .icons {
        flex: 0 0 100% !important;
        display: flex;
        height: fit-content;
        flex-wrap: wrap;
    }
    .social-container {
        border-right: 0;
        padding-right: 0;
    }
    .payment-container {
        padding-left: 0;
        margin-top: 1rem;
    }

    .header .main {

        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
    }
    .search-box-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .header .controls {
        margin-top: 1rem;
    }
}

@media (max-width: 800px) {
    .search-box-container {
        padding-left: 0;
        padding-right: 2rem;
    }
    .header .main > div {
       width: 100%;
    }
    .header .main .logo {
       align-self: initial;
    }
    .logo {
        height: 100%;

        align-items: initial;
    }
}

@media (max-width: 768px) {
    .logo {

        align-items: center;
    }
    .brand-btn {
        height: 45px;

    }
     .header .main > div {
       width: initial;
    }
    .btn.mobile{
        display: flex;
    }
    .brand-navigation-wrapper {
        margin: auto;
        max-width: calc(1632px + 2rem);
        position: relative;
        padding-left: 0;
        padding-right: 0;
    }
    .brand-navigation {
        padding: 0.25rem 1rem 0.25rem 1rem;

        border-radius: 0;

    }

    .main-slider a {

        padding-top: 55%;
    }
    .offer-container {

        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }

    .advantages {

        grid-template-columns: repeat(1,1fr);
        gap: 1rem;
    }

    .footer-content .right {

        flex: 0 0 100%;
        margin-top: 1rem;
    }

    .header .controls {
        display: none;
    }
    .header .top {
        display: none;

    }

    .mobile-menu-btn{
        display: block;

    }

    .header-wrapper{
        height: 55px;
    }

    .header{
        position: fixed;
        height: 55px;
        width: 100%;
        z-index: 500;
        background-color: white;
    }
    .header .container {
        height: 100%;
    }
    .header .main {
        height: 100%;
    }

    .categories-nav {

        display: none;

    }

    .categories-section {
        margin-top: 1rem;
    }
    .main-slider-section {
        margin-top: 1rem;
    }

    .mobile-bottom-menu{

        display: flex;
    }

    .overlay.popup {
        z-index: 501;
    }

    .cart-popup {
        position: fixed;

        border-radius: 1rem 1rem 0 0 ;
        padding: 1rem 1rem;


        min-width: initial;
        width: 100%;
        height: calc(100dvh - 155px);
        right: 0;
        left: 0;
        bottom: 100px;

    }

    .section-products .product-list {

        gap: 0.5rem;
    }

    .cart-product-list > li {
        margin-top: 0.5rem;
    }

    .product-item .side-menu-wrapper {

        visibility: visible;
        opacity: 1;
        transform: translateX(0px);

    }

    .btn-70 {
        min-height: 44px;
    }



    .authorization-popup {

        position: fixed;

        border-radius: 1rem 1rem 0 0 ;
        padding: 1rem 1rem;


        min-width: initial;

        width: 100%;
        height: calc(100dvh - 155px) !important;
        right: 0;
        left: 0;
        bottom: 100px;
    }

    input {

        border-radius: 0.5rem;
        padding: 0.75rem;

    }


    .item-count {
        right: 0px;
        top: -8px;
    }

    .cabinet-popup {


        position: fixed;

        border-radius: 1rem 1rem 0 0 ;
        padding: 1rem;


        min-width: initial;

        width: 100%;
        height: calc(100dvh - 155px) !important;
        right: 0;
        left: 0;
        bottom: 100px;
    }

    .cart-product-list .item .buttons {

        flex-direction: column;
        gap: 0.25rem;
    }



    .slider-prev-btn svg, .slider-next-btn svg{
        height: 50px;
        width: 50px;
    }

    .cart-product-list .item {

        padding: 0.5rem 0.5rem 0.5rem 0.5rem;

    }
    .quantity-changer .value{
        text-align: center;
        /*padding: 0 10px;*/
        font-size: 16px;
        width: 26px;

    }
    .cart-product-list .item .info {
        padding-left: 0.5rem;
        padding-right: 1rem;
        max-width: 12rem;
        font-size: 0.75rem;
    }
    .quantity-changer button {
        border-radius: 0.25rem;
        width: 23px;
        height: 23px;
        padding-bottom: 3px;
    }

    .delete-btn, .cart-btn, .compare-btn {
        border-radius: 0.25rem;
        width: 30px;
        height: 30px;

    }
    .cart-product-list .item .buttons {

        align-items: end;
    }

    .product-item .title {
        font-size: 0.75rem;
    }

    .generic-slider {
        position: relative;
        padding: 0 0 0 1rem;
    }

    .generic-slider .slick-slide {
        margin: 0px 5px;
        height: initial;
    }

    .slider-prev-btn {
        left: 0;
        overflow: hidden;
    }
    .slider-next-btn {
        right: 0;
        overflow: hidden;
    }
    .user-addreses {
        padding: 1rem 0;
    }
    .address-popup {
        margin: auto;
        position: fixed;


        border-radius: 1rem 1rem 0 0 ;
        padding: 1rem 1rem 1rem 1rem;


        min-width: initial;
        width: 100%;

        height: calc(100dvh - 155px) !important;
        right: 0;
        left: 0;
        bottom: 100px;
    }
    .address-popup .close-btn {

        top: 0.5rem;
        right: 0.5rem;
    }
    .selected-address .delete {

        right: 0.5rem;
    }

    .section-buy-personal-info .content {
        flex-wrap: wrap;
    }
    .section-buy-personal-info .content > div:first-child {
        flex: 0 0 100%;
    }
    .section-buy-personal-info .content > div:last-child {
        flex: 0 0 100%;
        padding-left: 0;
        margin-top: 1rem;
    }

    .section-delivery-address .inputs-container > div {
        min-width: initial;
        width: 100%;
    }
    .section-buy-personal-info .inputs-container {

        padding: 0.5rem ;

    }
    .section-buy-personal-info .inputs-container > div {

        width: 100%

    }
    .selected-address {
        font-size: 0.875rem;
        padding: 1.1rem 1.4rem 1.1rem 1.1rem;

    }
    .buy-progress-wrapper .icons > li {
        font-size: 0.75rem;
    }
    .section-buy-personal-info .form {

        grid-template-columns: repeat(1,1fr);

    }

    .cart-products {

        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;

    }

    .section-similar-products .product-list {

        grid-template-columns: repeat(2, 1fr);

    }

    .section-product .content {
        flex-wrap: wrap;
        padding-bottom: 2rem;
    }

    .section-product .content > div:first-child {
        flex: 0 0 100%;
        width: 100%;
        padding-right: 0;
        margin-right: 0;
    }
    .section-product .content > div:first-child::after {
        display: none;
    }

    .section-product .specifications {
        padding-left: 0;
        padding-right: 0;
        flex: 0 0 100% !important;
        justify-content: initial;
        margin-top: 1rem;

    }

    .product-attributes {
        font-size: 0.875rem;
    }
    .product-attributes li {

        margin-bottom: 1rem;
    }
    .section-product .buy-content {
        flex: 0 0 100%;
        margin-top: 1rem;
    }
    .main-btn {

        padding: 0;
    }
    .add-to-cart-btn-wrapper .btn, .buy-btn-wrapper .btn {

        border-radius: 0.5rem;
        height: 60px;
    }
    .add-to-cart-btn-wrapper .quantity-changer {

        border-radius: 0.45rem;

    }
    .btn-compare {
        height: 60px;
        padding: 0.4rem;
        border-radius: 0.5rem;
    }
    .btn-favorites {
        height: 60px;
        padding: 0.35rem;
        border-radius: 0.5rem;
    }
    .section-product .specifications .wrapper {
        height: 100%;

        border-bottom: 0;
        flex: 0 0 100%;
    }
    .section-product .specifications .wrapper .btn-wrapper {
        position: relative;
        bottom: initial;
    }

    .offer-product .title {
        font-size: 0.75rem;
    }

    .offer-product {

        padding: 0.5rem;

    }

    .brand-category-btn {
        font-size: 0.875rem ;
    }
    .section-user-cabinet .content {
        flex-wrap: wrap;
    }

    .section-user-cabinet .content .left {
        display: none;
        min-width: initial;

    }
    .section-user-cabinet .form {
        padding-top: 4rem;
        min-width: initial;
        width: 100%;
    }
    .section-user-cabinet .content .right {
        min-height: 568px;
        width: 100%;
        padding-left: 0;
    }



    .buy-company-popup .form-group {
        max-width: initial;
    }

    .buy-company-popup {


        position: fixed;


        border-radius: 1rem 1rem 0 0 ;
        padding: 3rem 1rem 1rem 1rem;


        min-width: initial;
        width: 100%;

        height: calc(100dvh - 155px) !important;
        right: 0;
        left: 0;
        bottom: 100px;
    }
    .logo svg{

        width: 79px;
    }

    .section-products .content .left {
        position: fixed;
        min-width: initial;
        max-width: initial;
        width: 100%;
        padding-right: 0;
        padding: 1rem;
        border-radius: 1rem 1rem 0 0 ;
        background-color: white;
        z-index: 20;
        height: calc(100dvh - 155px) !important;
        right: 0;
        left: 0;
        top: 55px;
        display: none;
        overflow-y: auto;
    }

    .section-products .top {
        flex-direction: column;
        justify-content: space-between;
    }

    .section-products .top .buttons{
        margin-top: 1rem;
    }

    .section-products .content .right {
        border-left: 0;
        padding-left: 0;
    }

    .filter-mobile-controls.mobile{
        display: flex;
    }

    .filter-section .main-btn{
        padding: 0.8rem 1.4rem;
    }

    .section-products .category-filter .categories > li a {
        font-size: 0.875rem;
    }

    .breadcrumb {
        flex-wrap: wrap;
    }

    .breadcrumb li a {
        font-size: 0.75rem;
    }

    .compare-item .title{
        font-size: 0.75rem;
        font-weight: initial;
    }

    .table-compare{
        display: none;
    }

    .btn-clear-wrapper.mobile{
        display: block;
    }

    .btn-clear-wrapper.mobile .clear-compare-btn {

        padding: 1rem;
        width: 100%;
        font-weight: bold;
        color: #0D1E33;
    }

    .table-compare.mobile{
        display: table;
    }

    .table-compare.single-product{
        display: table;
    }

    .table-compare.mobile tr:first-child td {
        vertical-align: top;
        height: 0;
    }

    .table-compare.mobile .compare-item {
        flex-direction: column;
        border-radius: 0.5rem;
        height: 100%;
        padding: 0.5rem;
    }
    .table-compare.mobile .compare-item .price {
        min-height: 36px;

    }


    .table-compare.mobile tr td:first-child {
        font-weight: bold;
        text-align: initial;
    }
    .table-compare.mobile tr td.subtitle {

        font-weight: initial;

    }

    .table-compare tr td {
        font-size: 0.875rem;
    }

    .table-compare.mobile tr td.title {
        font-size: 0.875rem;
    }

    .price {

        font-size: 1rem;
    }
    .old-price {
        font-size: 0.875rem;
    }
    .price > div:last-child {
        display: flex;
        gap: 0.5rem;
        margin-top: 0.5rem;
        align-items: baseline;
    }

    .compare-item .info {
        padding-left: 0;
        padding-right: 0;
        max-width: initial;
    }

    .search.mobile{
        display: block;
        margin-left: auto;
        padding-right: 2rem;
    }

    .search-product-list .item {
        display: flex;
        background-color: #F5F5F5;
        color: rgb(13, 30, 51);
        border-radius: 0.5rem;
        padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    }
    .search-product-list .item .title {
        font-size: 0.75rem;
    }
    .search-product-list .item .img {
        height: 50px;
        width: 85px;
    }
    .search-product-list .item .discount {
        font-size: 0.75rem;
    }
    #search-popup{
        z-index: 504;
    }

    #search-popup .input-wrapper{
        margin-top: 1rem;
    }

    #search-popup .search-product-list {

    }

    .product-buy-section .price > div:last-child {
        font-size: 1.37rem;
        align-items: baseline;
    }
    .product-buy-section {

        padding: 2rem 1rem 1rem 1rem;
    }

    .show_all_attributes{
        display: none;
    }
    .show_all_attributes.mobile{
        display: block;
        margin-top: 1rem;
    }

    .footer {

        padding-bottom: 120px;
    }

    .section-products .category-filter .selected-category {
        font-size: 0.875rem;
    }

    .price-filter input {
        padding: 0.75rem;

    }

    .dropdown-list .selected {

        font-weight: initial;

    }

    .filter {
        margin-top: 0.75rem;

        padding-bottom: 0.75rem;
    }
    .section-exclusive-brand .banner{
        position: relative;
        padding-top: 50%;
    }
    .section-exclusive-brand .banner img{
        object-fit: cover;
        top: 0;
        position: absolute;
    }
    .section-advantages-2 .advantage-card {
        padding: 1rem;
    }

    .notification-popup {


        padding: 1rem;


        top: 55px;


    }

    .add-address-btn{
        height: 44px;
    }

    .order-success-popup {



        position: fixed;


        border-radius: 1rem 1rem 0 0 ;
        padding: 1rem;


        min-width: initial;
        width: 100%;

        height: calc(100dvh - 155px) !important;
        right: 0;
        left: 0;
        bottom: 100px;

    }

    .faq-header {

        height: 238px;

        align-items: end;
        padding-left: 26px;
        padding-bottom: 22px;
    }

    .section-faq .content {
        flex-wrap: wrap;
    }

    .last-blog {
        display: flex;
        grid-template-columns: initial;
        flex-wrap: wrap;
    }
    .last-blog > div {
        flex: 0 0 100%;
    }

    .last-blog > div:last-child {
        padding-left: 0;

    }

    .blog-item .content {

        flex-wrap: wrap;
    }
    .blog-item .content > div {
        flex: 0 0 100%;
    }

    .blog-item .content > div:last-child .bottom {
        margin-top: 1rem;
    }
    .blog-item .content > div:last-child {
        padding-left: 0;
        margin-top: 1rem;

    }
    .blog-item .content > div:first-child {
        padding-right: 0;
    }
    .blog-list > div:nth-child(odd) {
        padding-right: 1.5rem;

    }
    .blog-list > div:nth-child(even) {
        padding-left: 1.5rem;
    }
    .blog-item  .text {
        font-size: 0.75rem;
    }
    .blog-item .content > div:last-child .bottom .btn {
        font-size: 0.875rem;
    }
    .blog-item .title {

        font-size: 1rem;
    }
    .address-list{
        overflow-y: auto;
        height: calc(100dvh - 626px);
    }

    .authorization-popup .tab-controls > li button {

        font-size: 1rem;
    }

    .product-item .side-menu li button {

        width: 33px;
        height: 33px;

    }

    .product-gallery {

        flex-direction: column-reverse;
    }
    .product-gallery > div:first-child {
        flex: 0 0 25%;
        width: 100%;
        padding-right: 0;
        height: 100%;
        position: relative;
        padding-top: 1rem;
    }
    .product-gallery > div:last-child {
        flex: 0 0 75%;
        width: 100%;
        height: 100%;
        padding-left: 0;
    }

    .product-gallery-wrapper {

        padding-top: 100%;
    }

    .attribute-filter .chkb-container {
        font-size: 0.875rem;
        padding-top: 3px;
    }

    .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        border: 3px solid #F5F5F5;
        border-radius: 8px;
    }
    .checkmark {

        height: 21px;
        width: 21px;
        border: 3px solid #F5F5F5;
        border-radius: 5px;
    }
    .chkb-container .checkmark:after {
        left: 1px;
        top: 1px;
        width: 13px;
        height: 13px;
        background-color: #FAAB12;
        border-radius: 3px;
    }

    .cart-total-info {

        padding: 1rem;
        font-size: 0.875rem;

    }
    .section-buy-personal-info .inputs-container div > .title {

        font-size: 1rem;
    }
    .address-list li a {
        font-size: 0.875rem;
    }

    .drop-down-list-wrapper .selected {
        padding: 0 1rem;

        height: 44px;
    }
    .bank-selector li {

        height: 44px;
    }

    .vaucher-input input {

        padding: 0.8rem 1rem;
    }

    .advantage-card .content .value {

        font-size: 1.875rem;

    }

    .last-blog .title {
        font-weight: bold;
        font-size: 1.2rem;
        margin-top: 1.5rem;
    }
    .last-blog .text {
        font-size: 0.875rem;
    }

    .page-content * {

        font-size: 0.875rem;
    }

    .blog-content .title {

        font-size: 1.2rem;
        margin-top: 1.5rem;
    }
    .section-single-blog .text {
        font-size: 0.875rem;
    }

    .main-slider-nav {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        align-items: center;
        padding-bottom: 0.2rem;
    }

    .generic-slider .product-item {
        max-width: 180px;
        min-width: 180px;
    }

    .generic-slider .swiper-slide{
        width: initial;
    }
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 4px;
    }

    .swiper-pagination-bullet {

        width: 4px;
        height: 4px;
    }

    .generic-slider .swiper{
        padding-right: 1rem;
    }

    .brand-info .content .info {
        /* max-width: 30rem; */
        padding-right: 0;

    }

    .section-title {

        font-size: 1.12rem;
        padding-bottom: 1.25rem;
    }

    .footer-content .title {

        font-size: 1.12rem;

    }

    .footer-content a {

        font-size: 0.875rem;
    }

    .advantage-card .content .title {

        font-size: 1rem;
    }

    .discount-card {

        border-radius: 1rem;

    }
    .discount-card .close-btn {

        top: 10px;
        right: 10px;
    }
    .discount-card .close-btn svg {
        width: 25px;
        height: 25px;
    }
    .search-product-list li {
        margin-top: 0.5rem;
    }
    .search-product-list .item .price {
        margin-top: 0.5rem;
    }

    .order-success-popup .icon svg{
        height: 52px;
    }

    .order-success-popup .img svg{
        height: calc(100dvh - 475px);
    }
    .order-success-popup .title {

        padding-top: 1rem;
        font-size: 1.12rem;
    }
    .order-success-popup .text {
        font-size: 0.875rem;
    }

    .my-orders-link {
        margin-top: 2rem;

    }

    .pagination li {
        margin: 0 0.5rem;
    }
    .pagination a {

        font-size: 0.875rem;

    }
    .pagination a svg {

        height: 48px;
        width: 48px;

    }


    .address-popup .drop-down-list-wrapper .selected {

        height: 42px;
    }

    .address-popup .close-btn{
        display: none;
    }

    .table-compare tr td {

        width: 33%;

    }
    .table-compare.single-product tr td {

        width: initial;

    }

}

@media  (max-height: 830px) {

    .cart-popup {

        height: calc(100dvh - 155px);

    }
}

@media  (max-height: 780px) {
    .tab-container{
        height: calc(100dvh - 280px) !important;
        /*overflow-y: auto;*/
    }
    .address-list{
        overflow-y: auto;
        height: calc(100dvh - 626px);
    }

    .tab{
        overflow-y: auto;
        height: 100%;
    }

}
@media (max-width: 640px) {

    .brand-info .products {

        margin-top: 1rem;
        grid-template-columns: repeat(2, 1fr);


        gap: 1rem;
    }


    .footer-content .left {
        display: flex;
        flex-wrap: wrap;
        flex: 0 0 100%;
    }

    .footer-content .left > div {
        flex: 0 0 100%;
    }

    .payment {

        gap: 1rem;
        flex-wrap: wrap;
    }
    .social {
        display: flex;
        gap: 1rem;
    }

    .user-orders {
        padding-left: 0;
    }




}

@media (max-width: 768px) {
    .user-orders-filter {
        flex-wrap: wrap;
        overflow-x: visible;
        gap: 0.5rem 1rem;
    }

    .user-orders-filter li {
        border-right: 0;
        padding: 0;
    }

    .user-orders-filter li a {
        display: inline-block;
        padding: 0.3rem 0.6rem;
        border-radius: 0.5rem;
        background-color: #F5F5F5;
    }

    .table-wrapper {
        overflow-x: hidden;
    }

    .user-addreses-table,
    .user-bank-card-table {
        display: block;
    }

    .user-addreses-table .header,
    .user-bank-card-table .header {
        display: none;
    }

    .user-address-card,
    .user-bank-card-card {
        display: block;
        background-color: #F5F5F5;
        border-radius: 0.7rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .user-addreses-table .cell,
    .user-bank-card-table .cell {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        column-gap: 0.75rem;
        align-items: start;
        justify-content: flex-start;
        text-align: left;
        position: static;
        padding: 0.35rem 0;
        background-color: transparent;
        word-break: break-word;
    }

    .user-addreses-table .cell::before,
    .user-bank-card-table .cell::before {
        content: attr(data-label);
        position: static;
        display: block;
        font-weight: 600;
        opacity: 0.7;
    }

    .user-addreses-table .first-cell,
    .user-addreses-table .last-cell,
    .user-bank-card-table .first-cell,
    .user-bank-card-table .last-cell {
        border-radius: 0;
    }
    .user-bank-card-table .cell.bank-card {
        padding: 0.35rem 0;
        gap: 0.5rem;
    }

    .user-orders-table {
        display: block;
        margin-top: 2rem;
    }

    .user-orders-table .header {
        display: none;
    }

    .order-card{
        display: block;
        background-color: #F5F5F5;
        border-radius: 0.7rem;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .user-orders-table .cell {
        display: grid;
        grid-template-columns: 7.5rem 1fr;
        column-gap: 0.75rem;
        align-items: start;
        justify-content: flex-start;
        text-align: left;
        position: static;
        padding: 0.35rem 0;
        background-color: transparent;
        word-break: break-word;
    }

    .user-orders-table .cell::before {
        content: attr(data-label);
        position: static;
        display: block;
        font-weight: 600;
        opacity: 0.7;
    }

    .user-orders-table .first-cell,
    .user-orders-table .last-cell {
        border-radius: 0;
    }
}

@media (max-width: 520px) {
    .discount-card {
        width: calc(100% - 5rem);
        height: initial;
        padding-top:45%;
        bottom: 1rem;


    }
}

@media (max-width: 480px) {



    .brand-info .content {
        justify-content: center;
    }
    .brand-info .products {
        margin-top: 1rem;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
        max-width: 15rem;
    }
}