/* CornX – Premium Corn Sticks (local CSS only) */
/* =============================================
   RESET & TOKENS
   ============================================= */
* { box-sizing: border-box; }
html, body { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #1f2937;
  background: #fff;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:root{
  --amber-50:#fffbeb;
  --amber-100:#fef3c7;
  --amber-500:#f59e0b;
  --amber-600:#d97706;
  --muted:#71717a;
  --border:#e5e7eb;
  --header-h: 64px;            /* fallback, JS ju spresní */
  --pad-x-mobile: 22px;
  --pad-x-desktop: 24px;
}

/* správny offset pre #anchor pri fixed headeri */
html { scroll-padding-top: calc(var(--header-h) + 8px); }

/* =============================================
   LAYOUT
   ============================================= */
.container { width: min(1200px, 100%); margin-inline: auto; padding-inline: 16px; }
/* globálne jemné zväčšenie paddingu + safe-area */
.container{
  padding-left: clamp(16px, 4vw, var(--pad-x-desktop));
  padding-right: clamp(16px, 4vw, var(--pad-x-desktop));
}
@supports (padding: max(0px)) {
  .container{
    padding-left: max(clamp(16px, 4vw, var(--pad-x-desktop)), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 4vw, var(--pad-x-desktop)), env(safe-area-inset-right));
  }
}
@media (max-width: 640px){
  .hero .container,
  #o-nas .container,
  footer .container {
    padding-left: max(var(--pad-x-mobile), env(safe-area-inset-left));
    padding-right: max(var(--pad-x-mobile), env(safe-area-inset-right));
  }
}

/* =============================================
   HEADER (FIXED)
   ============================================= */
.header{
  position: fixed; top:0; left:0; right:0;
  z-index: 9999;
  border-bottom:1px solid var(--border);
  background: linear-gradient(to bottom, #ffe5b4, #ffffff);
}
.header-inner{
  height: var(--header-h);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; }
.brand-badge{ width:36px; height:36px; display:grid; place-items:center; color:#fff; font-weight:900; border-radius: 10px; }

/* odsadenie obsahu o výšku fixed headera */
body { padding-top: var(--header-h); }

/* NAV + hamburger */
.nav{ gap:24px; display:none; }
@media (min-width: 768px){ .nav{ display:flex; } }
.nav a{ font-size:14px; font-weight:600; }
.nav a:hover{ color: var(--amber-600); }

.nav-toggle{
  display:inline-flex; flex-direction:column; gap:4px;
  width:42px; height:42px; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius:10px; background:#fff; cursor:pointer;
}
.nav-toggle span{ width:20px; height:2px; background:#111; display:block; }
@media (min-width: 768px){ .nav-toggle{ display:none; } }

.nav.open{
  display:flex; position: fixed; top: var(--header-h); left: 0; right: 0;
  background:#fff; flex-direction: column; padding: 12px 16px;
  border-bottom: 1px solid var(--border); gap: 12px;
}

/* zamedzenie scrollu pozadia pri otvorenom menu */
body.no-scroll{ overflow: hidden; }

/* =============================================
   BUTTONS
   ============================================= */
.btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 16px; border-radius:12px; font-weight:700; border:1px solid transparent; cursor:pointer; }
.btn-primary{ background: var(--amber-500); color:#fff; box-shadow: 0 10px 25px rgba(245,158,11,.35); }
.btn-outline{ border-color:#d4d4d8; color:#111827; background:#fff; }

/* =============================================
   HERO
   ============================================= */
.hero{ position:relative; }
.hero-bg{ position:absolute; inset:0; background-size:cover; background-position:center; z-index:-1; }
.hero-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(255,255,255,.4), #ffffff); }
.hero-content{ position:relative; padding:64px 0; display:grid; gap:40px; }
@media (min-width: 768px){ .hero-content{ grid-template-columns:1fr 1fr; align-items:center; padding:96px 0; } }
.kicker{ display:inline-flex; gap:8px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color: var(--amber-600); background: var(--amber-100); padding:6px 10px; border-radius:999px; }
h1{ font-size:34px; line-height:1.15; margin: 16px 0 0; font-weight:900; }
@media (min-width: 768px){ h1{ font-size:48px; } }
.lead{ color:#3f3f46; margin-top:12px; max-width: 60ch; }
.hero-visual{ position:relative; }
.hero-card{ background: rgba(255,255,255,.75); backdrop-filter: blur(8px); border-radius: 20px; padding: 8px; box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.product-img{ height:190px; object-fit:contain; background:var(--amber-50); border-radius:12px; }

/* =============================================
   SECTIONS
   ============================================= */
.section{ padding:56px 0; }
.section.alt{ background: linear-gradient(180deg, #ffffff, rgba(255,251,235,.6)); }
.section h2{ font-size:32px; font-weight:900; margin:0; }
.section .muted{ color: var(--muted); margin-top:8px; }

/* Pozadie pre sekciu O nás */
#o-nas.section.alt{
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)),
    url("assets/Landing_Page_Pozadie_(1).png") center / cover no-repeat;
}

/* =============================================
   GRID & CARDS
   ============================================= */
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns: 1fr; }
@media (min-width: 768px){ .grid-2{ grid-template-columns: 1fr 1fr; } }
.grid-3{ grid-template-columns: 1fr; }
@media (min-width: 640px){ .grid-3{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .grid-3{ grid-template-columns: 1fr 1fr 1fr; } }

.card{ background:#fff; border-radius:20px; box-shadow: 0 10px 25px rgba(0,0,0,.08); overflow:hidden; }
.card.no-pad img{ border-radius:0; }
.card-body{ padding:20px; display:grid; gap:12px; }
.badge{ display:block; text-align:center; font-size:16px; font-weight:800; padding:6px 10px; background:#f4f4f5; border-radius:8px; }
.features{ margin:0; padding-left:18px; color:#3f3f46; font-size:14px; }
.gallery img{ height:220px; width:100%; object-fit:cover; border-radius:16px; box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.contact p{ margin: 6px 0; font-size: 14px; color:#3f3f46; }
.map{ width:100%; height:260px; border:0; border-radius:16px; box-shadow: 0 8px 22px rgba(0,0,0,.08); overflow:hidden; }

/* =============================================
   FOOTER
   ============================================= */
.footer{
  border-top:1px solid var(--border);
  background:
    linear-gradient(rgba(255,255,255,.75), rgba(255,255,255,.75)),
    url("assets/Footer.png") center / cover no-repeat;
}
.footer-inner{ padding: 40px 0; display:grid; gap:24px; }
@media (min-width: 768px){ .footer-inner{ grid-template-columns: 1fr 1fr 1fr; } }
.footer .small{ font-size:12px; color:#6b7280; }
.copy{ border-top:1px solid var(--border); text-align:center; font-size:12px; color:#6b7280; padding:12px 0; }

/* =============================================
   PRODUCT PAGE EXTRAS
   ============================================= */
.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; }
.table thead th { background:#fafafa; font-weight:800; }
.badge-new { display:inline-block; background: #e11d48; color:#fff; font-weight:800; font-size:11px; padding:4px 8px; border-radius:999px; letter-spacing:.02em; }
.meta { display:grid; gap:6px; font-size:14px; color:#3f3f46; }
.meta .row { display:flex; gap:8px; }
.meta .key { width:140px; color:#6b7280; }
.product-hero { display:grid; gap:24px; }
@media (min-width: 992px){ .product-hero { grid-template-columns: 1fr 1.2fr; align-items:start; } }
.note { font-size:12px; color:#6b7280; }