/* Add custom CSS styles below */ 

#mainnav {
    background-color:#faf3df;
}
/* =========================================
   TEMPER HEADER - BURGUNDY FINAL
========================================= */

/* =========================
   HEADER GENERAL
========================= */

.store-header,
.store-header a,
.store-header span,
.store-header p,
.store-header b,
.store-header i {
    color: #5F041D !important;
}


/* =========================
   TOP NAVBAR
========================= */

.top-navbar {
    color: #5F041D !important;
}

.top-navbar a {
    color: #5F041D !important;
}


/* =========================
   EMAIL / CONTACT
========================= */

.s-contacts-topnav-link {
    color: #5F041D !important;
}


/* =========================
   MAIN NAV
========================= */

#mainnav {
    color: #5F041D !important;
}

#mainnav a,
#mainnav span {
    color: #5F041D !important;
}


/* =========================
   MAIN MENU LINKS
========================= */

#mainnav .main-menu a,
#mainnav .main-menu span,
#mobile-menu a,
#mobile-menu span {
    color: #5F041D !important;
}


/* =========================
   MENU ICON
========================= */

#mainnav .sicon-menu,
#mainnav .mburger i {
    color: #5F041D !important;
}


/* =========================
   SEARCH
========================= */

.store-header .s-search-input {
    color: #5F041D !important;
    border-color: rgba(95, 4, 29, .25) !important;
}

.store-header .s-search-input::placeholder {
    color: #5F041D !important;
    opacity: .7 !important;
}


/* Search SVG */

.store-header .s-search-icon svg,
.store-header .s-search-icon svg path {
    fill: #5F041D !important;
    color: #5F041D !important;
}


/* =========================
   USER ICON
========================= */

.store-header .s-user-menu-login-btn {
    color: #5F041D !important;
}

.store-header .s-user-menu-login-btn svg,
.store-header .s-user-menu-login-btn svg path {
    fill: #5F041D !important;
    color: #5F041D !important;
}


/* =========================
   CART
========================= */

.store-header .s-cart-summary-wrapper,
.store-header .s-cart-summary-wrapper span,
.store-header .s-cart-summary-wrapper b,
.store-header .s-cart-summary-wrapper i {
    color: #5F041D !important;
}


/* Cart SVG */

.store-header .s-cart-summary-wrapper svg,
.store-header .s-cart-summary-wrapper svg path {
    fill: #5F041D !important;
    color: #5F041D !important;
}


/* Shopping bag icon */

.store-header .sicon-shopping-bag {
    color: #5F041D !important;
}


/* Cart count */

.store-header .s-cart-summary-count {
    background: #b7778800 !important;
    color: #FAF3DF !important;
}


/* =========================
   SAR ICON / PRICE
========================= */

.store-header .s-cart-summary-total,
.store-header .sicon-sar {
    color: #5F041D !important;
}


/* =========================
   MOBILE CLOSE ICON
========================= */

.store-header .close-mobile-menu,
.store-header .sicon-cancel {
    color: #5F041D !important;
}


/* =========================
   ALL HEADER SVG FALLBACK
========================= */

.store-header svg {
    color: #5F041D !important;
}

.store-header svg path,
.store-header svg circle,
.store-header svg rect {
    stroke: #5F041D;
}


/* الأيقونات التي تعتمد على fill */

.store-header svg path {
    fill: #5F041D !important;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .store-header,
    .store-header a,
    .store-header span,
    .store-header i,
    .store-header p,
    .store-header b {
        color: #5F041D !important;
    }

    #mainnav .sicon-menu,
    .store-header .sicon-shopping-bag,
    .store-header .sicon-cancel {
        color: #5F041D !important;
    }

    .store-header svg path {
        fill: #5F041D !important;
    }

}
[data-testid="store-home-fixed-banner"] {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

[data-testid="store-home-fixed-banner"] > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

[data-testid="store-home-fixed-banner"] .banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

[data-testid="store-home-fixed-banner"] img {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
#app {
    background: #FAF3DF !important;
    min-height: 100vh;
}
#featured-products-style2-3 {
    background: #FAF3DF !important;
  padding-bottom: 0rem !important;
        padding-top: 0rem !important;
}
#featured-products-style2-5{
  background: #FAF3DF !important;
   padding-bottom: 0rem !important;
        padding-top: 0rem !important;
}
.temper-marquee {
  width: 100%;
  overflow: hidden;

  background: #5F041D;
  color: #FAF3DF;

  min-height: 52px;

  display: flex;
  align-items: center;

  direction: rtl;
}

.temper-marquee__track {
  display: flex;
  align-items: center;

  min-width: max-content;

  animation: temper-marquee-scroll 24s linear infinite;
}

.temper-marquee__item {
  position: relative;

  display: flex;
  align-items: center;

  white-space: nowrap;

  padding: 0 58px;

  font-family: "Dubai", Tahoma, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 52px;

  color: #FAF3DF;
}

/* الفاصل */
.temper-marquee__item::after {
  content: "—";

  position: absolute;
  left: -8px;

  color: #FAF3DF;

  opacity: .45;

  font-size: 18px;
  font-weight: 400;
}


/* الحركة */
@keyframes temper-marquee-scroll {

  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(50%);
  }

}


/* إيقاف الحركة عند مرور الماوس */
.temper-marquee:hover .temper-marquee__track {
  animation-play-state: paused;
}


/* Tablet */
@media (max-width: 1024px) {

  .temper-marquee {
    min-height: 48px;
  }

  .temper-marquee__item {
    padding: 0 40px;

    font-size: 15px;
    line-height: 48px;
  }

}


/* Mobile */
@media (max-width: 767px) {

  .temper-marquee {
    min-height: 44px;
  }

  .temper-marquee__item {
    padding: 0 30px;

    font-size: 13px;
    line-height: 44px;
  }

  .temper-marquee__item::after {
    font-size: 14px;
  }

}
@media (min-width: 992px) {

    #mainnav > div > div > div {
        position: relative !important;
    }

    #mainnav .main-menu,
    #mainnav nav {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;

        width: max-content !important;
        margin: 0 !important;
    }

}
/* =========================================
   TEMPER CATEGORY ACCORDION
========================================= */

.temper-accordion {
    width: 100%;
    max-width: 1370px;
    height: 500px;

    margin: 0 auto;
    padding: 20px 16px;

    box-sizing: border-box;

    display: flex;
    gap: 14px;

    direction: rtl;

    font-family: "Dubai", Tahoma, Arial, sans-serif;
}


/* =========================
   Card
========================= */

.temper-accordion .temper-item {

    position: relative;

    flex: 0 0 11%;

    min-width: 0;
    height: 100%;

    overflow: hidden;

    border-radius: 16px;

    background: #111;

    text-decoration: none !important;

    transition:
        flex-basis .65s cubic-bezier(.22,.61,.36,1),
        flex-grow .65s cubic-bezier(.22,.61,.36,1);
}


/* البطاقة الأولى مفتوحة */
.temper-accordion .temper-main {
    flex-grow: 1;
    flex-basis: 55%;
}


/* =========================
   Image
========================= */

.temper-accordion .temper-item img {

    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;

    transition:
        transform .65s ease,
        filter .45s ease;
}


/* =========================
   Overlay
========================= */

.temper-accordion .temper-item::after {

    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.75) 0%,
            rgba(0,0,0,.10) 50%,
            rgba(0,0,0,.02) 100%
        );
}


/* =========================
   Titles
========================= */

.temper-accordion .temper-name {

    position: absolute;

    z-index: 2;

    color: #5F041D;

    font-family: "Dubai", Tahoma, Arial, sans-serif;
    font-weight: 700;

    white-space: nowrap;

    text-shadow: 0 0px 0px rgba(0,0,0,.45);

    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        right .55s ease,
        bottom .55s ease,
        font-size .4s ease;

}


/* القسم المفتوح */
.temper-accordion .temper-main .temper-name {

    right: 28px;
    bottom: 24px;

    font-size: 30px;

    transform: none;
}


/* الأقسام المغلقة */
.temper-accordion .temper-item:not(.temper-main) .temper-name {

    right: 50%;
    bottom: 90px;

    font-size: 25px;

    transform:
        translateX(50%)
        rotate(-90deg);

    transform-origin: center;
}


/* =========================================
   الحركة
========================================= */

@media (hover:hover) and (pointer:fine) {

    /* بمجرد دخول المؤشر للقسم بالكامل */
    .temper-accordion:hover .temper-item {
        flex-grow: 0;
        flex-basis: 11%;
    }


    /* البطاقة التي عليها المؤشر تتمدد */
    .temper-accordion .temper-item:hover {

        flex-grow: 1;
        flex-basis: 55%;
    }


    /* النصوص كلها تصبح عمودية أثناء التنقل */
    .temper-accordion:hover .temper-name {

        right: 50%;
        bottom: 90px;

        font-size: 25px;

        transform:
            translateX(50%)
            rotate(-90deg);
    }


    /* نص البطاقة المفتوحة */
    .temper-accordion .temper-item:hover .temper-name {

        right: 28px;
        bottom: 24px;

        font-size: 30px;

        transform: none;
    }


    /* Zoom بسيط */
    .temper-accordion .temper-item:hover img {
        transform: scale(1.035);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .temper-accordion {

        height: auto;

        padding: 10px 12px;

        flex-direction: column;

        gap: 12px;
    }


    .temper-accordion .temper-item,
    .temper-accordion .temper-main {

        flex: none !important;

        width: 100%;
        height: 155px;

        border-radius: 14px;
    }


    .temper-accordion .temper-name,
    .temper-accordion .temper-main .temper-name,
    .temper-accordion .temper-item:not(.temper-main) .temper-name {

        right: 18px;
        bottom: 15px;

        font-size: 21px;

        transform: none !important;
    }


    .temper-accordion .temper-item::after {

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.02) 20%,
                rgba(0,0,0,.72) 100%
            );
    }
}
/* =========================================
   TEMPER ACCORDION - REMOVE SHADOW/OVERLAY
   FINAL OVERRIDE (DESKTOP + MOBILE)
========================================= */
.temper-accordion .temper-item,
.temper-accordion .temper-item:hover,
.temper-accordion .temper-item:focus,
.temper-accordion .temper-item:active {
    box-shadow: none !important;
    filter: none !important;
}

.temper-accordion .temper-item::before,
.temper-accordion .temper-item::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 0 !important;
}

.temper-accordion .temper-item img,
.temper-accordion .temper-item:hover img,
.temper-accordion .temper-item:focus img,
.temper-accordion .temper-item:active img {
    box-shadow: none !important;
    filter: none !important;
}

.temper-accordion .temper-name {
    text-shadow: none !important;
}

@media (max-width: 767px) {
    .temper-accordion .temper-item,
    .temper-accordion .temper-main {
        box-shadow: none !important;
        filter: none !important;
    }

    .temper-accordion .temper-item::before,
    .temper-accordion .temper-item::after,
    .temper-accordion .temper-main::before,
    .temper-accordion .temper-main::after {
        content: none !important;
        display: none !important;
        background: none !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !important;
        opacity: 0 !important;
    }

    .temper-accordion .temper-item img,
    .temper-accordion .temper-main img {
        box-shadow: none !important;
        filter: none !important;
    }

    .temper-accordion .temper-name,
    .temper-accordion .temper-main .temper-name,
    .temper-accordion .temper-item:not(.temper-main) .temper-name {
        text-shadow: none !important;
    }
}
/* =========================================
   TEMPER MOOD SECTION
========================================= */

.temper-mood-section {
    width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;

    font-family: "Dubai", Tahoma, Arial, sans-serif;
}


/* CARD */

.temper-mood-content {
    position: relative;

    max-width: 1370px;
    min-height: 190px;

    margin: 0 auto;

    padding: 32px 55px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    overflow: hidden;

    border-radius: 24px;

    background:
        linear-gradient(
            115deg,
            #f7eadc 0%,
            #faf3df 50%,
            #f6e5d5 100%
        );
}


/* subtle background pattern */

.temper-mood-content::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    right: -100px;
    top: -130px;

    border: 1px solid rgba(95,4,29,.08);
    border-radius: 50%;
}


.temper-mood-content::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -90px;
    bottom: -130px;

    border: 1px solid rgba(95,4,29,.08);
    border-radius: 50%;
}


/* =========================================
   TEXT
========================================= */

.temper-mood-text {
    position: relative;
    z-index: 3;

    text-align: right;
}


.temper-mood-en {
    display: block;

    margin-bottom: 3px;

    color: #5F041D;

    font-size: 18px;
    font-weight: 700;

    letter-spacing: .2px;
}


.temper-mood-text h2 {
    margin: 0;

    color: #5F041D;

    font-size: 31px;
    font-weight: 700;
    line-height: 1.25;
}


.temper-mood-text p {
    margin: 7px 0 15px;

    color: #5F041D;

    font-size: 16px;
    font-weight: 400;
}


/* LINK */

.temper-mood-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #5F041D !important;

    text-decoration: none !important;

    font-size: 15px;
    font-weight: 600;

    transition: gap .25s ease;
}


.temper-mood-link:hover {
    gap: 14px;
}


/* =========================================
   FACES AREA
========================================= */

.temper-mood-faces {
    position: relative;
    z-index: 3;

    flex: 0 0 145px;

    width: 145px;
    height: 145px;
}


/* All Faces */

.temper-face {
    position: absolute;

    width: 145px;
    height: 145px;

    inset: 0;

    fill: none;

    stroke: #5F041D;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0;

    transform:
        scale(.78)
        rotate(-8deg);

    animation:
        temperFaceChange 15s
        infinite ease-in-out;
}


/* timing */

.face-1 {
    animation-delay: 0s;
}

.face-2 {
    animation-delay: 3s;
}

.face-3 {
    animation-delay: 6s;
}

.face-4 {
    animation-delay: 9s;
}

.face-5 {
    animation-delay: 12s;
}
/* =========================================
   TEMPER MOOD - FINAL CSS
   Brand Colors:
   Cream   #FAF3DF
   Burgundy #5F041D
========================================= */

.temper-mood-section {
    width: 100%;
    padding: 20px 16px;
    box-sizing: border-box;
    font-family: "Dubai", Tahoma, Arial, sans-serif;
}


/* =========================================
   CARD
========================================= */

.temper-mood-content {
    position: relative;

    max-width: 1370px;
    min-height: 190px;

    margin: 0 auto;
    padding: 32px 55px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    overflow: hidden;

    border-radius: 24px;

    background: #FAF3DF;
}


/* Decorative circles */

.temper-mood-content::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    right: -95px;
    top: -140px;

    border: 1px solid rgba(95, 4, 29, .10);
    border-radius: 50%;
}


.temper-mood-content::after {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    left: -90px;
    bottom: -145px;

    border: 1px solid rgba(95, 4, 29, .10);
    border-radius: 50%;
}


/* =========================================
   TEXT
========================================= */

.temper-mood-text {
    position: relative;
    z-index: 3;

    max-width: 540px;

    text-align: right;
}


.temper-mood-en {
    display: block;

    margin-bottom: 4px;

    color: #5F041D;

    font-size: 18px;
    font-weight: 700;
}


.temper-mood-text h2 {
    margin: 0;

    color: #231F20;

    font-size: 31px;
    font-weight: 700;
    line-height: 1.25;
}


.temper-mood-text p {
    margin: 7px 0 15px;

    color: #514942;

    font-size: 16px;
    line-height: 1.5;
}


.temper-mood-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #5F041D !important;

    text-decoration: none !important;

    font-size: 15px;
    font-weight: 600;

    transition: gap .25s ease;
}


.temper-mood-link:hover {
    gap: 14px;
}


/* =========================================
   FACES
========================================= */

.temper-mood-faces {
    position: relative;
    z-index: 3;

    flex: 0 0 190px;

    width: 190px;
    height: 145px;

    margin: 0;

    /* إزاحة بسيطة نحو اليمين */
    transform: translateX(12px);

    animation: temperMoodFloat 4s ease-in-out infinite;
}


/* Face drawing */

.temper-face {
    position: absolute;

    inset: 0;

    margin: auto;

    width: 145px;
    height: 145px;

    fill: none;

    stroke: #5F041D;
    stroke-width: 4.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0;

    transform: scale(.82);

    /*
       36 ثانية ÷ 12 وجه
       = تقريباً 3 ثوانٍ لكل وجه
    */
    animation: temperFaces 36s infinite ease-in-out;
}


/* =========================================
   FACE TIMING
   كل وجه بعد 3 ثوانٍ
========================================= */

.face-1  { animation-delay: 0s; }
.face-2  { animation-delay: 3s; }
.face-3  { animation-delay: 6s; }
.face-4  { animation-delay: 9s; }
.face-5  { animation-delay: 12s; }
.face-6  { animation-delay: 15s; }
.face-7  { animation-delay: 18s; }
.face-8  { animation-delay: 21s; }
.face-9  { animation-delay: 24s; }
.face-10 { animation-delay: 27s; }
.face-11 { animation-delay: 30s; }
.face-12 { animation-delay: 33s; }


/* =========================================
   FACE CHANGE ANIMATION
========================================= */

@keyframes temperFaces {

    0% {
        opacity: 0;
        transform: scale(.78) translateY(5px);
    }

    2% {
        opacity: 1;
        transform: scale(1.04) translateY(0);
    }

    4% {
        opacity: 1;
        transform: scale(1);
    }

    7.5% {
        opacity: 1;
        transform: scale(1);
    }

    8.3% {
        opacity: 0;
        transform: scale(.90) translateY(-4px);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================
   FLOATING MOTION
========================================= */

@keyframes temperMoodFloat {

    0%,
    100% {
        transform:
            translateX(12px)
            translateY(0);
    }

    50% {
        transform:
            translateX(12px)
            translateY(-5px);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .temper-mood-section {
        padding: 12px;
    }


    .temper-mood-content {
        min-height: 165px;

        padding: 24px 20px;

        border-radius: 18px;

        gap: 18px;
    }


    .temper-mood-en {
        font-size: 14px;
    }


    .temper-mood-text h2 {
        font-size: 23px;
    }


    .temper-mood-text p {
        max-width: 225px;

        margin: 5px 0 12px;

        font-size: 13px;
        line-height: 1.5;
    }


    .temper-mood-link {
        font-size: 13px;
    }


    .temper-mood-faces {
        flex-basis: 105px;

        width: 105px;
        height: 100px;

        transform: translateX(5px);

        animation: temperMoodFloatMobile 4s ease-in-out infinite;
    }


    .temper-face {
        width: 95px;
        height: 95px;

        stroke-width: 4.5;
    }
}


/* =========================================
   MOBILE FLOAT
========================================= */

@keyframes temperMoodFloatMobile {

    0%,
    100% {
        transform:
            translateX(5px)
            translateY(0);
    }

    50% {
        transform:
            translateX(5px)
            translateY(-4px);
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .temper-mood-content {
        padding: 20px 16px;
        gap: 12px;
    }


    .temper-mood-text h2 {
        font-size: 20px;
    }


    .temper-mood-text p {
        font-size: 12px;
    }


    .temper-mood-faces {
        flex-basis: 82px;

        width: 82px;
        height: 82px;
    }


    .temper-face {
        width: 78px;
        height: 78px;
    }
}


/* =========================================
   ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    .temper-mood-faces {
        animation: none;
        transform: translateX(12px);
    }

    .temper-face {
        animation: none;
        opacity: 0;
    }

    .temper-face.face-3 {
        opacity: 1;
        transform: none;
    }
}
/* =========================================
   TEMPER ABOUT SECTION
========================================= */

.temper-about-section {
    width: 100%;
    padding: 18px 16px;
    box-sizing: border-box;

    font-family: "Dubai", Tahoma, Arial, sans-serif;
}


/* =========================================
   DESKTOP GRID
========================================= */

.temper-about-grid {
    width: 100%;
    max-width: 1370px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    grid-template-rows:
        220px
        175px;

    gap: 12px;
}


/* =========================================
   GENERAL CARDS
========================================= */

.temper-about-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 18px;

    background: #FAF3DF;

    text-decoration: none !important;
}


/* =========================================
   TEXT CARD
========================================= */

.temper-about-text-card {
    grid-column: 3;
    grid-row: 1;

    padding: 28px 34px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: right;

    background: #FAF3DF;
}


.temper-about-eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #5F041D !important;

    font-size: 20px;
    font-weight: 700;
}


.temper-about-text-card h2 {
    margin: 0;

    color: #231F20;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.55;
}


.temper-about-text-card p {
    margin: 4px 0 12px;

    color: #4E4540;

    font-size: 17px;
    line-height: 1.55;
}


.temper-about-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-top: 4px;

    color: #5F041D !important;

    font-size: 16px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        gap .25s ease,
        opacity .25s ease;
}


.temper-about-link:hover {
    gap: 13px;
    opacity: .82;
}


/* =========================================
   MAIN IMAGE
========================================= */

.temper-about-main-image {
    grid-column: 1 / 3;
    grid-row: 1;
}


/* =========================================
   BOTTOM IMAGES - DESKTOP
========================================= */

.temper-about-small-1 {
    grid-column: 3;
    grid-row: 2;
}

.temper-about-small-2 {
    grid-column: 2;
    grid-row: 2;
}

.temper-about-last-image {
    grid-column: 1;
    grid-row: 2;
}


/* =========================================
   IMAGE STYLE
========================================= */

.temper-about-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .5s ease,
        filter .4s ease;
}


/* =========================================
   HOVER
========================================= */

@media (hover:hover) and (pointer:fine) {

    .temper-about-card:not(.temper-about-text-card):hover img {
        transform: scale(1.035);
    }

}


/* =========================================
   LIGHT OVERLAY
========================================= */

.temper-about-main-image::after,
.temper-about-small-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.08),
            rgba(0,0,0,0) 55%
        );
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .temper-about-grid {
        grid-template-rows:
            195px
            155px;

        gap: 10px;
    }

    .temper-about-text-card {
        padding: 22px 25px;
    }

    .temper-about-eyebrow {
        font-size: 18px;
    }

    .temper-about-text-card h2 {
        font-size: 18px;
    }

    .temper-about-text-card p {
        font-size: 15px;
    }

    .temper-about-link {
        font-size: 14px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .temper-about-section {
        padding: 12px 8px;
    }


    .temper-about-grid {
        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            auto
            210px
            145px
            210px !important;

        gap: 10px !important;
    }


    /* TEXT FULL WIDTH */

    .temper-about-text-card {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;

        width: 100% !important;

        padding: 22px 20px;

        border-radius: 16px;
    }


    .temper-about-eyebrow {
        font-size: 17px;
    }


    .temper-about-text-card h2 {
        font-size: 18px;

        line-height: 1.5;
    }


    .temper-about-text-card p {
        font-size: 14px;

        line-height: 1.55;
    }


    .temper-about-link {
        font-size: 14px;
    }


    /* MAIN IMAGE FULL WIDTH */

    .temper-about-main-image {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;

        width: 100% !important;
        height: 210px !important;

        min-width: 0 !important;

        justify-self: stretch !important;

        border-radius: 16px;
    }


    /* MIDDLE LEFT */

    .temper-about-small-1 {
        grid-column: 1 !important;
        grid-row: 3 !important;

        width: 100% !important;
        height: 145px !important;

        min-width: 0 !important;

        border-radius: 14px;
    }


    /* MIDDLE RIGHT */

    .temper-about-small-2 {
        grid-column: 2 !important;
        grid-row: 3 !important;

        width: 100% !important;
        height: 145px !important;

        min-width: 0 !important;

        border-radius: 14px;
    }


    /* LAST IMAGE FULL WIDTH */

    .temper-about-last-image {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;

        width: 100% !important;
        height: 210px !important;

        min-width: 0 !important;
        max-width: none !important;

        justify-self: stretch !important;
        align-self: stretch !important;

        border-radius: 16px;
    }


    /* Force images to fill cards */

    .temper-about-main-image img,
    .temper-about-small-1 img,
    .temper-about-small-2 img,
    .temper-about-last-image img {

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center !important;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 420px) {

    .temper-about-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        grid-template-rows:
            auto
            195px
            132px
            195px !important;

        gap: 9px !important;
    }


    .temper-about-text-card {
        padding: 20px 17px;
    }


    .temper-about-text-card h2 {
        font-size: 17px;
    }


    .temper-about-text-card p {
        font-size: 13px;
    }


    .temper-about-main-image {
        height: 195px !important;
    }


    .temper-about-small-1,
    .temper-about-small-2 {
        height: 132px !important;
    }


    .temper-about-last-image {
        grid-column: 1 / -1 !important;

        width: 100% !important;
        height: 195px !important;

        min-width: 0 !important;

        justify-self: stretch !important;
    }
}
.temper-about-page{
    font-family:"Dubai",Tahoma,Arial,sans-serif;
    direction:rtl;
    padding:35px 16px;
    background:#fff;
}

.temper-about-page__wrap{
    max-width:1200px;
    margin:auto;
}

.temper-about-page__intro{
    padding:55px;
    background:#FAF3DF;
    border-radius:26px;
}

.temper-about-page__intro span,
.temper-about-page__statement small{
    color:#5F041D;
    font-weight:700;
}

.temper-about-page__intro h1{
    margin:8px 0 12px;
    font-size:42px;
    color:#231F20;
}

.temper-about-page__intro p{
    max-width:700px;
    margin:0;
    font-size:18px;
    line-height:1.9;
}

.temper-about-page__grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin-top:16px;
}

.temper-about-page__grid article{
    padding:30px;
    border:1px solid #eee5d6;
    border-radius:20px;
}

.temper-about-page__grid article>span{
    color:#5F041D;
    font-size:13px;
}

.temper-about-page__grid h2{
    margin:12px 0 5px;
    font-size:21px;
}

.temper-about-page__grid p{
    margin:0;
    line-height:1.8;
}

.temper-about-page__statement{
    margin-top:16px;
    padding:45px;
    background:#5F041D;
    color:#FAF3DF;
    border-radius:24px;
}

.temper-about-page__statement h2{
    margin:7px 0 0;
    font-size:30px;
}

@media(max-width:767px){
    .temper-about-page__intro{padding:30px 22px}
    .temper-about-page__intro h1{font-size:30px}
    .temper-about-page__grid{grid-template-columns:1fr}
    .temper-about-page__statement{padding:30px 22px}
    .temper-about-page__statement h2{font-size:23px}
}
@media (max-width: 767px) {

    .s-slider-container .swiper-wrapper {
        display: flex !important;
        gap: 10px !important;
    }

    .s-slider-container .swiper-slide,
    .s-products-slider-card {
        width: calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        flex: 0 0 calc(50% - 5px) !important;

        margin: 0 !important;
    }

    .s-product-card-entry {
        width: 100% !important;
        max-width: 100% !important;
    }

}
/* =========================================
   ALL PRODUCT CARDS - TEMPER FINAL STYLE
========================================= */

.s-product-card-entry {
    background: #5F041D !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================
   IMAGE
========================================= */

.s-product-card-entry > .s-product-card-image {
    background: #FAF3DF !important;

    border-radius: 16px 16px 0 0 !important;

    overflow: hidden !important;
}


.s-product-card-entry > .s-product-card-image img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    border-radius: 16px 16px 0 0 !important;

    box-shadow: none !important;
}


/* =========================================
   CONTENT
========================================= */

.s-product-card-entry > .s-product-card-content {
    background: #FAF3DF !important;

    border-radius: 0 0 16px 16px !important;

    color: #5F041D !important;
}


/* =========================================
   ALL TEXT COLORS
========================================= */

.s-product-card-entry .s-product-card-content,
.s-product-card-entry .s-product-card-content *,
.s-product-card-entry .s-product-card-content-title,
.s-product-card-entry .s-product-card-content-title a,
.s-product-card-entry .s-product-card-price,
.s-product-card-entry .s-product-card-price i {
    color: #5F041D !important;
}


/* Product title */

.s-product-card-entry .s-product-card-content-title a {
    color: #5F041D !important;

    text-decoration: none !important;

    font-weight: 600 !important;
}


/* Price */

.s-product-card-entry .s-product-card-price {
    color: #5F041D !important;
}


/* =========================================
   ADD TO CART BUTTON
========================================= */

.s-product-card-entry
.s-product-card-content-footer
.s-button-element {

    background: transparent !important;

    border: 1px solid #5F041D !important;

    border-radius: 12px !important;

    color: #5F041D !important;

    box-shadow: none !important;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease !important;
}


/* Button text */

.s-product-card-entry
.s-product-card-content-footer
.s-button-text,

.s-product-card-entry
.s-product-card-content-footer
.s-button-text span {

    color: #5F041D !important;
}


/* Cart icon */

.s-product-card-entry
.s-product-card-content-footer
i {

    color: #5F041D !important;
}


/* =========================================
   ADD TO CART HOVER
========================================= */

.s-product-card-entry
.s-product-card-content-footer
.s-button-element:hover {

    background: #5F041D !important;

    border-color: #5F041D !important;

    color: #FAF3DF !important;

    transform: translateY(-1px);
}


/* Hover text */

.s-product-card-entry
.s-product-card-content-footer
.s-button-element:hover
.s-button-text,

.s-product-card-entry
.s-product-card-content-footer
.s-button-element:hover
.s-button-text span {

    color: #FAF3DF !important;
}


/* Hover icon */

.s-product-card-entry
.s-product-card-content-footer
.s-button-element:hover i {

    color: #FAF3DF !important;
}


/* =========================================
   WISHLIST BUTTON
========================================= */

.s-product-card-entry .s-product-card-wishlist-btn {

    color: #5F041D !important;

    border-color: #5F041D !important;

    background: #FAF3DF !important;

    box-shadow: none !important;
}


/* Wishlist icon */

.s-product-card-entry .s-product-card-wishlist-btn i {
    color: #5F041D !important;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .s-product-card-entry {
        border-radius: 16px !important;
    }


    .s-product-card-entry > .s-product-card-image {
        border-radius: 16px 16px 0 0 !important;
    }


    .s-product-card-entry > .s-product-card-content {
        border-radius: 0 0 16px 16px !important;
    }


    .s-product-card-entry
    .s-product-card-content-footer
    .s-button-element {

        border-radius: 10px !important;
    }

}
.store-footer {
    background: #5F041D !important;
}

.store-footer__inner {
    background: #5F041D !important;
}

.store-footer,
.store-footer a,
.store-footer p,
.store-footer span,
.store-footer h1,
.store-footer h2,
.store-footer h3,
.store-footer h4 {
    color: #FAF3DF !important;
}
/* =========================================
   TEMPER FOOTER V4 - FINAL
========================================= */

.temper-footer-v4 {
    width: 100%;
    padding: 18px 16px;
    box-sizing: border-box;

    direction: rtl;

    font-family: "Dubai", Tahoma, Arial, sans-serif;
}


.temper-footer-v4__inner {
    max-width: 1380px;
    margin: 0 auto;

    padding: 42px 46px 26px;

    box-sizing: border-box;

    display: grid;

    grid-template-columns:
        420px
        1fr
        90px;

    grid-template-areas:
        "brand links social"
        "bottom bottom bottom";

    gap: 38px;

    align-items: center;

    background: #FAF3DF;

    color: #5F041D;

    border-radius: 24px;
}


/* =========================================
   BRAND
========================================= */

.temper-footer-v4__brand {
    grid-area: brand;

    min-width: 0;

    text-align: right;
}


.temper-footer-v4__logo {
    width: 180px;

    margin-bottom: 15px;
}


.temper-footer-v4__logo img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 75px;

    object-fit: contain;

    object-position: right center;
}


.temper-footer-v4__brand h3 {
    margin: 0 0 8px;

    color: #5F041D;

    font-size: 27px;

    font-weight: 700;
}


.temper-footer-v4__brand p {
    max-width: 360px;

    margin: 0 0 20px;

     color: #5F041D;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   CONTACT
========================================= */

.temper-footer-v4__contact {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.temper-footer-v4__contact a {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #5F041D !important;

    text-decoration: none !important;

    font-size: 13px;
}


.temper-footer-v4__icon {
    width: 34px;

    height: 34px;

    min-width: 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(250,243,223,.28);

    border-radius: 50%;
}


.temper-footer-v4__icon svg {
    width: 17px;

    height: 17px;

    fill: #FAF3DF;
}


/* =========================================
   DESKTOP LINKS
========================================= */

.temper-footer-v4__links-desktop {
    grid-area: links;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(170px,1fr));

    gap: 40px;

    padding: 0 36px;

    border-left:
        1px solid rgba(250,243,223,.14);

    border-right:
        1px solid rgba(250,243,223,.14);
}


.temper-footer-v4__col {
    display: flex;

    flex-direction: column;

    gap: 11px;

    text-align: right;
}


.temper-footer-v4__col h4 {
    margin: 0 0 7px;

    color: #FAF3DF;

    font-size: 18px;

    font-weight: 700;
}


.temper-footer-v4__col a {
    color: #5F041D;

    text-decoration: none !important;

    font-size: 14px;

    line-height: 1.8;
}


/* =========================================
   MOBILE LINKS
========================================= */

.temper-footer-v4__links-mobile {
    display: none;
}


/* =========================================
   SOCIAL
========================================= */

.temper-footer-v4__social {
    grid-area: social;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 12px;
}


.temper-footer-v4__social a {
    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(250,243,223,.25);

    border-radius: 50%;

    color: #FAF3DF;

    text-decoration: none !important;
}


.temper-footer-v4__social svg {
    width: 20px;

    height: 20px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}


.temper-footer-v4__social a:nth-child(2) svg,
.temper-footer-v4__social a:nth-child(3) svg,
.temper-footer-v4__social a:nth-child(4) svg {
    fill: currentColor;

    stroke: none;
}


/* =========================================
   BOTTOM
========================================= */

.temper-footer-v4__bottom {
    grid-area: bottom;

    margin-top: 12px;

    padding-top: 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    border-top:
        1px solid rgba(250,243,223,.16);
}


/* PAYMENT */

.temper-footer-v4__payments {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.temper-footer-v4__payments img {
    width: 62px !important;

    height: 36px !important;

    padding: 3px 5px;

    box-sizing: border-box;

    object-fit: contain;

    background: #fff;

    border-radius: 7px;
}


/* LEGAL */

.temper-footer-v4__legal {
    text-align: right;
}


.temper-footer-v4__legal p {
    margin: 3px 0;

    color: rgba(250,243,223,.66);

    font-size: 11px;
}


/* =========================================
   TABLET
========================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .temper-footer-v4__inner {
        grid-template-columns:
            310px
            1fr
            75px;

        gap: 20px;

        padding: 30px 24px 24px;
    }


    .temper-footer-v4__links-desktop {
        padding: 0 18px;

        gap: 20px;
    }


    .temper-footer-v4__logo {
        width: 145px;
    }


    .temper-footer-v4__brand h3 {
        font-size: 21px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .temper-footer-v4 {
        padding: 10px 8px;
    }


    .temper-footer-v4__inner {
        display: flex !important;

        flex-direction: column !important;

        gap: 0 !important;

        padding:
            28px
            20px
            22px !important;

        border-radius: 20px;
    }


    /* BRAND */

    .temper-footer-v4__brand {
        order: 1;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .temper-footer-v4__logo {
        width: 145px;

        margin: 0 auto 15px;
    }


    .temper-footer-v4__logo img {
        object-position: center;
    }


    .temper-footer-v4__brand h3 {
        font-size: 23px;
    }


    .temper-footer-v4__brand p {
        max-width: 280px;

        margin: 0 auto 20px;

        font-size: 13px;

        text-align: center;
    }


    /* CONTACT */

    .temper-footer-v4__contact {
        width: 100%;

        align-items: stretch;

        gap: 8px;

        margin-bottom: 24px;
    }


    .temper-footer-v4__contact a {
        width: 100%;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 10px;

        padding: 7px 8px;

        box-sizing: border-box;

        font-size: 12px;

        text-align: right;
    }


    .temper-footer-v4__icon {
        width: 32px;

        height: 32px;

        min-width: 32px;

        flex: 0 0 32px;
    }


    .temper-footer-v4__icon svg {
        width: 15px;

        height: 15px;
    }


    .temper-footer-v4__contact a > span:last-child {
        flex: 1;

        text-align: right;

        word-break: break-word;
    }


    /* DESKTOP LINKS OFF */

    .temper-footer-v4__links-desktop {
        display: none !important;
    }


    /* MOBILE ACCORDION */

    .temper-footer-v4__links-mobile {
        order: 2;

        width: 100%;

        display: grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap: 0;

        border-top:
            1px solid rgba(250,243,223,.16);

        border-bottom:
            1px solid rgba(250,243,223,.16);
    }


    .temper-footer-v4__links-mobile details {
        padding: 0 12px;
    }


    .temper-footer-v4__links-mobile details:first-child {
        border-left:
            1px solid rgba(250,243,223,.16);
    }


    .temper-footer-v4__links-mobile summary {
        position: relative;

        padding: 20px 0;

        list-style: none;

        cursor: pointer;

        color: #5F041D;

        font-size: 16px;

        font-weight: 700;

        text-align: right;
    }


    .temper-footer-v4__links-mobile summary::-webkit-details-marker {
        display: none;
    }


    .temper-footer-v4__links-mobile summary::after {
        content: "+";

        position: absolute;

        left: 0;

        top: 50%;

        transform: translateY(-50%);

        font-size: 18px;
    }


    .temper-footer-v4__links-mobile details[open] summary::after {
        content: "−";
    }


    .temper-footer-v4__accordion-content {
        display: flex;

        flex-direction: column;

        gap: 7px;

        padding-bottom: 18px;
    }


    .temper-footer-v4__accordion-content a {
        color: rgba(250,243,223,.8) !important;

        text-decoration: none !important;

        font-size: 12px;

        line-height: 1.65;

        text-align: right;
    }


    /* SOCIAL */

    .temper-footer-v4__social {
        order: 3;

        width: 100%;

        flex-direction: row;

        justify-content: center;

        gap: 10px;

        padding: 22px 0;
    }


    .temper-footer-v4__social a {
        width: 38px;

        height: 38px;
    }


    /* BOTTOM */

    .temper-footer-v4__bottom {
        order: 4;

        width: 100%;

        margin: 0;

        padding-top: 20px;

        flex-direction: column;

        align-items: center;

        gap: 18px;
    }


    .temper-footer-v4__payments {
        justify-content: center;
    }


    .temper-footer-v4__payments img {
        width: 46px !important;

        height: 29px !important;
    }


    .temper-footer-v4__legal {
        width: 100%;

        text-align: center;
    }


    .temper-footer-v4__legal p {
        font-size: 10px;
    }

}


/* =========================================
   HIDE ORIGINAL SALLA FOOTER
========================================= */

#app > div.app-inner.flex.flex-col.min-h-full > footer {
    display: none !important;
}


/* HIDE ORIGINAL SALLA FOOTER */

#app > div.app-inner.flex.flex-col.min-h-full > footer {
    display: none !important;}

/* =========================================
   TEMPER FOOTER V4 - BURGUNDY ICONS / TEXT / LINES
   Final override based on organized CSS
========================================= */

.temper-footer-v4,
.temper-footer-v4 a,
.temper-footer-v4 p,
.temper-footer-v4 span,
.temper-footer-v4 h1,
.temper-footer-v4 h2,
.temper-footer-v4 h3,
.temper-footer-v4 h4,
.temper-footer-v4 summary {
    color: #5F041D !important;
}

.temper-footer-v4__icon {
    border-color: #5F041D !important;
}

.temper-footer-v4__icon svg {
    fill: #5F041D !important;
    color: #5F041D !important;
    stroke: #5F041D !important;
}

.temper-footer-v4__social a {
    color: #5F041D !important;
    border-color: #5F041D !important;
}

.temper-footer-v4__social svg {
    color: #5F041D !important;
    stroke: #5F041D !important;
}

.temper-footer-v4__social a:nth-child(2) svg,
.temper-footer-v4__social a:nth-child(3) svg,
.temper-footer-v4__social a:nth-child(4) svg {
    fill: #5F041D !important;
    stroke: none !important;
}

.temper-footer-v4__links-desktop,
.temper-footer-v4__links-mobile,
.temper-footer-v4__links-mobile details:first-child,
.temper-footer-v4__bottom {
    border-color: rgba(95, 4, 29, .22) !important;
}

.temper-footer-v4__legal p,
.temper-footer-v4__accordion-content a {
    color: #5F041D !important;
}


div.main-content.md\:sticky.md\:overflow-hidden.top-24.w-full.md\:w-2\/4 > form > salla-product-options { background: #FAF3DF !important; border: 1px solid #5F041D !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: none !important; }