/* Add custom CSS styles below */* =======================
   🌿 Font & Color Setup
========================== */
@import url('https://fonts.googleapis.com/css2?family=Garamond&family=Lato&display=swap');

:root {
  --bg-color: #F7F4EF;
  --primary-color: #D3BFAA;
  --secondary-color: #C2A48B;
  --highlight-color: #EADCC8;
  --text-color: #000000;

  --font-main: 'Lato', sans-serif;
  --font-headings: 'Garamond', serif;
}

/* =======================
   🌐 Base Layout & Typography
========================== */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-main);
  font-size: 16px;
  margin: 0;
  padding: 0;
  direction: rtl;
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand h1,
.store-footer__inner h3 {
  font-family: var(--font-headings);
  color: var(--text-color);
}

/* =======================
   🧠 Text Links
========================== */
a {
  color: var(--text-color);
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover {
  color: var(--secondary-color);
}

/* =======================
   🧷 Buttons
========================== */
.button, .btn {
  background-color: var(--primary-color);
  color: var(--text-color);
  border: none;
  padding: 0.75em 1.5em;
  border-radius: 8px;
  font-weight: bold;
  font-family: var(--font-main);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.button:hover, .btn:hover {
  background-color: var(--highlight-color);
  color: var(--text-color);
}

/* =======================
   🛒 Top Navbar Font Fix
========================== */
.top-navbar,
.top-navbar * {
  font-family: var(--font-main) !important;
  color: var(--text-color) !important;
}

/* =======================
   📜 Footer Font Fix
========================== */
.store-footer__inner,
.store-footer__inner * {
  font-family: var(--font-main) !important;
  color: var(--text-color) !important;
  background-color: #F0E8E0 !important;
}

/* =======================
   🧭 Main Navigation Fix
========================== */
#mainnav,
#mainnav * {
  color: var(--text-color) !important;
  background-color: #F0E8E0 !important;
}

/* =======================
   🧁 Rounded Corners
========================== */
.card,
.container,
.top-navbar,
.main-nav-container,
.store-footer__inner,
.header-btn,
.s-cart-summary-wrapper,
.s-menu-topnav-item,
.s-menu-footer-item,
.s-search-container,
.s-search-input-wrapper,
.s-search-input,
.s-contacts-topnav-link,
.s-social-list svg,
.salla-product,
.s-product-card,
.product-card,
.s-category-card,
.s-button,
button,
input,
textarea,
select {
  border-radius: 8px !important;
}

/* =======================
   💌 Form Styling
========================== */
input, textarea, select {
  border: 1px solid #ccc !important;
  padding: 0.75em;
  width: 100%;
  font-size: 1rem;
  font-family: var(--font-main);
  color: var(--text-color);
}

/* =======================
   ✨ Card Shadows
========================== */
.card,
.salla-product,
.product-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

/* =======================
   🛍️ Cart Badge (Rounded)
========================== */
.s-cart-summary-count {
  border-radius: 50% !important;
  font-size: 12px;
  padding: 0.25em 0.5em;
  background-color: #A65454 !important;
  color: #ffffff !important;
}

/* =======================
   📱 Mobile Menu Touch-up
========================== */
.mobile-menu,
.mobile-menu * {
  border-radius: 8px !important;
  color: var(--text-color) !important;
}

/* 🌿 Force Footer Background to Match Brand */
.store-footer__inner {
  background-color: var(--bg-color) !important;  /* Light creamy beige */
  color: var(--text-color) !important;
  padding: 3em 1em;
}

/* 🔠 Footer Text & Links */
.store-footer__inner *,
.store-footer__inner a,
.store-footer__inner p,
.store-footer__inner span,
.store-footer__inner h3 {
  color: var(--text-color) !important;
  font-family: var(--font-main) !important;
}

/* 🧁 Footer Rounded Corners (if container is box-style) */
.store-footer__inner {
  border-radius: 8px !important;
}

/* 📌 Optional: Hide default dark background if injected below footer */
footer, .footer, .site-footer {
  background-color: #F0E8E0 !important;
}