/* ================================
   لوحة ألوان الشِعار (قابلة للتعديل)
   ================================ */
:root{
  --brand: #2F3E44;          /* اللون الرئيسي (الحرف) */
  --accent: #E8642B;         /* البرتقالي */
  --paper: #fefefe;          /* خلفيات فاتحة عامة */
  --ink: #000000;            /* نص أسود */
  --muted-ink: #64727A;      /* نص خافت */
  --footer-bg: #F5F7F8;      /* خلفية التذييل */
  --footer-ink: var(--brand);
  --accent-soft: #FFF3E9;    /* خلفية خفيفة للبرتقال */
  --accent-ink: #fff;        /* نص على البرتقالي */
}

/* Add custom CSS styles below */ 
/*header*/
header .bg-white {
    background: var(--paper);
    box-shadow: none;
}
.header-btn__icon.icon:where([dir="rtl"], [dir="rtl"] *) { margin-left: 0px; }

.sicon-menu:before {
    color: var(--brand);
    margin-right: 0;
    font-size: 20px;
    padding: 7px;
    content: "\e928";
}
.sicon-shopping-bag:before {
    color: var(--brand);
    font-size: 20px;
    padding: 7px;
    content: "\e906";
}
.sicon-user-circle:before {
    color: var(--brand);
    font-size: 20px;
    padding: 7px;
    content: "\f078";
}
.header-btn__icon { border-width: 0 }
.s-cart-summary-content { display: none }
.rtl\:mr-4:where([dir=rtl],[dir=rtl] *) { margin-right: 0 }
.s-cart-summary-count {
    background-color: var(--accent);
    color: var(--accent-ink);
}

/*general*/
body, .bg-gray-100 { background-color: var(--paper); }

/*fixeed banner*/
section.s-block.s-block--fixed-banner.wide-placeholder > .container {
    padding-left: 0px; padding-right: 0px; max-width: 100%;
}
@media (max-width: 991px) {
  section.s-block.s-block--fixed-banner.wide-placeholder .container { padding: 0; }
}
.banner--fixed img { background: none; border-radius: 0rem !important; }
section.s-block.s-block--fixed-banner.wide-placeholder { margin-top: 0px; }

/*tiker*/
.stock-ticker {
  background-color: var(--brand) !important;
  font-size: 15px; overflow: hidden; user-select: none;
  --gap: 20px; display: flex; gap: var(--gap);
  color: #FFE7D6;  /* نص فاتح متناغم مع البرتقالي */
  padding-top: .5rem; padding-bottom: .5rem;
}
.stock-ticker ul {
  list-style: none; flex-shrink: 0; min-width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--gap); animation: scroll 80s linear infinite;
}
.stock-ticker:hover ul { animation-play-state: paused; }
@keyframes scroll { to { transform: translateX(calc(100% - var(--gap))); } }
.stock-ticker .company, .stock-ticker .price { font-weight: bold; }
.stock-ticker .price { margin-inline: 4px; }

/*===products===*/
.s-block__title { align-items: center; justify-content: center; }
[dir=rtl] .s-block__title .right-side { padding-left: 0rem; }
.s-block__title { color: var(--ink); text-align:center; }

.s-product-card-vertical .s-product-card-image{
  border-top-left-radius: 0rem; border-top-right-radius: 0rem;
  max-height: 19rem; min-height: 19rem;
}
.s-product-card-entry{
  border-radius: 5px; background-color: var(--paper);
  padding: 0px; border: .01rem groove #00000024;
}
.s-product-card-content-main{ padding-right: .37rem; padding-left: .37rem; }
.s-product-card-content-sub{ padding: .37rem; }
salla-button .s-button-btn{
  border-radius: 0px; background-color: var(--paper);
  color: var(--ink); border-width: .5px;
}
salla-button .s-button-btn span.s-button-text{ color: var(--ink); }
salla-button .s-button-btn span.s-button-text:hover{ color: var(--ink); }
.s-products-list-vertical-cards{ gap: 8px; }
.s-button-text .sicon-shopping-bag{ display: none; }
.s-product-card-content-footer .s-button-btn{ border-radius: .3rem!important; }
.s-product-card-content{ background: none; padding-left: .4rem; padding-right: .4rem; }
.s-product-card-content-main{ padding-bottom: 0rem; justify-content: center; }
.s-product-card-content-sub{ margin-bottom: .50rem; justify-content: center; }

.s-product-card-content-title a{
  text-align: center; color: var(--ink); font-size: .8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.s-block__title{ flex-direction: column; }
[dir=rtl] .s-product-card-content-pie{ display: none; }
[dir=rtl] .s-product-card-special .s-product-card-content-main, 
[dir=rtl] special .s-product-card-content-sub{ padding-left: 0rem; }
[dir=rtl] .s-product-card-content-extra-padding{ padding-left: 0rem; padding-right: 0; }
.s-block--special-products .tabs{ display: none; }

[dir=rtl] .s-product-card-vertical .s-product-card-wishlist-btn{ left: 0rem; }
.s-product-card-vertical .s-product-card-wishlist-btn{ top: 0.12rem; }
.s-product-card-vertical .s-product-card-wishlist-btn button{ display:none; }
.s-product-card-price{ color: var(--ink); }
.s-slider-block__title{ justify-content: center; }
.s-slider-block__title-right:where([dir=rtl],[dir=rtl] *){ padding-left: 0rem; }
.s-slider-block__title h2:where([dir=rtl],[dir=rtl] *){ padding-left: 0rem; }
.s-product-card-image::before{ background: #fff; color: #fff }

/* عنوان فرعي للمنتج (لون مميز من الشعار) */
.s-product-card-content-subtitle{
  color: var(--accent) !important;
  text-align: center; margin-bottom: .15rem; font-size: 12px;
}

/* شارة/عنوان ترويجي */
.s-product-card-promotion-title{
  background-color: var(--accent-soft);
  color: var(--accent);
}

.s-product-card-fit-height .s-product-card-image{ height: 12rem; }
.s-comments-product{ background-color: #fff; }
.s-block__display-all{ margin-top: .6rem; }

/*testimonal*/
.s-reviews-testimonial__avatar{ display: none !important; }
.s-reviews-testimonial__text{ text-align: center; }
.s-reviews-testimonial__rating{ margin-left: 0rem; }
.s-reviews-testimonial__icon svg{ display:none }
.s-reviews-testimonial{
  background-color: #fff; border: .02rem groove #00000034; border-radius: 8px;
}
.s-reviews-header-wrapper{ display:flex; flex-direction:column; align-items:center; }
.s-reviews-header{ margin-right: 0rem; color: var(--ink); }

/* نجوم التقييم باللون البرتقالي */
.s-rating-stars-selected{ fill: var(--accent); }

@media (min-width: 1024px){
  .s-block--testimonials.container{ padding-left: 0rem; padding-right: 0rem; }
  .s-reviews-testimonial__name_wrapper{ flex-direction: column; }
  .s-reviews-container .swiper-slide-active .s-reviews-testimonial:where([dir="rtl"], [dir="rtl"] *) {
    padding-left: 2rem; padding-right: 2rem;
  }
}

/*footer*/
.index .store-footer, .product-index .store-footer{
  background-color: var(--footer-bg);
  color: var(--footer-ink);
  margin: 1rem; border-radius: 10px;
}
.footer-is-light .store-footer .store-footer__inner{
  background-color: var(--footer-bg); color: var(--footer-ink);
}
footer.store-footer{ border-bottom-width: 0; border-radius: 0px; }
.footer-is-light .store-footer .store-footer__inner,
.footer-is-dark .store-footer .store-footer__inner{ background-color: transparent; }
.store-footer{ background-color: var(--footer-bg) !important; }
.footer-is-light .store-footer{ color: var(--footer-ink); }

@media (max-width: 900px){
  footer { text-align: center; }
  .s-contacts-icon:where([dir=rtl],[dir=rtl] *) { margin-left: 0rem; }
  .store-footer .md\:flex{ display:flex; flex-direction: column-reverse; }
}

.footer-is-light .store-footer .social-link{ border: none; }
footer .sicon-whatsapp2, footer .sicon-iphone,footer .sicon-phone, footer .sicon-mail{ border: none; }
.footer-is-light .store-footer .contact-social{ border: none; }
.store-footer .contact-social{ border-top-width: 0px; }
.store-footer .social-link{ border-radius: 2px; }
.store-footer__inner{ border-bottom-width: 0px; }
.copyright-text p{ color: var(--footer-ink); }
.bg-white{ border-radius: 2px; }

@media (max-width: 900px){
  .store-footer a div:nth-child(3)> .text-unicode:nth-child(1){ display: none; }
  .s-social-list{ justify-content: right; }
}
.lg\:col-span-2.rtl\:lg\:pr-20.ltr\:lg\:pl-20 .flex{ justify-content: right; }
.store-footer a .border{ border-width: 0px; }
.mb-6{ margin-top: 1.5rem; }
.store-footer h3{ color: var(--footer-ink); }

/* أزرار وروابط السوشيال بلون العلامة */
.s-social-link a, .s-contacts-icon{
  border-radius: 5px; border-width: 0px;
  background-color: var(--brand);
  color: #ffffff;
}

div#contact-slot:nth-child(1) span.unicode,
div#contact-slot:nth-child(2) span.unicode,
div#contact-slot:nth-child(3) span.unicode,
div#contact-slot:nth-child(4) span.unicode{ font-size: 0px; }
div#contact-slot:nth-child(1) span.unicode::after,
div#contact-slot:nth-child(2) span.unicode::after,
div#contact-slot:nth-child(3) span.unicode::after,
div#contact-slot:nth-child(4) span.unicode::after{
  font-size: .875rem; content: ""; text-align: right;
}

.s-contacts-list-vertical{ flex-direction: row; }
div#contact-slot span.unicode{ margin-top: 10px; }
.s-contacts-icon svg, .s-social-link a svg{ height: 1.2rem; width: 1.2rem; }

.copyright-text p{
  color: var(--footer-ink);
  display: flex; margin-top: .75rem;
}
.s-payments-list-item{ border-radius: 5px; }
.copyright-text .mb-2\.5{ margin-bottom: .25rem; }
span.dev-link A{ margin-left: .2rem }
span.dev-link{
  display: inline-flex; font-size: 9px; margin: 0 0px; margin-left: 0;
  color: var(--footer-ink); opacity: 1; flex-direction: row-reverse;
}
.s-apps-icons-list{ justify-content: center; }
.lg\:col-span-2.rtl\:lg\:pl-20.ltr\:lg\:pr-20 .hidden{ display: flex; }

.footer-is-light .store-footer .contact-social .s-social-list{ display: none; }
.store-footer__inner{ padding-bottom: 0rem; }
.store-footer .contact-social{
  margin-top: 0rem; border-top-width: 0px; padding-top: 0rem;
}
.s-payments-list-item{ border-radius: 2px; }

@media (max-width: 991px) {
  a.flex.items-center.m-0 {
    padding-right: 100px;
    background-image: url(https://cdn.salla.sa/form-builder/PzNVlYgUNb9wbCMXWanX7Yr5OmEz8TyfBXPSxZvx.png);
    background-size: 20%; background-repeat: no-repeat; background-position: center;
    padding-left: 0px; padding-top: 30px; padding-bottom: 0px;
  }
  a.flex.items-center.m-0 > h3{ visibility: hidden; }
}
.hidden.lg\:block{ justify-content: center !important; }
.s-contacts-list-vertical{ justify-content: center; }

/*=====categories=====*/
.s-block.s-block--banners > .grid { grid-template-columns: 1fr 1fr 1fr; }
.s-block.s-block--banners > .grid .banner-entry{ padding-top: 0%; border-radius: 0px; }
.two-row .banner-entry:first-child{ grid-column: auto; grid-row: auto; }
.s-block.s-block--banners > .grid .banner-entry{ height: 170px; }

/*categories responsive*/
@media (max-width: 600px) {
  .s-block.s-block--banners > .grid .banner-entry{ height: 170px; }
}
@media screen and (max-width: 900px) and (min-width:600px) {
  .s-block.s-block--banners > .grid .banner-entry{ height: 280px; }
}
@media screen and (min-width: 900px) {
  .s-block.s-block--banners > .grid .banner-entry{ height: 380px; }
}
@media screen and (min-width: 1200px) {
  .s-block.s-block--banners > .grid .banner-entry{ height: 450px; }
}
.s-block.s-block--banners .banner-entry:hover h3,
.s-block.s-block--banners .has-overlay:hover:after{ display: none; }

/*faqs*/
.faq-header{
  font-size: 20px; font-weight: bolder; text-align: center; padding-top: 40px; color: var(--ink);
}
.faq-content{ margin: 0 auto; }
.faq-question{
  padding: 20px 6px; border: .09rem groove var(--accent-soft);
  background-color: transparent; margin: 15px; border-radius: 8px;
}
.panel-title{
  font-size: 15px; width: 100%; position: relative; margin: 0;
  padding: 2px 26px 2px 2px; display: block; cursor: pointer;
  color: var(--ink); font-weight: 600;
}
.panel-content{
  font-size: 14px; padding: 0px 14px; margin: 0px; height: 0; overflow: hidden;
  z-index: 0; font-weight: 400; position: relative; opacity: 0; transition: .4s ease; color: var(--ink);
}
.panel:checked ~ .panel-content{ height: auto; opacity: 1; padding: 14px; }

/* علامة + بلون التمييز */
.plus{
  position: absolute; margin-left: 20px; margin-top: 0px; z-index: 5;
  font-size: 32px; line-height: 100%; user-select: none; transition: .2s ease;
  color: var(--accent);
}
.panel:checked ~ .plus{ transform: rotate(45deg); }
.panel{ display: none; }

/* فيديو الصفحة الرئيسية */
.home-video{ width: 100%; aspect-ratio: 9 / 16; margin: 24px 0; border-radius: 12px; overflow: hidden; }
.home-video iframe{ width: 100%; height: 100%; display: block; border: none; }
.home-video{ width: 100%; aspect-ratio: 9 / 16; margin: 0; padding: 0; border: none; border-radius: 0; overflow: hidden; position: relative; }
.home-video video{ width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; border: none; }

/* إزالة المسافة بين الهيدر والفيديو */
.index section:first-of-type{ margin-top: 0 !important; padding-top: 0 !important; }
header{ margin-bottom: 0 !important; }

/* اخفاء صف السوشيال المكرر داخل عمود "تواصل معنا" في التذييل */
footer .store-footer__inner .contact-social .s-social-list,
footer .store-footer__inner .s-contacts-list + .s-social-list,
footer .store-footer__inner .container:first-of-type > div:nth-of-type(3) .s-social-list { display: none !important; }
/* احتياطي لعناصر فردية */
footer .store-footer__inner .contact-social .s-social-link,
footer .store-footer__inner .s-contacts-list + .s-social-list .s-social-link,
footer .store-footer__inner .container:first-of-type > div:nth-of-type(3) .s-social-link { display: none !important; }

/* ===== Center all footer text & content ===== */
.store-footer,
.store-footer * {
  text-align: center !important;   /* توسيط النصوص */
}

.store-footer .container,
.store-footer__inner,
.store-footer .md\:flex,
.store-footer .flex {
  justify-content: center !important; /* توسيط العناصر المرنة */
  align-items: center !important;
  flex-direction: column;             /* يجعل المحتويات تحت بعض بشكل مرتب */
}

/* ====== شبكة أقسام مربعة مثل إنستقرام (ديناميكية) ====== */

/* نعطّل أي flex قديم ونحوّلها Grid */
section.s-block.s-block--banners .grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr); /* افتراضي: موبايل 2 في الصف */
  gap: 12px;
  white-space: normal !important;
  overflow: visible !important;
}

/* نلغي قيود flex القديمة على العناصر */
section.s-block.s-block--banners .grid .banner-entry {
  flex: initial !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent;
}

/* المربعات: نسبة 1:1 */
section.s-block.s-block--banners .grid .banner-entry > div {
  position: relative;
  aspect-ratio: 1 / 1;   /* مربع دائمًا */
  width: 100%;
  overflow: hidden;
}

/* الصورة تملأ المربع */
section.s-block.s-block--banners .grid .banner-entry > div img {
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* تغطية كاملة مع قصّ لطيف */
  border-radius: 6px;    /* اختياري */
}

/* دعم المتصفحات التي لا تدعم aspect-ratio */
@supports not (aspect-ratio: 1/1) {
  section.s-block.s-block--banners .grid .banner-entry > div {
    padding-top: 100% !important; /* يضمن مربع 1:1 */
  }
  section.s-block.s-block--banners .grid .banner-entry > div img {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* كمبيوتر: 4 صور في الصف (1×4) */
@media (min-width: 1024px) {
  section.s-block.s-block--banners .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ===== إصلاح شبكة الأقسام لتصبح مربعات 1:1 مع حواف بسيطة ===== */

/* تحكم فعلي بعد تعارُض القواعد السابقة */
.s-block.s-block--banners > .grid{
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important; /* موبايل: 2 */
  gap: 12px !important;
}

/* ديسكتوب: 4 في الصف */
@media (min-width:1024px){
  .s-block.s-block--banners > .grid{
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* إلغاء الارتفاعات الثابتة السابقة */
.s-block.s-block--banners > .grid .banner-entry{
  height: auto !important;
  padding-top: 0 !important;   /* نتأكد ما فيه نسبة قديمة */
}

/* جعل كل بطاقة مربعة (أياً كان العنصر الأول داخلاً: div/a/figure) */
.s-block.s-block--banners > .grid .banner-entry > *:first-child{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important; /* مربّع */
  overflow: hidden !important;
  border-radius: 8px !important;  /* حواف بسيطة */
}

/* الصورة تملأ المربع */
.s-block.s-block--banners > .grid .banner-entry > *:first-child :is(img, picture, figure){
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* دعم المتصفحات التي لا تدعم aspect-ratio */
@supports not (aspect-ratio: 1/1){
  .s-block.s-block--banners > .grid .banner-entry > *:first-child{
    padding-top: 100% !important;
  }
}