@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

:root {
  --ink: #1a1a1a;
  --ivory: #f6f2ec;
  --sand: #e0d6cd;          /* بيج البنرات */
  --orange: #c5581d;        /* برتقالي الهوية */
  --orange-deep: #a94915;   /* للنصوص والأسعار (تباين أفضل) */
  --line: #e4dbd0;
}

/* ===== الأساسيات ===== */
html { scroll-behavior: smooth; }
body, #app {
  background: var(--ivory) !important;
  color: var(--ink);
  font-family: 'Tajawal', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sand); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* ===== العناوين: مودرن عريض + خط برتقالي رفيع ===== */
main h1, main h2, .s-block-title h2, .s-block-title * {
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
}
.s-block-title h2::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  background: var(--orange);
  margin: 12px auto 0;
}

/* ===== الشريط العلوي ===== */
.top-navbar, .top-navbar .inner { background: var(--ink) !important; }
.top-navbar a, .top-navbar span, .top-navbar li {
  color: var(--sand) !important;
  font-size: 13px;
}

/* ===== الهيدر ===== */
.store-header, .store-header .inner,
.main-nav-container, .main-nav-container .inner { background: #fff !important; }
.store-header { border-bottom: 1px solid var(--line); }
.main-nav-container a, .main-nav-container span {
  color: var(--ink) !important;
  font-weight: 500;
  transition: color .3s ease;
}
.main-nav-container a:hover { color: var(--orange-deep) !important; }
.store-header .header-btn, .store-header .header-btn i { color: var(--ink) !important; }

/* ===== كارد المنتج: بدون إطار، صورة طولية ===== */
.s-product-card-entry, .s-product-card {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.s-product-card-image {
  border-radius: 0 !important;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: #efe8de !important;
}
.s-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2,.6,.2,1);
}
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.05); }

.s-product-card-content-title, .s-product-card-content-title a {
  font-weight: 500 !important;
  font-size: 14px;
  color: var(--ink) !important;
  text-align: center;
}
.s-product-card-price, .s-product-card-sale-price h4 {
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.s-product-card-sale-price h4 { color: var(--orange-deep) !important; }
.s-product-card-sale-price span {
  color: #9a9288 !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
}

/* ===== شارة الخصم: مستطيل أسود صغير ===== */
.s-product-card-promotion-title {
  background: var(--ink) !important;
  color: var(--sand) !important;
  border-radius: 0 !important;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px !important;
}

/* ===== الأزرار: حادة، برتقالية، وتتحول لأسود عند المرور ===== */
.s-add-product-button-main .s-button-element:not(.s-fast-checkout-button),
salla-add-product-button .s-button-element {
  background: var(--orange) !important;
  border: 1px solid var(--orange) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  transition: background .35s ease, border-color .35s ease;
}
.s-add-product-button-main .s-button-element:not(.s-fast-checkout-button) *,
salla-add-product-button .s-button-element * { color: inherit !important; }
.s-add-product-button-main .s-button-element:not(.s-fast-checkout-button):hover,
salla-add-product-button .s-button-element:hover {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
.s-fast-checkout-button, salla-mini-checkout-widget .s-button-element {
  background: transparent !important;
  border: 1px solid var(--ink) !important;
  color: var(--ink) !important;
  border-radius: 0 !important;
}
.s-fast-checkout-button *, salla-mini-checkout-widget .s-button-element * { color: var(--ink) !important; }

/* ===== الفوتر ===== */
footer, .store-footer, .store-footer__inner {
  background: var(--ink) !important;
  background-image: none !important;
}
footer h1, footer h2, footer h3, footer h4, footer h5 {
  color: var(--sand) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-weight: 800 !important;
}
footer p, footer span, footer li, footer a, footer i { color: #e8e2d8 !important; }
footer a:hover { color: var(--sand) !important; }
.store-footer__bottom, .copyright-text { background: #101010 !important; color: #b9b2a6 !important; }

/* ===== موبايل ===== */
@media (max-width: 768px) {
  .s-product-card-content-title, .s-product-card-content-title a { font-size: 13px; }
}

/* ===== لمن لا يحب الحركة ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .s-product-card-image img,
  .s-add-product-button-main .s-button-element { transition: none !important; transform: none !important; }
}
/* الصورة تبقى رمادية للمنتج الخالص */
.s-product-card-out-of-stock .s-product-card-image {
  position: relative;
}
.s-product-card-out-of-stock .s-product-card-image img {
  filter: grayscale(100%);
  opacity: .6;
}

/* كلمة SOLD OUT فوق الصورة */
.s-product-card-out-of-stock .s-product-card-image::after {
  content: "SOLD OUT";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .75);
  color: #fff;
  padding: 8px 22px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

<style>
.ob{position:relative;display:block;margin-bottom:10px}
.ob img{width:100%;height:auto;display:block}
.ob a.cta{position:absolute;display:block;transition:background .3s}
.ob a.cta:hover{background:rgba(255,255,255,.14)}
.ob a.cta:focus-visible{outline:2px solid #fff}
@media (max-width:768px){
  .ob a.cta{inset:0!important;width:auto!important;height:auto!important}
}
</style>

<!-- بنر 1: أناقتك بطريقتك -->
<div class="ob">
  <img src="رابط-صورة-البنر-1" alt="أناقتك بطريقتك">
  <a class="cta" href="رابط-القسم-1" aria-label="تسوقي الآن" style="left:73.9%;top:42.3%;width:15.3%;height:9.8%"></a>
</div>

<!-- بنر 2: تفاصيل تليق بك -->
<div class="ob">
  <img src="رابط-صورة-البنر-2" alt="تفاصيل تليق بك">
  <a class="cta" href="رابط-القسم-2" aria-label="تسوقي الآن" style="left:39.2%;top:76.3%;width:15.3%;height:9.8%"></a>
</div>

<!-- بنر 3: عبايتك تعكس ذوقك -->
<div class="ob">
  <img src="رابط-صورة-البنر-3" alt="عبايتك تعكس ذوقك">
  <a class="cta" href="رابط-القسم-3" aria-label="تسوقي الآن" style="left:7%;top:69%;width:15.3%;height:9.8%"></a>
</div>