/* path: /assets/css/safe-page-and-nav-bg.css */
/* لماذا: توحيد خلفية الصفحة والشريطين بدون تكسير الأيقونات/المكونات الخارجية. */

/* متغير واحد للون الصفحة */
:root {
  --page-bg: #e8e5d2;
  /* إن أردت نفس اللون للناف: */
  --nav-bg: var(--page-bg);
  --nav-fg: #1f2937;
  --nav-accent: #0f172a;
  --nav-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 20px rgba(0,0,0,.04);
  --nav-height: clamp(52px, 7vw, 76px);
  --nav-maxw: 1200px;
  --nav-padding-inline: clamp(12px, 3vw, 24px);
  --nav-gap: clamp(8px, 2.5vw, 18px);
}

/* 1) خلفية الصفحة فقط */
html, body {
  background: var(--page-bg) !important;
  min-height: 100%;
}

/* 2) الشريطين فقط (لا نلمس الأطفال نهائيًا) */
.main-nav-container,
.top-navbar,
header.main-nav-container,
header.top-navbar {
  background: var(--nav-bg) !important;
  color: var(--nav-fg);
}

/* ====== ستايل الناف الاحترافي (بدون أي تعميم على الأطفال) ====== */
.main-nav-container{
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: 1000;
  box-shadow: var(--nav-shadow);
  border-bottom: 1px solid rgba(0,0,0,.06);
  min-height: var(--nav-height);
  direction: rtl;
}
.main-nav-container .main-nav{
  margin-inline: auto;
  max-width: var(--nav-maxw);
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nav-gap);
  padding-inline: var(--nav-padding-inline);
}
.main-nav-container .nav-logo{
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: clamp(16px, 2.5vw, 20px);
  text-decoration: none;
  color: inherit;
}
.main-nav-container .nav-links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(6px, 2vw, 14px);
  justify-content: center;
}
.main-nav-container .nav-links a{
  color: var(--nav-fg);
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  padding: .6em .9em;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.main-nav-container .nav-links a:hover{
  background-color: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.09);
}
.main-nav-container .nav-actions{
  display: inline-flex;
  align-items: center;
  gap: clamp(6px, 2vw, 12px);
}
.main-nav-container .btn-primary{
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.1em;
  border-radius: 999px;
  background: var(--nav-accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.1);
  transition: transform .15s ease, opacity .2s ease;
}
.main-nav-container .btn-primary:hover{ transform: translateY(-1px); }
.main-nav-container .btn-primary:active{ transform: translateY(0); }

@media (max-width: 768px){
  .main-nav-container .main-nav{ gap: var(--nav-gap); }
  .main-nav-container .nav-links{
    flex: 1 1 auto;
    justify-content: flex-start;
    order: 3;
  }
  .main-nav-container .nav-actions{
    order: 2;
    margin-inline-start: auto;
  }
  .main-nav-container .nav-links a{ padding: .55em .85em; }
}

/* وصولية */
.main-nav-container a:focus-visible,
.main-nav-container button:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ملاحظة مهمة:
   حذفت بالكامل أي سطور كانت تغيّر خلفيات كل العناصر:
   - لا يوجد: .main-nav-container * { background-color: transparent; }
   - لا يوجد: *, *::before, *::after { background-color: inherit !important; }
   هذا يحمي SVG/img/مكوّنات خارجية من الانقلاب. */






/* path: /assets/css/footer-premium.css */

/* متغيرات الفوتر */
:root{
  --footer-bg: #e8e5d2;        /* يتناغم مع لون صفحتك */
  --footer-fg: #0f172a;
  --footer-muted: #475569;
  --footer-accent: #0f172a;
  --footer-border: rgba(15,23,42,.12);
  --footer-shadow: 0 -10px 30px rgba(0,0,0,.06);
  --footer-radius: 22px;
  --footer-pad-block: clamp(28px, 6vw, 56px);
  --footer-pad-inline: clamp(16px, 5vw, 32px);
  --footer-gap: clamp(16px, 3vw, 28px);
  --footer-heading-size: clamp(15px, 2.2vw, 18px);
  --footer-text-size: clamp(13px, 2vw, 16px);
}

/* الحاوية الداخلية للفوتر */
.footer-is-light .store-footer .store-footer__inner{
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-border);
  box-shadow: var(--footer-shadow);
  border-top-left-radius: var(--footer-radius);
  border-top-right-radius: var(--footer-radius);
  padding: var(--footer-pad-block) var(--footer-pad-inline);
  direction: rtl;
  /* حركة دخول */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}

/* تظهر عند الإضافة عبر JS */
.footer-is-light .store-footer .store-footer__inner.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* شبكة الأعمدة */
.footer-is-light .store-footer .store-footer__inner .footer-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--footer-gap);
}

/* دعم إن لم يوجد عنصر .footer-grid: طبّق الشبكة على الأطفال المباشرين */
.footer-is-light .store-footer .store-footer__inner:not(:has(.footer-grid)){
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--footer-gap);
}

/* العناوين */
.footer-is-light .store-footer .store-footer__inner :where(h3,h4,.footer-title){
  margin: 0 0 .8em;
  font-weight: 900;
  font-size: var(--footer-heading-size);
  letter-spacing: -.01em;
  position: relative;
  padding-bottom: .5em;
}
.footer-is-light .store-footer .store-footer__inner :where(h3,h4,.footer-title)::after{
  content: "";
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(15,23,42,.7), rgba(15,23,42,0));
}

/* النصوص والروابط */
.footer-is-light .store-footer .store-footer__inner :where(p,li,small,span){
  font-size: var(--footer-text-size);
  color: var(--footer-muted);
  line-height: 1.8;
}

.footer-is-light .store-footer .store-footer__inner a{
  color: var(--footer-fg);
  text-decoration: none;
  font-weight: 700;
  position: relative;
}
.footer-is-light .store-footer .store-footer__inner a::after{
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -3px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: var(--x-origin, right);
  background: currentColor;
  transition: transform .2s ease;
}
.footer-is-light .store-footer .store-footer__inner a:hover::after{
  transform: scaleX(1);
}

/* قوائم الروابط */
.footer-is-light .store-footer .store-footer__inner :where(ul.footer-links, .footer-links, ul){
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .6em;
}

/* صندوق النشرة البريدية إن وُجد */
.footer-is-light .store-footer .store-footer__inner :where(form.newsletter, .newsletter){
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .6em;
  align-items: center;
}
.footer-is-light .store-footer .store-footer__inner :where(.newsletter input[type="email"], .newsletter input[type="text"]){
  width: 100%;
  padding: .9em 1em;
  border-radius: 12px;
  border: 1px solid var(--footer-border);
  background: #fff;
  color: var(--footer-fg);
  outline: none;
}
.footer-is-light .store-footer .store-footer__inner :where(.newsletter button, .newsletter .btn){
  padding: .9em 1.2em;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.18);
  background: var(--footer-accent);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease;
}
.footer-is-light .store-footer .store-footer__inner :where(.newsletter button, .newsletter .btn):hover{
  transform: translateY(-1px);
}

/* صف الأيقونات الاجتماعية/الدفع إن وُجد */
.footer-is-light .store-footer .store-footer__inner :where(.social, .payments, .badges){
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-is-light .store-footer .store-footer__inner :where(.social a, .payments img, .badges img){
  line-height: 0;
  display: inline-flex;
}
.footer-is-light .store-footer .store-footer__inner :where(.payments img, .badges img){
  height: 24px;
  width: auto;
  filter: none;           /* لا نتلاعب بألوان الأيقونات */
  background: transparent;/* لا نقصّ خلفياتها */
}

/* فاصل علوي للشريط السفلي */
.footer-is-light .store-footer .store-footer__inner .footer-bottom{
  margin-top: clamp(18px, 4vw, 32px);
  padding-top: 16px;
  border-top: 1px dashed var(--footer-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: .95em;
  color: var(--footer-muted);
}

/* أزرار خفيفة في الشريط السفلي إن وُجدت */
.footer-is-light .store-footer .store-footer__inner .footer-bottom :where(a.button, .link-btn){
  padding: .55em .9em;
  border-radius: 999px;
  border: 1px solid var(--footer-border);
  background: #fff;
  color: var(--footer-fg);
  font-weight: 700;
}

/* استجابة */
@media (max-width: 768px){
  .footer-is-light .store-footer .store-footer__inner{
    padding-bottom: max(var(--footer-pad-block), 32px);
  }
}

/* وصولية وتقليل الحركة */
.footer-is-light .store-footer .store-footer__inner :where(a, button):focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .footer-is-light .store-footer .store-footer__inner{
    transition: none;
    transform: none !important;
    opacity: 1 !important;
  }
  .footer-is-light .store-footer .store-footer__inner a::after{
    transition: none;
  }
}



/* path: /assets/css/fabrics-cards-like-screenshot.css */
/* هوية */
:root{
  --acc: #2e292a;
  --bg-card: #fff;
  --fg: #0f172a;
  --muted: #6b7280;
  --border: rgba(46,41,42,.14);
  --shadow: 0 10px 24px rgba(0,0,0,.06);
  --shadow-hover: 0 14px 32px rgba(0,0,0,.10);
  --radius: 18px;
}

/* الكرت العام (يمكنك وضع هذا على عنصر الغلاف الخارجي للكرت) */
.product-card,
.carousel-slider .swiper-wrapper > div,
salla-slider[type]:not(.hydrated) .swiper > div > div > div,
salla-slider[type]:not(.hydrated) > div > div{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
  overflow: hidden;
  direction: rtl;
}
.product-card:hover,
.carousel-slider .swiper-wrapper > div:hover,
salla-slider[type]:not(.hydrated) .swiper > div > div > div:hover,
salla-slider[type]:not(.hydrated) > div > div:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(46,41,42,.22);
}

/* منطقة الصورة */
.product-card .media,
.s-product-card-content ~ .media, /* لو الصورة خارج .s-product-card-content */
.carousel-slider .swiper-wrapper > div .media{
  position: relative;
  padding: 14px 14px 0;
}
.product-card .media img{
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  border-radius: calc(var(--radius) - 8px);
  display: block;
  background: #e8e5d2; /* لون الخلفية العام قبل التحميل */
  transition: transform .35s ease;
}
.product-card:hover .media img{ transform: scale(1.02); }

/* بادج أعلى الصورة (نقشة/مقلم …) */
.product-card .badge{
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  background: var(--acc);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1;
}

/* محتوى البطاقة */
.s-product-card-content{
  padding: 12px 16px 16px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto; /* عنوان، سطر عرض، تقييم، فراغ، سعر/زر */
  gap: 8px;
  background: var(--bg-card);
}

/* العنوان (مثل “ريفاكشن…”) */
.s-product-card-content :where(h3,h4,.title,.product-title){
  margin: 0;
  color: var(--fg);
  font-weight: 900;
  font-size: clamp(15px,2.2vw,18px);
  line-height: 1.3;
  letter-spacing: -.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* سطران */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s-product-card-content :where(h3 a,h4 a,.title a,.product-title a){ color: inherit; text-decoration: none; }

/* شارة العرض الصغيرة (حبّة) */
.s-product-card-content .deal-pill{
  display: inline-grid;
  place-items: center;
  width: max-content;
  padding: .45em .85em;
  border-radius: 999px;
  background: var(--acc);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(46,41,42,.25);
}

/* التقييم (نترك أيقوناتك كما هي) */
.s-product-card-content .rating{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* السعر أسفل اليسار مثل الصورة (RTL: نهاية السطر) */
.s-product-card-content .price-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}
.s-product-card-content :where(.price,[class*="price"],.product-price){
  color: var(--fg);
  font-weight: 900;
  font-size: clamp(16px,2.6vw,21px);
  letter-spacing: -.01em;
}
.s-product-card-content :where(.price small,.price .unit,[class*="price"] small){
  color: var(--muted);
  font-weight: 700;
  font-size: .85em;
  margin-inline-start: .35em;
}

/* زر (خيارات متعددة / أضف للسلة) */
.s-product-card-content :where(
  .btn,
  button,
  [role="button"],
  [class*="add"],
  [data-action*="cart"]
){
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .85em 1.1em;
  border-radius: 12px;
  border: 1px solid rgba(46,41,42,.2);
  background: color-mix(in oklab, var(--acc) 90%, white);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(46,41,42,.25);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.s-product-card-content :where(.btn,button,[role="button"],[class*="add"],[data-action*="cart"]):hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(46,41,42,.32);
}
.s-product-card-content :where(.btn,button,[role="button"],[class*="add"],[data-action*="cart"]):active{
  transform: translateY(0);
}

/* زر ثانوي شفاف (إن استُخدم) */
.s-product-card-content .btn--ghost{
  background: rgba(46,41,42,.08);
  color: var(--acc);
  border-color: rgba(46,41,42,.12);
}

/* وصولية */
.s-product-card-content :where(a,button):focus-visible{
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* لون الصفحة العام (من صورك السابقة) */
html,body{ background:#e8e5d2; }



/* path: /assets/css/center-brand.css */
/* لماذا: محاذاة شعار .navbar-brand في وسط الهيدر وتكبيره بشكل آمن ومتجاوب. */

/* اجعل حاوية الهيدر مرجِعًا للتموضع المطلق */
.main-nav-container,
header.top-navbar,
header.navbar,
header.site-header {
  position: relative;
}

/* وسّط .navbar-brand تمامًا داخل الهيدر */
.main-nav-container .navbar-brand,
header.top-navbar .navbar-brand,
header.navbar .navbar-brand,
header.site-header .navbar-brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-height, clamp(52px, 7vw, 76px)); /* يطابق ارتفاع الهيدر إن وُجد */
  z-index: 2; /* فوق خلفية الهيدر، لا يتعارض مع القوائم */
  pointer-events: auto; /* يظل قابل للنقر */
  padding: 0; 
}

/* تكبير الشعار مع الحفاظ على التناسب */
.main-nav-container .navbar-brand img,
header.top-navbar .navbar-brand img,
header.navbar .navbar-brand img,
header.site-header .navbar-brand img {
  height: clamp(36px, 6.5vw, 72px); /* كبّر هنا كما تحب */
  width: auto;
  max-height: 90%;      /* لا يتجاوز الهيدر */
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* مساحة جانبية لعناصر اليسار/اليمين حتى لا تلتصق تحت الشعار */
.main-nav-container .main-nav,
header.top-navbar .main-nav {
  padding-inline: clamp(16px, 4vw, 28px);
}

/* ضبط للشاشات الصغيرة: قلّل حجم الشعار قليلاً */
@media (max-width: 480px){
  .main-nav-container .navbar-brand img,
  header.top-navbar .navbar-brand img,
  header.navbar .navbar-brand img,
  header.site-header .navbar-brand img {
    height: clamp(28px, 8vw, 44px);
  }
}





/* path: /assets/css/header-same-as-page.css */
/* لون الصفحة الأساسي */
:root { --page-bg: #e8e5d2; }

/* طبّق نفس اللون على الهيدر فقط */
html, body { background: var(--page-bg) !important; }

.main-nav-container,
.top-navbar,
header.top-navbar,
header.navbar,
header.site-header {
  background: var(--page-bg) !important;
}

/* لا نبدّل ألوان الأيقونات/الشعار */
.main-nav-container *,
.top-navbar * {
  background-color: initial;   /* لا نفرض خلفية على الأبناء */
  color: inherit;              /* نحافظ على ألوانهم الحالية */
}

/* الشعار يبقى شفافًا فوق الخلفية */
.navbar-brand,
.navbar-brand img { background: transparent !important; }



/* path: /assets/css/strip-features-bg.css */
/* يشيل الخلفية فقط */
.s-block--features__item{
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}