/* Add custom CSS styles below */ 
body{
background-color:#fff;
}

.footer-is-light .store-footer {
color:#fff;
background-color:#45b2cd;
}
.footer-is-light .store-footer .store-footer__inner {
color:#fff;
background-color:#45b2cd;
}
/* =======================
   PEM – Clean Styles
   ======================= */


.pem-about-wrap{display:flex;justify-content:center;margin-top:14px}
.pem-about-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:999px;border:0;cursor:pointer;
  font:600 14px/1.1 inherit;color:#fff;background:#FF5A3D; 
  text-decoration:none;box-shadow:0 10px 26px rgba(0,0,0,.12),0 3px 8px rgba(0,0,0,.06);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
}
.pem-about-btn:hover{background:linear-gradient(135deg,#E3492E,#FF5A3D);transform:translateY(-1px)}
.pem-about-btn:active{transform:translateY(0)}
.pem-about-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,90,61,.35),0 8px 24px rgba(0,0,0,.12)}
.pem-about-btn::before{
  content:"";width:8px;height:8px;border-radius:50%;background:#79C642;
  box-shadow:0 0 0 3px rgba(121,198,66,.35);margin-inline-start:-2px
}


.pem-about-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:flex-end;background:rgba(0,0,0,.35);
}
.pem-about-modal.is-open{display:flex}
.pem-about-panel{
  width:100%;max-width:720px;margin-inline:auto;background:#fff;border-radius:22px 22px 0 0;
  padding:20px 18px 24px;transform:translateY(100%);transition:transform .25s ease;
  max-height:80vh;overflow:auto;position:relative
}
.pem-about-modal.is-open .pem-about-panel{transform:translateY(0)}
.pem-about-title{margin:0 0 8px;font-weight:800;font-size:20px;color:#E3492E}
.pem-about-close{
  position:absolute;top:10px;inset-inline-end:12px;appearance:none;border:0;background:transparent;
  cursor:pointer;font-size:22px;line-height:1;color:#0F172A;padding:6px;border-radius:8px
}
.pem-about-grab{width:56px;height:6px;border-radius:999px;margin:0 auto 12px;background:#ffd3c9}
.pem-about-content{font-size:14px;color:#334155}
.pem-about-content p{margin:0 0 10px}

/* سطح المكتب: وسط النافذة */
@media (min-width:768px){
  .pem-about-modal{align-items:center}
  .pem-about-panel{border-radius:18px}
}



/* نافذة قراءة المزيد لمحتوى About Us */
.s-about-modal{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:flex-end; background:rgba(0,0,0,.35);
}
.s-about-modal.is-open{ display:flex; }
.s-about-panel{
  width:100%; max-width:720px; margin-inline:auto; background:#fff;
  border-radius:22px 22px 0 0; padding:20px 18px 24px;
  max-height:80vh; overflow:auto; transform:translateY(100%); transition:transform .25s ease;
  direction:auto;
}
.s-about-modal.is-open .s-about-panel{ transform:translateY(0); }
.s-about-title{ margin:0 0 8px; font-weight:800; font-size:20px; color:#0f172a; }
.s-about-close{
  position:absolute; top:10px; inset-inline-end:12px; appearance:none; border:0; background:transparent;
  cursor:pointer; font-size:22px; line-height:1; color:#0f172a; padding:6px; border-radius:8px;
}
@media (min-width:768px){
  .s-about-modal{ align-items:center; }
  .s-about-panel{ border-radius:18px; transform:translateY(20%); }
  .s-about-modal.is-open .s-about-panel{ transform:translateY(0); }
}


:root{
  --ink:#0f172a; --muted:#6b7280; --card:#fff; --border:#e5e7eb; --brand:#0f172a;
}

/* عنوان */
.s-blog{max-width:1200px;margin:24px auto;padding:0 16px;direction:rtl}
.s-blog__title{font-size:28px;text-align:center;margin:8px 0 4px;color:var(--ink)}
.s-blog__underline{width:64px;height:3px;background:var(--brand);margin:6px auto 18px;border-radius:999px}

/* الكاروسيل */
.s-carousel{position:relative}
.s-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:85%;
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:6px;
}
@media (min-width:640px){ .s-track{ grid-auto-columns:calc(50% - 12px); } }
@media (min-width:1024px){ .s-track{ grid-auto-columns:calc(33.333% - 12px); } }
.s-track::-webkit-scrollbar{height:8px}
.s-track::-webkit-scrollbar-thumb{background:#e5e7eb;border-radius:999px}

/* البطاقة */
.s-card{
  scroll-snap-align:start;
  background:var(--card); border:1px solid var(--border); border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column; min-height:100%;
  box-shadow:0 2px 10px rgba(0,0,0,.03); transition:transform .18s, box-shadow .2s, border-color .2s;
}
.s-card:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.08); border-color:#dde1e7; }
.s-card__thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; background:#f3f4f6; }
.s-card__body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; }
.s-card__meta{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; color:var(--muted); font-size:12px; }
.s-meta__sep{width:2px;height:2px;background:#cbd5e1;border-radius:50%}
.s-card__title{ font-size:18px; line-height:1.35; margin:0; color:var(--ink); }
.s-card__excerpt{ color:var(--muted); font-size:14px; margin:0; min-height:3.2em; }
.s-card__cta{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; color:var(--brand); text-decoration:none; font-weight:700; padding-top:4px }
.s-card__cta .arrow{ transition:transform .15s }
.s-card__cta:hover .arrow{ transform:translateX(-3px) }

/* الأسهم */
.s-nav{
  position:absolute; inset-block:0; display:flex; align-items:center; pointer-events:none;
}
.s-prev{ left: -4px; }
.s-next{ right: -4px; }
.s-btn{
  pointer-events:auto; border:1px solid var(--border); background:#fff; color:#111;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.08); cursor:pointer;
}
.s-btn:disabled{ opacity:.45; cursor:not-allowed }

/* نافذة المحتوى */
.s-about-modal{ position:fixed; inset:0; z-index:9999; display:none; align-items:flex-end; background:rgba(0,0,0,.35) }
.s-about-modal.is-open{ display:flex }
.s-about-panel{
  width:100%; max-width:720px; margin-inline:auto; background:#fff; border-radius:22px 22px 0 0;
  padding:20px 18px 24px; max-height:80vh; overflow:auto; transform:translateY(100%); transition:transform .25s ease
}
.s-about-modal.is-open .s-about-panel{ transform:translateY(0) }
.s-about-title{ margin:0 0 8px; font-weight:800; font-size:20px; color:#0f172a }
.s-about-close{
  position:absolute; top:10px; inset-inline-end:12px; appearance:none; border:0; background:transparent;
  cursor:pointer; font-size:22px; line-height:1; color:#0f172a; padding:6px; border-radius:8px
}
@media (min-width:768px){ .s-about-modal{ align-items:center } .s-about-panel{ border-radius:18px } }
.s-blog .s-blog__title,
.s-blog .s-blog__underline{
  display: none !important;
}

/* شيل الفراغ الزايد فوق الشبكة (اختياري) */
.s-blog{ margin-top: 30px; }

/* 1) توسيط عام داخل الفوتر */
footer, 
footer .container,
footer [class*="wrap"],
footer [class*="section"]{
  text-align: center !important;
}

/* 2) في حال الفوتر يستخدم Flex/Grid: خلّي العناصر تتمركز */
footer .flex,
footer [class*="flex"],
footer .grid,
footer [class*="grid"]{
  justify-content: center !important;
  align-items: center !important;
  justify-items: center !important;
}

/* 3) القوائم (روابط الأقسام/الخدمات) تصير صف واحد وسط */
footer ul,
footer ol{
  list-style: none;
  padding: 0 !important;
  margin: 8px auto !important;
  text-align: center !important;
}
footer ul li,
footer ol li{
  display: inline-block;
  margin: 0 .6rem .4rem;
}

/* 4) الروابط نفسها وسط وبنفس السطر */
footer a{
  display: inline-block;
  text-align: center !important;
}

/* 5) صف الأيقونات الاجتماعية (إن وجد) */
footer .social,
footer [class*="social"]{
  display: flex !important;
  justify-content: center !important;
  gap: .6rem;
}

/* 6) ملاحظة: لو فيه أعمدة كثيرة وتبينها تتكدّس تحت بعض */
@media (min-width: 1024px){
  /* شغّلي هالسطور فقط إذا تبين الفوتر كله بعمود واحد حتى على الديسكتوب */
  /* footer .grid{ grid-template-columns: 1fr !important; } */
}

/* توسيط عنوان البلوكات */
.s-block__title h2{
  text-align: center !important;
  margin-inline: auto;   /* لو العرض fit-content */
  width: 100%;           /* يضمن أخذ كامل السطر */
}

/* لو كان الأب يستخدم Flex */
.s-block__title{
  display: flex;
  justify-content: center;
  align-items: center;
}