/* ============================================================
   رِسوما — CSS مخصص لثيم رائد على سلة
   نسخة نظيفة (2026-09-04) — تحل محل أي نسخة سابقة بالكامل
   تُلصق في: تصميم المتجر ← تخصيص القالب ← كود مخصص ← تبويب CSS
   ============================================================ */

:root{
  --color-primary: #004956;        /* التركوازي الغامق المعتمد بهوية رسوما */
  --color-primary-dark: #075866;
  --color-primary-light: #0C8CA3;  /* التركوازي الفاتح */
  --color-primary-reverse: #ffffff;
  --rsm-paper: #F7F3EA;
  --rsm-ink: #17140F;
  --rsm-line: #DED0AE;
}

/* ---------- الهيدر ---------- */
.navbar-brand img{ max-height: 5.5rem; }
@media (min-width:640px){ .navbar-brand img{ max-height: 7rem; } }

/* توسيط الشعار، ونزول قائمة الأقسام (ul.main-menu) تحته متمركزة (شاشات أكبر من الجوال) */
@media (min-width:769px){
  .main-nav-container .inner{
    position: relative;
    padding-bottom: 4.75rem; /* يفسح مساحة تحت القائمة تساوي المسافة فوقها (نفس الهامش) */
  }
  .navbar-brand{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
  }
  /* القائمة الحقيقية: ul.main-menu داخل custom-main-menu — نثبتها بنفس طريقة الشعار بالضبط */
  .main-nav-container .main-menu{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1.5rem; /* هامش فوق القائمة (بين الشعار والأقسام) */
    width: max-content;
    max-width: 92%;
    text-align: center;
    white-space: nowrap;
    z-index: 4;
  }
}
.main-nav-container.fixed-header .inner{
  background-color: rgba(247,243,234,.92);
  backdrop-filter: blur(9px);
}
.main-nav-container.fixed-pinned .inner{
  box-shadow: 0 0 5px var(--color-primary);
}
/* منع الثيم من تصغير الشعار جدًا عند تثبيت الهيدر أثناء التمرير للأعلى */
.main-nav-container.fixed-header .navbar-brand img,
.main-nav-container.fixed-pinned .navbar-brand img,
#mainnav.fixed-header .navbar-brand img,
#mainnav.fixed-pinned .navbar-brand img{
  max-height: 4.5rem !important;
}
@media (min-width:640px){
  .main-nav-container.fixed-header .navbar-brand img,
  .main-nav-container.fixed-pinned .navbar-brand img,
  #mainnav.fixed-header .navbar-brand img,
  #mainnav.fixed-pinned .navbar-brand img{
    max-height: 5.5rem !important;
  }
}
#fixed-header{
  box-shadow: rgba(0,0,0,.05) 0 2px 6px -1px, rgba(0,0,0,.06) 0 2px 4px -1px;
}

/* ---------- عناوين الأقسام ---------- */
.s-block__title h2,
.s-slider-block__title h2{ font-size: 1.45rem; }
[dir=rtl] .s-block__title .right-side,
[dir=rtl] .s-slider-block__title-right{
  padding-left: 0;
  background: linear-gradient(307deg, var(--color-primary) -67%, transparent 75%);
}
.section-title{ text-align: center; }

/* ---------- البنرات ---------- */
.banner-entry{ border-radius: 1rem; }

/* ---------- الأزرار ---------- */
.s-button-primary-outline{
  color: var(--color-primary);
  fill: var(--color-primary);
  border: 2px solid var(--color-primary);
  background: transparent;
}
.s-button-primary-outline:hover{
  background-color: var(--color-primary);
  color: #fff;
  fill: #fff;
}
.s-button-primary{
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.s-button-primary:hover{
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
}
.btn-product-card-select-variant,
.product-card-add-to-cart{
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
}
.btn-product-card-select-variant:hover,
.product-card-add-to-cart:hover{
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}
.button.more-button, a.more-button{ padding: 12px 16px; }
.button.more-button:hover, a.more-button:hover{
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
}

/* ---------- بطاقات المنتجات ---------- */
.s-product-card-vertical,
.product-entry{
  border: 1px solid var(--rsm-line);
  border-radius: .875rem;
}
salla-product-card{
  border-radius: .875rem;
  box-shadow: 0 0 12px 0 rgba(0,73,86,.14); /* ظل خفيف بلون رسوما التركوازي بدل الرمادي الأصلي */
}
.s-button-primary-outline{
  box-shadow: 0 0 10px 0 rgba(0,73,86,.18);
}
.product-item{ background-color: #fff; padding-bottom: 16px; }
.product-item .product-title{
  font-size: 16.5px;
  font-weight: 500;
  text-align: center;
  color: var(--rsm-ink);
}
.product-price,
.product-formatted-price{
  text-align: center;
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- صفحة المنتج ---------- */
#product-form .size-box label{ font-size: 16px; font-weight: 700; }
#product-form .size-box ul li span{ font-size: 16px; }
.products-details-page .description-title{ font-size: 20px; margin: 0 0 8px; }
.products-details-page .description-paragrah{ font-size: 16.5px; }
.blog-text a{ color: var(--color-primary); font-weight: 700; text-decoration: underline; }

/* ---------- الفوتر ---------- */
.footer-is-light .store-footer .store-footer__inner{
  background: var(--color-primary);
  color: #fff;
  border-radius: 18px;
}
.footer-about-us-links-div h1{ font-size: 18.5px; color: #efefef; }
.footer-about-us-links-div p,
.footer-about-us-links-div a{ font-size: 16px; color: #c7c7c7; }
.footer-about-us-links-div a:hover{ color: #f7f7f7; }
.social-icons{ display: flex; justify-content: center; margin: 0 auto; }
.social-icons span{ color: #f7f7f7; }

/* ---------- الجوال (768px وأقل) ---------- */
@media only screen and (max-width: 768px){
  .announcement-text{
    font-size: 14.5px;
    line-height: 1.5;
    max-width: 280px;
    margin: 3px 0;
  }
  .breadcrumb{ background-color: #f7f7f7; padding: 1.25rem 1rem; }
  .breadcrumb-item a,
  .breadcrumb-item.active{ font-size: 14px; }
  .image-logo{ max-width: 190px; }
  .navbar-brand img{ max-height: 5rem; }
}

/* شاشات صغيرة جدًا (480px وأقل) */
@media only screen and (max-width: 480px){
  .image-logo{ max-width: 160px; }
  .navbar-brand img{ max-height: 4rem; }
}