/* ============================================================
   Ember & Oak — legacy compatibility
   The catalogue / account / order views were written for the old
   "Gate Gold" layout. They still use its CSS variables and class
   names, so we re-point them at the Ember & Oak palette here.
   ============================================================ */

:root {
  --primary-color: var(--terracotta-soft);
  --primary-yellow: var(--star);
  --accent-color: var(--terracotta);
  --accent-hover: var(--terracotta-dark);
  --sky-blue-color: var(--cream-deep);
  --black-color: var(--ink);
  --text-color: rgba(43, 36, 33, .75);
  --grey-light: var(--sand);
  --soap-olive: var(--terracotta);
  --soap-cream: var(--cream);
  --soap-dark: var(--ink);
  --soap-maroon: #B3401F;
  --soap-accent: var(--star);
  --font-heading: var(--font-serif);
  --font-body: var(--font-sans);
  --font-arabic: "Cairo", var(--font-sans);
}

#app-content.legacy-page { min-height: 60vh; padding-bottom: 3rem; }
#app-content.legacy-page[dir="rtl"] { font-family: "Cairo", var(--font-sans); }
#app-content.legacy-page[dir="rtl"] h1,
#app-content.legacy-page[dir="rtl"] h2,
#app-content.legacy-page[dir="rtl"] h3,
#app-content.legacy-page[dir="rtl"] h4 { font-family: "Cairo", var(--font-serif); }

/* Old section / page headings and hero strips */
#app-content.legacy-page .section-title,
#app-content.legacy-page .page-title { font-family: var(--font-serif); color: var(--ink); font-weight: 600; }
#app-content.legacy-page .breadcrumb-wrap { margin-bottom: 1rem; }
#app-content.legacy-page .breadcrumb span { color: rgba(43, 36, 33, .35); }
#app-content.legacy-page .breadcrumb a { color: var(--terracotta); }

/* Pagination */
#app-content.legacy-page .pagination { gap: 8px; }
#app-content.legacy-page .page-item .page-link {
  border: 1px solid var(--sand); color: var(--ink); background: var(--warmwhite);
  border-radius: 999px !important; font-weight: 600; padding: .5rem 1rem;
}
#app-content.legacy-page .page-item.active .page-link { background: var(--terracotta) !important; border-color: var(--terracotta) !important; color: #fff !important; }
#app-content.legacy-page .page-item .page-link:hover { background: var(--terracotta-soft); color: var(--terracotta-dark); }

/* Product-card style containers from the old design */
#app-content.legacy-page .product-card,
#app-content.legacy-page .p-card,
#app-content.legacy-page .brand-card,
#app-content.legacy-page .cat-card,
#app-content.legacy-page .section-card,
#app-content.legacy-page .offer-card,
#app-content.legacy-page .blog-card {
  background: var(--warmwhite);
  border: 1px solid var(--sand);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
#app-content.legacy-page .product-card:hover,
#app-content.legacy-page .p-card:hover,
#app-content.legacy-page .brand-card:hover,
#app-content.legacy-page .cat-card:hover,
#app-content.legacy-page .section-card:hover,
#app-content.legacy-page .offer-card:hover,
#app-content.legacy-page .blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* Heart button used on legacy product cards */
#app-content.legacy-page .heart-btn {
  position: absolute; top: 12px; inset-inline-end: 12px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 0;
  background: var(--warmwhite); color: rgba(43, 36, 33, .45);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-card); transition: transform .2s, color .2s;
}
#app-content.legacy-page .heart-btn:hover { transform: scale(1.1); color: var(--terracotta); }
#app-content.legacy-page .heart-btn.active i { color: var(--terracotta); }

/* Any leftover purple / yellow inline accents */
#app-content.legacy-page [style*="#5c45bf"], #app-content.legacy-page [style*="#5C45BF"] { color: var(--terracotta) !important; }
#app-content.legacy-page .badge.bg-warning { background-color: var(--star) !important; color: var(--ink) !important; }

/* Floating helper buttons from the old layout (not rendered any more) */
.go-top-btn, .mobile-bottom-bar { display: none !important; }