/******** GENERAL ********/
* {
    font-family: 'Inter', sans-serif;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    overflow-x: hidden;
}

/******** FONT FAMILY ********/
.family-urbanist {
    font-family: 'Urbanist', sans-serif;
}

.family-jost {
    font-family: 'Jost', sans-serif;
}

.family-outfit {
    font-family: 'Outfit', sans-serif;
}

.family-dm-sans {
    font-family: 'DM Sans', sans-serif;
}

.family-open-sans {
    font-family: 'Open Sans', sans-serif;
}

.family-poppins {
    font-family: 'Poppins', sans-serif;
}

/******** CONTAINERS ********/
.container-xl {
    width: 95%;
    max-width: 1800px;
}

.container-lg {
    width: 92%;
    max-width: 1630px;
}

.container-md {
    width: 80%;
    max-width: 1101px;
}

/******** OVERFLOW ********/
.no-overflow {
    overflow: hidden;
}

.scroll-overflow {
    overflow-x: scroll;
}

/******** BACKGROUND COLOR ********/
.bg-black {
    background-color: #000000;
}

.bg-gray-900 {
    background-color: #0F172A;
}

.bg-gray-800 {
    background-color: #141518;
}

.bg-gray-400 {
    background-color: #EEF2F6;
}

.bg-gray-300 {
    background-color: #F4F4F4;
}

.bg-gray-200 {
    background-color: #F5F5FA80;
}

.bg-gray-100 {
    background-color: #F8FAFC;
}

.bg-red-200 {
    background-color: #FFF0F0;
}

.bg-yellow-500 {
    background-color: #E6C100;
}

.bg-yellow-400 {
    background-color: #FFD601;
}

.bg-white {
    background-color: #FFFFFF;
}

/******** ******/
.box-center {
    left: 50%;
    translate: -50%;
}

/******** TEXT COLOR ********/
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

/******** TEXT COLOR ********/
.text-white {
    color: #FFFFFF;
}

.text-red-400 {
    color: #FF4747
}

.text-black {
    color: #000000;
}

.text-black-900 {
    color: #1C1D21;
}

.text-gray-900 {
    color: #0F172A;
}

.text-gray-700 {
    color: #475569;
}

.text-gray-500 {
    color: #64748B;
}

.text-gray-400 {
    color: #9096AA;
}

.text-gray-300 {
    color: #94A3B8;
}

.text-blue-500 {
    color: #2563EB;
}

.text-blue-600 {
    color: #0A13FF;
}

.text-pink-400 {
    color: #F472B6;
}

/******** TEXT SIZE ********/
.text-143 {
    font-size: 143px;
}

.text-74 {
    font-size: 74px;
}

.text-75 {
    font-size: 75px;
}

.text-48 {
    font-size: 48px;
}

.text-42 {
    font-size: 42px;
}

.text-36 {
    font-size: 36px;
}

.text-34 {
    font-size: 34px;
}

.text-32 {
    font-size: 32px;
}

.text-28 {
    font-size: 28px;
}

.text-26 {
    font-size: 26px;
}

.text-24 {
    font-size: 24px;
}

.text-22 {
    font-size: 22px;
}

.text-21 {
    font-size: 21px;
}

.text-20 {
    font-size: 20px;
}

.text-18 {
    font-size: 18px;
}

.text-17 {
    font-size: 17px;
}

.text-16 {
    font-size: 16px;
}

.text-15 {
    font-size: 15px;
}

.text-14 {
    font-size: 14px;
}

.text-13 {
    font-size: 13px;
}

.text-12 {
    font-size: 12px;
}

.text-10 {
    font-size: 10px;
}

.text-9 {
    font-size: 9px;
}

/******** LINE HEIGHT ********/
.l-height-1 {
    line-height: 1;
}

.l-height-1-2 {
    line-height: 1.2;
}

.l-height-1-3 {
    line-height: 1.3;
}

.l-height-1-4 {
    line-height: 1.4;
}

.l-height-1-5 {
    line-height: 1.5;
}

.l-height-1-7 {
    line-height: 1.7;
}

.l-height-20px {
    line-height: 20px;
}

.l-height-22px {
    line-height: 22px;
}

.l-height-24px {
    line-height: 24px;
}

.l-height-29px {
    line-height: 29px;
}

.l-height-57px {
    line-height: 57px;
}

.l-height-92px {
    line-height: 92px;
}

/******** TEXT DECORATION ********/
.linethrough {
    text-decoration: line-through;
}

.no-decoration {
    text-decoration: none;
}

/******** TEXT WIDTH ********/
.font-bold {
    font-weight: 700;
}

.font-semi-bold {
    font-weight: 600;
}

.font-medium {
    font-weight: 500;
}

.font-regular {
    font-weight: 400;
}

/******** TEXT TRANSFORM ********/
.uppercase {
    text-transform: uppercase;
}

/******** LETTER SPACING ********/
.letter-spacing-n-0-22 {
    letter-spacing: -0.22px;
}

.letter-spacing-n-0-33 {
    letter-spacing: -0.33px;
}

.letter-spacing-0-4 {
    letter-spacing: 0.4px;
}

.letter-spacing-0-5 {
    letter-spacing: 0.5px;
}

.letter-spacing-1-5 {
    letter-spacing: 1.5px;
}

/******** WIDTH ********/
.w-full {
    width: 100% !important;
}

.w-1-2 {
    width: 50%;
}

.w-1-5 {
    width: 20%;
}

.w-4-5 {
    width: 80%;
}

.half-div {
    width: 45.5%;
    max-width: 810px;
}

.w-36px {
    width: 36px;
}

.w-40px {
    width: 40px;
}

.w-62px {
    width: 62px;
}

.w-80px {
    width: 80px;
}

.w-158px {
    width: 158px;
}

.w-226px {
    width: 226px;
}

.w-259px {
    width: 259px;
}

.w-300px {
    width: 300px;
}

.w-400px {
    width: 400px;
}

.w-500px {
    width: 500px;
}

.w-550px {
    width: 550px;
}

.w-600px {
    width: 600px;
}

.w-610px {
    width: 610px;
}

.w-670px {
    width: 670px;
}

.w-820px {
    width: 820px;
}

.w-976px {
    width: 976px;
}

/******** MAX WIDTH ********/
.no-max-w {
    max-width: none;
}

.max-w-627 {
    max-width: 627px;
}

.max-w-410px {
    max-width: 410px;
}

.max-w-340px {
    max-width: 340px;
}

.max-w-250px {
    max-width: 250px;
}

.max-w-171px {
    max-width: 171px;
}

.max-w-95vw {
    max-width: 95vw;
}

.min-w-400px {
    min-width: 400px;
}


/******** HEIGHT ********/

.h-full {
    height: 100%;
}

.h-16px {
    height: 16px;
}

.h-18px {
    height: 18px;
}

.h-21px {
    height: 21px;
}

.h-24px {
    height: 24px;
}

.h-32px {
    height: 32px;
}

.h-36px {
    height: 36px;
}

.h-40px {
    height: 40px;
}

.h-48px {
    height: 48px;
}

.h-56px {
    height: 56px;
}

.h-62px {
    height: 62px;
}

.h-125px {
    height: 125px;
}

.h-208px {
    height: 208px;
}

.h-382px {
    height: 382px;
}

.h-415px {
    height: 415px;
}

.h-560px {
    height: 560px;
}

/******** MAX HEIGHT ********/
.max-h-92px {
    max-height: 92px;
}

.max-h-191px {
    max-height: 191px;
}

.max-h-206px {
    max-height: 206px;
}

/******** PADDING ********/
.p-12 {
    padding: 12px;
}

.p-25 {
    padding: 25px;
}

.pv-64 {
    padding-top: 64px;
    padding-bottom: 64px;
}

.pv-8 {
    padding-top: 3px;
    padding-bottom: 3px;
}

.pv-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.pv-82 {
    padding-top: 82px;
    padding-bottom: 82px;
}

.pv-93 {
    padding-top: 93px;
    padding-bottom: 93px;
}

.pl-16 {
    padding-left: 16px;
}

.pl-42 {
    padding-left: 42px;
}

.pl-56 {
    padding-left: 56px;
}

.pl-181 {
    padding-left: 181px;
}

.pr-56 {
    padding-right: 56px;
}

.pr-36 {
    padding-right: 36px;
}

.pt-71 {
    padding-top: 71px;
}

.pt-35 {
    padding-top: 35px;
}

.pt-30 {
    padding-top: 30px;
}

.pt-60 {
    padding-top: 60px;
}

.pb-60 {
    padding-bottom: 60px;
}

.pb-83 {
    padding-bottom: 83px;
}

.pb-90 {
    padding-bottom: 90px;
}

.pv-45 {
    padding-top: 45px;
    padding-bottom: 45px;
}

.ph-32 {
    padding-left: 32px;
    padding-right: 32px;
}

.ph-48 {
    padding-left: 48px;
    padding-right: 48px;
}

.pt-143 {
    padding-top: 143px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pb-7-4vw {
    padding-bottom: 7.4vw;
}

/******** MARGIN ********/
.m-0 {
    margin: 0px;
}

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

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

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

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

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

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

.mr-6 {
    margin-right: 6px;
}

.mr-8 {
    margin-right: 8px;
}

.mr-16 {
    margin-right: 16px;
}


.mr-19 {
    margin-right: 19px;
}

.mr-24 {
    margin-right: 24px;
}

.mr-50 {
    margin-right: 50px;
}

.mr-88 {
    margin-right: 88px;
}

.mr-182 {
    margin-right: 182px;
}


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ml-8 {
    margin-right: 8px;
}

.ml-9 {
    margin-right: 9px;
}

.ml-10 {
    margin-right: 10px;
}

.ml-13 {
    margin-right: 10px;
}

.ml-24 {
    margin-left: 24px;
}

.ml-27 {
    margin-left: 27px;
}

.ml-34 {
    margin-left: 34px;
}

.ml-42 {
    margin-left: 42px;
}

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

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

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

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

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

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

/******** BORDER ********/
.border-0 {
    border: 0;
}

.border-t-1 {
    border-top: 1px solid;
}

.border-r-1 {
    border-right: 1px solid;
}

.border-l-1 {
    border-left: 1px solid;
}

.border-b-1 {
    border-bottom: 1px solid;
}

.border-1 {
    border: 1px solid;
}

/******** BORDER COLOR ********/

.border-gray-100 {
    border-color: #ECEFF4;
}

/******** BORDER RADIUS ********/
.radius-8 {
    border-radius: 8px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-12 {
    border-radius: 12px;
}

.radius-16 {
    border-radius: 16px;
}

/******* CURSOR ******/
.pointer {
    cursor: pointer;
}

/******* TRANSITION ******/
.transition-all {
    transition: all 0.2s;
}

/******** OPACITY ********/

.opacity-80 {
    opacity: 0.8;
}

/******** DISPLAY ********/
.block {
    display: block;
}

.display-none {
    display: none !important;
}

.inline {
    display: inline-block;
}

.flex {
    display: flex;
}

.flex-wrap {
    flex-wrap: wrap;
}

.no-shrink {
    flex-shrink: 0;
}

.flex-col {
    flex-direction: column;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-end {
    justify-content: end;
}

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

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

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

.align-bottom {
    align-items: baseline;
}

.col-gap-4 {
    column-gap: 4px;
}

.col-gap-8 {
    column-gap: 8px;
}

.col-gap-10 {
    column-gap: 10px;
}

.col-gap-12 {
    column-gap: 12px;
}

.col-gap-16 {
    column-gap: 16px;
}

.col-gap-22 {
    column-gap: 22px;
}

.row-gap-8 {
    row-gap: 1px;
}

.row-gap-15 {
    row-gap: 15px;
}

.row-gap-16 {
    row-gap: 16px;
}

.row-gap-30 {
    row-gap: 30px;
}

.row-gap-36 {
    row-gap: 36px;
}

.row-gap-44 {
    row-gap: 44px;
}

.col-gap-15 {
    column-gap: 15px;
}

.col-gap-18 {
    column-gap: 18px;
}

.col-gap-20 {
    column-gap: 20px;
}

.col-gap-24 {
    column-gap: 24px;
}

.col-gap-28 {
    column-gap: 24px;
}

.col-gap-32 {
    column-gap: 32px;
}

.col-gap-40 {
    column-gap: 40px;
}


.col-gap-48 {
    column-gap: 48px;
}

/******** ASPECT RATION ********/
.aspect-ratio-7-5 {
    aspect-ratio: 7 / 5;
}

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

.absolute {
    position: absolute;
}

/******** FORMS ********/
.form-search {
    width: 327px;
    height: 40px;
    border-radius: 100px;
    background-color: #2C2D3A;
    overflow: hidden;
    position: relative;
}

.form-search input[type="search"] {
    width: 100%;
    height: 100%;
    padding-left: 16px;
    padding-right: 120px;
    background-color: transparent;
    position: absolute;
    left: 0;
    border: 0;
    font-weight: 400;
    font-size: 14px;
    z-index: 5;
    color: #FFFFFF;
}

.form-search input[type="search"]::placeholder {
    color: #FFFFFF;
    opacity: 0.8;
}

.form-search button {
    background-color: #FFD601;
    position: absolute;
    right: 0;
    width: 97px;
    height: 100%;
    border-radius: 100px;
    border: 0;
    z-index: 5;
    font-size: 14px;
    color: #0F172A;
    font-weight: 600;
    transition: all 0.2s;
}

.form-search button:hover {
    background-color: #E6C100;
    cursor: pointer;
}

.form-filter {
    min-width: 470px;
    background-color: #FFFFFF;
    border-radius: 26px;
    padding: 36px 23px;
}

.form-filter .image-radio {
    border-radius: 16px;
    width: 94px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid #EEF2F6;
    row-gap: 18px;
    padding: 5px;
    cursor: pointer;
    transition: all 0.2s;
}

.form-filter .image-radio:hover {
    border: 1px solid #E6C10040;
    cursor: pointer;
}

.image-radio-label input[type="radio"] {
    position: absolute;
    height: 0;
    width: 0;
    top: -100px;
    opacity: 0;
}

.image-radio-label .radiomark {
    position: absolute;
    left: 76px;
    top: -8px;
    height: 14px;
    width: 14px;
    border-radius: 50%;
}

.image-radio-label input:checked ~ .radiomark {
    background-color: #0F172A;
}

.image-radio-label input:checked ~ .radiomark:after {
    z-index: 5;
}

.image-radio-label .radiomark::after {
    content: "";
    position: absolute;
    display: none;
}

.image-radio-label:has(input[type="radio"]:checked) .image-radio {
    border: 1px solid #E6C100;
}

.image-radio-label .radiomark::after {
    width: 76%;
    height: 76%;
    display: flex;
    background-image: url("/icons/check.svg");
    justify-content: center;
    align-items: center;
    z-index: -1;
    background-size: cover;
    margin: 2px;
}

.filter-select {
    position: relative;
}

.filter-select select {
    display: none;
}

.filter-select .select-selected {
    background-color: #EEF2F6;
    color: #64748B;
    border-radius: 8px;
    font-size: 14px;
    height: 44px;
    display: flex;
    align-items: center;
}

.filter-select .select-selected:after {
    position: absolute;
    content: "";
    top: 12px;
    right: 8px;
    width: 21px;
    height: 21px;
    background-image: url("/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: center right;
}

.filter-select .select-selected.select-arrow-active:after {
    transform: rotate(180deg);
}

.filter-select .select-items div, .select-selected {
    color: #64748B;
    padding: 0 16px;
    cursor: pointer;
    user-select: none;
}

.filter-select .select-items div {
    color: #64748B;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;

}

.filter-select .select-items {
    overflow: hidden;
    position: absolute;
    padding-top: 8px;
    border-radius: 8px;
    background-color: #EEF2F6;
    color: #64748B;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
    font-size: 14px;

    height: 300px;
    overflow-y: scroll;
}



.filter-select .select-hide {
    display: none;
}

.filter-select .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.filter-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.filter-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.filter-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FFFFFF;
    -webkit-transition: .4s;
    transition: .4s;
}

.filter-switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 0px;
    bottom: 1px;
    background-color: #1E293B;
    -webkit-transition: .4s;
    transition: .4s;
}

.filter-switch input:checked + .slider {
    background-color: #FFFFFF;
}

.filter-switch input:focus + .slider {
    box-shadow: 0 0 1px #FFFFFF;
}

.filter-switch input:checked + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

.filter-switch .slider.round {
    border-radius: 1000px;
    height: 100%;
}

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

.form-filter button {
    margin-top: 12px;
    background-color: #FFD601;
    width: 100%;
    border-radius: 8px;
    color: #000000;
    height: 56px;
    font-size: 16px;
    text-transform: uppercase;
    display: flex;
    column-gap: 8px;
    letter-spacing: 0.7px;
    font-weight: 600;
    transition: all 0.2s;
}

.form-filter button:hover {
    background-color: #E6C100;
    cursor: pointer;
}

.form-newsletter input[type="email"] {
    width: 370px;
    height: 54px;
    border: 1px solid #000000;
    border-radius: 6px;
    padding-left: 19px;
    font-size: 16px;
}

.form-newsletter button {
    width: 190px;
    height: 58px;
    background-color: #000000;
    border: 1px solid #000000;
    cursor: pointer;
    border-radius: 6px;
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    column-gap: 12px;
    font-size: 16px;
    transition: all 0.2s;
}

.form-newsletter button:hover {
    background-color: #0F172A;
    cursor: pointer;
}

#search-filter label {
    position: relative;
}

#search-filter input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

#search-filter input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

#search-filter .checkmark {
    position: relative;
    min-height: 40px;
    min-width: 40px;
    background-color: #F8FAFC;
    margin-right: 16px;
    border-radius: 8px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


#search-filter .checkmark::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;

    border-radius: 50%;
    border: 1px solid #000;
}

#search-filter .checkmark.active::after {
    display: block;
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: black;
    border-radius: 50%;
}

#search-filter .checkmark2::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;

    border-radius: 0%;
    border: 1px solid #000;
}

#search-filter .checkmark2.active::after {
    display: block;
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: black;
    border-radius: 0%;
}


#search-filter label:has(input[type="radio"]) .checkmark::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;

    border-radius: 50%;
    border: 1px solid #000;
}

#search-filter label:has(input[type="radio"]:checked) .checkmark::after {
    display: block;
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: black;
    border-radius: 50%;
}

#search-filter button {
    background-color: #FFD601;
    color: #0F172A;
    transition: all 0.2s;
}

#search-filter button:hover {
    background-color: #E6C100;
    cursor: pointer;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity {
    display: flex;
}

.quantity input {
    width: 31px;
    height: 42px;


    line-height: 1.7;
    border: 1px solid #ECEFF4;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    padding: 0;
    margin: 0;
    text-align: center;
}

.number-buttons {
    width: 25px;
    height: 42px;
    display: inline-flex;
    flex-direction: column;
    border: 1px solid #ECEFF4;
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-left: 0;
    align-items: center;
    justify-content: space-around;
}

/******** SHADOWS ***********/
.shadow-m {
    box-shadow: 0px 0px 4px #D9DEE940;
}

.shadow-m2 {
    box-shadow: 0px 4px 4px #D9DEE940;
}

shadow-xl {
    box-shadow: 4px 4px 35px #A4A3BD4D;
}

/******** COMPONENTS ********/
.vertical-separator {
    background-color: #64646D;
    width: 1px;
    height: 12px;
}

.vertical-separator-light-gray {
    background-color: #9096AA;
    width: 1px;
    height: 12px;
}

.horizontal-separator {
    background-color: #EAECF1;
    width: 100%;
    height: 1px;
    margin-top: 5px;
}

.bold-horizontal-separator {
    background-color: #000000;
    width: 205px;
    height: 3px;
}

.menu-links {
    padding: 8px 16px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 8px;
    position: relative;
}

.menu-links:hover {
    background-color: #1A1B23;
}

.navigation-dropdown-div {
    position: absolute;
    background: white;
    top: 40px;
    left: 15px;
    padding: 19px;
    display: flex;
    flex-direction: column;
    width: max-content;
    row-gap: 15px;
}

.navigation-dropdown-div > a{
    color: #0F172A;
    display: block;
    text-decoration: none;
}

.icon-button {
    width: 40px;
    height: 40px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.icon-button:hover {
    background-color: #3B3C4E;
}

#top-bar {
    background-image: url("/images/navigation-bg.png");
    background-repeat: no-repeat;
    background-position-y: top;
    background-position-x: right;
    flex-wrap: wrap;
}

#navigation {
    position: relative;
    z-index: 10;
}

#top-bar div {
    height: 38px;
}


#top-bar * {
    font-family: 'Inter', sans-serif;
}

#hero .container-lg {
    padding: 41px 0;
}

.hero-cta {
    width: 161px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E6C100;
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.2s;
}

.gray-input-text {
    padding-left: 16px;
    background-color: #EEF2F6;
    color: #64748B;
    border-radius: 8px;
    font-size: 14px;
    height: 44px;
    display: flex;
    align-items: center;
    border: 0;
}

.hero-cta:hover {
    background-color: #1A1A1A;
}

.product-buttons-div {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.product-buttons-div-25 {
    position: absolute;
    top: 25px;
    left: 25px;
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.product-button {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #ECEFF4;
    box-shadow: 0px 0px 4px #D9DEE940;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    cursor: pointer;
    background-color: #FFFFFF;
}

.product-button:hover {
    background-color: #D9DEE940;
}

.top-offer-tag {
/*    bottom: 0;  */
    position: absolute;
    background-image: url("/icons/offer.svg");
    background-size: contain;
    left: 0;
    width: 132px;
    height: 53px;
    line-height: 53px;
    overflow: hidden;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: #0F172A;
    padding-left: 10px;
min-width: 140px;
text-align: center;
}

.top-offer-tag.yellow-only {
    background-image: url("/icons/only-yellow-block.svg");
}

.best-offer-tag {
/*    bottom: 0;  */
    position: absolute;
    background-image: url("/icons/best-offer.svg");
    background-size: contain;
    left: 0;
    width: 165px;
    height: 53px;
    line-height: 53px;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    padding-left: 10px;
min-width: 140px;
text-align: center;
}

.dimension-grid {
    margin-top: 30px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(min(185px), 1fr));
}

.summer-offer-grid {
    display: grid;
    gap: 20px;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 23%), 1fr))
}

.dimension-link {
    text-decoration: none;
    justify-content: center;
    align-items: center;
    display: flex;
    color: #1E293B;
    font-weight: 500;
    font-size: 16px;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #DFE1E5;
    transition: all 0.2s;
    background-color: #FFFFFF;
}

.dimension-link:hover {
    border: 1px solid #1E293B;
}

#hero {
    padding-top: 146px;
    padding-bottom: 41px;
    /*
    background-image: url("/images/wheels.png"), url("/images/hero-bg2.png");
    background-size: 400px, cover;
    background-repeat: no-repeat;
    background-position: 830px 630px, left bottom;   */
/*    background-image: url("/images/hero-bg5.png?v=3");
    background-image: url("/images/hero-23.jpg?v=4");*/
   /* background-image: url("/images/hero2024.jpg?v=4");*/
  /*  background-image: url("/images/hero2024-v2.jpg?v=4");*/
  /*  background-image: url("/images/hero2024-v3.jpg?v=4");*/
  /*   background-image: url("/images/kl344.jpg?v=5");*/
    background-image: url("/images/slider1psd.jpg?v=1");


    background-size: cover;
    background-repeat: no-repeat;


}
/*
#banner {
    padding-top: 146px;
    height: 185px;
    background-color: #FFD601;
    background-size: 200px, 55%;
    background-repeat: no-repeat;
    background-position: 50% 100%, right bottom;
}
*/
#banner {
    padding-top: 146px;
    height: 175px;
    background-color: #FFD601;
    background-size:   auto;
    background-repeat: no-repeat;
    background-position:right bottom;
}

#banner-akcija {
    padding-top: 146px;
    height: 175px;
    background-color: #FFD601;
    background-size:  contain;
    background-repeat: no-repeat;
    background-position:right bottom;
}


#product, #checkout {
    padding-top: 132px;
    margin-top: 48px;
}

#menu {
    height: 94px;
}

.advance-filter {
    padding-left: 12px;
    margin-left: 12px;
    border-left: 1px solid #ECEFF4;
}


.add-to-cart-button {
    text-decoration: none;
    color: black;
    width: 160px;
    height: 44px;
    background-color: #FFD601;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 5px;
    border: 0;
    border-radius: 6px;
    transition: all 0.2s;
}

.add-to-cart-button:hover, .checkout-button:hover {
    background-color: #E6C100;
    cursor: pointer;
}

.black-cta, .yellow-cta, .black-cta-s {
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    height: 52px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    transition: all 0.2s;
    text-decoration: none;
    margin-top: 9px;
}

.black-cta, .yellow-cta {
    width: 175px;
}

.black-cta-s {
    width: 153px;
}

.black-cta, .black-cta-s {
    background-color: #000000;
    color: #FFFFFF;
}

.black-cta:hover {
    background-color: #0F172A;
    cursor: pointer;
}

.yellow-cta {
    background-color: #FFD601;
    color: #000000;
}

.yellow-cta:hover, .read-more-cta:hover {
    background-color: #E6C100;
    cursor: pointer;
}

.product-grid-trigger {
    height: 40px;
    width: 151px;
    border-radius: 8px;
    border: 1px solid #ECEFF4;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 4px;
    color: #0F172A;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.7;
    transition: all 0.2s;
}

.product-grid-trigger:hover {
    color: #FFFFFF;
}

.search-icons {
    height: 40px;
    width: 40px;
    border-radius: 8px;
    border: 1px solid #ECEFF4;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.search-icons:hover, .product-grid-trigger:hover {
    background-color: #687087;
    cursor: pointer;
}

.search-icons:hover img, .product-grid-trigger:hover img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.search-icons.active, .product-grid-trigger.active {
    background-color: #0F172A;
    color: white;
    cursor: pointer;
}

.search-icons.active img, .product-grid-trigger:hover img, .product-grid-trigger.active img {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.product-search-grid {
    display: grid;
    gap: 35px;
    grid-template-columns: repeat(auto-fill, minmax(max(288px), 1fr));
}

.tire-bg {
/*    background-image: url("/images/tiers.png"); */
    background-image: url("/images/menjava-2.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size:  cover;
}

.dark-tire-bg {
    background-image: url("/images/dark-box-bg-image.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}


.avtooptika-bg {
    background-image: url("/images/avto-optika2.png");
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size:  cover;
}


.blog-date {
    background-color: #ffffff33;
    color: white;
    height: 79px;
    width: 63px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

.blog-date .day {
    font-family: 'DM Sans', sans-serif;
    font-size: 20px;
    line-height: 24px;
}

.blog-date .month {
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    line-height: 24px;
}

.read-more-cta {
    width: 123px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: black;
    column-gap: 8px;
    border-radius: 6px;
    background-color: #FFD601;
    transition: all 0.2s;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.blog-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr 1fr 1fr;
}

.footer-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: 1fr 1fr 1fr;
}

.yellow-circle-bg {
    border-radius: 50%;
    background-color: #FFD601;
    width: 480px;
    height: 480px;
    position: absolute;
    right: -2%;
}

.footer-link-header {
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    letter-spacing: 0.4px;
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.footer-link:hover {
    opacity: 1;
}

.footer-current-page {
    text-decoration: underline !important;
}

.footer-link {
    color: #FFFFFF;
    display: block;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 15px;
    text-decoration: none;
    opacity: 0.8;
    transition: all 0.2s;
}

.footer-separator {
    width: 45px;
    height: 1px;
    background-color: #ECEFF4;
    margin-bottom: 25px;
    opacity: 0.25;
}

.social-horizontal-separator {
    width: 100%;
    background-color: #FFFFFF;
    height: 1px;
    margin-bottom: 30px;
}

.bottom-left-3 {
    bottom: 3px;
    left: 3px
}

.scroll-to-top {
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
}

.load-more {
    display: none;
}

.newsletter-p {
    margin-top: 29px;
}

.newsletter-sh {
    margin-top: 11px;
    margin-bottom: 44px
}


.slider, .slider-mobile {
    height: 5px;
    position: relative;
    background: #EEF2F6;
    border-radius: 5px;
}

.slider .progress, .slider-mobile .progress-mobile {
    width: auto;
    height: 100%;
    left: 4%;
    right: 4%;
    position: absolute;
    border-radius: 5px;
    background: #FFD601;
}

.range-input, .range-input-mobile {
    position: absolute;
    width: 100%;
    top: -2px;
    left: -2px;
}

.range-input input, .range-input-mobile input {
    position: absolute;
    width: 100%;
    height: 5px;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    height: 14px;
    width: 14px;
    border-radius: 50%;
    background: #0F172A;
    pointer-events: auto;
    -webkit-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

input[type="range"]::-moz-range-thumb {
    height: 14px;
    width: 14px;
    border: none;
    border-radius: 50%;
    background: #0F172A;
    pointer-events: auto;
    -moz-appearance: none;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}

#min-price, #max-price, #min-price-mobile, #max-price-mobile {
    position: absolute;
    height: 36px;
    width: 42px;
    border-radius: 8px;
    background-color: #EEF2F6;
    color: #0F172A;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}

#min-price, #min-price-mobile {
    left: -1.8%;
}

#max-price, #max-price-mobile {
    right: -4%;
}

.filter-select.pagination-items {
    position: relative;
    height: 54px;
}

.filter-select.pagination-items select {
    display: none; /*hide original SELECT element:*/
}

.filter-select.pagination-items .select-selected {
    background-color: white;
    color: #64748B;
    border-radius: 8px;
    font-size: 16px;
    height: 48px;
    display: flex;
    align-items: center;
    min-width: 130px;
    border: 1px solid #ECEFF4;
}

.filter-select.pagination-items .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 16px;
    width: 21px;
    height: 21px;
    background-image: url("/icons/chevron-down.svg");
    background-repeat: no-repeat;
    background-position: center right;
}

.filter-select.pagination-items .select-selected.select-arrow-active:after {
    transform: rotate(180deg);
}

.filter-select.pagination-items .select-items div, .select-selected {
    color: #64748B;
    padding: 0 16px;
    cursor: pointer;
    user-select: none;
}

.filter-select.pagination-items .select-items div {
    color: #64748B;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
}

.filter-select.pagination-items .select-items {
    padding-top: 0;
    background-color: white;
    color: #64748B;
    font-size: 16px;
    border: 1px solid #ECEFF4;
}

.filter-select.pagination-items .select-items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

.pagination-link {
    height: 48px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #64748B;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.2px;
    border-radius: 8px;
    border: 1px solid #ECEFF4;
    transition: all 0.2s;
    text-decoration: none;
}

.pagination-link.current {
    color: #0F172A;
    background-color: #64748B;
}

.pagination-link:hover {
    color: white;
    background-color: #64748B;
    cursor: pointer;
}

.pagination-link:hover img {
    filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(200%) contrast(106%);
}

.product-gallery-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    background-color: #EEF2F6;
    border-radius: 8px;
    border: 2px solid #ECEFF4;
    transition: all 0.2s;
    aspect-ratio: 160 / 138;
    cursor: pointer;
}

.product-gallery-image img {
    height: 95%;
    cursor: pointer;
}

.product-gallery-image:hover {
    border: 2px solid #ffec8e;
}

.product-gallery-image.active {
    border: 2px solid #FFD601;
}

.product-season {
    position: absolute;
    left: 12px;
    top: -22px;
}

.filter-select.order-dropdown {
    position: relative;
    width: 181px;
    height: 40px;
    color: #0F172A;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.7;
    transition: all 0.2s;
}

.product-grid-trigger:hover, .filter-select.order-dropdown .select-selected:hover {
    color: #FFFFFF;
    cursor: pointer;
    background-color: #687087;
}

.filter-select.order-dropdown .select-selected:hover:after {
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

.filter-select.order-dropdown select {
    display: none;
}


.filter-select.order-dropdown .select-selected {
    background-color: white;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.7;
    color: #0F172A;
    border-radius: 8px;
    height: 40px;
    display: flex;
    align-items: center;
    min-width: 130px;
    border: 1px solid #ECEFF4;
    transition: all 0.2s;
}

.filter-select.order-dropdown .select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 16px;
    height: 16px;
    background-image: url("/icons/sort-descending.svg");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
}

.filter-select.order-dropdown .select-selected.select-arrow-active:after {
    transform: rotate(180deg);
}

.filter-select.order-dropdown .select-items div, .select-selected {
    color: #64748B;
    padding: 0 16px;
    cursor: pointer;
    user-select: none;
}

.filter-select.order-dropdown .select-items div {
    color: #64748B;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
}

.filter-select.order-dropdown .select-items {
    padding-top: 0;
    background-color: white;
    color: #64748B;
    font-size: 16px;
    border: 1px solid #ECEFF4;
}

.performance-info {
    display: grid;
    grid-template-rows: 48px;
    grid-template-columns: 7fr 12fr;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.1px;
    line-height: 20px;
    color: #0F172A;
}

.progress {
    position: relative;
    width: 216px;
    height: 8px;
    border-radius: 5px;
    overflow: hidden;
    background-color: #F5F8FE;
}

.progress::after {
    display: block;
    content: '';
    position: relative;
    left: 0;
    border-radius: 5px;
    top: 0;
    height: 100%;
}

.progress.prog-100::after {
    width: 100%;
}

.progress.prog-71::after {
    width: 71%;
}

.progress.prog-50::after {
    width: 50%;
}

.progress.orange::after {
    background-color: #FA9B0C;
}

.progress.olive::after {
    background-color: #C1C526;
}

.progress.green::after {
    background-color: #24D088;
}

.quantity-product {
    width: 401px;
    margin-left: 21px;
/*    margin-top: 13px;   */
/*
    border-radius: 8px;
    border: 1px solid #ECEFF4;
    background-color: #F5F5FA80;
    padding: 33px 21px 52px 20px;  */
}

.quantity-selector-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #FFFFFF;
    border: 1px solid #ECEFF4;
    font-weight: 600;
    font-size: 16px;
    line-height: 27px;
    padding: 15px 18px 15px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.product-tab {
    font-family: 'Manrope', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: 0.2px;
    color: #64748B;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-tab.active {
    font-weight: 900;
    color: #0F172A;
}

.product-tab.active::after {
    content: '';
    background-color: #FFD601;
    width: 100%;
    height: 2px;
    bottom: -4px;
    left: 0;
    position: absolute;
}

.product-tab-content {
    background-color: #F5F5FA80;
    border: 1px solid #ECEFF4;
    padding: 40px ;
}

ul.product-details-ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    row-gap: 16px;
    flex-direction: column;
    font-size: 14px;
    line-height: 23px;
    color: #64748B;
    padding-left: 16px;
    position: relative;
}

ul.product-details-ul li {
    position: relative;
    transition: all 0.2s;
}

ul.product-details-ul li::before {
    position: absolute;
    content: '';
    width: 8px;
    height: 8px;
    border: 1px solid #9E9E9E;
    top: 7px;
    left: -15px;
    border-radius: 50%;
    transition: all 0.2s;
}

ul.product-details-ul li:hover::before {
    background-color: #1E5DFE;
    box-shadow: 0px 0px 0px 2px #F1F4F9;
    border: 1px solid #1E5DFE;
}

.compare-grid {
    display: grid;
    grid-template-columns: 3fr 4fr 4fr 4fr;
    margin-bottom: 127px;
}

.product-compare {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    border: 1px solid #ECEFF4;
    padding: 15px 21px 31px 19px;
}

.product-compare-size {
    background-color: #EEF2F6;
    font-size: 18px;
    letter-spacing: -0.33px;
    color: #0F172A;
    font-weight: 600;
    display: flex;
    height: 54px;
    padding-left: 17px;
    align-items: center;
}

.product-compare-label {
    font-size: 14px;
    font-weight: 600;
    color: #0F172A;
    line-height: 24px;
    height: 54px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    border-bottom: 1px solid #ECEFF4;
    border-right: 1px solid #ECEFF4;
}

.product-compare-text {
    font-size: 14px;
    font-weight: 500;
    color: #0F172A;
    line-height: 1.15;
    height: 54px;
    display: flex;
    align-items: center;
    padding-left: 17px;
    column-gap: 10px;
    border-bottom: 1px solid #ECEFF4;
    border-right: 1px solid #ECEFF4;
}

.product-compare-price {
    padding: 37px 17px 12px 16px;
    background-color: #EEF2F6;
    border-bottom: 1px solid #ECEFF4;
    border-right: 1px solid #ECEFF4;
}

#prod-bg {
    display: none;
}

.checkout-data {
    border-radius: 12px;
    border: 1px solid #ECEFF4;
}

#checkout input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

#checkout .checkmark {
    position: relative;
    min-height: 18px;
    min-width: 18px;
    margin-right: 12px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#checkout label:has(input[type="radio"]) .checkmark::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background-color: white;
    border-radius: 50%;
    border: 1px solid black;
}

#checkout label:has(input[type="radio"]:checked) .checkmark::after {
    display: block;
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    border: 7px solid black;
}

.checkout-checkbox {
    padding: 16px 15px;
}

.checkout-input-div {
    padding: 30px 19px;
}

.checkout-label {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
}

.checkout-label input[type="text"], .checkout-label input[type="email"] {
    background-color: #EEF2F6;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #64748B;
    border: 2px solid #EEF2F6;
    height: 44px;
    padding: 0px 15px;
    border-radius: 8px;
}


.checkout-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.checkout-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkout-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background-color: #ECEFF4;
    -webkit-transition: .4s;
    transition: .4s;
}

.checkout-switch .slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 0px;
    bottom: 1px;
    background-color: #FFD601;
    border: 1px solid #0F172A;
    -webkit-transition: .4s;
    transition: .4s;
}

.checkout-switch.dark .slider:before {
    background-color: #0F172A;
}

.checkout-switch input:checked + .slider {
    background-color: #FFD601;
}

.checkout-switch input:focus + .slider {
    box-shadow: 0 0 1px #ECEFF4;
}

.checkout-switch input:checked + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

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

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


.menu-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}

.menu-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.menu-switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 24px;
    background-color: #ECEFF4;
    -webkit-transition: .4s;
    transition: .4s;
}

.menu-switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    bottom: 2px;
    background-color: #FFFFFF;
    -webkit-transition: .4s;
    transition: .4s;

    -webkit-transform: translateX(3px);
    -ms-transform: translateX(3px);
    transform: translateX(3px);
}

.menu-switch.dark .slider:before {
    background-color: #0F172A;
}

.menu-switch input:checked + .slider {
    background-color: #ECEFF4;
}

.menu-switch input:focus + .slider {
    box-shadow: 0 0 1px #ECEFF4;
}

.menu-switch input:checked + .slider:before {
    -webkit-transform: translateX(19px);
    -ms-transform: translateX(19px);
    transform: translateX(19px);
}

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

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

.checkout-toggle {
    border: 1px solid #0F172A;
    padding: 15px 10px 15px 20px;
    border-radius: 12px;
}

.order-overview {
    border: 1px solid #ECEFF4;
    border-radius: 8px;
    background-color: #F5F5FA80;
    padding: 21px 28px;
}

.order-overview-div {
    border: 1px solid #ECEFF4;
    border-radius: 8px;
    background-color: #FFFFFF;
    padding: 15px 10px;
}

.checkout-grid {
    display: grid;
    grid-template-columns: 2fr  1fr;
    grid-template-rows: 21px 21px 21px 21px 21px 0px 0px;
    grid-row-gap: 12px;
}

.checkout-check input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

#checkout .checkout-check .checkmark {
    position: relative;
    width: 18px;
    height: 20px;
    margin-right: 13px;
    border-radius: 4px;
    border: 1px solid #64748B;
}

.checkout-check .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 18px;
}

.checkout-check input:checked ~ .checkmark {
    background-color: #FFD601;
}

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

.checkout-check input:checked ~ .checkmark:after {
    display: block;
}

.checkout-check .checkmark:after {
    height: 85%;
    width: 90%;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url("/icons/check.svg");
}

.checkout-check {
    display: flex;
}

.checkout-button {
    width: 100%;
    border: 0;
    height: 53px;
    background-color: #FFD601;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.bar-links:hover {
    text-decoration: underline;
}

.showcase-grid {
    display: grid;
    gap: 18px;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, minmax(max(400px, 30%), 1fr));
}

.mobile-navigation {
    display: none;
}

.mobile-menu {
    display: none;
}

.showcase-slider, .blog-slider {
    display: flex;
    transition: all 0.2s;
    transform: translateX(0px);
}

.slider-div, .blog-slider-div {
    width: 28.5vw;
    margin-right: 20px;
    flex-shrink: 0;
    min-width: 390px;
    max-width: 530px;
}


@media only screen and (max-width: 1280px) {
    .slider-div, .blog-slider-div {
        width: 46vw;
        margin-right: 20px;
        flex-shrink: 0;
    }

    #top-bar {
        background-size: cover;
    }

    .form-search {
       /* display: none;  */
    }

    .screen-lg-position-static {
        position: static;
    }

    .screen-lg-remove-box-center {
        left: 0;
        translate: 0;
    }

    .container-xl, .container-lg {
        width: 95%;
        max-width: 1440px;
    }

    .half-div {
        width: 47.5%;
    }

    .screen-lg-pl-20 {
        padding-left: 20px;
    }

    .screen-lg-align-stretch {
        align-items: stretch;
    }

    .screen-lg-pv-10 {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .screen-lg-display-block {
        display: block;
    }

    .screen-lg-w-full {
        width: 100%;
    }

    .screen-lg-shrink-1 {
        flex-shrink: 1;
    }

    .screen-lg-flex-col-reverse {
        flex-direction: column-reverse;
    }

    .screen-lg-flex-row {
        flex-direction: row;
    }

    .screen-lg-flex-col {
        flex-direction: column;
    }

    .product-gallery-image {
        width: 7vw;
    }

    .gallery-grid {
        margin-top: 15px;
        margin-right: 10px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(max(7vw), 1fr));
        grid-gap: 10px;
    }

    .quantity-product {
        margin-left: 0;
        width: 95%;
    }

    .product-tab-content {
        padding: 43px 79px 75px 26px;
    }

    .screen-lg-l-height-1 {
        line-height: 1;
    }

    .screen-lg-justify-center {
        justify-content: center;
    }

    .screen-lg-row-gap-10 {
        row-gap: 10px;
    }

    .screen-lg-text-center {
        text-align: center;
    }

    .screen-lg-text-24 {
        font-size: 24px;
    }

    .screen-lg-text-18 {
        font-size: 18px;
    }

    .screen-lg-no-max-w {
        max-width: none !important;
    }
}

@media only screen and (max-width: 1300px) {
    #top-bar {
        background-size: cover;
    }

    #banner {
        background-size: 0px, 0%;
        background-position: 0%, 0;
    }

    .form-search {
        /*display: none;  */
    }

    .screen-lg-position-static {
        position: static;
    }

    .screen-lg-remove-box-center {
        left: 0;
        translate: 0;
    }

    .screen-lg-flex-col {
        flex-direction: column;
    }

    .screen-lg-display-block {
        display: block;
    }

    .screen-lg-display-none {
        display: none;
    }

    .screen-lg-w-35vw {
        width: 35vw;
    }

    .product-tab-content {
        padding: 32px 59px 56px 19px;
    }

    .newsletter-sh {
        margin-top: 8px;
        margin-bottom: 22px
    }
}

@media only screen and (max-width: 991px) {
    .slider-div, .blog-slider-div {
        width: 95vw;
        min-width: 95vw;
        margin-right: 2vw;
        flex-shrink: 0;
    }

    .screen-m-mh-2-vw {
        margin-left: 2.5vw;
        margin-right: 2.5vw;
    }

    .screen-m-position-static {
        position: static;
    }

    .screen-m-display-none {
        display: none;
    }

    .screen-m-display-block {
        display: block !important;
    }

    .screen-m-display-flex {
        display: flex !important;
    }

    .screen-m-w-full {
        width: 100%;
        max-width: 100vw;
    }

    .screen-m-w-half {
        width: 50%;
        max-width: 50vw;
    }

    .screen-m-w-4-5 {
        width: 80%;
        max-width: 80vw;
    }

    .screen-m-min-w-130px {
        min-width: 130px;
    }

    .screen-m-height-auto {
        height: auto;
    }

    .screen-m-h-40px {
        height: 40px;
    }

    .screen-m-h-27px {
        height: 27px;
    }


    .screen-m-margin-0 {
        margin: 0;
    }

    .screen-m-padding-0 {
        padding: 0;
    }

    .screen-m-padding-28px {
        padding: 28px;
    }

    .screen-m-pt-45px {
        padding-top: 45px;
    }

    .screen-m-pb-20px {
        padding-bottom: 20px;
    }

    .screen-m-pb-64px {
        padding-bottom: 64px;
    }

    .screen-m-pv-18 {
        padding-right: 18px;
        padding-left: 18px;
    }

    .screen-m-ph-18 {
        padding-right: 18px;
        padding-left: 18px;
    }

    .screen-m-pv-46 {
        padding-top: 46px;
        padding-bottom: 46px;
    }

    .screen-m-pv-58 {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    .screen-m-pv-70 {
        padding-top: 70px;
        padding-bottom: 70px;
    }

    .screen-m-ph-26 {
        padding-right: 26px;
        padding-left: 10px;
    }

    .screen-m-mb-12 {
        margin-bottom: 12px;
    }

    .screen-m-mb-17 {
        margin-bottom: 17px;
    }

    .screen-m-mb-24 {
        margin-bottom: 24px;
    }

    .screen-m-mb-30 {
        margin-bottom: 30px;
    }

    .screen-m-bg-gray-400 {
        background-color: #EEF2F6;
    }

    .screen-m-max-w-74vw {
        max-width: 74vw;
    }

    .screen-m-max-w-35vw {
        max-width: 35vw;
    }

    .screen-m-flex-row-gap-20 {
        row-gap: 20px;
    }

    .screen-m-text-10 {
        font-size: 10px;
    }

    .screen-m-text-11 {
        font-size: 11px;
    }

    .screen-m-text-12 {
        font-size: 12px;
    }

    .screen-m-text-14 {
        font-size: 14px;
    }

    .screen-m-text-16 {
        font-size: 16px;
    }

    .screen-m-text-18 {
        font-size: 18px;
    }

    .screen-m-text-21 {
        font-size: 21px;
    }

    .screen-m-text-26 {
        font-size: 26px;
    }

    .screen-m-text-32 {
        font-size: 32px;
    }

    .screen-m-text- {
        font-size: 60px;
    }

    .screen-m-text-center {
        text-align: center;
    }

    .screen-m-font-semi-bold {
        font-weight: 600;
    }

    .screen-m-ph-18 {
        padding-left: 18px;
        padding-right: 18px;
    }

    .screen-m-ph-12 {
        padding-left: 12px;
        padding-right: 12px;
    }

    .screen-m-pl-18 {
        padding-left: 18px;
    }

    .screen-m-mr-18 {
        margin-right: 18px;
    }

    .screen-m-pv-22 {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .screen-m-pv-27 {
        padding-top: 27px;
        padding-bottom: 27px;
    }

    .screen-m-pv-34 {
        padding-top: 34px;
        padding-bottom: 34px;
    }

    .screen-m-ph-5 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .screen-m-pv-11 {
        padding-top: 11px;
        padding-bottom: 11px;
    }

    .screen-m-flex-row {
        flex-direction: row;
    }

    .screen-m-flex-col {
        flex-direction: column;
    }

    .screen-m-flex-col-reverse {
        flex-direction: column-reverse;
    }

    .screen-m-flex-wrap {
        flex-wrap: wrap;
    }

    .screen-m-border-1 {
        border: 1px solid;
    }

    .screen-m-border-0 {
        border: 0;
    }

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

    .screen-m-overflow-x-scroll {
        overflow-x: scroll;
    }

    .screen-m-min-w-85vw {
        min-width: 85vw;
        max-width: 100vw;
    }

    .screen-m-max-w-205px {
        max-width: 205px;
    }

    .screen-m-max-w-85vw {
        max-width: 80vw;
    }

    .screen-m-max-w-92vw {
        max-width: 92vw;
    }

    .screen-m-col-gap-10 {
        column-gap: 10px;
    }

    .screen-m-col-gap-6 {
        column-gap: 6px;
    }

    .screen-m-border-gray-100 {
        border-color: #ECEFF4;
    }

    .screen-m-height-255px {
        height: 255px;
    }

    .screen-m-product-buttons-div {
        position: absolute;
        top: 11px;
        left: 11px;
        display: flex;
        flex-direction: column;
        row-gap: 4px;
    }

    .form-filter {
        border-radius: 0;
    }

    .container-lg {
        max-width: 100%;
    }

    #hero {
        padding: 0;
    }

    #hero .container-lg {
        padding: 0;
    }

    .form-filter {
        padding: 22px 17px;
    }

    .form-filter .image-radio-label {
        aspect-ratio: 1 / 1;
    }

    .form-filter .image-radio {
        width: 18.5vw;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        border: 1px solid #ECEFF4;
        row-gap: 18px;
        padding: 5px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .icon-box-grid {
        padding: 40px 20px;
        display: grid;
        grid-column-gap: 29px;
        grid-row-gap: 28px;
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }

    .product-button {
        background-color: #FFFFFF;
    }

    .product-buttons-div {
        top: 0px;
        left: 0px;
        z-index: 2;
    }

    .top-offer-tag {
        font-size: 13px;
    }

    .dimension-grid {
        margin-top: 12px;
        display: flex;
        overflow-x: scroll;
    }

    .dimension-link {
        min-width: 127px;
        min-height: 39px;
        width: 127px;
        height: 39px;
        font-size: 14px;
        line-height: 1;
    }

    .summer-offer-grid {
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr;
        width: 85vw;
    }

    .show-more-mobile {
        display: none;
    }

    .load-more {
        display: block;
        width: 85vw;
        height: 56px;
        margin-top: 36px;
        background-color: #E7D819;
        color: black;
        text-transform: uppercase;
        border-radius: 8px;
        border: 0;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.7px;
        font-family: 'Urbanist', sans-serif;
    }

    .dropdown-closed {
        transition: all 0.2s;
    }
/*
    .tire-bg {
        background-size: 174px;
    }
*/
    .black-cta, .yellow-cta, .black-cta-s {
        height: 40px;
        font-size: 14px;
    }

    .black-cta-s {
        width: 127px;
    }

    .newsletter-p {
        margin-top: 13px;
        text-align: center;
        font-size: 12px;
        max-width: 270px;
        margin-right: auto;
        margin-left: auto;
    }

/*
    .form-newsletter input[type="email"], .form-newsletter button {
        width: 38vw;
        font-size: 14px;
        max-width: 38vw;
        padding-left: 8px;
    }
*/



    .newsletter-sh {
        margin-bottom: 28px;
        text-align: center;
        line-height: 1.3;
    }

    .screen-m-width-65vw {
        /*
        width: 65vw;
        max-width: 65vw;
        min-width: 65vw;  */
        width: 80vw;
        max-width: 80vw;
        min-width: 80vw;
         margin: auto;
    }

    .screen-m-h-214px {
        height: 214px;
    }

    .blog-grid {
        padding-left: 18px;
        margin-top: 12px;
        display: flex;
        overflow-x:  hidden;
        flex-wrap: wrap;
    }

    .w-90perc {
        width: 90%;
    }

    .footer-grid {
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr;
    }

    .screen-m-max-w-95vw {
        max-width: 95vw;
    }

    .screen-m-flex-align-center {
        align-items: center;
    }

    .screen-m-flex-align-initial {
        align-items: initial;
    }

    .screen-m-flex-text-center {
        text-align: center;
    }

    .footer-separator {
        width: 90vw;
        height: 1px;
        background-color: #ECEFF4;
        margin-bottom: 15px;
        opacity: 0.25;
    }

    .screen-m-mt-85 {
        margin-top: 85px;
    }

    .screen-m-mt-36 {
        margin-top: 36px;
    }

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

    .footer-link {
        font-size: 14px;
    }

    .max-w-95vw {
        max-width: 95vw;
    }

    .max-w-92vw {
        max-width: 92vw;
    }

    .top-offer-tag {
        font-size: 12px;
        line-height: 30px;
        font-weight: 600;
        width: 110px;
        height: 35px;
        padding-left: 2px;
    }
    .best-offer-tag {
        font-size: 12px;
        line-height: 30px;
        width: 110px;
        height: 35px;
        font-weight: 400;
        padding-left: 2px;
    }

    #checkout {
        padding-top: 0px;
        margin-top: 24px;
    }

    #banner {
        height: 325px;
        background-image: url("/images/mobile-banner-wheel.png"), url("/images/mobile-banner-bg.svg") !important;
        background-position: 95% 85%, bottom left;
        background-color: #141518;
        background-size: 160px, contain;
        padding-top: 27px;
    }

    .hero-cta {
        width: 118px;
        height: 42px;
        font-size: 16px;
    }

    #product {
        margin-top: 0px;
        padding-top: 0px;
    }

    #prod-bg {
        display: block;
    }

    .gallery-grid {
        margin-top: 15px;
        margin-right: 10px;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(20vw), 1fr));
        grid-gap: 10px;
    }

    .product-gallery-image {
        width: auto;
    }

    .quantity-product {
        margin-left: -1%;
        width: 90%;
        padding: 40px 20px !important;
    }

    .screen-m-bottom-left-15 {

        bottom: 0px;
        left: 15px
      /*
        bottom: -30px;
        left: 10px;   */
    }

    .screen-m-justify-between {
        justify-content: space-between;
    }

    .screen-m-justify-end {
        justify-content: end;
    }

    .image-radio-label .radiomark {
        position: absolute;
        left: 68%;
        height: 20px;
        width: 20px;
    }

    .advance-filter {
        bottom: 0;
        bottom: 82px;
        background-color: white;
        position: fixed;
        width: 94vw;
        top: 0;
        left: 0;
        padding-top: 24px;
        z-index: 20;
        margin: 0;
        padding-right: 12px;  overflow: scroll;
    }

    .form-filter {
        min-width: 0;
    }

    .order-overview {
        width: auto;
        max-width: none;
        margin-left: 0px;
    }

    #footer {
        padding-bottom: 81px;
    }

    .mobile-navigation {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        height: 81px;
     /*   border-top: 1px solid #EEF2F6;     */
       border-top: 1px solid #DCDCDC;
        align-items: center;
        justify-items: center;
                        box-shadow: 0 -5px 5px -5px #333;
    }

    .mobile-menu {
        flex-direction: column;
        padding: 31px 24px;
        position: fixed;
        top: 0;
        bottom: 0;

        bottom:82px;

        left: 0;
        right: 0;
        background-color: #FFFFFF;
        overflow-y: scroll;
    }

    .search-mobile {
        display: block;
        position: fixed;
        flex-direction: column;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        justify-content: end;
        background-color: #0F172A80;
        height:100%;
    }

    .search-mobile-block {
        background-color: #FFFFFF;
    }

    .second-step {
        width: 92%;
        z-index: 10;
    }

    .mobile-product-compare {
        padding: 18px 15px;
    }

    .mobile-compare-products > div:nth-child(2) {
        background-color: #EEF2F6;
    }

    .mobile-compare-div {
        width: 100%;
        border: 1px solid #ECEFF4;
        border-radius: 12px;
    }

    .mobile-compare-title {
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px;
        border-bottom: 1px solid #ECEFF4;
        font-size: 14px;
        font-weight: 600;
        color: #0F172A;
    }

    .mobile-compare-data {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        line-height: 1.5;
    }

    .mobile-compare-data > div {
        min-height: 61px;
        padding: 0px 4px;
    }

    .mobile-compare-data > div:nth-child(2) {
        background-color: #EEF2F6;
    }
}