a{
    all: unset;
    cursor: pointer;
}
body,h1,h2,h3,h4,h5,h6,p,a{
    margin: 0;
}
body,body *{
    font-family: 'Poppins';
    box-sizing: border-box;
}
body.no-scroll {
  overflow: hidden;
}
:root{
    --padding-x-main-container: 50px;
    --padding-bottom-main-container: 100px;
    --gap-main-container: 50px;
    --height-One-Bit-Nav: 101px;
}
.One-Bit-Main-Container{
    margin-top: var(--height-One-Bit-Nav);
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    /* position: relative; */
    z-index: 2;
}
.One-Bit-Sub-Container{
    width: 100%;
    display: flex;
    flex-direction: column;
}

.One-Bit-Sub-Container-2{
    width: 100%;
    display: flex;
    flex-direction: column;
}
.One-Bit-Main-Container .One-Bit-Sub-Container.Error{
    align-items: center; 
    text-align: center; 
    font-size: 24px;
    padding-top: 50px;
}
.One-Bit-Main-Container .One-Bit-Sub-Container.Error img{
    width: 150px;
}
.Content a.btn-One-Bit,
a.btn-One-Bit,
button.btn-One-Bit{
    text-decoration: auto;
    padding: 5px 20px;

    border-radius: 200px;
    background-color: unset;

    font-size: 16px;
    width: max-content;
    height: max-content;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}
a.btn-One-Bit::before,
button.btn-One-Bit::before{
    content: "";
    position: absolute;
    top: 0;
    border-radius: 200px;
    left: -10px;
    width: 0%;
    height: 100%;
    transition: width 0.4s ease;
    z-index: -1;
}

a.btn-One-Bit.button-type-1,
button.btn-One-Bit.button-type-1{
    border: 1px solid #FFFFFF;
    color: white;
    transition: color 0.4s ease;
    cursor: pointer;
}
a.btn-One-Bit.button-type-1::before,
button.btn-One-Bit.button-type-1::before{
    background-color: white;
}
a.btn-One-Bit.button-type-1:not(.No-Hover):hover,
button.btn-One-Bit.button-type-1:not(.No-Hover):hover{
    color: black;
}

a.btn-One-Bit.button-type-2,
button.btn-One-Bit.button-type-2{
    border: 1px solid black;
    color: black;
    transition: color 0.4s ease;
    cursor: pointer;
}
a.btn-One-Bit.button-type-2::before,
button.btn-One-Bit.button-type-2::before{
    background-color: black;
}

a.btn-One-Bit.button-type-2:hover,
button.btn-One-Bit.button-type-2:hover{
    color: white;
}

a.btn-One-Bit.button-type-3,
button.btn-One-Bit.button-type-3{
    border: 1px solid #EA3C13;
    color: #EA3C13;
    transition: color 0.4s ease;
}
a.btn-One-Bit.button-type-3::before,
button.btn-One-Bit.button-type-3::before{
    background-color: #EA3C13;
}

a.btn-One-Bit.button-type-3:hover,
button.btn-One-Bit.button-type-3:hover{
    color: white;
}

a.btn-One-Bit.button-type-1:not(.No-Hover):hover::before,
button.btn-One-Bit.button-type-1:not(.No-Hover):hover::before,
a.btn-One-Bit.button-type-2:not(.No-Hover):hover::before,
button.btn-One-Bit.button-type-2:not(.No-Hover):hover::before{
    width: calc(100% + 20px);
}

button.btn-One-Bit.button-type-4,
a.btn-One-Bit.button-type-4{
    color: #767676;
    border: 1px solid #767676;
}

button.btn-One-Bit.button-type-5,
a.btn-One-Bit.button-type-5{
    color: white;
    background-color: black;
}


.One-Bit-Main-Container{
    padding-left: var(--padding-x-main-container);
    padding-right: var(--padding-x-main-container);
    padding-bottom: var(--padding-bottom-main-container);
}
.One-Bit-Sub-Container{
    gap: var(--gap-main-container);
}
.One-Bit-Sub-Container-2{
    gap: calc(var(--gap-main-container) * 2);
}
.One-Bit-Section-Title{
    width: 100%;
    height: 336px;

    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;

    color: #FFFFFF;
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 100px;
    line-height: 110%;

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/public/images/common/demo/BG/bg.jpg');
    background-position: center;
    background-size: cover;

    position: relative;
    overflow: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);

    }
    .One-Bit-Section-Title > img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .Horizontal-Line{
        height: 1px;
        width: 100%;
        background-color: #767676;
    }
    .Vertical-Line{
        height: 100%;
        width: 1px;
        background-color: #767676;
}

.One-Bit-Main-Container .Section-Header{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    flex-wrap: wrap;
}
.One-Bit-Main-Container .Section-Header > p{
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-size: 60px;
    line-height: 110%;
    margin: 0;

    color: #230404;
}
.One-Bit-Main-Container .Sort{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px 12px;
    gap: 10px;
    height: min-content;

    background: #FFFFFF;
    border-radius: 20px;
    position: relative;

}
.One-Bit-Main-Container .Sort p{
    margin: 0;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 150%;
    /* identical to box height, or 18px */
    text-align: right;
    width: max-content;
    color: #230404;
    cursor: pointer;

}
.One-Bit-Main-Container .Sort img{
    width: 10px;
    cursor: pointer;
}
.One-Bit-Main-Container .Sort .Dropdown-List{
    padding: 0 31px;
    position: absolute;
    border-radius: 20px;
    top: 36px;
    right: 0;
    z-index: 99;
    background: #FFFFFF;
    
    display: flex;
    gap: 10px;
    flex-direction: column;

    border-radius: 10px;
    max-height: 0px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    transition: max-height 0.5s ease-in-out, box-shadow 0.5s ease-in-out, padding-bottom 0.5s ease-in-out;
    /* -webkit-mask-image: -webkit-radial-gradient(white, black); */
}
.One-Bit-Main-Container .Sort.Dropdown-Filter.Active .Dropdown-List{
    max-height: 500px;
    box-shadow: 3px 3px 10px 1px rgba(0, 0, 0, 0.15);
}
.One-Bit-Main-Container .Sort.Dropdown-Filter.Active img.Icon{
  transform: matrix(1, 0, 0, -1, 0, 0);
}
/*.One-Bit-Main-Container .Sort.Dropdown-Filter.Active img.Icon.Mobile.Main-Icon{
    display: none;
}*/
.One-Bit-Main-Container .Sort.Dropdown-Filter .Dropdown-List > .Item:nth-of-type(1){
    padding-top: 24px;
}
.One-Bit-Main-Container .Sort.Dropdown-Filter .Dropdown-List > :last-child{
    padding-bottom: 24px;
}

.One-Bit-Main-Container .Sort .Dropdown-List .Item{
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 10px;
}

.One-Bit-Main-Container .Sort .Dropdown-List .Item input[type="radio"] {
  display: none;
}

.One-Bit-Main-Container .Sort .Dropdown-List .Item .Radio-Custom{
    width: 25px;
    min-width: 25px;
    height: 25px;
    border: 2px solid #969696;
    border-radius: 50%;
    position: relative;
    transition: border-color 0.3s ease;
}
.One-Bit-Main-Container .Sort .Dropdown-List .Item .Radio-Custom::after {
  content: "";
  width: 11px;
  height: 11px;
  background: white;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease;
}

.One-Bit-Main-Container .Sort .Dropdown-List .Item input[type="radio"]:checked + .Radio-Custom{
  border-color: black;
  background-color: black;
}

.One-Bit-Main-Container .Sort .Dropdown-List .Item input[type="radio"]:checked + .Radio-Custom::after{
  transform: translate(-50%, -50%) scale(1);
}

.One-Bit-Main-Container .Sort .Dropdown-List .Item .Text{
    width: max-content;
}
.One-Bit-Main-Container .Banner-Search{
    width: 100%;
    height: 336px;
    object-fit: cover;
    border-radius: 20px;
    overflow: hidden;
}
.One-Bit-Main-Container .Banner-Search img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}
@media (max-width: 1279px) {

    /*.One-Bit-Main-Container .Sort.Dropdown-Filter.Active{
        position: fixed;
        height: 100vh;
        width: 100vw;
        background: #000000CC;
        top: 0;
        left: 0;
        z-index: 11;
        border-radius: 0;

    }*/
    .One-Bit-Main-Container .Sort .Dropdown-List{
        position: fixed;
        top: unset;
        bottom: -50px;
        left: 0;
        padding: 20px;
        border-radius: 0;

    }
    .One-Bit-Main-Container .Sort img{
        width: 25px;   
    }
    .One-Bit-Main-Container .Sort .Dropdown-List img{
        width: 20px;
    }
    /*.One-Bit-Main-Container .Sort.Dropdown-Filter.Active>p
    .One-Bit-Main-Container .Sort.Dropdown-Filter.Active>img{
        display: none;
    }*/
    .One-Bit-Main-Container .Sort.Dropdown-Filter.Active .Dropdown-List{
        padding-bottom: 70px;
        bottom: -50px;
    }

    .One-Bit-Main-Container .Sort.Dropdown-Filter .Dropdown-List > .Item{
        padding-top: 17px;
        padding-bottom: 17px;
        border-bottom: solid 1px #E8E8E8;
        margin: 0;
    }
    .One-Bit-Main-Container .Sort.Dropdown-Filter .Dropdown-List > :first-child{
        padding-top: 0;
    }
    .One-Bit-Main-Container .Sort.Dropdown-Filter .Dropdown-List > .Item:nth-of-type(1){
        padding-top: 40px;
    }
    .One-Bit-Main-Container .Sort.Dropdown-Filter .Dropdown-List > .Item:last-child{
        border: none;
        padding-bottom: 0px;
    }
    .One-Bit-Main-Container .Sort p.Selected-Sort{
        font-size: 15px;
        font-style: normal;
        font-weight: 600;
        line-height: 110%;
    }
    .One-Bit-Main-Container .Sort .Dropdown-List p.Title{
        color: #230404;
        font-size: 30px;
        font-style: normal;
        font-weight: 600;
        line-height: 110%; /* 33px */
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .One-Bit-Main-Container .Section-Header > p{
        width: 100%;
        margin-bottom: 1rem;
    }
}

@media (max-width: 439px) {
    :root{
        --padding-x-main-container: 10px;
        --padding-bottom-main-container: 60px;
        --gap-main-container: 30px;
    }
    .One-Bit-Section-Title{
        height: 250px;

        font-size: 48px;

        padding: 64px 62px;
        text-align: center;
    }
    .One-Bit-Main-Container .Banner-Search{
        height: 252px;
    }
    .One-Bit-Main-Container .Section-Header > p{
        font-size: 36px;
    }
}


@media (min-width: 440px) and (max-width: 767px) {
    :root{
        --padding-x-main-container: 20px;
        --padding-bottom-main-container: 80px;
        --gap-main-container: 40px;
    }
    .One-Bit-Section-Title{
        height: 252px;

        font-size: 48px;

        padding: 64px 62px;
        text-align: center;
    }
    .One-Bit-Main-Container .Banner-Search{
        height: 252px;
    }
    .One-Bit-Main-Container .Section-Header > p{
        font-size: 36px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    :root{
        --padding-x-main-container: 20px;
        --padding-bottom-main-container: 80px;
        --gap-main-container: 40px;
    }
    .One-Bit-Section-Title{
        height: 275px;

        font-size: 60px;
    }
    .One-Bit-Main-Container .Banner-Search{
        height: 275px;
    }
    .One-Bit-Main-Container .Section-Header > p{
        font-size: 48px;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    :root{
        --padding-x-main-container: 20px;
        --padding-bottom-main-container: 80px;
        --gap-main-container: 40px;
    }
    .One-Bit-Section-Title{
        font-size: 60px;
    }

}

@media (min-width: 1440px) and (max-width: 1919px) {
    :root{
        --padding-x-main-container: 50px;
        --padding-bottom-main-container: 80px;
        --gap-main-container: 40px;
    }
}

@media (min-width: 1920px) {
    .One-Bit-Sub-Container{
        max-width: 1720px;
        /* padding-bottom: 100px; */
    }
    .One-Bit-Sub-Container{
        gap: 50px;
    }
    .One-Bit-Sub-Container-2{
        gap: 100px;
    }
    ::root{
        --padding-x-main-container: 20px;
        --padding-bottom-main-container: 80px;
        --gap-main-container: 40px;
    }
}

@media (max-width: 1279px) {
    .No-Mobile{
        display: none !important;
    }
    .One-Bit-Main-Container .Sort.Dropdown-Filter.Active .Dropdown-List{
        max-height: 800px;
    }
}
@media (min-width: 1280px) {
    .Mobile{
        display: none !important;
    }
}
@media (max-width: 757px) {
    .Hidden-Sm{
        display: none !important;
    }
}

.No-Hover{
    /*pointer-events: none;*/
}

.One-Bit-Sub-Container.Search{
    padding-top: 27px;
}

.BG-Outlet{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/public/images/common/demo/BG/bg-outlet.jpg');
    background-position: center;
    background-size: cover;
}

.BG-Guides{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/public/images/common/demo/BG/bg-guides.jpg');
    background-position: center;
    background-size: cover;
}

.BG-Store-Registration{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/public/images/common/demo/BG/bg-store-registration.jpg');
    background-position: center;
    background-size: cover;    
}

.BG-Deal{
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/public/images/common/demo/BG/bg-deal.jpg');
    background-position: center;
    background-size: cover;
}

.Spacer{
    min-width: 1px;
}

.Self-Center{
    align-self: center;
}

.Filters-Container .Cta-Container{
    align-self: stretch;
    display: flex;
    flex-direction: flex;
    align-items: stretch;
    gap: 40px;
}

.Filters-Container .Cta-Container > .btn-One-Bit{
    flex: 1;
    padding-top: 18px;
    padding-bottom: 18px;
    text-align: center;
}

.Brands-Slider{
    display: flex;
    overflow: hidden;
    min-height: 140px;
}

.Slider{
    padding-left: 90px;
    display: flex;
    gap: 90px;
    align-items: center;
}
.Slider.Active{
    animation: move-left 30s linear infinite;
}

.Text-Uppercase{
    text-transform: uppercase;
}
.Z-Index-1{
    position: relative;
    z-index: 1;
}
@keyframes move-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 767px) {
    .Filters-Container .Cta-Container{
        gap: 20px;
    }
    .Slider{
        padding-left: 50px;
        display: flex;
        gap: 50px;
        align-items: center;
    }
}
button{
    cursor: pointer;
}


.One-Bit-Main-Container.Login-Container form span.Checkmark {
  cursor: pointer;
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;

  border: 1px solid #969696;
  border-radius: 2px;

}

.One-Bit-Main-Container.Login-Container form input[type="checkbox"]:checked + .Checkmark {
  opacity: 1;
  border: none;
  background-image: url('/public/images/common/demo/filters/checkmark.svg');
  background-repeat: no-repeat;
  background-position: center;
}

.One-Bit-Main-Container.Login-Container form input[type="checkbox"]{
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    cursor: pointer;
}