/* Add custom CSS styles below */ 
.s-user-menu-trigger {
    background-color: transparent;
}
/* Full-width fixed banner */
section[data-testid="store-home-fixed-banner"] {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 0;
}

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

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

section[data-testid="store-home-fixed-banner"] picture,
section[data-testid="store-home-fixed-banner"] img {
    display: block;
    width: 100%;
    max-width: 100%;
}

section[data-testid="store-home-fixed-banner"] img {
    height: auto !important;
    object-fit: contain;
}
section.s-block.s-block--fixed-banner.wide-placeholder {
    margin-top: 0;
}

.s-product-card-content-main {
    text-align: center;
}
.s-product-card-content-sub {
    text-align: center !important;
    display: block;
}
/* ==========================================================================
   فيّة العود — PART 01 · أقسام سلايدر المنتجات   (مراجعة ب)
   Target : section.s-block--best-offers
   --------------------------------------------------------------------------
   تغيير المراجعة ب:
   خلفية القسم صارت شريطًا ممتدًا من حافة الشاشة إلى حافتها (full-bleed)
   بدل اللوح المحدود بحدّ ونصف قطر. لا يوجد أي إطار حول البطاقات.
   ========================================================================== */

:root {
  --oud-plum: #391b27;
  --oud-brass: #b98b4e;
  --oud-brass-soft: #e0c79b;
  --oud-brass-deep: #8a6431;
  --oud-muted: #8b7566;

  --page-bg: #fdfaf5;        /* الصفحة */
  --band-bg: #f6eee2;        /* شريط القسم */
  --card-bg: #ffffff;        /* البطاقة */

  --brass-line: rgba(185, 139, 78, .26);
  --plum-line: rgba(57, 27, 39, .10);

  --grad-brass: linear-gradient(135deg, #8a6431, #e0c79b 48%, #b98b4e);
  --grad-plum: linear-gradient(150deg, #391b27, #24101a);

  --font-display: 'El Messiri', 'PingARLT', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .28, 1);
}


/* ==========================================================================
   1 · خلفية القسم — شريط ممتد بعرض الشاشة
   ========================================================================== */
body#app.theme-raed { background: var(--page-bg); }

section.s-block--best-offers {
  position: relative;
  overflow: visible !important;   /* يسمح للشريط بتجاوز حدود الحاوية */
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  margin-block: 0;
  z-index: 0;
}

/* الشريط نفسه — خلف كل شيء */
section.s-block--best-offers::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 50%;
  width: 100vw;
  transform: translateX(50%);
  background: var(--band-bg);
  /* خيطان نحاسيان رفيعان يحدّان الشريط أفقيًا */
  box-shadow:
    inset 0 1px 0 rgba(185, 139, 78, .2),
    inset 0 -1px 0 rgba(185, 139, 78, .2);
}
[dir="ltr"] section.s-block--best-offers::before { transform: translateX(-50%); }

/* السلايدر يقصّ نفسه — لا حاجة لقصّ القسم */
section.s-block--best-offers .s-slider-container { overflow: hidden; }

/* لإلغاء الشريط كليًا: احذف الكتلة أعلاه، أو استبدل اللون بـ transparent */


/* ==========================================================================
   2 · رأس القسم
   ========================================================================== */
.s-slider-block__title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.15rem, 2.5vw, 1.75rem);
  padding-bottom: .9rem;
}

.s-slider-block__title::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--brass-line), rgba(185, 139, 78, .04));
}

.s-slider-block__title::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -4px;
  width: 9px;
  height: 9px;
  background: var(--grad-brass);
  transform: rotate(45deg);
  border-radius: 2px;
  z-index: 1;
}

.s-slider-block__title-right h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1rem + 1.6vw, 2.15rem);
  line-height: 1.35;
  color: var(--oud-plum);
}


/* ==========================================================================
   3 · أسهم التنقّل
   ========================================================================== */
.s-slider-block__title-nav { display: flex; gap: .5rem; }

.s-slider-nav-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--card-bg);
  color: var(--oud-plum);
  border: 1px solid var(--brass-line);
  box-shadow: 0 2px 8px rgba(57, 27, 39, .06);
  transition: background .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), opacity .25s var(--ease);
}
.s-slider-nav-arrow .s-slider-button-icon svg { width: 22px; height: 22px; fill: currentColor; }

.s-slider-nav-arrow:hover:not(.swiper-button-disabled) {
  background: var(--grad-plum);
  border-color: transparent;
  color: #fff;
}
.s-slider-nav-arrow.swiper-button-disabled {
  opacity: .32;
  cursor: default;
  box-shadow: none;
}


/* ==========================================================================
   4 · البطاقة — لمسات سطحية فقط
   ========================================================================== */
custom-salla-product-card.s-product-card-entry {
  background: var(--card-bg);
  border: 1px solid var(--plum-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(57, 27, 39, .04), 0 4px 14px rgba(57, 27, 39, .05);
  transition: transform .4s var(--ease),
              box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}

custom-salla-product-card.s-product-card-entry:hover {
  transform: translateY(-5px);
  border-color: var(--brass-line);
  box-shadow: 0 6px 16px rgba(57, 27, 39, .07), 0 18px 40px rgba(57, 27, 39, .11);
}

custom-salla-product-card .s-product-card-image { overflow: hidden; }
custom-salla-product-card .s-product-card-image-cover { transition: transform .8s var(--ease); }
custom-salla-product-card.s-product-card-entry:hover .s-product-card-image-cover {
  transform: scale(1.055);
}

custom-salla-product-card .s-product-card-content-title a { transition: color .25s var(--ease); }
custom-salla-product-card.s-product-card-entry:hover .s-product-card-content-title a {
  color: var(--oud-brass-deep);
}

custom-salla-product-card .s-product-card-price .sicon-sar { color: var(--oud-brass-deep); }

custom-salla-product-card .s-product-card-promotion-title {
  background: var(--grad-brass);
  color: #fff;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(138, 100, 49, .3);
}

custom-salla-product-card button.s-product-card-wishlist-btn {
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(6px);
  border-color: var(--brass-line);
  color: var(--oud-plum);
  transition: background .25s var(--ease), color .25s var(--ease);
}
custom-salla-product-card button.s-product-card-wishlist-btn:hover {
  background: var(--oud-plum);
  border-color: var(--oud-plum);
  color: #fff;
}

custom-salla-product-card .s-button-primary-outline {
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
custom-salla-product-card.s-product-card-entry:hover .s-button-primary-outline {
  background: var(--grad-plum);
  border-color: transparent;
  color: #fff;
}


/* ==========================================================================
   5 · الموبايل
   ========================================================================== */
@media (max-width: 767px) {
  section.s-block--best-offers { padding-block: 1.5rem; }
  .s-slider-block__title { margin-bottom: 1rem; padding-bottom: .7rem; }
  .s-slider-block__title-right h2 { font-size: 1.32rem; }
  .s-slider-nav-arrow { width: 34px; height: 34px; }
  .s-slider-nav-arrow .s-slider-button-icon svg { width: 18px; height: 18px; }
  custom-salla-product-card.s-product-card-entry:hover { transform: none; }
}


/* ==========================================================================
   6 · إتاحة
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  custom-salla-product-card.s-product-card-entry,
  custom-salla-product-card .s-product-card-image-cover,
  .s-slider-nav-arrow { transition-duration: .01ms !important; }
}

/* ==========================================================================
   END — PART 01 · REV B
   ========================================================================== */

/* ==========================================================================
   فيّة العود — PART 02 · قسم التبويبات + البطاقات الأفقية
   Target : section#featured-products-style2-11.s-block--tabs-produtcs
   --------------------------------------------------------------------------
   يعتمد على نفس متغيّرات PART 01 (--band-bg وأخواتها). إن استُخدم منفردًا
   فكتلة :root أدناه كافية.
   البطاقة: لمسات سطحية فقط — ظل، حدّ، حركة. بلا تغيير بنيوي.
   ========================================================================== */

:root {
  --oud-plum: #391b27;
  --oud-brass: #b98b4e;
  --oud-brass-deep: #8a6431;
  --oud-muted: #8b7566;

  --page-bg: #fdfaf5;
  --band-bg: #f6eee2;
  --band-bg-2: #f1e7d9;      /* شريط هذا القسم — أعمق درجة واحدة */
  --card-bg: #ffffff;

  --brass-line: rgba(185, 139, 78, .26);
  --plum-line: rgba(57, 27, 39, .10);

  --grad-brass: linear-gradient(135deg, #8a6431, #e0c79b 48%, #b98b4e);
  --grad-plum: linear-gradient(150deg, #391b27, #24101a);

  --font-display: 'El Messiri', 'PingARLT', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .28, 1);
}


/* ==========================================================================
   1 · شريط القسم — يستبدل bg-gray-100 الرمادي البارد
   ========================================================================== */
section.s-block--tabs-produtcs {
  position: relative;
  background: var(--band-bg-2);
  padding-block: clamp(2rem, 4.5vw, 3.75rem);
  border-block: 1px solid rgba(185, 139, 78, .2);
}

/* بديل داكن: استبدل السطرين أعلاه بـ
   background: var(--grad-plum); border-block-color: rgba(224,199,155,.22);
   ثم فعّل كتلة «الوضع الداكن» في نهاية الملف. */


/* ==========================================================================
   2 · التبويبات
   ========================================================================== */
.s-block--tabs-produtcs .tabs {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: .25rem;
}

.s-block--tabs-produtcs .tabs button.tab-trigger {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: .6rem 1.6rem;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--plum-line);
  color: var(--oud-plum);
  box-shadow: 0 1px 2px rgba(57, 27, 39, .04);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.s-block--tabs-produtcs .tabs button.tab-trigger:hover:not(.is-active) {
  border-color: var(--oud-brass);
  color: var(--oud-brass-deep);
}

.s-block--tabs-produtcs .tabs button.tab-trigger.is-active {
  background: var(--grad-plum);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(57, 27, 39, .22);
}

/* حركة ظهور المحتوى عند تبديل التبويب */
.s-block--tabs-produtcs .tabs__item.is-active {
  animation: fiih-tab-in .45s var(--ease) both;
}
@keyframes fiih-tab-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   3 · شبكة البطاقات الأفقية
   عمودان ثابتان: البطاقة المنفردة لا تمتد على العرض الكامل
   ========================================================================== */
.s-block--tabs-produtcs .s-products-list-horizontal-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.85rem, 1.5vw, 1.25rem);
  align-items: stretch;
}


/* ==========================================================================
   4 · البطاقة الأفقية — لمسات سطحية
   ========================================================================== */
custom-salla-product-card.s-product-card-horizontal {
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--plum-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(57, 27, 39, .04), 0 4px 14px rgba(57, 27, 39, .05);
  transition: transform .4s var(--ease),
              box-shadow .4s var(--ease),
              border-color .4s var(--ease);
}

custom-salla-product-card.s-product-card-horizontal:hover {
  transform: translateY(-4px);
  border-color: var(--brass-line);
  box-shadow: 0 6px 16px rgba(57, 27, 39, .07), 0 18px 40px rgba(57, 27, 39, .11);
}

/* الصورة — قصّ الحاوية فقط، بلا مساس بالمقاس */
custom-salla-product-card.s-product-card-horizontal .s-product-card-image {
  overflow: hidden;
}
custom-salla-product-card.s-product-card-horizontal .s-product-card-image-cover {
  transition: transform .8s var(--ease);
}
custom-salla-product-card.s-product-card-horizontal:hover .s-product-card-image-cover {
  transform: scale(1.055);
}

/* العنوان */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-title a {
  transition: color .25s var(--ease);
}
custom-salla-product-card.s-product-card-horizontal:hover .s-product-card-content-title a {
  color: var(--oud-brass-deep);
}

/* السعر */
custom-salla-product-card.s-product-card-horizontal .s-product-card-price .sicon-sar {
  color: var(--oud-brass-deep);
}

/* صف الأزرار — زر الإضافة يتمدّد، المفضلة ثابتة */
custom-salla-product-card.s-product-card-horizontal .s-product-card-content-footer {
  display: flex;
  align-items: center;
}
custom-salla-product-card.s-product-card-horizontal salla-add-product-button {
  flex: 1 1 auto;
  min-width: 0;
}
custom-salla-product-card.s-product-card-horizontal salla-button.s-product-card-wishlist-btn {
  flex: 0 0 auto;
}

/* زر الإضافة يمتلئ عند تحويم البطاقة */
custom-salla-product-card.s-product-card-horizontal .s-button-primary-outline {
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
custom-salla-product-card.s-product-card-horizontal:hover
  salla-add-product-button .s-button-primary-outline {
  background: var(--grad-plum);
  border-color: transparent;
  color: #fff;
}

/* المفضلة */
custom-salla-product-card.s-product-card-horizontal button.s-product-card-wishlist-btn {
  border-color: var(--brass-line);
  color: var(--oud-plum);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
custom-salla-product-card.s-product-card-horizontal button.s-product-card-wishlist-btn:hover {
  background: var(--oud-plum);
  border-color: var(--oud-plum);
  color: #fff;
}


/* ==========================================================================
   5 · حالة التمرير اللانهائي — تمنع فراغًا أسفل الشبكة
   ========================================================================== */
.s-block--tabs-produtcs .s-infinite-scroll-status { margin-block-start: .5rem; }
.s-block--tabs-produtcs .s-infinite-scroll-status p { color: var(--oud-muted); font-size: .85rem; }


/* ==========================================================================
   6 · الموبايل
   ========================================================================== */
@media (max-width: 767px) {
  section.s-block--tabs-produtcs { padding-block: 1.75rem; }

  .s-block--tabs-produtcs .tabs {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-inline: -1rem;
    padding-inline: 1rem;
    margin-bottom: 1.25rem;
  }
  .s-block--tabs-produtcs .tabs::-webkit-scrollbar { display: none; }
  .s-block--tabs-produtcs .tabs salla-button.tab-trigger {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
  .s-block--tabs-produtcs .tabs button.tab-trigger { padding: .55rem 1.25rem; font-size: .92rem; }

  .s-block--tabs-produtcs .s-products-list-horizontal-cards {
    grid-template-columns: 1fr;
  }

  custom-salla-product-card.s-product-card-horizontal:hover { transform: none; }
}


/* ==========================================================================
   7 · إتاحة
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .s-block--tabs-produtcs .tabs__item.is-active { animation: none; }
  custom-salla-product-card.s-product-card-horizontal,
  custom-salla-product-card.s-product-card-horizontal .s-product-card-image-cover,
  .s-block--tabs-produtcs .tabs button.tab-trigger { transition-duration: .01ms !important; }
}


/* ==========================================================================
   8 · (اختياري) الوضع الداكن للقسم — فعّله فقط مع الخلفية البرقوانية
   ==========================================================================
.s-block--tabs-produtcs .tabs button.tab-trigger {
  background: transparent;
  border-color: rgba(224, 199, 155, .3);
  color: #ffe7f3;
}
.s-block--tabs-produtcs .tabs button.tab-trigger.is-active {
  background: var(--grad-brass);
  color: #fff;
}
*/

/* ==========================================================================
   END — PART 02
   ========================================================================== */

section[data-testid="store-home-fixed-banner"] picture, section[data-testid="store-home-fixed-banner"] img {
    display: block;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
}

div#mainnav {
    background-color: #f3e3d1;
}
.store-footer__inner {
    background-color: #f3e3d1 !important;
}