[fr="MobilBottomBar"]{display: none;}
.Page[PageType=View]>.Container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 40px 20px 40px 20px;
    padding-top: 63px;
}
body:not([page="Home"]) .Mod84 .Mod84_TheBack>span{display: none;}
.Page[PageType=View] .GalleryBar {
    width: 100%;
    display: flex;
    gap: 8px;
    position:relative;
}

.Page[PageType=View] .Information .Colors.Limit1{display: none;}
.Page[PageType=View] .GalleryBar>.Small {display:none;}
.Page[PageType=View] .GalleryBar .Slider_Gallerypagination{display:none}
.Page[PageType=View] .GalleryBar .List .Slider_Gallerypagination{display: none;}
.Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: auto;
    flex-wrap: wrap;
    gap: 2px;
    height: auto !important;
}
.Page[PageType=View] .GalleryBar .List {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: auto;
    flex-wrap: wrap;
    gap: 2px;
    height: auto !important;
}
.Page[PageType=View] .GalleryBar .List .Item {
    width: calc(50% - 1px);
    display: block;
    height: auto;
}
.Page[PageType=View] .GalleryBar .List .Item:before{display: none;}
.Page[PageType=View] .GalleryBar .List .Item img {
    width: 100%;
    display: block;
    position: inherit;
    height: inherit;
}
.Page[PageType=View] .GalleryBar .List .Item video {
    width:100%;
    display:block
}

.Page[PageType=View] .GalleryBar>.List::-webkit-scrollbar {
   height: 2px;
   background: #000;
   width: 1px;
   background: #0000001f
}

.Page[PageType=View] .GalleryBar>.List::-webkit-scrollbar-thumb {
   height: 1px;
   border-radius: 2px;
   background: #000
}

.Page[PageType=View] .Information {
    width: 500px;
    flex: none;
    margin-left: 40px;
    padding: 40px;
}

.Page[PageType=View] .Information .Content {
    width: 100%;
    position: sticky;
    top: 60px;
    display: flex;
    flex-direction: column;
}


.Page[PageType=View] .Information .InfoBar .Info .Badges {
   width: 100%;
   font-size: 11px;
   color: #747474;
   line-height: 14px;
   margin-bottom: 4px;
   text-transform: uppercase;
   display: flex;
   align-items: center;
   gap: 5px;
   font-weight: 500;
}
.Page[PageType=View] .Information .InfoBar .Info .Badges span + span {
   padding-left: 7px;
   position: relative;
}
.Page[PageType=View] .Information .InfoBar .Info .Badges span + span::before {
    content:"";
    display: inline-block;
    width: 2px;
    height: 2px;
    border-radius: 100%;
    background: #000;
    position: absolute;
    left: 0;
    top: 6px;
}

.Page[PageType=View] .Information .InfoBar .Info .Name {
   width: 100%;
   color: #262626;
   line-height: 23px;
   margin-bottom: 16px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
   font-weight: 600;
   font-size: 20px;
}

.Page[PageType=View] .Information .InfoBar .Info .Name>h1{
   width: 100%;
   color: #262626;
   line-height: 16px;
   margin:0px;
   margin-bottom: 3px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   flex-direction: row;
   font-weight: 500;
   font-size: 16px;
}

.Page[PageType=View] .Information .InfoBar .Info .Options {
   display: flex;
   margin-left: auto;
   align-items: center;
   gap: 9px;
}


.Page[PageType=View] .Information .InfoBar .Info .Name .Options .Share {
   cursor: pointer;
   display: block;
}
.Page[PageType=View] .Information .InfoBar .Info .Name .Options .Share>svg{
   width: 18px;
}


.Page[PageType=View] .Information .InfoBar .Info .PriceBox .SpecialText {
   cursor: pointer;
   opacity: 0
}

.Page[PageType=View] .Information .Desc {
   width: 100%;
   line-height: 18px;
   margin-top: 40px;
   color: #262626
}

.Page[PageType=View] .Information .VariationArea{z-index:0}
.Page[PageType=View] .Information .VariationArea:last-child{margin-bottom:22px}
.Page[PageType=View] .Information .VariationArea .SelectedNote {
   width: 100%;
   margin: 40px 0 0;
   display: block;
   padding: 1px;
   line-height: 14px;
   font-size: 10px;
   color: #b1b1b1;
   text-align: center
}

.Page[PageType=View] .Information .VariationArea .SelectedNote:not(:empty)+.Selected {
   margin-top: 4px
}

.Page[PageType=View] .Information .VariationArea .Selected .Color {
   margin-right: 8px;
   border-right: 1px solid;
   padding-right: 7px;
   line-height: 10px;
   display:none;
}

.Page[PageType=View] .Information .VariationArea .Selected .Code {
   line-height: 14px;
   display:none;
}





.Page[PageType=View] .Information .Colors {
    width: 100%;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    margin: 20px 0px;
}

.Page[PageType=View] .Information .Colors .ColorItem {
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    border: 0.5pt solid transparent;
    padding: 0px;
    border-radius: 0px;
}


.Page[PageType=View] .Information .Colors .ColorItem.active{
   border: 1px solid #E1E1E1;
}
.Page[PageType=View] .Information .Colors .ColorItem:hover{
   border: 1px solid #E1E1E1;
} 

.Page[PageType=View] .Information .Colors .ColorItem>.Color {
    display: none;
    width: 17px;
    height: 17px;
}

.Page[PageType=View] .Information .Colors .ColorItem>.Image {
    width: 17px;
    height: 17px;
    flex: none;
    display: none;
}
.Page[PageType=View] .Information .Colors .ColorItem.Renk>.Color {
    display: flex;
}
.Page[PageType=View] .Information .Colors .ColorItem.Doku>.Image {
    display: flex;
}

.Page[PageType=View] .Information .Colors .ColorItem>.Image>img {
    width: 100%;
    border-radius: 0px;
    display: block;
    border: 0.5pt solid #ffffff;
}
.Page[PageType=View] .Information .Colors .ColorItem>.Name{
    border: 1px solid #F7F7F7;
    box-shadow: 0px 3px 8px 0px #0000001A;
    display: none;
    text-align: center;
    position: absolute;
    top: 100%;
    background: #fff;
    padding: 5px 11px;
    border-radius: 3px;
    line-height: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #6F6F6F;
    margin-top: 6px;
}
.Page[PageType=View] .Information .Colors .ColorItem:hover>.Name{
    display: block;
}



.Page[PageType=View] .Information .VariationArea .Variations {
    width: 100%;
}
.Page[PageType=View] .Information .VariationArea .Variations .Select {
    width: 100%;
    background: #fff;
    border-top: 1px solid #E2E2E2;
    border-bottom: 1px solid #E2E2E2;
    border-radius: 2px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: auto;
    max-height: 140px;
    flex-direction: column;
    margin: 14px 0px;
   transition: all 0.4s
}
.Page[PageType=View] .Information .VariationArea .Selected {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    align-items: center;
    justify-content: space-between;
    line-height: 49px;
    display: flex;
}
.Page[PageType=View] .Information .VariationArea .Selected[data-value="0"] {
    display: none;
}

.Page[PageType=View] .Information .VariationArea .Selected>svg {
    height: 18px;
    transition: all 0.3s;
}
.Page[PageType=View] .Information .VariationArea .Variations .Select .SelectDropdown {
    width: 100%;
    position: relative;
    background: #fff;
}
.Page[PageType=View] .Information .VariationArea .Variations .Select:not([select-value=""]) .SelectDropdown {
    display: none;
}

.Page[PageType=View] .Information .VariationArea .Variations .Select.show .Selected>svg {
    transform: rotate(180deg);
    transition: all 0.3s;
}
.Page[PageType=View] .Information .VariationArea .Variations .Select .SelectDropdown .SizeItem {
    width: 100%;
    display: flex;
    line-height: 45px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.Page[PageType=View] .Information .VariationArea .Variations .Select .SelectDropdown .SizeItem.active{background:#f8f8f8}
.Page[PageType=View] .Information .VariationArea .Variations .Select .SelectDropdown .SizeItem:hover {
    background: #E9E9E9;
}


.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.Size {
   width: 100%;
   position: relative;
   text-wrap-mode: nowrap;
   line-height: 32px
}

.Page[PageType=View] .Information .VariationArea .Variations .SizeItem[data-qty="0"]>.Size {
    color: #838383;
    text-decoration: line-through;
}

.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.ReamingStock {
    width: 100%;
    display: none;
    line-height: initial;
    color:#f00;
}
.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.ReamingStock:hover {
    width: 100%;
    text-decoration: underline;
}
.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.ReamingStock>svg{
    display: block;
    height: 11px;
}

.Page[PageType=View] .Information .VariationArea .Variations .SizeItem[data-qty="1"]>.ReamingStock,.Page[PageType=View] .Information .VariationArea .Variations .SizeItem[data-qty="2"]>.ReamingStock{
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 400;
}

.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.Notification {
    width: 100%;
    display: none;
    line-height: initial
}
.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.Notification:hover {
    text-decoration: underline;
}
.Page[PageType=View] .Information .VariationArea .Variations .SizeItem>.Notification>svg {
    display: block;
    height: 11px;
}
.Page[PageType=View] .Information .VariationArea .Variations .SizeItem[data-qty="0"][Notification="1"]>.Notification {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    font-size: 12px;
    font-weight: 400;
}

.Page[PageType=View][Load="1"] .Information .InfoBar .Info .PriceBox .OldPrice.show{
   display: block
}
.Page[PageType=View][Load="1"] .Information .InfoBar .Info .PriceBox:not([OldPrice="0"]) .OldPrice{
   display: block
}
.Page[PageType=View][Load="1"] .Information .InfoBar .Info .PriceBox .Campaigns{
   font-size:16px     ;
}

.Page[PageType=View] .Information .VariationArea .Note {
   width: 100%;
   font-size: 11px;
   color: #727272;
   text-align: center;
   border: 0
}

.BtnAddInfo{
   color: #f00;
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0.5px;
   line-height: 12px;
   margin-top:12px
}


.Page[PageType=View] .Information .BtnArea {
    width: 100%;
    background: #fff;
    margin: 4px 0px 6px 0px;
    display: flex;
    gap: 6px;
}

.Page[PageType=View] .Information .BtnArea .BtnContnet {
    width: 100%;
    display: flex;
    gap: 6px;
}
.Page[PageType=View] .Information .BtnArea .BtnContnet>[fr="alternative_preview_btn"] {
    display: none;
}

.Page[PageType=View] .Information .BtnArea .BtnContnet>.PriceBox {
   display:none;
}




.Page[PageType=View] .Information .BtnArea .Btn[data-status="0"]{
   border: 1px solid;
   background: #f0f0f0;
   color: #606060;
   border-color: #efefef;
   pointer-events: none;
}
.Page[PageType=View] .Information .BtnArea .Btn>div{pointer-events: none;}

.Page[PageType=View] .Information .BtnArea .Favorite {
   background: #000000;
   width: 52px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex: none;
   border-radius: 2px;
   cursor: pointer;
   padding:14px
}
.Page[PageType=View] .Information .BtnArea .Favorite>svg{
   display:none;
   width: 28px;
   height:inherit
}
.Page[PageType=View] .Information .BtnArea .Favorite>svg path{
   fill:#fff
}
.Page[PageType=View] .Information .BtnArea .Favorite:not(.active)>svg[fr="non"]{
   display:block;
}
.Page[PageType=View] .Information .BtnArea .Favorite.active>svg[fr="active"]{
   display:block;
}

.Page[PageType=View] .Information .AlternativeSlider {  
    width: 100%;
    z-index:0;
}
.Page[PageType=View] .Information .AlternativeSlider .AlternativeSliderTitle{  
    display:none !important;
}



.Page[PageType=View] .Information .AlternativeSliders {  
    width: 100%;
    margin-top:20px;
}
.Page[PageType=View] .Information .AlternativeSliders .VariationBar{  
    display:none !important;
}

.Page[PageType=View] .Information .AlternativeSliders .OtherProductView{
    width: 100%;
}
.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}
.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar .Title {
    width: -webkit-fill-available;
    font-size: 14px;
    font-weight: 500;
    padding-left:5px;
}


.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar .Arrows {
   display: flex;
   gap: 8px;
}

.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-prev {
   display: flex;
   position: inherit;
   cursor: pointer;
   margin: 0;
   height: initial
}

.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-next>svg,
.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-prev>svg {
   height: 12px
}

.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-next {
   display: flex;
   position: inherit;
   transform: rotate(180deg);
   cursor: pointer;
   margin: 0;
   height: initial
}

.Page[PageType=View] .Information .AlternativeSliders .OtherProductView>.Container .Group .List.Type0{
    display: flex;
    flex-wrap: wrap
}


.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Gallery:hover .swiper-button-prev{
    left: 6px;
    text-align: left
}
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Gallery:hover .swiper-button-next{
    right: 6px;
    text-align: right
}
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Gallery .swiper-button-prev:after,
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Gallery .swiper-button-next:after{
    font-weight: 400;
    font-size: 18px;
    color: #000000eb;
}
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Info{height:initial}
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Info .InfoBar03{display:none}
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Gallery .VariationBar select{font-size:12px}
.Page[PageType=View] .Information .AlternativeSliders .ProductItem .Gallery .VariationBar .Btn {
    font-size: 12px;
}

.Page[PageType=View] .Information .DeliveredBox {
    width: 100%;
    display: flex;
    gap: 4px;
    color: #565656;
    font-size: 11px;
    margin-top: 24px;
    flex-direction: column;
    align-items: flex-start;
}
.Page[PageType=View] .Information .DeliveredBox .DeliveredText {
    width: 100%;
    display: flex;
    background: #F4F4F4;
    flex-direction: row;
    align-content: center;
    text-align: center;
    border-radius: 2px;
    padding: 0px 0px;
    gap: 2px;
    align-items: center;
    background: transparent;
}
.Page[PageType=View] .Information .DeliveredBox .DeliveredText > span {
    font-size: 12px;
    color: #000;
}
.Page[PageType=View] .Information .DeliveredBox .DeliveredText > span:nth-child(1) {
    font-weight: 300;
}
.Page[PageType=View] .Information .DeliveredBox .DeliveredText > span:nth-child(2) {
    font-weight: 600;
}

.Page[PageType=View] .Information .DeliveredBox .ReturnText {
    width: 100%;
    display: flex;
    background: #F4F4F4;
    flex-direction: row;
    align-content: center;
    text-align: center;
    border-radius: 2px;
    padding: 0px 16px;
    gap: 2px;
    align-items: center;
    background: transparent;
    display: none;
}
.Page[PageType=View] .Information .DeliveredBox .ReturnText > span {
    font-size: 12px;
    color: #000;
}
.Page[PageType=View] .Information .DeliveredBox .ReturnText > span:nth-child(1) {
    font-weight: 300;
}
.Page[PageType=View] .Information .DeliveredBox .ReturnText > span:nth-child(2) {
    font-weight: 600;
}

.Page[PageType=View] .Information .BtnArea .Btn.active {
   background: #000;
   color: #fff;
   cursor: pointer;
   pointer-events: all;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px
}

.Page[PageType=View] .Information .BtnArea .Btn.active>div:last-child {
   display: flex;
   gap: 2px
}

.Page[PageType=View] .Information .FeaturesBar {
   width: 100%;
   margin-top: 0px;
}
.Page[PageType=View] .Information .FeaturesBar .Feature,.Page[PageType=View] .Information .FeaturesBar .FeaturesBtn {
    width: 100%;
}
.Page[PageType=View] .Information .FeaturesBar .Feature.Fixed{border:0}
.Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox {
    width: 100%;
    padding: 6px 0px;
    line-height: initial;
    font-weight: 300;
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    margin-bottom:24px
}
.Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox .FeatureCodeBoxItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 0px;
}
.Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox .FeatureCodeBoxItem span:nth-child(2) {
    font-weight: 500;
}
.Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox .FeatureCodeBoxItem>span:nth-child(3) {
    padding: 0;
    cursor: pointer;
}

.Page[PageType=View] .Information .FeaturesBar .Title {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0px;
    line-height: 45px;
    font-size: 14px;
    font-weight: 500;
}
.Page[PageType=View] .Information .FeaturesBar .Title>h2 {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
}
.Page[PageType=View] .Information .FeaturesBar .Title > svg{
   height: 12px;
   width: 14px;
   transition: 0.4s;
}
.Page[PageType=View] .Information .FeaturesBar .Feature.show>.Title > svg{
   height: 12px;
   width: 14px;
   transform: rotate(90deg);
   transition: 0.4s;
}
.Page[PageType=View] .Information .FeaturesBar .Feature>.Text {
    width: 100%;
    overflow: auto;
    max-height: 160px;
    margin-bottom: 20px;
    padding-right: 5px;
    padding-bottom: 5px;
    display: none;
    font-size: 13px;
    line-height: 19px;
    padding: 0 16px;
    font-weight: 300;
}
.Page[PageType=View] .Information .FeaturesBar .Feature>.Text .Feature_otherclass {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid #efefef;
    padding-top: 3px;
    margin-top: 6px;
}

.Page[PageType=View] .Information .FeaturesBar .Feature>.Text .Feature_otherclass>span:nth-child(1) {
    width: 100%;
    font-weight: 500;
}

.Page[PageType=View] .Information .FeaturesBar .Feature>.Text .Feature_otherclass>span:nth-child(2) {
    width: 100%;
    font-size: 13px;
    font-weight: 400;
}
.Page[PageType=View] .Information .FeaturesBar .Feature>.Text>h2 {
    margin: 10px 0px;
    font-weight: 300;
}

.Page[PageType=View] .Information .FeaturesBar .Feature>.Text>h2 {
    margin: 10px 0px;
    font-weight: 300;
    font-size: 15px;
}
.Page[PageType=View] .Information .FeaturesBar .Feature>.Text::-webkit-scrollbar {
   width: 2px;
   background: #b2b2b2
}

.Page[PageType=View] .Information .FeaturesBar .Feature>.Text::-webkit-scrollbar-thumb {
   background: #000;
   border-radius: 2px
}

.Page[PageType=View] .Information .FeaturesBar .Feature>.Text::-webkit-scrollbar-thumb:hover {
   background: #555
}

.Page[PageType=View] .Information .SizeTable {
    width: 100%;
    display: flex;
    margin: 0 0 8px;
    align-items: center;
    justify-content: space-between;
}
.Page[PageType=View] .Information .SizeTable>div {
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
}

.Page[PageType=View] .Information .FeaturesBar .FeaturesBtn {
    width: 100%;
    line-height: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #ccc;
}
.Page[PageType=View] .Information .FeaturesBar .FeaturesBtn > svg{
   height: 12px;
   width: 14px;
}

.Page[PageType=View] .Information .Note {
    width: 100%;
    border-left: 0;
    border-right: 0;
    margin-bottom: 20px;
    font-size: 12px;
    font-weight: 400;
    color: #737373;
}
.Page[PageType=View] .Information .Note>.SizeTable{
    display:none;
}

.Page[PageType=View] .Information .Note>.Text {
   width: 100%;
   padding: 10px 0;
   font-size: 11px
}

.Page[PageType=View] .Information .Note:empty{display:none}

@media(max-width: 1700px) {
   .Page[PageType=View] .GalleryBar,
   .Page[PageType=View] .Information {
   }

   .Page[PageType=View]>.ShadowImageLogo {
       z-index: 11;
       position: fixed;
       top: 50%;
       mix-blend-mode: difference;
       left: 50px
   }

   .Page[PageType=View]>.ShadowImageLogo>div>svg {
       height: 40px;
       fill: #fff
   }

   .Page[PageType=View]>.ShadowImageLogo>div:first-child {
       width: 100%;
       position: absolute;
       top: 0;
       mix-blend-mode: difference
   }

   .Page[PageType=View]>.ShadowImageLogo>div:nth-child(2) {
       width: 100%;
       position: absolute;
       top: 0;
       mix-blend-mode: hue
   }
}

.Page[PageType=View] .Information .BtnArea .Colors{display:none}
.Page[PageType=View] .Information .BtnArea .Variations{display:none}
.Page[PageType=View] .GalleryBar .Share{display:none}
.Page[PageType=View] .Information .InfoBar .Info .Options .Btn.alternative_preview_btn{display:none}



.Page + .ProductOtherViewContainer {
   width: 100%;
   display: flex;
   flex-direction: column;
   margin-top: 90px;
   opacity: 0;
   position: relative;
   top: 400px;
   transition: .4s;
   z-index: 1
}
.Page.Load + .ProductOtherViewContainer {
    opacity: 1;
    top: 0;
    transition: .4s;
}
.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
}
.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Title {
    width: -webkit-fill-available;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
}





.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 14px 16px 20px
}

.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Arrows {
   display: flex;
   gap: 8px
}

.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-prev {
   display: flex;
   position: inherit;
   cursor: pointer;
   margin: 0;
   height: initial
}

.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-next>svg,
.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-prev>svg {
   height: 12px
}

.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Arrows .swiper-button-next {
   display: flex;
   position: inherit;
   transform: rotate(180deg);
   cursor: pointer;
   margin: 0;
   height: initial
}

.Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .List.Type0{
    display: flex;
    flex-wrap: wrap
}


[PageType='View'] .rating {display: flex;align-items: center;height: 21px;}
[PageType='View'] .rating .comment-area {margin-bottom: 4px;}
[PageType='View'] .rating .comment-area {margin: 0 !important;padding: 0 !important;}
[PageType='View'] .rating .comment-area .bottom-header-left {display: flex;flex-direction: row;align-items: center;cursor: pointer;}
[PageType='View'] .rating .comment-area .rating-evaluation {display: none;}
[PageType='View'] .rating .comment-area .icon-section{display: flex;}
[PageType='View'] .rating .comment-area .bottom-header-left .icon-section .icon-ifa {font-size: 11px;color: #d9d9d9;position: relative;border: 1px solid transparent;position: relative;}
[PageType='View'] .rating .comment-text {margin-left: 11px;cursor:pointer;font-size: 12px;font-weight: 300;color: #333333;position: relative;top: 0px;}
[PageType='View'] .rating .comment-text:hover{mcolor: #000;text-decoration:underline}


.Page[PageType=View] .GalleryBar .Badges{display:none}


@media(max-width: 1140px) {
            .Page + .ProductOtherViewContainer {
                margin-top: 0px;
            }

            .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] {
                display: flex;
                width: max-content;
                overflow: visible;
                flex-wrap: inherit;
                gap: 0;
                height: inherit !important;
            }

            .Page[PageType=View] .GalleryBar .List .Slider_Gallery{display: flex;}
            .Page[PageType=View] .GalleryBar .List .Slider_Gallerypagination{display: flex;}
            .Page[PageType=View] .GalleryBar .List>.Item{display: none;}
            
            .Page[PageType=View] .Information .BtnArea .Favorite {
                display: flex;
                flex: none;
                height: 36px;
                background: #fff;
                border: 1px solid #000;
                border-radius: 0;
            }
            .Page[PageType=View] .Information .BtnArea .BtnContnet>[fr="alternative_preview_btn"] {
                display: flex;
            }
            .Page[PageType=View] .Information .BtnArea + [fr="alternative_preview_btn"] {display: none;}

            .Page[PageType=View] .Information .BtnArea .Favorite>svg path{fill:#000}
            .Page[PageType=View] .Information .VariationArea {
                z-index:0 !important
            }

            .Page[PageType=View]{
                margin-top: 42px;
            }

            .Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox {
                display: flex;
                align-items: center;
                gap: 8px;
                text-wrap-mode: nowrap;
                font-size: 12px;
                justify-content: flex-start;
            }

            .Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox .FeatureCodeBoxItem {
                width: auto
            }


            .Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar {
            padding: 14px 16px 20px
            }
            .Page + .ProductOtherViewContainer .OtherProductView>.Container .Group .TitleBar .Title{font-size:11px}


            .Page[PageType=View] .Information .FeaturesBar .Feature .FeatureCodeBox .FeatureCodeBoxItem + .FeatureCodeBoxItem:before {
                content: "|"
            }

            .Page[PageType=View] {
                z-index: 2;
            }

            .Page[PageType=View]>.Container {
                padding: 0
            }

            .Page[PageType=View] .GalleryBar>.Small {
                display: none
            }

            .Page[PageType=View] .Information {
                width: 100%;
                margin: 0
            }

            .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] .Item {
                width: 100%
            }

            .Page[PageType=View] .GalleryBar>.List {
                display: block;
                width: 100%;
                position: relative;
                padding: 0px 16px;
            }

            .Page[PageType=View]>.Container {
                width: 100%;
                grid-template-columns: 1fr;
                padding: 0
            }

            .Page[PageType=View] .GalleryBar {
                display: block;
                width: 100%;
                height: auto;
                overflow: auto;
                position: initial;
                left: 0;
                top: 100%;
                right: 0;
                opacity: 0;
                transition: all 0.5s;
            }

            .Page[PageType=View].Load .GalleryBar {
                top: 50px;
                opacity: 1;
                transition: all 0.5s;
            }

            .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] >.Item img, .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] >.Item video {
                width: 100%
            }

            .Page[PageType=View] .Information {
                width: 100%;
                flex: auto;
                position: absolute;
                z-index: 1;
                background: #fff;
                top: 100vh;
                border-radius: 16px 16px 0px;
                opacity: 0;
                transition: top 0.4s ease;
            }

            .Page[PageType=View] .Information::before {
                content: "";
                display: none;
                height: 3px;
                background: #fff;
                width: 45px;
                position: absolute;
                top: -9px;
                left: 50%;
                margin-left: -22px;
                z-index: 2;
                border-radius: 12px;
            }

            .Page[PageType=View].Load .Information {
                opacity: 1;
                position: relative !important;
                top: 0 !important;
                padding:0
            }

            .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] {
                display: flex;
                width: max-content;
                overflow: visible;
                flex-wrap: inherit;
                gap: 0;
                height: inherit !important;
            }

            .Page[PageType=View] .GalleryBar .Badges {
                display: flex;
                gap: 6px;
                position: absolute;
                left: 10px;
                bottom: 30px;
                flex-direction: column;
                z-index: 1;
            }

            .Page[PageType=View] .GalleryBar .Badges span {
                background: #efefef;
                border: 1px solid #efefef;
                width: initial;
                padding: 2px 4px;
                font-size: 11px;
                text-transform: uppercase;
            }

            .Page[PageType=View] .Information .Content {
                margin: 0;
                top: 0;
                width: 100%;
                padding: 0px;
                height: auto!important;
                padding-bottom: 10px;
            }

            .Page[PageType=View] .Information .Content .InfoBar {
                padding: 16px;
                order: -2;
                display: flex;
                align-items: flex-start;
                justify-content: space-between;
                width: 100%;
            }
            .Page[PageType=View] .Information .Content .InfoBar .Info{
                width: 100%;
            }
            .Page[PageType=View] .Information .Content .InfoBar .Colors {
                width: initial;
                display: flex;
                text-wrap-mode: nowrap;
            }
            .Page[PageType=View] .Information .Content .InfoBar .Colors>.ColorItem {
                pointer-events: none
            }
            .Page[PageType=View] .Information .Content .Note {
                padding: 2px 16px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }

            .Page[PageType=View] .Information .Content .Note>span {
                font-size: 11px;
            }

            .Page[PageType=View] .Information .Note>.SizeTable {
                display: block;
                padding: 0;
                width: min-content;
                text-wrap-mode: nowrap;
                margin-bottom: 0;
            }

            .Page[PageType=View] .Information .Note>.SizeTable>div {
                font-size: 11px;
            }

            .Page[PageType=View] .Information .Content .Desc {
                padding: 16px
            }

           .Page[PageType=View] .Information .BtnArea {
        position: sticky;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: flex-start;
        margin: 0;
        padding: 14px;
        order: -2;
        justify-content: space-between;
        gap: 0;
        flex-direction: column;
    }

            .Page[PageType=View] .Information .BtnArea .BtnContnet {
                width: 100%;
                display: flex;
                align-items: center;
                margin: 0;
                justify-content: space-between;
                gap: 0;
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox {
                display: flex
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox .OldPrice {
                order: 1
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox .Campaigns {
                order: 2
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox .SalePrice {
                order: 3
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox .SalePrice .Info>.Price {
                font-size: 16px;
                line-height: 16px;
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox:not([DiscountRate="0"]) .SalePrice .Info>.DiscountRate {
                display: none
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox .OldPrice:before {
                display: none
            }

            .Page[PageType=View] .PriceBox .OldPrice .Info>.Price:before {
                content: "";
                background: #a4a4a4;
                position: absolute;
                display: block;
                width: 100%;
                height: 1px;
                top: 7px;
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox .OldPrice .Info>.Price {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                line-height: 12px;
                padding-top: 1px;
                font-weight: 700;
                color: #b2b2b2;
                position: relative;
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox:not([OldPrice="0"]) .OldPrice .Info {
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox:not([DiscountRate="0"]) .OldPrice .Info>.DiscountRate {
                line-height: 13px;
            }

            .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] >.Item::before {
                display: none
            }

            .Page[PageType=View] .GalleryBar [fr="ProductViewGalleryListContainer"] >.Item>img {
                width: auto;
                height: 100%;
                position: inherit;
            }

            .Page[PageType=View] .Information .InfoBar .Info .Options {
                position: absolute;
                right: 0;
                top: 8px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px;
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Share {
                padding: 0
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Share>svg {
                padding: 0
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Share>svg>path {
                padding: 0
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Favorite {
                padding: 0
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Favorite>svg {
                padding: 0
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name {
                max-width: 85%;
                font-size: 14px;
                font-weight: 500;
                color: #000;
                margin-bottom: 0;
            }

            .Page[PageType=View] .Information .InfoBar .Info .PriceBox {
                display: flex;
            }

            .Page[PageType=View] .Information .InfoBar .Info .PriceBox .SalePrice .Info {
                margin-right: 0
            }

            .Page[PageType=View] .GalleryBar .Slider_Gallerypagination {
                width: 100%;
                position: absolute;
                display: flex;
                align-items: center;
                justify-content: center;
                bottom: 0;
                padding: 0;
                margin: 0;
            }

            .Page[PageType=View] .GalleryBar .Slider_Gallerypagination {
                width: calc(100% - 200px);
                position: relative;
                margin: 0;
                height: 16px;
                background: transparent;
                overflow: visible;
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: absolute;
                bottom: 14px;
                z-index: 1;
                top: inherit;
                left: 100px;
                right: 100px;
            }

            .Page[PageType=View] .GalleryBar .Slider_Gallerypagination:before {
                content: "";
                height: 2px;
                background: #e0e0e0;
                position: absolute;
                /* top: 50%; */
                right: 0px;
                left: 0px;
            }

            .Page[PageType=View] .GalleryBar .Slider_Gallerypagination>.swiper-pagination-bullet {
                width: 10px;
                height: 2px;
                border: 0;
                display: block;
                background: #000;
                opacity: 0;
                z-index: 1;
                margin: 0;
            }

            .Page[PageType=View] .GalleryBar .Slider_Gallerypagination>.swiper-pagination-bullet-active {
                opacity: 1;
                border-color: #000;
                position: relative;
            }

            .Page[PageType=View] .GalleryBar .Slider_Gallerypagination>.swiper-pagination-bullet-active:before {
                content: "";
                display: block;
                height: 2px;
                background: #000;
                position: absolute;
                right: 8px;
                /* top: 50%; */
                left: var(--bullet-left);
            }

            .Page[PageType=View] .Information .BtnArea .Colors {
                display: flex;
                gap: 5px;
                width: 100%;
                align-items: center;
                padding: 0 1px;
                justify-content: space-between;
            }

            .Page[PageType=View] .Information .BtnArea .Colors .List {
                display: flex;
                width: 100%;
            }

            .Page[PageType=View] .Information .BtnArea .Colors>svg {
                height: 20px;
            }

            .Page[PageType=View] .Information .BtnArea .Colors .ColorItem {
                display: none;
                width: 100%;
                pointer-events: none
            }

            .Page[PageType=View] .Information .BtnArea .Colors .ColorItem.active {
                display: flex;
                align-items: center;
            }

            .Page[PageType=View] .Information .BtnArea .Colors .ColorItem .Color {
                display: none;
            }

            .Page[PageType=View] .Information .BtnArea .Colors .ColorItem .Name {
                display: flex;
                font-size: 13px;
                font-weight: 400;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .Page[PageType=View] .Information .BtnArea .Colors .ColorItem .Image {
                width: 34px;
                margin-right: 5px;
            }

            .Page[PageType=View] .Information .BtnArea .Colors .ColorItem .Image>img {
                display: block;
                width: 100%;
            }

            .Page[PageType=View] .Information .BtnArea .Variations {
                display: flex;
                border-left: 1px solid #EEEEEE;
                padding: 0 6px;
                align-items: center;
                width: 100%;
            }

            .Page[PageType=View] .Information .BtnArea .Variations .Select {
                display: flex;
                width: 100%;
            }

            .Page[PageType=View] .Information .BtnArea .Variations .Selected {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
            }

            .Page[PageType=View] .Information .BtnArea .Variations .Selected>span {
                display: flex;
                font-size: 13px;
                font-weight: 400;
            }

            .Page[PageType=View] .Information .BtnArea .Variations .Selected>svg {
                height: 20px;
            }

            .Page[PageType=View].nonStock .Information .BtnArea .Colors {
                display: none;
            }
            .Page.Load + .ProductOtherViewContainer{margin-top:120px}
            .Page[PageType=View].nonStock .Information .BtnArea .Variations {
                display: none;
            }

            .Page[PageType=View] .GalleryBar .Share {
                display: none
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Share {
                padding: 0;
                display: none;
            }

            .Page[PageType=View] .Information .InfoBar .Info .Name .Options .Favorite {
                background: #f8f6f7;
                border-radius: 4px;
                width: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                border-radius: 100%;
                flex: none;
            }

            .Page[PageType=View] .Information .InfoBar .Info .Options .Btn.alternative_preview_btn {
                display: none;
                background: #fff;
                border-radius: 4px;
                min-width: 50px;
                width: initial;
            }

            .Page[PageType=View] .Information .VariationArea {
                padding: 0 16px;
            }

            .Page[PageType=View] .Information .VariationArea .Colors {
                display: none;
            }

            .Page[PageType=View] .Information .BtnArea .Btn {
                border-radius: 0;
                padding: 0 12px;
                width: 100%;
                line-height: 34px;
                border: 1px solid #000;
            }

            .Page[PageType=View] .Information .BtnArea .PriceBox {
                border-radius: 0;
                flex: none;
                padding: 0 0px;
                position: initial;
                width: min-content;
                display: none;
            }

            .Page[PageType=View] .Information .DeliveredBox {
                display: flex;
                flex-direction: column;
                padding: 0 16px;
                align-items: flex-start;
                gap: 8px;
                margin-top: 40px;
            }

            .Page[PageType=View] .Information .DeliveredBox .DeliveredText {
                display: flex;
                flex-direction: row;
                background: #f2f2f2;
                border: 0;
                border-radius: 2px;
                padding: 10px 8px;
                justify-content: space-between;
            }

            .Page[PageType=View] .Information .DeliveredBox .ReturnText {
                display: flex;
                flex-direction: row;
                background: #f2f2f2;
                border: 0;
                border-radius: 2px;
                padding: 10px 8px;
                justify-content: space-between;
            }

            .Page[PageType=View] .Information .FeaturesBar {
                margin-top: 20px;
                padding:0 16px
            }

            .Page[PageType=View] .Information .FeaturesBar .Feature:first-child {
                border-top: 0
            }

            .Page[PageType=View] .Information .SizeTable {
                padding: 0 16px;
                margin: 0;
                margin-bottom: 8px;
                display: none;
            }

            .ProductOtherViewContainer .OtherProductView[fr="LastView"] {
                background: #F6F6F6;
                border-top: 1px solid #e8e8e8;
                border-bottom: 1px solid #e8e8e8
            }

            .ProductOtherViewContainer .OtherProductView[fr="LastView"] .Container .Group .TitleBar {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 16px;
            }

            .ProductOtherViewContainer .OtherProductView[fr="LastView"] .Container .Group .TitleBar .Title {
                width: -webkit-fill-available;
                font-size: 13px;
                font-weight: 500;
            }
        }



.GalleryBar .List .swiper-wrapper {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.GalleryBar .List .slideItem {
    flex: 0 0 auto;
}
.ProductItem {
   width: 33.33%;
   border: 0;
   margin-bottom: 0
}

.ProductItem.nonStock {
   display:none
}

.ProductItem img {
   width: 100%;
   display: block;
   z-index: 0;
   position: relative
}

.ProductItem .Info {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px 14px;
    height: 140px;
    position: relative;
}

.PopContent[fr=AddBagSuccess] .Preview .ProductItem>div>.Info, .PopContent[fr=StockNotificationForm] .Preview .ProductItem>div>.Info{
    height:inherit;
    min-height: 132px;
}
.ProductItem .Info .InfoBar01 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 0 2px;
    flex-direction: row;
    gap: 4px;
    margin-bottom: 5px;
}

.ProductItem .Info .InfoBar01 .InfoBarLeft{
    width: 80%;
}

.ProductItem .Info .Name {
    width: 100%;
    display: block;
    font-weight: 400;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.ProductItem .Info .Desc {
    display: none;
}

.ProductItem .Info .Colors,.ProductItem .Info .PriceBox:not([OldPrice="0"]) .OldPrice,.ProductItem.Favorite .Gallery>img,.ProductItem.Wait .Info .Properties:not([qty="0"]) .Btn[fr=stockIn],.ProductItem.Wait .Info .Properties[qty="0"] .Btn[fr=stockOut],[Grid=Special] .ProductItem[SubType="1"][INFO="0"] .Info,[Grid=Special] .ProductItem[SubType="2"][INFO="0"] .Info,[Grid=Special] .ProductItem[SubType="3"][INFO="0"] .Info {
   display: flex
}

.ProductItem .Info .Colors>span {
    font-size: 11px;
    margin-left: 6px;
    line-height: 11px;
}
.ProductItem .Info .Colors[other="0"]>span{display:none}

.ProductItem .Info .Colors>div>span:first-child {
   width: 8px;
   height: 8px;
   display: block;
   margin-right: 5px;
   flex: none
}







.ProductItem .Info .Badges {
   width: 100%;
   display: block;
   margin-top: 6px;
   color: #747474;
   font-size: 9px;
   text-transform: uppercase
}

.ProductItem .Gallery {
   position: relative;
   overflow: hidden;
   max-width: inherit;
   margin: 0;
   width: 100%;
}

.ProductItem .Gallery .swiper-button-prev,
.ProductItem .Gallery .swiper-rtl .swiper-button-next,
.ProductItem .Gallery .swiper-button-next,
.ProductItem .Gallery .swiper-rtl .swiper-button-prev
{
   display:none
}
.ProductItem .Gallery:hover .swiper-button-prev, .ProductItem .Gallery:hover .swiper-rtl .swiper-button-next, .ProductItem .Gallery:hover .swiper-button-next, .ProductItem .Gallery:hover .swiper-rtl .swiper-button-prev {
    display: block;
    background: #ffffff;
    border-radius: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    opacity: 1;
}

.ProductItem .Gallery:hover .swiper-button-prev{left:5px}
.ProductItem .Gallery:hover .swiper-button-next{right:5px}

.ProductItem .Gallery .swiper-button-prev:hover,
.ProductItem .Gallery .swiper-rtl .swiper-button-next:hover,
.ProductItem .Gallery .swiper-button-next:hover,
.ProductItem .Gallery .swiper-rtl .swiper-button-prev:hover{
    opacity: 1;
}

.ProductItem .Gallery .swiper-button-prev:after,
.ProductItem .Gallery .swiper-rtl .swiper-button-next:after {
    content: ""; 
    display: block;
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' stroke-width='3' stroke='%23000000' fill='none'>\
<polyline points='18.86 57.47 44.12 30.84 18.86 6.58'/>\
</svg>");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ProductItem .Gallery .swiper-button-next:after,
.ProductItem .Gallery .swiper-rtl .swiper-button-prev:after {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' stroke-width='3' stroke='%23000000' fill='none'>\
<polyline points='18.86 57.47 44.12 30.84 18.86 6.58'/>\
</svg>");
    transform: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ProductItem .Gallery .swiper-pagination {
    position: absolute;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0, 0, 0);
    z-index: 10;
    display: flex;
    gap: 2px;
    bottom: 5px;
    margin: 0;
    top: inherit;
    height: inherit;
    align-items: center;
    padding: 3px;
    justify-content: center;
}
.ProductItem .Gallery .swiper-pagination .swiper-pagination-bullet {
    width: 16px;
    height: 2px;
    display: inline-block;
    border-radius: 2px;
    background: #ffffff;
    opacity: .2;
    margin: 0;
}
.ProductItem .Gallery .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ffffff;
}
.ProductItem .Gallery .swiper-slide{
    position:relative;
    width: 100% !important;
}
.ProductItem .Gallery .swiper-slide::before {
    content: '';
    display: block;
    background: #eee;
    padding-top: calc((100% / (208 / 313)));
}
.ProductItem .Gallery .swiper-slide.Video video{
    pointer-events: none;
}

.ProductItem .Gallery .swiper-slide img,.ProductItem .Gallery .swiper-slide video {
    position:absolute;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.ProductItem .Gallery .Favorite {
    position: absolute;
    right: 10px;
    bottom: -20px;
    z-index: 1;
    transition: all 0.3s;
    background: #fff;
    padding: 8px;
    border-radius: 4px;
    opacity: 0;
}
.ProductItem:hover .Gallery .Favorite{
    bottom: 10px;
    opacity:1;
    transition: all 0.3s
}


.ProductItem .InfoBar03 .VariationBar {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    background: #fffFFFD6;
    position: relative;
    z-index: 1;
    transition: bottom .2s;
    flex-direction: column;
    opacity: 0;
    margin-top: 15px;
    bottom: -5px;
}

.ProductItem:hover .InfoBar03 .VariationBar {
    transition: bottom .2s;
    opacity: 1;
    bottom: 0;
}


.ProductItem .InfoBar03 .VariationBar .Text {
    display: flex;
    width: 100%;
    padding: 0;
    color: #353535;
    letter-spacing: 1px;
    font-size: 10px;
}

.ProductItem .InfoBar03 .VariationBar .List {
    display: flex;
    gap: 12px;
    padding: 5px 0px;
    flex-wrap: wrap;
}

.ProductItem .InfoBar03 .VariationBar .List>.SizeItem {
    flex: none;
    display: flex;
    align-items: center;
    color: #565656;
    font-weight: 600;
    font-size: 12px;
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}
.ProductItem .InfoBar03 .VariationBar .List>.SizeItem:hover {
   color: #000;
}
.ProductItem .InfoBar03 .VariationBar .List>.SizeItem:hover:before {
    content: "";
    display: block;
    color: #262626;
    width: 100%;
    height: 1px;
    background: #000;
    position: absolute;
    bottom: -2px;
}

.ProductItem .InfoBar03 .VariationBar .List>.SizeItem>span {
   display: block;
   color: #262626;
   width: max-content;
   font-size: 13px
}

.ProductItem .InfoBar03 .VariationBar .List>.SizeItem>div {
   font-size: 0;
   height: 10px;
   margin-left: 3px;
   position: relative
}
.ProductItem .InfoBar03 .VariationBar .List>.SizeItem[Qty="0"] {
    pointer-events: none;
}
.ProductItem .InfoBar03 .VariationBar .List>.SizeItem[Qty="0"]:after {
    content: "";
    height: 1px;
    width: calc(100% + 6px);
    background: #676767;
    position: absolute;
    bottom: 7px;
    left: -3px;
}
.ProductItem .InfoBar03 .VariationBar .List>.SizeItem[Qty="0"]>span {
   color: #838383;
   pointer-events: none
}

.ProductItem .Info .Product>.Color {
   width: 100%;
   font-size: 11px;
   color: #262626;
   display: flex;
   gap: 7px;
   align-items: center;
   margin-top: 4px
}

.ProductItem .Info .Product>.Variation {
   width: 100%;
   font-size: 11px;
   color: #262626;
   display: flex;
   gap: 7px;
   align-items: center;
   margin-top: 8px
}

.PopContent[fr=AddBagSuccess] .TabView[T=Bag] .BagProducts .ProductItem .Info .Product>.Color .Code,.ProductItem .Info .Product>.Color .Code {
   width: 10px;
   height: 10px;
   display: block;
   flex: none;
   border: 1px solid #e5e5e5;
   margin-top: -2px
}

.ProductItem .Info .Product>.Color .Text {
   font-size: 11px;
   color: #000
}



.ProductItem[mod="2"]{padding:0 2px 2px 2px;}
.ProductItem[mod="2"] .Info .InfoBarColors{display: flex;position: relative;z-index: 1;align-items: center;justify-content: space-between;}
.ProductItem[mod="2"] .Info .InfoBarColors .Colors {
    display: flex;
    gap: 3px;
    align-items: center;
}
.ProductItem[mod="2"] .Info .InfoBarColors .ColorItem {
    width: 9px;
    height: 9px;
    border-radius: 100%;
    position: relative;
    border: 1px solid #F1F1F1;
    flex: none;
    cursor: pointer;
}
.ProductItem[mod="2"] .Info .InfoBarColors .ColorItem>span{display:none}
.ProductItem[mod="2"] .Info .InfoBarColors .ColorItem:hover>span{
    display:block;padding: 3px 7px;position: absolute;top: 100%;left: 0;background: #fff;border: 1px solid #F7F7F7;
    width: min-content;height: fit-content;margin-top: 6px;font-size: 11px;border-radius: 4px;box-shadow: 0px 3px 8px 0px #0000001A;font-weight: 600;
}
.ProductItem .Info .InfoBarColors .Favorite {
    margin-left: auto;
    cursor: pointer;
    height: 12px;
    width: 17px;
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    flex: none; 
}

.ProductItem .Favorite>svg {
    display: none;
    width: 16px;
}

.ProductItem .Favorite:not(.active)>svg[fr="non"] {
    display: block;
}
.ProductItem .Favorite:not(.active)>svg[fr="non"]:hover path{
    stroke:#f00
}

.ProductItem .Favorite.active>svg[fr="active"] {
    display: block;
    height: 14px;
    width: initial;
    margin-right: 2px;
    margin-top: 1px
}

.ProductItem .Favorite.active>svg[fr="active"] path {
    fill: #f00
}

.ProductItem .Info .Badges{font-size:11px;font-weight:600;color:#666666}
.ProductItem .Gallery .VariationBar {
    background: transparent;
    padding: 14px;
    gap: 10px;
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea{
    width: 50%;
    position: relative;
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea>.Btn {
    width: 100%;
    background: #fff;
    color: #000;
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea>.List {
    position: absolute;
    bottom: 48px;
    background: #fff;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    gap: 0px;
    font-size: 12px;
    transition: all 0.4s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(5px);
    transition: all 0.2s ease;
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea:hover>.List {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    box-shadow: 0px 8px 12px -12px #00000066;
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea>.List .SizeItem {
    width: 100%;
    line-height: 30px;
    padding: 0 16px;
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea>.List .SizeItem:hover{
    background: rgb(243 244 246);
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea>.List .SizeItem.active {
    background: rgb(243 244 246);
}
.ProductItem .Gallery .VariationBar>.BtnSizesArea>.List .SizeItem[Qty="0"] {
    pointer-events: none;
    background: #ececec;
    text-decoration: line-through;
    color: #ccc;
}
.ProductItem .Gallery .VariationBar select.List{background: #fff;width: 50% !important;flex: none;padding: 4px;outline: none;}
.ProductItem .Gallery .VariationBar .Btn {
    background: #000;
    color: #fff;
    line-height: 40px;
    font-weight: 500;
    border-radius: 0;
    width: 50%;
}
.ProductItem .Gallery .VariationBar .List>.SizeItem:not([Qty="0"])>div,
.ProductItem .Gallery .VariationBar .List>.SizeItem[Notification="0"]>div,
.ProductItem .Info .Colors[Count="1"],
.ProductItem .Info .PriceBox .SalePrice .SpecialText:empty,
.ProductItem.Wait .Info .Properties .Btn[fr=stockIn],
[Grid="12"] .ProductItem .Info,
[Grid="12"] .ProductItem .VariationBar,
[Grid=Special] .ProductItem[INFO="1"] .Info,
[Grid=Special] .ProductItem[INFO="1"] .VariationBar{
   display: none
}

.ProductItem.Favorite .Info .Properties .Btn.Favorite,.ProductItem.Favorite .Info .Properties .Sizes,.ProductItem.Wait .Info .Properties .Btn.Favorite{
   display: flex;
   align-items: center
}
.ProductItem .Info .PriceBox .SalePrice .SpecialText:hover {
   background: #000; 
   color: #fff
}
.ProductItem .Info .Badges>span,.ProductItem .Info .InfoBar03{
   width: 100%;
   display: block
}
.ProductItem.Favorite .Info .Product>.Name:hover{
   text-decoration: underline;
}
.ProductItem .Info .Colors>div>span:nth-child(2) {
   width: 100%;
   font-size: 10px
}
.ProductItem .Info .Colors>div .Image{
   display:none;
}
.ProductItem .Info .Colors>div.Doku .Image{
   display:block;
}


.ProductItem.Favorite .Info .Product,
.ProductItem.Wait .Info .Product{
   display: flex;
   flex-direction: column
}
.ProductItem .Info .InfoBar02{
   width: 100%;
   display: flex;
}

.ProductItem .Gallery .VariationBar .List{
   width:inherit;
}

.ProductItem .Gallery .VariationBar .List>.SizeItem>div:before {
   content: "";
   display: flex;
   width: 13.183px;
   height: 9.887px;
   background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2213.183%22%20height%3D%229.887%22%20viewBox%3D%220%200%2013.183%209.887%22%3E%3Cpath%20id%3D%22envelope-sharp-light%22%20d%3D%22M.824%2C66.451l5.768%2C3.965%2C5.768-3.965V64.824H.824Zm11.535%2C1L6.591%2C71.415.824%2C67.45v5.613H12.359ZM0%2C73.063V64H13.183v9.887H0Z%22%20transform%3D%22translate(0%20-64)%22/%3E%3C/svg%3E');
   background-repeat: no-repeat;
   background-size: contain
}

.ProductItem .Gallery .VariationBar .List>.SizeItem.waitstockactive>div:after {
   content: "";
   background: 50% no-repeat #4caf50;
   width: 2px;
   height: 10px;
   display: block;
   position: absolute;
   top: 0;
   right: -4px
}
.ProductItem .Gallery .VariationBar .List>.SizeItem>span:hover{
   color: #000;
   text-decoration: underline
}
.ProductItem.Favorite .Info .Properties .Sizes>select[pageload="1"]{
   height: 14px
}
.ProductItem.Favorite .Info .Product>.Name[pageload="1"]{
   height: 17px
}
.ProductItem .Info .Colors>div{
   display: flex;
   align-items: center;
   width: max-content
}
.ProductItem.Favorite .Info .Product>.Name {
   width: 100%;
   margin-bottom: 2px;
   font-size: 12px;
   line-height: 17px
}

.ProductItem.Favorite .Info .Product>.Rating {
   display:none;
}
.ProductItem.Favorite .Info .Product>.Rating:not([Point="0"]){
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: #000000;
    font-weight: 500;
}

.ProductItem.Favorite .Info .Product>.Rating .bottom-header-left{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0px;
}

.Page[PageType=View] .Information .InfoBar .Info .PriceBox .SalePrice .Info>.Price>span{
   margin-left: 3px
}

.Page[PageType=View] .Information .InfoBar .Info .PriceBox .SalePrice .Info{
    line-height: 18px;
    font-size: 16px;
    font-weight: 500;
}
.Page[PageType=View] .Information .InfoBar .Info .PriceBox .OldPrice {
    line-height: 18px;
    font-size: 16px;
    font-weight: 400;
    color: #8B8B8B;
}
.Page[PageType=View] .PriceBox .OldPrice:before {
    content: "";
    background: #a4a4a4;
    top: 8px;
}



.PriceBox {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 4px;
    position: inherit;
    flex-wrap: wrap;
}

.PriceBox .SalePrice .Info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row-reverse;
    width: initial;
    padding: 0;
    height: inherit;
    margin-right: 0px;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
}
.PriceBox .SalePrice .Info>.Price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2px;
    font-weight: 600;
    color: #000;
}

.PriceBox[Campaing="1"][CampaingType="true"] .SalePrice .Info>.Price {
    width: fit-content;
    line-height: 14px;
    position: relative;
    font-weight: 400;
    color: #8B8B8B;
}
.PriceBox[Campaing="1"][CampaingType="true"] .SalePrice .Info>.Price:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #000;
    left: 0;
    top: 7px;
}


.PriceBox .Campaigns {
    color: #D24343;
    border: 0;
    padding: 0;
    font-weight: 700;
    width: 100%;
    font-size: 0.75rem;
}
.PriceBox .Campaigns>span{
    color: #000;
}
.PriceBox .SalePrice{font-size:13px;font-weight:600;color: #242424;}

.PriceBox .OldPrice {
    width: fit-content;
    font-size: 13px;
    line-height: 14px;
    position: relative;
    display: none;
}
.PriceBox:not([OldPrice="0"]) .OldPrice {
    display: block;
}

.PriceBox .OldPrice .Info {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row-reverse;
    width: initial;
    padding: 0;
    height: inherit;
    margin-right: 0px;
    font-weight: 500;
    font-size: 13px;
    line-height: 14px;
}
.Page[PageType=View] .PriceBox .OldPrice .Info>.Price:before {
    content: "";
    background: #a4a4a4;
    top: 8px;
}
.PriceBox .OldPrice .Info>.Price {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 12px;
    padding-top: 2px;
    font-weight: 700;
    color: #000;
}
.PriceBox:not([OldPrice="0"]) .OldPrice .Info {
    color:#D24343
}
.PriceBox .OldPrice .Info>.DiscountRate {
   display: none
}
.PriceBox .OldPrice .Info>.DiscountRate:before {
    content: "-";
    display: flex;
}
.PriceBox:not([DiscountRate="0"]) .OldPrice .Info>.DiscountRate {
    display: flex;
    margin-right: 5px;
    margin-left: 5px;
    font-weight: 700;
}

.PriceBox:not([OldPrice="0"]) .SalePrice .Info {
    color:#D24343
}

.PriceBox .SalePrice .Info>.DiscountRate {
   display: none
}
.PriceBox .SalePrice .Info>.DiscountRate:before {
    content: "-";
    display: flex;
}
.PriceBox:not([DiscountRate="0"]) .SalePrice .Info>.DiscountRate {
    display: flex;
    margin-right: 6px;
    margin-left: 6px;
    font-weight: 500;
    font-size: 13px;
}

.PriceBox .SalePrice .SpecialText {
   width: fit-content;
   border: 1px solid #000;
   line-height: 14px;
   padding: 2px 5px 0;
   cursor: pointer;
   overflow: hidden;
   line-height: 12px;
   height: 17px;
}

.PriceBox .Campaigns:empty {
   opacity: 0
}
.PriceBox:not([OldPrice="0"]) .SalePrice .Info>.Price {
   padding: 0;
}
.PriceBox .OldPrice:before{
    content:"";
    display: block;
    width: 100%;
    height: 1px;
    background: #000;
    position: absolute;
    top: 7px;
    left: 0px;
}

.PopContent .ProductItem .Gallery .VariationBar{display:none}
.ProductItem .Gallery .VariationSelect {display: none;}
@media(max-width: 1140px) {
    .ProductItem .Info .Name {
        width: 90%;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 11px;
    }
    .ProductItem .Gallery .Favorite{
        display: block;
        bottom: 10px;
        opacity: 1;
        padding: 3px;
    }
    .ProductItem:hover .InfoBar03 .VariationBar{display: none;}
    .ProductItem .Info{padding:6px}
    .ProductItem .Info .Name {
        font-size: 11px;
        white-space: pre-wrap;
        line-height: 16px;
    }
    .PriceBox .OldPrice{font-size:11px}
    .PriceBox:not([DiscountRate="0"]) .SalePrice .Info>.DiscountRate{font-size:11px}
    .PriceBox .SalePrice .Info{font-size:12px;line-height: 12px;}
    .ProductItem[mod="2"] .Info .InfoBarColors{display: none;}

    .ProductItem .Gallery .VariationBar{
       display: none;
    }
    .ProductItem .Gallery .VariationSelect {
        display: flex;
        position: absolute;
        right: 10px;
        bottom: 40px;
        z-index: 1;
        transition: all 0.3s;
        background: #fff;
        padding: 1px;
        border-radius: 4px;
        opacity: 1;
    }

   .ProductItem .Info .PriceBox .SalePrice {
       display: flex;
       flex-direction: column;
       gap: 5px
   }
   .ProductItem.Wait .Info .Properties .Btn{
       font-size: 11px
   }
   .ProductItem.Wait .Info .Properties .Btn:last-child {
       margin-right: 0
   }

   .ProductItem.Favorite .Info .Properties .Sizes>select {
       pointer-events: none
   }
    .ProductItem .Gallery .swiper-button-prev,
    .ProductItem .Gallery .swiper-rtl .swiper-button-next,
    .ProductItem .Gallery .swiper-button-next,
    .ProductItem .Gallery .swiper-rtl .swiper-button-prev
    {
       display:none !important
    }
    
}