:root {
    --color-white: #fff;
    --color-black: #000;
    --color-primary: #0B109F;
    --color-primary-dark: #070F6D;
    --color-accent: #00D339;
    --color-dark: #17232A
}

*,
*::before,
*::after {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0;
    font: inherit
}

html {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    scroll-behavior: smooth
}

html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    scrollbar-gutter: stable
}

* {
    font-family: var(--base-font-family);
    font-size: var(--font-size-base);
    line-height: 1.3;
    scrollbar-width: thin
}

body {
    min-height: 100svh;
    text-rendering: optimizeSpeed;
    line-height: 1.3;
    -webkit-font-smoothing: antialiased
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto
}

picture {
    width: 100%
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: normal;
    overflow-wrap: break-word
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin-block-end: 0
}

input,
button,
textarea,
select {
    font: inherit
}

#root,
#__next {
    isolation: isolate
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=number] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

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

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-black);
    box-shadow: 0 0 0px 1000px var(--color-white) inset;
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0
}

html:focus-within {
    scroll-behavior: smooth
}

a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto
}

a {
    text-decoration: none
}

textarea:not([rows]) {
    min-height: 80px
}

:target {
    scroll-margin-top: 25px
}

::-moz-selection {
    background-color: var(--color-primary);
    color: var(--color-white)
}

::selection {
    background-color: var(--color-primary);
    color: var(--color-white)
}

@media(prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

:root {
    --font-family-en: "Acumin Pro Wide", sans-serif;
    --font-family-ar: "GE SS Two", sans-serif;
    --base-font-family: var(--font-family-en);
    --font-size-base: 1rem;
    --color-text-primary: var(--color-dark);
    --color-text-secondary: #4F595F;
    --color-text-tertiary: #8B9194;
    --color-bg-light: #F3F8FD;
    --color-border-primary: #E6E6E6;
    --color-error: #EA4335
}

:root[lang=ar] {
    --base-font-family: var(--font-family-ar)
}

@font-face {
    font-family: "Acumin Pro Wide";
    src: url("../fonts/en/acumin-pro-wide/acumin-pro-wide-book.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Acumin Pro Wide";
    src: url("../fonts/en/acumin-pro-wide/acumin-pro-wide-medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Acumin Pro Wide";
    src: url("../fonts/en/acumin-pro-wide/acumin-pro-wide-semibold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "Acumin Pro Wide";
    src: url("../fonts/en/acumin-pro-wide/acumin-pro-wide-bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "GE SS Two";
    src: url("../fonts/ar/ge-ss/ge-ss-two-light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "GE SS Two";
    src: url("../fonts/ar/ge-ss/ge-ss-two-medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "GE SS Two";
    src: url("../fonts/ar/ge-ss/ge-ss-two-bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

.img-fluid {
    width: 100%
}

.w-100 {
    width: 100%
}

.mh-100 {
    min-height: 100%
}

.d-flex {
    display: -ms-flexbox;
    display: flex
}

.d-inline-flex {
    display: -ms-inline-flexbox;
    display: inline-flex
}

.flex-row {
    -ms-flex-direction: row;
    flex-direction: row
}

.flex-row-reverse {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

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

.flex-column-reverse {
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.justify-content-start {
    -ms-flex-pack: start;
    justify-content: flex-start
}

.justify-content-end {
    -ms-flex-pack: end;
    justify-content: flex-end
}

.justify-content-center {
    -ms-flex-pack: center;
    justify-content: center
}

.justify-content-between {
    -ms-flex-pack: justify;
    justify-content: space-between
}

.justify-content-around {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.justify-content-evenly {
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.flex-align-stretch {
    -ms-flex-align: stretch;
    align-items: stretch
}

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

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

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

.align-items-baseline {
    -ms-flex-align: baseline;
    align-items: baseline
}

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

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

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

.flex-fit {
    min-width: 0;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%
}

.flex-shrink-0 {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    max-width: 100%
}

.font-family-primary {
    font-family: var(--base-font-family)
}

.font-body-lg {
    font-weight: 400;
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: -0.36px
}

.font-body-md {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.5;
    letter-spacing: -0.36px
}

.font-body-sm {
    font-weight: 400;
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: -0.36px
}

.font-title-3xl {
    font-weight: 600;
    font-size: 40px;
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -1.6px
}

@media only screen and (max-width: 767px) {
    .font-title-3xl {
        font-size: 28px
    }
}

.font-title-xxl {
    font-weight: 600;
    font-size: 32px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

@media only screen and (max-width: 991px) {
    .font-title-xxl {
        font-size: 29px
    }
}

@media only screen and (max-width: 767px) {
    .font-title-xxl {
        font-size: 24px
    }
}

.font-title-xl {
    font-weight: 600;
    font-size: 24px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

@media only screen and (max-width: 767px) {
    .font-title-xl {
        font-size: 20px
    }
}

.font-title-lg {
    font-weight: 600;
    font-size: 20px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

@media only screen and (max-width: 767px) {
    .font-title-lg {
        font-size: 18px
    }
}

.font-title-md {
    font-weight: 600;
    font-size: 18px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

.font-title-sm {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

.font-title-xs {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

.text-center {
    text-align: center
}

.text-uppercase {
    text-transform: uppercase
}

.text-capitalize {
    text-transform: capitalize
}

.font-weight-300 {
    font-weight: 300
}

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

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

.font-weight-600 {
    font-weight: 600
}

.font-weight-700 {
    font-weight: 700
}

.font-color-white {
    color: var(--color-white)
}

.font-color-black {
    color: var(--color-black)
}

.font-color-primary {
    color: var(--color-text-primary)
}

.font-color-secondary {
    color: var(--color-text-secondary)
}

.font-color-tertiary {
    color: var(--color-text-tertiary)
}

.font-color-accent {
    color: var(--color-accent)
}

.font-color-on-bg-primary {
    color: hsla(0, 0%, 100%, .85)
}

.font-color-error {
    color: var(--color-error)
}

.font-color-discount {
    color: #0a9f5c
}

body {
    --layout-container-width: 1280px;
    --layout-container-max-width: 1500px;
    --layout-container-gap: 24px
}

@media only screen and (min-width: 1920px) {
    body {
        max-width: var(--layout-container-max-width);
        margin-inline: auto
    }
}

@media only screen and (max-width: 1280px) {
    body {
        --layout-container-width: 100%
    }
}

@media only screen and (max-width: 767px) {
    body {
        --layout-container-gap: 16px
    }
}

.container {
    padding-inline: var(--layout-container-gap)
}

@media only screen and (max-width: 1919px) {
    .container {
        max-width: calc(var(--layout-container-width) + var(--layout-container-gap)*2);
        margin-inline: auto
    }
}

.p-0 {
    padding: 0 !important
}

.m-0 {
    margin: 0 !important
}

.column-gap-0 {
    -moz-column-gap: 0;
    column-gap: 0
}

.column-gap-2 {
    -moz-column-gap: 2px;
    column-gap: 2px
}

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

.column-gap-6 {
    -moz-column-gap: 6px;
    column-gap: 6px
}

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

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

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

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

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

.row-gap-0 {
    row-gap: 0
}

.row-gap-2 {
    row-gap: 2px
}

.row-gap-4 {
    row-gap: 4px
}

.row-gap-6 {
    row-gap: 6px
}

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

.row-gap-12 {
    row-gap: 12px
}

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

.row-gap-18 {
    row-gap: 18px
}

.row-gap-20 {
    row-gap: 20px
}

.pt-0 {
    padding-block-start: 0 !important
}

.pr-0 {
    padding-inline-end: 0 !important
}

.pb-0 {
    padding-block-end: 0 !important
}

.pl-0 {
    padding-inline-start: 0 !important
}

.pt-2 {
    padding-block-start: 2px !important
}

.pr-2 {
    padding-inline-end: 2px !important
}

.pb-2 {
    padding-block-end: 2px !important
}

.pl-2 {
    padding-inline-start: 2px !important
}

.pt-4 {
    padding-block-start: 4px !important
}

.pr-4 {
    padding-inline-end: 4px !important
}

.pb-4 {
    padding-block-end: 4px !important
}

.pl-4 {
    padding-inline-start: 4px !important
}

.pt-6 {
    padding-block-start: 6px !important
}

.pr-6 {
    padding-inline-end: 6px !important
}

.pb-6 {
    padding-block-end: 6px !important
}

.pl-6 {
    padding-inline-start: 6px !important
}

.pt-8 {
    padding-block-start: 8px !important
}

.pr-8 {
    padding-inline-end: 8px !important
}

.pb-8 {
    padding-block-end: 8px !important
}

.pl-8 {
    padding-inline-start: 8px !important
}

.pt-12 {
    padding-block-start: 12px !important
}

.pr-12 {
    padding-inline-end: 12px !important
}

.pb-12 {
    padding-block-end: 12px !important
}

.pl-12 {
    padding-inline-start: 12px !important
}

.pt-16 {
    padding-block-start: 16px !important
}

.pr-16 {
    padding-inline-end: 16px !important
}

.pb-16 {
    padding-block-end: 16px !important
}

.pl-16 {
    padding-inline-start: 16px !important
}

.pt-18 {
    padding-block-start: 18px !important
}

.pr-18 {
    padding-inline-end: 18px !important
}

.pb-18 {
    padding-block-end: 18px !important
}

.pl-18 {
    padding-inline-start: 18px !important
}

.pt-20 {
    padding-block-start: 20px !important
}

.pr-20 {
    padding-inline-end: 20px !important
}

.pb-20 {
    padding-block-end: 20px !important
}

.pl-20 {
    padding-inline-start: 20px !important
}

.mt-0 {
    margin-block-start: 0 !important
}

.mr-0 {
    margin-inline-end: 0 !important
}

.mb-0 {
    margin-block-end: 0 !important
}

.ml-0 {
    margin-inline-start: 0 !important
}

.mt-2 {
    margin-block-start: 2px !important
}

.mr-2 {
    margin-inline-end: 2px !important
}

.mb-2 {
    margin-block-end: 2px !important
}

.ml-2 {
    margin-inline-start: 2px !important
}

.mt-4 {
    margin-block-start: 4px !important
}

.mr-4 {
    margin-inline-end: 4px !important
}

.mb-4 {
    margin-block-end: 4px !important
}

.ml-4 {
    margin-inline-start: 4px !important
}

.mt-6 {
    margin-block-start: 6px !important
}

.mr-6 {
    margin-inline-end: 6px !important
}

.mb-6 {
    margin-block-end: 6px !important
}

.ml-6 {
    margin-inline-start: 6px !important
}

.mt-8 {
    margin-block-start: 8px !important
}

.mr-8 {
    margin-inline-end: 8px !important
}

.mb-8 {
    margin-block-end: 8px !important
}

.ml-8 {
    margin-inline-start: 8px !important
}

.mt-12 {
    margin-block-start: 12px !important
}

.mr-12 {
    margin-inline-end: 12px !important
}

.mb-12 {
    margin-block-end: 12px !important
}

.ml-12 {
    margin-inline-start: 12px !important
}

.mt-16 {
    margin-block-start: 16px !important
}

.mr-16 {
    margin-inline-end: 16px !important
}

.mb-16 {
    margin-block-end: 16px !important
}

.ml-16 {
    margin-inline-start: 16px !important
}

.mt-18 {
    margin-block-start: 18px !important
}

.mr-18 {
    margin-inline-end: 18px !important
}

.mb-18 {
    margin-block-end: 18px !important
}

.ml-18 {
    margin-inline-start: 18px !important
}

.mt-20 {
    margin-block-start: 20px !important
}

.mr-20 {
    margin-inline-end: 20px !important
}

.mb-20 {
    margin-block-end: 20px !important
}

.ml-20 {
    margin-inline-start: 20px !important
}

.mt-auto {
    margin-block-start: auto !important
}

.mr-auto {
    margin-inline-end: auto !important
}

.mb-auto {
    margin-block-end: auto !important
}

.ml-auto {
    margin-inline-start: auto !important
}

.bg-light {
    background-color: var(--color-bg-light)
}

body {
    --sec-cmn-space: 24px;
    --header-z-index: 99;
    --rtl-flip: rotate(180deg);
    --responsive-float-value: 35px;
    --navigation-bottom-bar-height: 80px
}

body:has(.product-list-bottom-bar) {
    --navigation-bottom-bar-height: 60px
}

body .close-btn {
    --btn-padding: 8px 10px;
    --btn-hover-font-color: var(--color-text-primary);
    margin-inline-start: auto
}

body .close-btn:hover {
    opacity: .75
}

.d-block {
    display: block
}

.d-none {
    display: none
}

.cursor-pointer {
    cursor: pointer
}

.sec-cmn-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--color-text-primary);
    line-height: 1.15;
    letter-spacing: -1.28px;
    margin-bottom: 32px
}

@media only screen and (max-width: 767px) {
    .sec-cmn-title {
        font-size: 24px;
        margin-bottom: 24px
    }
}

.sec-cmn-space {
    padding-block: var(--sec-cmn-space)
}

@media only screen and (max-width: 991px) {
    .sec-cmn-space {
        --sec-cmn-space: 20px
    }
}

@media only screen and (max-width: 767px) {
    .sec-cmn-space {
        --sec-cmn-space: 16px
    }
}

.img-ar {
    display: none
}

[lang=ar] .img-en {
    display: none
}

[lang=ar] .img-ar {
    display: block
}

[lang=ar] .btn .btn-icon {
    transform: var(--rtl-flip)
}

.btn {
    --btn-font-family: var(--base-font-family);
    --btn-bg-color: transparent;
    --btn-font-color: var(--color-white);
    --btn-font-size: 15px;
    --btn-padding: 16px;
    --btn-border-color: transparent;
    --btn-border-radius: 6px;
    --btn-hover-bg-color: transparent;
    --btn-hover-font-color: var(--color-white);
    --btn-hover-border-color: transparent;
    --btn-focus-bg-color: transparent;
    --btn-focus-font-color: transparent;
    --btn-focus-border-color: transparent;
    --btn-column-gap: 8px;
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -moz-column-gap: var(--btn-column-gap);
    column-gap: var(--btn-column-gap);
    background-color: var(--btn-bg-color);
    font-family: var(--btn-font-family);
    color: var(--btn-font-color);
    font-weight: 600;
    font-size: var(--btn-font-size);
    line-height: 1;
    text-align: center;
    letter-spacing: -0.32px;
    padding: var(--btn-padding);
    border: 1px solid var(--btn-border-color);
    border-radius: var(--btn-border-radius);
    outline-color: var(--color-primary);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    transition-property: color, background-color, border-color, opacity, visibility, box-shadow, outline;
    transition-duration: .4s
}

@media only screen and (max-width: 767px) {
    .btn {
        --btn-font-size: 14px;
        --btn-padding: 12px
    }
}

.btn:focus-visible {
    outline-offset: 3px;
    outline-style: dashed
}

.btn:is(a:not(.btn-view-more)) {
    text-decoration: none
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled=true] {
    pointer-events: none;
    opacity: .7;
    cursor: not-allowed
}

.btn:hover,
.btn:focus-visible {
    background-color: var(--btn-hover-bg-color);
    color: var(--btn-hover-font-color);
    border-color: var(--btn-hover-border-color)
}

.btn:hover svg *,
.btn:focus-visible svg * {
    stroke: var(--btn-hover-font-color)
}

.btn .btn-icon {
    display: -ms-inline-flexbox;
    display: inline-flex
}

@media only screen and (max-width: 767px) {
    .btn .btn-icon {
        margin-top: -3px
    }
}

.btn:has([data-btn-icon-position=left]) {
    padding-inline-start: 12px
}

.btn:has([data-btn-icon-position=right]) {
    padding-inline-end: 12px
}

.btn svg * {
    transition: all .4s
}

.btn-primary {
    --btn-bg-color: var(--color-primary);
    --btn-font-color: var(--color-white);
    --btn-hover-bg-color: #353C87;
    --btn-hover-font-color: var(--color-white);
    --btn-hover-border-color: #353C87
}

.btn-secondary {
    --btn-bg-color: var(--color-accent);
    --btn-font-color: var(--color-text-primary);
    --btn-hover-bg-color: var(--color-dark);
    --btn-hover-font-color: var(--color-accent)
}

.btn-tertiary {
    --btn-bg-color: var(--color-bg-light);
    --btn-font-color: var(--color-text-primary);
    --btn-hover-bg-color: var(--color-dark);
    --btn-hover-font-color: var(--color-accent)
}

.btn-outline-primary {
    --btn-bg-color: transparent;
    --btn-font-color: var(--color-text-primary);
    --btn-border-color: currentcolor;
    --btn-hover-bg-color: var(--color-primary);
    --btn-hover-font-color: var(--color-white);
    --btn-hover-border-color: var(--color-primary)
}

.btn-outline-secondary {
    --btn-bg-color: var(--color-white);
    --btn-font-color: var(--color-text-primary);
    --btn-border-color: #D0D0D0;
    --btn-hover-bg-color: var(--color-primary);
    --btn-hover-font-color: var(--color-white);
    --btn-hover-border-color: var(--color-primary);
    font-weight: 500
}

.btn-danger {
    --btn-bg-color: var(--color-error);
    --btn-font-color: var(--color-white);
    --btn-hover-bg-color: var(--color-error);
    --btn-hover-font-color: var(--color-white)
}

.btn.btn-sm {
    --btn-font-size: 13px;
    --btn-padding: 12px 10px
}

.btn.btn-lg {
    --btn-font-size: 16px;
    --btn-padding: 16px 20px
}

.btn-view-more {
    --btn-padding: 0;
    --btn-font-color: var(--color-primary);
    --btn-hover-font-color: var(--color-primary-dark);
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

.btn-view-more.btn-error {
    --btn-font-color: var(--color-error);
    --btn-hover-font-color: var(--color-error)
}

.btn-view-more.btn-lg {
    --btn-font-size: 16px;
    --btn-padding: 0;
    font-weight: 600
}

.btn-view-more:hover {
    text-decoration: none
}

.btn-group {
    --btn-group-gap: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--btn-group-gap)
}

.btn-group .btn {
    min-width: -moz-max-content;
    min-width: max-content
}

.form-itl-field {
    --itl-input-country-width: 45px;
    --iti-arrow-padding: 10px;
    --itl-input-padding-left: calc(var(--itl-input-country-width) + 12px)
}

.form-itl-field .iti {
    --iti-border-color: #fff;
    --iti-dialcode-color: #191B1D;
    --iti-dropdown-bg: #fff;
    --iti-arrow-color: #fff;
    --iti-arrow-height: 6px;
    --iti-arrow-width: 10px;
    --iti-border-width: 2px;
    --iti-arrow-padding: 12px;
    --iti-triangle-border: calc(var(--iti-arrow-width) / 2)
}

.form-itl-field .iti .iti__country-container {
    background-color: rgba(0, 0, 0, 0);
    min-width: var(--itl-input-country-width)
}

.form-itl-field .iti .iti__selected-country-primary {
    background-color: rgba(0, 0, 0, 0) !important
}

.form-itl-field .iti .iti__arrow {
    border-block-color: var(--color-text-secondary)
}

.form-itl-field .iti .iti__flag {
    transform-origin: left center
}

.form-itl-field .iti .iti__selected-dial-code {
    color: #fff;
    font-family: var(--font-family-en);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25
}

.form-itl-field .iti .iti__search-input {
    font-size: 14px;
    color: var(--color-text-primary);
    padding: 12px 16px;
    padding-inline-start: 32px;
    outline: none
}

.form-itl-field .iti .form-control {
    padding-inline-start: var(--itl-input-padding-left) !important
}

.form-itl-field .iti .iti__search-icon-svg {
    stroke-width: 2px;
    width: 18px
}

.form-itl-field .iti .iti__country-name {
    font-size: 14px
}

.form-itl-field .iti .iti__dial-code {
    font-size: 15px
}

.form-itl-field .iti .iti__search-input-wrapper {
    border-bottom: 1px solid var(--color-border-primary);
    margin-bottom: 8px
}

[lang=ar] .form-control {
    font-family: var(--font-family-en)
}

[lang=ar] .form-control-datepicker {
    background-position: 16px center
}

body {
    --input-bg: #fff;
    --input-font-weight: 400;
    --input-font-color: var(--color-text-primary);
    --input-font-size: 15px;
    --input-padding-y: 16px;
    --input-padding-x: 16px;
    --input-line-height: 1.25;
    --input-border-color: #BDBDBD;
    --input-border-radius: 6px;
    --input-box-shadow: none;
    --input-focus-border-color: var(--input-border-color);
    --input-focus-box-shadow: #DFE1E4;
    --input-placeholder-color: var(--color-text-secondary);
    --form-label-font-size: 14px;
    --form-label-color: var(--color-text-secondary);
    --form-group-mb: 20px;
    --form-label-mb: 12px;
    --form-error-color: var(--color-error);
    --form-error-opacity: 0;
    --form-error-visibility: hidden;
    --form-error-position: 8px;
    --form-error-active-position: 18px
}

body .form-error {
    position: absolute;
    bottom: calc(-1*var(--form-error-position));
    color: var(--color-error);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.1;
    opacity: var(--form-error-opacity);
    visibility: var(--form-error-visibility);
    transition: all .4s
}

body .form-control {
    display: block;
    width: 100%;
    padding-block: var(--input-padding-y);
    padding-inline: var(--input-padding-x);
    font-size: var(--input-font-size);
    font-weight: var(--input-font-weight);
    line-height: var(--input-line-height);
    color: var(--input-font-color);
    background-color: var(--input-bg);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    transition: all .4s
}

body .form-control:is(textarea) {
    resize: none
}

body .form-control[type=file] {
    overflow: hidden
}

body .form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer
}

body .form-control:focus,
body .form-control:focus-visible,
body .form-control:focus-within {
    border-color: var(--input-focus-border-color);
    box-shadow: 0px 0px 0px 3px var(--input-focus-box-shadow);
    outline: 0
}

body .form-control::-moz-placeholder {
    color: var(--input-placeholder-color);
    opacity: 1
}

body .form-control:-ms-input-placeholder {
    color: var(--input-placeholder-color);
    opacity: 1
}

body .form-control::placeholder {
    color: var(--input-placeholder-color);
    opacity: 1
}

body .form-control.is-invalid {
    border-color: var(--form-error-color)
}

body .form-control-datepicker {
    padding-inline-end: 70px;
    background-image: url("../images/icon/datepicker-icon.svg");
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: calc(100% - 16px) center
}

body .form-control-datepicker::-webkit-calendar-picker-indicator {
    background: var(--color-white)
}

body .form-control:disabled,
body .form-control[readonly]:not(.flatpickr-input) {
    cursor: not-allowed;
    --input-bg: var(--input-focus-box-shadow);
    opacity: .75;
    box-shadow: none
}

body .form-check {
    position: relative;
    --checkbox-background-image: url("data:image/svg+xml,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.26074 3.47158L3.08824 5.29908L7.07741 1.30908' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    --checkbox-size: 20px;
    --checkbox-color: var(--color-dark);
    --checkbox-color-bg: transparent;
    --checkbox-checked-color-bg: var(--color-primary);
    --checkbox-checked-color: var(--color-primary);
    --checkbox-border-radius: 4px;
    --checkbox-opacity: 0;
    --checkbox-visibility: hidden
}

body .form-check:has(.form-check-input:is(input[type=radio])) {
    --checkbox-checked-color-bg: transparent;
    --checkbox-border-radius: 50%
}

body .form-check:has(.form-check-input:is(input[type=radio])) .form-check-label::after {
    min-width: calc(var(--checkbox-size)/2);
    background: none;
    background-color: var(--checkbox-color);
    top: calc(var(--checkbox-size)/2/2);
    inset-inline-start: calc(var(--checkbox-size)/2/2);
    margin-top: 0;
    transform: scale(0)
}

body .form-check .form-check-input {
    position: absolute;
    width: 0;
    opacity: 0;
    z-index: 1
}

body .form-check .form-check-input:indeterminate+label {
    --checkbox-color-bg: var(--checkbox-checked-color-bg);
    --checkbox-color: var(--checkbox-checked-color);
    --checkbox-opacity: 1;
    --checkbox-visibility: visible;
    --checkbox-background-image: url("data:image/svg+xml,%3Csvg width='12' height='2' viewBox='0 0 12 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 1H1.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A")
}

body .form-check .form-check-input:checked+label {
    --checkbox-color-bg: var(--checkbox-checked-color-bg);
    --checkbox-color: var(--checkbox-checked-color);
    --checkbox-opacity: 1;
    --checkbox-visibility: visible
}

body .form-check .form-check-input:checked:is(input[type=radio])+label::after {
    transform: scale(1)
}

body .form-check .form-check-label {
    --form-label-color: var(--color-text-primary);
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: 12px;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 1px
}

body .form-check .form-check-label:hover {
    --checkbox-color: var(--color-primary)
}

body .form-check .form-check-label::before,
body .form-check .form-check-label::after {
    content: "";
    min-width: var(--checkbox-size);
    aspect-ratio: 1;
    margin-top: -1px;
    border-radius: var(--checkbox-border-radius);
    transition: all .4s;
    cursor: pointer
}

body .form-check .form-check-label::before {
    background-color: var(--checkbox-color-bg);
    border: 2px solid var(--checkbox-color)
}

body .form-check .form-check-label::after {
    position: absolute;
    background-image: var(--checkbox-background-image);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;
    opacity: var(--checkbox-opacity);
    visibility: var(--checkbox-visibility)
}

body .form-label {
    display: inline-block;
    font-size: var(--form-label-font-size);
    font-weight: 400;
    line-height: 1.25;
    color: var(--form-label-color);
    letter-spacing: -0.28px
}

body .form-group {
    position: relative;
    margin-bottom: var(--form-group-mb)
}

body .form-group .form-label {
    margin-bottom: var(--form-label-mb)
}

body .form-group.is-invalid {
    --form-error-opacity: 1;
    --form-error-visibility: visible;
    --form-error-position: var(--form-error-active-position)
}

body .form-group.is-invalid .form-control {
    --input-focus-box-shadow: #ea433552;
    border-color: var(--form-error-color)
}

body .form-group .iti {
    display: block
}

.box-checklists {
    --form-check-padding: 8px 9px;
    --form-check-border-radius: 6px;
    --form-check-border-color: #C3C4E0;
    --form-check-checked-bg: #E8E9FC;
    --form-check-checked-color: var(--color-primary);
    --form-check-checked-border-color: #C3C4E0
}

.box-checklists .form-check {
    padding: var(--form-check-padding);
    border: 1px solid var(--form-check-border-color);
    border-radius: var(--form-check-border-radius);
    transition: all .4s
}

.box-checklists .form-check:has(.form-check-input:checked) {
    background-color: var(--form-check-checked-bg);
    --form-check-border-color: var(--form-check-checked-border-color)
}

.box-checklists .form-check:has(.form-check-input:checked) .form-check-label {
    --form-label-color: var(--form-check-checked-color)
}

.box-checklists .form-check .form-check-input {
    inset: 0;
    width: auto;
    cursor: pointer
}

.box-checklists .form-check .form-check-label::before,
.box-checklists .form-check .form-check-label::after {
    display: none
}

.form-divider {
    --form-divider-color: var(--color-text-secondary);
    --form-divider-bd-color: #8B9194;
    --form-divider-width: calc(50% - 20px);
    --form-divider-height: 1px;
    --form-divider-inset-inline: 0 auto;
    --form-divider-inset-block: 0 auto;
    --form-divider-margin: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    font-weight: 400;
    font-size: 14px;
    color: var(--form-divider-color);
    line-height: 1.4;
    letter-spacing: -0.28px;
    text-align: center;
    text-transform: uppercase;
    margin-block: var(--form-divider-margin)
}

.form-divider:before,
.form-divider:after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    background-color: var(--form-divider-bd-color);
    width: var(--form-divider-width);
    height: var(--form-divider-height)
}

.form-divider:after {
    inset-inline: auto 0
}

.form-divider-vertical {
    --form-divider-width: 1px;
    --form-divider-height: calc(50% - 12px);
    --form-divider-margin: 0;
    width: auto
}

.form-divider-vertical:before,
.form-divider-vertical:after {
    inset-block-start: 0;
    inset-inline: auto
}

.form-divider-vertical:after {
    inset-block: auto 0
}

.email-verify-fields {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.email-verify-fields .form-control {
    padding-inline-end: calc(var(--input-padding-x) + 50px)
}

.email-verify-fields .email-verify-btn {
    position: absolute;
    inset-inline-end: var(--input-padding-x)
}

.location-picker-field {
    --location-picker-icon-width: calc((var(--input-padding-x) *2) + 20px);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.location-picker-field .form-control {
    padding-inline-end: var(--location-picker-icon-width)
}

.location-picker-field .location-picker-icon {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    min-width: var(--location-picker-icon-width);
    cursor: pointer;
    z-index: 1
}

.form-field-password {
    --password-icon-width: 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative
}

.form-field-password .form-control {
    padding-inline-end: calc(4px + var(--password-icon-width) + 16px)
}

.form-field-password .form-field-password-icon {
    position: absolute;
    inset-inline-end: 14px;
    min-width: var(--password-icon-width);
    aspect-ratio: 1;
    cursor: pointer
}

.form-field-password .form-field-password-icon>* {
    position: absolute;
    transition: all .3s
}

.form-field-password .form-field-password-icon .form-field-password-icon-hide {
    opacity: 0
}

.form-field-password .form-field-password-icon.form-field-password-show .form-field-password-icon-show {
    opacity: 0
}

.form-field-password .form-field-password-icon.form-field-password-show .form-field-password-icon-hide {
    opacity: 1
}

.avatar {
    --avatar-size: 56px;
    --avatar-font-size: 20px;
    --avatar-color-bg: #E7E7F6;
    --avatar-color-font: var(--color-primary);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--avatar-color-bg);
    color: var(--avatar-color-font);
    font-size: var(--avatar-font-size);
    font-weight: 600;
    line-height: 1;
    min-width: var(--avatar-size);
    max-width: var(--avatar-size);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden
}

.avatar img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.avatar-sm {
    --avatar-size: 54px
}

.avatar-lg {
    --avatar-size: 70px;
    --avatar-font-size: 23px
}

.avatar-xl {
    --avatar-size: 84px;
    --avatar-font-size: 28px
}

@media only screen and (max-width: 767px) {
    .avatar-xl {
        --avatar-size: 70px
    }
}

[lang=ar] .line-anim {
    --line-anim-origin: bottom left;
    --line-anim-origin-active: bottom right
}

.line-anim {
    --line-anim-color: currentColor;
    --line-anim-height: 1.5px;
    --line-anim-bottom: calc(-1 * var(--line-anim-height) - 4px);
    --line-anim-origin: bottom right;
    --line-anim-origin-active: bottom left;
    position: relative;
    transition: all .4s
}

.line-anim::before {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: var(--line-anim-height);
    bottom: var(--line-anim-bottom);
    inset-inline-start: 0;
    background-color: var(--line-anim-color);
    transition: transform .25s ease-out;
    transform-origin: var(--line-anim-origin);
    will-change: transform
}

.line-anim:hover::before {
    transform: scaleX(1);
    transform-origin: var(--line-anim-origin-active)
}

body:has(.main-popup.is-active) {
    overflow: hidden
}

.main-popup {
    --popup-min-width: 674px;
    --popup-max-width: 100%;
    --popup-content-padding: 24px;
    --popup-floating-value: 35px;
    --popup-border-radius: 12px;
    --popup-content-gap: 20px;
    --main-popup-overlay-display: block;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    min-width: 100vw;
    min-height: 100svh;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: calc(var(--header-z-index) + 1);
    transition: all .4s
}

.main-popup.main-popup-drawer {
    --popup-floating-value: -100%;
    --popup-content-gap: 0px;
    --popup-border-radius: 0;
    --drawer-position: flex-end;
    --drawer-width: 500px;
    --popup-min-width: var(--drawer-width)
}

.main-popup.main-popup-drawer .popup-content {
    margin-top: 0;
    margin-inline-end: var(--popup-floating-value)
}

.main-popup.main-popup-drawer .popup-common-box {
    -ms-flex-item-align: var(--drawer-position);
    align-self: var(--drawer-position);
    max-width: var(--drawer-width);
    min-height: 100svh
}

@media only screen and (max-width: 767px) {
    .main-popup {
        --popup-floating-value: -35px;
        --popup-border-radius: 0;
        --popup-content-gap: 0px;
        --popup-content-padding: 16px;
        --main-popup-overlay-display: none
    }

    .main-popup.main-popup-drawer {
        --popup-floating-value: 35px;
        --drawer-width: 100vw
    }

    .main-popup.main-popup-drawer .popup-content {
        margin-inline-end: 0;
        margin-top: var(--popup-floating-value)
    }

    .main-popup.main-popup-drawer .popup-common-box {
        -ms-flex-item-align: normal;
        align-self: normal
    }
}

.main-popup .popup-bg {
    display: var(--main-popup-overlay-display);
    background-color: var(--color-black);
    position: absolute;
    inset: 0;
    opacity: .6
}

.main-popup .popup-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 100svh;
    max-height: 100svh;
    margin-top: calc(-1*var(--popup-floating-value));
    overflow: hidden;
    transition: all .4s
}

.main-popup .popup-common-box {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-white);
    min-width: min(100% - var(--popup-content-gap)*2, var(--popup-min-width));
    max-width: var(--popup-max-width);
    padding: calc(var(--popup-content-padding) - 4px);
    margin: var(--popup-content-gap);
    border-radius: var(--popup-border-radius);
    overflow: hidden;
    transition: all .4s
}

.main-popup .popup-common-box>.popup-close-btn {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px
}

@media only screen and (max-width: 767px) {
    .main-popup .popup-common-box {
        min-width: 100vw;
        min-height: 100svh;
        padding: 0
    }
}

@media only screen and (min-width: 768px) {
    .main-popup .popup-common-box>* {
        padding-inline: 4px
    }
}

.main-popup .popup-common-box:has(.popup-footer) .popup-body {
    -ms-flex: 1 1 0px;
    flex: 1 1 0
}

.main-popup .popup-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px
}

@media only screen and (max-width: 767px) {
    .main-popup .popup-header {
        padding: var(--layout-container-gap);
        border-bottom: 1px solid var(--color-border-primary)
    }
}

.main-popup .popup-header+.popup-body {
    margin-top: 24px
}

.main-popup .popup-title {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-text-primary);
    letter-spacing: -0.48px
}

@media only screen and (max-width: 767px) {
    .main-popup .popup-title {
        font-size: 20px
    }
}

.main-popup .popup-close-btn {
    --btn-padding: 10px 3px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-block: 3px auto;
    margin-inline-start: auto
}

.main-popup .popup-close-btn:hover {
    opacity: .75
}

.main-popup .popup-body {
    overflow-y: auto
}

@media only screen and (max-width: 767px) {
    .main-popup .popup-body {
        padding: 0 var(--layout-container-gap) var(--layout-container-gap) var(--layout-container-gap)
    }
}

.main-popup.is-active {
    --popup-floating-value: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: all
}

body:has(.main-popup.is-active) .select2-container--open .select2-dropdown {
    z-index: calc(var(--header-z-index) + 2)
}

.select2-container--default {
    --select-container-width: 170px;
    --select-color-bg: var(--color-white);
    --select-color-font: var(--color-text-primary);
    --select-disabled-color-font: var(--color-text-tertiary);
    --select-color-border: #BDBDBD;
    --select-box-padding-y: 16px;
    --select-box-padding-x: 16px 32px;
    --select-border-radius: 6px;
    --select-search-min-width: 150px;
    --select-search-height: 36px;
    --select-hover-color-bg: #F4F5F6;
    --select-hover-color-font: var(--input-font-color);
    --select2-dropdown-position-y: 5px
}

.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--input-focus-border-color);
    box-shadow: 0px 0px 0px 3px var(--input-focus-box-shadow)
}

.select2-container--default .select2-selection--single {
    background-color: var(--select-color-bg);
    height: auto;
    padding: 0;
    border: 1px solid var(--select-color-border);
    border-radius: var(--select-border-radius) !important;
    transition: all .4s
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-weight: 500;
    font-size: 14px;
    color: var(--select-color-font);
    line-height: 1.4;
    padding-block: var(--select-box-padding-y) !important;
    padding-inline: var(--select-box-padding-x) !important;
    transition: all .4s
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--select-color-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.28px;
    transition: all .4s
}

.select2-container--default .select2-search--dropdown {
    padding: 10px
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--input-bg);
    min-width: var(--select-search-min-width);
    min-height: var(--select-search-height);
    font-weight: var(--input-font-weight);
    font-size: var(--input-font-size);
    line-height: var(--input-line-height);
    color: var(--input-font-color);
    padding: 10px var(--input-padding-x);
    border: 1px solid var(--input-border-color);
    border-radius: var(--input-border-radius);
    outline: none !important;
    transition: all .4s
}

.select2-container--default .select2-search--dropdown .select2-search__field:hover,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--input-focus-border-color)
}

.select2-container--default .select2-results__option--selected {
    background-color: var(--select-hover-color-bg);
    color: var(--select-hover-color-font)
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-bg-light);
    color: var(--select-hover-color-font)
}

.select2-container--default .flag-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden
}

.select2-container--default .flag-icon img {
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center;
    object-position: center
}

.select2-container--default .country-text {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.28px
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--select-color-bg);
    --select-color-font: var(--select-disabled-color-font)
}

.select2-container.select2:after {
    content: "";
    position: absolute;
    top: calc(50% - 8px);
    inset-inline-end: 10px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M11.6004 6.19922L8.00039 9.79922L4.40039 6.19922' stroke='%23050505' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right center;
    width: 16px;
    height: 16px;
    transition: .4s;
    pointer-events: none
}

.select2-container.select2--open:after {
    transform: rotate(-180deg)
}

.select2-results__options {
    padding: 0
}

.select2-results__options .select2-results__option {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    font-weight: normal;
    font-size: 13px;
    line-height: 16px;
    color: var(--color-text-secondary);
    padding: 12px 16px;
    transition: all .4s
}

.select2-container--open .select2-dropdown {
    top: var(--select2-dropdown-position-y);
    inset-inline-end: 1px;
    background-color: var(--color-white);
    min-width: var(--select-container-width) !important;
    border: 0;
    border-radius: 10px !important;
    overflow: hidden;
    box-shadow: 0px 4px 25px rgba(0, 0, 0, .1);
    z-index: calc(var(--header-z-index) - 1)
}

.select2-container--open .select2-dropdown.select2-dropdown--above {
    top: calc(-1*var(--select2-dropdown-position-y))
}

.language-select {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    width: 100%
}

.language-select .select2-container--default {
    --select-container-width: 120px
}

.language-select .select2-selection--single {
    --select-color-border: transparent;
    --select-box-padding-y: 6px;
    --select-box-padding-x: 6px 32px;
    --select-border-radius: 0
}

.language-select {
    position: relative
}

.language-select .select2-container--open {
    left: unset !important;
    inset-inline: auto 0 !important
}

.search-filters-area .select-parent {
    position: relative
}

.search-filters-area .select-parent .select2-container--open {
    left: unset !important;
    inset-inline: 0 0 !important
}

[lang=ar] .news-letter-sec {
    --news-letter-sec-img: url("../images/news-letter-img-ar.webp");
    --news-letter-sec-bg: url("../images/news-letter-bg-ar.png");
    --news-letter-sec-img-position: left top;
    --news-letter-sec-bg-position: 60% top
}

@media only screen and (max-width: 767px) {
    [lang=ar] .news-letter-sec {
        --news-letter-sec-bg-position: right bottom
    }
}

.news-letter-sec {
    --news-letter-sec-img: url("../images/news-letter-img.webp");
    --news-letter-sec-bg: url("../images/news-letter-bg-responsive.png");
    --news-letter-sec-img-position: right top;
    --news-letter-sec-bg-position: 40% top;
    background-color: var(--color-primary);
    background: var(--news-letter-sec-img) var(--news-letter-sec-img-position)/min(45%, 680px) no-repeat, var(--news-letter-sec-bg) var(--news-letter-sec-bg-position)/35% no-repeat, var(--color-primary);
    padding-block: 64px;
    margin-top: calc(var(--sec-cmn-space))
}

@media only screen and (max-width: 767px) {
    .news-letter-sec {
        background: var(--news-letter-sec-img) var(--news-letter-sec-img-position)/min(80%, 680px) no-repeat, var(--news-letter-sec-bg) var(--news-letter-sec-bg-position)/100% no-repeat, var(--color-primary);
        padding-block: 55vw 48px
    }
}

.news-letter-sec .content-wrapper {
    max-width: 660px
}

@media only screen and (max-width: 767px) {
    .news-letter-sec .content-wrapper {
        padding-inline: 8px
    }
}

.news-letter-sec .sec-cmn-title {
    color: var(--color-white);
    margin-bottom: 20px
}

.news-letter-sec .news-letter-form {
    --input-padding-y: 12px;
    margin-top: 60px
}

@media only screen and (max-width: 767px) {
    .news-letter-sec .news-letter-form {
        margin-top: 32px
    }
}

.news-letter-sec .news-letter-form .submit-btn {
    --btn-padding: 12px 16px;
    --btn-hover-bg-color: var(--color-white);
    --btn-hover-font-color: var(--color-text-primary)
}

@media only screen and (max-width: 767px) {
    .news-letter-sec .news-letter-form .submit-btn {
        --btn-padding: 14px 16px 10px 16px
    }
}

.news-letter-sec .news-letter-form-confirmation:not(.is-active) {
    display: none
}

.news-letter-sec .contact-us-btn {
    margin-top: 65px
}

body {
    --pmpro--base--spacing--large: 0;
    --pmpro--box-shadow: none;
    --pmpro--color--border--variation: none;
    --pmpro--color--contrast: var(--color-text-primary);
    --pmpro--color--accent: var(--color-primary)
}

.auth-popup {
    --popup-min-width: 400px
}

.auth-popup .account-box {
    max-width: 500px;
    display: none
}

.auth-popup .account-box.is-active {
    display: -ms-flexbox;
    display: flex
}

.auth-popup .account-form {
    --checkbox-color: #D0D0D0
}

.auth-popup .account-form .btn-primary {
    width: 100%
}

.auth-popup .account-box-bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px
}

.auth-popup .otp-input-fields {
    --input-padding-x: 0;
    --grid-columns: 6;
    --grid-gap: 8px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap)
}

@media only screen and (min-width: 768px) {
    .auth-popup .otp-input-fields {
        max-width: 352px
    }
}

.auth-popup .otp-input-fields .form-control {
    text-align: center
}

.auth-popup .success-message-icon {
    max-width: 153px
}

.auth-popup .success-message {
    gap: 16px;
    max-width: 360px;
    margin-inline: auto
}

@media only screen and (max-width: 767px) {
    .auth-popup .success-message {
        margin-top: 75px
    }
}

.pmpro {
    max-width: 600px;
    margin-inline: auto
}

.pmpro .pmpro_card_actions {
    padding: 0;
    background-color: rgba(0, 0, 0, 0);
    margin-top: 18px;
    text-align: right
}

.pmpro .pmpro_card_actions a {
    color: var(--color-primary);
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 2px;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

.pmpro .pmpro_form_field-password-toggle button {
    font-size: 12px
}

.pmpro_form_field-password-toggle-state {
    font-size: 14px
}

.pmpro .pmpro_section #loginform .input:focus {
    border-color: var(--input-focus-border-color);
    box-shadow: 0px 0px 0px 3px var(--input-focus-box-shadow);
    outline: 0;
    transition: all .4s
}

#loginform label {
    display: inline-block;
    font-size: var 14px --form-label-font-size;
    font-weight: 400;
    line-height: 1.25;
    color: var(--form-label-color);
    letter-spacing: -0.28px
}

.pmpro .pmpro_section #loginform .login-submit .button:hover {
    --pmpro--color--accent: var(--color-white);
    background-color: var(--color-primary-dark)
}

.single-input-form {
    --single-input-form-bg-color: #eee;
    --single-input-form-focus-bg-color: var(--single-input-form-bg-color);
    --single-input-form-border-color: var(--color-border-primary);
    --single-input-form-focus-border-color: var(--input-border-color);
    --single-input-form-border-radius: 6px;
    --single-input-form-input-box-shadow-color: #DFE1E4;
    --input-bg: transparent;
    --input-font-size: 15px;
    --input-font-color: var(--color-text-primary);
    --input-placeholder-color: var(--color-text-primary);
    --input-line-height: 1.2;
    --input-padding-y: 4px;
    --input-padding-x: 14px;
    --input-focus-border-color: transparent;
    --input-focus-box-shadow: none;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    background-color: var(--single-input-form-bg-color);
    padding: 0;
    border: 1px solid var(--single-input-form-border-color);
    border-radius: var(--single-input-form-border-radius);
    transition: all .4s
}

.single-input-form:focus-within {
    background-color: var(--single-input-form-focus-bg-color);
    border-color: var(--single-input-form-focus-border-color);
    box-shadow: 0px 0px 0px 3px var(--single-input-form-input-box-shadow-color)
}

.single-input-form .form-control {
    -ms-flex: 1 1 0px;
    flex: 1 1 0;
    border: 0
}

.single-input-form .form-action-btn {
    --btn-padding: 0;
    min-width: 32px;
    aspect-ratio: 1;
    margin: 6px
}

.select-vehicle-popup {
    --select-vehicle-item-color-bg: #F8FCFF;
    --select-vehicle-item-color-border: var(--color-border-primary);
    --select-vehicle-item-padding: 28px;
    --select-vehicle-item-border-radius: 12px;
    --select-vehicle-item-img-ratio: 307 / 193;
    --select-vehicle-item-selected-icon-size: 24px;
    --select-vehicle-item-selected-icon-position: 12px
}

.select-vehicle-popup .vehicle-lists {
    --grid-columns: 2;
    --grid-gap: 24px 12px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    margin-bottom: 32px
}

.select-vehicle-popup .vehicle-lists:has(>.list-item:only-child) {
    --grid-columns: 1
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .vehicle-lists {
        --grid-columns: 1;
        --grid-gap: 6px;
        --select-vehicle-item-padding: 12px;
        --select-vehicle-item-border-radius: 4px;
        --select-vehicle-item-selected-icon-size: 20px;
        --select-vehicle-item-selected-icon-position: 6px;
        --select-vehicle-item-img-ratio: auto
    }
}

.select-vehicle-popup .vehicle-item {
    position: relative;
    cursor: pointer
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .vehicle-item {
        display: -ms-flexbox;
        display: flex;
        gap: 16px;
        padding: 6px;
        border: 1px solid var(--select-vehicle-item-color-border);
        border-radius: 6px
    }
}

.select-vehicle-popup .vehicle-item:hover {
    --select-vehicle-item-color-border: var(--color-primary)
}

.select-vehicle-popup .vehicle-item:has(.vehicle-radio:checked) {
    --select-vehicle-item-color-border: var(--color-primary)
}

.select-vehicle-popup .vehicle-item:has(.vehicle-radio:checked) .item-img::before {
    transform: translate(0);
    opacity: 1;
    visibility: visible
}

.select-vehicle-popup .vehicle-radio {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    cursor: pointer
}

.select-vehicle-popup .item-img {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    background-color: var(--select-vehicle-item-color-bg);
    padding: var(--select-vehicle-item-padding);
    border: 1px solid var(--select-vehicle-item-color-border);
    border-radius: var(--select-vehicle-item-border-radius);
    aspect-ratio: var(--select-vehicle-item-img-ratio);
    margin-bottom: 10px;
    transition: all .4s
}

.select-vehicle-popup .item-img::before {
    content: "";
    position: absolute;
    inset: var(--select-vehicle-item-selected-icon-position) var(--select-vehicle-item-selected-icon-position) auto auto;
    background-image: url("../images/icon/vehicle-selected-icon.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: var(--select-vehicle-item-selected-icon-size);
    width: var(--select-vehicle-item-selected-icon-size);
    pointer-events: none;
    aspect-ratio: 1;
    transform: translate(6px, -6px);
    opacity: 0;
    visibility: hidden;
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .item-img {
        --select-vehicle-item-img-width: 118px;
        --select-vehicle-item-img-height: 88px;
        max-width: var(--select-vehicle-item-img-width);
        min-width: var(--select-vehicle-item-img-width);
        min-height: var(--select-vehicle-item-img-height);
        max-height: var(--select-vehicle-item-img-height);
        margin-bottom: 0
    }
}

.select-vehicle-popup .item-img img {
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .vehicle-title {
        font-size: 14px
    }
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .vehicle-model {
        font-size: 13px
    }
}

.select-vehicle-popup .add-vehicle-btn {
    background-color: var(--select-vehicle-item-color-bg);
    padding: var(--select-vehicle-item-padding);
    border: 1px solid var(--select-vehicle-item-color-border);
    border-radius: var(--select-vehicle-item-border-radius);
    aspect-ratio: var(--select-vehicle-item-img-ratio);
    transition: all .4s;
    cursor: pointer
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .add-vehicle-btn {
        background-color: rgba(0, 0, 0, 0);
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-pack: start;
        justify-content: flex-start;
        gap: 4px;
        padding: 0;
        border-color: rgba(0, 0, 0, 0);
        margin-top: 16px
    }
}

.select-vehicle-popup .add-vehicle-btn .vehicle-title {
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .add-vehicle-btn .vehicle-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--color-primary)
    }
}

.select-vehicle-popup .add-vehicle-btn:hover {
    --select-vehicle-item-color-border: var(--color-primary)
}

.select-vehicle-popup .add-vehicle-btn:hover .vehicle-title {
    color: var(--color-primary)
}

.select-vehicle-popup .add-vehicle-btn .item-icon {
    background-color: #8b9194;
    min-width: 33px;
    border-radius: 50%;
    aspect-ratio: 1
}

@media only screen and (max-width: 767px) {
    .select-vehicle-popup .add-vehicle-btn .item-icon {
        width: 12px;
        min-width: auto;
        background-color: rgba(0, 0, 0, 0)
    }

    .select-vehicle-popup .add-vehicle-btn .item-icon svg * {
        stroke: var(--color-primary)
    }
}

.add-vehicle-popup .vehicle-add-form-grid {
    --grid-columns: 2;
    --grid-gap: 0 16px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap)
}

@media only screen and (max-width: 767px) {
    .add-vehicle-popup .vehicle-add-form-grid {
        --grid-columns: 1
    }
}

.add-vehicle-popup .vehicle-add-btn {
    margin-top: 32px
}

.mobile-add-vehicle-popup {
    z-index: calc(var(--header-z-index) + 0)
}

.mobile-add-vehicle-popup .popup-body {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 0;
    padding: 0
}

.mobile-add-vehicle-popup .responsive-top-header {
    margin-bottom: 0
}

.mobile-add-vehicle-popup .header-selected-vehicle-area {
    --vehicle-area-icon-size: 38px;
    padding: 20px var(--layout-container-gap);
    border: 0 solid var(--color-border-primary);
    border-width: 1px 0 1px 0;
    margin-bottom: 16px
}

.mobile-add-vehicle-popup .header-selected-vehicle-area .item-arrow-icon {
    margin-block: auto
}

.mobile-add-vehicle-popup .btn-group {
    padding-inline: var(--layout-container-gap)
}

.mobile-add-vehicle-popup .btn-group .btn {
    --btn-padding: 16px 20px;
    --btn-border-color: #C3C4E0;
    --btn-font-color: var(--color-text-secondary);
    font-weight: 500
}

.mobile-add-vehicle-popup .btn-group .lang-btn-selected {
    --btn-bg-color: #E8E9FC;
    --btn-border-color: #E8E9FC;
    --btn-font-color: var(--color-primary);
    --btn-hover-bg-color: #E8E9FC;
    --btn-hover-border-color: #E8E9FC;
    --btn-hover-font-color: var(--color-primary)
}

.mobile-add-vehicle-popup .btn-group .lang-btn-ar {
    font-weight: 300
}

.mobile-add-vehicle-popup .site-features-lists {
    margin-top: auto
}

.mobile-add-vehicle-popup .site-features-lists .list-item {
    padding: 20px var(--layout-container-gap);
    border-top: 1px solid var(--color-border-primary);
    margin-top: auto
}

.mobile-add-vehicle-popup .site-features-lists .item-text {
    color: var(--color-text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.24px
}

[lang=ar] .search-result-popup .list-item::before {
    transform: rotate(90deg)
}

.search-result-popup {
    --search-result-popup-width: "auto";
    --search-result-popup-padding: 12px 8px;
    --search-result-popup-position-y: "auto";
    --search-result-popup-position-x: "auto";
    position: fixed;
    opacity: 0;
    visibility: hidden;
    transition: all .4s;
    z-index: calc(var(--header-z-index) + 1);
    top: var(--search-result-popup-position-y);
    inset-inline-start: var(--search-result-popup-position-x)
}

@media only screen and (max-width: 767px) {
    .search-result-popup {
        --search-result-popup-padding: var(--layout-container-gap);
        position: static
    }
}

.search-result-popup.is-active {
    opacity: 1;
    visibility: visible
}

.search-result-popup .search-result-content-wrapper {
    width: var(--search-result-popup-width);
    background-color: var(--color-white);
    padding: var(--search-result-popup-padding);
    border-radius: 6px;
    margin-top: 12px;
    box-shadow: 0px 0px 0px 3px #dfe1e4
}

@media only screen and (max-width: 767px) {
    .search-result-popup .search-result-content-wrapper {
        width: 100%;
        box-shadow: none
    }
}

.search-result-popup .search-results {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 6px
}

.search-result-popup .list-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 8px;
    position: relative;
    padding: 4px 8px;
    cursor: pointer;
    transition: all .4s
}

.search-result-popup .list-item:hover {
    background-color: var(--color-bg-light)
}

.search-result-popup .list-item::before {
    content: "";
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4998 16.4979L13.4536 13.4516' stroke='%2317232A' stroke-width='1.6875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M15.5009 8.49863C15.5009 12.3649 12.3668 15.4989 8.50056 15.4989C4.63431 15.4989 1.50024 12.3649 1.50024 8.49863C1.50024 4.63238 4.63431 1.49832 8.50056 1.49832C12.3668 1.49832 15.5009 4.63238 15.5009 8.49863' stroke='%234F595F' stroke-width='1.6875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: cover;
    width: 16px;
    aspect-ratio: 1;
    margin-top: 3px
}

.search-result-popup .search-text {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    letter-spacing: -0.36px
}

.search-result-popup .highlight-text {
    font-weight: 600;
    color: var(--color-text-primary)
}

[lang=ar] .header {
    --header-middle-bg-position: left center
}

[lang=ar] .item-added-to-cart {
    font-family: var(--font-family-en)
}

[lang=ar] .mobile-add-vehicle-popup .item-arrow-icon {
    transform: var(--rtl-flip)
}

[lang=ar] .account-dropdown-popup {
    left: var(--header-account-position-x-ar)
}

[lang=ar] .header-main-menu {
    --categories-menu-btn-arrow-rotate: 90deg
}

[lang=ar] .category-menu-wrapper {
    --category-menu-link-arrow-rotate: var(--rtl-flip);
    --category-menu-bg-img-rotate: rotateY(180deg)
}

[lang=ar] .responsive-top-header {
    --responsive-top-back-icon-rotate: var(--rtl-flip)
}

body {
    --header-sticky-value: 58px;
    --header-logo-size: 155px
}

@media only screen and (max-width: 991px) {
    body {
        --header-logo-size: 90px
    }
}

@media only screen and (max-width: 767px) {
    body {
        --header-sticky-value: 0px
    }
}

body:has(.header.is-active),
body:has(.header-menu-wrapper.is-active),
body:has(.category-menu-wrapper.is-active) {
    overflow: hidden
}

body:has(.product-listing-page) .navigation-bottom-bar:not(.product-list-bottom-bar) {
    display: none
}

.header {
    --header-overlay-opacity: .7;
    --header-middle-bg-position: right center;
    --header-main-menu-gap: 8px;
    position: sticky;
    top: calc(var(--header-sticky-value)*-1);
    z-index: var(--header-z-index);
    background-color: var(--color-white)
}

.header .header-overlay {
    background-color: var(--color-black);
    position: fixed;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .4s
}

.header.is-active .header-overlay {
    opacity: var(--header-overlay-opacity);
    visibility: visible;
    pointer-events: all
}

.logo {
    display: -ms-flexbox;
    display: flex;
    min-width: 90px;
    max-width: var(--header-logo-size)
}

.logo img {
    width: 100%
}

.header-top {
    --header-top-icon-size: 24px;
    --header-top-list-gap: 12px;
    position: relative;
    background-color: var(--color-white);
    padding-block: 12px;
    border-bottom: 1px solid var(--color-border-primary)
}

@media only screen and (max-width: 991px) {
    .header-top {
        --header-top-list-gap: 8px
    }
}

@media only screen and (max-width: 767px) {
    .header-top {
        display: none
    }
}

.header-top .header-top-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.header-top .header-top-left {
    min-width: 0;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%
}

.header-top .header-top-right {
    margin-inline-start: auto
}

.header-top .header-country-status {
    min-width: 20px;
    max-width: 20px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden
}

.header-top .header-country-status img {
    -o-object-fit: cover;
    object-fit: cover
}

.header-top .item-icon {
    display: -ms-flexbox;
    display: flex;
    min-width: var(--header-top-icon-size);
    max-width: var(--header-top-icon-size)
}

@media only screen and (max-width: 991px) {
    .header-top .item-icon {
        display: none
    }
}

.header-top .item-text {
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.3px
}

@media only screen and (max-width: 991px) {
    .header-top .item-text {
        font-size: 12px
    }
}

.header-top .site-features-lists {
    display: -ms-flexbox;
    display: flex;
    gap: var(--header-top-list-gap)
}

.header-top .site-features-lists .list-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px
}

.header-top .site-features-lists .list-item:not(:last-child) {
    padding-inline-end: var(--header-top-list-gap);
    border-inline-end: 1px solid var(--color-border-primary)
}

.header-middle {
    position: relative;
    background: url("../images/header-middle-bg.png") var(--header-middle-bg-position)/auto no-repeat, var(--color-white);
    padding-block: 24px;
    border-bottom: 1px solid var(--color-border-primary)
}

@media only screen and (max-width: 767px) {
    .header-middle {
        background: url("../images/header-middle-bg-responsive.png") var(--header-middle-bg-position)/auto 100% no-repeat, var(--color-white);
        padding-block: var(--layout-container-gap)
    }
}

.header-middle .header-middle-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.header-middle .mobile-search-btn {
    --btn-padding: 0;
    min-width: 32px;
    aspect-ratio: 1;
    margin-inline-start: auto
}

@media only screen and (min-width: 768px) {
    .header-middle .mobile-search-btn {
        display: none
    }
}

.header-middle .header-search-form {
    min-width: 20%;
    margin-inline: 40px 60px
}

@media only screen and (min-width: 768px) {
    .header-middle .header-search-form .responsive-top-header {
        display: none
    }
}

@media only screen and (max-width: 1280px) {
    .header-middle .header-search-form {
        margin-inline: 14px 25px
    }
}

@media only screen and (max-width: 767px) {
    .header-middle .header-search-form {
        position: fixed;
        inset: 0;
        background-color: var(--color-white);
        -ms-flex: 0;
        flex: 0;
        margin-inline: 0;
        min-width: 100%;
        z-index: calc(var(--header-z-index) + 1);
        opacity: 0;
        visibility: hidden;
        transform: translateY(var(--responsive-float-value));
        pointer-events: none;
        transition: all .4s
    }

    .header-middle .header-search-form .single-input-form {
        margin: 4px var(--layout-container-gap)
    }

    .header-middle .header-search-form.is-active {
        opacity: 1;
        visibility: visible;
        transform: translate(0);
        pointer-events: all
    }
}

@media only screen and (max-width: 991px) {
    .header-middle .header-selected-vehicle-area .item-content {
        display: none
    }
}

@media only screen and (max-width: 991px) {
    .header-middle .navigation-links .link-item .link-text {
        display: none
    }
}

@media only screen and (max-width: 767px) {
    .header-middle-right {
        display: none
    }
}

.header-selected-vehicle-area {
    --vehicle-area-icon-size: 38px;
    cursor: pointer
}

.header-selected-vehicle-area:hover .item-subtitle {
    color: var(--color-primary)
}

@media only screen and (max-width: 991px) {
    .header-selected-vehicle-area {
        --vehicle-area-icon-size: 28px;
        gap: 0px
    }
}

.header-selected-vehicle-area .item-icon {
    min-width: var(--vehicle-area-icon-size);
    max-width: var(--vehicle-area-icon-size)
}

@media only screen and (max-width: 991px) {
    .header-selected-vehicle-area .item-arrow-icon {
        margin-bottom: auto
    }
}

.header-selected-vehicle-area .item-title {
    line-height: 1
}

.header-selected-vehicle-area .item-subtitle {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: -0.32px;
    transition: all .4s
}

.header-middle-menu {
    --header-middle-menu-gap: 24px;
    gap: var(--header-middle-menu-gap);
    padding-inline-start: var(--header-middle-menu-gap);
    border-inline-start: 1px solid #dfdfdf;
    margin-inline-start: var(--header-middle-menu-gap)
}

@media only screen and (max-width: 1280px) {
    .header-middle-menu {
        --header-middle-menu-gap: 16px
    }
}

@media only screen and (max-width: 767px) {
    .header-middle-menu {
        display: none
    }
}

.navigation-links .link-item {
    --link-item-color: var(--color-text-secondary);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    gap: 6px
}

.navigation-links .link-item .link-text {
    font-weight: 400;
    font-size: 14px;
    color: var(--link-item-color);
    line-height: 1.2;
    letter-spacing: -0.36px;
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .navigation-links .link-item .link-text {
        display: block
    }
}

.navigation-links .link-item .right-link-img {
    display: block;
    margin: auto;
    transition: all .4s
}

.navigation-links .link-item:hover {
    --link-item-color: var(--color-primary)
}

.navigation-links .link-item.active {
    --link-item-color: var(--color-primary)
}

.navigation-links .link-item.active .right-link {
    --link-item-color: var(--color-primary)
}

.navigation-links .item-added-to-cart {
    position: absolute;
    top: -10px;
    margin-inline-end: -26px;
    display: grid;
    place-items: center;
    background-color: #6ed34a;
    padding: 2px 4px 3px 4px;
    min-width: 18px;
    aspect-ratio: 1;
    font-weight: 500;
    font-size: 10px;
    color: var(--color-text-primary);
    line-height: 1;
    border-radius: 50%;
    border: 1px solid var(--color-white)
}

@media only screen and (max-width: 767px) {
    .navigation-links .item-added-to-cart {
        padding-block: 4px 2px
    }
}

.account-dropdown-popup {
    --header-account-dropdown-y: "auto";
    --account-dropdown-popup-min-width: 300px;
    --account-dropdown-floating-value: -35px;
    position: fixed;
    top: var(--header-account-dropdown-y);
    left: var(--header-account-position-x);
    z-index: calc(var(--header-z-index) + 1);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: var(--account-dropdown-popup-min-width);
    max-height: calc(100vh - var(--header-account-dropdown-y) - 12px);
    background-color: var(--color-white);
    padding-block: 7px;
    border-radius: 6px;
    margin-inline-end: auto;
    margin-top: var(--account-dropdown-floating-value);
    overflow: hidden;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .1);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .account-dropdown-popup {
        --account-dropdown-floating-value: var(--responsive-float-value);
        inset: 0;
        max-height: 100%;
        min-width: 100%;
        padding-block: 0;
        border-radius: 0
    }
}

.account-dropdown-popup.is-active {
    --account-dropdown-floating-value: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: all
}

.account-dropdown-popup .before-login {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    max-width: 308px;
    padding: 24px;
    overflow-y: auto
}

@media only screen and (max-width: 767px) {
    .account-dropdown-popup .before-login {
        max-width: 100%;
        padding: var(--layout-container-gap)
    }
}

.account-dropdown-popup .before-login .features-lists {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
    padding-inline-end: 10px
}

.account-dropdown-popup .before-login .features-lists .list-item:not(:last-child) {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-primary)
}

.account-dropdown-popup .before-login .features-lists .item-icon {
    min-width: 32px;
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.account-dropdown-popup .account-info {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 12px;
    padding: var(--layout-container-gap)
}

.account-dropdown-popup .account-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

.account-dropdown-popup .account-subtitle {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.2;
    letter-spacing: -0.28px;
    margin-top: 8px
}

.account-dropdown-popup .account-dropdown {
    --account-dropdown-color-font: var(--color-text-secondary);
    --account-dropdown-color-bg: var(--color-white);
    --account-dropdown-hover-color-font: var(--color-text-primary);
    --account-dropdown-hover-color-border: var(--color-primary);
    --account-dropdown-hover-color-bg: var(--color-bg-light);
    overflow-y: auto
}

.account-dropdown-popup .account-dropdown .dropdown-item {
    padding: 0
}

.account-dropdown-popup .account-dropdown .dropdown-item.active,
.account-dropdown-popup .account-dropdown .dropdown-item:active {
    background-color: rgba(0, 0, 0, 0)
}

.account-dropdown-popup .account-dropdown .dropdown-text {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--account-dropdown-color-font);
    letter-spacing: -0.3px
}

.account-dropdown-popup .account-dropdown .dropdown-link {
    position: relative;
    padding: 16px;
    transition: all .4s
}

.account-dropdown-popup .account-dropdown .dropdown-link::before {
    content: "";
    position: absolute;
    inset: 0 auto;
    inset-inline-start: -1px;
    width: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 0px 12px 12px 0;
    pointer-events: none;
    transition: all .4s
}

.account-dropdown-popup .account-dropdown .dropdown-link:hover {
    --account-dropdown-color-font: var(--account-dropdown-hover-color-font);
    background-color: var(--account-dropdown-hover-color-bg)
}

.account-dropdown-popup .account-dropdown .dropdown-link:hover::before {
    background-color: var(--account-dropdown-hover-color-border)
}

.header-menu-wrapper {
    position: relative;
    background-color: var(--color-white)
}

@media only screen and (min-width: 992px) {
    .header-menu-wrapper {
        background-color: var(--color-bg-light);
        border-bottom: 1px solid var(--color-border-primary)
    }
}

@media only screen and (max-width: 991px) {
    .header-menu-wrapper {
        position: fixed;
        inset: 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        transform: translateY(var(--responsive-float-value));
        transition: all .4s
    }

    .header-menu-wrapper.is-active {
        opacity: 1;
        visibility: visible;
        transform: translate(0)
    }
}

.header-main-menu {
    --categories-menu-btn-arrow-rotate: -90deg;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 991px) {
    .header-main-menu {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: normal;
        align-items: normal;
        overflow: auto
    }
}

.header-main-menu .categories-menu-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-block: var(--header-main-menu-gap);
    margin-inline-start: var(--layout-container-gap);
    cursor: pointer
}

@media only screen and (max-width: 1919px) {
    .header-main-menu .categories-menu-btn {
        margin-inline-start: max(var(--layout-container-gap), (100% - var(--layout-container-width))/2)
    }
}

@media only screen and (min-width: 992px) {
    .header-main-menu .categories-menu-btn {
        padding-inline-end: 20px;
        border-inline-end: 1px solid var(--color-border-primary);
        margin-inline-end: 20px
    }
}

@media only screen and (max-width: 991px) {
    .header-main-menu .categories-menu-btn {
        padding: var(--header-main-menu-gap) var(--layout-container-gap);
        margin-inline-start: 0
    }
}

.header-main-menu .categories-menu-btn .item-arrow {
    max-width: 10px
}

.header-main-menu .categories-menu-btn .item-icon,
.header-main-menu .categories-menu-btn .item-arrow {
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.header-main-menu .categories-menu-btn .item-icon img,
.header-main-menu .categories-menu-btn .item-arrow img {
    width: 100%
}

@media only screen and (max-width: 991px) {
    .header-main-menu .categories-menu-btn .item-icon {
        min-width: 28px
    }
}

.header-main-menu .categories-menu-btn .item-icon img {
    width: 100%
}

@media only screen and (max-width: 991px) {
    .header-main-menu .categories-menu-btn .item-arrow {
        margin-inline-start: auto;
        min-width: 12px;
        transform: rotate(var(--categories-menu-btn-arrow-rotate))
    }
}

.header-main-menu .categories-menu-btn .item-arrow svg {
    width: 100%
}

.header-main-menu .categories-menu-btn .item-text {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-primary-dark);
    line-height: 1.2;
    letter-spacing: -0.32px
}

@media only screen and (max-width: 991px) {
    .header-main-menu .categories-menu-btn .item-text {
        font-weight: 500;
        color: var(--color-primary)
    }
}

.header-main-menu .swiper-slide {
    -ms-flex: 1;
    flex: 1;
    white-space: nowrap
}

.header-main-menu .menu-lists {
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.header-main-menu .menu-lists-slider {
    padding-block: var(--header-main-menu-gap)
}

@media only screen and (min-width: 992px) {
    .header-main-menu .menu-lists-slider {
        padding-inline-end: var(--layout-container-gap)
    }
}

.header-main-menu .menu-slider-item {
    --menu-slider-item-color-border: transparent;
    --menu-slider-item-color-icon-bg: var(--color-white);
    --menu-slider-item-color-font: var(--color-text-primary);
    --menu-slider-item-color-icon-border: var(--color-border-primary);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    padding: var(--header-main-menu-gap)
}

@media only screen and (max-width: 991px) {
    .header-main-menu .menu-slider-item {
        padding: var(--header-main-menu-gap) var(--layout-container-gap)
    }
}

@media only screen and (min-width: 992px) {
    .header-main-menu .menu-slider-item::before {
        content: "";
        position: absolute;
        inset: auto 4px calc(-1*var(--header-main-menu-gap)) 4px;
        height: 4px;
        background-color: var(--menu-slider-item-color-border);
        transition: all .4s
    }
}

.header-main-menu .menu-slider-item.is-active,
.header-main-menu .menu-slider-item:hover {
    --menu-slider-item-color-border: var(--color-primary);
    --menu-slider-item-color-icon-bg: #E8E9FC;
    --menu-slider-item-color-font: var(--color-primary);
    --menu-slider-item-color-icon-border: #C3C4E0
}

.header-main-menu .menu-slider-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: var(--menu-slider-item-color-icon-bg);
    min-width: 32px;
    max-width: 32px;
    aspect-ratio: 1;
    border: 1px solid var(--menu-slider-item-color-icon-border);
    border-radius: 50%;
    transition: all .4s
}

.header-main-menu .menu-slider-icon img {
    max-width: 19px
}

.header-main-menu .menu-slider-text {
    font-weight: 500;
    font-size: 16px;
    color: var(--menu-slider-item-color-font);
    line-height: 1.2;
    letter-spacing: -0.32px;
    transition: all .4s
}

.category-menu-wrapper {
    --category-menu-header-width: 240px;
    --category-menu-height: 220px;
    --category-menu-img-size: 465px;
    --menu-links-wrapper-width: 150px;
    --menu-brands-wrapper-width: 240px;
    --category-menu-link-arrow-rotate: none;
    --category-menu-bg-img-rotate: none;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    inset: auto 0 auto 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all .4s
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper {
        --category-menu-img-size: 350px;
        --menu-links-wrapper-width: 100%;
        --menu-brands-wrapper-width: 100%;
        position: fixed;
        inset: 0;
        transform: translateX(100%)
    }
}

.category-menu-wrapper.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
    z-index: var(--header-z-index)
}

.category-menu-wrapper .category-menu-overlay {
    position: absolute;
    z-index: -1;
    background-color: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100vh
}

.category-menu-wrapper .category-menu-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.36px
}

@media only screen and (min-width: 992px) {
    .category-menu-wrapper .category-menu-title {
        margin-bottom: 12px
    }
}

.category-menu-wrapper .view-all-categories-link {
    --view-all-categories-link-padding: 12px 24px;
    --view-all-categories-link-font-size: 14px;
    --view-all-categories-link-font-color: var(--color-text-primary);
    --view-all-categories-link-active-font-color: var(--color-primary);
    position: relative;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    font-weight: 500;
    font-size: var(--view-all-categories-link-font-size);
    color: var(--view-all-categories-link-font-color);
    line-height: 1.4;
    letter-spacing: -0.28px;
    padding: var(--view-all-categories-link-padding);
    transition: all .4s
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .view-all-categories-link {
        --view-all-categories-link-font-size: 16px;
        --view-all-categories-link-padding: 12px var(--layout-container-gap)
    }
}

.category-menu-wrapper .view-all-categories-link:hover {
    color: var(--view-all-categories-link-active-font-color)
}

.category-menu-wrapper .category-menu-container {
    display: -ms-flexbox;
    display: flex;
    max-height: calc(100vh - var(--category-menu-height))
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-menu-container {
        min-width: 100vw;
        max-height: 100svh
    }
}

.category-menu-wrapper .category-menu-header {
    min-width: var(--category-menu-header-width);
    max-width: calc(var(--category-menu-header-width) + 75px);
    background-color: var(--color-white);
    padding-top: 24px;
    overflow-y: auto
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-menu-header {
        min-width: 100vw;
        min-height: 100svh;
        max-height: 100svh;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        padding-top: 0;
        overflow: hidden
    }

    .category-menu-wrapper .category-menu-header>.category-menu-title {
        display: none
    }

    .category-menu-wrapper .category-menu-header .nav-tabs-header {
        overflow-y: auto
    }
}

.category-menu-wrapper .category-menu-header .nav-tabs .nav-link {
    white-space: normal
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-menu-header .nav-tabs {
        --nav-tab-header-font-size: 16px;
        --nav-tab-header-padding: 12px var(--layout-container-gap);
        --nav-tab-header-items-gap: var(--header-main-menu-gap)
    }

    .category-menu-wrapper .category-menu-header .nav-tabs .nav-link::before {
        inset-block: auto;
        inset-inline: auto 10px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7.5 15L12.5 10L7.5 5' stroke='%23191B1D' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        width: 20px;
        aspect-ratio: 1;
        color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat;
        transform: var(--category-menu-link-arrow-rotate)
    }
}

@media only screen and (min-width: 992px) {
    .category-menu-wrapper .category-menu-header .category-menu-title {
        padding-inline-start: 24px
    }
}

.category-menu-wrapper .category-menu-header-top {
    display: -ms-flexbox;
    display: flex;
    gap: 8px
}

@media only screen and (min-width: 992px) {
    .category-menu-wrapper .category-menu-header-top {
        display: none
    }
}

.category-menu-wrapper .category-menu-content {
    max-width: calc(100vw - var(--category-menu-header-width) - 100px)
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-menu-content .responsive-top-header {
        padding-inline: 0
    }
}

.category-menu-wrapper .category-menu-content .tab-content-wrapper {
    background-color: var(--color-bg-light);
    display: -ms-flexbox;
    display: flex;
    height: 100%
}

.category-menu-wrapper .category-menu-content .tab-pane {
    position: relative;
    background-color: var(--color-bg-light);
    padding: 24px
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-menu-content .tab-pane {
        position: absolute;
        inset: 0;
        display: block;
        background-color: var(--color-white);
        background-size: 30svh;
        padding: 0;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition: all .4s;
        z-index: 9
    }

    .category-menu-wrapper .category-menu-content .tab-pane.is-visible {
        opacity: 1;
        visibility: visible;
        transform: translate(0)
    }
}

.category-menu-wrapper .category-tab-wrapper {
    display: -ms-flexbox;
    display: flex;
    gap: 24px
}

@media only screen and (min-width: 992px) {
    .category-menu-wrapper .category-tab-wrapper {
        max-height: calc(100vh - var(--category-menu-height) - 50px);
        overflow-y: auto
    }
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-tab-wrapper {
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 0;
        height: 100svh;
        padding-inline: var(--layout-container-gap);
        overflow-y: auto
    }
}

.category-menu-wrapper .category-menu-bg {
    max-width: min(100vh - var(--category-menu-img-size), 320px);
    transform: var(--category-menu-bg-img-rotate)
}

@media only screen and (min-width: 992px) {
    .category-menu-wrapper .category-menu-bg {
        position: absolute;
        inset-inline-end: 0;
        bottom: 0
    }
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-menu-bg {
        -ms-flex-order: 5;
        order: 5;
        -ms-flex-item-align: end;
        align-self: flex-end;
        margin-top: auto;
        margin-inline-end: calc(-1*var(--layout-container-gap))
    }
}

.category-menu-wrapper .category-menu-bg img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.category-menu-wrapper .menu-links-wrapper {
    min-width: var(--menu-links-wrapper-width)
}

.category-menu-wrapper .menu-links-wrapper .category-menu-links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px
}

.category-menu-wrapper .menu-links-wrapper .menu-link-item {
    font-weight: 400;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    letter-spacing: -0.28px
}

.category-menu-wrapper .menu-brands-wrapper {
    --grid-columns: 2;
    min-width: var(--menu-brands-wrapper-width);
    max-width: calc(120px*var(--grid-columns))
}

@media only screen and (min-width: 992px) {
    .category-menu-wrapper .menu-brands-wrapper {
        position: sticky;
        top: 0;
        max-height: calc(100vh - var(--category-menu-height) + 28px - min(100vh - var(--category-menu-img-size), 320px));
        overflow-y: auto
    }

    .category-menu-wrapper .menu-brands-wrapper:has(.category-brands-lists>:nth-child(9)) {
        --grid-columns: 3
    }

    .category-menu-wrapper .menu-brands-wrapper:has(.category-brands-lists>:nth-child(16)) {
        --grid-columns: 4
    }
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .menu-brands-wrapper {
        --grid-columns: 3;
        margin-block: 32px
    }
}

@media only screen and (max-width: 767px) {
    .category-menu-wrapper .menu-brands-wrapper {
        --grid-columns: 2
    }
}

.category-menu-wrapper .category-brands-lists {
    --grid-gap: 0px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    border: 0 solid rgba(0, 0, 0, .1);
    border-width: 1px 0 0 1px
}

@media only screen and (max-width: 991px) {
    .category-menu-wrapper .category-brands-lists {
        margin-top: 24px
    }
}

.category-menu-wrapper .category-brands-lists .list-item {
    min-height: 56px;
    padding: 12px;
    border: 0 solid rgba(0, 0, 0, .1);
    border-width: 0 1px 1px 0
}

.category-menu-wrapper .category-brands-lists .list-item img {
    max-width: 80%;
    max-height: 20px
}

.responsive-top-header {
    --responsive-top-back-icon-rotate: none;
    position: sticky;
    top: 0;
    background-color: var(--color-white);
    padding-inline: var(--layout-container-gap);
    padding-block: var(--layout-container-gap);
    margin-bottom: var(--layout-container-gap);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    z-index: 5
}

.responsive-top-header-with-bd-top {
    border-bottom: 1px solid var(--color-border-primary)
}

@media only screen and (min-width: 992px) {
    .responsive-top-header {
        display: none
    }
}

.responsive-top-header .back-icon {
    transform: var(--responsive-top-back-icon-rotate)
}

@media only screen and (max-width: 991px) {
    .menu-lists-slider .swiper-wrapper {
        -ms-flex-direction: column;
        flex-direction: column;
        gap: var(--header-main-menu-gap)
    }
}

.navigation-bottom-bar {
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--header-z-index);
    height: var(--navigation-bottom-bar-height);
    background-color: var(--color-white);
    border-top: 1px solid var(--color-border-primary)
}

@media only screen and (max-width: 767px) {
    .navigation-bottom-bar {
        display: block
    }
}

.navigation-bottom-bar .navigation-links {
    --grid-columns: 5;
    --grid-gap: 4px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap)
}

.navigation-bottom-bar .navigation-links .link-item {
    gap: 8px;
    padding-block: 16px
}

.navigation-bottom-bar .navigation-links .link-text {
    font-weight: 500;
    font-size: 12px
}

@media only screen and (max-width: 991px) {
    .navigation-bottom-bar .item-added-to-cart {
        top: 6px
    }
}

.hamburger-btn {
    --header-font-color: var(--color-text-primary);
    --hamburger-btn-size: 36px;
    display: none;
    padding: 0
}

@media only screen and (max-width: 991px) {
    .hamburger-btn {
        display: block;
        margin-inline-end: 20px
    }
}

@media only screen and (max-width: 767px) {
    .hamburger-btn {
        display: none
    }
}

.hamburger-btn svg {
    min-width: var(--hamburger-btn-size);
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1)
}

.hamburger-btn svg .line {
    fill: none;
    stroke: var(--header-font-color);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1)
}

.hamburger-btn svg .line-top-bottom {
    stroke-dasharray: 12 63
}

.hamburger-btn.menu-is-active svg {
    transform: rotate(-45deg)
}

.hamburger-btn.menu-is-active svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42
}

[lang=ar] .contact-info-lists .footer-link-item {
    font-family: var(--font-family-en)
}

@media only screen and (max-width: 767px) {
    body:has(.navigation-bottom-bar) .footer {
        padding-bottom: calc(var(--navigation-bottom-bar-height) + 25px)
    }
}

.footer {
    --header-logo-size: 185px;
    background: url("../images/footer-bg.png") center center/cover no-repeat;
    padding-block: 48px 32px
}

@media only screen and (max-width: 767px) {
    .footer {
        --header-logo-size: 115px;
        background-image: none
    }
}

.footer .footer-content {
    gap: 34px
}

@media only screen and (max-width: 767px) {
    .footer .footer-content {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start
    }
}

.footer .footer-column-middle {
    gap: 34px
}

@media only screen and (max-width: 991px) {
    .footer .footer-column-middle {
        gap: 20px
    }
}

.footer .footer-app-downloads {
    max-width: 290px;
    margin-top: 32px
}

.footer .footer-app-downloads img {
    transition: all .4s;
    will-change: transform
}

.footer .footer-app-downloads img:hover {
    transform: scale(1.03)
}

.footer .footer-tagline {
    max-width: 355px;
    font-size: 15px;
    line-height: 1.4;
    margin-top: 12px
}

.footer .supported-payments-lists {
    margin-top: 32px
}

@media only screen and (max-width: 991px) {
    .footer .footer-column-left {
        min-width: 100%
    }
}

@media only screen and (min-width: 992px) {
    .footer .footer-column-left {
        max-width: min(30%, 354px)
    }
}

@media only screen and (max-width: 767px) {
    .footer .footer-column-middle {
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 48px;
        margin-block: 40px
    }
}

.footer .footer-column-right {
    min-width: 200px
}

@media only screen and (min-width: 768px) {
    .footer .footer-column-right {
        max-width: min(24%, 216px)
    }
}

@media only screen and (min-width: 992px) {
    .footer .footer-links-wrapper {
        max-width: 169px
    }
}

.footer .footer-links {
    gap: 24px;
    margin-top: 24px
}

.footer .footer-link-item {
    display: block;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.3px;
    color: var(--color-text-secondary)
}

.footer .social-links svg * {
    transition: all .4s
}

.footer .social-links .link-item:hover svg * {
    stroke: var(--color-primary)
}

.footer .footer-copyright,
.footer .footer-link-title,
.footer .crn-text,
.footer .find-store-link {
    font-size: 15px
}

.footer .footer-link-title {
    margin-bottom: 16px
}

.footer .find-store-link {
    text-decoration: underline;
    transition: all .4s
}

.footer .find-store-link:hover {
    color: var(--color-primary);
    text-decoration: none
}

.footer .footer-contact-info-area,
.footer .social-info-area {
    margin-top: 40px
}

.footer .footer-bottom {
    padding-top: 24px;
    border-top: 1px solid var(--color-border-primary);
    margin-top: 24px
}

@media only screen and (max-width: 991px) {
    .footer .footer-bottom {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
        gap: 12px
    }
}

@media only screen and (max-width: 991px) {
    .footer .footer-bottom-bar-links {
        margin-top: 12px
    }
}

.footer .footer-bottom-bar-links>*:not(:last-child) {
    padding-block: 2px;
    padding-inline-end: 12px;
    margin-inline-end: 12px;
    border-inline-end: 1px solid #8b9194
}

[lang=ar] .breadcrumb-item {
    --breadcrumb-icon-rotation: var(--rtl-flip)
}

.breadcrumb-box {
    --breadcrumb-box-space: 18px;
    --breadcrumb-item-gap: 12px;
    --breadcrumb-font-size: 16px;
    --breadcrumb-color-font: var(--color-text-primary);
    --breadcrumb-active-color-font: var(--color-text-secondary);
    --breadcrumb-hover-color-font: var(--color-primary);
    --breadcrumb-icon-rotation: none;
    padding-block: var(--breadcrumb-box-space);
    margin-top: calc(var(--breadcrumb-box-space)/2)
}

@media only screen and (max-width: 767px) {
    .breadcrumb-box {
        --breadcrumb-box-space: 16px;
        --breadcrumb-font-size: 13px
    }
}

.breadcrumb-box .breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 8px 0
}

@media only screen and (max-width: 991px) {
    .breadcrumb-box .breadcrumb {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow-x: auto;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: var(--layout-container-gap);
        padding-inline: var(--layout-container-gap);
        margin-inline: calc(var(--layout-container-gap)*-1)
    }

    .breadcrumb-box .breadcrumb>* {
        scroll-snap-align: start
    }

    .breadcrumb-box .breadcrumb {
        scrollbar-width: none
    }
}

.breadcrumb-box .breadcrumb-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    font-weight: 600;
    font-size: var(--breadcrumb-font-size);
    color: var(--breadcrumb-color-font);
    line-height: 1.2;
    letter-spacing: -0.36px
}

.breadcrumb-box .breadcrumb-item:is(a) {
    font-weight: 400;
    color: var(--breadcrumb-active-color-font);
    transition: all .4s
}

.breadcrumb-box .breadcrumb-item:is(a):hover {
    color: var(--breadcrumb-hover-color-font)
}

.breadcrumb-box .breadcrumb-item:is(a)::after {
    display: block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='12' viewBox='0 0 8 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 11L6.5 6L1.5 1' stroke='%2317232A' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    width: 8px;
    height: 12px;
    margin-inline: var(--breadcrumb-item-gap);
    margin-top: 1px;
    transform: var(--breadcrumb-icon-rotation)
}

@media only screen and (max-width: 767px) {
    .breadcrumb-box .breadcrumb-item:is(a)::after {
        margin-top: -1px
    }
}

.product-image-slider-wrapper {
    --product-image-slider-wrapper-gap: 32px;
    --product-main-image-slider-height: 440px;
    --product-image-slider-height: 530px;
    --product-image-slider-padding: 50px 40px;
    --product-thumb-slider-width: 88px;
    --swiper-slider-color-border: var(--color-border-primary);
    --swiper-slider-border-radius: 6px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    gap: var(--product-image-slider-wrapper-gap)
}

@media only screen and (max-width: 1280px) {
    .product-image-slider-wrapper {
        --product-image-slider-wrapper-gap: 20px;
        --product-image-slider-padding: 30px 20px
    }
}

@media only screen and (max-width: 991px) {
    .product-image-slider-wrapper {
        --product-image-slider-wrapper-gap: 32px;
        --product-image-slider-height: 350px
    }
}

@media only screen and (max-width: 767px) {
    .product-image-slider-wrapper {
        --product-main-image-slider-height: 340px;
        --product-image-slider-wrapper-gap: 24px;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.product-image-slider-wrapper .swiper-slide {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.product-image-slider-wrapper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.product-image-slider {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 100%
}

.product-image-slider .swiper-wrapper {
    height: auto
}

.product-image-slider .swiper-slide img {
    max-height: var(--product-main-image-slider-height);
    -o-object-fit: contain;
    object-fit: contain
}

.main-slider-wrapper {
    position: relative;
    min-width: 0;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
    background: var(--color-white);
    padding: var(--product-image-slider-padding);
    border: 1px solid var(--swiper-slider-color-border);
    border-radius: var(--swiper-slider-border-radius)
}

@media only screen and (min-width: 768px) {
    .thumbs-slider-wrapper {
        min-width: var(--product-thumb-slider-width);
        max-width: var(--product-thumb-slider-width)
    }
}

@media only screen and (min-width: 768px) {
    .product-image-thumbs-slider {
        height: var(--product-image-slider-height)
    }
}

.product-image-thumbs-slider .swiper-slide {
    height: 100%;
    background: var(--color-white);
    padding: 6px;
    border: 1px solid var(--swiper-slider-color-border);
    border-radius: var(--swiper-slider-border-radius);
    transition: all .4s;
    cursor: pointer
}

@media only screen and (max-width: 767px) {
    .product-image-thumbs-slider .swiper-slide {
        height: auto
    }
}

.product-image-thumbs-slider .swiper-slide>* {
    height: 100%
}

.product-image-thumbs-slider .swiper-slide-thumb-active {
    --swiper-slider-color-border: var(--color-primary)
}

[lang=ar] .notifyjs-corner {
    right: unset !important;
    left: 0px
}

.notifyjs-corner {
    --toaster-width: 420px;
    --toaster-color-bg: var(--color-dark);
    --toaster-color-title: #E6E6E6;
    --toaster-color-sub-title: var(--color-white);
    --toaster-padding: 12px;
    --toaster-border-radius: 6px;
    --toaster-img-size: 64px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: end;
    align-items: flex-end
}

.notifyjs-custom-base {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 12px;
    max-width: var(--toaster-width);
    background-color: var(--toaster-color-bg);
    padding: var(--toaster-padding);
    border-radius: var(--toaster-border-radius)
}

@media only screen and (max-width: 767px) {
    .notifyjs-custom-base {
        gap: 8px
    }
}

.notifyjs-custom-base .image {
    background-color: #f8f8f8;
    min-width: var(--toaster-img-size);
    max-width: var(--toaster-img-size);
    aspect-ratio: 1;
    border: 1px solid #eaeaec;
    border-radius: 2px;
    margin-inline-end: 4px;
    box-sizing: border-box
}

.notifyjs-custom-base .image img {
    -o-object-fit: cover;
    object-fit: cover
}

.notifyjs-custom-base .title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--toaster-color-title);
    letter-spacing: -0.28px;
    margin-top: 16px
}

@media only screen and (max-width: 767px) {
    .notifyjs-custom-base .title {
        font-size: 12px;
        margin-top: 8px
    }
}

.notifyjs-custom-base .sub-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    color: var(--toaster-color-sub-title);
    letter-spacing: -0.32px
}

@media only screen and (max-width: 767px) {
    .notifyjs-custom-base .sub-title {
        font-size: 14px
    }
}

.notifyjs-custom-base .btn-view-more {
    --btn-font-color: var(--color-white);
    --btn-hover-font-color: var(--color-white)
}

.notifyjs-custom-base .cancel-notify {
    width: 16px;
    aspect-ratio: 1;
    padding: 0;
    border: 0
}

.pill {
    --pill-color-bg: #DADCFF;
    --pill-color-font: var(--color-primary);
    --pill-font-wight: 600;
    --pill-font-size: 14px;
    --pill-padding: 12px;
    --pill-color-border: var(--pill-color-bg);
    --pill-border-radius: 6px;
    --pill-gap: 8px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    gap: var(--pill-gap);
    background-color: var(--pill-color-bg);
    font-size: var(--pill-font-size);
    font-weight: var(--pill-font-wight);
    line-height: 1;
    color: var(--pill-color-font);
    letter-spacing: -0.28px;
    padding: var(--pill-padding);
    border: 1px solid var(--pill-color-border);
    border-radius: var(--pill-border-radius)
}

.pill-sm {
    --pill-font-wight: 500;
    --pill-padding: 8px
}

@media only screen and (max-width: 767px) {
    .pill {
        --pill-font-size: 11px;
        --pill-padding: 6px
    }
}

.pill .pill-close-btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .pill .pill-close-btn {
        margin-top: -2px
    }
}

.pill .pill-close-btn * {
    pointer-events: none
}

.pill .pill-close-btn:hover {
    opacity: .7
}

.pill-light {
    --pill-color-bg: #F5F6FF;
    --pill-color-border: #F5F6FF
}

.pill-success {
    --pill-color-bg: rgba(40, 141, 20, 0.08);
    --pill-color-font: #288D14
}

.pill-primary-light {
    --pill-color-bg: #DEF
}

.pill-neutral {
    --pill-color-bg: #fff
}

.pill-error {
    --pill-color-bg: #fee2e2;
    --pill-color-font: #dc2626
}

.pill.pill-offer {
    --pill-color-bg: var(--color-accent);
    --pill-color-font: var(--color-text-primary);
    --pill-color-border: var(--color-accent);
    --pill-padding: 7px 6px;
    --pill-border-radius: 6px;
    --pill-font-wight: 600;
    --pill-font-size: 13px
}

@media only screen and (max-width: 767px) {
    .pill.pill-offer {
        --pill-padding: 8px 6px 5px 6px
    }
}

.info-list {
    --event-info-color-bg: #D9D9D9;
    --event-info-list-gap: 6px;
    --info-list-border-display: block;
    display: -ms-flexbox;
    display: flex
}

.info-list>* {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center
}

.info-list>*:not(:last-child)::after {
    content: "";
    display: var(--info-list-border-display);
    width: 1px;
    height: 85%;
    background-color: var(--event-info-color-bg);
    margin-inline: var(--event-info-list-gap);
    pointer-events: none
}

.info-list .info-text {
    font-weight: 500;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.1;
    letter-spacing: -0.28px
}

@media only screen and (max-width: 767px) {
    .info-list .info-text {
        font-size: 13px
    }
}

.adv-star-rating {
    --rating-icon-width: 13px;
    --rating-icon-gap: 0.5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: var(--rating-icon-gap)
}

.adv-star-rating .star {
    width: var(--rating-icon-width);
    aspect-ratio: 1;
    background: url("../images/icon/star.svg") no-repeat center center/contain
}

.adv-star-rating .star.half {
    background: url("../images/icon/star-half.svg") no-repeat center center/contain
}

.adv-star-rating .star.full {
    background: url("../images/icon/star-full.svg") no-repeat center center/contain
}

[lang=ar] .product-price,
[lang=ar] .product-price * {
    font-family: var(--font-family-en)
}

.product-card {
    --product-card-height: 150px;
    --product-card-height-max: 220px;
    --product-card-color-bg: var(--color-bg-light);
    --product-card-padding: 16px;
    --product-card-color-border: #E6E6E6;
    --product-card-radius: 6px;
    --product-card-img-bg: var(--color-white);
    --product-card-hover-img-bg: rgba(0, 0, 0, 0.02);
    position: relative;
    background-color: var(--product-card-color-bg);
    padding: var(--product-card-padding);
    border: 1px solid var(--product-card-color-border);
    border-radius: var(--product-card-radius);
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .product-card {
        --product-card-padding: 8px
    }
}

.product-card .product-card-img {
    position: relative;
    background: var(--product-card-img-bg);
    max-height: var(--product-card-height-max);
    border-radius: var(--product-card-radius);
    overflow: hidden
}

.product-card .product-card-img img {
    width: 100%;
    max-height: min(var(--product-card-height-max), 100%);
    -o-object-fit: contain;
    object-fit: contain;
    transition: transform .5s, filter 1.5s ease-in-out
}

.product-card .favourite-icon,
.product-card .product-card-offer,
.product-card .product-checkbox {
    position: absolute;
    top: 12px
}

.product-card .product-card-offer {
    inset-inline-start: 12px
}

@media only screen and (max-width: 767px) {
    .product-card .product-card-offer {
        font-size: 11px
    }
}

.product-card .favourite-icon {
    --favourite-icon-size: 22px;
    width: var(--favourite-icon-size);
    inset-inline-end: 12px;
    cursor: pointer
}

@media only screen and (max-width: 767px) {
    .product-card .favourite-icon {
        --favourite-icon-size: 18px
    }
}

.product-card .favourite-icon svg * {
    transition: all .4s
}

.product-card .favourite-icon.added-to-whish-list svg * {
    fill: var(--color-primary)
}

.product-card .product-checkbox {
    inset-inline-end: 12px
}

.product-card .info-list {
    --event-info-list-gap: 12px
}

@media only screen and (max-width: 767px) {
    .product-card .info-list {
        --info-list-border-display: none;
        -ms-flex-direction: column;
        flex-direction: column
    }
}

.product-card .product-card-title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-text-primary);
    letter-spacing: -0.32px;
    max-width: 100%;
    min-width: 0;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all .4s
}

@media only screen and (max-width: 767px) {
    .product-card .product-card-title {
        font-size: 14px
    }
}

.product-card .product-sub-title {
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-secondary);
    letter-spacing: -0.28px
}

@media only screen and (max-width: 767px) {
    .product-card .product-sub-title {
        font-size: 13px
    }
}

.product-card .product-price {
    font-weight: 600;
    font-size: 18px;
    line-height: 1.15;
    color: var(--color-text-primary);
    letter-spacing: -0.36px
}

@media only screen and (max-width: 767px) {
    .product-card .product-price {
        font-size: 16px
    }
}

.product-card .product-review-count,
.product-card .product-review {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-primary);
    letter-spacing: -0.28px
}

.product-card .product-review {
    font-weight: 400;
    color: var(--color-text-secondary)
}

@media only screen and (max-width: 767px) {
    .product-card .product-review {
        font-size: 13px
    }
}

.product-card .product-add-cart-btn {
    display: block
}

.product-card .product-caption {
    display: none;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: end;
    align-items: flex-end;
    gap: 16px;
    min-width: 0;
    -ms-flex: 1;
    flex: 1;
    max-width: min(220px, 25%);
    margin-inline-start: auto
}

@media only screen and (max-width: 991px) {
    .product-card .product-caption {
        min-width: 100%
    }
}

@media only screen and (max-width: 767px) {
    .product-card .product-caption {
        padding-inline-start: calc(45% + 16px);
        -ms-flex-align: start;
        align-items: flex-start
    }
}

@media only screen and (max-width: 767px) {
    .product-card .product-caption .product-brand-image {
        max-width: 100px
    }
}

.product-card .product-caption .product-code {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    line-height: 1.4;
    letter-spacing: -0.28px;
    text-align: end
}

@media only screen and (max-width: 767px) {
    .product-card .product-caption .product-code {
        font-size: 12px
    }
}

.product-card:hover {
    --product-card-color-border: #CACACA
}

.product-card:hover .product-card-title {
    color: var(--color-primary)
}

.product-card:hover .product-card-img img {
    transform: scale(1.1)
}

.product-card:hover .product-card-btn {
    opacity: 1;
    visibility: visible
}

[lang=ar] .nav-tabs-vertical {
    --nav-tab-header-link-border-radius: 12px 0 0 12px
}

.nav-tabs-header {
    max-width: 100%
}

.nav-tabs {
    --nav-tab-header-items-gap: 12px;
    --nav-item-icon-size: 20px;
    --nav-tab-header-padding: 12px;
    --nav-tab-header-border-radius: 6px;
    --nav-tab-header-bg-color: var(--color-white);
    --nav-tab-header-border-color: #C3C4E0;
    --nav-tab-header-font-size: 14px;
    --nav-tab-header-font-color: var(--color-text-secondary);
    --nav-tab-header-active-font-color: var(--color-primary);
    --nav-tab-header-active-bg-color: #E8E9FC;
    --nav-tab-header-active-border-color: #E8E9FC;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    gap: var(--nav-tab-header-items-gap);
    white-space: nowrap;
    overflow-x: auto;
    -ms-scroll-snap-type: x mandatory;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding: var(--layout-container-gap)
}

.nav-tabs>* {
    scroll-snap-align: start
}

@media only screen and (max-width: 767px) {
    .nav-tabs {
        --nav-tab-header-font-size: 13px;
        --nav-tab-header-padding: 12px 12px 10px 12px
    }

    .nav-tabs:not(.nav-tabs-vertical) {
        padding-inline: var(--layout-container-gap);
        margin-inline: calc(var(--layout-container-gap)*-1)
    }

    .nav-tabs:not(.nav-tabs-vertical) {
        scrollbar-width: none
    }
}

.nav-tabs .nav-link {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    gap: 12px;
    background-color: var(--nav-tab-header-bg-color);
    font-weight: 500;
    font-size: var(--nav-tab-header-font-size);
    color: var(--nav-tab-header-font-color);
    line-height: 1.2;
    letter-spacing: -0.28px;
    padding: var(--nav-tab-header-padding);
    border-radius: var(--nav-tab-header-border-radius);
    border: 1px solid var(--nav-tab-header-border-color);
    outline: none;
    transition: all .4s
}

.nav-tabs .nav-link.is-active {
    background-color: var(--nav-tab-header-active-bg-color);
    color: var(--nav-tab-header-active-font-color);
    border-color: var(--nav-tab-header-active-border-color)
}

.nav-tabs .nav-link:hover {
    color: var(--nav-tab-header-active-font-color)
}

.nav-tabs .nav-link .nav-item-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    min-width: var(--nav-item-icon-size)
}

.nav-tabs-vertical {
    --nav-tab-header-items-gap: 0;
    --nav-tab-header-padding: 12px 24px;
    --nav-tab-header-link-border-radius: 0 12px 12px 0;
    --nav-tab-header-border-radius: 0;
    --nav-tab-header-border-color: transparent;
    --nav-tab-header-font-color: var(--color-text-primary);
    --nav-tab-header-active-bg-color: var(--color-bg-light);
    --nav-tab-header-active-border-color: transparent;
    -ms-flex-direction: column;
    flex-direction: column
}

.nav-tabs-vertical .nav-link::before {
    content: "";
    position: absolute;
    inset: 0 auto;
    inset-inline-start: -1px;
    width: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: var(--nav-tab-header-link-border-radius);
    pointer-events: none;
    transition: all .4s
}

.nav-tabs-vertical .nav-link.is-active::before {
    background-color: currentColor
}

.tab-pane {
    display: none;
    opacity: 0;
    transition: opacity .3s
}

.tab-pane.is-active {
    display: block
}

.tab-pane.fade-in {
    opacity: 1
}

.swiper-pagination {
    --swiper-pagination-bottom: 25px;
    --swiper-pagination-bullet-width: 8px;
    --swiper-pagination-bullet-height: 8px;
    --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.60);
    --swiper-pagination-color: #fff;
    --swiper-pagination-active-outline-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 14px
}

@media only screen and (max-width: 767px) {
    .swiper-pagination {
        --swiper-pagination-bottom: 18px
    }
}

.swiper-pagination-bullet {
    transition: all .4s;
    outline: 2px solid rgba(0, 0, 0, 0)
}

.swiper-pagination-bullet:hover {
    background: var(--swiper-pagination-color)
}

.swiper-pagination-bullet-active {
    outline-offset: 4px;
    outline-color: var(--swiper-pagination-active-outline-color)
}

.slider-navigation {
    --swiper-navigation-size: 40px;
    --swiper-navigation-sides-offset: 0;
    --swiper-navigation-top-offset: calc(50% - 35px)
}

@media only screen and (max-width: 991px) {
    .slider-navigation {
        display: none
    }
}

.slider-navigation .swiper-button-next,
.slider-navigation .swiper-button-prev {
    width: var(--swiper-navigation-size);
    transition: all .4s
}

@media only screen and (max-width: 1919px) {
    .full-width-slider .swiper-button-prev {
        margin-inline-start: max(var(--layout-container-gap), (100% - var(--layout-container-width))/2)
    }
}

.full-width-slider .swiper-button-next {
    margin-inline-end: max(var(--layout-container-gap), (100% - var(--layout-container-width))/2)
}

.page-item::before,
.page-item::after {
    display: none
}

.page-item .btn {
    --btn-padding: 0;
    --btn-border-radius: 50%;
    min-width: 40px;
    aspect-ratio: 1
}

.page-item svg {
    width: auto;
    height: auto
}

.main-products-slider {
    margin-top: 32px
}

@media only screen and (max-width: 991px) {
    .main-products-slider {
        padding-inline: var(--layout-container-gap);
        margin-inline: calc(var(--layout-container-gap)*-1);
        margin-top: 24px
    }

    .main-products-slider {
        scrollbar-width: none
    }
}

.main-products-slider .swiper-slide {
    height: auto
}

.main-products-slider .swiper-slide>* {
    height: 100%
}

.accordion-item {
    --accordion-toggle-icon-size: 16px;
    --accordion-toggle-bg-color: transparent;
    --accordion-toggle-icon-color: #6B6A6B;
    --accordion-toggle-bg-active-color: var(--color-primary);
    --accordion-toggle-icon-active-color: var(--color-white);
    --accordion-body-space: 12px
}

.accordion-item.is-active .accordion-toggle-icon {
    --accordion-toggle-icon-color: var(--accordion-toggle-icon-active-color);
    transform: rotate(0deg)
}

.accordion-item .accordion-header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px;
    cursor: pointer
}

.accordion-item .accordion-header:hover .accordion-title {
    color: var(--color-primary)
}

.accordion-item .accordion-toggle-icon {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: var(--accordion-toggle-bg-color);
    min-width: var(--accordion-toggle-icon-size);
    aspect-ratio: 1;
    transform: rotate(180deg);
    transition: all .45s cubic-bezier(0.68, -0.55, 0.27, 1.55)
}

.accordion-item .accordion-toggle-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 5L5 1L1 5' stroke='%2317232A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center
}

.accordion-item .accordion-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.4;
    letter-spacing: -0.32px;
    transition: color .4s
}

@media only screen and (max-width: 767px) {
    .accordion-item .accordion-title {
        font-size: 20px
    }
}

.accordion-item .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s
}

.accordion-item .accordion-body>*:first-child {
    margin-top: var(--accordion-body-space)
}

.image-banner-row {
    --grid-columns: 3;
    --grid-gap: 20px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap)
}

@media only screen and (max-width: 767px) {
    .image-banner-row {
        --grid-columns: 1;
        --grid-gap: 16px
    }
}

.image-banner-row .banner-item {
    border-radius: 6px;
    overflow: hidden;
    transition: all .4s
}

.image-banner-row .banner-item:hover {
    transform: translateY(-5px);
    box-shadow: rgba(50, 50, 93, .25) 0px 13px 27px -5px, rgba(0, 0, 0, .3) 0px 8px 16px -8px
}

.image-banner-row .banner-item img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: inherit
}

.image-banner-row .image-banner-column {
    gap: var(--grid-gap)
}

.image-banner-row .image-banner-column .banner-item {
    min-width: 0;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.total-review-rating {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

@media only screen and (max-width: 767px) {
    .total-review-rating {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: normal;
        align-items: normal
    }
}

.total-review-rating .column-left {
    margin-inline-end: 48px
}

@media only screen and (max-width: 767px) {
    .total-review-rating .column-left {
        display: -ms-flexbox;
        display: flex;
        gap: 24px;
        margin: 0 0 24px 0
    }
}

@media only screen and (max-width: 767px) {
    .total-review-rating .column-right {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }
}

.total-review-rating .total-adv-star-rating {
    --rating-icon-width: 20px;
    --rating-icon-gap: 3px;
    margin-bottom: 24px
}

@media only screen and (max-width: 767px) {
    .total-review-rating .total-adv-star-rating {
        --rating-icon-width: 18px;
        margin-bottom: 0
    }
}

.total-review-rating .reviews-graph {
    position: relative;
    background: #e6e6e6;
    height: 6px;
    border-radius: 40px
}

@media only screen and (max-width: 767px) {
    .total-review-rating .reviews-graph {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 70px;
        height: 5px;
        margin: 0 15px 0 5px
    }
}

.total-review-rating .reviews-graph .graph-value {
    display: block;
    position: absolute;
    border-radius: 40px;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    pointer-events: none
}

.total-review-rating .reviews-graph .graph-value.graph-value-good {
    background: var(--color-primary)
}

.total-review-rating .reviews-graph .graph-value.graph-value-medium {
    background: #f37721
}

.social-share-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 6px
}

.social-share-wrapper .social-share-text {
    color: #666
}

.social-share {
    --share-background-color: transparent;
    --share-border-color: #E5DAF5;
    --share-icon-size: 32px;
    --share-circle-radius: 50%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    gap: 16px
}

.social-share .share-item {
    --btn-bg-color: var(--share-background-color);
    --btn-padding: 0;
    --btn-border-radius: var(--share-circle-radius);
    --icon-hover-color: var(--color-primary);
    --btn-hover-font-color: var(--icon-hover-color);
    border: 0
}

.social-share .share-item:hover:hover svg * {
    stroke: var(--icon-hover-color)
}

.upload-files-parent {
    --upload-field-height: 118px
}

.upload-files-parent .upload-field {
    position: relative;
    background: #f8fcff;
    height: var(--upload-field-height);
    border: 2px dashed #c3c4e0;
    border-radius: 12px;
    cursor: pointer;
    transition: all .4s
}

.upload-files-parent .upload-field:hover,
.upload-files-parent .upload-field.dropzone-focus {
    border-color: var(--color-primary)
}

.upload-files-parent .upload-field:hover .upload-field-text,
.upload-files-parent .upload-field.dropzone-focus .upload-field-text {
    color: var(--color-primary)
}

.upload-files-parent .upload-field>* {
    pointer-events: none
}

.upload-files-parent .upload-icon {
    background-color: var(--color-white);
    min-width: 40px;
    aspect-ratio: 1;
    border: 1px solid var(--color-border-primary);
    border-radius: 50%
}

.upload-files-parent.active .uploaded-items {
    display: block
}

.upload-files-parent.upload-error .upload-info {
    color: #f15642
}

.upload-files-parent.upload-error .error-msg {
    display: block
}

.upload-files-parent .upload-field-text {
    font-weight: normal;
    font-size: 13px;
    line-height: 13px;
    color: #5e6374;
    transition: all .4s
}

.file-uploader-preview-list {
    --grid-columns: 2;
    --grid-gap: 12px;
    --preview-list-gap: 16px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
    margin-top: var(--preview-list-gap)
}

@media only screen and (max-width: 767px) {
    .file-uploader-preview-list {
        --grid-columns: 1
    }
}

.file-uploader-preview-list .file-uploader-preview-item,
.file-uploader-preview-list .preview-file-img {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border-primary)
}

.file-uploader-preview-list .preview-file-img {
    border-radius: 4px;
    min-width: 64px;
    max-width: 64px;
    aspect-ratio: 1;
    padding: 0;
    overflow: hidden
}

.file-uploader-preview-list .preview-file-img img {
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 100%
}

.file-uploader-preview-list .remove-file-btn {
    --btn-padding: 6px
}

.quantity-controls {
    --quantity-controls-width: 145px;
    --input-font-size: 16px;
    --input-padding-y: 0;
    --input-padding-x: 0;
    --input-border-radius: 0;
    --input-border-color: transparent;
    --counter-btn-padding: 16px;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, .1);
    max-width: var(--quantity-controls-width)
}

.quantity-controls-disabled {
    opacity: .5;
    pointer-events: none
}

.quantity-controls .counter-btn {
    --btn-font-color: var(--color-text-primary);
    --btn-padding: var(--counter-btn-padding);
    --btn-hover-font-color: var(--color-text-primary)
}

.quantity-controls .counter-btn:active {
    background-color: var(--color-border-primary)
}

.quantity-controls .item-count-input {
    text-align: center
}

.week-offer-sec {
    --sec-cmn-space: 48px;
    background-color: var(--color-bg-light);
    background: url("../images/icon/week-offer-bg-2.svg") left top/cover no-repeat, var(--color-bg-light);
    margin-block: calc(var(--sec-cmn-space)/2)
}

@media only screen and (max-width: 767px) {
    .week-offer-sec {
        --sec-cmn-space: 16px;
        background: var(--color-white);
        margin: 0
    }
}

.week-offer-sec .sec-content>* {
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

@media only screen and (max-width: 767px) {
    .week-offer-sec .sec-content {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: normal;
        align-items: normal;
        gap: 24px
    }
}

.week-offer-sec .week-offer-banner {
    border-radius: 6px;
    overflow: hidden;
    transition: all .4s
}

.week-offer-sec .week-offer-banner:hover {
    transform: translateY(-5px);
    box-shadow: rgba(50, 50, 93, .25) 0px 13px 27px -5px, rgba(0, 0, 0, .3) 0px 8px 16px -8px
}

@media only screen and (max-width: 991px) {
    .week-offer-sec .week-offer-banner {
        min-width: 60%
    }
}

.week-offer-sec .week-offer-banner img {
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: left center;
    object-position: left center
}

@media only screen and (max-width: 767px) {
    .week-offer-slider {
        padding-inline: var(--layout-container-gap);
        margin-inline: calc(var(--layout-container-gap)*-1)
    }

    .week-offer-slider {
        scrollbar-width: none
    }
}

.week-offer-slider .swiper-slide {
    height: auto
}

.week-offer-slider .swiper-slide>* {
    height: 100%
}

[lang=ar] .product-price-subscription,
[lang=ar] .product-price-old,
[lang=ar] .product-price-text,
[lang=ar] .product-price-text * {
    font-family: var(--font-family-en)
}

[lang=ar] .delivery-option-arrow-icon,
[lang=ar] .review-info-footer-text .info-icon {
    transform: var(--rtl-flip)
}

[lang=ar] .emi-info-wrapper,
[lang=ar] .fitment-message {
    --icon-rotation: var(--rtl-flip)
}

.adv-star-rating {
    --rating-icon-width: 16px;
    --rating-icon-gap: 2px
}

.product-details-sec-wrapper {
    --product-details-sec-gap: 60px;
    --product-image-wrapper-width: 625px;
    display: grid;
    -ms-flex-align: start;
    align-items: flex-start;
    grid-template-columns: minmax(clamp(300px, 52%, var(--product-image-wrapper-width)), min(var(--product-image-wrapper-width), 38%)) 1fr;
    gap: var(--product-details-sec-gap)
}

@media only screen and (max-width: 1280px) {
    .product-details-sec-wrapper {
        --product-details-sec-gap: 24px
    }
}

@media only screen and (max-width: 991px) {
    .product-details-sec-wrapper {
        --product-image-wrapper-width: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: normal;
        align-items: normal
    }
}

.product-primary-action-box {
    --product-primary-action-box-padding-btm: 4px;
    position: sticky;
    bottom: 0;
    background-color: var(--color-white);
    padding-block: 12px var(--product-primary-action-box-padding-btm);
    z-index: calc(var(--header-z-index) - 2px);
    margin-bottom: calc(-1*var(--product-primary-action-box-padding-btm))
}

.delivery-info-wrapper,
.social-share-wrapper,
.product-highlights-sections {
    margin-top: 24px
}

.product-image-wrapper {
    max-width: var(--product-image-wrapper-width)
}

@media only screen and (min-width: 992px) {
    .product-image-wrapper {
        grid-column: 1;
        grid-row: 1
    }
}

.product-content-info-wrapper {
    --product-info-list-gap: 24px;
    --product-info-list-color-border: #E6E6E6;
    border-top: 1px solid var(--color-border-primary);
    padding-top: 24px
}

@media only screen and (min-width: 992px) {
    .product-content-info-wrapper {
        grid-column: 1;
        grid-row: 2
    }
}

@media only screen and (max-width: 991px) {
    .product-content-info-wrapper {
        margin-top: 18px
    }
}

.product-content-info-wrapper .product-info-wrapper:not(:last-child) {
    margin-bottom: 16px
}

.product-content-info-wrapper .product-info-accordion:not(:last-child) {
    padding-bottom: var(--product-info-list-gap);
    border-bottom: 1px solid var(--product-info-list-color-border);
    margin-bottom: var(--product-info-list-gap)
}

.product-content-info-wrapper .product-info-title {
    margin-bottom: 12px
}

.product-content-info-wrapper .accordion-title {
    font-size: 18px
}

.offer-price-box {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.offer-price-box::before {
    content: "";
    position: absolute;
    inset: auto 0;
    background: currentColor;
    height: 1px;
    margin-bottom: -1px
}

.offer-price-box .currency-symbol {
    opacity: .8
}

@media only screen and (min-width: 992px) {
    .product-details-wrapper {
        grid-column: 2;
        grid-row: 1/span 2;
        position: sticky;
        background-color: var(--color-white);
        z-index: calc(var(--header-z-index) - 2px)
    }
}

.product-details-wrapper .product-title {
    margin-inline-end: min(100px, 15%)
}

@media only screen and (max-width: 767px) {
    .product-details-wrapper .product-title {
        font-size: 16px
    }
}

.product-details-wrapper .product-sub-title {
    color: var(--color-primary)
}

@media only screen and (max-width: 767px) {
    .product-details-wrapper .product-sub-title {
        font-size: 13px
    }
}

.product-details-wrapper .info-list {
    --event-info-list-gap: 12px
}

.product-details-wrapper .box-checklists {
    --form-check-padding: 5px 12px 9px 12px;
    --form-check-border-color: var(--color-border-primary);
    --form-check-checked-border-color: #E8E9FC;
    --form-label-font-size: 13px
}

@media only screen and (max-width: 767px) {
    .product-details-wrapper .box-checklists {
        --form-check-padding: 8px 12px 6px 12px
    }
}

.product-details-wrapper .box-checklists .form-check-label {
    --form-label-color: var(--color-text-secondary)
}

.product-details-wrapper .favourite-icon {
    width: 22px;
    inset-inline-end: 12px;
    cursor: pointer
}

.product-details-wrapper .favourite-icon svg * {
    transition: all .4s
}

.product-details-wrapper .favourite-icon.added-to-whish-list svg * {
    fill: var(--color-primary)
}

.product-logo-sec {
    --product-logo-column-gap: 8px;
    gap: var(--product-logo-column-gap)
}

.product-logo-sec .product-logo {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    max-width: calc(105px + var(--product-logo-column-gap));
    max-height: 32px;
    padding-inline-start: var(--product-logo-column-gap);
    border-inline-start: 1px solid var(--color-primary)
}

.product-logo-sec .product-logo img {
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: left;
    object-position: left
}

.product-price,
.stock-status-text {
    color: var(--color-primary)
}

.product-stock-status-out .stock-status-text {
    color: var(--color-error)
}

.payment-info-wrapper {
    border-radius: 6px;
    border: 1px solid var(--color-border-primary)
}

.payment-info-wrapper .accordion-header {
    padding: 20px 16px
}

@media only screen and (max-width: 767px) {
    .payment-info-wrapper .accordion-header {
        padding: 20px 16px 18px 16px
    }
}

.payment-info-wrapper .emi-options-item {
    padding: 20px 16px;
    border-top: 1px solid var(--color-border-primary)
}

.premium-info-wrapper {
    background-color: #fdf8e5;
    padding: 24px 16px;
    border-radius: 6px;
    margin-top: 24px
}

.premium-info-wrapper .premium-accordion {
    margin-bottom: 15px
}

.premium-info-wrapper .premium-accordion .accordion-toggle-icon {
    margin-bottom: auto
}

.premium-info-wrapper .premium-info-content {
    min-width: 180px
}

.premium-info-wrapper .purchase-info-text {
    font-size: 12px;
    margin-top: 2px
}

.premium-info-wrapper .premium-purchase-info-lists {
    background-color: #f4efdc;
    padding: 12px;
    border-radius: 4px
}

.premium-info-wrapper .premium-purchase-info-lists .list-item-text {
    font-size: 12px
}

.premium-info-wrapper .premium-purchase-btn {
    font-weight: 600
}

@media only screen and (max-width: 767px) {
    .product-main-details {
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: start;
        align-items: flex-start;
        gap: 12px;
        padding-top: 4px
    }
}

.premium-price-box {
    border-radius: 6px;
    border: 1px solid var(--color-border-primary)
}

.premium-price-box .regular-price-wrapper,
.premium-price-box .premium-price-wrapper {
    padding: 24px 16px
}

.premium-price-box .premium-price-wrapper {
    background-color: #fdf8e5
}

.premium-price-box .offer-price-text {
    color: #488931
}

.product-subscription-wrapper {
    --subscription-item-color-bg: var(--color-white);
    --subscription-item-color-border: var(--color-border-primary);
    margin-top: 32px
}

.product-subscription-wrapper .subscription-model-radio {
    --checkbox-color: #D9D7D9
}

.product-subscription-wrapper .subscribe-radio-content {
    display: none
}

.product-subscription-wrapper .product-subscription-item {
    background: var(--subscription-item-color-bg);
    padding: 16px;
    border-radius: 4px;
    border: 1px solid var(--subscription-item-color-border);
    transition: all .4s
}

.product-subscription-wrapper .product-subscription-item:has(input:checked) {
    --subscription-item-color-bg: var(--color-bg-light);
    --subscription-item-color-border: var(--color-primary)
}

.product-subscription-wrapper .product-subscription-item:has(input:checked) .subscribe-radio-content {
    display: block
}

.product-subscription-wrapper .subscription-info-text {
    font-size: 12px
}

.product-subscription-wrapper .product-subscription-select .select2-container--default {
    --select-box-padding: 8px 32px 8px 8px;
    --select-color-border: rgba(0, 0, 0, 0.20)
}

.delivery-option-lists {
    --delivery-option-list-gap: 24px;
    gap: var(--delivery-option-list-gap);
    background-color: var(--color-white);
    padding: var(--delivery-option-list-gap);
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    margin-top: 12px
}

.delivery-option-lists .delivery-option-item:not(:last-child) {
    padding-bottom: var(--delivery-option-list-gap);
    border-bottom: 1px solid var(--color-border-primary)
}

.product-price-box-wrapper {
    --header-logo-size: 80px;
    --icon-rotation: none
}

.product-price-box-wrapper .logo {
    min-width: var(--header-logo-size);
    -ms-flex-negative: 0;
    flex-shrink: 0
}

.product-price-box-wrapper .emi-info-img {
    max-width: 61px
}

@media only screen and (max-width: 767px) {
    .product-price-box-wrapper .emi-info-img {
        margin-inline-end: auto
    }
}

.emi-info-wrapper .item-icon {
    transform: var(--icon-rotation)
}

.fitment-message {
    --fitment-message-icon-size: 24px;
    --fitment-message-border-radius: 6px;
    --fitment-message-color-bg: var(--color-bg-light);
    --fitment-message-color-font: var(--color-text-primary);
    --fitment-message-color-border: var(--color-border-primary);
    --icon-rotation: none;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 8px;
    background-color: var(--fitment-message-color-bg);
    border-radius: var(--fitment-message-border-radius);
    border: 1px solid var(--fitment-message-color-border);
    padding: 12px
}

.fitment-message .fitment-message-icon {
    width: var(--fitment-message-icon-size);
    aspect-ratio: 1
}

.fitment-message .item-icon {
    transform: var(--icon-rotation)
}

.product-info-lists {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 4px;
    padding-inline-start: 18px
}

.product-info-lists .list-item {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: var(--color-text-secondary);
    list-style: decimal outside none;
    padding-inline-start: 4px
}

.product-description-lists {
    gap: 24px
}

.product-info-table {
    border-collapse: collapse;
    width: 100%
}

.product-info-table tr:nth-child(odd) {
    background: var(--color-bg-light)
}

.product-info-table th,
.product-info-table td,
.product-info-table .td-text {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.3px;
    color: var(--color-text-primary);
    text-align: left
}

.product-info-table th+.td-text,
.product-info-table td+.td-text,
.product-info-table .td-text+.td-text {
    margin-top: 2px
}

.product-info-table th,
.product-info-table td {
    padding: 16px 20px;
    vertical-align: text-top
}

@media only screen and (max-width: 767px) {

    .product-info-table th,
    .product-info-table td {
        padding: 16px
    }
}

.product-highlights-sections {
    --highlights-item-gap: 16px;
    background: var(--color-bg-light);
    padding: 12px 24px;
    border: 1px solid #c3c4e0;
    border-radius: 6px
}

@media only screen and (max-width: 1280px) {
    .product-highlights-sections {
        --highlights-item-gap: 8px
    }
}

@media only screen and (max-width: 767px) {
    .product-highlights-sections {
        gap: 8px;
        padding: 12px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.product-highlights-sections .highlight-item-text {
    color: var(--color-primary)
}

.product-highlights-sections.info-list {
    --event-info-list-gap: var(--highlights-item-gap)
}

.rating-review-wrapper .rating-info-wrapper {
    background-color: var(--color-bg-light);
    padding: 24px;
    border-radius: 6px;
    margin-bottom: var(--product-info-list-gap)
}

.rating-review-wrapper .review-content-header .adv-star-rating {
    --rating-icon-width: 16px
}

.rating-review-wrapper .review-content-body {
    margin-top: 16px
}

.rating-review-wrapper .review-content-footer {
    margin-top: 16px
}

.rating-review-wrapper .review-content-list-item {
    padding-bottom: var(--product-info-list-gap);
    border-bottom: 1px solid var(--product-info-list-color-border);
    margin-bottom: var(--product-info-list-gap)
}

.rating-review-wrapper .review-info-footer {
    padding-bottom: var(--product-info-list-gap);
    border-bottom: 1px solid var(--product-info-list-color-border)
}

.bundle-products-lists {
    --product-info-list-gap: 16px;
    padding-top: var(--product-info-list-gap)
}

.bundle-products-lists .bundle-list-item:not(:last-child) {
    padding-bottom: var(--product-info-list-gap);
    border-bottom: 1px solid var(--product-info-list-color-border);
    margin-bottom: var(--product-info-list-gap)
}

.bundle-products-lists .item-img {
    --item-img-width: 88px;
    min-width: var(--item-img-width);
    max-width: var(--item-img-width)
}

@media only screen and (max-width: 767px) {
    .bundle-products-lists .item-img {
        --item-img-width: 70px
    }
}

.bundle-products-lists .item-img img {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.bundle-products-lists .item-info-top {
    min-width: 140px
}

@media only screen and (max-width: 767px) {
    .bundle-products-lists .item-info-top {
        min-width: 100%
    }
}

.bundle-product-sec {
    --sec-cmn-space: 48px;
    background-color: var(--color-bg-light);
    background: url("../images/icon/week-offer-bg-2.svg") left top/cover no-repeat, var(--color-bg-light);
    margin-block: calc(var(--sec-cmn-space)/2)
}

@media only screen and (max-width: 767px) {
    .bundle-product-sec {
        --sec-cmn-space: 32px;
        background: var(--color-white)
    }

    .bundle-product-sec .sec-cmn-title {
        text-align: left
    }
}

.bundle-product-sec .selected-product-info {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    row-gap: 12px;
    margin-top: 30px
}

@media only screen and (max-width: 767px) {
    .bundle-product-sec .selected-product-info .info-title {
        min-width: 100%
    }

    .bundle-product-sec .selected-product-info .product-price-box {
        margin-inline-end: auto
    }
}

.bundle-product-sec .currency-symbol {
    display: -ms-flexbox;
    display: flex;
    width: 15px
}

.bundle-product-sec .currency-symbol img {
    width: 100%
}

.selected-product-lists {
    --product-card-min-width: min(60vw, 280px);
    --bundle-list-icon-size: 16px;
    --grid-columns: 3;
    --grid-gap: 64px;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: calc(var(--grid-gap) + var(--bundle-list-icon-size))
}

@media only screen and (max-width: 991px) {
    .selected-product-lists {
        --grid-gap: 32px;
        --bundle-list-icon-size: 12px;
        overflow-x: auto;
        -ms-scroll-snap-type: x mandatory;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: var(--layout-container-gap);
        padding-inline: var(--layout-container-gap);
        margin-inline: calc(var(--layout-container-gap)*-1)
    }

    .selected-product-lists>* {
        scroll-snap-align: start
    }

    .selected-product-lists {
        scrollbar-width: none
    }
}

@media only screen and (max-width: 767px) {
    .selected-product-lists {
        --product-card-min-width: min(60vw, 280px)
    }
}

.selected-product-lists .product-card {
    --product-card-color-bg: var(--color-white)
}

@media only screen and (max-width: 991px) {
    .selected-product-lists .product-card {
        min-width: var(--product-card-min-width)
    }
}

.selected-product-lists .product-card:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(50% - var(--bundle-list-icon-size)/2);
    inset-inline-start: calc(-1*(var(--grid-gap)/2 + var(--bundle-list-icon-size)));
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M8.66699 0V16' stroke='%2317232A' stroke-width='2'/%3E%3Cpath d='M16.667 8L0.666992 8' stroke='%2317232A' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: block;
    width: var(--bundle-list-icon-size);
    aspect-ratio: 1
}

.notify-me-popup {
    --popup-min-width: 400px
}

.add-review-popup textarea:not([rows]) {
    min-height: 120px
}

.location-popup .result-status,
.store-pickup-popup .result-status {
    --result-status-color-bg: #6ED34A;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background-color: var(--color-white);
    padding: 20px;
    border: 1px solid var(--color-border-primary);
    border-radius: 6px
}

.location-popup .result-status::before,
.store-pickup-popup .result-status::before {
    content: "";
    display: block;
    width: 8px;
    aspect-ratio: 1;
    background: var(--result-status-color-bg);
    margin-inline-end: 10px;
    border-radius: 50%
}

.location-popup .location-check-success .location-check-wrapper {
    display: none
}

.location-popup .location-check-success .location-result-wrapper {
    display: block
}

.location-popup .location-info-text {
    font-size: 15px;
    margin-bottom: 40px
}

.location-popup .result-status-not-available {
    --result-status-color-bg: #EA4335
}

.location-popup .location-result-wrapper {
    display: none
}

.store-pickup-popup .store-selected .store-list-wrapper {
    display: none
}

.store-pickup-popup .store-selected .store-details-wrapper {
    display: block
}

.store-pickup-popup .store-details-wrapper {
    display: none
}

.store-pickup-popup .back-icon {
    margin-top: 4px;
    margin-inline: -2px;
    cursor: pointer
}

.store-pickup-popup .result-status-lists {
    border: 1px solid var(--color-border-primary);
    border-radius: 6px;
    margin-bottom: 24px
}

.store-pickup-popup .result-status-lists .result-status {
    border: 0;
    border-radius: 0
}

.store-pickup-popup .result-status-lists .result-status:not(:last-child) {
    border-bottom: 1px solid var(--color-border-primary)
}

.store-pickup-popup .store-list-wrapper {
    --store-list-color-bg: var(--color-white);
    --store-list-color-border: var(--color-border-primary)
}

.store-pickup-popup .store-list-wrapper .form-submit-btn {
    position: sticky;
    bottom: 0;
    z-index: 1
}

.store-pickup-popup .store-address-item {
    background: var(--store-list-color-bg);
    padding: 20px;
    border-radius: 6px;
    border: 1px solid var(--store-list-color-border);
    transition: all .4s
}

.store-pickup-popup .store-address-item:has(input:checked) {
    --store-list-color-bg: var(--color-bg-light);
    --store-list-color-border: var(--color-primary)
}

.store-pickup-popup .address-model-radio {
    --checkbox-color: #8B9194
}

.store-pickup-popup .address-text {
    font-size: 15px
}

.add-review-form {
    max-width: 615px
}

.woocommerce table.product-info-table.shop_attributes th,
.woocommerce table.product-info-table.shop_attributes td {
    padding: 8px 20px;
    border: 0
}

.woocommerce table.product-info-table.shop_attributes th {
    border: 0
}

.woocommerce table.product-info-table.shop_attributes tr:nth-child(even) td,
.woocommerce table.product-info-table.shop_attributes tr:nth-child(even) th {
    background-color: rgba(0, 0, 0, 0)
}

/*# sourceMappingURL=product-details.min.css.map */