:root {
    --mm-ocd-width: 80%;
    --mm-ocd-min-width: 200px;
    --mm-ocd-max-width: 440px
}

body.mm-ocd-opened {
    overflow-y: hidden;
    overscroll-behavior: none
}

.mm-ocd {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 100%;
    left: 0;
    z-index: 9999;
    overflow: hidden;
    background: rgba(0,0,0,0);
    transition-property: bottom,background-color;
    transition-duration: 0s,0.3s;
    transition-timing-function: ease;
    transition-delay: 0.45s,0.15s
}

.mm-ocd--open {
    bottom: 0;
    background: rgba(0,0,0,0.25);
    transition-delay: 0s
}

.mm-ocd__content {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: var(--mm-ocd-width);
    min-width: var(--mm-ocd-min-width);
    max-width: var(--mm-ocd-max-width);
    background: #fff;
    transition: transform 0.3s ease
}

.mm-ocd--right .mm-ocd__content {
    right: 0;
    transform: translate3d(100%,0,0)
}

.mm-ocd--open .mm-ocd__content {
    transform: translate3d(0,0,0)
}

.mm-ocd__backdrop {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    left: 0;
    width: calc(100% - var(--mm-ocd-max-width));
    background: transparent
}

.mm-spn--list li {
    position: relative;
    padding: 18px 24px;
    font-family: 'Tajawal',sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: inherit;
    transition: background-color 0.3s ease;
    border: none !important
}

.mm-spn--list li:hover {
    background-color: #f8f8f8
}

.mm-spn--list li::after {
    content: '\\203A';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #aaa;
    opacity: 0;
    transition: opacity 0.3s ease;
    border: none !important
}

.mm-spn--list li:hover::after {
    opacity: 1;
    color: #000
}

.mm-spn--list li a {
    color: #222;
    text-decoration: none;
    display: block;
    transition: color 0.3s;
    border: none !important
}

.mm-spn ul,.mm-spn li:after,.mm-spn li:before {
    border: none !important
}

.main-menu li>a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 24px;
    color: #222;
    background-color: transparent;
    text-decoration: none;
    transition: background-color 0.3s ease,color 0.3s ease;
    border: none
}

.main-menu li>a:hover {
    background-color: #f8f8f4;
    color: #000
}

.main-nav-container.fixed-pinned .inner {
    box-shadow: none
}

.main-nav-container .inner {
    width: 100%;
    padding: 0 20px;
    max-width: none;
    margin: 0 auto
}

.btn--close:where([dir="rtl"],[dir="rtl"] *) {
    left: auto
}

[dir="rtl"] .mm-spn.mm-spn--navbar:after {
    text-align: left
}

#mainnav.main-nav-container {
    background-color: #fff;
    box-shadow: none;
    border-bottom: 1px solid #e5e5e5;
    height: 64px;
    position: sticky;
    top: 0;
    z-index: 100
}

@media (min-width: 1440px) {
    .container {
        max-width:1920px;
        padding: 0 40px
    }
}

#mainnav .inner {
    padding: 0 10px;
    height: 64px
}

#mainnav .container {
    max-width: none;
    margin: 0 auto;
    padding: 0 20px;
    height: 64px
}

#mainnav .flex.items-stretch.justify-between.relative {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 64px;
    max-width: 1920px;
    margin-inline:auto}

#mainnav .w-1/3 {
    flex: 1;
    display: flex;
    align-items: center
}

#mainnav .flex.items-center.flex-col.justify-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%)
}

#mainnav .navbar-brand img.logo-normal {
    object-fit: contain;
    max-height: 120px !important;
    max-width: 130px !important
}

#mainnav i,#mainnav .header-btn__icon {
    font-size: 16px !important;
    color: #000;
    transition: color 0.3s ease
}

#mainnav button:hover i,#mainnav a:hover i {
    color: #555
}

.text-xl {
    font-size: 16px;
    line-height: 18px
}

.s-cart-summary-icon svg {
    width: 18px;
    height: 18px;
    fill: #000
}

.s-cart-summary-count {
    font-size: 10px;
    background-color: black;
    color: white;
    border-radius: 9999px;
    padding: 2px 6px;
    line-height: 1;
    margin-left: 4px
}

.btn--close-sm {
    display: none !important
}

@media (min-width: 640px),(min-width:768px) {
    .main-nav-container {
        min-height:52px
    }
}

.advanced-slider__caption .container {
    width: 100%;
    max-width: 1920px;
    padding-inline:24px;margin-inline:auto;display: flex;
    justify-content: end
}

.advanced-slider__slide {
    display: flex;
    object-position: center;
    justify-content: center;
    position: relative;
    margin-inline:auto;width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden
}

.advanced-slider__caption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    z-index: 2
}

.advanced-slider__caption__inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none
}

.advanced-slider__caption__inner__content__button span {
    position: relative;
    color: white
}

.advanced-slider__caption__inner__content__button:hover span::before {
    transform: scaleX(1)
}

@media (max-width: 720px) {
    .swiper-autoheight,.swiper-autoheight .swiper-slide {
        height:auto
    }
}

body.index .swiper-wrapper:nth-of-type(2),body.index .swiper-wrapper:nth-of-type(3) {
    justify-content: flex-start;
    padding-top: 30px
}

.swiper-fade .swiper-slide {
    pointer-events: auto;
    transition-property: opacity;
    align-items: self-end !important
}

body.index .force-center salla-slider .swiper-wrapper {
    justify-content: flex-start;
    padding-bottom: 30px
}

.s-block,.gap-2,.md\:gap-4 {
    margin-top: 0 !important;
    gap: 0 !important
}

body.index .container {
    padding: 0 !important
}

@media (min-width: 1440px) {
    .container {
        max-width:none
    }
}

.banner--fixed img {
    border-radius: 0 !important
}

.s-block--fixed-banner {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end !important
}

@media (max-width: 767px) {
    .s-block--fixed-banner {
        height:auto;
        max-height: none;
        flex-direction: column-reverse
    }
}

.s-block--fixed-banner .banner {
    height: 100%
}

.s-block--fixed-banner .banner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: block
}

.s-block--double-banner .flex {
    flex-direction: column-reverse
}

@media (min-width: 768px) {
    .s-block--double-banner .flex {
        flex-direction:row
    }
}

salla-slider[type]:not(.hydrated)>div:where([dir="rtl"],[dir="rtl"] *),salla-slider[type]:not(.hydrated) .swiper>div>div:where([dir="rtl"],[dir="rtl"] *),.carousel-slider .swiper:where([dir="rtl"],[dir="rtl"] *) {
    padding-right: 40px
}

@media (max-width: 768px) {
    salla-slider[type]:not(.hydrated)>div:where([dir="rtl"],[dir="rtl"] *),salla-slider[type]:not(.hydrated) .swiper>div>div:where([dir="rtl"],[dir="rtl"] *),.carousel-slider .swiper:where([dir="rtl"],[dir="rtl"] *) {
        padding-right:10px
    }
}

.s-block--best-offers .s-slider-block__title,salla-products-slider .s-slider-block__title {
    padding: 0 40px
}

@media (max-width: 768px) {
    .s-block--best-offers .s-slider-block__title,salla-products-slider .s-slider-block__title {
        padding:0 10px
    }
}

.mb-10 {
    margin-top: 50px;
    margin-bottom: 50px;
    max-width: 1920px !important;
    align-self: center !important
}

.product-card__title,.product-card__title a {
    display: block !important;
    text-align: right !important;
    margin: 0 0 6px 0 !important;
    line-height: 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important
}

.product-card__price {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 4px !important;
    font-weight: bold !important;
    margin-top: 5px !important
}

.product-card__price .total-price {
    position: relative;
    top: -2px;
    font-size: 13px !important
}

.product-card__actions,.product-options,.product-card__buttons,.product-card__addToCart,.out-of-stock,.wishlist,.quickview-btn,.addToCart {
    display: none !important
}

@media (min-width: 768px) {
    .md\:flex-row {
        flex-direction:column-reverse
    }

    .md\:w-7\/12 {
        max-width: 666px
    }

    .md\:gap-10 {
        gap: 0
    }
}

@media (min-width: 768px) {
    .md\:w-2\/3 {
        max-width:720px
    }
}

.md\:w-5\/12 {
    width: 160px
}

.gap-5 {
    gap: 0px !important
}

body.home .mb-5 {
    margin-bottom: 0px;
    text-align: center;
    padding: 0 20px
}

@media (min-width: 640px) {
    .sm\:py-14 {
        padding-top:175px !important;
        padding-bottom: 175px !important
    }
}

.py-8 {
    padding-top: 100px;
    padding-bottom: 100px
}

.btn {
    border-bottom: 1px solid #000;
    background-color: transparent;
    font-weight: 500
}

.rounded {
    border-radius: 0
}

.mx-auto {
    margin-right: 0;
    margin-left: 0
}

.footer-is-custom .store-footer .store-footer__inner,.footer-is-custom .store-footer .store-footer__contacts-row,.footer-is-custom .store-footer .store-footer__newsletter {
    background-color: var(--footer-bg);
    border-bottom-color: rgba(0,0,0,0);
    max-width: 1920px;
    margin: 0 auto;
    padding: 67px 20px
}

@media (min-width: 1024px) {
    .lg\:gap-6,.lg\:justify-between {
        gap:1.5rem;
        padding: 0 30px;
        max-width: 1920px;
        margin: 0 auto;
        justify-content: space-between;
    }
}

.footer-list.enhanced_links {
    column-count: 2;
    margin: 0 1rem;
}

.grid {
    display: flex;
    gap: 61px;
    flex-direction: column;
}

.mb-2\.5 {
    max-width: 353px;
}

@media (min-width: 768px) {
    .md\:p-2 {
        padding:0 10px;
    }
}

.border,.payment-methods .itme-method,.payment-methods .itme-maroof {
    border-width: 0;
}

.lg\:py-0 {
    display: auto;
}

@media (max-width: 991px) {
    .basic-footer .store-footer__inner p {
        text-align:right;
    }
}

a.flex.items-center.justify-center.flex-col.h-full {
    align-items: flex-start;
}

.flex.items-center.justify-center.md\:justify-start.my-5 {
  justify-content: flex-start;
}

.mx-auto {
    margin-right: 0;
}

.py-2\.5,.payment-methods {
    padding: 0 10px;
}

.footer-is-custom .store-footer .social-link, .footer-is-custom .store-footer .contact-social, .footer-is-custom .store-footer .contact-icon {
    border-color: transparent;
}

.content-entry {
    font-size: 12px;
}

@media (min-width: 1024px) {
    .lg\:w-10\/12 {
        width: 100%;
    }
}