.Page[PageType=View]>.Container {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 40px 20px 40px 20px;
    padding-top: 63px;
}

.Page[PageType=View] .GalleryBar {
    width: 100%;
    display: flex;
    gap: 8px;
    position:relative;
}


.Page[PageType=View] .GalleryBar>.Small {display:none;}
.Page[PageType=View] .GalleryBar .Slider_Gallerypagination{display:none}
.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: 20px;
    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 {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    gap: 4.5px;
    justify-content: flex-end;
}

.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 .VariationArea .Colors {
    width: 100%;
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: flex-start;
    margin: 20px 0px;
}

.Page[PageType=View] .Information .VariationArea .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 .VariationArea .Colors .ColorItem.active{
   border: 1px solid #E1E1E1;
}
.Page[PageType=View] .Information .VariationArea .Colors .ColorItem:hover{
   border: 1px solid #E1E1E1;
} 

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

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

.Page[PageType=View] .Information .VariationArea .Colors .ColorItem>.Image>img {
    width: 100%;
    border-radius: 0px;
    display: block;
    border: 0.5pt solid #ffffff;
}
.Page[PageType=View] .Information .VariationArea .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 .VariationArea .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>.PriceBox {
   display:none;
}

.Page[PageType=View] .Information .BtnArea .Btn {
    width: 100%;
    background: #000;
    color: #ffffff;
    border: 0;
    border-radius: 2px;
    font-size: 15px; 
    font-weight: 600;
    line-height: 52px;
} 
.Btn[fr="alternative_preview_btn"]{
   border-radius: 2px;
   font-size: 15px; 
   font-weight: 600;
   line-height: 52px;
}

.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;
}
.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: 32px;
    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: 14px;
    font-weight: 600;
    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;
}
.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: 0;
   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 40px 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[PageType=View] .Information .VariationArea{z-index:0 !important}
    .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[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%;
        height: auto;
        position:relative;
    }
    

    
    .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;
    }

   .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;
        position: sticky;
        bottom: 54px;
       
   }
   .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: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        background: #fff;
        border-top: 1px solid #fff;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        padding: 14px;
    }
    .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 .Name{max-width:85%}
    .Page[PageType=View] .Information .InfoBar .Info .PriceBox {
        display:none;
    }
    .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[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 .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{
        margin: 0;
        margin-bottom: 10px
    }
    
    .Page[PageType=View] .Information .BtnArea .Btn {
        border-radius: 0;
        width: max-content;
        flex: none;
        padding: 0 12px;
        min-width: 45%;
    }
    .Page[PageType=View] .Information .BtnArea .PriceBox {
        border-radius: 0;
        flex: none;
        padding: 0 0px;
        position: initial;
        width: min-content;
    }
    
    .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} 
    .Page[PageType=View] .Information .FeaturesBar .Feature:first-child{border-top:0} 
    
    body.Scroll800 .Page[PageType=View] .Information {
        padding-top: 54px;
        box-shadow: 0px 3px 0px 0px #fff;
    }
    
    .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
    }
    
}