/* ─── Variables ─────────────────────────────────────────────────────── */
:root {
  --accent: #e85d04;
  --accent-dark: #c44b00;
  --accent-light: #fff3ee;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.12);
  --radius: .75rem;
}

/* ─── Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  color: #1a1a1a;
  background: #fff;
}

h1, h2, h3, h4, .section-title {
  font-family: var(--font-display);
}

.section-title { font-size: 1.75rem; font-weight: 700; }

/* ─── Colours ─────────────────────────────────────────────────────────── */
.text-accent { color: var(--accent) !important; }
.bg-accent   { background-color: var(--accent) !important; }

.bg-accent-soft {
  background-color: var(--accent-light);
}

.btn-accent {
  background-color: var(--accent);
  color: #fff;
  border: none;
  transition: background .2s, transform .15s;
}
.btn-accent:hover {
  background-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-1px);
}
.btn-accent:active { transform: translateY(0); }

.btn-outline-accent {
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
  transition: all .2s;
}
.btn-outline-accent:hover {
  background: var(--accent);
  color: #fff;
}

/* ─── Navbar ──────────────────────────────────────────────────────────── */
#mainNav {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: .875rem 0;
  transition: box-shadow .3s;
}
#mainNav.scrolled { box-shadow: var(--shadow-md); }

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: -.5px;
}

.nav-link {
  font-weight: 500;
  font-size: .9rem;
  color: #444 !important;
  padding: .4rem .75rem !important;
  border-radius: .4rem;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--accent-light); color: var(--accent) !important; }

/* ─── Hero ───────────────────────────────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, #fff8f5 0%, #fff 60%);
  padding: 5rem 0 3rem;
  overflow: hidden;
}

.min-vh-75 { min-height: 75vh; }

.hero-image-wrapper {
  position: relative;
  display: inline-block;
}

.hero-img {
  max-height: 520px;
  object-fit: cover;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
  animation: floatUp .8s ease both;
}

@keyframes floatUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge-1, .hero-badge-2 {
  position: absolute;
  border-radius: 1rem !important;
  animation: floatUp .8s ease both;
}
.hero-badge-1 { bottom: -20px; left: -30px; animation-delay: .3s; }
.hero-badge-2 { top: 20px; right: -30px; animation-delay: .5s; }

/* ─── Category Card ──────────────────────────────────────────────────── */
.category-card {
  border-radius: var(--radius) !important;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.category-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.category-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
  display: flex;
  align-items: flex-end;
  padding: 1rem;
  border-radius: var(--radius);
}

/* ─── Product Card ───────────────────────────────────────────────────── */
.product-card {
  border-radius: var(--radius) !important;
  transition: transform .25s, box-shadow .25s;
  position: relative;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg) !important; }

.product-img {
  transition: transform .4s ease;
}
.product-card:hover .product-img { transform: scale(1.05); }

/* ─── CTA Banner ─────────────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--accent) 0%, #ff8c42 100%);
}

/* ─── Footer ─────────────────────────────────────────────────────────── */
.footer {
  background: #0f0f0f;
  color: #ccc;
}
.footer h5, .footer h6 { color: #fff; }
.footer a:hover { color: var(--accent) !important; }

/* ─── Payment Options ────────────────────────────────────────────────── */
.payment-option { cursor: pointer; transition: border-color .2s; }
.payment-option:has(input:checked) { border-color: var(--accent) !important; background: var(--accent-light); }

/* ─── Utilities ──────────────────────────────────────────────────────── */
.object-fit-cover { object-fit: cover; }

@media (max-width: 576px) {
  .hero-section { padding: 3rem 0 2rem; }
  .section-title { font-size: 1.4rem; }
  .hero-badge-1, .hero-badge-2 { display: none; }
}