/* Add custom CSS styles below */ 
/*!
 * تبات ونبات — مظهر المتجر على سلة (CSS فقط)
 * الهوية: أخضر الشعار يقود، والترابي يبيع (العروض والخصومات فقط).
 * التركيب: الصقه في "CSS مخصص" بمحرر الثيم، أو داخل <style> في الأكواد المخصصة.
 * ملاحظة: المحددات مبنية على ثيم "رائد"؛ عدّلها إن اختلف ثيمك.
 */

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

/* ================================================================
   1) الرموز: ألوان وخط وزوايا
   ================================================================ */
:root {
  --tn-green: #036026;
  --tn-green-dark: #02481c;
  --tn-leaf: #6FB73D;
  --tn-sand: #F3EEE6;
  --tn-clay: #C8643C;
  --tn-ink: #1F2A22;
  --tn-line: rgba(3, 96, 38, .12);
  --tn-radius: 16px;
  --tn-radius-sm: 12px;

  /* متغيرات ثيم سلة */
  --color-primary: #036026;
  --color-primary-dark: #02481c;
  --color-primary-light: #F3EEE6;
  --color-primary-reverse: #fff;
  --main-text-color: #1F2A22;
  --font-main: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

/* ================================================================
   2) الأساسيات والنص
   ================================================================ */
body,
button,
input,
select,
textarea {
  font-family: var(--font-main) !important;
  color: var(--tn-ink);
}

h1, h2, h3, h4,
.s-block__title h2,
.s-slider-block__title h2 {
  color: var(--tn-green);
  font-weight: 800;
  letter-spacing: 0;
}

a { transition: color .2s; }
a:hover { color: var(--tn-green-dark); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--tn-leaf);
  outline-offset: 2px;
}

::selection { background: var(--tn-leaf); color: #fff; }

/* ================================================================
   3) الترويسة
   ================================================================ */
.store-header,
.main-nav-container,
header.store-header {
  background: #fff;
  border-bottom: 1px solid var(--tn-line);
  box-shadow: none;
}

.top-navbar {
  background: var(--tn-clay) !important;   /* شريط الإعلان العلوي: ترابي للعروض */
  color: #fff !important;
  font-weight: 700;
}
.top-navbar a,
.top-navbar span { color: #fff !important; }

.main-menu a,
.navbar-brand + nav a { font-weight: 700; color: var(--tn-ink); }
.main-menu a:hover { color: var(--tn-green); }

/* عدّاد السلة */
.s-cart-summary-count,
.s-cart-summary-count.badge {
  background: var(--tn-clay) !important;
  color: #fff !important;
  font-weight: 700;
}

/* ================================================================
   4) الأزرار
   ================================================================ */
.s-button-primary,
.s-button-primary.s-button-solid,
.btn--primary,
salla-add-product-button .s-button-element,
salla-add-product-button button {
  background: var(--tn-green) !important;
  border-color: var(--tn-green) !important;
  color: #fff !important;
  border-radius: var(--tn-radius-sm) !important;
  font-weight: 700;
  transition: background .2s;
}
.s-button-primary:hover,
.btn--primary:hover,
salla-add-product-button button:hover {
  background: var(--tn-green-dark) !important;
}

.s-button-outline,
.s-button-primary.s-button-outline {
  background: transparent !important;
  color: var(--tn-green) !important;
  border: 2px solid var(--tn-green) !important;
  border-radius: var(--tn-radius-sm) !important;
}

/* ================================================================
   5) الأقسام الدائرية ("وش المناسبة اليوم؟")
   ================================================================ */
.s-block--main-links .s-block__title h2,
.s-block--main-links h2 { font-size: 22px; }

.s-block--main-links img,
.s-block--main-links .main-link__image,
.s-block--main-links a > div:first-child {
  border-radius: 50%;
  background: var(--tn-sand);
  outline: 1px solid var(--tn-line);
  object-fit: cover;
  transition: transform .2s, outline-color .2s;
}
.s-block--main-links a:hover img,
.s-block--main-links a:focus-visible img {
  transform: translateY(-2px);
  outline: 2px solid var(--tn-green);
}
.s-block--main-links a span,
.s-block--main-links a p {
  font-weight: 700;
  font-size: 14px;
  color: var(--tn-ink);
}

/* ================================================================
   6) بطاقات المنتجات
   ================================================================ */
.s-product-card-entry,
.product-entry {
  background: var(--tn-sand);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius);
  box-shadow: none;
  overflow: hidden;
  transition: border-color .2s;
}
.s-product-card-entry:hover { border-color: var(--tn-green); }

.s-product-card-image,
.s-product-card-image img { border-radius: 0; background: #fff; }

.s-product-card-content { padding: 12px; }

.s-product-card-content-title a,
.s-product-card-content-title {
  color: var(--tn-ink);
  font-weight: 700;
  line-height: 1.5;
}

/* السعر أخضر، والمشطوب والخصم ترابي */
.s-product-card-price,
.s-product-card-sale-price h4,
.s-product-card-content-sub h4 {
  color: var(--tn-green);
  font-weight: 800;
}
.s-product-card-sale-price span,
.s-product-card-price del,
.s-product-card-content-sub del {
  color: var(--tn-clay);
  opacity: .85;
}

.s-product-card-promotion-title,
.s-product-card-sale-end,
.s-product-card-ribbon {
  background: var(--tn-clay) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
}

/* زر المفضلة */
.s-product-card-wishlist-btn,
.s-product-card-wishlist-btn i { color: var(--tn-clay); }

/* ================================================================
   7) صفحة المنتج
   ================================================================ */
.product-single h1,
.main-content h1.product-title { color: var(--tn-green); }

.product-single .total-price,
.product-single .product-price,
.product-single .price-wrapper {
  color: var(--tn-green);
  font-weight: 800;
}
.product-single .before-price,
.product-single .price-wrapper del { color: var(--tn-clay); }

/* بطاقة العناية (الإضاءة، الري، التحمّل) تُكتب في الوصف كقائمة بوسم care */
.product-single .care-card,
.product-single ul.care {
  background: var(--tn-sand);
  border-radius: var(--tn-radius);
  padding: 14px 18px;
  list-style: none;
}

.product-single .s-form-control,
.s-quantity-input input {
  border-radius: var(--tn-radius-sm);
  border-color: var(--tn-line);
}

/* ================================================================
   8) السلة وإتمام الشراء
   ================================================================ */
.cart-item,
.s-cart-item,
.cart-summary,
.s-cart-summary-wrapper {
  border-radius: var(--tn-radius);
  border: 1px solid var(--tn-line);
  background: #fff;
}
.cart-summary .total,
.s-cart-total-price { color: var(--tn-green); font-weight: 800; }

.s-coupon-form button,
.s-cart-coupon button {
  background: var(--tn-clay) !important;
  border-color: var(--tn-clay) !important;
  color: #fff !important;
}

/* ================================================================
   9) النماذج والحقول
   ================================================================ */
.s-form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea,
select {
  border-radius: var(--tn-radius-sm);
  border: 1px solid var(--tn-line);
  background: #fff;
}
.s-form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--tn-green);
  box-shadow: 0 0 0 3px rgba(111, 183, 61, .25);
  outline: none;
}

/* ================================================================
   10) التذييل
   ================================================================ */
.store-footer,
footer.store-footer {
  background: var(--tn-green) !important;
  color: #fff;
}
.store-footer h3,
.store-footer h4,
.store-footer p,
.store-footer a,
.store-footer li { color: #fff !important; }
.store-footer a:hover { color: var(--tn-leaf) !important; }

.store-footer .s-social-link a,
.store-footer .social-link a {
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
}

/* بيانات الثقة: عدّل النص بما يناسب بيانات العميل */
.store-footer::after {
  content: "السجل التجاري  •  الرقم الضريبي  •  توثيق معروف";
  display: block;
  text-align: center;
  padding: 14px 16px;
  font-size: 13px;
  color: #fff;
  opacity: .9;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

/* ================================================================
   11) الجوال: شريط التنقل السفلي الخاص بسلة
   ================================================================ */
@media (max-width: 767px) {
  .s-block__title h2 { font-size: 20px; }

  .mobile-bottom-nav,
  .bottom-navigation,
  .s-bottom-navigation {
    background: #fff;
    border-top: 1px solid var(--tn-line);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-nav a,
  .bottom-navigation a,
  .s-bottom-navigation a {
    color: var(--tn-ink);
    font-weight: 700;
    font-size: 12px;
  }
  .mobile-bottom-nav a.is-active,
  .bottom-navigation a.is-active,
  .s-bottom-navigation a.is-active { color: var(--tn-green); }

  .s-product-card-content { padding: 10px; }
}

/* ================================================================
   12) الحركة: احترام تفضيل تقليلها
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}