/* ============================================================
   البيداء — تصميم كارت المنتج
   ألوان مسحوبة من اللوجو الرسمي للبراند:
   ذهبي للهوية الأساسية، رمادي ثانوي، رملي للخلفيات
   ============================================================ */

:root {
  --bayda-ink: #2B2A25;
  --bayda-stone: #97989A;
  --bayda-canvas: #FFFFFF;
  --bayda-sand: #F6F2E9;
  --bayda-sand-deep: #ECE4D2;
  --bayda-gold: #F2A91E;
  --bayda-gold-deep: #8C5C0C;
  --bayda-gold-deep-hover: #6E480A;
  --bayda-out: #A33B2B;
  --bayda-radius: 14px;
  --bayda-radius-sm: 9px;
  --bayda-shadow: 0 1px 3px rgba(43, 42, 37, 0.06), 0 1px 2px rgba(43, 42, 37, 0.04);
  --bayda-shadow-hover: 0 18px 34px -12px rgba(140, 92, 12, 0.30);
  /* متغيرات ثيم سلة العامة — مكونات الـ Web Components بتقرأ منها */
  --color-primary: var(--bayda-gold-deep);
  --color-primary-dark: var(--bayda-gold-deep-hover);
  --color-primary-light: var(--bayda-gold);
  --color-primary-reverse: var(--bayda-canvas);
}

/* ---------- الكارت الأساسي ---------- */
custom-salla-product-card.s-product-card-entry {
  display: block;
  position: relative;
  background: var(--bayda-canvas);
  border: 1px solid var(--bayda-sand-deep);
  border-radius: var(--bayda-radius);
  overflow: visible;
  box-shadow: var(--bayda-shadow);
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1),
              border-color .4s ease;
}

custom-salla-product-card.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: var(--bayda-shadow-hover);
  border-color: transparent;
  z-index: 2;
}

custom-salla-product-card.s-product-card-entry:focus-within {
  box-shadow: 0 0 0 3px rgba(242, 169, 30, 0.35), var(--bayda-shadow-hover);
  z-index: 2;
}

/* ---------- SVG البوردر المتحرك ---------- */
svg.bayda-border-svg {
  position: absolute;
  inset: -1.5px;
  width: calc(100% + 3px);
  height: calc(100% + 3px);
  pointer-events: none;
  z-index: 3;
  overflow: visible;
}

svg.bayda-border-svg rect {
  opacity: 0;
  transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
  svg.bayda-border-svg {
    display: none;
  }
}

/* ---------- الصورة — نعوض عن overflow: visible بـ border-radius صريح ---------- */
custom-salla-product-card.s-product-card-entry .s-product-card-image {
  border-radius: var(--bayda-radius) var(--bayda-radius) 0 0;
  overflow: hidden;
}

/* الكارت الأفقي (كروت القوائم الجانبية) */
.s-product-card-horizontal {
  display: flex;
}
.s-product-card-horizontal .s-product-card-image {
  width: 42%;
  flex-shrink: 0;
  aspect-ratio: 4 / 3.4;
  border-radius: var(--bayda-radius) 0 0 var(--bayda-radius);
}
.s-product-card-horizontal .s-product-card-content {
  width: 58%;
}

/* الكارت الرأسي — عمود واحد، الصورة ثابتة فوق والمحتوى بياخد باقي الارتفاع */
custom-salla-product-card.s-product-card-entry:not(.s-product-card-horizontal) {
  display: flex;
  flex-direction: column;
  height: 100%;
}
custom-salla-product-card:not(.s-product-card-horizontal) .s-product-card-image {
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

/* ---------- منطقة الصورة ---------- */
.s-product-card-image {
  position: relative;
  background: var(--bayda-sand);
}

.s-product-card-image img.s-product-card-image-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1), filter .4s ease;
}

custom-salla-product-card:hover .s-product-card-image-cover {
  transform: scale(1.06);
}

/* لمعة هادية بتتحرك عند الـ hover */
.s-product-card-image::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    transparent 28%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0.10) 60%,
    transparent 72%,
    transparent 100%
  );
  transform: translateX(-170%) skewX(-20deg);
  pointer-events: none;
  z-index: 6;
  transition: transform 1.15s cubic-bezier(.45, 0, .2, 1);
}

custom-salla-product-card:hover .s-product-card-image::after {
  transform: translateX(260%) skewX(-20deg);
}

/* ---------- حالة "نفدت الكمية" ---------- */
.s-product-card-out-of-stock .s-product-card-image-cover {
  filter: grayscale(55%) brightness(.95);
}

.s-product-card-out-of-stock .s-product-card-image::before {
  content: "نفدت الكمية" !important;
  position: absolute !important;
  top: 12px !important;
  inset-inline-start: 12px !important;
  inset-inline-end: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  transform: none !important;
  background-color: rgba(43, 42, 37, 0.88) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='6' fill='none' stroke='white' stroke-width='1.6'/><line x1='4' y1='12' x2='12' y2='4' stroke='white' stroke-width='1.6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 9px center !important;
  background-size: 11px 11px !important;
  backdrop-filter: blur(2px);
  color: #FFFFFF !important;
  border: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  padding: 6px 27px 6px 11px !important;
  border-radius: 999px !important;
  text-shadow: none !important;
  box-shadow: 0 2px 8px rgba(43, 42, 37, 0.18) !important;
  z-index: 7 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.s-product-card-out-of-stock .s-product-card-content-title a {
  color: var(--bayda-stone);
}

/* ---------- محتوى الكارت ---------- */
.s-product-card-content {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}

.s-product-card-content-main {
  position: relative;
}

.s-product-card-content-title a {
  font-size: 15px;
  font-weight: 600;
  color: var(--bayda-ink);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .3s ease;
}

custom-salla-product-card:hover .s-product-card-content-title a {
  color: var(--bayda-gold-deep);
}

/* خط ذهبي يمتد تحت العنوان عند التمرير */
.s-product-card-content-main::after {
  content: "";
  position: absolute;
  bottom: -4px;
  inset-inline-end: 0;
  height: 2px;
  width: 0%;
  background: var(--bayda-gold);
  transition: width .45s cubic-bezier(.22,1,.36,1);
}

custom-salla-product-card:hover .s-product-card-content-main::after {
  width: 38%;
}

/* ---------- السعر ---------- */
.s-product-card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--bayda-gold-deep);
  display: flex;
  align-items: center;
  gap: 8px;
}

.s-product-card-price:empty {
  display: none;
}

.s-product-card-price del,
.s-product-card-price s {
  color: var(--bayda-stone);
  font-weight: 500;
  font-size: 13px;
  text-decoration: line-through;
}

/* ---------- أزرار الفوتر ---------- */
.s-product-card-content-footer {
  display: flex !important;
  align-items: center;
  gap: 8px !important;
  margin-top: auto;
  padding-top: 2px;
}

.s-product-card-content-footer salla-add-product-button {
  flex: 1;
  min-width: 0;
}

.s-product-card-content-footer .s-button-element {
  border-radius: var(--bayda-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: background-color .3s ease, border-color .3s ease, transform .15s ease !important;
}

.s-product-card-content-footer .s-button-element:not(.s-button-disabled):not(.s-button-outline) {
  background: var(--bayda-gold-deep) !important;
  border-color: var(--bayda-gold-deep) !important;
}
.s-product-card-content-footer .s-button-element:not(.s-button-disabled):not(.s-button-outline):hover {
  background: var(--bayda-gold-deep-hover) !important;
  border-color: var(--bayda-gold-deep-hover) !important;
}
.s-product-card-content-footer .s-button-element:focus-visible {
  outline: 2px solid var(--bayda-gold);
  outline-offset: 2px;
}

.s-product-card-content-footer .s-button-disabled {
  background: var(--bayda-sand) !important;
  border-color: var(--bayda-sand-deep) !important;
  color: var(--bayda-stone) !important;
  opacity: 1 !important;
}

.s-product-card-wishlist-btn.s-button-element {
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0;
  border-color: var(--bayda-sand-deep) !important;
}

.s-product-card-wishlist-btn .sicon-heart {
  font-size: 15px;
  transition: transform .35s cubic-bezier(.68,-.55,.27,1.55), color .3s ease;
}

.s-product-card-wishlist-btn:not(.un-favorited) .sicon-heart {
  color: var(--bayda-out);
  transform: scale(1.12);
}

.s-product-card-wishlist-btn:active .sicon-heart {
  transform: scale(1.3);
}

/* ---------- حركة الظهور ---------- */
custom-salla-product-card.bayda-animated {
  opacity: 0;
  transform: translateY(18px);
}
custom-salla-product-card.bayda-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}

/* ---------- احترام تفضيل تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  custom-salla-product-card.s-product-card-entry,
  .s-product-card-image-cover,
  .s-product-card-image::after,
  .s-product-card-content-title a,
  .s-product-card-content-main::after,
  .s-product-card-wishlist-btn .sicon-heart,
  custom-salla-product-card.bayda-animated,
  svg.bayda-border-svg {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    animation: none !important;
    display: none;
  }
}

/* ---------- موبايل ---------- */
@media (max-width: 480px) {
  .s-product-card-horizontal .s-product-card-image {
    width: 38%;
  }
  .s-product-card-horizontal .s-product-card-content {
    width: 62%;
    padding: 12px 14px;
    gap: 8px;
  }
  .s-product-card-content-title a {
    font-size: 13.5px;
  }
}

/* ============================================================
   عنوان أقسام الصفحة الرئيسية
   ============================================================ */
.s-block__title {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
  padding: 36px 16px 30px;
}

.s-block__title .right-side {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.s-block__title h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 700;
  color: var(--bayda-ink);
}

.s-block__title .right-side::after {
  content: "";
  display: block;
  width: 130px;
  height: 13px;
  margin-top: 20px;
  background:
    radial-gradient(circle, var(--bayda-canvas) 0 3.5px, transparent 4px) no-repeat center / 13px 13px,
    radial-gradient(circle, var(--bayda-gold) 0 6px, transparent 6.5px) no-repeat center / 13px 13px,
    linear-gradient(var(--bayda-gold-deep), var(--bayda-gold-deep)) no-repeat left center / 42% 1.5px,
    linear-gradient(var(--bayda-gold-deep), var(--bayda-gold-deep)) no-repeat right center / 42% 1.5px;
}

.s-block__title .s-block__display-all {
  position: absolute;
  top: 38px;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--bayda-gold-deep);
  transition: color .3s ease;
}

.s-block__title .s-block__display-all:hover {
  color: var(--bayda-gold-deep-hover);
}

@media (max-width: 480px) {
  .s-block__title {
    padding: 28px 12px 24px;
  }
  .s-block__title h2 {
    font-size: 19px;
  }
  .s-block__title .s-block__display-all {
    position: static;
    margin-top: 12px;
  }
}

/* ============================================================
   هوية الموقع العامة
   ============================================================ */
body {
  background-color: var(--bayda-sand);
}

::selection {
  background: var(--bayda-gold);
  color: var(--bayda-ink);
}

a {
  color: var(--bayda-gold-deep);
}
a:hover {
  color: var(--bayda-gold-deep-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--bayda-gold);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bayda-sand);
}
::-webkit-scrollbar-thumb {
  background: var(--bayda-gold-deep);
  border-radius: 999px;
  border: 2px solid var(--bayda-sand);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bayda-gold-deep-hover);
}

* {
  scrollbar-color: var(--bayda-gold-deep) var(--bayda-sand);
  scrollbar-width: thin;
}


/* ---------- قسم التعليقات والتقييمات ---------- */
.s-comments {
  background-color: var(--bayda-sand) !important;
}

.s-comments-container {
  background-color: var(--bayda-sand) !important;
}

/* نجم التقييم */
.s-comments salla-reviews-summary {
  --color-primary: var(--bayda-gold-deep);
  --color-primary-light: var(--bayda-gold);
}

/* فورم الكومنت */
.s-comments salla-comment-form {
  --color-primary: var(--bayda-gold-deep);
  --color-primary-dark: var(--bayda-gold-deep-hover);
  --color-primary-light: var(--bayda-gold);
}/* ============================================================
   الفوتر — بيج غامق
   ============================================================ */
.store-footer__inner,
footer,
.store-footer {
  background-color: #D6CCBA !important;
}

.store-footer__inner h3 {
  color: #2B2A25 !important;
}

.store-footer__inner p,
.store-footer__inner div {
  color: #5C5A54 !important;
}

.store-footer__inner .s-menu-footer-item {
  color: #5C5A54 !important;
}

.store-footer__inner .s-menu-footer-item:hover {
  color: #8C5C0C !important;
}

.store-footer__inner .s-social-icon svg path {
  fill: #2B2A25 !important;
  transition: fill .3s ease;
}

.store-footer__inner .s-social-link:hover .s-social-icon svg path {
  fill: #8C5C0C !important;
}

.store-footer__inner .s-contacts-item,
.store-footer__inner .s-contacts-item span {
  color: #5C5A54 !important;
}

.store-footer__inner .s-contacts-icon svg path {
  fill: #8C5C0C !important;
}

.store-footer__inner .s-trust-badges-label {
  color: #5C5A54 !important;
}

.store-footer__inner .s-trust-badges-number {
  color: #2B2A25 !important;
}

/* شريط الحقوق أسفل الفوتر */
.store-footer__copy,
.store-footer__bottom {
  background-color: #C8BCAA !important;
  color: #5C5A54 !important;
}

.store-footer__copy a {
  color: #8C5C0C !important;
}

/* ============================================================
   صفحة المنتج — خلفية الكروت تفضل زي ما هي
   ============================================================ */
.mb-4.flex.justify-between,
section.flex.bg-white,
section.sticky-product-bar {
  background-color: #FFFFFF !important;
  border: 1px solid #ECE4D2 !important;
  border-radius: 14px !important;
}
/* ============================================================
   صفحة المنتج — رقم الموديل / الخيارات / السعر / الزرار
   ============================================================ */

/* كارت رقم الموديل */
.mb-4.flex.justify-between {
  background-color: var(--bayda-canvas) !important;
  border: 1px solid var(--bayda-sand-deep) !important;
  border-radius: var(--bayda-radius) !important;
}

/* كارت الخيارات */
.s-product-options-wrapper {
  background-color: var(--bayda-canvas) !important;
  border: 1px solid var(--bayda-sand-deep) !important;
  border-radius: var(--bayda-radius) !important;
  padding: 16px 18px !important;
}

/* السيليكت */
.s-product-options-option-content select.s-form-control {
  background-color: var(--bayda-sand) !important;
  border: 1px solid var(--bayda-sand-deep) !important;
  border-radius: var(--bayda-radius-sm) !important;
  color: var(--bayda-ink) !important;
  padding: 10px 14px !important;
}

.s-product-options-option-content select.s-form-control:focus {
  outline: none !important;
  border-color: var(--bayda-gold-deep) !important;
  box-shadow: 0 0 0 3px rgba(242, 169, 30, 0.25) !important;
}

/* كارت السعر + الزرار */
section.flex.bg-white,
section.sticky-product-bar {
  background-color: var(--bayda-canvas) !important;
  border: 1px solid var(--bayda-sand-deep) !important;
  border-radius: var(--bayda-radius) !important;
}

/* مارجين تحت كارت السعر */
section.flex.bg-white {
  margin-bottom: 12px !important;
}

/* الزرار معطل */
.s-button-disabled.s-button-light-outline {
  background-color: var(--bayda-sand) !important;
  border-color: var(--bayda-sand-deep) !important;
  color: var(--bayda-stone) !important;
  opacity: 1 !important;
}
.banner-entry__text.text-with-border h3.banner__title,
.banner-entry__text.text-with-border p.banner__description {
  color: #FFFFFF !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}