/* Sladovio — global stylesheet
   Design tokens mirror the original Claude Design (oklch colors).
   Google Fonts (Cormorant Garamond / Nunito) are referenced by name where
   available locally; every inline font-family already ends in a generic
   serif/sans-serif fallback, so the layout stays correct without any
   external font CDN. */

:root {
  --brand: oklch(58% 0.16 15);
  --brand-dark: oklch(50% 0.15 15);
  --brand-tint: oklch(92% 0.05 15);
  --gold: oklch(60% 0.11 60);
  --gold-strong: oklch(70% 0.11 60);
  --terracotta: oklch(55% 0.1 55);
  --cream-page: oklch(96% 0.02 75);
  --cream-card: oklch(99% 0.01 75);
  --border: oklch(90% 0.02 70);
  --ink: oklch(28% 0.03 40);
  --ink-muted: oklch(45% 0.03 40);
  --ink-soft: oklch(50% 0.03 40);
  --footer-bg: oklch(28% 0.03 40);
  --footer-card: oklch(38% 0.03 40);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

@media (max-width: 560px) {
  body { overflow-x: hidden; }
}

/* Real photography inside the design's placeholder frames */
.ph {
  position: relative;
  overflow: hidden;
}
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Interactive polish (additive — base states match the source 1:1) */
a { cursor: pointer; }

.btn-primary, .btn-outline, .add-cart-btn, .qty-btn, .subscribe-btn, .send-btn, .checkout-btn {
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn-primary:hover, .add-cart-btn:hover, .subscribe-btn:hover, .send-btn:hover, .checkout-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}
.btn-outline:hover {
  background: var(--brand-tint) !important;
}
.qty-btn:hover { background: var(--cream-page) !important; }

.nav-link { transition: color .15s ease; }
.nav-link:hover { color: var(--brand) !important; }

.product-card, .category-card, .article-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover, .category-card:hover, .article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px oklch(28% 0.03 40 / 0.35);
}

input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Form status banner (used on kontakt.html / index.html after submit) */
.form-status {
  display: none;
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 0 0 4px;
}
.form-status.is-visible { display: block; }
.form-status.is-success { background: oklch(92% 0.06 150); color: oklch(35% 0.1 150); }
.form-status.is-error { background: oklch(92% 0.06 25); color: oklch(40% 0.15 25); }

/* Honeypot field — hidden from real users, catches simple bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Cookie consent banner */
#cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 999;
  max-width: 620px;
  margin: 0 auto;
  background: var(--ink);
  color: oklch(96% 0.015 75);
  border-radius: 16px;
  padding: 20px 22px;
  font-family: 'Nunito', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  box-shadow: 0 20px 45px -20px oklch(28% 0.03 40 / 0.6);
  display: none;
}
#cookie-banner.is-visible { display: block; }
#cookie-banner p { margin: 0 0 14px; color: oklch(90% 0.02 75); }
#cookie-banner a { color: oklch(85% 0.08 60); }
#cookie-banner .cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
#cookie-banner button {
  border: none;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: 'Nunito', sans-serif;
}
#cookie-banner .cookie-accept { background: var(--brand); color: white; }
#cookie-banner .cookie-reject { background: transparent; color: oklch(94% 0.015 75); border: 1px solid oklch(55% 0.02 40); }

/* Mobile nav spacing safety */
@media (max-width: 720px) {
  header nav { justify-content: flex-start !important; gap: 14px !important; }
}