:root {
  --red: #a22626;
  --deep-red: #821b1b;
  --ochre: #d89216;
  --brown: #3f1f14;
  --dark: #2c2c2c;
  --cream: #f7f1e7;
  --card: #ffffff;
  --muted: #706f6f;
  --green: #8dc349;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: #1c1c1c;
  background: var(--cream);
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
a:hover { opacity: 0.85; }

img { max-width: 100%; display: block; }

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 24px;
  background: linear-gradient(90deg, var(--deep-red), var(--red));
  color: #fff;
}

.brand { display: flex; align-items: center; gap: 12px; }
.logo { height: 44px; width: auto; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.brand-sub { font-size: 12px; opacity: 0.8; }

nav { display: flex; gap: 14px; margin-left: auto; margin-right: 10px; flex-wrap: wrap; }
nav a { color: #fff; font-weight: 600; }
nav a:hover { text-decoration: underline; }

/* Burger for mobile */
#nav-toggle { display: none; }
.burger { display: none; cursor: pointer; }
.burger span { display: block; width: 24px; height: 2px; margin: 5px 0; background: #fff; }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-weight: 700;
}

.pill.primary { background: #fff; color: var(--red); border-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.pill.light { border-color: #fff; color: #fff; }
.pill.ghost { border-color: #fff; color: #fff; background: rgba(255,255,255,0.1); }
.pill.small { padding: 8px 12px; font-size: 14px; }
.pill.full { width: 100%; justify-content: center; }

/* Hero */
.hero {
  position: relative;
  min-height: 420px;
  display: grid;
  align-items: center;
  padding: 100px 24px 80px;
  color: #fff;
  background: url('main.jpg') center/cover no-repeat;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.68), rgba(0,0,0,0.35));
}

.hero-content {
  position: relative;
  max-width: 820px;
  z-index: 1;
}

.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 12px; margin: 0; color: var(--ochre); }
.eyebrow.light { color: #ffdca6; }

h1, h2, h3 { font-family: 'Playfair Display', 'Manrope', serif; margin: 6px 0 12px; }
h1 { font-size: clamp(32px, 5vw, 48px); }
h2 { font-size: clamp(24px, 3.5vw, 34px); }

.lede { color: #e8e8e8; max-width: 60ch; }
.lede.light { color: #f2f2f2; }

.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }

/* Info band */
.info-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 20px 20px 0;
  gap: 10px;
}

.info-card {
  padding: 24px;
  color: #fff;
  border-radius: 8px;
  min-height: 160px;
  display: grid;
  gap: 10px;
  align-content: space-between;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.info-card.brown { background: var(--brown); }
.info-card.ochre { background: var(--ochre); }
.info-card.red { background: #b1251f; }

/* Sections */
.section { padding: 56px 24px; margin-top: 20px; }
.section.dark { background: var(--dark); color: #fff; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.muted { color: var(--muted); }
.section.dark .muted { color: #cfcfcf; }

/* Product grid */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.product-card {
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  background: var(--card);
  color: #1c1c1c;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
}

.product-card .thumb {
  aspect-ratio: 3/ 4;
  min-height: 180px;
  background-size: cover;
  background-position: center;
  filter: saturate(1.08);
}

.product-card .body {
  padding: 16px;
  background: var(--tone, #eee);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.product-card .price { font-weight: 800; }
.product-card .unit { font-weight: 600; opacity: 0.9; }
.product-card button {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Order section */
.order {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}

.form-wrap {
  background: #fff;
  border: 1px solid #e4d8ca;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.field-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: #1f1f1f; }
input, textarea, select {
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #d7c8b6;
  background: #fdf9f4;
  font: inherit;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--red); border-color: var(--red); background: #fff; }
.form-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }

.cart {
  background: #101820;
  color: #f8f5ec;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.28);
  position: sticky;
  top: 90px;
  min-height: 260px;
}

.cart-head { display: flex; justify-content: space-between; align-items: center; }
.cart-items { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.cart-item h4 { margin: 0; }
.cart-item .meta { color: #9fb2c7; font-size: 14px; }
.qty { display: inline-flex; align-items: center; gap: 6px; }
.qty button { background: #1f2933; color: #fff; border: none; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; }
.cart-summary { border-top: 1px solid #233040; padding-top: 10px; display: grid; gap: 6px; }
.cart .line { display: flex; justify-content: space-between; align-items: center; }
.status { margin-top: 8px; font-weight: 700; }
#cart-empty { display: none; color: #b7c3cf; }

/* Contact */
.contact { background: #f0e6d9; }
.contact-card { max-width: 960px; margin: 0 auto; display: grid; gap: 12px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.contact-grid strong { display: block; }

/* Footer */
.footer {
  color: #fff;
  background: #2e1c10 url('footer-background.jpg') center/cover repeat-y;
  padding: 36px 24px 20px;
  position: relative;
  isolation: isolate;
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.08);
  max-width: 1080px;
  margin: 0 auto;
}

.footer .logo { height: 70px; }
.site-index, .contact-stack { display: grid; gap: 8px; }
.site-index strong, .contact-stack strong { letter-spacing: 0.02em; }

@media (max-width: 640px) {
  .footer .logo { height: 56px; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .site-index, .contact-stack { justify-items: center; }
}
.foot-note {
  position: relative;
  z-index: 1;
  margin: 18px auto 0;
  font-size: 14px;
  opacity: 0.92;
  background: rgba(0,0,0,0.4);
  padding: 10px 12px;
  border-radius: 10px;
  display: block;
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  max-width: 520px;
}

/* Responsive nav */
@media (max-width: 820px) {
  nav { display: none; width: 100%; flex-direction: column; background: var(--deep-red); padding: 12px 0; }
  #nav-toggle:checked + .burger + nav { display: flex; }
  .burger { display: block; margin-left: auto; }
  .topbar { flex-wrap: wrap; }
  .cart { position: relative; top: 0; }
}

@media (max-width: 540px) {
  .product-grid { gap: 14px; }
  .product-card .thumb { min-height: 150px; }
}

@media (prefers-reduced-motion: no-preference) {
  .product-card, .info-card, .hero, .cart, .form-wrap { transition: transform 180ms ease, box-shadow 180ms ease; }
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 26px rgba(0,0,0,0.18); }
  .info-card:hover { transform: translateY(-10px); }
}


.product-card .actions { display: grid; gap: 8px; }
.product-card .buy-note { font-size: 13px; opacity: 0.86; }
c:\Users\HP\Documents\New project\main.jpg