/* =============================================================================
   Wheatfield Bake Co. — hand-authored CSS (no build step)
   -----------------------------------------------------------------------------
   This project deliberately has no CSS build pipeline (no Tailwind CLI, no
   PostCSS) since the whole point of the PHP rewrite is a zero-dependency
   deploy — just upload files. That means these are plain, named classes
   instead of Tailwind utilities: if you add a new class here later, it
   needs an actual rule in this file, there's nothing to "rebuild".
   Colors/fonts match the original Next.js version's Tailwind config.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Caveat:wght@600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  --cream: #FFFBF2;
  --wheat: #F3E9A0;
  --wheat-light: #FAF3C9;
  --wheat-dark: #E7D46F;
  --espresso: #4A2E1B;
  --espresso-light: #6B4226;
  --caramel: #8B5A2B;
  --caramel-light: #B98552;
  --caramel-dark: #6E4420;
  --berry: #B5563C;
  --berry-light: #CB6F52;
  --berry-dark: #8F4230;

  --font-display: 'Fredoka', sans-serif;
  --font-script: 'Caveat', cursive;
  --font-body: 'Nunito', sans-serif;

  --radius: 1.25rem;
  --shadow-soft: 0 4px 14px -4px rgba(74, 46, 27, 0.15);
  --shadow-card: 0 10px 30px -12px rgba(74, 46, 27, 0.25);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--espresso);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }

.container { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 768px) { .container { padding: 0 2rem; } }

.font-display { font-family: var(--font-display); }
.font-script { font-family: var(--font-script); }

/* =============================================================================
   Header
   ============================================================================= */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 251, 242, 0.95);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--wheat-dark);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.brand {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
  color: var(--espresso);
}
.main-nav { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .main-nav { display: flex; } }
.main-nav a {
  font-weight: 700; font-size: 0.875rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--espresso);
}
.main-nav a:hover, .main-nav a.active { color: var(--berry); }

.cart-badge {
  position: relative;
}
.cart-badge .badge-count {
  position: absolute; top: -0.5rem; right: -0.5rem;
  background: var(--espresso); color: var(--cream);
  font-size: 0.6875rem; font-weight: 700;
  height: 1.25rem; width: 1.25rem; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

.menu-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 999px;
  border: 1px solid rgba(74,46,27,0.2); background: transparent;
}
@media (min-width: 768px) { .menu-toggle { display: none; } }

.mobile-nav {
  display: none; flex-direction: column; gap: 0.25rem;
  padding: 0.75rem 1.25rem; border-top: 1px solid var(--wheat-dark);
  background: var(--cream);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 0.6rem 0.75rem; border-radius: 0.5rem;
  font-weight: 700; color: var(--espresso);
}
.mobile-nav a:hover { background: var(--wheat-light); }

/* =============================================================================
   Buttons
   ============================================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; border-radius: 999px; font-weight: 700; font-size: 0.875rem;
  padding: 0.75rem 1.5rem; border: 2px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--berry); color: var(--cream); }
.btn-primary:hover { background: var(--berry-dark); }
.btn-dark { background: var(--espresso); color: var(--cream); }
.btn-dark:hover { background: var(--espresso-light); }
.btn-light { background: var(--wheat); color: var(--espresso); }
.btn-light:hover { background: var(--wheat-dark); }
.btn-outline-cream { border-color: var(--cream); color: var(--cream); background: transparent; }
.btn-outline-cream:hover { background: var(--cream); color: var(--espresso); }
.btn-outline-dark { border-color: var(--espresso); color: var(--espresso); background: transparent; }
.btn-outline-dark:hover { background: var(--espresso); color: var(--cream); }
.btn-outline-berry { border-color: var(--berry); color: var(--berry); background: transparent; }
.btn-outline-berry:hover { background: var(--berry); color: var(--cream); }
.btn-sm { padding: 0.5rem 1.1rem; font-size: 0.8125rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

/* =============================================================================
   Hero sections
   ============================================================================= */
.hero {
  position: relative; display: flex; align-items: center; overflow: hidden;
  min-height: 60vh; color: var(--cream);
}
.hero.hero-tall { min-height: 88vh; }
.hero img.hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(74,46,27,0.75) 0%, rgba(74,46,27,0.35) 45%, rgba(74,46,27,0.75) 100%);
}
.hero .container { position: relative; z-index: 1; }
.eyebrow { font-family: var(--font-script); font-size: 1.75rem; color: var(--wheat); display: block; }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: 2.25rem; line-height: 1.15; margin-top: 0.5rem; }
@media (min-width: 640px) { .hero h1 { font-size: 3rem; } }
.hero p { margin-top: 1rem; max-width: 34rem; color: rgba(255,251,242,0.9); }
.hero-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* =============================================================================
   Sections
   ============================================================================= */
.section { padding: 4rem 0; }
.section-sm { padding: 3rem 0; }
.bg-wheat { background: var(--wheat); }
.bg-wheat-light { background: var(--wheat-light); }
.bg-espresso { background: var(--espresso); color: var(--cream); }

.section-heading { display: flex; flex-direction: column; gap: 0.65rem; }
.section-heading.center { align-items: center; text-align: center; }
.section-heading .eyebrow { color: var(--berry); font-size: 1.5rem; }
.section-heading.light .eyebrow { color: var(--wheat); }
.section-heading h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; color: var(--espresso); }
@media (min-width: 640px) { .section-heading h2 { font-size: 2.15rem; } }
.section-heading.light h2 { color: var(--cream); }
.section-heading p { max-width: 42rem; color: rgba(110,68,32,0.9); }
.section-heading.light p { color: rgba(255,251,242,0.8); }

.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(1, 1fr); }
.grid-3 { grid-template-columns: repeat(1, 1fr); }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-6 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-6 { grid-template-columns: repeat(6, 1fr); }
}

.two-col { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .two-col { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================================
   Cards
   ============================================================================= */
.card {
  background: var(--cream); border-radius: var(--radius);
  box-shadow: var(--shadow-soft); border: 1px solid rgba(74,46,27,0.05);
}
.card-lg { box-shadow: var(--shadow-card); }
.card-pad { padding: 1.5rem; }
.card-pad-lg { padding: 1.75rem; }

.value-card { text-align: center; padding: 1.5rem; }
.value-icon {
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
  height: 3.5rem; width: 3.5rem; border-radius: 999px; background: var(--wheat);
  font-size: 1.5rem;
}
.value-card h3 { font-family: var(--font-display); font-weight: 600; margin-top: 1rem; }
.value-card p { margin-top: 0.5rem; font-size: 0.9rem; color: rgba(110,68,32,0.85); }

.product-card { overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease; }
.product-card:hover { transform: translateY(-4px); }
.product-card-media { position: relative; height: 14rem; overflow: hidden; }
.product-card-media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-tag {
  position: absolute; top: 0.75rem; left: 0.75rem;
  background: rgba(255,251,242,0.9); color: var(--caramel-dark);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem; border-radius: 999px;
}
.product-card-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.product-card-title-row { display: flex; justify-content: space-between; align-items: start; gap: 0.75rem; }
.product-card-title-row h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.product-card-price { font-family: var(--font-display); font-weight: 600; color: var(--berry); white-space: nowrap; }
.product-card-body p.desc { font-size: 0.9rem; color: rgba(110,68,32,0.9); }

.qty-stepper {
  display: flex; align-items: center; border: 1px solid rgba(139,90,43,0.25); border-radius: 999px; flex: none;
}
.qty-stepper button { background: none; border: none; padding: 0.4rem 0.75rem; color: var(--espresso); font-size: 1rem; }
.qty-stepper span { min-width: 1.5rem; text-align: center; font-weight: 700; font-size: 0.9rem; }

.testimonial-card { padding: 1.5rem; display: flex; flex-direction: column; }
.testimonial-quote-mark { font-family: var(--font-script); font-size: 2.5rem; color: var(--berry); line-height: 1; margin-bottom: 0.5rem; }
.testimonial-card blockquote { margin: 0; font-size: 0.9rem; flex: 1; color: rgba(74,46,27,0.9); }
.testimonial-card figcaption { margin-top: 1.25rem; border-top: 1px solid var(--wheat-dark); padding-top: 1rem; }
.testimonial-card figcaption .name { font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; }
.testimonial-card figcaption .detail { font-size: 0.75rem; color: rgba(110,68,32,0.8); }

/* =============================================================================
   Category filter tabs, FAQ accordion
   ============================================================================= */
.filter-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.filter-tab {
  border-radius: 999px; border: 1px solid rgba(139,90,43,0.25);
  background: var(--cream); color: var(--espresso);
  font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1rem;
}
.filter-tab:hover { border-color: var(--berry); color: var(--berry); }
.filter-tab.active { background: var(--berry); border-color: var(--berry); color: var(--cream); }

.faq { border-radius: var(--radius); background: var(--cream); box-shadow: var(--shadow-soft); border: 1px solid rgba(74,46,27,0.05); overflow: hidden; }
.faq-item { border-top: 1px solid var(--wheat-dark); }
.faq-item:first-child { border-top: none; }
.faq-question {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; background: none; border: none; text-align: left;
  padding: 1rem 1.5rem; font-family: var(--font-display); font-weight: 600;
}
.faq-plus {
  flex: none; height: 1.75rem; width: 1.75rem; border-radius: 999px;
  background: var(--wheat-light); display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s ease;
}
.faq-item.open .faq-plus { transform: rotate(45deg); }
.faq-answer { display: none; padding: 0 1.5rem 1.25rem; font-size: 0.9rem; color: rgba(110,68,32,0.9); }
.faq-item.open .faq-answer { display: block; }

/* =============================================================================
   Forms
   ============================================================================= */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(110,68,32,0.8); }
.field input, .field select, .field textarea {
  border: 1px solid rgba(139,90,43,0.25); border-radius: 0.6rem;
  padding: 0.65rem 0.9rem; font-size: 0.9rem; color: var(--espresso); background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--berry); box-shadow: 0 0 0 3px rgba(181,86,60,0.15);
}
.field-row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .field-row.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.form-error { background: rgba(181,86,60,0.1); color: var(--berry-dark); padding: 0.6rem 0.9rem; border-radius: 0.5rem; font-size: 0.85rem; font-weight: 700; margin-bottom: 1rem; }
.form-success { text-align: center; padding: 2rem; }
.checkbox-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }

/* =============================================================================
   Footer
   ============================================================================= */
.site-footer { background: var(--espresso); color: rgba(255,251,242,0.9); }
.footer-grid { display: grid; gap: 2.5rem; padding: 3.5rem 0; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.footer-grid h3 { font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wheat); margin-bottom: 1rem; }
.footer-grid ul li { margin-bottom: 0.5rem; font-size: 0.9rem; color: rgba(255,251,242,0.75); }
.footer-grid ul li a:hover { color: var(--cream); }
.footer-hours { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; margin-bottom: 0.4rem; }
.footer-hours .time { color: rgba(255,251,242,0.6); }
.social-links { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.social-links a {
  height: 2.25rem; width: 2.25rem; border-radius: 999px; border: 1px solid rgba(255,251,242,0.25);
  display: flex; align-items: center; justify-content: center;
}
.social-links a:hover { border-color: var(--wheat); color: var(--wheat); }
.footer-bottom { border-top: 1px solid rgba(255,251,242,0.1); padding: 1.25rem; text-align: center; font-size: 0.75rem; color: rgba(255,251,242,0.5); }

/* =============================================================================
   Utility
   ============================================================================= */
.hide-sm { display: none; }
@media (min-width: 480px) { .hide-sm { display: inline; } }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.badge {
  display: inline-block; border-radius: 999px; padding: 0.15rem 0.65rem;
  font-size: 0.7rem; font-weight: 700; background: var(--wheat-light); color: var(--caramel-dark);
}
.badge-featured { background: rgba(181,86,60,0.1); color: var(--berry-dark); }
.badge-quote { background: rgba(74,46,27,0.1); color: var(--espresso); }
.badge-square { background: var(--wheat); color: var(--espresso); }
.muted { color: rgba(110,68,32,0.7); font-size: 0.85rem; }

/* =============================================================================
   Admin dashboard
   ============================================================================= */
.admin-body { min-height: 100vh; background: var(--wheat-light); }
.admin-topbar { background: var(--cream); border-bottom: 1px solid var(--wheat-dark); }
.admin-topbar .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.25rem; }
.admin-warning { background: rgba(181,86,60,0.1); color: var(--berry-dark); text-align: center; padding: 0.75rem 1.25rem; font-size: 0.9rem; font-weight: 700; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 2rem; }
.admin-tab {
  border-radius: 999px; border: 1px solid rgba(139,90,43,0.25); background: var(--cream);
  color: var(--espresso); font-weight: 700; font-size: 0.85rem; padding: 0.5rem 1rem;
}
.admin-tab.active { background: var(--berry); border-color: var(--berry); color: var(--cream); }
.product-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem; margin-bottom: 0.75rem; }
.product-row .thumb { width: 4rem; height: 4rem; border-radius: 0.5rem; overflow: hidden; flex: none; }
.product-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-row .info { flex: 1; min-width: 12rem; }
.product-row .info h3 { font-family: var(--font-display); font-weight: 600; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--espresso); padding: 1.5rem; }
.login-card { background: var(--cream); border-radius: var(--radius); padding: 2rem; width: 100%; max-width: 24rem; box-shadow: var(--shadow-card); }
.login-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-top: 0.25rem; }
.login-card .sub { font-size: 0.8rem; color: rgba(110,68,32,0.7); margin-top: 0.25rem; }
table.simple-table { width: 100%; border-collapse: collapse; }
table.simple-table th, table.simple-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--wheat-dark); font-size: 0.9rem; }