:root{
  --theme-choc-dark: #4b3427; /* primary */
  --theme-choc-medium: #6a4437; /* secondary */
  --theme-choc-accent: #c76b2b; /* accent */
  --theme-bg: #fbf6f3; /* page background */
  --theme-surface: #fff7f2; /* cards */
  --theme-text: #2b2b2b; /* body text */
  --theme-contrast: #ffffff; /* text on dark */
  --shadow: 0 6px 18px rgba(75,52,39,0.08);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  --font-heading: 'Merriweather', serif;
}

/* Base page */
body.menu-body {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
h1,h2,h3,h4,h5,h6, .choc-hero-title {
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
  color: var(--theme-choc-dark);
}

/* Ensure hero title uses white on dark */
.menu-hero.chocolate-hero .choc-hero-title {
  color: var(--theme-contrast);
}

/* Buttons */
.btn-primary, .btn-primary:focus {
  background-color: var(--theme-choc-dark) !important;
  border-color: var(--theme-choc-dark) !important;
  color: var(--theme-contrast) !important;
}
.btn-outline-primary {
  color: var(--theme-choc-dark);
  border-color: var(--theme-choc-dark);
  background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background-color: var(--theme-choc-dark);
  color: var(--theme-contrast);
}

/* Links */
a, a:hover { color: var(--theme-choc-medium); }

/* Cards / surfaces */
.category-stage, .category-card, .card, .clean-price-card {
  background: var(--theme-surface);
  border: 1px solid rgba(75,52,39,0.04);
  box-shadow: var(--shadow);
}

/* Category avatar */
.category-avatar img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(75,52,39,0.12);
  box-shadow: 0 8px 20px rgba(75,52,39,0.06);
}

.category-heading { color: var(--theme-choc-dark); font-weight:600; }

/* Price and rating */
.clean-price-card { background-color: var(--theme-choc-dark); color: var(--theme-contrast); }
.clean-rating { background-color: var(--theme-choc-accent); color: var(--theme-contrast); }

/* Campaign overlay */
.campaign-card .card-overlay {
  background: linear-gradient(180deg, rgba(75,52,39,0.92), rgba(75,52,39,0.45));
  color: var(--theme-contrast);
}

/* Intro overlay */
.intro-overlay .intro-overlay-card { border: 4px solid rgba(75,52,39,0.06); }

/* Chocolate hero */
.menu-hero.chocolate-hero {
  /* solid chocolate gradient background (no image) */
  background: linear-gradient(180deg, var(--theme-choc-dark), var(--theme-choc-medium));
  color: var(--theme-contrast);
  padding: 0.8rem 1rem;
  min-height: 180px; /* taller to accommodate larger logo */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .75rem;
  position: relative;
  overflow: hidden;
}
.menu-hero.chocolate-hero::after { content: ""; position:absolute; inset:0; pointer-events:none; }
.menu-hero .logo-wrapper {  margin-bottom: 0; border-radius: 50%; overflow: hidden; display: inline-block; border: 6px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
.menu-hero .logo-wrapper img { width:100%; height:100%; object-fit:contain; border-radius:50%; display:block; padding: 6px; background: transparent; }
/* hide hero text when using logo-only header */
.choc-hero-title, .choc-hero-subtitle { display: none !important; }

/* Responsive tweaks */
@media (min-width: 768px) {
  .menu-hero .logo-wrapper { max-width: 200px; width:200px; height:200px; }
}

/* Site header (global positioning & look) */
.site-header.chocolate-header {
  background: var(--theme-bg); /* neutral background so circle stands out */
  color: var(--theme-text);
  padding: 0.6rem 1rem;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-header .logo-wrapper {
  width: 180px;
  height: 180px;
  margin-bottom: 0;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 6px solid rgba(0,0,0,0.06);
  background: var(--theme-choc-dark); /* your provided color */
}
.site-header .logo-wrapper img {
  border-radius:50%;
  display:block;
  background: transparent;
}

/* responsive variations */
@media (min-width: 768px) {
  .site-header .logo-wrapper { width:180px; height:180px; }
}
@media (max-width: 575.98px) {
  .site-header { min-height: 160px; padding: 0.5rem 0.75rem; }
  .site-header .logo-wrapper { width:140px; height:140px; border-width:4px; }
}

/* ===== Admin panel styles ===== */
.admin-body { min-height: 100vh; background: #f5f6fb; }
.admin-body .sidebar { width: 240px; min-height: 100vh; background: #111827; color: #fff; }
.admin-body .sidebar a { color: rgba(255,255,255,0.85); text-decoration: none; display: block; padding: 0.65rem 1.25rem; border-radius: 0.75rem; margin-bottom: 0.4rem; font-weight: 500; }
.admin-body .sidebar a:hover, .admin-body .sidebar a.active { background: rgba(255,255,255,0.08); color: #fff; }
.admin-body .content { padding: 2rem; }
.admin-body .topbar { background: #fff; border-bottom: 1px solid rgba(17,24,39,0.05); }

/* Admin login */
.admin-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(75,52,39,0.03), rgba(75,52,39,0.02)); }
.login-card { max-width: 360px; width: 100%; border-radius: 1.5rem; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.05); }

/* Admin image preview helpers */
.img-preview { width:100%; height:auto; display:block; border-radius: .5rem; }
.img-preview-sm { max-width: 160px; }
.img-preview-md { max-width: 180px; }
.img-preview-lg { max-width: 200px; }
.img-preview-xl { max-width: 220px; }


/* Small helpers */
.rounded-surface { border-radius: .75rem; background: var(--theme-surface); }

/* Accessibility: ensure focus styles remain visible */
:focus { outline: 3px solid rgba(199,107,43,0.18); outline-offset: 2px; }

/* ===== Forms & Inputs ===== */
.form-control, .form-select, .form-control:focus, .form-select:focus {
  border: 1px solid rgba(75,52,39,0.12);
  background: #fff;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  border-color: var(--theme-choc-dark);
  box-shadow: 0 6px 18px rgba(75,52,39,0.06);
}
.form-label { color: var(--theme-choc-dark); font-weight:600; }

/* ===== Alerts & Badges ===== */
.alert {
  background: linear-gradient(180deg, rgba(255,248,242,1), rgba(255,248,242,0.9));
  border: 1px solid rgba(75,52,39,0.06);
  color: var(--theme-text);
}
.badge-choc { background: var(--theme-choc-dark); color: var(--theme-contrast); }
.badge-accent { background: var(--theme-choc-accent); color: var(--theme-contrast); }

/* ===== Navbar / Topbar (public) ===== */
.header-top, .topbar {
  background: transparent;
  color: var(--theme-text);
}
.header-top a, .topbar a { color: var(--theme-text); }
.header-top .brand, .topbar .brand { font-family: var(--font-heading); color: var(--theme-choc-dark); font-weight:700; }

/* ===== Product / Item cards ===== */
.product-card, .category-card {
  border-radius: .75rem;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover, .category-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(75,52,39,0.08); }
.product-card .product-image {
  background: linear-gradient(180deg, rgba(75,52,39,0.02), rgba(75,52,39,0.02));
  object-fit: cover; width:100%; height:180px; display:block; }
.product-card .product-body { padding: .8rem; }
.product-card .product-title { font-weight:700; color: var(--theme-choc-dark); }
.product-card .product-desc { color: rgba(43,43,43,0.8); font-size: .95rem; }

/* ===== Modals ===== */
.modal-content { background: linear-gradient(180deg, #fff, var(--theme-surface)); border-radius: .6rem; border: 1px solid rgba(75,52,39,0.04); }
.modal-header { border-bottom: 1px solid rgba(75,52,39,0.04); }
.modal-footer { border-top: 1px solid rgba(75,52,39,0.04); }

/* ===== Pagination ===== */
.page-link {
  color: var(--theme-choc-dark);
  border-radius: .5rem;
  border: 1px solid rgba(75,52,39,0.06);
}
.page-item.active .page-link { background: var(--theme-choc-dark); color: var(--theme-contrast); border-color: var(--theme-choc-dark); }

/* ===== Tables ===== */
.table thead th { background: transparent; color: var(--theme-choc-dark); border-bottom: 1px solid rgba(75,52,39,0.06); }
.table tbody td { border-top: 1px solid rgba(75,52,39,0.04); }

/* ===== Utilities & helpers ===== */
.text-muted-weak { color: rgba(43,43,43,0.55); }
.small-note { font-size: .9rem; color: rgba(43,43,43,0.65); }

/* ===== Accessibility & Contrast helpers ===== */
/* Ensure call-to-action contrast */
.cta { background: var(--theme-choc-dark); color: var(--theme-contrast); padding: .6rem 1rem; border-radius: .5rem; display:inline-block; }
.cta:focus { outline: 3px solid rgba(199,107,43,0.22); }

/* ===== Responsive tweaks ===== */
@media (max-width: 575.98px) {
  .product-card .product-image { height: 140px; }
  .menu-shell { padding-left: .75rem; padding-right: .75rem; }
}

/* ===== Small visual polish ===== */
.shadow-subtle { box-shadow: 0 6px 18px rgba(75,52,39,0.06); }

/* End theme */