/* Add custom CSS styles below */ 
:root {
  --sy-cream: #f3e6d3;
  --sy-cream-dark: #ebdcc5;
  --sy-brown: #916d53;
  --sy-brown-dark: #6f5039;
  --sy-ink: #23140d;
  --sy-white: #ffffff;
  --sy-radius: 14px;
  --sy-shadow: 0 10px 22px rgba(35, 20, 13, .14);
}

/* ---------- خلفية الموقع ---------- */
body,
main#main-content,
.store-header,
header.store-header {
  background-color: var(--sy-cream) !important;
}

.store-header,
header.store-header {
  box-shadow: none !important;
  border-bottom: 0 !important;
}

/* ---------- عناوين الأقسام ---------- */
main#main-content .s-block__title h2,
main#main-content .section-title,
main#main-content .s-slider-block__title h2 {
  color: var(--sy-ink) !important;
  font-weight: 500 !important;
  text-align: center;
}

/* الخط تحت "تجارب إبداعية" (يضيفه JS) */
.sy-title-underline {
  display: inline-block !important;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--sy-ink);
}

/* ---------- بطاقات المنتجات / التجارب ---------- */
custom-salla-product-card .s-product-card-entry,
.s-product-card-entry,
.product-entry {
  background: var(--sy-white) !important;
  border: 0 !important;
  border-radius: var(--sy-radius) !important;
  overflow: hidden;
  box-shadow: var(--sy-shadow) !important;
  transition: transform .3s ease, box-shadow .3s ease;
}

.s-product-card-entry:hover,
.product-entry:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 30px rgba(35, 20, 13, .2) !important;
}

.s-product-card-entry .s-product-card-image,
.s-product-card-entry img {
  border-radius: 0 !important;
}

.s-product-card-entry .s-product-card-content-title a,
.s-product-card-entry .s-product-card-content-title {
  color: var(--sy-ink) !important;
  font-weight: 600;
  text-align: center;
}

.s-product-card-entry .s-product-card-price,
.s-product-card-entry .s-product-card-sale-price h4,
.s-product-card-entry .s-product-card-content-sub {
  color: var(--sy-ink) !important;
  text-align: center;
  justify-content: center;
}

/* زر "اضف للسلة" بني بعرض كامل */
.s-product-card-entry .s-button-element,
.s-product-card-entry salla-add-product-button button,
.s-product-card-entry .s-product-card-content-footer button {
  width: 100%;
  background: var(--sy-brown) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  transition: background .25s ease;
}

.s-product-card-entry .s-button-element:hover,
.s-product-card-entry salla-add-product-button button:hover {
  background: var(--sy-brown-dark) !important;
}

/* ---------- زر "عرض أكثر" ---------- */
main#main-content .s-block__display-all,
main#main-content .s-slider-block__display-all {
  display: inline-flex;
  margin: 18px auto 0;
  padding: 8px 26px;
  background: var(--sy-brown);
  color: #fff !important;
  border: 1px solid var(--sy-brown-dark);
  border-radius: 999px;
  font-weight: 500;
}

main#main-content .s-block__display-all:hover,
main#main-content .s-slider-block__display-all:hover {
  background: var(--sy-brown-dark);
}

/* ---------- زوايا الصور داخل بنرات الصفحة الرئيسية ---------- */
main#main-content .s-block--banners img,
main#main-content .s-block--square-banners img {
  border-radius: var(--sy-radius);
}

/* ---------- الفوتر ---------- */
.store-footer,
footer.store-footer,
.store-footer__inner {
  background: var(--sy-cream-dark) !important;
  color: var(--sy-ink) !important;
}

.store-footer a,
.store-footer h3,
.store-footer p {
  color: var(--sy-ink) !important;
}

/* ---------- قسم المميزات (غلاف خارجي فقط، البطاقات يصمّمها JS) ---------- */
section.s-block--bundle-store-features {
  background: transparent !important;
  padding-top: 24px;
  padding-bottom: 24px;
}

/* ---------- شاشة البداية ---------- */
#sy-splash {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sy-cream);
  opacity: 1;
  visibility: visible;
  transition: opacity .5s ease, visibility .5s ease;
}

#sy-splash.sy-hide {
  opacity: 0;
  visibility: hidden;
}

.sy-splash-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.sy-splash-box img {
  width: min(220px, 55vw);
  height: auto;
  object-fit: contain;
}

.sy-splash-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--sy-ink);
}

.sy-loader {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(145, 109, 83, .25);
  border-top-color: var(--sy-brown);
  border-radius: 50%;
  animation: sy-spin .8s linear infinite;
}

@keyframes sy-spin {
  to { transform: rotate(360deg); }
}

/* ---------- شريط الإعلانات المتحرك (اختياري) ---------- */
#sy-announce {
  overflow: hidden;
  background: var(--sy-brown);
  color: var(--sy-cream);
  font-size: 14px;
  white-space: nowrap;
}

.sy-marquee-track {
  display: flex;
  width: max-content;
  animation: sy-marquee 26s linear infinite;
}

.sy-marquee-group {
  display: flex;
  flex-shrink: 0;
}

.sy-marquee-item {
  padding: 9px 36px;
}

@keyframes sy-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  .sy-marquee-track,
  .sy-loader { animation: none; }
  .s-product-card-entry { transition: none; }
}

@media (max-width: 767px) {
  .sy-title-underline { font-size: 22px; }
}