@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');

/* ============================================
   هوية VOCCE Care & Wellness — الأساس
   ============================================ */
:root{
  --v-bg:#EDE9DE;
  --v-footer-bg:var(--v-bg);

  --v-white:#FDFCF9;
  --v-slate:#4F6272;
  --v-slate-deep:#39485A;
  --v-sage:#9FAE8E;
  --v-rose:#C99AA1;
  --v-line:rgba(57,72,90,.14);
  --v-line-soft:rgba(57,72,90,.10);
  --v-line-strong:rgba(57,72,90,.22);
  --v-section-gap:16px;

  /* عرض محتوى الفوتر */
  --v-footer-cols:1180px;

  --v-title:'RH-Zak','The Seasons','IBM Plex Sans Arabic',serif;
  --v-body:'IBM Plex Sans Arabic','Montserrat',sans-serif;
}

/* ============================================
   الخطوط والألوان النصية
   ============================================ */
body{
  font-family:var(--v-body) !important;
  color:var(--v-slate) !important;
}

h1, h2, h3, h4, h5, h6,
.s-block__title,
[class*="section-title"],
[class*="block__title"]{
  font-family:var(--v-title) !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  line-height:1.3 !important;
  color:var(--v-slate) !important;
}

p{
  font-family:var(--v-body) !important;
  color:var(--v-sage) !important;
  line-height:1.7 !important;
}

a, li, td{
  font-family:var(--v-body) !important;
}
span:not([class*="sicon"]):not([class*="icon"]){
  font-family:var(--v-body) !important;
}

i,
[class*="sicon-"],
[class*="sicon-"]::before{
  font-family:'sallaicons' !important;
}

/* ============================================
   الخلفية الموحدة
   ============================================ */
html, body, main{
  background-color:var(--v-bg) !important;
}

main .s-block,
main > section,
main > div > section{
  background-color:transparent !important;
}

main [style*="background: #fff"],
main [style*="background:#fff"],
main [style*="background-color: #fff"],
main [style*="background-color:#fff"]{
  background-color:var(--v-bg) !important;
}

/* ============================================
   الهيدر
   ============================================ */
header,
.store-header{
  background-color:var(--v-bg) !important;
  border-bottom:1px solid var(--v-line) !important;
  box-shadow:none !important;
}

header svg, header i,
.store-header svg, .store-header i{
  color:var(--v-slate-deep) !important;
  fill:var(--v-slate-deep) !important;
  stroke:var(--v-slate-deep) !important;
}

header a:not([class*="count"]):not([class*="badge"]),
header button:not([class*="count"]):not([class*="badge"]),
header span:not([class*="count"]):not([class*="badge"]):not([class*="sicon"]),
header [class*="menu"] span,
header [class*="menu"] a,
.store-header a:not([class*="count"]):not([class*="badge"]),
.store-header span:not([class*="count"]):not([class*="badge"]):not([class*="sicon"]),
.store-header [class*="menu"] span{
  color:var(--v-slate-deep) !important;
}

header i, header [class*="sicon-"],
.store-header i, .store-header [class*="sicon-"]{
  font-size:22px !important;
  line-height:1 !important;
  color:var(--v-slate-deep) !important;
}

header [class*="count"],
header [class*="badge"],
.store-header [class*="count"],
.store-header [class*="badge"]{
  background-color:var(--v-rose) !important;
  color:#FFFFFF !important;
  border:2px solid var(--v-bg) !important;
  font-size:11px !important;
  font-weight:600 !important;
  min-width:18px !important;
  height:18px !important;
  line-height:14px !important;
  border-radius:999px !important;
}

/* ============================================
   الصفحة الرئيسية: هيدر شفاف فوق الهيرو
   ============================================ */
body.index header,
body.index .store-header,
body[class*="home"] header{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:50 !important;
  background-color:transparent !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

/* ============================================
   الأزرار
   ============================================ */
button,
[class*="btn"],
a[class*="button"]{
  font-family:var(--v-body) !important;
  letter-spacing:.02em;
}
.s-button-element:not(.s-button-icon),
button[class*="primary"]:not(.s-button-icon),
a[class*="btn-primary"]{
  background:var(--v-slate) !important;
  color:var(--v-white) !important;
  border:0 !important;
  border-radius:8px !important;
  font-weight:500 !important;
  transition:background .25s ease;
}
.s-button-element:not(.s-button-icon):hover,
button[class*="primary"]:not(.s-button-icon):hover{
  background:var(--v-slate-deep) !important;
}

button.s-button-icon,
.s-button-element.s-button-icon{
  background:#FFFFFF !important;
  color:var(--v-slate-deep) !important;
  border:1px solid var(--v-line) !important;
  border-radius:50% !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 3px 10px rgba(57,72,90,.16) !important;
  transition:background .2s ease, color .2s ease;
}
button.s-button-icon::before,
button.s-button-icon i{
  font-size:15px !important;
  color:inherit !important;
  line-height:1 !important;
}
button.s-button-icon:hover,
button.s-button-icon.is-added{
  background:var(--v-rose) !important;
  color:#FFFFFF !important;
  border-color:var(--v-rose) !important;
}

/* ============================================
   حقول الإدخال
   ============================================ */
input, textarea, select{
  background-color:var(--v-white) !important;
  border:1px solid var(--v-line) !important;
  border-radius:8px !important;
  color:var(--v-slate-deep) !important;
  font-family:var(--v-body) !important;
}
input::placeholder, textarea::placeholder{
  color:rgba(79,98,114,.5) !important;
}

/* ============================================================
   الفراغ بين آخر قسم والفوتر
   ============================================================ */
main{
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
main > *:last-child,
main > *:last-child > *,
main > *:last-child > * > *:last-child,
main .s-block:last-of-type,
main > section:last-of-type{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* ============================================================
   إلغاء أنيميشن الظهور داخل الفوتر
   ============================================================ */
footer.store-footer,
.store-footer,
.store-footer *,
.store-footer [data-aos],
.store-footer [class*="aos"],
.store-footer [class*="fade"],
.store-footer [class*="animate"]{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
  animation:none !important;
  filter:none !important;
}

/* ============================================================
   الفوتر — ترتيب على نمط نارسيس (٣ أعمدة)
   ============================================================ */
footer.store-footer,
.store-footer{
  background-color:var(--v-footer-bg) !important;
  background-image:none !important;
  border-top:1px solid var(--v-line-strong) !important;
  padding-top:40px !important;
  padding-bottom:0 !important;
}

.store-footer__curve{
  display:none !important;
}

.store-footer div, .store-footer section, .store-footer ul{
  background-color:transparent !important;
  background-image:none !important;
}

.store-footer *{
  color:var(--v-slate) !important;
  border-color:var(--v-line-soft) !important;
}

.store-footer .container,
.store-footer__inner{
  max-width:1280px !important;
  margin-inline:auto !important;
  padding-inline:24px !important;
  padding-top:0 !important;
}

/* ------------------------------------------------------------
   الحاوية الخارجية للصف — تعمل في الحالتين:
   سواء كان صف التواصل شقيقاً للأعمدة أو في حاوية أعلى
   ------------------------------------------------------------ */
.store-footer :has(> .store-footer__contacts-row),
.store-footer :has(> .store-footer__brand),
.store-footer :has(> .store-footer__menu),
.store-footer__grid{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:32px 48px !important;

  grid-template-columns:none !important;
  grid-template-areas:none !important;

  box-sizing:border-box !important;
  text-align:start !important;
}

/* العرض والتمركز — للحاوية الخارجية فقط */
.store-footer :has(> .store-footer__contacts-row){
  width:100% !important;
  max-width:var(--v-footer-cols) !important;
  margin-inline:auto !important;
  padding:0 24px !important;
}

/* لو شبكة الأعمدة متداخلة داخل الحاوية الخارجية، تتمدد لا تتقيّد */
.store-footer :has(> .store-footer__brand):not(:has(> .store-footer__contacts-row)){
  flex:1 1 auto !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}

/* الأعمدة */
.store-footer :has(> .store-footer__contacts-row) > *,
.store-footer :has(> .store-footer__brand) > *,
.store-footer :has(> .store-footer__menu) > *,
.store-footer__grid > *{
  flex:0 1 auto !important;
  width:auto !important;
  max-width:100% !important;
  grid-column:auto !important;
  grid-row:auto !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  text-align:start !important;
}

.store-footer :has(> .store-footer__brand) > div:empty,
.store-footer :has(> .store-footer__menu) > div:empty{
  display:none !important;
}

/* ---------- العمود الأول: البراند (أقصى اليمين) ---------- */
.store-footer__brand{
  order:-1 !important;
  flex:0 1 380px !important;
  min-width:280px !important;
}

/* اللوجو — أكبر زي نارسيس */
.store-footer__logo-link img,
.store-footer__brand img,
.store-footer img.img-fluid,
.store-footer [class*="logo"] img{
  width:96px !important;
  height:auto !important;
  max-width:96px !important;
  max-height:96px !important;
  object-fit:contain !important;
  display:block !important;
  margin:0 0 16px !important;
}

.footer-description,
.store-footer__brand p,
.store-footer p{
  color:var(--v-slate) !important;
  opacity:1 !important;
  max-width:380px !important;
  margin:0 0 16px !important;
  line-height:1.9 !important;
  font-size:13px !important;
  text-align:start !important;
}

.footer-badges{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  justify-content:flex-start !important;
}
.footer-badges img{
  max-height:42px !important;
  width:auto !important;
}
.footer-badges span,
.footer-badges p{
  font-size:12.5px !important;
  margin:0 !important;
  color:var(--v-slate-deep) !important;
  text-align:start !important;
}

/* ---------- العمود الثاني: روابط مهمة ---------- */
.store-footer__menu{
  flex:0 0 auto !important;
  min-width:150px !important;
  border-top:0 !important;
}

.store-footer__menu-title{
  font-size:15px !important;
  font-weight:700 !important;
  color:var(--v-slate-deep) !important;
  opacity:1 !important;
  margin:0 0 16px !important;
  text-align:start !important;
}

.store-footer__menu ul,
.footer-list{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:12px !important;
  list-style:none !important;
  list-style-type:none !important;
  padding:0 !important;
  padding-inline-start:0 !important;
  margin:0 !important;
}

.footer-list li,
.store-footer__menu li{
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  list-style:none !important;
  list-style-type:none !important;
  display:block !important;
}

.footer-list li::marker,
.store-footer__menu li::marker{
  content:'' !important;
  color:transparent !important;
  font-size:0 !important;
}

.footer-list li::before,
.footer-list li::after,
.store-footer__menu li::before,
.store-footer__menu li::after,
.store-footer__menu-link::before,
.store-footer__menu-link::after,
.footer-list a::before,
.footer-list a::after{
  content:none !important;
  display:none !important;
}

.store-footer__menu-link{
  margin:0 !important;
  font-size:13px !important;
  font-weight:500 !important;
  color:var(--v-slate-deep) !important;
  opacity:1 !important;
  display:inline-block !important;
  transition:color .2s ease;
}
.store-footer__menu-link:hover{
  color:var(--v-sage) !important;
}

/* ---------- العمود الثالث: تواصل معنا ---------- */
.store-footer__contacts-row{
  display:flex !important;
  flex-direction:column !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:12px !important;

  flex:0 1 auto !important;
  width:auto !important;
  min-width:180px !important;
  max-width:none !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:0 !important;
  border-top:0 !important;
}

/* عنوان العمود — لا يوجد في الـ HTML فنضيفه بالـ CSS */
.store-footer__contacts-row::before{
  content:"تواصل معنا";
  display:block;
  width:100%;
  font-family:var(--v-body);
  font-size:15px;
  font-weight:700;
  color:var(--v-slate-deep);
  margin-bottom:4px;
  text-align:start;
}

.store-footer__contacts{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  margin:0 !important;
}

.store-footer a[class*="btn"],
.store-footer button:not(.s-button-icon){
  background:transparent !important;
  color:var(--v-slate-deep) !important;
  border:1px solid var(--v-line) !important;
  border-radius:8px !important;
  padding:8px 16px !important;
  font-size:13px !important;
  font-weight:500 !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  transition:background .25s ease, border-color .25s ease;
}
.store-footer a[class*="btn"]:hover,
.store-footer button:not(.s-button-icon):hover{
  background:var(--v-white) !important;
  border-color:var(--v-slate) !important;
}

/* ---------- السوشال — أيقونات مكشوفة بلا دوائر، زي نارسيس ---------- */
.store-footer__social{
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  margin:6px 0 0 !important;
}
.store-footer__social a,
.store-footer__social button{
  width:auto !important;
  height:auto !important;
  min-width:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transition:opacity .2s ease;
}
.store-footer__social a:hover{
  opacity:.6 !important;
}
.store-footer__social i,
.store-footer__social svg{
  font-size:20px !important;
  width:20px !important;
  height:20px !important;
  color:var(--v-slate-deep) !important;
  fill:var(--v-slate-deep) !important;
}

/* ---------- الشريط السفلي ---------- */
.footer-bottom{
  background-color:var(--v-footer-bg) !important;
  border-top:1px solid var(--v-line-strong) !important;
  margin-top:32px !important;
}
.store-footer__bottom-inner{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  max-width:var(--v-footer-cols) !important;
  margin-inline:auto !important;
  padding:16px 24px !important;
  box-sizing:border-box !important;
}
.footer-rights,
.footer-rights p,
.footer-rights a{
  color:rgba(57,72,90,.75) !important;
  font-size:12.5px !important;
  margin:0 !important;
  opacity:1 !important;
  text-align:start !important;
}

/* أيقونات الدفع — أكبر زي نارسيس */
salla-payments{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
salla-payments img,
.footer-bottom img{
  background:#FFFFFF !important;
  border:1px solid var(--v-line) !important;
  border-radius:7px !important;
  padding:5px 9px !important;
  height:30px !important;
  width:auto !important;
  object-fit:contain !important;
}

/* ---------- تابلت ---------- */
@media (max-width:1024px){
  .store-footer :has(> .store-footer__contacts-row){
    max-width:100% !important;
    padding:0 24px !important;
  }
  .store-footer__brand{
    flex:0 1 300px !important;
    min-width:240px !important;
  }
  .store-footer :has(> .store-footer__contacts-row),
  .store-footer :has(> .store-footer__brand),
  .store-footer :has(> .store-footer__menu){
    gap:28px 32px !important;
  }
}

/* ---------- الجوال ---------- */
@media (max-width:768px){
  footer.store-footer,
  .store-footer{
    padding-top:26px !important;
  }
  .store-footer .container,
  .store-footer__inner{
    padding-inline:16px !important;
  }

  .store-footer :has(> .store-footer__contacts-row),
  .store-footer :has(> .store-footer__brand),
  .store-footer :has(> .store-footer__menu),
  .store-footer__grid{
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    gap:22px !important;
    max-width:100% !important;
    padding-inline:16px !important;
  }
  .store-footer :has(> .store-footer__contacts-row) > *,
  .store-footer :has(> .store-footer__brand) > *,
  .store-footer :has(> .store-footer__menu) > *,
  .store-footer__grid > *{
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }

  .store-footer__logo-link img,
  .store-footer__brand img,
  .store-footer img.img-fluid{
    width:74px !important;
    max-width:74px !important;
    max-height:74px !important;
    margin:0 auto 12px !important;
  }
  .footer-description,
  .store-footer__brand p,
  .store-footer p{
    font-size:12.5px !important;
    margin:0 auto 12px !important;
    max-width:320px !important;
    text-align:center !important;
  }
  .footer-badges{
    justify-content:center !important;
  }

  .store-footer__menu-title{
    text-align:center !important;
    font-size:14px !important;
    margin-bottom:12px !important;
  }
  .store-footer__menu ul,
  .footer-list{
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:center !important;
    gap:8px 16px !important;
  }
  .store-footer__menu-link{
    font-size:12.5px !important;
  }

  .store-footer__contacts-row{
    align-items:center !important;
    min-width:0 !important;
  }
  .store-footer__contacts-row::before{
    text-align:center !important;
    font-size:14px;
  }
  .store-footer__contacts,
  .store-footer__social{
    justify-content:center !important;
    width:100% !important;
  }
  .store-footer a[class*="btn"],
  .store-footer button:not(.s-button-icon){
    padding:7px 14px !important;
    font-size:12.5px !important;
  }

  .store-footer__bottom-inner{
    justify-content:center !important;
    padding:14px 16px !important;
  }
  .footer-rights,
  .footer-rights p{
    font-size:11.5px !important;
    text-align:center !important;
    width:100% !important;
  }
  .footer-bottom img,
  salla-payments img{
    height:26px !important;
  }
  salla-payments{
    justify-content:center !important;
    width:100% !important;
  }
}

/* ============================================
   إخفاء تقييمات المنتج نهائياً
   ============================================ */
salla-rating,
salla-rating-stars,
salla-reviews,
salla-product-rating,
.s-product-card-rating,
.product-card__rating,
main [id*="rating"]:not(section):not(.s-block),
main [id*="review"]:not(section):not(.s-block),
main [class*="ratings"]:not(section):not(.s-block),
main [class*="reviews"]:not(section):not(.s-block),
main [class*="testimonial"]:not(section):not(.s-block),
main a[href*="rating"],
main a[href*="review"],
main [class*="tab"] a[href*="rating"],
main [class*="tab"] button[data-target*="rating"]{
  display:none !important;
}

/* ============================================
   تبويبات صفحة المنتج
   ============================================ */
main [class*="tab"] button,
main [class*="tab"] a{
  background:transparent !important;
  color:var(--v-slate) !important;
  border:1px solid var(--v-line) !important;
  border-radius:8px !important;
  font-weight:500 !important;
  transition:background .2s ease;
}

main [class*="tab"] .active,
main [class*="tab"] .active *,
main [class*="tab"] [aria-selected="true"],
main [class*="tab"] [aria-selected="true"] *,
main [class*="tab"] button[class*="active"],
main [class*="tab"] button[class*="active"] *,
main [class*="tab"] a[class*="active"],
main [class*="tab"] a[class*="active"] *,
main [class*="tabs"] li.active,
main [class*="tabs"] li.active *{
  background-color:var(--v-slate) !important;
  color:#FFFFFF !important;
  opacity:1 !important;
  border-color:var(--v-slate) !important;
}

/* ============================================
   لمسات نهائية
   ============================================ */
::selection{
  background:var(--v-slate);
  color:var(--v-white);
}

del, s{
  color:var(--v-rose) !important;
  font-weight:400 !important;
}

hr{
  border-color:var(--v-line) !important;
  opacity:1;
}

[class*="scroll-top"],
[class*="back-to-top"],
#scrollTop{
  background:var(--v-slate) !important;
  color:var(--v-white) !important;
  border:0 !important;
  border-radius:8px !important;
}

::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--v-bg); }
::-webkit-scrollbar-thumb{
  background:var(--v-slate);
  border-radius:8px;
  border:2px solid var(--v-bg);
}

a{ transition:color .2s ease, opacity .2s ease; }

/* ============================================
   الجوال: اللوجو والهيدر
   ============================================ */
@media (max-width: 768px){
  .navbar-brand img,
  .header-logo img,
  .store-logo img{
    max-height: 45px !important;
    width: auto !important;
  }

  #mainnav .inner,
  #mainnav .header__main-container,
  #mainnav .main-menu-row{
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }
}

/* ============================================
   الهيرو — قسم vocce-hero
   ============================================ */
.vocce-hero{
  position:relative !important;
}

.vocce-hero p,
.vocce-hero [class*="subtitle"],
.vocce-hero [class*="description"],
[class*="banner"] p{
  color:var(--v-sage) !important;
}

@media (max-width:768px){

  .vocce-hero h1,
  .vocce-hero h2,
  .vocce-hero h3,
  .vocce-hero p,
  .vocce-hero [class*="subtitle"],
  .vocce-hero [class*="description"]{
    display:none !important;
  }

  .vocce-hero a[class*="btn"],
  .vocce-hero [class*="button"],
  .vocce-hero button{
    position:absolute !important;
    bottom:32px !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    z-index:5 !important;

    background:var(--v-slate) !important;
    color:var(--v-white) !important;
    border-radius:8px !important;
    font-size:18px !important;
    font-weight:500 !important;
    padding:16px 60px !important;
    white-space:nowrap !important;
    box-shadow:0 8px 24px rgba(57,72,90,.25);
  }

  .vocce-hero a[class*="btn"]:hover,
  .vocce-hero [class*="button"]:hover,
  .vocce-hero button:hover{
    transform:translateX(-50%) !important;
    background:var(--v-slate-deep) !important;
  }
}

/* ============================================
   كروت المنتجات
   ============================================ */
.product-entry,
.product-card{
  --product-bg:#FFFFFF !important;
  background:#FFFFFF !important;
  border:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 1px 4px rgba(57,72,90,.07) !important;
  transition:box-shadow .25s ease;
}
.product-entry:hover{
  box-shadow:0 10px 24px rgba(57,72,90,.13) !important;
}

.product-entry__image,
.product-card__image{
  background-color:#FFFFFF !important;
  border:0 !important;
  margin:0 !important;
  height:auto !important;
  aspect-ratio:1/1 !important;
  overflow:hidden !important;
}
.product-entry__image img,
.product-card__image img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  background:#FFFFFF !important;
  padding:14px !important;
}

.product-card__content,
.product-card__content-wrapper{
  background:#FFFFFF !important;
  text-align:center !important;
  padding:10px 12px 12px !important;
  margin:0 !important;
  border-top:1px solid rgba(57,72,90,.05) !important;
}

.product-entry__title a,
.product-card__title,
.product-card__title a{
  font-size:13.5px !important;
  font-weight:500 !important;
  line-height:1.55 !important;
  color:var(--v-slate) !important;
  display:-webkit-box !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
  min-height:3.1em !important;
}

.product-card__subtitle{
  display:none !important;
}

.product-card__price,
.product-card__price span,
.product-card__price *{
  color:var(--v-slate-deep) !important;
  font-weight:700 !important;
  font-size:15.5px !important;
  font-family:var(--v-body) !important;
  line-height:1.4 !important;
  justify-content:center !important;
}

.product-card__promotion,
.product-card__discount,
.product-card__label{
  background-color:var(--v-rose) !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:6px !important;
  font-size:11px !important;
  font-weight:600 !important;
}

.product-card__addToCart{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:8px 10px !important;
}
salla-add-product-button.product-card__addToCart__btn,
.product-card__addToCart salla-add-product-button{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.product-card__addToCart button,
.product-card__addToCart .s-button-element{
  width:100% !important;
  background:var(--v-slate) !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:8px !important;
  min-height:38px !important;
  font-size:13px !important;
  font-weight:500 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  box-shadow:0 4px 14px rgba(57,72,90,.22) !important;
}
.product-card__addToCart button *,
.product-card__addToCart .s-button-element *{
  color:#FFFFFF !important;
}
.product-card__addToCart button:hover{
  background:var(--v-slate-deep) !important;
}

.product-card__mini-cart button{
  background:var(--v-slate) !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:8px !important;
}
.product-card__mini-cart button *{
  color:#FFFFFF !important;
}

.wishlist button{
  background:#FFFFFF !important;
  color:var(--v-slate-deep) !important;
  border:1px solid var(--v-line) !important;
  border-radius:50% !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 3px 10px rgba(57,72,90,.16) !important;
}
.wishlist i.sicon-heart{
  font-size:15px !important;
  color:inherit !important;
  line-height:1 !important;
}
.wishlist button:hover,
.wishlist salla-button.is-added button{
  background:var(--v-rose) !important;
  color:#FFFFFF !important;
  border-color:var(--v-rose) !important;
}

.quickview-btn,
quick-view-modal{
  display:none !important;
}

.product-card__actions{
  top:10px !important;
  right:10px !important;
}
.product-card__actions div{
  margin-bottom:6px !important;
}

main h1{
  font-size:26px !important;
}
[class*="sort"] select,
[class*="filter"] select{
  border-radius:8px !important;
  border:1px solid var(--v-line) !important;
}

@media (max-width:768px){
  .product-entry__title a,
  .product-card__title a{
    font-size:12.5px !important;
    min-height:3em !important;
  }
  .product-card__price,
  .product-card__price *{
    font-size:14px !important;
  }
  .wishlist button,
  button.s-button-icon{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
  }
  .wishlist i.sicon-heart,
  button.s-button-icon i{
    font-size:13px !important;
  }
  .product-card__addToCart button{
    font-size:12.5px !important;
    min-height:36px !important;
  }
}

/* ============================================
   صفحة المنتج على الجوال
   ============================================ */
@media (max-width:768px){

  main h1{
    font-size:19px !important;
    line-height:1.55 !important;
    font-weight:600 !important;
    margin-bottom:8px !important;
  }

  main [class*="product"] [class*="price"],
  [class*="product-price"]{
    font-size:19px !important;
    font-weight:700 !important;
    color:var(--v-slate-deep) !important;
  }

  main [class*="tax"],
  main [class*="vat"]{
    font-size:12px !important;
    opacity:.7 !important;
  }

  main [class*="product-info"],
  main [class*="specifications"],
  main [class*="details-box"],
  main [class*="product"] table{
    background:#FFFFFF !important;
    border:1px solid var(--v-line) !important;
    border-radius:10px !important;
    padding:12px 14px !important;
  }

  main [class*="payment"] img,
  main img[src*="mada"],
  main img[src*="visa"],
  main img[src*="apple"],
  main img[src*="stc"]{
    height:24px !important;
    width:auto !important;
    background:#FFFFFF !important;
    border:1px solid var(--v-line) !important;
    border-radius:5px !important;
    padding:3px 7px !important;
    box-shadow:none !important;
  }

  main input[type="number"]{
    border-radius:8px !important;
    text-align:center !important;
    font-weight:600 !important;
  }

  [class*="sticky-bar"],
  [class*="fixed-bottom"],
  [class*="sticky-add"],
  .is-sticky-product-bar{
    background:#FFFFFF !important;
    border-top:1px solid var(--v-line) !important;
    box-shadow:0 -6px 20px rgba(57,72,90,.08) !important;
  }
}

/* ============================================
   بانر "اختيارك أسهل" — قسم vocce-routine
   ============================================ */
.vocce-routine a[class*="btn"],
.vocce-routine [class*="button"],
.vocce-routine a[href]{
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  line-height:1.4 !important;
  text-align:center !important;
}

@media (max-width:768px){

  .vocce-routine h1,
  .vocce-routine h2,
  .vocce-routine h3,
  .vocce-routine [class*="title"]{
    font-size:17px !important;
    line-height:1.4 !important;
    text-align:center !important;
  }
  .vocce-routine p,
  .vocce-routine [class*="subtitle"],
  .vocce-routine [class*="description"]{
    font-size:12.5px !important;
    line-height:1.6 !important;
    text-align:center !important;
    max-width:220px !important;
    margin-inline:auto !important;
  }

  .vocce-routine a[class*="btn"],
  .vocce-routine [class*="button"],
  .vocce-routine a[href]{
    flex-direction:row !important;
    gap:5px !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    min-height:0 !important;
    border-radius:999px !important;
    background:#FFFFFF !important;
    color:var(--v-slate-deep) !important;
    font-size:13px !important;
    font-weight:600 !important;
    padding:10px 22px !important;
    white-space:nowrap !important;
    box-shadow:0 4px 14px rgba(57,72,90,.15) !important;
    margin-top:6px !important;
  }
  .vocce-routine a[class*="btn"] *,
  .vocce-routine [class*="button"] *{
    display:inline !important;
    white-space:nowrap !important;
    color:var(--v-slate-deep) !important;
  }
}

/* ============================================
   منطقة القائمة والبحث
   ============================================ */
header p,
.store-header p,
header [class*="menu"] p,
nav p{
  color:var(--v-slate-deep) !important;
  margin:0 10px !important;
  line-height:1 !important;
  font-size:16px !important;
  font-weight:500 !important;
  display:inline-block !important;
  vertical-align:middle !important;
}

header [class*="menu-toggle"],
header a[class*="menu"]:not(ul):not(li),
header button[class*="menu"],
.store-header [class*="menu-toggle"],
.store-header a[class*="menu"],
.store-header button[class*="menu"]{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
}

header [class*="menu"] i,
header [class*="menu"] svg,
.store-header [class*="menu"] i,
.store-header [class*="menu"] svg{
  vertical-align:middle !important;
}

header [class*="search"] i,
header a[class*="search"],
.store-header [class*="search"] i{
  margin-inline:8px !important;
}

/* ============================================
   إخفاء إجمالي السلة من الهيدر
   ============================================ */
header [class*="cart"] [class*="total"],
header [class*="cart-total"],
header [class*="cart"] [class*="price"],
header [class*="total"],
.store-header [class*="cart"] [class*="total"],
.store-header [class*="cart-total"],
.store-header [class*="total"]{
  display:none !important;
}

/* ============================================
   المسافات بين الأقسام
   ============================================ */
main .s-block,
main > section,
main > div > section{
  margin-top:0 !important;
  margin-bottom:var(--v-section-gap) !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  min-height:auto !important;
}

main .s-block:last-child,
main > section:last-child{
  margin-bottom:0 !important;
}

main,
main > div{
  row-gap:0 !important;
}

main [class*="spacer"]:empty{
  display:none !important;
  height:0 !important;
}

/* حماية أقسام المنتجات */
main salla-products-list,
main salla-slider,
main custom-salla-product-card,
main salla-product-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  height:auto !important;
}

main .s-products-list-wrapper,
main .s-block--products,
main .swiper,
main .swiper-wrapper,
main .swiper-slide,
main .product-entry,
main .product-card{
  visibility:visible !important;
  opacity:1 !important;
}

main .swiper-wrapper{
  display:flex !important;
}