/* ===== VARIABLES ===== */
:root {
  --black: #000000;
  --soft-black: #0a0a0a;
  --gold: #C9A961;
  --off-white: #E8E4DC;
  --line: #1a1a1a;
  --line-mid: #2a2a2a;
  --danger: #e05a5a;
  --success: #6fbf8f;
  --cream: #F1EAD9;
  --cream-card: #FAF6EC;
  --cream-line: #DED2B8;
  --ink: #2B2620;
  --gold-dark: #9A7B2E;
  --gold-strong: #6E5518;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--off-white);
  font-family: var(--font-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ===== TOP BAR ===== */
.announcement-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1001;
  background: linear-gradient(90deg, #6b4a00 0%, #9a7020 50%, #6b4a00 100%);
  background-size: 200% auto;
  animation: annShine 4s linear infinite;
  color: #f5e6b8;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  padding: 7px 16px;
  line-height: 1.4;
}
@keyframes annShine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.topbar {
  position: fixed;
  top: 34px; left: 0; right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
  padding: 20px 40px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(201,169,97,0.15);
}
.topbar-wordmark {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  color: var(--off-white);
  text-decoration: none;
}
.topbar-right { display: flex; align-items: center; gap: 22px; }
.lang-switcher { display: flex; gap: 12px; }
.lang-btn {
  background: none; border: none; border-bottom: 2px solid transparent;
  font-family: var(--font-sans); font-size: 0.68rem; font-weight: 400;
  letter-spacing: 0.08em; color: #8a7440; opacity: 0.6; cursor: pointer;
  padding: 0 0 3px; text-transform: uppercase; text-decoration: none;
}
.lang-btn.active { opacity: 1; color: var(--gold); border-bottom-color: var(--gold); }
.cart-link {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--off-white); text-decoration: none; text-transform: uppercase;
}
.cart-badge {
  background: var(--gold); color: var(--black);
  border-radius: 50%; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: 700;
}

/* ===== DISCLAIMER BAR ===== */
.disclaimer-bar {
  background: var(--soft-black);
  border-bottom: 1px solid var(--line);
  color: var(--off-white);
  opacity: 0.55;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 9px 20px;
  /* .topbar is position:fixed (so it takes no space in flow) and floats over
     whatever comes right after it - without this, the disclaimer bar (and the
     flash message that follows it) render underneath the topbar and are invisible
     on every page that isn't the video hero. */
  margin-top: 118px;
  text-transform: uppercase;
}

/* ===== HERO ===== */
#hero { height: 92vh; position: relative; overflow: hidden; }
.hero-sticky { position: relative; height: 100%; width: 100%; background: var(--black); }
#hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero-sticky::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.65) 100%),
              linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.5) 100%);
  z-index: 2; pointer-events: none;
}
.hero-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; z-index: 10; padding: 2rem 20px;
}
.hero-label {
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 0.58rem; font-weight: 400;
  letter-spacing: 0.3em; color: var(--gold); text-transform: uppercase; opacity: 0.85;
  white-space: nowrap;
}
.hero-wordmark {
  font-family: var(--font-serif); font-size: clamp(2.5rem, 16vw, 11rem);
  font-weight: 300; letter-spacing: 0.25em; color: var(--off-white); line-height: 1;
  margin-bottom: 1.5rem; text-indent: 0.25em;
}
.hero-tagline {
  font-family: var(--font-sans); font-size: 0.75rem; font-weight: 300;
  letter-spacing: 0.18em; color: var(--off-white); opacity: 0.55;
}
.hero-disclaimer {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  font-family: var(--font-sans); font-size: 0.58rem; font-weight: 300;
  letter-spacing: 0.16em; color: var(--off-white); opacity: 0.35;
  text-transform: uppercase; white-space: nowrap; z-index: 10;
}

/* ===== INTRO ===== */
#intro { background: var(--black); padding: 8rem 2rem; display: flex; justify-content: center; }
.intro-inner { max-width: 660px; text-align: center; }
.manifesto {
  font-family: var(--font-serif); font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 300; line-height: 1.9; color: var(--off-white); opacity: 0.85;
}

/* ===== CATALOG (cream section - deliberately breaks from the black/gold rest of
   the page for legibility and to visually separate "browse & buy" from "brand story") ===== */
#catalog { background: var(--cream); padding: 5rem 2rem 7rem; border-top: 1px solid var(--line); }
.catalog-inner { max-width: 1200px; margin: 0 auto; }
.section-header { display: flex; align-items: center; gap: 2rem; margin-bottom: 3.5rem; }
.section-label {
  font-family: var(--font-sans); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.25em; color: var(--gold-dark); text-transform: uppercase; white-space: nowrap;
}
.section-line { flex: 1; height: 1px; background: var(--cream-line); }
.cat-heading {
  font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.2em;
  color: var(--ink); opacity: 0.5; text-transform: uppercase; margin: 2.5rem 0 1rem;
}

.compound-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.compound-card {
  position: relative; background: var(--cream-card); border: 1px solid var(--cream-line);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column; min-height: 240px;
  transition: box-shadow 0.3s, border-color 0.3s;
}
.compound-card:hover { border-color: var(--gold-dark); box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
.compound-card.highlight { animation: cardGlow 2.2s ease-in-out infinite; border-color: var(--gold-dark); }
@keyframes cardGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(201,169,97,0); }
  50% { box-shadow: 0 0 26px rgba(201,169,97,0.65); }
}
.badge-bestseller {
  display: inline-block;
  background: linear-gradient(90deg, #7a5800 0%, #a07820 50%, #7a5800 100%);
  background-size: 200% auto;
  color: #f5e6b8;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 3px;
  margin-bottom: 6px;
  animation: bestsellerShine 2.4s linear infinite, bestsellerPulse 2.4s ease-in-out infinite;
}
@keyframes bestsellerShine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
@keyframes bestsellerPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(120,90,0,0.45), 0 0 2px rgba(120,90,0,0.2); }
  50%       { box-shadow: 0 0 12px rgba(120,90,0,0.8), 0 0 4px rgba(120,90,0,0.4); }
}
.price-was { font-size: 0.78em; font-weight: 400; color: #aaa; text-decoration: line-through; margin-left: 9px; vertical-align: middle; }
.compound-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 400; color: var(--ink); margin-bottom: 0.5rem; }
.compound-spec { font-family: var(--font-sans); font-size: 0.68rem; color: var(--ink); opacity: 0.55; margin-bottom: auto; padding-bottom: 1rem; }
.compound-price { font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700; color: var(--gold-strong); margin: 0.6rem 0 0.4rem; }
.compound-status { font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.8rem; font-weight: 500; }
.status-low { color: #a5680f; }
.status-soon, .status-sold { color: var(--ink); opacity: 0.45; }
.back-desc { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.7; color: var(--ink); opacity: 0.65; margin-bottom: 1rem; }

.buy-row { display: flex; gap: 8px; margin-top: 0.8rem; }
.qty-box {
  width: 56px; background: #fff; border: 1px solid var(--cream-line); color: var(--ink);
  font-family: var(--font-sans); font-size: 0.8rem; text-align: center; padding: 8px 4px;
}
.btn-gold {
  flex: 1; background: var(--gold-dark); border: 1px solid var(--gold-dark); color: #fff;
  font-family: var(--font-sans); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 10px 10px; cursor: pointer; transition: opacity 0.3s;
}
.btn-gold:hover { opacity: 0.85; }
.btn-gold-solid {
  background: var(--gold); border: 1px solid var(--gold); color: var(--black);
  font-family: var(--font-sans); font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 12px 20px; cursor: pointer; text-align: center; text-decoration: none; display: inline-block;
  transition: opacity 0.3s;
}
.btn-gold-solid:hover { opacity: 0.85; }
.btn-outline {
  background: transparent; border: 1px solid var(--line-mid); color: var(--off-white); opacity: 0.7;
  font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn-outline:hover { opacity: 1; border-color: var(--gold); color: var(--gold); }
#catalog .btn-outline, .cream-section .btn-outline { border-color: var(--gold-dark); color: var(--gold-dark); opacity: 0.85; }
#catalog .btn-outline:hover, .cream-section .btn-outline:hover { opacity: 1; background: var(--gold-dark); color: #fff; }
#catalog .btn-outline {
  width: 100%; text-align: center;
  /* A little more presence than a plain outline so people notice it's clickable
     too - but still clearly secondary to the solid "Dodaj u košaricu" button. */
  background: rgba(154, 123, 46, 0.1);
  font-weight: 600;
}

/* ===== QUALITY ===== */
#quality { background: var(--black); padding: 7rem 2rem; border-top: 1px solid var(--line); }
.quality-inner { max-width: 1100px; margin: 0 auto; }
.quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.5rem; }
.quality-title { font-family: var(--font-serif); font-size: 1.15rem; color: var(--off-white); margin-bottom: 1rem; }
.quality-text { font-family: var(--font-sans); font-size: 0.75rem; line-height: 1.8; color: var(--off-white); opacity: 0.45; }

/* ===== PRODUCT DETAIL (standalone page, black background - not part of #catalog) ===== */
.pd-price { font-family: var(--font-serif); font-size: 1.8rem; color: var(--gold); }
.pd-status { font-family: var(--font-sans); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; }
.pd-status-low { color: #d4a94a; }
.pd-status-muted { color: var(--off-white); opacity: 0.45; }
.pd-qty-box {
  width: 64px; background: transparent; border: 1px solid var(--line-mid); color: var(--off-white);
  font-family: var(--font-sans); font-size: 0.85rem; text-align: center; padding: 10px 6px;
}

/* ===== FORMS (checkout / cart) ===== */
.page-section { max-width: 1100px; margin: 0 auto; padding: 8rem 2rem 6rem; }

/* Bounded cream band (same pattern as #catalog) - wraps ONLY the specific page's main
   content, not the whole <body>. This is deliberate: the fixed topbar, the disclaimer
   bar, and the footer all keep their own explicit dark backgrounds regardless of this,
   and on short pages there's no cream "leaking" past the wrapped content since this
   sizes to its content via padding, not a full-viewport background. */
.cream-section { background: var(--cream); color: var(--ink); padding: 8rem 0 6rem; }
.cream-section .page-section { padding: 0 2rem; }
.cream-section .form-label { color: var(--ink); opacity: 0.85; font-size: 0.68rem; font-weight: 600; }
.cream-section .form-input { color: var(--ink); font-weight: 600; font-size: 0.95rem; border-bottom-color: #8a7a54; }
.cream-section .form-input::placeholder { color: var(--ink); opacity: 0.4; }
.cream-section .consent-box { background: var(--cream-card); border-color: var(--cream-line); }
.cream-section .consent-box label { color: var(--ink); opacity: 0.85; }
.cream-section .summary-box { background: var(--cream-card); border-color: var(--cream-line); }
.cream-section .summary-row { border-bottom-color: var(--cream-line); color: var(--ink); }
.cream-section .summary-total { color: var(--gold-strong); font-weight: 700; border-top-color: var(--cream-line); }
.cream-section label { color: var(--ink); }
.cream-section .summary-total .rt-label, .cream-section .summary-title { color: var(--ink); }
.cream-section table.simple th { color: var(--gold-dark); }
.cream-section table.simple td { color: var(--ink); border-bottom-color: var(--cream-line); }
.cream-section h2, .cream-section h3 { color: var(--ink); }
.form-label {
  display: block; font-family: var(--font-sans); font-size: 0.55rem; font-weight: 400;
  letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; opacity: 0.8; margin-bottom: 0.5rem;
}
.form-input {
  background: transparent; border: none; border-bottom: 1px solid var(--line-mid);
  color: var(--off-white); font-family: var(--font-sans); font-size: 0.85rem; font-weight: 300;
  padding: 0.7rem 0; outline: none; width: 100%;
}
.form-input:focus { border-color: var(--gold); }
.field-gap { height: 1.6rem; }

.consent-box {
  margin: 1.6rem 0; padding: 1rem 1.2rem; border: 1px solid var(--line-mid); background: var(--soft-black);
}
.consent-box label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.72rem; color: var(--off-white); opacity: 0.6; line-height: 1.6; }

.flash-msg {
  border: 1px solid var(--danger); color: var(--danger); padding: 10px 16px; margin-bottom: 1.5rem; font-size: 0.8rem;
}
.flash-msg.ok { border-color: var(--success); color: var(--success); }

.summary-box { border: 1px solid var(--line); padding: 1.8rem; background: var(--soft-black); }
.summary-title { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 1.2rem; }
.summary-row { display: flex; justify-content: space-between; font-size: 0.8rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); opacity: 0.85; }
.summary-total { display: flex; justify-content: space-between; font-family: var(--font-serif); font-size: 1.4rem; color: var(--gold); margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-mid); }

table.simple { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
table.simple th { text-align: left; font-family: var(--font-sans); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); opacity: 0.7; padding: 10px 0; border-bottom: 1px solid var(--line); }
table.simple td { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; }

/* ===== FOOTER ===== */
#footer { background: var(--black); padding: 4rem 2rem 3rem; border-top: 1px solid var(--line); }
.footer-inner { max-width: 1100px; margin: 0 auto; }
.footer-legal { font-family: var(--font-sans); font-size: 0.65rem; line-height: 1.9; color: var(--off-white); opacity: 0.3; max-width: 820px; margin-bottom: 2rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 1.8rem; }
.footer-wordmark { font-family: var(--font-serif); font-size: 0.9rem; letter-spacing: 0.2em; color: var(--off-white); opacity: 0.3; }
.staff-login-link { font-family: var(--font-sans); font-size: 0.55rem; letter-spacing: 0.1em; color: var(--off-white); opacity: 0.15; text-decoration: none; text-transform: uppercase; }
.staff-login-link:hover { opacity: 0.5; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .compound-grid { grid-template-columns: 1fr; }
  .quality-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .topbar { padding: 16px 20px; }
  #hero { height: 100vh; }
}