/* =========================================
   1. استدعاء خط Cairo من Google Fonts
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&display=swap');

/* =========================================
   2. استدعاء الخطوط الزخرفية (حسب الحاجة)
   ========================================= */
@font-face {
  font-family: 'Dastnevis';
  src: url('https://17s78vmwla.ucarecd.net/5c0b1813-a8c8-475b-a143-da3158ebe2fb/') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PhotographSignature';
  src: url('https://17s78vmwla.ucarecd.net/23fed4b8-6922-45db-bcb3-3042b3649c0c/') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================================
   3. إعدادات الـ :root (ألوان الهوية المتوافقة مع الشعار)
   ========================================= */
:root {
  /* متغيرات الخطوط */
  --font-main: 'Cairo', sans-serif;
  --font-dastnevis: 'Dastnevis', cursive, sans-serif;
  --font-signature: 'PhotographSignature', cursive, sans-serif;

  /* متغيرات الأوزان */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* ألوان هوية Mokhava Cafe المستوحاة من الشعار الجديد */
  --color-light-nude: #f9f8f6;  /* خلفية فاتحة ونقية تبرز تفاصيل الشعار */
  --color-light-brown: #a47551; /* بني دافئ متناسق مع أجواء المقهى */
  --color-dark-brown: #1a1a1a;  /* أسود فاحم مطابق لخط الشعار */
  
  /* الألوان التزيينية المستوحاة من تفاصيل اللوجو */
  --color-red-accent: #d63031;  /* أحمر زاهي مطابق لورود الشعار */
  --color-blue-accent: #0984e3; /* أزرق داكن متناسق مع الزخارف */
  --color-warm-orange: #e17055; /* برتقالي دافئ للعروض والأزرار */
  --color-red-orange: #d63031;  /* لون التنبيهات والأزرار البارزة */
}

/* =========================================
   4. التطبيق الافتراضي للخطوط والألوان
   ========================================= */
body, p, a, span, li, input, textarea, select {
  font-family: var(--font-main) !important;
  font-weight: var(--fw-regular);
}

button, .s-button-element, nav a, .s-menu-item {
  font-family: var(--font-main) !important;
  font-weight: var(--fw-medium);
}

h4, h5, h6, .s-product-card-entry-title, .s-product-card-price {
  font-family: var(--font-main) !important;
  font-weight: var(--fw-semibold) !important;
}

h1, h2, h3, strong, b {
  font-family: var(--font-main) !important;
  font-weight: var(--fw-bold) !important;
}

/* الكلاسات المساعدة */
.font-dastnevis { font-family: var(--font-dastnevis) !important; }
.font-signature { font-family: var(--font-signature) !important; }
.font-black-weight { font-family: var(--font-main) !important; font-weight: var(--fw-black) !important; }

/* =========================================
   5. إعدادات المسافات والهيكل العام
   ========================================= */
.s-block { margin-top: 0rem; }
@media (min-width: 640px) { .s-block { margin-top: 0rem; } }
@media (min-width: 1024px) {
  .lg\:w-10\/12 { width: 100%; }
  .lg\:p-8 { padding: 0rem; }
  .lg\:mt-12 { margin-top: 0rem; }
  .top-navbar { display: none; }
}

.p-6 { padding: 0rem; }
.mt-4 { margin-top: 0rem; }
.container { padding-left: 0px; padding-right: 0px; }
.main-content { padding: 1rem; }
.content .content-entry img { margin: 0px 0 25px; }
.content--single-page .font-bold { font-weight: 700; display: none; }
.breadcrumbs { display: none; }
.s-metadata-wrapper { display: flex; flex-direction: column-reverse; }

/* خلفية الموقع الأساسية */
body, #app, .app-inner {
     background-color: #f8f6f1!important;
}

/* =========================================
   6. تنسيقات الهيدر
   ========================================= */
.main-nav-container {
  background: var(--color-dark-brown) !important;
}

.hamburger-lines span {
  background-color: var(--color-light-nude) !important;
}

.menu-text, .sicon-shopping-bag:before, .sicon-sar:before, .s-cart-summary-total {
  color: var(--color-light-nude) !important;
}

.s-user-menu-login-btn svg {
  fill: var(--color-light-nude) !important;
}

.navbar-brand img {
  max-height: 4rem;
}

.main-nav-container.fixed-pinned .navbar-brand img {
  max-height: 65px;
  padding: .5rem;
}

@media (min-width: 480px) {
  .navbar-brand img { max-width: 200px; }
}

.header-btn__icon { border: none; }
.s-user-menu-login-btn {
  align-items: center;
  border-radius: 9999px;
  border-width: 1px;
  display: flex;
  height: 1.5rem;
  justify-content: center;
  width: 1.5rem;
  border-color: transparent;
}

.rtl\:mr-4:where([dir=rtl],[dir=rtl] *) {
  margin-right: 0rem;
  justify-content: center;
  align-items: center;
  display: flex;
}

.s-cart-summary-count {
  align-items: center;
  background-color: var(--color-red-orange) !important;
  border-radius: 9999px;
  display: inline-flex;
  font-size: .75rem;
  height: 0.85rem;
  justify-content: center;
  left: -15px;
  line-height: 1rem;
  padding: .15rem;
  position: absolute;
  top: -8px;
  width: 0.85rem;
  color: #ffffff !important;
}

/* =========================================
   7. تنسيقات الفوتر
   ========================================= */
.footer-is-light .store-footer .store-footer__inner, .store-footer {
  background-color: #B8DCEB !important;
  color: var(--color-light-nude) !important;
  padding-top: 3rem;
  direction: rtl;
  margin-top: 0rem;
}

.store-footer h3, .store-footer .s-contacts-title {
  color: var(--color-light-nude) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.25rem !important;
}

.store-footer a, .store-footer .s-menu-footer-item, .store-footer .s-contacts-item {
  color: #2d2926 !important;
  transition: color 0.3s ease;
}

.store-footer a:hover, .store-footer .s-menu-footer-item:hover {
  color: var(--color-warm-orange) !important;
  font-weight: bold;
}

.footer-logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.footer-logo-img {
  max-width: 120px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0px 4px 6px rgba(0,0,0,0.15));
}

.s-social-icon svg, .s-contacts-icon svg {
  fill: var(--color-light-nude) !important;
  width: 24px;
  height: 24px;
}

.top-navbar { display: none; }
.s-comments-page { display: none; }
@media (min-width: 1280px) { .container { max-width: 12800px; } }
.s-user-menu-trigger { background-color: transparent; }

.main-nav-container { background: #f8f6f1 !important; }:root{--color-light-nude: #2d2926;}
salla-comments { display: none; }


.s-product-card-image img {
    background: #f7f2e9;
}