/* =========================================================
   RORO — تنسيق متجر سلة (النسخة الكاملة)
   المكان: تخصيص الثيم ← ‹/› ← تخصيص باستخدام CSS
   امسحي أي كود قديم والصقي هذا كاملًا.
   ========================================================= */

/* الخطوط تُحمَّل من ملف JavaScript حتى لا تبطئ فتح الصفحة */

:root {
  --roro-orange: #C94A22;
  --roro-orange-soft: #F7C9B4;
  --roro-yellow: #EBB843;
  --roro-yellow-soft: #F7E2A8;
  --roro-pink: #F2CFE0;
  --roro-teal: #2A7C73;
  --roro-teal-mid: #3E9E93;
  --roro-teal-soft: #BFE3DD;
  --roro-cream: #FFFBF4;
  --roro-ink: #2B2626;
  --roro-muted: #5A5050;
  --roro-stripes: repeating-linear-gradient(90deg,
    #F2CFE0 0 22px, #FFFFFF 22px 26px, #3E9E93 26px 30px, #FFFFFF 30px 34px,
    #EBB843 34px 56px, #FFFFFF 56px 60px, #3E9E93 60px 63px, #FFFFFF 63px 67px);
}

/* ---------- الصفحة والخطوط ---------- */
body {
  background-color: var(--roro-cream) !important;
  color: var(--roro-ink);
  font-family: 'Readex Pro', sans-serif !important;
}
h1, h2, h3,
.s-block__title, .s-block__title h2,
.section-title, .page-title {
  font-family: 'Baloo Bhaijaan 2', sans-serif !important;
  font-weight: 800 !important;
  color: var(--roro-ink) !important;
}
a:hover { color: var(--roro-orange); }

/* ---------- شريط مقلّم تحت الهيدر ---------- */
header::after,
.store-header::after {
  content: "";
  display: block;
  height: 10px;
  background: var(--roro-stripes);
}

/* ---------- رقم السلة ---------- */
.s-cart-summary-count {
  background-color: var(--roro-orange) !important;
  color: #FFFFFF !important;
}

/* ---------- الأزرار ---------- */
.s-button-primary,
.s-button-solid.s-button-primary,
.btn--primary,
salla-add-product-button button,
.s-product-card-content-footer button {
  background-color: var(--roro-orange) !important;
  border-color: var(--roro-orange) !important;
  color: #FFFFFF !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  min-height: 44px;
}
.s-button-primary-outline,
.s-button-outline {
  border-color: var(--roro-orange) !important;
  color: var(--roro-orange) !important;
  border-radius: 999px !important;
}
a:empty,
a[class*="btn"]:empty,
a[class*="button"]:empty {
  display: none !important;
}

/* ---------- بطاقات المنتجات ---------- */
.s-product-card-entry {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.s-product-card-image,
.s-product-card-image img {
  border-radius: 22px !important;
  overflow: hidden;
}
.s-product-card-content {
  padding: 10px 2px 0 !important;
  gap: 4px !important;
}
.s-product-card-content-subtitle:empty,
.s-product-card-rating:empty {
  display: none !important;
}
.s-product-card-content-title,
.s-product-card-content-title a {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--roro-ink) !important;
  min-height: 0 !important;
}
.s-product-card-price,
.s-product-card-sale-price h4 {
  color: var(--roro-teal) !important;
  font-weight: 600 !important;
}
.s-product-card-wishlist-btn,
salla-button.s-product-card-wishlist-btn button {
  border-radius: 50% !important;
  background: rgba(255, 251, 244, .92) !important;
  color: var(--roro-orange) !important;
  border: 0 !important;
}
.s-product-card-promotion-title,
.promotion-title {
  background: var(--roro-yellow) !important;
  color: var(--roro-ink) !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}

/* ---------- الصور والحقول ---------- */
.s-slider-block img,
.banner-entry img {
  border-radius: 28px;
}
input, select, textarea {
  border-radius: 16px !important;
}

/* ---------- الفوتر (الألوان من إعدادات اسفل المتجر) ---------- */
footer *,
.store-footer * {
  opacity: 1 !important;
}
footer::before,
.store-footer::before {
  content: "";
  display: block;
  height: 14px;
  background: var(--roro-stripes);
}
footer .s-social-list,
.store-footer .s-social-list {
  display: flex !important;
  gap: 10px !important;
}
footer .s-social-link,
.store-footer .s-social-link,
footer salla-social a,
.store-footer salla-social a {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--roro-pink) !important;
  color: var(--roro-ink) !important;
  border: 0 !important;
}
footer .s-social-list > *:nth-child(3n+2) .s-social-link,
footer salla-social li:nth-child(3n+2) a { background: var(--roro-yellow) !important; }
footer .s-social-list > *:nth-child(3n+3) .s-social-link,
footer salla-social li:nth-child(3n+3) a { background: var(--roro-orange-soft) !important; }
footer .s-social-link svg,
footer salla-social a svg {
  fill: var(--roro-ink) !important;
  width: 20px !important;
  height: 20px !important;
}

/* =========================================================
   الأقسام التي يضيفها كود JavaScript (لا تعمل بدونه)
   ========================================================= */
.roro-wrap {
  max-width: 760px;
  margin: 32px auto 8px;
  padding: 0 16px;
  box-sizing: border-box;
  direction: rtl;
  font-family: 'Readex Pro', sans-serif;
  color: var(--roro-ink);
}
.roro-title {
  margin: 0 0 14px;
  font-family: 'Baloo Bhaijaan 2', sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: var(--roro-ink);
}

/* التصنيفات */
.roro-cats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 768px) {
  .roro-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.roro-cat {
  border-radius: 24px;
  padding: 18px 16px;
  min-height: 128px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--roro-ink) !important;
  text-decoration: none !important;
  transition: transform .15s ease;
}
.roro-cat:hover { transform: translateY(-2px); }
.roro-cat-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--roro-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--roro-orange);
}
.roro-cat-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Baloo Bhaijaan 2', sans-serif;
  font-weight: 700;
  font-size: 18px;
}

/* رسالة العلامة */
.roro-message {
  position: relative;
  background: #FFFFFF;
  border: 2px solid var(--roro-yellow);
  border-radius: 26px;
  padding: 28px 22px 24px;
  text-align: center;
}
.roro-message-flower {
  position: absolute;
  top: -18px;
  right: 20px;
}
.roro-message-title {
  font-family: 'Baloo Bhaijaan 2', sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: var(--roro-orange);
  margin-bottom: 8px;
}
.roro-message p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #4A4242;
}

/* دليل المقاسات (قسم الثيم نفسه، يلوّنه الكود) */
.roro-size-block {
  max-width: 728px;
  margin: 32px auto 8px !important;
  background: var(--roro-yellow) !important;
  border-radius: 28px !important;
  padding: 26px 22px !important;
  box-sizing: border-box;
  overflow: hidden;
}
.roro-size-block * {
  color: var(--roro-ink) !important;
}
.roro-size-block input {
  background: var(--roro-cream) !important;
  border: 0 !important;
  min-height: 50px;
}
.roro-size-block button,
.roro-size-block [type="submit"] {
  background: var(--roro-orange) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  border-radius: 16px !important;
  min-height: 50px;
  font-weight: 600 !important;
}
.roro-size-block img { border-radius: 18px; }

/* المميزات */
.roro-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.roro-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.roro-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.roro-feature b { font-size: 14px; font-weight: 600; }
.roro-feature small { font-size: 12px; line-height: 1.5; color: var(--roro-muted); }

/* آراء العملاء */
.roro-reviews {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.roro-reviews::-webkit-scrollbar { display: none; }
.roro-review {
  flex: 0 0 270px;
  scroll-snap-align: start;
  margin: 0;
  border-radius: 24px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
}
.roro-review-stars { color: #D9562B; font-size: 14px; letter-spacing: 2px; }
.roro-review blockquote { margin: 0; font-size: 14px; line-height: 1.75; }
.roro-review figcaption { font-size: 12px; font-weight: 500; color: #4A4242; }

/* =========================================================
   فئات تُضاف من المحرر: (إعدادات متقدمة للمكون ← فئات CSS إضافية)
   roro-hero        → عنصر البنر الرئيسي
   roro-size-block  → عنصر دليل المقاسات  (معرّفة أعلاه)
   roro-testimonials → عنصر آراء العملاء
   roro-products    → عنصر الأكثر مبيعًا
   ========================================================= */

/* البنر: إزالة طبقة التعتيم والزر الفارغ */
.roro-hero [class*="overlay"],
.roro-hero [class*="bg-black"],
.roro-hero [class*="bg-opacity"],
.roro-hero [class*="bg-gradient"] {
  background: transparent !important;
  opacity: 0 !important;
}
.roro-hero a:empty,
.roro-hero button:empty {
  display: none !important;
}

/* آراء العملاء: بطاقات ملوّنة بزوايا دائرية */
.roro-testimonials .swiper-slide > *,
.roro-testimonials [class*="testimonial"]:not([class*="testimonials"]),
.roro-testimonials [class*="review-item"],
.roro-testimonials [class*="card"] {
  background: var(--roro-pink) !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: none !important;
  color: var(--roro-ink) !important;
}
.roro-testimonials .swiper-slide:nth-child(4n+2) > *,
.roro-testimonials [class*="card"]:nth-child(4n+2) { background: var(--roro-teal-soft) !important; }
.roro-testimonials .swiper-slide:nth-child(4n+3) > *,
.roro-testimonials [class*="card"]:nth-child(4n+3) { background: var(--roro-yellow-soft) !important; }
.roro-testimonials .swiper-slide:nth-child(4n+4) > *,
.roro-testimonials [class*="card"]:nth-child(4n+4) { background: var(--roro-orange-soft) !important; }
.roro-testimonials * { color: var(--roro-ink) !important; }

/* الأكثر مبيعًا: مسافات مريحة */
.roro-products {
  padding-top: 24px !important;
}
.roro-products h2,
.roro-products .s-block__title {
  font-size: 22px !important;
}


/* =========================================================
   إصلاحات بعد المعاينة على المتجر
   ========================================================= */

/* نص زر السلة أبيض (كان برتقالي على برتقالي) */
salla-add-product-button button *,
.s-product-card-content-footer button *,
.s-button-primary * {
  color: #FFFFFF !important;
}
salla-add-product-button button svg,
.s-product-card-content-footer button svg {
  fill: #FFFFFF !important;
}

/* السعر يظهر تحت الاسم مباشرة بلا فراغ */
.s-product-card-content-sub {
  display: flex !important;
  margin-top: 4px !important;
}
.s-product-card-content-main,
.s-product-card-content-title {
  min-height: 0 !important;
  flex-grow: 0 !important;
}
.s-product-card-content {
  justify-content: flex-start !important;
}
.s-product-card-content-footer {
  margin-top: 10px !important;
}

/* البنر: يظهر بمقاسه الحقيقي بدل التكبير والقص */
.roro-hero,
.roro-hero .swiper,
.roro-hero .swiper-wrapper,
.roro-hero .swiper-slide,
.roro-hero [class*="h-screen"],
.roro-hero [class*="min-h"] {
  height: auto !important;
  min-height: 0 !important;
}
.roro-hero img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
}
.roro-hero [style*="background-image"] {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  aspect-ratio: 1122 / 1175;
  height: auto !important;
  min-height: 0 !important;
}

/* البنر: منع التكبير والقص من الجانبين */
.roro-hero {
  overflow: hidden !important;
}
.roro-hero picture,
.roro-hero figure,
.roro-hero a,
.roro-hero img,
.roro-hero [style*="background-image"],
.roro-hero [class*="scale"] {
  transform: none !important;
  max-width: 100% !important;
  width: 100% !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  animation: none !important;
}
.roro-hero [class*="py-"],
.roro-hero [class*="pb-"] {
  padding-bottom: 0 !important;
}

/* نص البنر (يضيفه كود JavaScript تحت الصورة) */
.roro-hero::after {
  content: "";
  display: block;
  height: 12px;
  background: var(--roro-stripes);
}
#roro-hero-text { margin-top: 22px; }
.roro-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.roro-hero-badge {
  background: var(--roro-yellow);
  color: var(--roro-ink);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
}
.roro-hero-text h1 {
  margin: 0;
  font-family: 'Baloo Bhaijaan 2', sans-serif !important;
  font-weight: 800 !important;
  font-size: 34px !important;
  line-height: 1.3 !important;
  color: var(--roro-ink) !important;
}
.roro-hero-text h1 em {
  font-style: normal;
  color: var(--roro-orange);
}
.roro-hero-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--roro-muted);
}
.roro-hero-btn {
  margin-top: 6px;
  background: var(--roro-orange);
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 34px;
  border-radius: 999px;
  text-decoration: none !important;
}
@media (min-width: 768px) {
  .roro-hero-text h1 { font-size: 48px !important; }
}

/* بطاقات المنتجات: صورة أقصر وبلا فراغ بين الاسم والسعر والزر */
.s-product-card-image {
  aspect-ratio: 4 / 5 !important;
  height: auto !important;
  min-height: 0 !important;
}
.s-product-card-image img,
.s-product-card-image a {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.s-product-card-entry,
.s-product-card-content {
  height: auto !important;
}
.s-product-card-content {
  flex: 0 0 auto !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
.s-product-card-content-main,
.s-product-card-content-title,
.s-product-card-content-subtitle {
  min-height: 0 !important;
  height: auto !important;
  margin-bottom: 0 !important;
}
.s-product-card-content-subtitle:empty { display: none !important; }
.s-product-card-content-sub,
.s-product-card-content-footer,
.s-product-card-entry [class*="mt-auto"] {
  margin-top: 6px !important;
}
.s-product-card-content-footer button,
salla-add-product-button button {
  min-height: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
}

/* البطاقات في السلايدر لا تتمدد لطول أطول بطاقة */
.swiper-slide:has(.s-product-card-entry),
.swiper-slide:has(salla-add-product-button) {
  height: auto !important;
  align-self: flex-start !important;
}
.s-product-card-entry {
  justify-content: flex-start !important;
}

/* =========================================================
   المسافة بين اسم المنتج والسعر
   (لا يلمس أي جزء فيه صورة حتى لا تختفي الصور)
   ========================================================= */
custom-salla-product-card [class*="content"]:not(:has(img)),
.s-product-card-content:not(:has(img)),
[class*="product-card"] [class*="content"]:not(:has(img)) {
  justify-content: flex-start !important;
  height: auto !important;
  min-height: 0 !important;
  flex-grow: 0 !important;
  gap: 6px !important;
}
custom-salla-product-card [class*="content"]:not(:has(img)) *,
[class*="product-card"] [class*="content"]:not(:has(img)) * {
  min-height: 0 !important;
  flex-grow: 0 !important;
}
[class*="product-card"] [class*="content"] [class*="mt-auto"],
[class*="product-card"] [class*="content"] [class*="price"],
[class*="product-card"] [class*="content-sub"] {
  margin-top: 6px !important;
}
[class*="product-card"] [class*="subtitle"]:empty,
[class*="product-card"] [class*="description"]:empty,
[class*="product-card"] p:empty {
  display: none !important;
}

/* ضمان ظهور صورة المنتج دائمًا */
.s-product-card-image,
[class*="product-card"] [class*="image"]:has(img) {
  display: block !important;
  position: relative !important;
  aspect-ratio: 4 / 5 !important;
  min-height: 200px !important;
  height: auto !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.s-product-card-image img,
[class*="product-card"] [class*="image"] img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 1 !important;
  visibility: visible !important;
}