/* =========================================================
   RAHEQ CLASSIC LUXURY V14
   Beige + Brown + Honey Gold
   Premium Cart + Refined Side Menu
   ========================================================= */


/* =========================================================
   1) COLORS
   ========================================================= */

:root {

  --rq-bg: #F8F2E7;
  --rq-card: #FFFDF8;
  --rq-card-soft: #FBF7EE;
  --rq-footer: #F1E5D2;

  --rq-brown: #6A4412;
  --rq-brown-mid: #80581C;
  --rq-brown-dark: #4C2F09;
  --rq-brown-deep: #392306;

  --rq-gold: #D2A634;
  --rq-gold-dark: #AA791F;
  --rq-gold-light: #F3E1B5;

  --rq-white: #FFFFFF;

  --rq-text: #272018;
  --rq-text-secondary: #665C50;
  --rq-text-muted: #8B8175;

  --rq-border: rgba(91, 62, 20, 0.14);

}


/* =========================================================
   2) GLOBAL BACKGROUND
   ========================================================= */

html,
body,
#app,
.app-inner,
.main-content,
main {

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

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

}


main .s-block,
main section {

  background-color:
    #F8F2E7 !important;

}


main .container {

  background:
    transparent !important;

}


/* =========================================================
   3) HEADER
   ========================================================= */

header,
.store-header,
.main-nav-container {

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

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

}


.store-header,
.main-nav-container {

  border-bottom:
    1px solid rgba(91, 62, 20, 0.08) !important;

  box-shadow:
    none !important;

}


header a,
.store-header a {

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

}


/* =========================================================
   4) PREMIUM TOP NAV + LUXURY SIDE DRAWER
   فصل الشريط العلوي عن القائمة الجانبية
   ========================================================= */

/* ---------------------------------------------------------
   A) الشريط الأفقي العلوي فقط
   --------------------------------------------------------- */

.main-nav-container .main-menu,
.main-nav-container nav {

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

  padding: 9px 10px !important;

  border: 1px solid rgba(226, 184, 75, 0.22) !important;
  border-radius: 20px !important;

  background:
    linear-gradient(
      135deg,
      #4C2F09 0%,
      #5A3709 18%,
      #6A4412 44%,
      #80581C 72%,
      #6A4412 100%
    ) !important;

  box-shadow:
    0 8px 20px rgba(76, 47, 9, 0.17),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -10px 22px rgba(57,35,6,0.10) !important;
}


.main-nav-container .main-menu::before,
.main-nav-container nav::before {

  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  border-radius: inherit !important;

  background:
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,0.08) 18%,
      transparent 35%,
      transparent 68%,
      rgba(243,225,181,0.06) 84%,
      transparent 100%
    ) !important;
}


.main-nav-container .main-menu li,
.main-nav-container nav li,
.main-nav-container .main-menu li:hover,
.main-nav-container nav li:hover {

  background: transparent !important;
  background-color: transparent !important;
}


.main-nav-container .main-menu a,
.main-nav-container nav a {

  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;

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

  min-height: 48px !important;
  padding: 9px 17px !important;
  margin: 0 2px !important;

  color: #FFF8EF !important;
  background: transparent !important;
  background-color: transparent !important;

  border: 1px solid transparent !important;
  border-radius: 13px !important;

  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 1px rgba(57,35,6,0.16) !important;

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


.main-nav-container .main-menu a::after,
.main-nav-container nav a::after {

  content: "" !important;
  position: absolute !important;
  right: 16px !important;
  left: 16px !important;
  bottom: 6px !important;

  height: 2px !important;
  border-radius: 999px !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #F3E1B5 25%,
      #D2A634 50%,
      #F3E1B5 75%,
      transparent
    ) !important;

  opacity: 0 !important;
  transform: scaleX(.28) !important;
  box-shadow: 0 0 9px rgba(210,166,52,.28) !important;

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


@media (hover: hover) {

  .main-nav-container .main-menu a:hover,
  .main-nav-container nav a:hover,
  .main-nav-container .main-menu li:hover > a,
  .main-nav-container nav li:hover > a {

    color: #FFFDF8 !important;

    background:
      linear-gradient(
        135deg,
        rgba(243,225,181,.11),
        rgba(210,166,52,.17),
        rgba(255,255,255,.08)
      ) !important;

    border-color: rgba(226,184,75,.28) !important;

    transform: translateY(-2px) !important;

    box-shadow:
      0 7px 16px rgba(76,47,9,.17),
      inset 0 1px 0 rgba(255,255,255,.13) !important;
  }


  .main-nav-container .main-menu a:hover::after,
  .main-nav-container nav a:hover::after,
  .main-nav-container .main-menu li:hover > a::after,
  .main-nav-container nav li:hover > a::after {

    opacity: 1 !important;
    transform: scaleX(1) !important;
  }
}


.main-nav-container .main-menu a.active,
.main-nav-container nav a.active,
.main-nav-container .main-menu a[aria-current="page"],
.main-nav-container nav a[aria-current="page"],
.main-nav-container .main-menu .is-active > a,
.main-nav-container nav .is-active > a {

  color: #FFFDF8 !important;

  background:
    linear-gradient(
      135deg,
      rgba(243,225,181,.13),
      rgba(210,166,52,.19),
      rgba(255,255,255,.08)
    ) !important;

  border-color: rgba(226,184,75,.30) !important;
}


.main-nav-container .main-menu a.active::after,
.main-nav-container nav a.active::after,
.main-nav-container .main-menu a[aria-current="page"]::after,
.main-nav-container nav a[aria-current="page"]::after,
.main-nav-container .main-menu .is-active > a::after,
.main-nav-container nav .is-active > a::after {

  opacity: 1 !important;
  transform: scaleX(1) !important;
}


/* ---------------------------------------------------------
   B) القائمة الجانبية - تصميم مستقل ونظيف
   --------------------------------------------------------- */

.sub-nav {

  background: rgba(39, 32, 24, 0.26) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}


.sub-nav .sub-nav-content {

  position: relative !important;
  overflow: visible !important;

  background:
    linear-gradient(
      180deg,
      #FFFDF8 0%,
      #FBF7EE 56%,
      #F8F2E7 100%
    ) !important;

  border-left: 1px solid rgba(210,166,52,.25) !important;
  border-radius: 30px 0 0 30px !important;

  box-shadow:
    -18px 0 45px rgba(57,35,6,.17),
    inset 1px 0 0 rgba(255,255,255,.70) !important;
}


/* رأس القائمة */
.sub-nav .sub-nav-header,
.sub-nav-header {

  position: relative !important;
  min-height: 84px !important;

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

  padding: 18px 52px 16px !important;

  color: #4C2F09 !important;

  background:
    linear-gradient(
      180deg,
      #FFFDF8 0%,
      #F8F2E7 100%
    ) !important;

  border-bottom: 1px solid rgba(106,68,18,.10) !important;
  border-radius: 30px 0 0 0 !important;
}


.sub-nav .sub-nav-header::after,
.sub-nav-header::after {

  content: "" !important;
  position: absolute !important;
  right: 50% !important;
  bottom: 10px !important;

  width: 56px !important;
  height: 3px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      #D2A634 25%,
      #A87920 50%,
      #D2A634 75%,
      transparent
    ) !important;

  transform: translateX(50%) !important;
}


.sub-nav .sub-nav-header,
.sub-nav .sub-nav-header *,
.sub-nav-header,
.sub-nav-header * {

  color: #4C2F09 !important;
}


/* القائمة نفسها */
.sub-nav .main-menu {

  margin: 0 !important;
  padding: 14px 14px 18px !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


.sub-nav .main-menu > li {

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

  background: transparent !important;
  border: 0 !important;
}


.sub-nav .main-menu > li > a {

  position: relative !important;

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

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

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

  color: #4C2F09 !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.78) 0%,
      rgba(248,242,231,.92) 100%
    ) !important;

  border: 1px solid rgba(106,68,18,.11) !important;
  border-radius: 14px !important;

  box-shadow:
    0 3px 9px rgba(76,47,9,.035),
    inset 0 1px 0 rgba(255,255,255,.74) !important;

  font-weight: 700 !important;
  text-shadow: none !important;
  text-decoration: none !important;

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


/* لمسة ذهبية صغيرة داخل كل خيار */
.sub-nav .main-menu > li > a::before {

  content: "" !important;

  width: 4px !important;
  height: 20px !important;

  flex: 0 0 4px !important;
  margin-left: 10px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      #F3E1B5,
      #D2A634,
      #A87920
    ) !important;

  opacity: .58 !important;

  transition:
    height .18s ease,
    opacity .18s ease,
    box-shadow .18s ease !important;
}


@media (hover: hover) {

  .sub-nav .main-menu > li > a:hover,
  .sub-nav .main-menu > li:hover > a {

    color: #4C2F09 !important;

    background:
      linear-gradient(
        135deg,
        #FFF9EB 0%,
        #F5E6BD 52%,
        #F8F2E7 100%
      ) !important;

    border-color: rgba(210,166,52,.32) !important;

    transform: translateX(-4px) !important;

    box-shadow:
      0 7px 16px rgba(76,47,9,.08),
      0 0 0 1px rgba(210,166,52,.05),
      inset 0 1px 0 rgba(255,255,255,.72) !important;
  }


  .sub-nav .main-menu > li > a:hover::before,
  .sub-nav .main-menu > li:hover > a::before {

    height: 28px !important;
    opacity: 1 !important;
    box-shadow: 0 0 10px rgba(210,166,52,.25) !important;
  }
}


/* العنصر النشط في القائمة الجانبية */
.sub-nav .main-menu > li > a.active,
.sub-nav .main-menu > li > a[aria-current="page"],
.sub-nav .main-menu > li.is-active > a {

  color: #FFFDF8 !important;

  background:
    linear-gradient(
      135deg,
      #4C2F09 0%,
      #6A4412 50%,
      #A87920 100%
    ) !important;

  border-color: #D2A634 !important;

  box-shadow:
    0 7px 16px rgba(76,47,9,.18),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}


.sub-nav .main-menu > li > a.active::before,
.sub-nav .main-menu > li > a[aria-current="page"]::before,
.sub-nav .main-menu > li.is-active > a::before {

  background: #F3E1B5 !important;
  opacity: 1 !important;
}


/* القوائم الفرعية إن وجدت */
.sub-nav .main-menu li ul,
.sub-nav .main-menu .sub-menu,
.sub-nav .main-menu [class*="categories"] {

  margin: 6px 8px 2px !important;
  padding: 7px !important;

  background: rgba(255,253,248,.72) !important;

  border: 1px solid rgba(106,68,18,.08) !important;
  border-radius: 12px !important;
}


.sub-nav .main-menu li ul a,
.sub-nav .main-menu .sub-menu a,
.sub-nav .main-menu [class*="categories"] a {

  color: #5A421F !important;
  background: transparent !important;
  border-radius: 9px !important;
}


@media (hover: hover) {

  .sub-nav .main-menu li ul a:hover,
  .sub-nav .main-menu .sub-menu a:hover,
  .sub-nav .main-menu [class*="categories"] a:hover {

    color: #4C2F09 !important;
    background: #F5E6BD !important;
  }
}


/* تغيير العملة واللغة */
.sub-nav .main-menu li#ls_switcher_mobile {

  margin-top: 13px !important;
  padding-top: 13px !important;

  border-top: 1px solid rgba(106,68,18,.12) !important;
}


.sub-nav .main-menu li#ls_switcher_mobile .btn,
.sub-nav .main-menu li#ls_switcher_mobile > a {

  color: #4C2F09 !important;

  background:
    linear-gradient(
      135deg,
      #FFF8E9,
      #F3E1B5
    ) !important;

  border: 1px solid rgba(210,166,52,.28) !important;
  border-radius: 14px !important;
}


/* ---------------------------------------------------------
   C) زر إغلاق القائمة - صغير ودائري بدل الأحمر الطولي
   selector الحقيقي الشائع في سلة: .sub-nav__close
   --------------------------------------------------------- */

.sub-nav__close,
.sub-nav .sub-nav__close {

  position: absolute !important;
  top: 23px !important;
  left: -19px !important;
  right: auto !important;
  bottom: auto !important;

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

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

  padding: 0 !important;

  color: #FFFDF8 !important;

  background:
    linear-gradient(
      135deg,
      #4C2F09 0%,
      #6A4412 48%,
      #A87920 100%
    ) !important;

  background-color: #6A4412 !important;

  border: 1px solid #D2A634 !important;
  border-radius: 50% !important;

  box-shadow:
    0 7px 16px rgba(76,47,9,.20),
    0 0 0 4px rgba(248,242,231,.75),
    inset 0 1px 0 rgba(255,255,255,.15) !important;

  transform: none !important;
  z-index: 20 !important;

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


.sub-nav__close svg,
.sub-nav__close i,
.sub-nav__close span,
.sub-nav .sub-nav__close svg,
.sub-nav .sub-nav__close i,
.sub-nav .sub-nav__close span {

  color: #FFFDF8 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


@media (hover: hover) {

  .sub-nav__close:hover,
  .sub-nav .sub-nav__close:hover {

    background:
      linear-gradient(
        135deg,
        #5A3709 0%,
        #80581C 50%,
        #C1912E 100%
      ) !important;

    border-color: #E2B84B !important;

    transform: rotate(8deg) scale(1.06) !important;

    box-shadow:
      0 10px 20px rgba(76,47,9,.24),
      0 0 0 4px rgba(248,242,231,.82),
      inset 0 1px 0 rgba(255,255,255,.18) !important;
  }
}


.sub-nav__close:active,
.sub-nav .sub-nav__close:active {

  transform: scale(.94) !important;
}


/* ---------------------------------------------------------
   D) احتياط لبعض أسماء زر الإغلاق في الثيمات المعدلة
   --------------------------------------------------------- */

.sub-nav .close-menu,
.sub-nav .menu-close,
.sub-nav .sidebar-close,
.sub-nav .drawer-close,
.sub-nav .offcanvas-close {

  color: #FFFDF8 !important;
  background: #6A4412 !important;
  border-color: #D2A634 !important;
  border-radius: 50% !important;
}


/* الجوال */
@media (max-width: 900px) {

  .main-nav-container .main-menu,
  .main-nav-container nav {
    border-radius: 18px !important;
  }


  .main-nav-container .main-menu a,
  .main-nav-container nav a {
    min-height: 45px !important;
    padding: 8px 13px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }


  .sub-nav .sub-nav-content {
    width: min(88vw, 390px) !important;
    border-radius: 26px 0 0 26px !important;
  }


  .sub-nav .sub-nav-header,
  .sub-nav-header {
    min-height: 78px !important;
    border-radius: 26px 0 0 0 !important;
  }


  .sub-nav .main-menu {
    padding: 12px !important;
  }


  .sub-nav .main-menu > li {
    margin-bottom: 6px !important;
  }


  .sub-nav .main-menu > li > a {
    min-height: 49px !important;
    padding: 10px 14px !important;
    border-radius: 13px !important;
    font-size: 14px !important;
  }


  .sub-nav__close,
  .sub-nav .sub-nav__close {
    top: 20px !important;
    left: -17px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
  }
}


/* =========================================================
   5) ENHANCED FIXED BANNER
   ========================================================= */

.s-block--enhanced-fixed-banner,
.s-block--enhanced-fixed-banner .container,
.s-block--enhanced-fixed-banner .banners,
.s-block--enhanced-fixed-banner .banners a.banner {

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

}


.s-block--enhanced-fixed-banner .banners a.banner {

  display:
    block !important;

}


.s-block--enhanced-fixed-banner .banners a.banner img {

  display:
    block !important;

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

  border-radius:
    var(--medium-curve) !important;

  box-shadow:
    none !important;

}


/* =========================================================
   6) NORMAL BANNERS
   ========================================================= */

.s-block--banners,
.fixed-banner,
.banner {

  background:
    #F8F2E7 !important;

}


.s-block--banners img,
.fixed-banner img,
.banner img {

  display:
    block !important;

  background:
    #F8F2E7 !important;

  border-radius:
    16px !important;

  box-shadow:
    none !important;

}


/* =========================================================
   7) ENHANCED SQUARE / HEX CATEGORIES
   ========================================================= */

.f_enhanced-square-photos {

  width:
    100% !important;

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

}


.f_enhanced-square-photos .container {

  width:
    100% !important;

  max-width:
    1400px !important;

  margin:
    0 auto !important;

  background:
    #F8F2E7 !important;

}


/* =========================================================
   8) CENTER HEX CATEGORIES
   ========================================================= */

.f_enhanced-square-photos .row {

  width:
    100% !important;

  display:
    flex !important;

  flex-wrap:
    nowrap !important;

  justify-content:
    center !important;

  align-items:
    flex-start !important;

  gap:
    28px !important;

  margin:
    0 auto !important;

}


.f_enhanced-square-photos .swiper-wrapper {

  display:
    flex !important;

  justify-content:
    center !important;

  align-items:
    flex-start !important;

  gap:
    28px !important;

  margin:
    0 auto !important;

}


.f_enhanced-square-photos
*:has(> .f_image-entry) {

  display:
    flex !important;

  flex-direction:
    row !important;

  flex-wrap:
    nowrap !important;

  justify-content:
    center !important;

  align-items:
    flex-start !important;

  gap:
    28px !important;

  margin-inline:
    auto !important;

}


/* =========================================================
   9) HEX ITEM
   ========================================================= */

.f_enhanced-square-photos .f_image-entry {

  flex:
    0 1 250px !important;

  width:
    250px !important;

  max-width:
    250px !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  float:
    none !important;

  background:
    #F8F2E7 !important;

  border:
    0 !important;

  box-shadow:
    none !important;

  text-align:
    center !important;

}


.f_enhanced-square-photos .f_image-entry a {

  width:
    100% !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  background:
    #F8F2E7 !important;

  border:
    0 !important;

  box-shadow:
    none !important;

}


/* =========================================================
   10) HEX IMAGES
   ========================================================= */

.f_enhanced-square-photos .f_image-entry img {

  display:
    block !important;

  width:
    100% !important;

  max-width:
    250px !important;

  height:
    auto !important;

  margin:
    0 auto 8px !important;

  padding:
    0 !important;

  object-fit:
    contain !important;

  object-position:
    center !important;

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

  border:
    0 !important;

  box-shadow:
    none !important;

}


.f_enhanced-square-photos:not(.f_rounded-photos)
.f_image-entry img {

  border-radius:
    2rem !important;

}


@supports (color: rgb(0 0 0 / 0)) and (top: var(--f)) {

  .f_enhanced-square-photos .f_image-entry img {

    background-color:
      #F8F2E7 !important;

  }

}


/* =========================================================
   11) HEX TEXT
   ========================================================= */

.f_enhanced-square-photos .f_image-entry h2,
.f_enhanced-square-photos .f_image-entry h3,
.f_enhanced-square-photos .f_image-entry h4,
.f_enhanced-square-photos .f_image-entry p,
.f_enhanced-square-photos .f_image-entry span {

  width:
    100% !important;

  color:
    #4C3213 !important;

  font-weight:
    700 !important;

  line-height:
    1.4 !important;

  text-align:
    center !important;

}


/* =========================================================
   12) SECTION TITLES
   ========================================================= */

.s-block__title,
.section-title {

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

}


.s-block__title h2,
.s-block__title h3,
.section-title h2,
.section-title h3 {

  color:
    var(--rq-brown-deep) !important;

  font-weight:
    800 !important;

}


.s-block__title p,
.section-title p {

  color:
    var(--rq-text-secondary) !important;

}


/* =========================================================
   13) PRODUCT CARDS
   نترك ترتيب المنتجات للثيم نفسه
   ========================================================= */

.s-product-card-entry,
.product-entry,
.product-card {

  overflow:
    hidden !important;

  background:
    #FFFDF8 !important;

  border:
    1px solid rgba(106, 68, 18, 0.17) !important;

  border-radius:
    16px !important;

  box-shadow:
    0 4px 12px rgba(75, 48, 10, 0.04) !important;

  padding:
    0 !important;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;

}


@media (hover: hover) {

  .s-product-card-entry:hover,
  .product-entry:hover,
  .product-card:hover {

    border-color:
      rgba(210, 166, 52, 0.40) !important;

    box-shadow:
      0 8px 20px rgba(75, 48, 10, 0.08) !important;

    transform:
      translateY(-2px) !important;

  }

}


/* =========================================================
   14) PRODUCT IMAGE AREA
   ========================================================= */

.s-product-card-image,
.product-entry__image,
.product-card__image,
.s-product-card-entry .s-product-card-image,
.s-product-card-entry [class*="product-card-image"] {

  position:
    relative !important;

  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  line-height:
    0 !important;

  overflow:
    hidden !important;

  background:
    #F8F2E7 !important;

  border:
    0 !important;

  box-shadow:
    none !important;

}


/* =========================================================
   15) IMAGE LINK
   ========================================================= */

.s-product-card-image > a,
.product-entry__image > a,
.product-card__image > a,
.s-product-card-entry [class*="image"] > a {

  display:
    block !important;

  width:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  line-height:
    0 !important;

  overflow:
    hidden !important;

  background:
    #F8F2E7 !important;

}


/* =========================================================
   16) PRODUCT IMAGE
   ========================================================= */

.s-product-card-image img,
.product-entry__image img,
.product-card__image img,
.s-product-card-entry [class*="product-card-image"] img {

  display:
    block !important;

  width:
    100% !important;

  height:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;

  object-fit:
    cover !important;

  object-position:
    center center !important;

  background:
    #F8F2E7 !important;

  border:
    0 !important;

  box-shadow:
    none !important;

}


/* =========================================================
   17) REMOVE IMAGE WHITESPACE
   ========================================================= */

.s-product-card-image::before,
.s-product-card-image::after,
.product-entry__image::before,
.product-entry__image::after,
.product-card__image::before,
.product-card__image::after {

  display:
    none !important;

  content:
    none !important;

}


.s-product-card-entry [class*="image-wrapper"],
.s-product-card-entry [class*="image-container"],
.product-entry [class*="image-wrapper"],
.product-card [class*="image-wrapper"] {

  margin:
    0 !important;

  padding:
    0 !important;

  background:
    #F8F2E7 !important;

  overflow:
    hidden !important;

}


/* =========================================================
   18) PRODUCT CONTENT
   ========================================================= */

.s-product-card-content,
.product-entry__content,
.product-card__content {

  margin:
    0 !important;

  padding:
    14px 16px 16px !important;

  background:
    #FFFDF8 !important;

  border:
    0 !important;

}


/* =========================================================
   19) PRODUCT TITLE
   ========================================================= */

.s-product-card-content-title,
.s-product-card-content-title a,
.product-entry__title,
.product-card h3,
.product-card h4 {

  margin-top:
    0 !important;

  color:
    #272018 !important;

  font-weight:
    700 !important;

  line-height:
    1.55 !important;

}


/* =========================================================
   20) PRICES
   ========================================================= */

.s-product-card-price,
.product-entry__price,
.s-product-card-sale-price,
.sale-price {

  color:
    #4C2F09 !important;

  font-weight:
    900 !important;

}


.s-product-card-old-price,
.old-price {

  color:
    #A34840 !important;

}


/* =========================================================
   21) PROMOTION LABEL
   ========================================================= */

.s-product-card-promotion-title,
.product-promotion,
[class*="promotion-title"] {

  background:
    #F5D94B !important;

  color:
    #8A301E !important;

  border:
    0 !important;

  font-weight:
    800 !important;

  box-shadow:
    none !important;

}


/* =========================================================
   22) SALE BADGE
   ========================================================= */

.s-product-card-sale,
.badge--sale,
[class*="sale-badge"] {

  background:
    #9D3C31 !important;

  color:
    #FFFFFF !important;

  border:
    0 !important;

  border-radius:
    999px !important;

}


/* =========================================================
   23) PREMIUM ADD TO CART BUTTON
   بني + عسلي + تأثيرات
   ========================================================= */

.s-product-card-add-btn,
.s-button-primary,
button.add-to-cart,
.add-to-cart,
.product-entry__add-to-cart {

  position:
    relative !important;

  isolation:
    isolate !important;

  overflow:
    hidden !important;

  min-height:
    46px !important;

  padding:
    9px 15px !important;

  background:
    linear-gradient(
      135deg,
      #4C2F09 0%,
      #6A4412 42%,
      #A87920 100%
    ) !important;

  background-color:
    #6A4412 !important;

  border:
    1px solid #D2A634 !important;

  border-radius:
    12px !important;

  color:
    #FFFFFF !important;

  font-weight:
    800 !important;

  letter-spacing:
    0 !important;

  text-shadow:
    0 1px 1px rgba(57, 35, 6, 0.18) !important;

  box-shadow:
    0 5px 12px rgba(76, 47, 9, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    filter 0.18s ease !important;

}


/* =========================================================
   24) BUTTON ICONS
   ========================================================= */

.s-product-card-add-btn svg,
.s-product-card-add-btn i,
button.add-to-cart svg,
.add-to-cart svg,
.product-entry__add-to-cart svg {

  color:
    #F8E7B1 !important;

  stroke:
    currentColor !important;

  transition:
    transform 0.20s ease !important;

}


/* =========================================================
   25) ADD TO CART SHINE
   لمعة خفيفة
   ========================================================= */

.s-product-card-add-btn::before,
button.add-to-cart::before,
.add-to-cart::before,
.product-entry__add-to-cart::before {

  content:
    "";

  position:
    absolute !important;

  top:
    -50% !important;

  left:
    -70% !important;

  width:
    42% !important;

  height:
    200% !important;

  z-index:
    -1 !important;

  pointer-events:
    none !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent
    ) !important;

  transform:
    rotate(18deg) !important;

  transition:
    left 0.55s ease !important;

}


/* =========================================================
   26) BUTTON HOVER
   ========================================================= */

@media (hover: hover) {

  .s-product-card-add-btn:hover,
  .s-button-primary:hover,
  button.add-to-cart:hover,
  .add-to-cart:hover,
  .product-entry__add-to-cart:hover {

    background:
      linear-gradient(
        135deg,
        #5A3709 0%,
        #80581C 46%,
        #C1912E 100%
      ) !important;

    border-color:
      #E2B84B !important;

    color:
      #FFFFFF !important;

    transform:
      translateY(-2px) !important;

    box-shadow:
      0 8px 18px rgba(76, 47, 9, 0.25),
      0 0 0 2px rgba(210, 166, 52, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    filter:
      saturate(1.05) !important;

  }


  .s-product-card-add-btn:hover::before,
  button.add-to-cart:hover::before,
  .add-to-cart:hover::before,
  .product-entry__add-to-cart:hover::before {

    left:
      130% !important;

  }


  .s-product-card-add-btn:hover svg,
  button.add-to-cart:hover svg,
  .add-to-cart:hover svg,
  .product-entry__add-to-cart:hover svg {

    transform:
      translateY(-1px) rotate(-5deg) scale(1.06) !important;

  }

}


/* =========================================================
   27) BUTTON ACTIVE / CLICK
   ========================================================= */

.s-product-card-add-btn:active,
.s-button-primary:active,
button.add-to-cart:active,
.add-to-cart:active,
.product-entry__add-to-cart:active {

  transform:
    translateY(0) scale(0.98) !important;

  box-shadow:
    0 3px 8px rgba(76, 47, 9, 0.18),
    inset 0 2px 4px rgba(57, 35, 6, 0.10) !important;

}


/* =========================================================
   28) SALLA WEB COMPONENT BUTTON
   ========================================================= */

salla-add-product-button,
salla-button.s-product-card-add-btn {

  border-radius:
    12px !important;

}


salla-add-product-button .s-button-element,
salla-button.s-product-card-add-btn .s-button-element,
.s-product-card-add-btn .s-button-element {

  min-height:
    46px !important;

  background:
    linear-gradient(
      135deg,
      #4C2F09 0%,
      #6A4412 42%,
      #A87920 100%
    ) !important;

  border:
    1px solid #D2A634 !important;

  border-radius:
    12px !important;

  color:
    #FFFFFF !important;

  font-weight:
    800 !important;

  box-shadow:
    0 5px 12px rgba(76, 47, 9, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease !important;

}


@media (hover: hover) {

  salla-add-product-button .s-button-element:hover,
  salla-button.s-product-card-add-btn .s-button-element:hover,
  .s-product-card-add-btn .s-button-element:hover {

    background:
      linear-gradient(
        135deg,
        #5A3709 0%,
        #80581C 46%,
        #C1912E 100%
      ) !important;

    box-shadow:
      0 8px 18px rgba(76, 47, 9, 0.24),
      inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;

    transform:
      translateY(-2px) !important;

  }

}


/* =========================================================
   29) WISHLIST
   ========================================================= */

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

  background:
    #FFFDF8 !important;

  color:
    #9A7A42 !important;

  border:
    1px solid rgba(106, 68, 18, 0.12) !important;

  border-radius:
    50% !important;

  box-shadow:
    none !important;

  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    transform 0.18s ease !important;

}


@media (hover: hover) {

  .s-product-card-wishlist-btn:hover,
  .wishlist-btn:hover {

    color:
      #6A4412 !important;

    background:
      #F3E1B5 !important;

    transform:
      scale(1.06) !important;

  }

}


/* =========================================================
   30) TESTIMONIALS
   ========================================================= */

.s-block--enhanced-testimonials,
.f_enhanced-testimonials,
[class*="enhanced-testimonials"] {

  background:
    #F8F2E7 !important;

}


.testimonial,
.testimonial-card,
.review-card {

  background:
    #FFFDF8 !important;

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

  border-radius:
    20px !important;

  box-shadow:
    0 6px 18px rgba(75, 48, 10, 0.05) !important;

}


/* =========================================================
   31) FAQ
   ========================================================= */

.s-accordion-item,
.accordion-item,
details {

  overflow:
    hidden !important;

  margin-bottom:
    9px !important;

  background:
    #FFFDF8 !important;

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

  border-radius:
    12px !important;

  box-shadow:
    none !important;

}


.s-accordion-item button,
.accordion-header,
details summary {

  color:
    #272018 !important;

  font-weight:
    700 !important;

}


/* =========================================================
   32) INPUTS
   ========================================================= */

input,
select,
textarea {

  background:
    #FFFFFF !important;

  color:
    #000000 !important;

  border:
    1px solid rgba(83, 61, 29, 0.18) !important;

  border-radius:
    9px !important;

}


input:focus,
select:focus,
textarea:focus {

  border-color:
    var(--rq-gold) !important;

  outline:
    none !important;

}


/* =========================================================
   33) FOOTER
   ========================================================= */

footer,
.store-footer {

  background:
    #F1E5D2 !important;

  color:
    #383838 !important;

  border-top:
    1px solid rgba(91, 62, 20, 0.12) !important;

}


footer h3,
footer h4,
.store-footer h3,
.store-footer h4 {

  color:
    #272018 !important;

}


/* =========================================================
   35) TABLET HEX CATEGORIES
   ========================================================= */

@media (max-width: 900px) {

  .f_enhanced-square-photos .row,
  .f_enhanced-square-photos .swiper-wrapper,
  .f_enhanced-square-photos
  *:has(> .f_image-entry) {

    gap:
      14px !important;

  }


  .f_enhanced-square-photos .f_image-entry {

    flex:
      0 1 190px !important;

    width:
      190px !important;

    max-width:
      190px !important;

  }


  .f_enhanced-square-photos .f_image-entry img {

    max-width:
      190px !important;

  }

}


/* =========================================================
   36) MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .f_enhanced-square-photos .container {

    padding-left:
      8px !important;

    padding-right:
      8px !important;

  }


  .f_enhanced-square-photos .row,
  .f_enhanced-square-photos .swiper-wrapper,
  .f_enhanced-square-photos
  *:has(> .f_image-entry) {

    width:
      100% !important;

    display:
      flex !important;

    flex-wrap:
      nowrap !important;

    justify-content:
      center !important;

    gap:
      7px !important;

    margin:
      0 auto !important;

    transform:
      none !important;

  }


  .f_enhanced-square-photos .f_image-entry {

    flex:
      0 1 calc((100vw - 38px) / 3) !important;

    width:
      calc((100vw - 38px) / 3) !important;

    max-width:
      125px !important;

  }


  .f_enhanced-square-photos .f_image-entry img {

    max-width:
      125px !important;

  }


  .f_enhanced-square-photos .f_image-entry h2,
  .f_enhanced-square-photos .f_image-entry h3,
  .f_enhanced-square-photos .f_image-entry h4,
  .f_enhanced-square-photos .f_image-entry span,
  .f_enhanced-square-photos .f_image-entry p {

    font-size:
      12px !important;

  }


  .s-block--enhanced-fixed-banner .banners a.banner img,
  .s-block--banners img,
  .fixed-banner img,
  .banner img {

    border-radius:
      12px !important;

  }


  /* PRODUCT CARD */

  .s-product-card-entry,
  .product-entry,
  .product-card {

    border-radius:
      12px !important;

  }


  .s-product-card-content,
  .product-entry__content,
  .product-card__content {

    padding:
      10px 11px 12px !important;

  }


  /* زر السلة بالجوال */

  .s-product-card-add-btn,
  .s-button-primary,
  button.add-to-cart,
  .add-to-cart,
  .product-entry__add-to-cart {

    min-height:
      41px !important;

    padding:
      7px 9px !important;

    border-radius:
      10px !important;

    font-size:
      12px !important;

    box-shadow:
      0 4px 10px rgba(76, 47, 9, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

  }


  salla-add-product-button .s-button-element,
  salla-button.s-product-card-add-btn .s-button-element,
  .s-product-card-add-btn .s-button-element {

    min-height:
      41px !important;

    border-radius:
      10px !important;

    font-size:
      12px !important;

  }

}


/* =========================================================
   37) SMALL MOBILE
   ========================================================= */

@media (max-width: 390px) {

  .f_enhanced-square-photos .row,
  .f_enhanced-square-photos .swiper-wrapper,
  .f_enhanced-square-photos
  *:has(> .f_image-entry) {

    gap:
      5px !important;

  }


  .f_enhanced-square-photos .f_image-entry {

    flex:
      0 1 calc((100vw - 28px) / 3) !important;

    width:
      calc((100vw - 28px) / 3) !important;

    max-width:
      116px !important;

  }


  .f_enhanced-square-photos .f_image-entry img {

    max-width:
      116px !important;

  }


  .s-product-card-add-btn,
  button.add-to-cart,
  .add-to-cart {

    min-height:
      39px !important;

    font-size:
      11px !important;

  }

}


/* =========================================================
   38) REDUCED MOTION
   ========================================================= */

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

  .s-product-card-entry,
  .product-entry,
  .product-card,
  .s-product-card-add-btn,
  .s-product-card-add-btn::before,
  button.add-to-cart,
  button.add-to-cart::before,
  .add-to-cart,
  .add-to-cart::before,
  .f_enhanced-square-photos .f_image-entry {

    transition:
      none !important;

  }

}


/* =========================================================
   39) FINAL BEIGE OVERRIDE
   ========================================================= */

.s-block--enhanced-fixed-banner,
.s-block--enhanced-fixed-banner .container,
.s-block--enhanced-fixed-banner .banners,
.s-block--enhanced-fixed-banner .banners a.banner,
.f_enhanced-square-photos,
.f_enhanced-square-photos .container,
.f_enhanced-square-photos .f_image-entry,
.f_enhanced-square-photos .f_image-entry a {

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

}


.s-block--enhanced-fixed-banner .banners a.banner img,
.f_enhanced-square-photos .f_image-entry img {

  background:
    #F8F2E7 !important;

  background-color:
    #F8F2E7 !important;

}


/* =========================================================
   END
   RAHEQ CLASSIC LUXURY V10
   ========================================================= */