/* ========== KOLORY I MOTYW ========== */
:root {
  --brand: #8b3a2b; /* Ciepła czerwień */
  --brand-dark: #2b1b16; /* Ciemne drewno */
  --cream: #f6f2ea; /* Jasny krem */
  --text-dark: #2b1b16;
  --text-light: #ffffff;
  --transition-speed: 0.4s;
}

/* Tryb ciemny */
@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1e1b18;
    --text-dark: #f0e9df;
    --text-light: #ffffff;
  }
}

/* ========== RESET I GLOBAL ========== */
body {
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  margin: 0;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
}

/* Animacja fade-in */
.fade-in {
  opacity: 0;
  transform: translateY(15px);
  animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ========== BANNER Z ADRESEM ========== */
.banner {
  background: var(--brand);
  color: var(--text-light);
  font-size: 0.9rem;
  padding: 0.3rem 1rem;
  text-align: center;
}

/* ========== MENU ========== */
nav {
  background: var(--cream);
  border-bottom: 2px solid var(--brand);
  position: sticky;
  top: 0;
  z-index: 1000;
}
nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.5rem;
  margin: 0;
}
nav ul li { margin: 0 1rem; }
nav ul li a {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: bold;
  transition: color var(--transition-speed);
}
nav ul li a:hover { color: var(--brand); }

/* ========== HERO ========== */
.hero {
  text-align: center;
  padding: 3rem 1rem;
}
.hero h1 { font-size: 2.5rem; color: var(--brand-dark); }
.hero p { font-size: 1.2rem; color: var(--brand); }

/* ========== KARTY PRODUKTÓW ========== */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  padding: 2rem 1rem;
}
.card {
  background: #fff;
  border: 1px solid #e9dfcd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform var(--transition-speed);
}
.card:hover { transform: translateY(-5px); }
.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.card h3 { padding: 1rem; color: var(--brand-dark); }
.card p { padding: 0 1rem 1rem; }

/* ========== STOPKA ========== */
footer {
  background: var(--brand-dark);
  color: var(--text-light);
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}
footer a {
  color: var(--cream);
  text-decoration: none;
}
footer a:hover { text-decoration: underline; }