/* =========================================================
   SHADI AL KHALEEJ
   CUSTOM CSS - CLEAN VERSION

   GOLD       : #D39A49
   BACKGROUND : #FAF9F6
   DARK       : #1B2026
========================================================= */


/* =========================================================
   GLOBAL VARIABLES
========================================================= */

:root {
  --shadi-gold: #D39A49;
  --shadi-gold-hover: #BE873C;
  --shadi-gold-light: #E2B36F;

  --shadi-bg: #FAF9F6;
  --shadi-dark: #1B2026;

  --shadi-text: #171717;
  --shadi-muted: #6D6D6D;

  --shadi-radius: 14px;
}


/* =========================================================
   GLOBAL BACKGROUND
========================================================= */

html,
body,
main {
  background-color:
    var(--shadi-bg) !important;
}


/* =========================================================
   PRODUCT AREAS
========================================================= */

.s-products-slider-wrapper,
.s-block--products-slider,
.s-block--products-list,
.s-block--categories,
.s-block--brands,
.products-list,
.products-container {
  background-color:
    transparent !important;
}


/* Product cards */
.s-products-slider-card,
.product-card,
custom-salla-product-card {
  background:
    #ffffff !important;

  border-radius:
    16px !important;

  overflow:
    hidden !important;
}


.product-card__image {
  background:
    #ffffff !important;
}


/* =========================================================
   GLOBAL HEADINGS
========================================================= */

main h1,
main h2,
main h3,
main h4 {
  color:
    var(--shadi-dark);
}


/* =========================================================
   HERO SLIDE
========================================================= */

#advanced-slider-0 .advanced-slider__slide {
  position:
    relative !important;

  overflow:
    hidden !important;
}


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

#advanced-slider-0
.advanced-slider__slide picture {
  position:
    relative !important;

  z-index:
    1 !important;
}


/* =========================================================
   HERO OVERLAY
========================================================= */

#advanced-slider-0 .shadi-hero-overlay {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  display:
    block !important;

  z-index:
    10 !important;

  pointer-events:
    none !important;

  background:
    linear-gradient(
      to top,

      rgba(5,5,6,.86) 0%,

      rgba(7,7,8,.73) 15%,

      rgba(10,10,11,.57) 30%,

      rgba(12,12,13,.40) 44%,

      rgba(14,14,15,.24) 56%,

      rgba(16,16,17,.12) 67%,

      rgba(18,18,19,.05) 77%,

      rgba(20,20,21,.015) 86%,

      rgba(0,0,0,0) 94%,

      rgba(0,0,0,0) 100%
    ) !important;
}


/* =========================================================
   HERO CAPTION
========================================================= */

#advanced-slider-0
.advanced-slider__caption {
  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    25 !important;

  pointer-events:
    none !important;
}


#advanced-slider-0
.advanced-slider__caption
.container {
  position:
    static !important;

  width:
    100% !important;

  max-width:
    100% !important;

  padding:
    0 !important;
}


#advanced-slider-0
.advanced-slider__caption__inner {
  position:
    static !important;

  width:
    100% !important;

  max-width:
    100% !important;
}


/* =========================================================
   HERO TEXT POSITION
   +100px UP ON DESKTOP
========================================================= */

#advanced-slider-0
.advanced-slider__caption__inner__content {
  position:
    absolute !important;

  right:
    17% !important;

  /*
    كان 12%.
    ضفنا 100px عشان الكلام يطلع لفوق.
  */
  bottom:
    calc(12% + 100px) !important;

  left:
    auto !important;

  top:
    auto !important;

  width:
    40% !important;

  max-width:
    620px !important;

  margin:
    0 !important;

  direction:
    rtl !important;

  text-align:
    right !important;

  transform:
    none !important;

  z-index:
    30 !important;

  pointer-events:
    auto !important;
}


/* =========================================================
   HERO TITLE
========================================================= */

#advanced-slider-0
.advanced-slider__caption__inner__content__heading {
  width:
    100% !important;

  margin:
    0 0 10px 0 !important;

  color:
    #ffffff !important;

  direction:
    rtl !important;

  text-align:
    right !important;

  font-size:
    clamp(28px, 2.4vw, 46px) !important;

  line-height:
    1.25 !important;

  font-weight:
    700 !important;

  text-shadow:
    0 3px 16px rgba(0,0,0,.45) !important;
}


/* =========================================================
   HERO DESCRIPTION
========================================================= */

#advanced-slider-0
.advanced-slider__caption__inner__content__text {
  width:
    100% !important;

  margin:
    0 0 16px 0 !important;

  color:
    rgba(255,255,255,.88) !important;

  direction:
    rtl !important;

  text-align:
    right !important;

  font-size:
    14px !important;

  line-height:
    1.8 !important;

  text-shadow:
    0 2px 10px rgba(0,0,0,.40) !important;
}


/* =========================================================
   HERO BUTTON
========================================================= */

#advanced-slider-0
.advanced-slider__caption__inner__content__button {
  position:
    relative !important;

  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-width:
    120px !important;

  min-height:
    44px !important;

  padding:
    11px 22px !important;

  background:
    var(--shadi-gold) !important;

  background-color:
    var(--shadi-gold) !important;

  color:
    var(--shadi-text) !important;

  border:
    1px solid rgba(23,23,23,.06) !important;

  border-radius:
    var(--shadi-radius) !important;

  font-size:
    13px !important;

  font-weight:
    700 !important;

  text-decoration:
    none !important;

  box-shadow:
    0 7px 18px rgba(27,32,38,.16) !important;

  overflow:
    hidden !important;

  opacity:
    1 !important;

  pointer-events:
    auto !important;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}


#advanced-slider-0
.advanced-slider__caption__inner__content__button span {
  position:
    relative !important;

  z-index:
    2 !important;

  color:
    var(--shadi-text) !important;
}


/* Kill default theme button overlay */
#advanced-slider-0
.advanced-slider__caption__inner__content__button::before,

#advanced-slider-0
.advanced-slider__caption__inner__content__button::after {
  content:
    none !important;

  display:
    none !important;
}


/* Hover / focus / active */
#advanced-slider-0
.advanced-slider__caption__inner__content__button:hover,

#advanced-slider-0
.advanced-slider__caption__inner__content__button:focus,

#advanced-slider-0
.advanced-slider__caption__inner__content__button:focus-visible,

#advanced-slider-0
.advanced-slider__caption__inner__content__button:active {
  background:
    var(--shadi-gold-hover) !important;

  background-color:
    var(--shadi-gold-hover) !important;

  color:
    var(--shadi-text) !important;

  border-color:
    transparent !important;

  border-radius:
    var(--shadi-radius) !important;

  outline:
    none !important;

  box-shadow:
    0 10px 24px rgba(27,32,38,.20) !important;

  transform:
    translateY(-1px) !important;
}


/* =========================================================
   HERO HOTSPOTS LAYER
========================================================= */

#advanced-slider-0
.shadi-hotspots {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  z-index:
    50 !important;

  pointer-events:
    none !important;
}


/* =========================================================
   HERO HOTSPOT
========================================================= */

#advanced-slider-0
.shadi-hotspot {
  position:
    absolute !important;

  z-index:
    51 !important;

  transform:
    translate(-50%, -50%) !important;

  pointer-events:
    auto !important;

  text-decoration:
    none !important;
}


/* =========================================================
   HOTSPOT DOT
========================================================= */

#advanced-slider-0
.shadi-hotspot-dot {
  position:
    relative !important;

  display:
    block !important;

  width:
    18px !important;

  height:
    18px !important;

  box-sizing:
    border-box !important;

  border-radius:
    50% !important;

  background:
    rgba(255,255,255,.035) !important;

  -webkit-backdrop-filter:
    blur(10px)
    saturate(150%) !important;

  backdrop-filter:
    blur(10px)
    saturate(150%) !important;

  border:
    1px solid var(--shadi-gold) !important;

  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.22),
    0 1px 5px rgba(0,0,0,.12) !important;

  cursor:
    pointer !important;
}


/* =========================================================
   HOTSPOT PULSE
========================================================= */

#advanced-slider-0
.shadi-hotspot-dot::after {
  content:
    "" !important;

  position:
    absolute !important;

  top:
    50% !important;

  left:
    50% !important;

  width:
    100% !important;

  height:
    100% !important;

  border-radius:
    50% !important;

  border:
    1px solid rgba(211,154,73,.82) !important;

  transform:
    translate(-50%, -50%)
    scale(1);

  animation:
    shadiSafePulse
    1.7s
    ease-out
    infinite !important;

  pointer-events:
    none !important;
}


@keyframes shadiSafePulse {

  0% {
    transform:
      translate(-50%, -50%)
      scale(1);

    opacity:
      .85;
  }


  70% {
    transform:
      translate(-50%, -50%)
      scale(2.3);

    opacity:
      0;
  }


  100% {
    transform:
      translate(-50%, -50%)
      scale(2.3);

    opacity:
      0;
  }

}


/* =========================================================
   HOTSPOT LABEL
========================================================= */

#advanced-slider-0
.shadi-hotspot-label {
  position:
    absolute !important;

  bottom:
    27px !important;

  left:
    50% !important;

  transform:
    translateX(-50%)
    translateY(4px) !important;

  white-space:
    nowrap !important;

  padding:
    7px 11px !important;

  background:
    rgba(15,15,15,.88) !important;

  -webkit-backdrop-filter:
    blur(8px) !important;

  backdrop-filter:
    blur(8px) !important;

  border:
    1px solid rgba(211,154,73,.30) !important;

  border-radius:
    7px !important;

  color:
    #ffffff !important;

  font-size:
    12px !important;

  line-height:
    1.4 !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease !important;
}


#advanced-slider-0
.shadi-hotspot:hover
.shadi-hotspot-label {
  opacity:
    1 !important;

  visibility:
    visible !important;

  transform:
    translateX(-50%)
    translateY(0) !important;
}


/* =========================================================
   PROJECTOR LABEL
   يظهر تحت النقطة عشان مايتقصش
========================================================= */

#advanced-slider-0
.shadi-hotspot--label-down
.shadi-hotspot-label {
  top:
    27px !important;

  bottom:
    auto !important;

  transform:
    translateX(-50%)
    translateY(-4px) !important;
}


#advanced-slider-0
.shadi-hotspot--label-down:hover
.shadi-hotspot-label {
  transform:
    translateX(-50%)
    translateY(0) !important;
}


/* =========================================================
   ABOUT SECTION
========================================================= */

#about-3,
section.s-block--about,
section.s-block--about.s-block--full-bg {
  background:
    var(--shadi-dark) !important;

  background-color:
    var(--shadi-dark) !important;

  padding-top:
    85px !important;

  padding-bottom:
    85px !important;
}


/* =========================================================
   ABOUT LAYOUT
========================================================= */

#about-3 .about__row,
section.s-block--about .about__row {
  align-items:
    stretch !important;

  gap:
    55px !important;
}


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

#about-3 .about__content,
section.s-block--about .about__content {
  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  direction:
    rtl !important;

  text-align:
    right !important;

  color:
    #ffffff !important;
}


/* =========================================================
   ABOUT SMALL TITLE
========================================================= */

#about-3 .about__subtitle,
section.s-block--about .about__subtitle {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  margin:
    0 0 10px !important;

  color:
    var(--shadi-gold) !important;

  font-size:
    14px !important;

  font-weight:
    500 !important;
}


/* =========================================================
   ABOUT MAIN TITLE
========================================================= */

#about-3 .about__title,
section.s-block--about .about__title {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  margin:
    0 0 18px !important;

  color:
    #ffffff !important;

  font-size:
    clamp(34px, 3vw, 50px) !important;

  line-height:
    1.25 !important;

  font-weight:
    500 !important;
}


/* =========================================================
   ABOUT DESCRIPTION
========================================================= */

#about-3 .about__description,
section.s-block--about .about__description {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  margin:
    0 0 30px !important;

  color:
    rgba(255,255,255,.62) !important;

  font-size:
    14px !important;

  line-height:
    2 !important;
}


/* =========================================================
   ABOUT MEDIA
========================================================= */

#about-3 .about__media,
section.s-block--about .about__media {
  display:
    flex !important;

  align-self:
    stretch !important;

  min-height:
    620px !important;

  overflow:
    hidden !important;
}


#about-3 .about__media img,
#about-3 .about__video,
section.s-block--about .about__media img,
section.s-block--about .about__video {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  min-height:
    620px !important;

  max-height:
    none !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  border-radius:
    2px !important;
}


/* =========================================================
   ABOUT EXTRA CONTENT
========================================================= */

#about-3 .shadi-about-extra,
section.s-block--about .shadi-about-extra {
  display:
    block !important;

  visibility:
    visible !important;

  opacity:
    1 !important;

  width:
    100% !important;
}


#about-3 .shadi-about-steps,
section.s-block--about .shadi-about-steps {
  width:
    100% !important;

  border-top:
    1px solid rgba(255,255,255,.14) !important;
}


/* =========================================================
   ABOUT STEP
========================================================= */

#about-3 .shadi-about-step,
section.s-block--about .shadi-about-step {
  display:
    flex !important;

  flex-direction:
    row !important;

  align-items:
    flex-start !important;

  gap:
    18px !important;

  width:
    100% !important;

  padding:
    18px 0 !important;

  border-bottom:
    1px solid rgba(255,255,255,.14) !important;
}


#about-3 .shadi-about-number,
section.s-block--about .shadi-about-number {
  flex:
    0 0 28px !important;

  color:
    var(--shadi-gold) !important;

  font-size:
    21px !important;

  line-height:
    1.35 !important;

  font-weight:
    400 !important;
}


#about-3 .shadi-about-step-content,
section.s-block--about .shadi-about-step-content {
  flex:
    1 !important;
}


#about-3 .shadi-about-step-content h4,
section.s-block--about .shadi-about-step-content h4 {
  margin:
    0 0 4px !important;

  color:
    #ffffff !important;

  font-size:
    17px !important;

  line-height:
    1.45 !important;

  font-weight:
    700 !important;
}


#about-3 .shadi-about-step-content p,
section.s-block--about .shadi-about-step-content p {
  margin:
    0 !important;

  color:
    rgba(255,255,255,.60) !important;

  font-size:
    13px !important;

  line-height:
    1.8 !important;
}


/* =========================================================
   ABOUT ACTIONS
========================================================= */

#about-3 .shadi-about-actions,
section.s-block--about .shadi-about-actions {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    24px !important;

  margin-top:
    34px !important;
}


/* =========================================================
   ABOUT BUTTON
========================================================= */

#about-3 .shadi-about-btn,
section.s-block--about .shadi-about-btn {
  display:
    inline-flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-height:
    50px !important;

  padding:
    13px 26px !important;

  background:
    var(--shadi-gold) !important;

  color:
    var(--shadi-text) !important;

  border-radius:
    var(--shadi-radius) !important;

  text-decoration:
    none !important;

  font-size:
    14px !important;

  font-weight:
    700 !important;

  transition:
    .2s ease !important;
}


#about-3 .shadi-about-btn:hover,
section.s-block--about .shadi-about-btn:hover {
  background:
    var(--shadi-gold-hover) !important;

  transform:
    translateY(-1px) !important;
}


/* =========================================================
   ABOUT WHATSAPP
========================================================= */

#about-3 .shadi-about-whatsapp,
section.s-block--about .shadi-about-whatsapp {
  position:
    relative !important;

  color:
    #ffffff !important;

  font-size:
    13px !important;

  text-decoration:
    none !important;

  padding-bottom:
    5px !important;
}


#about-3 .shadi-about-whatsapp::after,
section.s-block--about .shadi-about-whatsapp::after {
  content:
    "" !important;

  position:
    absolute !important;

  right:
    0 !important;

  left:
    0 !important;

  bottom:
    0 !important;

  height:
    1px !important;

  background:
    var(--shadi-gold) !important;
}


/* =========================================================
   GLOBAL PRIMARY BUTTONS
========================================================= */

main .btn-primary,
main .btn--primary,

main .s-button-element:not(.s-button-outline):not(.s-button-icon),

main a.s-button-element:not(.s-button-outline):not(.s-button-icon),

main button.s-button-element:not(.s-button-outline):not(.s-button-icon) {
  background:
    var(--shadi-gold) !important;

  background-color:
    var(--shadi-gold) !important;

  color:
    var(--shadi-text) !important;

  border-radius:
    var(--shadi-radius) !important;

  border:
    1px solid rgba(23,23,23,.06) !important;

  font-weight:
    700 !important;

  transition:
    .2s ease !important;
}


main .btn-primary:hover,
main .btn--primary:hover,

main .s-button-element:not(.s-button-outline):not(.s-button-icon):hover {
  background:
    var(--shadi-gold-hover) !important;

  background-color:
    var(--shadi-gold-hover) !important;

  color:
    var(--shadi-text) !important;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.s-slider-prev,
.s-slider-next,
.swiper-button-prev,
.swiper-button-next {
  border:
    1px solid rgba(211,154,73,.45) !important;

  border-radius:
    50% !important;

  background:
    #ffffff !important;

  color:
    var(--shadi-dark) !important;

  transition:
    .2s ease !important;
}


.s-slider-prev:hover,
.s-slider-next:hover,
.swiper-button-prev:hover,
.swiper-button-next:hover {
  background:
    var(--shadi-gold) !important;

  color:
    var(--shadi-text) !important;

  border-color:
    var(--shadi-gold) !important;
}


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

.text-primary {
  color:
    var(--shadi-gold) !important;
}


/* =========================================================
   SELECTION
========================================================= */

::selection {
  background:
    var(--shadi-gold);

  color:
    var(--shadi-text);
}


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

@media (max-width: 991px) {

  #about-3,
  section.s-block--about {
    padding-top:
      60px !important;

    padding-bottom:
      60px !important;
  }


  #about-3 .about__row,
  section.s-block--about .about__row {
    gap:
      35px !important;
  }


  #about-3 .about__media,
  section.s-block--about .about__media {
    min-height:
      500px !important;
  }


  #about-3 .about__media img,
  #about-3 .about__video,
  section.s-block--about .about__media img,
  section.s-block--about .about__video {
    min-height:
      500px !important;
  }

}


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

@media (max-width: 768px) {

  /*
    على الموبايل ما نطلعش الكلام 100px
    عشان ما يخرجش من البنر.
  */

  #advanced-slider-0
  .advanced-slider__caption__inner__content {
    right:
      7% !important;

    left:
      7% !important;

    bottom:
      calc(8% + 40px) !important;

    width:
      auto !important;

    max-width:
      none !important;
  }


  #advanced-slider-0
  .advanced-slider__caption__inner__content__heading {
    font-size:
      24px !important;
  }


  #advanced-slider-0
  .advanced-slider__caption__inner__content__text {
    font-size:
      12px !important;
  }


  #advanced-slider-0 .shadi-hotspot-dot {
    width:
      16px !important;

    height:
      16px !important;
  }


  #advanced-slider-0 .shadi-hero-overlay {
    background:
      linear-gradient(
        to top,

        rgba(5,5,6,.92) 0%,

        rgba(7,7,8,.80) 18%,

        rgba(10,10,11,.64) 34%,

        rgba(12,12,13,.45) 49%,

        rgba(14,14,15,.27) 62%,

        rgba(16,16,17,.13) 73%,

        rgba(18,18,19,.05) 83%,

        rgba(0,0,0,0) 94%,

        rgba(0,0,0,0) 100%
      ) !important;
  }

}


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

@media (max-width: 639px) {

  #about-3,
  section.s-block--about {
    padding-top:
      45px !important;

    padding-bottom:
      45px !important;
  }


  #about-3 .about__row,
  section.s-block--about .about__row {
    align-items:
      stretch !important;

    gap:
      30px !important;
  }


  #about-3 .about__title,
  section.s-block--about .about__title {
    font-size:
      30px !important;
  }


  #about-3 .about__description,
  section.s-block--about .about__description {
    font-size:
      13px !important;

    line-height:
      1.9 !important;
  }


  #about-3 .about__media,
  section.s-block--about .about__media {
    min-height:
      380px !important;
  }


  #about-3 .about__media img,
  #about-3 .about__video,
  section.s-block--about .about__media img,
  section.s-block--about .about__video {
    min-height:
      380px !important;
  }


  #about-3 .shadi-about-step,
  section.s-block--about .shadi-about-step {
    gap:
      14px !important;

    padding:
      16px 0 !important;
  }


  #about-3 .shadi-about-actions,
  section.s-block--about .shadi-about-actions {
    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    gap:
      18px !important;
  }


  #about-3 .shadi-about-btn,
  section.s-block--about .shadi-about-btn {
    width:
      100% !important;
  }

}






















/* =========================================================
   ADVANCED SLIDER 2
   TEXT + BUTTON BRAND STYLE
   Scoped ONLY to #advanced-slider-2
========================================================= */


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

#advanced-slider-2
.advanced-slider__caption__inner__content {
  direction: rtl !important;
  text-align: right !important;
}


/* =========================================================
   TITLE
========================================================= */

#advanced-slider-2
.advanced-slider__caption__inner__content__heading {

  color: #ffffff !important;

  font-size: clamp(30px, 3vw, 48px) !important;

  line-height: 1.25 !important;

  font-weight: 700 !important;

  margin: 0 0 12px 0 !important;

  text-align: right !important;

  text-shadow:
    0 3px 16px rgba(0,0,0,.55) !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

#advanced-slider-2
.advanced-slider__caption__inner__content__text {

  color: rgba(255,255,255,.82) !important;

  font-size: 15px !important;

  line-height: 1.9 !important;

  font-weight: 400 !important;

  margin: 0 0 22px 0 !important;

  text-align: right !important;

  text-shadow:
    0 2px 10px rgba(0,0,0,.45) !important;
}


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

#advanced-slider-2
.advanced-slider__caption__inner__content__button {

  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 120px !important;
  min-height: 44px !important;

  padding: 11px 22px !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

  color: #171717 !important;

  border:
    1px solid rgba(23,23,23,.06) !important;

  border-radius: 14px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  box-shadow:
    0 7px 18px rgba(0,0,0,.20) !important;

  overflow: hidden !important;

  opacity: 1 !important;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}


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

#advanced-slider-2
.advanced-slider__caption__inner__content__button span {

  position: relative !important;

  z-index: 2 !important;

  color: #171717 !important;
}


/* =========================================================
   REMOVE THEME BUTTON OVERLAYS
========================================================= */

#advanced-slider-2
.advanced-slider__caption__inner__content__button::before,

#advanced-slider-2
.advanced-slider__caption__inner__content__button::after {

  content: none !important;

  display: none !important;
}


/* =========================================================
   BUTTON HOVER / FOCUS / ACTIVE
========================================================= */

#advanced-slider-2
.advanced-slider__caption__inner__content__button:hover,

#advanced-slider-2
.advanced-slider__caption__inner__content__button:focus,

#advanced-slider-2
.advanced-slider__caption__inner__content__button:focus-visible,

#advanced-slider-2
.advanced-slider__caption__inner__content__button:active {

  background: #BE873C !important;
  background-color: #BE873C !important;

  color: #171717 !important;

  border-color: transparent !important;

  border-radius: 14px !important;

  outline: none !important;

  box-shadow:
    0 10px 24px rgba(0,0,0,.26) !important;

  transform: translateY(-1px) !important;
}


#advanced-slider-2
.advanced-slider__caption__inner__content__button:hover span,

#advanced-slider-2
.advanced-slider__caption__inner__content__button:focus span,

#advanced-slider-2
.advanced-slider__caption__inner__content__button:active span {

  color: #171717 !important;
}


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

@media (max-width: 768px) {

  #advanced-slider-2
  .advanced-slider__caption__inner__content__heading {

    font-size: 26px !important;
  }


  #advanced-slider-2
  .advanced-slider__caption__inner__content__text {

    font-size: 13px !important;

    line-height: 1.8 !important;
  }


  #advanced-slider-2
  .advanced-slider__caption__inner__content__button {

    min-width: 110px !important;

    min-height: 42px !important;

    padding: 10px 20px !important;

    border-radius: 12px !important;
  }

}











/* =========================================================
   ADVANCED SLIDER 2
   SAME HEIGHT / RATIO AS HERO
========================================================= */

#advanced-slider-2 {
  width: 100% !important;
}


/* نفس نسبة ارتفاع الهيرو الرئيسي */
#advanced-slider-2 .advanced-slider__slide {
  position: relative !important;

  width: 100% !important;

  aspect-ratio: 2.18 / 1 !important;

  height: auto !important;

  min-height: 0 !important;

  overflow: hidden !important;
}


/* الصورة تملأ البنر بالكامل */
#advanced-slider-2 .advanced-slider__image {
  position: absolute !important;

  inset: 0 !important;

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

  max-height: none !important;

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


/* الـCaption يفضل فوق الصورة */
#advanced-slider-2 .advanced-slider__caption {
  position: absolute !important;

  inset: 0 !important;

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

  z-index: 5 !important;
}


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

@media (max-width: 768px) {

  #advanced-slider-2 .advanced-slider__slide {
    /*
      على الموبايل نخليه 16:9
      لأن المساحة 2.18:1 هتبقى قصيرة جدًا.
    */
    aspect-ratio: 16 / 9 !important;
  }

}








































/* =========================================================
   SHADI - CUSTOM PRODUCT SLIDER 0
   SAFE / SCOPED ONLY TO THIS SLIDER
========================================================= */


/* =========================================================
   SLIDER AREA
========================================================= */

#custom-products-slider-0 {
  background: transparent !important;
}


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

#custom-products-slider-0 .product-card {
  background: #ffffff !important;

  border: 1px solid rgba(27, 32, 38, 0.08) !important;

  border-radius: 18px !important;

  overflow: hidden !important;

  box-shadow: 0 4px 18px rgba(27, 32, 38, 0.05) !important;

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


#custom-products-slider-0 .product-card:hover {
  transform: translateY(-4px) !important;

  border-color: rgba(211, 154, 73, 0.30) !important;

  box-shadow: 0 14px 30px rgba(27, 32, 38, 0.11) !important;
}


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

#custom-products-slider-0 .product-card__image {
  position: relative !important;

  height: 250px !important;

  background: #ffffff !important;

  overflow: hidden !important;
}


#custom-products-slider-0 .product-card__image > a {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

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


#custom-products-slider-0 .product-card__image img.main-image {
  width: 100% !important;
  height: 100% !important;

  padding: 22px !important;

  box-sizing: border-box !important;

  object-fit: contain !important;
  object-position: center !important;

  opacity: 1 !important;

  transform: scale(.95) !important;

  transition:
    transform .25s ease,
    opacity .25s ease !important;
}


#custom-products-slider-0 .product-card:hover
.product-card__image img.main-image {
  transform: scale(1) !important;

  opacity: 1 !important;
}


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

#custom-products-slider-0 .product-card__content {
  background: #ffffff !important;

  padding: 16px 16px 18px !important;
}


/* =========================================================
   TITLE
========================================================= */

#custom-products-slider-0 .product-card__title {
  min-height: 48px !important;

  text-align: center !important;

  margin-bottom: 8px !important;
}


#custom-products-slider-0 .product-card__title a {
  display: -webkit-box !important;

  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;

  overflow: hidden !important;

  color: #1B2026 !important;

  font-size: 14px !important;

  font-weight: 600 !important;

  line-height: 1.55 !important;

  text-decoration: none !important;
}


#custom-products-slider-0 .product-card__title a:hover {
  color: #D39A49 !important;
}


/* =========================================================
   PRICE
========================================================= */

#custom-products-slider-0 .product-card__price {
  justify-content: center !important;

  text-align: center !important;
}


#custom-products-slider-0 .product-card__price .total-price {
  color: #D39A49 !important;

  font-size: 18px !important;

  font-weight: 700 !important;
}


#custom-products-slider-0 .product-card__price .total-price i {
  color: #D39A49 !important;
}


#custom-products-slider-0 .product-card__price .before-price {
  color: #999999 !important;

  font-size: 13px !important;
}


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

#custom-products-slider-0
.product-card__addToCart
.s-button-element {

  width: 100% !important;

  min-height: 44px !important;

  padding: 10px 18px !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

  color: #171717 !important;

  border: none !important;

  border-radius: 14px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  box-shadow: 0 6px 16px rgba(27, 32, 38, .12) !important;

  transition:
    background-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease !important;
}


#custom-products-slider-0
.product-card__addToCart
.s-button-element
.s-button-text,

#custom-products-slider-0
.product-card__addToCart
.s-button-element i {

  color: #171717 !important;
}


#custom-products-slider-0
.product-card__addToCart
.s-button-element:hover {

  background: #BE873C !important;
  background-color: #BE873C !important;

  color: #171717 !important;

  transform: translateY(-1px) !important;

  box-shadow: 0 9px 20px rgba(27, 32, 38, .17) !important;
}


/* =========================================================
   WISHLIST + QUICK VIEW
========================================================= */

#custom-products-slider-0
.product-card__actions
.s-button-element,

#custom-products-slider-0
.product-card__buttons
.s-button-element {

  width: 42px !important;
  min-width: 42px !important;

  height: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  background: rgba(255, 255, 255, .96) !important;

  color: #1B2026 !important;

  border: 1px solid rgba(211, 154, 73, .40) !important;

  border-radius: 50% !important;

  box-shadow: 0 6px 15px rgba(27, 32, 38, .10) !important;
}


#custom-products-slider-0
.product-card__actions
.s-button-element:hover,

#custom-products-slider-0
.product-card__buttons
.s-button-element:hover {

  background: #D39A49 !important;

  color: #171717 !important;

  border-color: #D39A49 !important;
}


#custom-products-slider-0
.product-card__actions
.s-button-element i,

#custom-products-slider-0
.product-card__buttons
.s-button-element i {

  color: inherit !important;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

#custom-products-slider-0 .s-slider-nav-arrow {

  width: 42px !important;
  height: 42px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  background: #ffffff !important;

  color: #1B2026 !important;

  border: 1px solid rgba(211, 154, 73, .45) !important;

  border-radius: 50% !important;

  box-shadow: 0 5px 16px rgba(27, 32, 38, .08) !important;

  transition: .2s ease !important;
}


#custom-products-slider-0 .s-slider-nav-arrow:hover {

  background: #D39A49 !important;

  color: #171717 !important;

  border-color: #D39A49 !important;
}


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

@media (max-width: 991px) {

  #custom-products-slider-0 .product-card__image {
    height: 220px !important;
  }

}


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

@media (max-width: 640px) {

  #custom-products-slider-0 .product-card {

    border-radius: 14px !important;
  }


  #custom-products-slider-0 .product-card__image {

    height: 180px !important;
  }


  #custom-products-slider-0 .product-card__image img.main-image {

    padding: 14px !important;
  }


  #custom-products-slider-0 .product-card__content {

    padding: 12px !important;
  }


  #custom-products-slider-0 .product-card__title a {

    font-size: 13px !important;
  }


  #custom-products-slider-0
  .product-card__price
  .total-price {

    font-size: 16px !important;
  }

}




/* =========================================================
   MOBILE - CATEGORY IMAGE CARDS HEIGHT
   Only images grid section: 1134066148
========================================================= */

@media (max-width: 639px) {

  section[component-id="1134066148"]
  .images-grid__item {
    height: 160px !important;
    min-height: 160px !important;
  }

  section[component-id="1134066148"]
  .images-grid__item img {
    width: 100% !important;
    height: 100% !important;

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

}

















/* =========================================================
   SHADI - PRODUCT LIST CARDS
   Search + Category Pages
   Brand Gold : #D39A49
   Hover Gold : #BE873C
   Background : #FAF9F6
   Dark       : #1B2026
========================================================= */


/* =========================================================
   PRODUCT LIST AREA
========================================================= */

salla-products-list {
  --shadi-gold: #D39A49;
  --shadi-gold-hover: #BE873C;
  --shadi-dark: #1B2026;
}


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

salla-products-list .product-card {
  position: relative !important;

  background: #ffffff !important;

  border: 1px solid rgba(211, 154, 73, 0.32) !important;

  border-radius: 16px !important;

  overflow: hidden !important;

  box-shadow:
    0 4px 16px rgba(27, 32, 38, 0.05) !important;

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


/* Hover */
salla-products-list .product-card:hover {
  transform: translateY(-3px) !important;

  border-color: #D39A49 !important;

  box-shadow:
    0 12px 28px rgba(27, 32, 38, 0.10) !important;
}


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

salla-products-list .product-card__image {
  position: relative !important;

  width: 100% !important;

  height: 285px !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;

  overflow: hidden !important;

  border-radius: 15px 15px 0 0 !important;
}


/* Image link */
salla-products-list .product-card__image > a {
  display: block !important;

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

  margin: 0 !important;
  padding: 0 !important;
}


/* Actual image */
salla-products-list .product-card__image img,
salla-products-list .product-card__image .main-image {
  display: block !important;

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

  margin: 0 !important;
  padding: 0 !important;

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

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

  opacity: 1 !important;

  transform: scale(1) !important;

  transition:
    transform .3s ease,
    opacity .3s ease !important;
}


/* subtle image hover */
salla-products-list .product-card:hover
.product-card__image img.main-image {
  transform: scale(1.025) !important;

  opacity: 1 !important;
}


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

salla-products-list .product-card__content {
  background: #ffffff !important;

  padding: 16px 15px 18px !important;
}


salla-products-list .product-card__content-wrapper {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 8px !important;
}


/* =========================================================
   TITLE
========================================================= */

salla-products-list .product-card__title {
  width: 100% !important;

  min-height: 24px !important;

  margin: 0 !important;

  text-align: center !important;
}


salla-products-list .product-card__title a {
  color: #1B2026 !important;

  font-size: 14px !important;

  line-height: 1.55 !important;

  font-weight: 600 !important;

  text-decoration: none !important;

  transition: color .2s ease !important;
}


salla-products-list .product-card__title a:hover {
  color: #D39A49 !important;
}


/* =========================================================
   PRICE
========================================================= */

salla-products-list .product-card__price {
  width: 100% !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  margin: 2px 0 0 !important;
}


/* Normal / current price */
salla-products-list
.product-card__price
.total-price {
  color: #D39A49 !important;

  font-size: 18px !important;

  line-height: 1.4 !important;

  font-weight: 700 !important;
}


/* Saudi Riyal icon */
salla-products-list
.product-card__price
.total-price i {
  color: #D39A49 !important;
}


/* Old price */
salla-products-list
.product-card__price
.before-price {
  color: #8D8D8D !important;

  font-size: 13px !important;

  opacity: .75 !important;
}


/* =========================================================
   QUICK VIEW + WISHLIST
========================================================= */

salla-products-list
.product-card__actions
.s-button-element,

salla-products-list
.product-card__buttons
.s-button-element {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 42px !important;
  min-width: 42px !important;

  height: 42px !important;
  min-height: 42px !important;

  padding: 0 !important;

  background: rgba(255, 255, 255, .97) !important;

  color: #1B2026 !important;

  border: 1px solid rgba(211, 154, 73, .45) !important;

  border-radius: 50% !important;

  box-shadow:
    0 5px 14px rgba(27, 32, 38, .10) !important;

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


salla-products-list
.product-card__actions
.s-button-element:hover,

salla-products-list
.product-card__buttons
.s-button-element:hover {
  background: #D39A49 !important;

  color: #171717 !important;

  border-color: #D39A49 !important;

  transform: translateY(-1px) !important;
}


salla-products-list
.product-card__actions
.s-button-element i,

salla-products-list
.product-card__buttons
.s-button-element i {
  color: inherit !important;
}


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

salla-products-list
.product-card__addToCart
.s-button-element {
  width: 100% !important;

  min-height: 42px !important;

  padding: 10px 18px !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

  color: #171717 !important;

  border: none !important;

  border-radius: 12px !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  box-shadow:
    0 5px 14px rgba(27, 32, 38, .12) !important;

  transition:
    background-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease !important;
}


salla-products-list
.product-card__addToCart
.s-button-element
.s-button-text,

salla-products-list
.product-card__addToCart
.s-button-element i {
  color: #171717 !important;
}


salla-products-list
.product-card__addToCart
.s-button-element:hover {
  background: #BE873C !important;
  background-color: #BE873C !important;

  color: #171717 !important;

  transform: translateY(-1px) !important;

  box-shadow:
    0 8px 18px rgba(27, 32, 38, .18) !important;
}


/* =========================================================
   REMOVE THEME BUTTON OVERLAYS
========================================================= */

salla-products-list
.product-card__addToCart
.s-button-element::before,

salla-products-list
.product-card__addToCart
.s-button-element::after {
  content: none !important;

  display: none !important;
}


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

@media (max-width: 640px) {

  salla-products-list .product-card {
    border-radius: 14px !important;
  }


  salla-products-list .product-card__image {
    height: 220px !important;

    border-radius: 13px 13px 0 0 !important;
  }


  salla-products-list .product-card__image img,
  salla-products-list .product-card__image .main-image {
    border-radius: 13px 13px 0 0 !important;
  }


  salla-products-list .product-card__content {
    padding: 13px 12px 15px !important;
  }


  salla-products-list .product-card__title a {
    font-size: 13px !important;
  }


  salla-products-list
  .product-card__price
  .total-price {
    font-size: 16px !important;
  }


  salla-products-list
  .product-card__actions
  .s-button-element,

  salla-products-list
  .product-card__buttons
  .s-button-element {
    width: 38px !important;
    min-width: 38px !important;

    height: 38px !important;
    min-height: 38px !important;
  }

}








/* =========================================================
   HERO HOTSPOTS - MOBILE POSITIONS ONLY
   Desktop positions stay unchanged
========================================================= */

@media (max-width: 639px) {

  /* -------------------------------------------------------
     1 - Acoustic Treatment
     على العازل الأسود أقصى الشمال في صورة الموبايل
  ------------------------------------------------------- */

  #advanced-slider-0
  .shadi-hotspots
  .shadi-hotspot:nth-child(1) {
    left: 6% !important;
    top: 33% !important;
  }


  /* -------------------------------------------------------
     2 - Home Cinema
     داخل شاشة السينما / NETFLIX
  ------------------------------------------------------- */

  #advanced-slider-0
  .shadi-hotspots
  .shadi-hotspot:nth-child(2) {
    left: 43% !important;
    top: 39.5% !important;
  }


  /* -------------------------------------------------------
     3 - Subwoofer
     السبووفر الأسود شمال السنتر
  ------------------------------------------------------- */

  #advanced-slider-0
  .shadi-hotspots
  .shadi-hotspot:nth-child(3) {
    left: 30.5% !important;
    top: 48% !important;
  }


  /* -------------------------------------------------------
     4 - Amplifiers & Receivers
     الراك الأسود الموجود شمال الصورة
  ------------------------------------------------------- */

  #advanced-slider-0
  .shadi-hotspots
  .shadi-hotspot:nth-child(4) {
    left: 15% !important;
    top: 40% !important;
  }


  /* -------------------------------------------------------
     5 - Projector
     البروجيكتور أعلى منتصف الصورة
  ------------------------------------------------------- */

  #advanced-slider-0
  .shadi-hotspots
  .shadi-hotspot:nth-child(5) {
    left: 48.5% !important;
    top: 13% !important;
  }

}



/* =========================================================
   HERO MOBILE TEXT - MOVE DOWN
========================================================= */

@media (max-width: 639px) {

  #advanced-slider-0
  .advanced-slider__caption__inner__content {

    bottom: 5% !important;
  }

}












/* =========================================================
   FIX ONLY: ADVANCED SLIDER 2 - MOBILE
   لا يؤثر على الهيرو أو الديسكتوب
========================================================= */

@media (max-width: 639px) {

  /* السلايدر نفسه */
  #advanced-slider-2 {
    width: 100% !important;
  }


  /* مهم بسبب Swiper Auto Height */
  #advanced-slider-2 .swiper-wrapper {
    height: 285px !important;
  }


  /* كل Slide */
  #advanced-slider-2 .advanced-slider__slide {
    width: 100% !important;

    height: 285px !important;
    min-height: 285px !important;

    aspect-ratio: auto !important;

    position: relative !important;

    overflow: hidden !important;
  }


  /* الصورة */
  #advanced-slider-2 .advanced-slider__image {
    position: absolute !important;

    inset: 0 !important;

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

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

    max-height: none !important;
  }


  /* طبقة الكلام */
  #advanced-slider-2 .advanced-slider__caption {
    position: absolute !important;

    inset: 0 !important;

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

    z-index: 5 !important;
  }


  /* الـContainer */
  #advanced-slider-2
  .advanced-slider__caption
  .container {
    position: relative !important;

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

    max-width: none !important;

    padding: 0 !important;
  }


  /* Alignment wrapper */
  #advanced-slider-2
  .advanced-slider__caption__inner {
    position: static !important;

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


  /* المحتوى */
  #advanced-slider-2
  .advanced-slider__caption__inner__content {
    position: absolute !important;

    top: 50% !important;
    right: 6% !important;
    left: auto !important;
    bottom: auto !important;

    width: 72% !important;
    max-width: 270px !important;

    margin: 0 !important;

    transform: translateY(-50%) !important;

    direction: rtl !important;
    text-align: right !important;
  }


  /* العنوان */
  #advanced-slider-2
  .advanced-slider__caption__inner__content__heading {
    margin: 0 0 8px 0 !important;

    color: #ffffff !important;

    font-size: 22px !important;
    line-height: 1.3 !important;

    font-weight: 700 !important;

    text-align: right !important;
  }


  /* الوصف */
  #advanced-slider-2
  .advanced-slider__caption__inner__content__text {
    margin: 0 0 14px 0 !important;

    color: rgba(255,255,255,.84) !important;

    font-size: 11.5px !important;
    line-height: 1.7 !important;

    text-align: right !important;
  }


  /* الزرار */
  #advanced-slider-2
  .advanced-slider__caption__inner__content__button {
    min-width: 105px !important;
    min-height: 38px !important;

    padding: 8px 16px !important;

    background: #D39A49 !important;
    background-color: #D39A49 !important;

    border-radius: 12px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
  }

}










































/* =========================================================
   REMOVE GREY BOX BEHIND ADD TO CART
   Home slider + Product/Search pages
========================================================= */

/* الهوم بيدج */
#custom-products-slider-0 .product-card__addToCart,

/* صفحات التصنيفات / البحث */
salla-products-list .product-card__addToCart {
  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;

  border: none !important;

  outline: none !important;

  padding: 0 !important;
}


/* إزالة أي طبقة من الثيم خلف الزرار */
#custom-products-slider-0 .product-card__addToCart::before,
#custom-products-slider-0 .product-card__addToCart::after,

salla-products-list .product-card__addToCart::before,
salla-products-list .product-card__addToCart::after {
  content: none !important;
  display: none !important;

  background: transparent !important;
  box-shadow: none !important;
}


/* الزرار نفسه يفضل بالهوية */
#custom-products-slider-0
.product-card__addToCart
.s-button-element,

salla-products-list
.product-card__addToCart
.s-button-element {
  background: #D39A49 !important;
  background-color: #D39A49 !important;

  box-shadow: none !important;

  border: none !important;
}


/* Hover */
#custom-products-slider-0
.product-card__addToCart
.s-button-element:hover,

salla-products-list
.product-card__addToCart
.s-button-element:hover {
  background: #BE873C !important;
  background-color: #BE873C !important;

  box-shadow: none !important;
}

































/* =========================================================
   FIX ADD TO CART GREY EDGE
========================================================= */

/* Wrapper الأساسي */
.product-card .product-card__addToCart {
  background: #D39A49 !important;
  background-color: #D39A49 !important;

  padding: 0 !important;
  margin: 0 !important;

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

  box-shadow: none !important;

  overflow: hidden !important;
}


/* Salla custom element */
.product-card
.product-card__addToCart
salla-add-product-button,

.product-card
.product-card__addToCart
salla-add-product-button > div,

.product-card
.product-card__addToCart
salla-button {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

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

  box-shadow: none !important;
}


/* الزر الحقيقي */
.product-card
.product-card__addToCart
.s-button-element {
  display: flex !important;

  width: 100% !important;
  min-width: 100% !important;

  min-height: 42px !important;

  margin: 0 !important;
  padding: 10px 16px !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

  color: #171717 !important;

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

  outline: 0 !important;

  box-shadow: none !important;
}


/* النص والأيقونة */
.product-card
.product-card__addToCart
.s-button-text,

.product-card
.product-card__addToCart
.s-button-element i {
  color: #171717 !important;
}


/* Hover */
.product-card
.product-card__addToCart
.s-button-element:hover {
  background: #BE873C !important;
  background-color: #BE873C !important;

  color: #171717 !important;

  border-radius: 0 !important;

  box-shadow: none !important;
}















































/* =========================================================
   SHADI AL KHALEEJ - FAQ V2
   ONLY: component-id="183887328"

   Dark       : #1B2026
   Brand Gold : #D39A49
========================================================= */


/* =========================================================
   SECTION BACKGROUND
========================================================= */

section[component-id="183887328"] {
  --faq-bg: none !important;

  position: relative !important;

  background-color: #1B2026 !important;

  background-image:
    radial-gradient(
      circle at 8% 95%,
      rgba(211,154,73,.16) 0%,
      rgba(211,154,73,.07) 22%,
      transparent 46%
    ),
    radial-gradient(
      circle at 92% 5%,
      rgba(211,154,73,.10) 0%,
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #101720 0%,
      #17202A 45%,
      #1B2026 72%,
      #20252B 100%
    ) !important;

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

  padding-top: 65px !important;
  padding-bottom: 72px !important;

  overflow: hidden !important;
}


/* نشيل Pattern سيليا القديم فقط */
section[component-id="183887328"]::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   CONTAINER
========================================================= */

section[component-id="183887328"] > .container {
  position: relative !important;
  z-index: 2 !important;
}


/* =========================================================
   TITLE
========================================================= */

section[component-id="183887328"] .faq__title {
  margin: 0 !important;

  color: #FFFFFF !important;

  font-size: clamp(28px, 2.6vw, 42px) !important;
  line-height: 1.3 !important;

  font-weight: 700 !important;

  text-shadow:
    0 3px 16px rgba(0,0,0,.22) !important;
}


/* =========================================================
   SUBTITLE
========================================================= */

section[component-id="183887328"] .faq__subtitle {
  margin-top: 8px !important;

  color: rgba(255,255,255,.62) !important;

  font-size: 15px !important;
  line-height: 1.8 !important;

  font-weight: 400 !important;
}


/* =========================================================
   GOLD LINE
========================================================= */

section[component-id="183887328"] .home-block-line {
  width: 72px !important;

  margin-top: 14px !important;
  margin-bottom: 34px !important;

  border-color: #D39A49 !important;

  opacity: .95 !important;
}


/* =========================================================
   FAQ GRID
========================================================= */

section[component-id="183887328"] .faq__grid {
  gap: 18px !important;

  align-items: start !important;
}


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

section[component-id="183887328"] .single-faq {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background:
    linear-gradient(
      135deg,
      rgba(39,48,59,.94) 0%,
      rgba(31,40,50,.96) 100%
    ) !important;

  border:
    1px solid rgba(211,154,73,.62) !important;

  border-radius: 18px !important;

  overflow: hidden !important;

  box-shadow:
    0 7px 24px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.025) !important;

  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .22s ease !important;
}


/* Hover */
section[component-id="183887328"] .single-faq:hover {
  background:
    linear-gradient(
      135deg,
      rgba(43,52,63,.98) 0%,
      rgba(34,43,53,.98) 100%
    ) !important;

  border-color: #D39A49 !important;

  box-shadow:
    0 11px 28px rgba(0,0,0,.18) !important;

  transform: translateY(-1px) !important;
}


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

section[component-id="183887328"] .single-faq.open,
section[component-id="183887328"] .single-faq[aria-expanded="true"] {
  background:
    linear-gradient(
      135deg,
      rgba(46,55,66,.98) 0%,
      rgba(34,43,52,.98) 100%
    ) !important;

  border-color: #D39A49 !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.20),
    0 0 0 1px rgba(211,154,73,.05) !important;
}


/* =========================================================
   QUESTION BUTTON
========================================================= */

section[component-id="183887328"] .faq-btn {
  display: flex !important;

  flex-direction: row !important;

  align-items: center !important;

  justify-content: space-between !important;

  width: 100% !important;

  min-height: 66px !important;

  padding: 15px 18px !important;

  gap: 16px !important;

  background: transparent !important;

  border: 0 !important;

  direction: rtl !important;

  cursor: pointer !important;
}


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

section[component-id="183887328"] .faq__question {
  flex: 1 !important;

  margin: 0 !important;

  color: #FFFFFF !important;

  font-size: 16px !important;
  line-height: 1.7 !important;

  font-weight: 600 !important;

  text-align: right !important;
  direction: rtl !important;
}


/* =========================================================
   ORIGINAL ARROW ICON
   رجعنا سهم سيليا الأصلي
========================================================= */

section[component-id="183887328"] .faq-btn > i {
  flex: 0 0 34px !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 34px !important;
  height: 34px !important;

  padding: 0 !important;

  background: #D39A49 !important;

  color: #1B2026 !important;

  border:
    1px solid #D39A49 !important;

  border-radius: 50% !important;

  font-size: 17px !important;

  line-height: 1 !important;

  box-shadow:
    0 5px 14px rgba(0,0,0,.15) !important;

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


/*
  مهم:
  مفيش ::before مخصص هنا.
  سيليا هتستخدم:
  sicon-keyboard_arrow_down
  و
  sicon-keyboard_arrow_up
  زي الأصل بالظبط.
*/


/* Hover على الأيقونة */
section[component-id="183887328"]
.faq-btn:hover > i {
  background: #E0AA5D !important;

  border-color: #E0AA5D !important;
}


/* السؤال المفتوح */
section[component-id="183887328"]
.single-faq.open
.faq-btn > i,

section[component-id="183887328"]
.single-faq[aria-expanded="true"]
.faq-btn > i {
  background: #D39A49 !important;

  color: #1B2026 !important;

  transform: scale(1.04) !important;
}


/* =========================================================
   ANSWER AREA
========================================================= */

section[component-id="183887328"] .faq-content {
  margin: 0 18px !important;

  border-top:
    1px solid rgba(211,154,73,.20) !important;
}


/* =========================================================
   ANSWER
========================================================= */

section[component-id="183887328"] .faq__answer {
  margin: 0 !important;

  padding: 15px 0 18px !important;

  color: rgba(255,255,255,.67) !important;

  font-size: 13px !important;
  line-height: 1.95 !important;

  font-weight: 400 !important;

  text-align: right !important;
  direction: rtl !important;
}


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

@media (max-width: 767px) {

  section[component-id="183887328"] {
    padding-top: 42px !important;
    padding-bottom: 48px !important;

    background-image:
      radial-gradient(
        circle at 0% 100%,
        rgba(211,154,73,.16) 0%,
        rgba(211,154,73,.06) 25%,
        transparent 52%
      ),
      radial-gradient(
        circle at 100% 0%,
        rgba(211,154,73,.08) 0%,
        transparent 38%
      ),
      linear-gradient(
        155deg,
        #101720 0%,
        #17202A 52%,
        #1B2026 100%
      ) !important;
  }


  /* سؤال واحد في الصف */
  section[component-id="183887328"] .faq__grid {
    grid-template-columns: 1fr !important;

    gap: 13px !important;
  }


  section[component-id="183887328"] .faq__title {
    font-size: 27px !important;
  }


  section[component-id="183887328"] .faq__subtitle {
    font-size: 13px !important;

    line-height: 1.7 !important;
  }


  section[component-id="183887328"] .home-block-line {
    width: 58px !important;

    margin-top: 12px !important;
    margin-bottom: 25px !important;
  }


  section[component-id="183887328"] .single-faq {
    border-radius: 15px !important;
  }


  section[component-id="183887328"] .faq-btn {
    min-height: 58px !important;

    padding: 12px 14px !important;

    gap: 12px !important;
  }


  section[component-id="183887328"] .faq__question {
    font-size: 14px !important;

    line-height: 1.65 !important;
  }


  section[component-id="183887328"] .faq-btn > i {
    flex-basis: 29px !important;

    width: 29px !important;
    height: 29px !important;

    font-size: 15px !important;
  }


  section[component-id="183887328"] .faq-content {
    margin: 0 14px !important;
  }


  section[component-id="183887328"] .faq__answer {
    padding: 13px 0 16px !important;

    font-size: 12.5px !important;

    line-height: 1.85 !important;
  }

}

/* =========================================================
   SHADI - EXTRA IMAGE GRID CARD
   ONLY SECTION: 1134066148
   Safe layout for the sixth card
========================================================= */

/* Desktop: original 2 + 2 + 1, plus new 1 = 6 columns */
@media (min-width: 768px) {
  section[component-id="1134066148"] .images-grid__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
}

/* Only the injected card */
section[component-id="1134066148"] .shadi-extra-grid-col {
  min-width: 0 !important;
}

section[component-id="1134066148"] .shadi-extra-grid-item {
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  text-decoration: none !important;
}

section[component-id="1134066148"] .shadi-extra-grid-item img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Existing mobile image-grid rule stays in control */
@media (max-width: 639px) {
  section[component-id="1134066148"] .shadi-extra-grid-item {
    height: 160px !important;
    min-height: 160px !important;
  }
}







































/* =========================================================
   FINAL FIX - ADVANCED SLIDER 2
   ONLY COMPONENT: 518173904

   - Exact Hero Height
   - Same Height For Every Slide
   - No Image Stacking
   - Restore Text
   - Responsive
========================================================= */


/* =========================================================
   SECTION
========================================================= */

section[component-id="518173904"] {
  position: relative !important;

  width: 100% !important;

  overflow: hidden !important;

  background: #1B2026 !important;

  /*
    JavaScript هيحط هنا ارتفاع الهيرو الحقيقي.
    الـfallback موجود لو JS لسه محملش.
  */
  --shadi-banner-height: calc(100vw / 2.18);
}


/* =========================================================
   SALLA SLIDER
========================================================= */

section[component-id="518173904"]
#advanced-slider-2 {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  height: var(--shadi-banner-height) !important;

  min-height: var(--shadi-banner-height) !important;

  max-height: var(--shadi-banner-height) !important;

  overflow: hidden !important;

  background: #1B2026 !important;
}


/* =========================================================
   SWIPER CONTAINER
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.swiper {
  position: relative !important;

  width: 100% !important;

  height: var(--shadi-banner-height) !important;

  min-height: var(--shadi-banner-height) !important;

  max-height: var(--shadi-banner-height) !important;

  overflow: hidden !important;
}


/* =========================================================
   SWIPER WRAPPER
   مهم جدًا لمنع Auto Height من تغيير المقاس
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.swiper-wrapper {
  width: 100% !important;

  height: var(--shadi-banner-height) !important;

  min-height: var(--shadi-banner-height) !important;

  max-height: var(--shadi-banner-height) !important;
}


/* =========================================================
   ALL SLIDES
   كل البنرات نفس المقاس مهما كان مقاس الصورة الأصلية
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__slide {
  position: relative !important;

  width: 100% !important;

  height: var(--shadi-banner-height) !important;

  min-height: var(--shadi-banner-height) !important;

  max-height: var(--shadi-banner-height) !important;

  aspect-ratio: auto !important;

  overflow: hidden !important;

  background: #1B2026 !important;
}


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

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__image {
  position: absolute !important;

  inset: 0 !important;

  display: block;

  width: 100% !important;

  height: 100% !important;

  min-height: 100% !important;

  max-height: none !important;

  margin: 0 !important;

  object-fit: cover !important;

  object-position: center !important;

  z-index: 1 !important;
}


/* =========================================================
   DARK BRAND OVERLAY
   يخلي الكلام واضح من غير ما نسود الصورة كلها
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__slide::after {
  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  z-index: 2 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      270deg,
      rgba(27,32,38,.80) 0%,
      rgba(27,32,38,.62) 24%,
      rgba(27,32,38,.30) 47%,
      rgba(27,32,38,.08) 68%,
      rgba(27,32,38,0) 82%
    ) !important;
}


/* =========================================================
   CAPTION
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  z-index: 5 !important;

  pointer-events: none !important;
}


/* =========================================================
   CAPTION CONTAINER
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption
.container {
  position: relative !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding: 0 !important;
}


/* =========================================================
   CAPTION INNER
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner {
  position: static !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  max-width: none !important;
}


/* =========================================================
   TEXT POSITION - DESKTOP
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content {
  position: absolute !important;

  top: 50% !important;

  right: 8% !important;

  bottom: auto !important;

  left: auto !important;

  width: 46% !important;

  max-width: 720px !important;

  margin: 0 !important;

  padding: 0 !important;

  transform: translateY(-50%) !important;

  direction: rtl !important;

  text-align: right !important;

  pointer-events: auto !important;

  z-index: 6 !important;
}


/* =========================================================
   TITLE
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__heading {
  display: block !important;

  width: 100% !important;

  margin: 0 0 12px 0 !important;

  padding: 0 !important;

  color: #FFFFFF !important;

  font-size: clamp(34px, 3vw, 52px) !important;

  line-height: 1.25 !important;

  font-weight: 700 !important;

  direction: rtl !important;

  text-align: right !important;

  opacity: 1 !important;

  visibility: visible !important;

  text-shadow:
    0 3px 16px rgba(0,0,0,.42) !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__text {
  display: block !important;

  width: 100% !important;

  margin: 0 0 22px 0 !important;

  padding: 0 !important;

  color: rgba(255,255,255,.82) !important;

  font-size: 14px !important;

  line-height: 1.9 !important;

  font-weight: 400 !important;

  direction: rtl !important;

  text-align: right !important;

  opacity: 1 !important;

  visibility: visible !important;

  text-shadow:
    0 2px 10px rgba(0,0,0,.38) !important;
}


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

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__button {
  position: relative !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  min-width: 120px !important;

  min-height: 44px !important;

  padding: 11px 22px !important;

  margin: 0 !important;

  background: #D39A49 !important;

  background-color: #D39A49 !important;

  color: #171717 !important;

  border: 0 !important;

  border-radius: 14px !important;

  box-shadow:
    0 7px 18px rgba(0,0,0,.18) !important;

  font-size: 13px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;

  overflow: hidden !important;

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


section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__button span {
  position: relative !important;

  z-index: 2 !important;

  color: #171717 !important;
}


/* نشيل Overlay الزرار بتاع الثيم */
section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__button::before,

section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__button::after {
  content: none !important;

  display: none !important;
}


/* Hover */
section[component-id="518173904"]
#advanced-slider-2
.advanced-slider__caption__inner__content__button:hover {
  background: #BE873C !important;

  background-color: #BE873C !important;

  color: #171717 !important;

  transform: translateY(-1px) !important;
}


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

@media (max-width: 991px) {

  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content {
    right: 7% !important;

    width: 55% !important;
  }


  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content__heading {
    font-size: 34px !important;
  }


  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content__text {
    font-size: 13px !important;
  }

}


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

@media (max-width: 639px) {

  /*
    لو JavaScript ما اشتغلش لجزء من الثانية،
    ده fallback قريب من ارتفاع الهيرو على الموبايل.
  */
  section[component-id="518173904"] {
    --shadi-banner-height:
      min(150vw, 570px);
  }


  /* Overlay أنسب للموبايل */
  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__slide::after {
    background:
      linear-gradient(
        to top,
        rgba(27,32,38,.77) 0%,
        rgba(27,32,38,.48) 38%,
        rgba(27,32,38,.18) 64%,
        rgba(27,32,38,.03) 83%,
        transparent 100%
      ),
      linear-gradient(
        270deg,
        rgba(27,32,38,.40) 0%,
        transparent 72%
      ) !important;
  }


  /* Text */
  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content {
    top: 57% !important;

    right: 7% !important;

    left: 7% !important;

    bottom: auto !important;

    width: auto !important;

    max-width: none !important;

    transform: translateY(-50%) !important;

    text-align: right !important;
  }


  /* Title */
  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content__heading {
    margin-bottom: 8px !important;

    font-size: 24px !important;

    line-height: 1.3 !important;
  }


  /* Description */
  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content__text {
    margin-bottom: 16px !important;

    font-size: 12px !important;

    line-height: 1.75 !important;
  }


  /* Button */
  section[component-id="518173904"]
  #advanced-slider-2
  .advanced-slider__caption__inner__content__button {
    min-width: 108px !important;

    min-height: 40px !important;

    padding: 9px 18px !important;

    border-radius: 12px !important;

    font-size: 12px !important;
  }

}

/* =========================================================
   SHADI - FINAL ADVANCED BANNER FIX
   ONLY COMPONENT: 518173904
   لا يعتمد على advanced-slider-2
========================================================= */

section[component-id="518173904"] {
  --shadi-banner-height: 46vw !important;

  --sliderHeight: var(--shadi-banner-height) !important;
  --mobileSliderHeight: var(--shadi-banner-height) !important;

  position: relative !important;
  width: 100% !important;

  background: #1B2026 !important;

  overflow: hidden !important;
}


/* =========================================================
   SALLA SLIDER
========================================================= */

section[component-id="518173904"] salla-slider,
section[component-id="518173904"] .swiper,
section[component-id="518173904"] .swiper-wrapper {

  width: 100% !important;

  height: var(--shadi-banner-height) !important;
  min-height: var(--shadi-banner-height) !important;
  max-height: var(--shadi-banner-height) !important;

  overflow: hidden !important;
}


/* =========================================================
   ALL SLIDES
========================================================= */

section[component-id="518173904"]
.advanced-slider__slide {

  position: relative !important;

  width: 100% !important;

  height: var(--shadi-banner-height) !important;
  min-height: var(--shadi-banner-height) !important;
  max-height: var(--shadi-banner-height) !important;

  aspect-ratio: auto !important;

  overflow: hidden !important;

  background: #1B2026 !important;
}


/* =========================================================
   IMAGES
   كل الصور تاخد نفس مساحة البنر
========================================================= */

section[component-id="518173904"]
.advanced-slider__slide
.advanced-slider__image {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

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

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

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

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

  opacity: 1 !important;

  z-index: 1 !important;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

section[component-id="518173904"]
.advanced-slider__slide::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  z-index: 2 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      270deg,
      rgba(27,32,38,.78) 0%,
      rgba(27,32,38,.56) 27%,
      rgba(27,32,38,.24) 50%,
      rgba(27,32,38,.06) 70%,
      transparent 86%
    ) !important;
}


/* =========================================================
   CAPTION
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption {

  position: absolute !important;

  inset: 0 !important;

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

  z-index: 10 !important;

  pointer-events: none !important;
}


section[component-id="518173904"]
.advanced-slider__caption
.container {

  position: relative !important;

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

  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner {

  position: static !important;

  display: block !important;

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

  max-width: none !important;
}


/* =========================================================
   CONTENT POSITION - DESKTOP
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption__inner__content {

  position: absolute !important;

  top: 50% !important;
  right: 8% !important;

  bottom: auto !important;
  left: auto !important;

  width: 44% !important;
  max-width: 680px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateY(-50%) !important;

  direction: rtl !important;
  text-align: right !important;

  z-index: 15 !important;

  pointer-events: auto !important;
}


/* =========================================================
   TITLE
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption__inner__content__heading {

  display: block !important;

  width: 100% !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-size: clamp(30px, 2.5vw, 46px) !important;

  line-height: 1.25 !important;

  font-weight: 700 !important;

  direction: rtl !important;
  text-align: right !important;

  text-shadow:
    0 3px 16px rgba(0,0,0,.45) !important;

  filter: none !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption__inner__content__text {

  display: block !important;

  width: 100% !important;

  margin: 0 0 20px !important;
  padding: 0 !important;

  color: rgba(255,255,255,.86) !important;
  -webkit-text-fill-color: rgba(255,255,255,.86) !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-size: 14px !important;

  line-height: 1.8 !important;

  font-weight: 400 !important;

  direction: rtl !important;
  text-align: right !important;

  text-shadow:
    0 2px 10px rgba(0,0,0,.40) !important;

  filter: none !important;
  mix-blend-mode: normal !important;
}


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

section[component-id="518173904"]
.advanced-slider__caption__inner__content__button {

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 120px !important;
  min-height: 44px !important;

  padding: 11px 22px !important;

  margin: 0 !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;

  border: 0 !important;

  border-radius: 14px !important;

  box-shadow:
    0 7px 18px rgba(0,0,0,.18) !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  text-decoration: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  overflow: hidden !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner__content__button span {

  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner__content__button::before,

section[component-id="518173904"]
.advanced-slider__caption__inner__content__button::after {

  content: none !important;
  display: none !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner__content__button:hover {

  background: #BE873C !important;
  background-color: #BE873C !important;

  color: #171717 !important;

  transform: translateY(-1px) !important;
}


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

@media (max-width: 639px) {

  section[component-id="518173904"] {

    /*
      JavaScript هيستبدل القيمة دي بارتفاع الهيرو الحقيقي.
      دي fallback فقط.
    */
    --shadi-banner-height: 500px !important;
  }


  section[component-id="518173904"]
  .advanced-slider__slide::after {

    background:
      linear-gradient(
        to top,
        rgba(27,32,38,.78) 0%,
        rgba(27,32,38,.48) 35%,
        rgba(27,32,38,.18) 65%,
        transparent 88%
      ) !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content {

    top: auto !important;

    right: 7% !important;
    left: 7% !important;

    bottom: 9% !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content__heading {

    font-size: 24px !important;

    line-height: 1.3 !important;

    margin-bottom: 8px !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content__text {

    font-size: 12px !important;

    line-height: 1.7 !important;

    margin-bottom: 14px !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content__button {

    min-width: 108px !important;
    min-height: 40px !important;

    padding: 9px 18px !important;

    border-radius: 12px !important;

    font-size: 12px !important;
  }

}



























/* =========================================================
   SHADI - FINAL ADVANCED BANNER FIX
   ONLY COMPONENT: 518173904
   لا يعتمد على advanced-slider-2
========================================================= */

section[component-id="518173904"] {
  --shadi-banner-height: 46vw !important;

  --sliderHeight: var(--shadi-banner-height) !important;
  --mobileSliderHeight: var(--shadi-banner-height) !important;

  position: relative !important;
  width: 100% !important;

  background: #1B2026 !important;

  overflow: hidden !important;
}


/* =========================================================
   SALLA SLIDER
========================================================= */

section[component-id="518173904"] salla-slider,
section[component-id="518173904"] .swiper,
section[component-id="518173904"] .swiper-wrapper {

  width: 100% !important;

  height: var(--shadi-banner-height) !important;
  min-height: var(--shadi-banner-height) !important;
  max-height: var(--shadi-banner-height) !important;

  overflow: hidden !important;
}


/* =========================================================
   ALL SLIDES
========================================================= */

section[component-id="518173904"]
.advanced-slider__slide {

  position: relative !important;

  width: 100% !important;

  height: var(--shadi-banner-height) !important;
  min-height: var(--shadi-banner-height) !important;
  max-height: var(--shadi-banner-height) !important;

  aspect-ratio: auto !important;

  overflow: hidden !important;

  background: #1B2026 !important;
}


/* =========================================================
   IMAGES
   كل الصور تاخد نفس مساحة البنر
========================================================= */

section[component-id="518173904"]
.advanced-slider__slide
.advanced-slider__image {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

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

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

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

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

  opacity: 1 !important;

  z-index: 1 !important;
}


/* =========================================================
   DARK OVERLAY
========================================================= */

section[component-id="518173904"]
.advanced-slider__slide::after {

  content: "" !important;

  position: absolute !important;

  inset: 0 !important;

  z-index: 2 !important;

  pointer-events: none !important;

  background:
    linear-gradient(
      270deg,
      rgba(27,32,38,.78) 0%,
      rgba(27,32,38,.56) 27%,
      rgba(27,32,38,.24) 50%,
      rgba(27,32,38,.06) 70%,
      transparent 86%
    ) !important;
}


/* =========================================================
   CAPTION
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption {

  position: absolute !important;

  inset: 0 !important;

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

  z-index: 10 !important;

  pointer-events: none !important;
}


section[component-id="518173904"]
.advanced-slider__caption
.container {

  position: relative !important;

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

  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner {

  position: static !important;

  display: block !important;

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

  max-width: none !important;
}


/* =========================================================
   CONTENT POSITION - DESKTOP
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption__inner__content {

  position: absolute !important;

  top: 50% !important;
  right: 8% !important;

  bottom: auto !important;
  left: auto !important;

  width: 44% !important;
  max-width: 680px !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: translateY(-50%) !important;

  direction: rtl !important;
  text-align: right !important;

  z-index: 15 !important;

  pointer-events: auto !important;
}


/* =========================================================
   TITLE
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption__inner__content__heading {

  display: block !important;

  width: 100% !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-size: clamp(30px, 2.5vw, 46px) !important;

  line-height: 1.25 !important;

  font-weight: 700 !important;

  direction: rtl !important;
  text-align: right !important;

  text-shadow:
    0 3px 16px rgba(0,0,0,.45) !important;

  filter: none !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

section[component-id="518173904"]
.advanced-slider__caption__inner__content__text {

  display: block !important;

  width: 100% !important;

  margin: 0 0 20px !important;
  padding: 0 !important;

  color: rgba(255,255,255,.86) !important;
  -webkit-text-fill-color: rgba(255,255,255,.86) !important;

  opacity: 1 !important;
  visibility: visible !important;

  font-size: 14px !important;

  line-height: 1.8 !important;

  font-weight: 400 !important;

  direction: rtl !important;
  text-align: right !important;

  text-shadow:
    0 2px 10px rgba(0,0,0,.40) !important;

  filter: none !important;
  mix-blend-mode: normal !important;
}


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

section[component-id="518173904"]
.advanced-slider__caption__inner__content__button {

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 120px !important;
  min-height: 44px !important;

  padding: 11px 22px !important;

  margin: 0 !important;

  background: #D39A49 !important;
  background-color: #D39A49 !important;

  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;

  border: 0 !important;

  border-radius: 14px !important;

  box-shadow:
    0 7px 18px rgba(0,0,0,.18) !important;

  font-size: 13px !important;
  font-weight: 700 !important;

  text-decoration: none !important;

  opacity: 1 !important;
  visibility: visible !important;

  pointer-events: auto !important;

  overflow: hidden !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner__content__button span {

  color: #171717 !important;
  -webkit-text-fill-color: #171717 !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner__content__button::before,

section[component-id="518173904"]
.advanced-slider__caption__inner__content__button::after {

  content: none !important;
  display: none !important;
}


section[component-id="518173904"]
.advanced-slider__caption__inner__content__button:hover {

  background: #BE873C !important;
  background-color: #BE873C !important;

  color: #171717 !important;

  transform: translateY(-1px) !important;
}


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

@media (max-width: 639px) {

  section[component-id="518173904"] {

    /*
      JavaScript هيستبدل القيمة دي بارتفاع الهيرو الحقيقي.
      دي fallback فقط.
    */
    --shadi-banner-height: 500px !important;
  }


  section[component-id="518173904"]
  .advanced-slider__slide::after {

    background:
      linear-gradient(
        to top,
        rgba(27,32,38,.78) 0%,
        rgba(27,32,38,.48) 35%,
        rgba(27,32,38,.18) 65%,
        transparent 88%
      ) !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content {

    top: auto !important;

    right: 7% !important;
    left: 7% !important;

    bottom: 9% !important;

    width: auto !important;
    max-width: none !important;

    transform: none !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content__heading {

    font-size: 24px !important;

    line-height: 1.3 !important;

    margin-bottom: 8px !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content__text {

    font-size: 12px !important;

    line-height: 1.7 !important;

    margin-bottom: 14px !important;
  }


  section[component-id="518173904"]
  .advanced-slider__caption__inner__content__button {

    min-width: 108px !important;
    min-height: 40px !important;

    padding: 9px 18px !important;

    border-radius: 12px !important;

    font-size: 12px !important;
  }

}







/* =========================================================
   SHADI - ENHANCED FEATURES FINAL
   Component: 1691485409
   FAQ Style + Original Animated GIF
========================================================= */


/* =========================================================
   SECTION
========================================================= */

section[component-id="1691485409"].s-block--enhanced-features {
  position: relative !important;

  background:
    radial-gradient(
      circle at 8% 100%,
      rgba(211,154,73,.10) 0%,
      rgba(211,154,73,.035) 26%,
      transparent 50%
    ),
    linear-gradient(
      135deg,
      #171C22 0%,
      #1B2026 55%,
      #202730 100%
    ) !important;

  padding-top: 50px !important;
  padding-bottom: 50px !important;

  overflow: hidden !important;
}


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

section[component-id="1691485409"]
.enhanced-features__grid {
  gap: 18px !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 205px !important;

  padding: 26px 22px !important;

  background: #232B35 !important;

  border: 1px solid rgba(211,154,73,.65) !important;

  border-radius: 18px !important;

  box-shadow: none !important;

  overflow: hidden !important;

  transition:
    transform .22s ease,
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease !important;
}


/* =========================================================
   REMOVE THEME ANIMATED BORDER LINES
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item
> .absolute {
  display: none !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item:hover {
  transform: translateY(-3px) !important;


  border-color: #D39A49 !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.16) !important;
}


/* =========================================================
   ICON AREA
========================================================= */

section[component-id="1691485409"]
.feature-icon,
section[component-id="1691485409"]
.feature-icon.has-image {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: 58px !important;

  min-width: 0 !important;

  margin: 0 0 15px !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* =========================================================
   ORIGINAL GIF
   مهم: بدون Filter عشان الأنيميشن وشكل الأيقونة ما يبوظوش
========================================================= */

section[component-id="1691485409"]
.feature-icon.has-image img {
  display: block !important;

  width: auto !important;
  height: 52px !important;

  max-width: 64px !important;
  max-height: 52px !important;

  object-fit: contain !important;

  margin: 0 auto !important;

  filter: none !important;

  opacity: 1 !important;

  visibility: visible !important;

  mix-blend-mode: normal !important;

  transition:
    transform .22s ease,
    filter .22s ease !important;
}


/* Hover للـGIF بدون تغيير ألوانه */
section[component-id="1691485409"]
.s-block--enhanced-features__item:hover
.feature-icon.has-image img {
  transform: scale(1.06) translateY(-2px) !important;

  filter:
    drop-shadow(
      0 4px 8px rgba(211,154,73,.18)
    ) !important;
}


/* =========================================================
   TITLE
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item
h2 {
  width: 100% !important;

  margin: 0 0 7px !important;
  padding: 0 !important;

  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;

  font-size: 17px !important;

  line-height: 1.5 !important;

  font-weight: 700 !important;

  text-align: center !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item
p {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,.62) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.62) !important;

  font-size: 13.5px !important;

  line-height: 1.7 !important;

  font-weight: 400 !important;

  text-align: center !important;
}


/* =========================================================
   GOLD HOVER LINE
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item::after {
  content: "" !important;

  position: absolute !important;

  bottom: 0 !important;
  left: 50% !important;

  width: 0 !important;
  height: 2px !important;

  background: #D39A49 !important;

  transform: translateX(-50%) !important;

  transition: width .25s ease !important;
}


section[component-id="1691485409"]
.s-block--enhanced-features__item:hover::after {
  width: 38% !important;
}


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

@media (max-width: 640px) {

  section[component-id="1691485409"].s-block--enhanced-features {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }


  section[component-id="1691485409"]
  .enhanced-features__grid {
    gap: 12px !important;
  }


  section[component-id="1691485409"]
  .s-block--enhanced-features__item {
    min-height: 175px !important;

    padding: 20px 12px !important;

    border-radius: 15px !important;
  }


  section[component-id="1691485409"]
  .feature-icon,
  section[component-id="1691485409"]
  .feature-icon.has-image {
    height: 48px !important;

    margin-bottom: 11px !important;
  }


  section[component-id="1691485409"]
  .feature-icon.has-image img {
    height: 43px !important;

    max-width: 54px !important;
    max-height: 43px !important;
  }


  section[component-id="1691485409"]
  .s-block--enhanced-features__item h2 {
    font-size: 14px !important;

    margin-bottom: 5px !important;
  }


  section[component-id="1691485409"]
  .s-block--enhanced-features__item p {
    font-size: 11.5px !important;

    line-height: 1.6 !important;
  }

}



















/* =========================================================
   FEATURES SECTION
   Light Section + Premium Gradient Cards
========================================================= */

/* خلفية السيكشن نفسه */
section[component-id="1691485409"].s-block--enhanced-features {
  background: #FAF9F6 !important;
  background-image: none !important;

  padding-top: 42px !important;
  padding-bottom: 42px !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 205px !important;

  padding: 26px 22px !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(211,154,73,.10) 0%,
      rgba(211,154,73,.035) 24%,
      transparent 48%
    ),
    linear-gradient(
      135deg,
      #28313B 0%,
      #222A34 42%,
      #1B2026 100%
    ) !important;

  border:
    1px solid rgba(211,154,73,.62) !important;

  border-radius: 18px !important;

  box-shadow:
    0 8px 24px rgba(27,32,38,.08),
    inset 0 1px 0 rgba(255,255,255,.025) !important;

  overflow: hidden !important;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item:hover {
  transform: translateY(-3px) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(211,154,73,.16) 0%,
      rgba(211,154,73,.055) 27%,
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #2D3742 0%,
      #252E38 42%,
      #1B2026 100%
    ) !important;

  border-color: #D39A49 !important;

  box-shadow:
    0 12px 30px rgba(27,32,38,.14),
    0 0 0 1px rgba(211,154,73,.04) !important;
}


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

@media (max-width: 640px) {

  section[component-id="1691485409"].s-block--enhanced-features {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  section[component-id="1691485409"]
  .s-block--enhanced-features__item {
    min-height: 175px !important;
    padding: 20px 12px !important;
    border-radius: 15px !important;
  }

}





































/* =========================================================
   FEATURE GIFS - BRAND COLOR
========================================================= */

section[component-id="1691485409"]
.feature-icon.has-image img {

  filter: url(#shadiGifGold) !important;
  -webkit-filter: url(#shadiGifGold) !important;

  background: transparent !important;

  opacity: 1 !important;
  visibility: visible !important;

  mix-blend-mode: normal !important;
}


/* Hover */
section[component-id="1691485409"]
.s-block--enhanced-features__item:hover
.feature-icon.has-image img {

  filter: url(#shadiGifGold) !important;
  -webkit-filter: url(#shadiGifGold) !important;

  transform: scale(1.06) translateY(-2px) !important;
}







































































/* =========================================================
   SHADI FEATURES - FINAL VISUAL FIX
   Component: 1691485409

   Brand Gold : #D39A49
========================================================= */


/* =========================================================
   FEATURE CARD
   درجة أفتح شوية من الحالية
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item {

  position: relative !important;
  isolation: isolate !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(211,154,73,.10) 0%,
      rgba(211,154,73,.035) 28%,
      transparent 52%
    ),
    linear-gradient(
      135deg,
      #35414D 0%,
      #2D3742 48%,
      #26303A 100%
    ) !important;

  border:
    1px solid rgba(211,154,73,.55) !important;

  border-radius:
    18px !important;

  box-shadow:
    0 8px 24px rgba(27,32,38,.08) !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item:hover {

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(211,154,73,.16) 0%,
      rgba(211,154,73,.055) 30%,
      transparent 55%
    ),
    linear-gradient(
      135deg,
      #3A4652 0%,
      #323D48 48%,
      #29343E 100%
    ) !important;

  border-color:
    #D39A49 !important;

  transform:
    translateY(-3px) !important;

  box-shadow:
    0 12px 28px rgba(27,32,38,.14) !important;
}


/* =========================================================
   ICON CONTAINER
   مفيش أي مربع أو خلفية
========================================================= */

section[component-id="1691485409"]
.feature-icon,

section[component-id="1691485409"]
.feature-icon.has-image {

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: auto !important;
  height: 58px !important;

  min-width: 0 !important;

  margin:
    0 0 15px !important;

  padding:
    0 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  outline:
    none !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


/* أي pseudo element ممكن يكون عامل مربع */
section[component-id="1691485409"]
.feature-icon::before,

section[component-id="1691485409"]
.feature-icon::after {

  content:
    none !important;

  display:
    none !important;
}


/* =========================================================
   GIF ICON
   Background disappears
   Icon becomes Brand Gold
========================================================= */

section[component-id="1691485409"]
.feature-icon.has-image img {

  display: block !important;

  width:
    auto !important;

  height:
    52px !important;

  max-width:
    64px !important;

  max-height:
    52px !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  background:
    transparent !important;

  background-color:
    transparent !important;

  border:
    0 !important;

  outline:
    0 !important;

  box-shadow:
    none !important;

  object-fit:
    contain !important;

  opacity:
    1 !important;

  visibility:
    visible !important;


  /*
    نحول الخلفية البيضاء/الفاتحة لأسود
    ونحول الرسم نفسه للذهبي.
    
    وبعدها lighten يخفي الأسود
    فوق الكارد الغامق.
  */

  filter:
    grayscale(100%)
    brightness(58%)
    contrast(1000%)
    invert(100%)
    sepia(83%)
    saturate(3787%)
    hue-rotate(312deg)
    brightness(81%) !important;

  -webkit-filter:
    grayscale(100%)
    brightness(58%)
    contrast(1000%)
    invert(100%)
    sepia(83%)
    saturate(3787%)
    hue-rotate(312deg)
    brightness(81%) !important;

  mix-blend-mode:
    lighten !important;

  transition:
    transform .22s ease !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item:hover
.feature-icon.has-image img {

  transform:
    translateY(-2px)
    scale(1.06) !important;
}


/* =========================================================
   TITLE
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item h2 {

  color:
    #FFFFFF !important;

  -webkit-text-fill-color:
    #FFFFFF !important;

  font-weight:
    700 !important;
}


/* =========================================================
   DESCRIPTION
========================================================= */

section[component-id="1691485409"]
.s-block--enhanced-features__item p {

  color:
    rgba(255,255,255,.68) !important;

  -webkit-text-fill-color:
    rgba(255,255,255,.68) !important;
}


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

@media (max-width: 640px) {

  section[component-id="1691485409"]
  .s-block--enhanced-features__item {

    border-radius:
      15px !important;
  }


  section[component-id="1691485409"]
  .feature-icon,

  section[component-id="1691485409"]
  .feature-icon.has-image {

    height:
      48px !important;

    margin-bottom:
      11px !important;
  }


  section[component-id="1691485409"]
  .feature-icon.has-image img {

    height:
      43px !important;

    max-width:
      54px !important;

    max-height:
      43px !important;
  }

}










/* =========================================================
   FEATURES GIF - THINNER LINES + HOVER FIX
========================================================= */

section[component-id="1691485409"]
.feature-icon.has-image img {

  /* نفس حجم الأيقونة */
  height: 52px !important;
  max-height: 52px !important;
  max-width: 64px !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  /* لون الهوية + خطوط أرفع بصرياً */
  filter:
    grayscale(100%)
    brightness(62%)
    contrast(750%)
    invert(100%)
    sepia(83%)
    saturate(3787%)
    hue-rotate(312deg)
    brightness(81%) !important;

  -webkit-filter:
    grayscale(100%)
    brightness(62%)
    contrast(750%)
    invert(100%)
    sepia(83%)
    saturate(3787%)
    hue-rotate(312deg)
    brightness(81%) !important;

  mix-blend-mode: lighten !important;

  opacity: .92 !important;
  visibility: visible !important;

  transform: none !important;
}


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

section[component-id="1691485409"]
.s-block--enhanced-features__item:hover
.feature-icon.has-image img {

  height: 52px !important;
  max-height: 52px !important;
  max-width: 64px !important;

  background: transparent !important;
  background-color: transparent !important;

  filter:
    grayscale(100%)
    brightness(62%)
    contrast(750%)
    invert(100%)
    sepia(83%)
    saturate(3787%)
    hue-rotate(312deg)
    brightness(81%) !important;

  -webkit-filter:
    grayscale(100%)
    brightness(62%)
    contrast(750%)
    invert(100%)
    sepia(83%)
    saturate(3787%)
    hue-rotate(312deg)
    brightness(81%) !important;

  mix-blend-mode: lighten !important;

  opacity: .92 !important;
  visibility: visible !important;

  transform: translateY(-1px) !important;
}


/* =========================================================
   MOBILE
   نفس المقاس اللي كان عندنا قبل كده
========================================================= */

@media (max-width: 640px) {

  section[component-id="1691485409"]
  .feature-icon.has-image img,

  section[component-id="1691485409"]
  .s-block--enhanced-features__item:hover
  .feature-icon.has-image img {

    height: 43px !important;
    max-height: 43px !important;
    max-width: 54px !important;
  }

}

























































/* =========================================================
   ADVANCED SLIDER 2 - FINAL HEIGHT FIX
   Component: 518173904

   Desktop = Hero desktop proportion
   Mobile  = Controlled landscape banner
========================================================= */


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

section[component-id="518173904"] {

  --shadi-banner-height: 46vw !important;

  --sliderHeight:
    var(--shadi-banner-height) !important;

  --mobileSliderHeight:
    var(--shadi-banner-height) !important;

  position: relative !important;

  width: 100% !important;

  overflow: hidden !important;

  background: #1B2026 !important;
}


section[component-id="518173904"]
salla-slider,

section[component-id="518173904"]
.swiper,

section[component-id="518173904"]
.swiper-wrapper,

section[component-id="518173904"]
.advanced-slider__slide {

  width: 100% !important;

  height:
    var(--shadi-banner-height) !important;

  min-height:
    var(--shadi-banner-height) !important;

  max-height:
    var(--shadi-banner-height) !important;

  overflow: hidden !important;
}


section[component-id="518173904"]
.advanced-slider__slide {

  position: relative !important;

  aspect-ratio: auto !important;

  background: #1B2026 !important;
}


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

section[component-id="518173904"]
.advanced-slider__image {

  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;

  height: 100% !important;

  min-width: 100% !important;

  min-height: 100% !important;

  max-width: none !important;

  max-height: none !important;

  margin: 0 !important;

  padding: 0 !important;

  object-fit: cover !important;

  object-position: center center !important;
}


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

@media (max-width: 639px) {

  section[component-id="518173904"] {

    /*
      320px screen  ≈ 237px
      390px screen  ≈ 289px
      Max            = 290px

      بالتالي مش هيرجع Portrait.
    */

    --shadi-banner-height:
      clamp(230px, 74vw, 290px) !important;

    --sliderHeight:
      var(--shadi-banner-height) !important;

    --mobileSliderHeight:
      var(--shadi-banner-height) !important;
  }


  section[component-id="518173904"]
  salla-slider,

  section[component-id="518173904"]
  .swiper,

  section[component-id="518173904"]
  .swiper-wrapper,

  section[component-id="518173904"]
  .advanced-slider__slide {

    height:
      var(--shadi-banner-height) !important;

    min-height:
      var(--shadi-banner-height) !important;

    max-height:
      var(--shadi-banner-height) !important;
  }


  section[component-id="518173904"]
  .advanced-slider__image {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position:
      center center !important;
  }

}






























/* =========================================================
   MOBILE - FIRST CATEGORY IMAGE ZOOM
   ONLY: Home Cinema card
   Section: 1134066148
========================================================= */

@media (max-width: 639px) {

  /* الكارت الأول فقط */
  section[component-id="1134066148"]
  .images-grid__grid > *:nth-child(1)
  .images-grid__item {
    overflow: hidden !important;
  }


  /* الصورة الأولى فقط */
  section[component-id="1134066148"]
  .images-grid__grid > *:nth-child(1)
  .images-grid__item img {

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

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

    transform: scale(2) !important;
    transform-origin: center center !important;
  }

}

/* =========================================================
   MOBILE - SPEAKERS IMAGE ZOOM
   ONLY: Speakers Card
========================================================= */

@media (max-width: 639px) {

  section[component-id="1134066148"]
  [data-selia="home-images-grid-item-5"] {
    overflow: hidden !important;
  }

  section[component-id="1134066148"]
  [data-selia="home-images-grid-item-5"] img {

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

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

    transform: scale(1.45) !important;
    transform-origin: center center !important;
  }


  /* وقت الهوفر/اللمس مايرجعش Scale الثيم */
  section[component-id="1134066148"]
  [data-selia="home-images-grid-item-5"]:hover img {

    transform: scale(1.45) !important;
  }

}








/* =========================================
   CONTACT FORM SMOOTH SCROLL
========================================= */

html {
  scroll-behavior: smooth;
}

#contact-us {
  scroll-margin-top: 110px;
}
/* =========================================================
   CONTACT SECTION SCROLL OFFSET
========================================================= */

section[component-id="736925618"] {
  scroll-margin-top: 110px !important;
}


/* =========================================================
   ACOUSTIC TREATMENT CATEGORY
   FINAL OVERRIDE
========================================================= */


/* PAGE */
html.shadi-acoustic-category-page,
html.shadi-acoustic-category-page body,
html.shadi-acoustic-category-page main,
body.shadi-acoustic-category-page,
body.shadi-acoustic-category-page main {
  background: #FAF9F6 !important;
  background-color: #FAF9F6 !important;
}


/* PRODUCTS AREA */
.shadi-acoustic-category-page
salla-products-list,

.shadi-acoustic-category-page
.products-container,

.shadi-acoustic-category-page
.products-list {
  background: transparent !important;
}


/* PRODUCT CARD */
.shadi-acoustic-category-page
.product-card,

.shadi-acoustic-category-page
custom-salla-product-card.product-card {

  background: #FFFFFF !important;

  border:
    1px solid rgba(211,154,73,.32) !important;

  border-radius:
    16px !important;

  overflow:
    hidden !important;

  box-shadow:
    0 4px 16px rgba(27,32,38,.05) !important;

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


/* CARD HOVER */
.shadi-acoustic-category-page
.product-card:hover,

.shadi-acoustic-category-page
custom-salla-product-card.product-card:hover {

  transform:
    translateY(-3px) !important;

  border-color:
    #D39A49 !important;

  box-shadow:
    0 12px 28px rgba(27,32,38,.10) !important;
}


/* IMAGE AREA */
.shadi-acoustic-category-page
.product-card__image {

  height:
    285px !important;

  background:
    #FFFFFF !important;

  overflow:
    hidden !important;
}


/* PRODUCT IMAGE */
.shadi-acoustic-category-page
.product-card__image img {

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  padding:
    0 !important;

  transform:
    scale(1) !important;
}


/* CONTENT */
.shadi-acoustic-category-page
.product-card__content {

  background:
    #FFFFFF !important;

  padding:
    16px 15px 18px !important;
}


/* TITLE */
.shadi-acoustic-category-page
.product-card__title {

  text-align:
    center !important;
}


.shadi-acoustic-category-page
.product-card__title a {

  color:
    #1B2026 !important;

  font-size:
    14px !important;

  font-weight:
    600 !important;
}


/* PRICE */
.shadi-acoustic-category-page
.product-card__price {

  justify-content:
    center !important;

  text-align:
    center !important;
}


.shadi-acoustic-category-page
.product-card__price
.total-price,

.shadi-acoustic-category-page
.product-card__price
.total-price i {

  color:
    #D39A49 !important;
}


/* ADD TO CART */
.shadi-acoustic-category-page
.product-card__addToCart,

.shadi-acoustic-category-page
.product-card__addToCart
salla-add-product-button,

.shadi-acoustic-category-page
.product-card__addToCart
salla-button {

  background:
    #D39A49 !important;

  background-color:
    #D39A49 !important;

  padding:
    0 !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


.shadi-acoustic-category-page
.product-card__addToCart
.s-button-element {

  width:
    100% !important;

  min-width:
    100% !important;

  background:
    #D39A49 !important;

  background-color:
    #D39A49 !important;

  color:
    #171717 !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  box-shadow:
    none !important;

  font-weight:
    700 !important;
}


.shadi-acoustic-category-page
.product-card__addToCart
.s-button-element:hover {

  background:
    #BE873C !important;

  background-color:
    #BE873C !important;
}


/* MOBILE */
@media (max-width: 640px) {

  .shadi-acoustic-category-page
  .product-card {

    border-radius:
      14px !important;
  }


  .shadi-acoustic-category-page
  .product-card__image {

    height:
      220px !important;
  }


  .shadi-acoustic-category-page
  .product-card__title a {

    font-size:
      13px !important;
  }

}

/* =========================================================
   AUDIO CALIBRATION ABOUT CONTENT
========================================================= */

.shadi-about-kicker {
  display: block !important;

  margin: 0 0 12px 0 !important;

  color: #D39A49 !important;

  font-size: 15px !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;

  text-align: right !important;
  direction: rtl !important;
}


.shadi-calibration-title {
  margin: 0 0 18px 0 !important;

  color: #FFFFFF !important;

  font-size: clamp(30px, 3vw, 48px) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;

  text-align: right !important;
  direction: rtl !important;
}


.shadi-calibration-description {
  margin: 0 0 28px 0 !important;

  color: rgba(255,255,255,.62) !important;

  font-size: 15px !important;
  line-height: 2 !important;
  font-weight: 400 !important;

  text-align: right !important;
  direction: rtl !important;
}


/* MOBILE */
@media (max-width: 640px) {

  .shadi-about-kicker {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }


  .shadi-calibration-title {
    font-size: 28px !important;
    line-height: 1.35 !important;
    margin-bottom: 14px !important;
  }


  .shadi-calibration-description {
    font-size: 13px !important;
    line-height: 1.9 !important;
    margin-bottom: 22px !important;
  }

}







/* =========================================================
   AUDIO CALIBRATION
   EXACT CONTENT STYLE
========================================================= */

section.s-block--about
.shadi-calibration-content {
  width: 100% !important;

  direction: rtl !important;
  text-align: right !important;

  color: #fff !important;
}


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

section.s-block--about
.shadi-calibration-head {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


section.s-block--about
.shadi-calibration-kicker {
  display: block !important;

  margin: 0 0 14px 0 !important;

  color: #D39A49 !important;

  font-size: 16px !important;
  line-height: 1.4 !important;
  font-weight: 600 !important;

  text-align: right !important;
  direction: rtl !important;
}


section.s-block--about
.shadi-calibration-title {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  margin: 0 0 22px 0 !important;
  padding: 0 !important;

  color: #FFFFFF !important;

  font-size: clamp(38px, 3.6vw, 58px) !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;

  letter-spacing: -0.5px !important;

  text-align: right !important;
  direction: rtl !important;
}


section.s-block--about
.shadi-calibration-title span {
  display: block !important;
}


section.s-block--about
.shadi-calibration-description {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 0 24px 0 !important;

  color: rgba(255,255,255,.56) !important;

  font-size: 16px !important;
  line-height: 2 !important;
  font-weight: 400 !important;

  text-align: right !important;
  direction: rtl !important;
}


/* =========================================================
   STEPS
========================================================= */

section.s-block--about
.shadi-calibration-steps {
  width: 100% !important;

  margin-top: 2px !important;

  border-bottom:
    1px solid rgba(255,255,255,.08) !important;
}


section.s-block--about
.shadi-calibration-step {
  display: flex !important;
  flex-direction: row !important;

  align-items: flex-start !important;

  gap: 20px !important;

  width: 100% !important;

  padding: 18px 0 !important;

  border-top:
    1px solid rgba(255,255,255,.08) !important;

  direction: rtl !important;
}


section.s-block--about
.shadi-calibration-number {
  flex:
    0 0 30px !important;

  width: 30px !important;

  margin-top: 0 !important;

  color: #D39A49 !important;

  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;

  text-align: right !important;
}


section.s-block--about
.shadi-calibration-step-text {
  flex: 1 1 auto !important;

  min-width: 0 !important;

  text-align: right !important;
  direction: rtl !important;
}


section.s-block--about
.shadi-calibration-step-text h3 {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;

  color: #FFFFFF !important;

  font-size: 21px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;

  text-align: right !important;
}


section.s-block--about
.shadi-calibration-step-text p {
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,.50) !important;

  font-size: 14px !important;
  line-height: 1.85 !important;
  font-weight: 400 !important;

  text-align: right !important;
}


/* =========================================================
   ACTIONS
========================================================= */

section.s-block--about
.shadi-about-actions {
  margin-top: 25px !important;
}


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

@media (max-width: 640px) {

  section.s-block--about
  .shadi-calibration-kicker {
    margin-bottom: 9px !important;

    font-size: 13px !important;
  }


  section.s-block--about
  .shadi-calibration-title {
    margin-bottom: 15px !important;

    font-size: 30px !important;
    line-height: 1.3 !important;

    letter-spacing: 0 !important;
  }


  section.s-block--about
  .shadi-calibration-description {
    padding-bottom: 18px !important;

    font-size: 13px !important;
    line-height: 1.9 !important;
  }


  section.s-block--about
  .shadi-calibration-step {
    gap: 12px !important;

    padding: 14px 0 !important;
  }


  section.s-block--about
  .shadi-calibration-number {
    flex-basis: 24px !important;
    width: 24px !important;

    font-size: 15px !important;
  }


  section.s-block--about
  .shadi-calibration-step-text h3 {
    margin-bottom: 4px !important;

    font-size: 17px !important;
  }


  section.s-block--about
  .shadi-calibration-step-text p {
    font-size: 12px !important;
    line-height: 1.75 !important;
  }

}






















































































/* =========================================================
   HEADER ALWAYS ABOVE HERO HOTSPOTS
========================================================= */

/* الهيدر يفضل فوق كل عناصر الهيرو */
header,
.store-header,
.main-nav-container,
#mainnav,
.navbar {
  z-index: 9999 !important;
}


/* نخلي الهيرو نفسه في طبقة أقل */
#advanced-slider-0 {
  position: relative !important;
  z-index: 1 !important;
}


/* حاوية النقط */
#advanced-slider-0 .shadi-hotspots {
  z-index: 20 !important;
}


/* النقطة نفسها */
#advanced-slider-0 .shadi-hotspot {
  z-index: 21 !important;
}


/* اسم النقطة وقت الهوفر */
#advanced-slider-0 .shadi-hotspot-label {
  z-index: 22 !important;
}































































/* =========================================================
   SLIDER 518173904
   MOBILE TEXT ONLY
   لا يؤثر على الديسكتوب أو أي سلايدر آخر
========================================================= */

@media screen and (max-width: 640px) {

  section[component-id="518173904"]
  salla-slider#advanced-slider-3
  .advanced-slider__caption__inner__content__heading {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }


  section[component-id="518173904"]
  salla-slider#advanced-slider-3
  .advanced-slider__caption__inner__content__text {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }


  section[component-id="518173904"]
  salla-slider#advanced-slider-3
  .advanced-slider__caption__inner__content__button {
    font-size: 10px !important;
  }

}





































































/* =========================================================
   SHADI FOOTER ICONS
   ORIGINAL NORMAL STATE
   GLASS + LIGHT ON HOVER
========================================================= */


/* =========================================================
   CONTACT ICONS
   WhatsApp + Mobile
========================================================= */

.store-footer__contacts-row
selia-contacts
.contact-icon {

  position: relative !important;
  overflow: hidden !important;

  background: transparent !important;

  transform:
    translateY(0)
    scale(1);

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    color .28s ease !important;
}


/* =========================================================
   مهم جدًا
   ده الـ ::before الأصلي اللي بيرسم الأيقونة
   ممنوع نحط content هنا
========================================================= */

.store-footer__contacts-row
selia-contacts
.contact-icon::before {

  position: relative !important;
  z-index: 3 !important;
}


/* =========================================================
   LIGHT EFFECT
   استخدمنا ::after بدل ::before
========================================================= */

.store-footer__contacts-row
selia-contacts
.contact-icon::after {

  content: "" !important;

  position: absolute !important;

  z-index: 1 !important;

  width: 160% !important;
  height: 160% !important;

  left: -165% !important;
  top: 50% !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.36) 28%,
      rgba(255,255,255,.14) 50%,
      rgba(255,255,255,0) 72%
    ) !important;

  transition:
    left .55s cubic-bezier(.2,.75,.25,1),
    top .55s cubic-bezier(.2,.75,.25,1) !important;

  pointer-events: none !important;
}


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

.store-footer__contacts-row
selia-contacts
a:hover
.contact-icon {

  transform:
    translateY(-3px)
    scale(1.08) !important;

  background:
    rgba(255,255,255,.14) !important;

  -webkit-backdrop-filter:
    blur(9px)
    saturate(160%) !important;

  backdrop-filter:
    blur(9px)
    saturate(160%) !important;

  border-color:
    rgba(255,255,255,.95) !important;

  color:
    #ffffff !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 5px 14px rgba(0,0,0,.15),
    0 0 14px rgba(255,255,255,.13) !important;
}


/* تحريك الإضاءة داخل الدائرة */
.store-footer__contacts-row
selia-contacts
a:hover
.contact-icon::after {

  left: -28% !important;
  top: -32% !important;
}


/* Click */
.store-footer__contacts-row
selia-contacts
a:active
.contact-icon {

  transform:
    translateY(0)
    scale(.91) !important;

  transition-duration:
    .08s !important;
}



/* =========================================================
   SOCIAL ICONS
   Instagram / Snapchat / TikTok
========================================================= */

.store-footer__contacts-row
.store-footer__social
.s-social-link > a {

  position: relative !important;
  overflow: hidden !important;

  background: transparent !important;

  transform:
    translateY(0)
    scale(1);

  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}


/* الضوء المتحرك */
.store-footer__contacts-row
.store-footer__social
.s-social-link > a::before {

  content: "" !important;

  position: absolute !important;

  z-index: 1 !important;

  width: 160% !important;
  height: 160% !important;

  left: -165% !important;
  top: 50% !important;

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.72) 0%,
      rgba(255,255,255,.36) 28%,
      rgba(255,255,255,.14) 50%,
      rgba(255,255,255,0) 72%
    ) !important;

  transition:
    left .55s cubic-bezier(.2,.75,.25,1),
    top .55s cubic-bezier(.2,.75,.25,1) !important;

  pointer-events:
    none !important;
}


/* الأيقونة فوق اللمعة */
.store-footer__contacts-row
.store-footer__social
.s-social-icon {

  position: relative !important;
  z-index: 3 !important;

  transition:
    transform .28s ease !important;
}


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

.store-footer__contacts-row
.store-footer__social
.s-social-link > a:hover {

  transform:
    translateY(-3px)
    scale(1.08) !important;

  background:
    rgba(255,255,255,.14) !important;

  -webkit-backdrop-filter:
    blur(9px)
    saturate(160%) !important;

  backdrop-filter:
    blur(9px)
    saturate(160%) !important;

  border-color:
    rgba(255,255,255,.95) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(255,255,255,.08),
    0 5px 14px rgba(0,0,0,.15),
    0 0 14px rgba(255,255,255,.13) !important;
}


.store-footer__contacts-row
.store-footer__social
.s-social-link > a:hover::before {

  left: -28% !important;
  top: -32% !important;
}


.store-footer__contacts-row
.store-footer__social
.s-social-link > a:hover
.s-social-icon {

  transform:
    scale(1.05) !important;
}


/* Click */
.store-footer__contacts-row
.store-footer__social
.s-social-link > a:active {

  transform:
    translateY(0)
    scale(.91) !important;

  transition-duration:
    .08s !important;
}