/* ---------- TOKENS ---------- */
:root {
  --moss-deepest: #0c1a11;
  --moss-deep:    #122418;
  --moss:         #1a2e22;
  --moss-soft:    #243d2e;
  --moss-warm:    #2f4a38;

  --cream:        #f3e7cd;
  --cream-soft:   #e7d8b6;
  --cream-mute:   rgba(243, 231, 205, 0.72);
  --cream-dim:    rgba(243, 231, 205, 0.48);

  --gold:         #c9a86a;
  --gold-light:   #e0c285;
  --gold-deep:    #a88747;

  --paper:        #f6efe0;
  --ink:          #1a2e22;

  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Outfit", system-ui, -apple-system, sans-serif;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 60px -30px rgba(0,0,0,0.5);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- A11Y: viditelný focus-ring globálně (ADR-0016) ---------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--moss-deepest);
  color: var(--cream);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold); color: var(--moss-deepest); }

/* ---------- LAYOUT PRIMITIVES ---------- */
.wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--gold);
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: -0.01em;
  line-height: 1.05;
  font-feature-settings: "ss01" 1;
}
h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
}
h3 {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  font-variation-settings: "opsz" 36;
}
p { text-wrap: pretty; }
.lead {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--cream-mute);
  max-width: 56ch;
  line-height: 1.7;
}

/* ---------- NAVIGATION ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 1.25rem 0;
  transition: backdrop-filter 0.3s, background-color 0.3s, padding 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(12, 26, 17, 0.78);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  padding: 0.75rem 0;
  border-bottom-color: rgba(201, 168, 106, 0.12);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.logo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.4rem;
  font-variation-settings: "opsz" 36;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  color: var(--cream);
}
.logo .accent { color: var(--gold); font-style: italic; }
.logo .dot { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--cream-mute);
  transition: color 0.2s;
  position: relative;
  padding-bottom: 2px;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.3s var(--ease-out);
}
.nav-links a:hover { color: var(--cream); }
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--cream);
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.nav-cta:hover { background: var(--gold); color: var(--moss-deepest); }

.hamburger {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  position: relative;
  z-index: 60;
}
.hamburger span {
  display: block;
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  height: 1.5px;
  background: var(--cream);
  transition: transform 0.3s var(--ease-out), opacity 0.2s;
}
.hamburger span:nth-child(1) { top: 0.85rem; }
.hamburger span:nth-child(2) { top: 1.2rem; }
.hamburger span:nth-child(3) { top: 1.55rem; }
.hamburger.is-open span:nth-child(1) { transform: translateY(0.35rem) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-0.35rem) rotate(-45deg); }

/* ---------- HERO (scroll-scrubbed video) ---------- */
.hero {
  position: relative;
  height: 250vh; /* scroll length over which video scrubs */
}
.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--moss-deepest);
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  background:
    radial-gradient(ellipse at 30% 40%, var(--moss-warm), var(--moss-deepest) 70%);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12,26,17,0.35) 0%, rgba(12,26,17,0) 30%, rgba(12,26,17,0.15) 55%, rgba(12,26,17,0.85) 100%),
    radial-gradient(ellipse at 60% 20%, rgba(12,26,17,0) 30%, rgba(12,26,17,0.45) 100%);
  transition: background 0.4s var(--ease-out);
}
/* Video mode: stronger bottom-left scrim so text stays legible over moving footage */
body[data-hero="video"] .hero-overlay {
  background:
    linear-gradient(180deg, rgba(12,26,17,0.45) 0%, rgba(12,26,17,0.05) 28%, rgba(12,26,17,0.35) 55%, rgba(12,26,17,0.95) 100%),
    radial-gradient(ellipse 90% 70% at 20% 95%, rgba(12,26,17,0.85) 0%, rgba(12,26,17,0.55) 35%, rgba(12,26,17,0) 70%),
    radial-gradient(ellipse at 60% 20%, rgba(12,26,17,0) 30%, rgba(12,26,17,0.45) 100%);
}
body[data-hero="video"] .hero-text h1,
body[data-hero="video"] .hero-text .lead,
body[data-hero="video"] .hero-text .eyebrow {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}
.hero-content {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: end;
  padding: 6rem 0 3rem;
}
.hero-content > .wrap { display: contents; }
.hero-text {
  grid-row: 2;
  max-width: 920px;
}
.hero-text .eyebrow {
  margin-bottom: 1.5rem;
  color: var(--gold-light);
}
.hero-text h1 {
  font-size: clamp(2.75rem, 7.5vw, 6.5rem);
  font-variation-settings: "opsz" 144;
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 0.98;
  margin-bottom: 1.25rem;
  text-wrap: balance;
}
.hero-text h1 em {
  font-style: italic;
  color: var(--gold-light);
  font-weight: 400;
}
.hero-text .lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--cream);
  margin-bottom: 2.5rem;
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-variation-settings: "opsz" 72;
  line-height: 1.4;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* CTA buttons */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform 0.3s var(--ease-out), background 0.25s, color 0.25s, border-color 0.25s;
  border: 1px solid transparent;
}
.cta svg { width: 1rem; height: 1rem; }
.cta-primary {
  background: var(--gold);
  color: var(--moss-deepest);
}
.cta-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.cta-secondary {
  border-color: var(--cream-dim);
  color: var(--cream);
  background: rgba(243, 231, 205, 0.04);
  backdrop-filter: blur(8px);
}
.cta-secondary:hover { border-color: var(--gold); color: var(--gold-light); transform: translateY(-2px); }

.hero-meta {
  grid-row: 3;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(243, 231, 205, 0.15);
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem 3rem;
  align-items: center;
}
.meta-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.85rem;
  color: var(--cream-mute);
}
.meta-item .ico {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid rgba(201, 168, 106, 0.4);
  border-radius: 50%;
  color: var(--gold-light);
}
.meta-item .ico svg { width: 0.95rem; height: 0.95rem; }
.meta-item strong {
  display: block;
  color: var(--cream);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}
.meta-item small { color: var(--cream-dim); font-size: 0.78rem; }
.meta-item strong a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, var(--gold-light) 40%, transparent);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.meta-item strong a:hover {
  color: var(--gold-light);
  border-bottom-color: var(--gold-light);
}

.scroll-indicator {
  position: absolute;
  bottom: 10rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream-dim);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity 0.3s;
}
.scroll-indicator::after {
  content: "";
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.5; }
  50%      { transform: scaleY(1);   transform-origin: top; opacity: 1; }
}

/* ---------- SECTION CHROME ---------- */
.section {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0;
}
.section-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 60ch;
}
.section-head.with-aside {
  grid-template-columns: 1fr auto;
  max-width: none;
  align-items: end;
  gap: 2rem;
}
.section-head h2 em { color: var(--gold-light); font-style: italic; }
.section-head .lead { margin-top: 0.25rem; }
.section-head-aside { color: var(--cream-mute); font-size: 0.9rem; max-width: 28ch; }

/* ---------- REVEAL ANIMATIONS ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.reveal-stagger.is-in > * { opacity: 1; transform: translateY(0); }
.reveal-stagger.is-in > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay: 0.55s; }

/* ---------- NOVINKY ---------- */
.novinky { background: var(--moss-deep); }
.novinky-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.news-card {
  position: relative;
  background: linear-gradient(160deg, var(--moss-soft), var(--moss));
  border: 1px solid rgba(201, 168, 106, 0.12);
  border-radius: 22px;
  padding: 2rem;
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), border-color 0.4s;
}
.news-card:hover { transform: translateY(-4px); border-color: rgba(201, 168, 106, 0.3); }
.news-card .badge {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(201, 168, 106, 0.4);
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.news-card h3 {
  font-variation-settings: "opsz" 48;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}
.news-card p { color: var(--cream-mute); font-size: 0.95rem; }
.news-card .news-art {
  position: absolute;
  right: -1rem;
  bottom: -1.5rem;
  width: 8rem;
  height: 8rem;
  opacity: 0.18;
  color: var(--gold-light);
  pointer-events: none;
}

/* ---------- O NÁS ---------- */
.about {
  background: var(--moss-deepest);
}
.about-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
.about-copy h2 { margin-bottom: 1.75rem; }
.about-copy p { color: var(--cream-mute); margin-bottom: 1.25rem; font-size: 1rem; }
.about-copy p strong { color: var(--cream); font-weight: 500; }
.about-pull {
  margin-top: 2.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--gold);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.4;
  color: var(--cream);
  font-variation-settings: "opsz" 60;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 6rem;
  gap: 0.75rem;
}
.gallery .ph {
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.gallery .ph:nth-child(1) { grid-column: 1 / span 4; grid-row: span 3; }
.gallery .ph:nth-child(2) { grid-column: 5 / span 2; grid-row: span 2; }
.gallery .ph:nth-child(3) { grid-column: 5 / span 2; grid-row: span 1; }
.gallery .ph:nth-child(4) { grid-column: 1 / span 2; grid-row: span 2; }
.gallery .ph:nth-child(5) { grid-column: 3 / span 2; grid-row: span 2; }
.gallery .ph:nth-child(6) { grid-column: 5 / span 2; grid-row: span 2; }

/* placeholder visual system */
.ph {
  position: relative;
  background: linear-gradient(140deg, var(--moss-soft) 0%, var(--moss-deep) 100%);
  isolation: isolate;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 70% 30%, rgba(201, 168, 106, 0.08), transparent 60%),
    radial-gradient(circle at 20% 80%, rgba(47, 74, 56, 0.6), transparent 60%);
  z-index: 1;
}
.ph svg.leaf {
  position: absolute;
  inset: auto auto -10% -10%;
  width: 80%;
  height: 120%;
  color: rgba(243, 231, 205, 0.08);
  z-index: 2;
}
.ph-label {
  position: absolute;
  left: 0.85rem;
  bottom: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(243, 231, 205, 0.55);
  z-index: 3;
  font-weight: 500;
}
.ph-label::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 1px;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 0.45rem;
}

/* leaf color variants for visual variety — auto dle pozice (kolekce renderuje
   jednotné .ph z template, takže variace nesmí stát na ručních třídách) */
.ph.warm,
.gallery .ph:nth-child(3) { background: linear-gradient(140deg, #3a3220 0%, #1a1610 100%); }
.ph.warm svg.leaf,
.gallery .ph:nth-child(3) svg.leaf { color: rgba(224, 194, 133, 0.1); }
.ph.deep,
.gallery .ph:nth-child(1),
.gallery .ph:nth-child(6) { background: linear-gradient(140deg, var(--moss) 0%, var(--moss-deepest) 100%); }
.ph.light,
.gallery .ph:nth-child(4) { background: linear-gradient(140deg, var(--moss-warm) 0%, var(--moss-soft) 100%); }

/* ---------- PROČ REMONSTERA ---------- */
.proc { background: linear-gradient(180deg, var(--moss-deepest) 0%, var(--moss-deep) 100%); }
.proc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(201, 168, 106, 0.12);
  border: 1px solid rgba(201, 168, 106, 0.12);
  border-radius: 24px;
  overflow: hidden;
}
.proc-tile {
  background: var(--moss-deep);
  padding: 2.5rem 2rem;
  transition: background 0.4s;
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.proc-tile:hover { background: var(--moss-soft); }
.proc-tile .num {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 0.95rem;
  font-weight: 400;
  font-variation-settings: "opsz" 36;
  opacity: 0.7;
}
.proc-tile .ico {
  width: 2.5rem; height: 2.5rem;
  color: var(--gold-light);
  margin-bottom: 1.5rem;
}
.proc-tile h3 {
  font-variation-settings: "opsz" 48;
  margin-bottom: 0.6rem;
}
.proc-tile p { color: var(--cream-mute); font-size: 0.92rem; line-height: 1.6; }
.proc-tile-body { display: flex; flex-direction: column; gap: 0; }

/* ---------- NABÍDKA ---------- */
.nabidka { background: var(--paper); color: var(--ink); }
.nabidka h2 { color: var(--moss-deepest); }
.nabidka h2 em { color: var(--gold-deep); }
.nabidka .eyebrow { color: var(--gold-deep); }
.nabidka .eyebrow::before { background: var(--gold-deep); }
.nabidka .lead { color: rgba(26, 46, 34, 0.7); }

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.menu-card {
  background: #fff;
  border: 1px solid rgba(26, 46, 34, 0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: transform 0.5s var(--ease-out), box-shadow 0.4s, border-color 0.3s;
}
.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 36px 60px -30px rgba(26, 46, 34, 0.4);
  border-color: rgba(201, 168, 106, 0.4);
}
.menu-card:hover .menu-img svg.leaf {
  color: rgba(243, 231, 205, 0.22);
  transform: scale(1.05) rotate(-2deg);
}
.menu-img svg.leaf {
  transition: transform 0.6s var(--ease-out), color 0.4s;
  transform-origin: center;
}
.menu-card:hover .menu-card-cta {
  color: var(--gold-deep);
  gap: 0.85rem;
}
.menu-card:hover .menu-card-cta svg {
  transform: translateX(4px);
}
.menu-card-cta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(26, 46, 34, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  transition: color 0.25s, gap 0.3s var(--ease-out);
}
.menu-card-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s var(--ease-out);
}
.menu-card .menu-img {
  aspect-ratio: 4 / 3;
  background: linear-gradient(140deg, var(--moss-soft), var(--moss-deepest));
  position: relative;
  overflow: hidden;
}
.menu-card .menu-img svg.leaf { color: rgba(243, 231, 205, 0.12); }
.menu-card .menu-img .price-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--gold);
  color: var(--moss-deepest);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 3;
}
.menu-card-body { padding: 1.75rem; flex: 1; display: flex; flex-direction: column; }
.menu-card h3 {
  color: var(--moss-deepest);
  font-variation-settings: "opsz" 48;
  margin-bottom: 0.75rem;
}
.menu-card p { color: rgba(26, 46, 34, 0.7); font-size: 0.95rem; flex: 1; }
.menu-card ul {
  list-style: none;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(26, 46, 34, 0.15);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.menu-card li {
  font-size: 0.88rem;
  color: rgba(26, 46, 34, 0.85);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.menu-card li span:first-child::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  border-bottom: 1px dotted rgba(26, 46, 34, 0.3);
  flex: 1;
  margin: 0 0.5rem;
  min-width: 1rem;
}
.menu-card li span:last-child {
  color: var(--gold-deep);
  font-variation-settings: "opsz" 24;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  flex-shrink: 0;
}
.menu-card li {
  display: flex;
}
.menu-card li > span:first-child {
  display: flex;
  align-items: baseline;
  flex: 1;
}

.nabidka-callout {
  margin-top: 3rem;
  padding: 2rem 2.5rem;
  background: var(--moss-deepest);
  color: var(--cream);
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.nabidka-callout .ico {
  width: 3rem; height: 3rem;
  color: var(--gold-light);
  flex-shrink: 0;
}
.nabidka-callout .text { flex: 1; min-width: 16rem; }
.nabidka-callout h3 { font-variation-settings: "opsz" 48; margin-bottom: 0.35rem; color: var(--cream); font-size: 1.4rem; }
.nabidka-callout p { color: var(--cream-mute); font-size: 0.95rem; }
.nabidka-callout .cta { background: var(--gold); color: var(--moss-deepest); flex-shrink: 0; }

/* ---------- RECENZE ---------- */
.recenze { background: var(--moss-deep); }

/* Google summary badge above the grid */
.google-badge {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--moss);
  border: 1px solid rgba(201, 168, 106, 0.18);
  border-radius: 18px;
  padding: 1rem 1.4rem;
  margin: 1.5rem 0 2rem;
}
.google-badge .g-logo {
  width: 2rem; height: 2rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}
.google-badge .g-meta { flex: 1; min-width: 0; }
.google-badge .g-score {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream);
}
.google-badge .g-score strong {
  font-family: var(--serif);
  font-variation-settings: "opsz" 60;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
}
.google-badge .g-score .stars { display: inline-flex; gap: 0.15rem; color: var(--gold); }
.google-badge .g-score .stars svg { width: 1rem; height: 1rem; fill: currentColor; }
.google-badge .g-count {
  font-size: 0.85rem;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
  margin-left: 0.15rem;
}
.google-badge .g-sub {
  font-size: 0.85rem;
  color: var(--cream-dim);
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}
.google-badge .g-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--gold-light);
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.google-badge .g-cta svg { width: 0.9rem; height: 0.9rem; }
.google-badge .g-cta:hover {
  background: var(--gold);
  color: var(--moss-deepest);
  border-color: var(--gold);
}

.recenze-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.review {
  display: flex;
  flex-direction: column;
  background: var(--moss);
  border: 1px solid rgba(201, 168, 106, 0.1);
  border-radius: 22px;
  padding: 1.75rem 2rem 1.5rem;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease-out), border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
}
.review::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 100% 0%, rgba(66,133,244,0.06), transparent 55%);
  pointer-events: none;
}
.review:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 168, 106, 0.32);
  box-shadow: 0 18px 40px -25px rgba(0,0,0,0.55);
}
.review:hover .review-cta { color: var(--gold-light); gap: 0.65rem; }
.review:hover .review-cta::after { width: 1.6rem; }
.review:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.review-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}
.review-head .avatar {
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--avatar-bg, linear-gradient(135deg, var(--moss-warm), var(--moss-soft)));
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.review-meta { flex: 1; min-width: 0; }
.review-meta .name {
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--cream);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5rem;
}
.review-meta .local-guide {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--cream-dim);
  letter-spacing: 0.03em;
}
.review-meta .review-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.review-meta .stars { display: inline-flex; gap: 0.15rem; color: var(--gold); }
.review-meta .stars svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.review-meta .date {
  font-size: 0.78rem;
  color: var(--cream-mute);
}
.review .g-mark {
  width: 1.15rem; height: 1.15rem;
  flex-shrink: 0;
  opacity: 0.9;
  align-self: flex-start;
  margin-top: 0.2rem;
}

.review blockquote {
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 60;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--cream);
  margin: 0 0 1.25rem;
  font-style: italic;
  position: relative;
  padding-left: 0.95rem;
}
.review blockquote::before {
  content: "\201C";
  font-size: 2.6rem;
  color: var(--gold);
  position: absolute;
  left: -0.15rem;
  top: -0.4rem;
  font-family: var(--serif);
  line-height: 1;
  opacity: 0.4;
}
.review-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 0.25s var(--ease-out), gap 0.25s var(--ease-out);
}
.review-cta svg { width: 0.85rem; height: 0.85rem; }
.review-cta::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  transition: width 0.25s var(--ease-out);
  opacity: 0.6;
}

/* ---------- KONTAKT ---------- */
.kontakt { background: var(--moss-deepest); }
.kontakt-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 2rem;
  align-items: stretch;
}
.kontakt-info {
  background: var(--moss-deep);
  border: 1px solid rgba(201, 168, 106, 0.12);
  border-radius: 22px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.kontakt-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.kontakt-row .ico {
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.4);
  display: grid; place-items: center;
  color: var(--gold-light);
  flex-shrink: 0;
  margin-top: 2px;
}
.kontakt-row .ico svg { width: 0.95rem; height: 0.95rem; }
.kontakt-row .label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 0.25rem;
}
.kontakt-row .value {
  font-size: 0.98rem;
  color: var(--cream);
  line-height: 1.45;
}
.kontakt-row .value a { transition: color 0.2s; }
.kontakt-row .value a:hover { color: var(--gold-light); }
.kontakt-row .small { font-size: 0.85rem; color: var(--cream-mute); margin-top: 0.15rem; }

.kontakt-social {
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(201, 168, 106, 0.12);
}
.kontakt-social a {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.3);
  display: grid; place-items: center;
  color: var(--cream);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.kontakt-social a svg { width: 1rem; height: 1rem; }
.kontakt-social a:hover { background: var(--gold); color: var(--moss-deepest); border-color: var(--gold); }

.kontakt-map {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(201, 168, 106, 0.12);
  background: var(--moss-deep);
  position: relative;
  min-height: 28rem;
  isolation: isolate;
}

/* Stack the iframe layer and the photo layer; cross-fade them. */
.map-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s var(--ease-out);
  z-index: 1;
}
.map-layer.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.map-layer-widget {
  background: linear-gradient(135deg, var(--moss-deep) 0%, var(--moss-deepest) 100%);
}
.map-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Slightly desaturated so the embed matches the moss palette. */
  filter: saturate(0.85) contrast(1.02);
}

.map-layer-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.06);
  transition: transform 12s linear;
}
.map-layer-photo.is-active img { transform: scale(1); }
.map-photo-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 80%, rgba(201,168,106,0.08), transparent 55%),
    linear-gradient(180deg, rgba(8,18,12,0.05) 0%, rgba(8,18,12,0.45) 100%);
  pointer-events: none;
}

.map-note {
  position: absolute;
  left: 1.25rem; bottom: 1.25rem;
  z-index: 5;
  background: rgba(12, 26, 17, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 106, 0.28);
  padding: 0.65rem 0.95rem;
  border-radius: 14px;
  color: var(--cream);
  font-size: 0.82rem;
  text-decoration: none;
  display: flex;
  gap: 0.55rem;
  align-items: center;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out);
}
.map-note .ico { color: var(--gold-light); width: 1rem; height: 1rem; }
.map-note .ext { width: 0.85rem; height: 0.85rem; color: var(--gold-light); opacity: 0.8; }
.map-note:hover {
  background: var(--gold);
  color: var(--moss-deepest);
  border-color: var(--gold);
  transform: translateY(-2px);
}
.map-note:hover .ico,
.map-note:hover .ext { color: var(--moss-deepest); }

/* Layer toggle — clickable pill with two dots so users see/choose the layer. */
.map-toggle {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: rgba(12, 26, 17, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 168, 106, 0.22);
  border-radius: 999px;
}
.map-toggle .map-dot {
  width: 0.55rem; height: 0.55rem;
  border-radius: 50%;
  background: rgba(243, 231, 205, 0.32);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.map-toggle .map-dot:hover { background: rgba(243, 231, 205, 0.55); }
.map-toggle .map-dot.is-active { background: var(--gold); transform: scale(1.25); }
.map-note .ico { color: var(--gold-light); width: 1rem; height: 1rem; }

/* ---------- FAQ ---------- */
.faq { background: var(--moss-deepest); }
.faq-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.faq-item {
  border-bottom: 1px solid rgba(243, 231, 205, 0.1);
  padding: 0.5rem 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 1.4rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-family: var(--serif);
  font-variation-settings: "opsz" 36;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--cream);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-light); }
.faq-item .toggle {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border: 1px solid rgba(201, 168, 106, 0.4);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--gold-light);
  transition: transform 0.4s var(--ease-out), background 0.3s;
}
.faq-item .toggle::before, .faq-item .toggle::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform 0.4s var(--ease-out);
}
.faq-item .toggle::before { width: 0.7rem; height: 1px; }
.faq-item .toggle::after { width: 1px; height: 0.7rem; }
.faq-item[open] .toggle { background: var(--gold); color: var(--moss-deepest); border-color: var(--gold); }
.faq-item[open] .toggle::after { transform: scaleY(0); }
.faq-item .answer {
  padding-bottom: 1.5rem;
  padding-right: 3rem;
  color: var(--cream-mute);
  font-size: 0.98rem;
  line-height: 1.65;
  animation: faqOpen 0.45s var(--ease-out);
}
@keyframes faqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- FOOTER ---------- */
.footer {
  background: var(--moss-deepest);
  padding: 3rem 0 2rem;
  border-top: 1px solid rgba(201, 168, 106, 0.12);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  color: var(--cream-dim);
  font-size: 0.82rem;
}
.footer .logo { font-size: 1.1rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a:hover { color: var(--gold-light); }

/* ---------- MOBILE ---------- */
/* mobile menu — hidden on desktop, slides in on mobile */
.mobile-menu {
  display: none;
}

@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: block; }

  .mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--moss-deepest);
    z-index: 55;
    padding: 6rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transform: translateY(-100%);
    transition: transform 0.45s var(--ease-out);
    overflow-y: auto;
  }
  .mobile-menu.is-open { transform: translateY(0); }
  .mobile-menu a {
    font-family: var(--serif);
    font-size: 2rem;
    font-variation-settings: "opsz" 72;
    color: var(--cream);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(243, 231, 205, 0.08);
  }
  .mobile-menu a:last-child { border: none; margin-top: 1.5rem; }
  .mobile-menu .cta { align-self: flex-start; margin-top: 1rem; font-family: var(--sans); font-size: 0.9rem; }

  .novinky-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .gallery {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 5rem;
  }
  .gallery .ph:nth-child(1) { grid-column: 1 / span 4; grid-row: span 3; }
  .gallery .ph:nth-child(2) { grid-column: 1 / span 2; grid-row: span 2; }
  .gallery .ph:nth-child(3) { grid-column: 3 / span 2; grid-row: span 2; }
  .gallery .ph:nth-child(4) { grid-column: 1 / span 2; grid-row: span 2; }
  .gallery .ph:nth-child(5) { grid-column: 3 / span 2; grid-row: span 2; }
  .gallery .ph:nth-child(6) { grid-column: 1 / span 4; grid-row: span 2; }

  .proc-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-grid { grid-template-columns: 1fr; }
  .recenze-grid { grid-template-columns: 1fr; }
  .kontakt-grid, .faq-grid { grid-template-columns: 1fr; }
  .section-head.with-aside { grid-template-columns: 1fr; align-items: start; }

  .hero { height: 200vh; }
  .hero-text h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
  .hero-meta { gap: 1.5rem; }
  .meta-item { font-size: 0.78rem; }
  .meta-item strong { font-size: 0.85rem; }
  .scroll-indicator { display: none; }

  .nabidka-callout { padding: 1.5rem; }
  .review { padding: 1.5rem 1.5rem 1.25rem; }
  .google-badge {
    flex-wrap: wrap;
    gap: 0.85rem 1rem;
    padding: 1rem 1.1rem;
  }
  .google-badge .g-cta { margin-left: auto; }
}

@media (max-width: 560px) {
  .proc-grid { grid-template-columns: 1fr; }
  .cta { width: 100%; justify-content: center; }
  .hero-text .lead { font-size: 1.05rem; }
}

/* ============================================================
   VIEW MODE — simulate mobile viewport on desktop
   ============================================================ */
/* When mobile mode is on, constrain the document to a phone-sized
   column centered on a darker surround, and force the mobile rules
   to apply regardless of actual viewport width. */
body[data-view="mobile"] {
  --mobile-w: 420px;
  background: #050a07;
  padding: 1.5rem 0;
  min-height: 100vh;
}
body[data-view="mobile"] > section,
body[data-view="mobile"] > footer {
  max-width: var(--mobile-w);
  margin-left: auto;
  margin-right: auto;
}
body[data-view="mobile"] .nav {
  left: 50%;
  right: auto;
  width: var(--mobile-w);
  transform: translateX(-50%);
}
body[data-view="mobile"] .mobile-menu {
  inset: auto;
  top: 0;
  left: 50%;
  right: auto;
  height: 100vh;
  width: var(--mobile-w);
  transform: translateX(-50%) translateY(-100%);
}
body[data-view="mobile"] .mobile-menu.is-open {
  transform: translateX(-50%) translateY(0);
}
/* phone bezel — fixed frame around the simulated viewport */
body[data-view="mobile"]::before {
  content: "";
  position: fixed;
  top: 1rem;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--mobile-w) + 16px);
  border-radius: 36px;
  border: 8px solid #0a1410;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(201,168,106,0.15);
  pointer-events: none;
  z-index: 200;
}
body[data-view="mobile"] section.hero {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  overflow: hidden;
}
body[data-view="mobile"] > footer {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
}

/* Force mobile-layout rules to fire on demand (mirrors @media (max-width: 960px)) */
body[data-view="mobile"] .nav-links,
body[data-view="mobile"] .nav-cta { display: none; }
body[data-view="mobile"] .hamburger { display: block; }
body[data-view="mobile"] .mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 6rem 2rem 2rem;
  background: var(--moss-deepest);
  z-index: 55;
  transform: translateX(-50%) translateY(-100%);
  transition: transform 0.45s var(--ease-out);
  overflow-y: auto;
}
body[data-view="mobile"] .mobile-menu.is-open { transform: translateX(-50%) translateY(0); }
body[data-view="mobile"] .mobile-menu a {
  font-family: var(--serif);
  font-size: 2rem;
  font-variation-settings: "opsz" 72;
  color: var(--cream);
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(243, 231, 205, 0.08);
}
body[data-view="mobile"] .mobile-menu a:last-child { border: none; margin-top: 1.5rem; }
body[data-view="mobile"] .mobile-menu .cta {
  align-self: flex-start;
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
}
body[data-view="mobile"] .novinky-grid { grid-template-columns: 1fr; }
body[data-view="mobile"] .about-grid { grid-template-columns: 1fr; }
body[data-view="mobile"] .gallery {
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 5rem;
}
body[data-view="mobile"] .gallery .ph:nth-child(1) { grid-column: 1 / span 4; grid-row: span 3; }
body[data-view="mobile"] .gallery .ph:nth-child(2) { grid-column: 1 / span 2; grid-row: span 2; }
body[data-view="mobile"] .gallery .ph:nth-child(3) { grid-column: 3 / span 2; grid-row: span 2; }
body[data-view="mobile"] .gallery .ph:nth-child(4) { grid-column: 1 / span 2; grid-row: span 2; }
body[data-view="mobile"] .gallery .ph:nth-child(5) { grid-column: 3 / span 2; grid-row: span 2; }
body[data-view="mobile"] .gallery .ph:nth-child(6) { grid-column: 1 / span 4; grid-row: span 2; }
body[data-view="mobile"] .proc-grid { grid-template-columns: 1fr; }
body[data-view="mobile"] .menu-grid { grid-template-columns: 1fr; }
body[data-view="mobile"] .recenze-grid { grid-template-columns: 1fr; }
body[data-view="mobile"] .kontakt-grid,
body[data-view="mobile"] .faq-grid { grid-template-columns: 1fr; }
body[data-view="mobile"] .section-head.with-aside {
  grid-template-columns: 1fr;
  align-items: start;
}
body[data-view="mobile"] .hero { height: 200vh; }
body[data-view="mobile"] .hero-text h1 { font-size: clamp(2.25rem, 9vw, 3rem); }
body[data-view="mobile"] .hero-meta { gap: 1.25rem; }
body[data-view="mobile"] .meta-item { font-size: 0.78rem; }
body[data-view="mobile"] .meta-item strong { font-size: 0.85rem; }
body[data-view="mobile"] .scroll-indicator { display: none; }
body[data-view="mobile"] .nabidka-callout { padding: 1.5rem; }
body[data-view="mobile"] .review { padding: 1.5rem 1.5rem 1.25rem; }
body[data-view="mobile"] .google-badge {
  flex-wrap: wrap;
  gap: 0.85rem 1rem;
  padding: 1rem 1.1rem;
}
body[data-view="mobile"] .google-badge .g-cta { margin-left: auto; }
body[data-view="mobile"] .cta { width: 100%; justify-content: center; }
body[data-view="mobile"] .hero-text .lead { font-size: 1rem; }
body[data-view="mobile"] .wrap { padding: 0 1.25rem; }
body[data-view="mobile"] .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001s !important; animation-duration: 0.001s !important; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   TWEAKS — visual variants togglable via panel
   ============================================================ */

/* ---- HERO MODE ---- */
/* default: video visible, static hidden */
.hero-static { display: none; }
body[data-hero="static"] .hero-video { display: none; }
body[data-hero="static"] .hero-static { display: block; }
body[data-hero="static"] .hero { height: 100vh; } /* no scroll-scrub needed */
body[data-hero="static"] .hero-sticky { position: relative; }

.hero-static {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(47,74,56,0.85), transparent 60%),
    radial-gradient(ellipse at 80% 75%, rgba(36,61,46,0.9), transparent 55%),
    linear-gradient(160deg, var(--moss-deep) 0%, var(--moss-deepest) 70%, #060e08 100%);
  overflow: hidden;
}
.hero-static::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.35) 100%),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 8px);
  pointer-events: none;
}
.hero-static .leaf-deco {
  position: absolute;
  color: var(--gold-light);
  opacity: 0.14;
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,0.3));
}
.hero-static .leaf-deco.l1 {
  top: -8%; left: -6%;
  width: 58vh; height: 58vh;
  transform: rotate(-18deg);
  color: var(--gold-light);
  opacity: 0.18;
}
.hero-static .leaf-deco.l2 {
  bottom: -12%; right: -8%;
  width: 70vh; height: 70vh;
  transform: rotate(165deg);
  color: var(--cream);
  opacity: 0.08;
}
.hero-static .leaf-deco.l3 {
  top: 8%; right: 12%;
  width: 22vh; height: 22vh;
  transform: rotate(35deg);
  color: var(--gold);
  opacity: 0.22;
}
.hero-static .leaf-deco.l4 {
  bottom: 14%; left: 18%;
  width: 18vh; height: 18vh;
  transform: rotate(-50deg);
  color: var(--gold-light);
  opacity: 0.18;
}
.hero-static .grain {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(243,231,205,0.04) 1px, transparent 0);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---- STATIC HERO: photo variant (first frame of video) ---- */
.hero-static-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
  background: var(--moss-deepest);
  pointer-events: none;
}
body[data-hero="static"][data-static-bg="image"] .hero-static-image { display: block; }
body[data-hero="static"][data-static-bg="image"] .hero-static { display: none; }
/* in image mode, lean on the video-style scrim for readability */
body[data-hero="static"][data-static-bg="image"] .hero-overlay {
  background:
    linear-gradient(180deg, rgba(12,26,17,0.45) 0%, rgba(12,26,17,0.05) 28%, rgba(12,26,17,0.35) 55%, rgba(12,26,17,0.95) 100%),
    radial-gradient(ellipse 90% 70% at 20% 95%, rgba(12,26,17,0.85) 0%, rgba(12,26,17,0.55) 35%, rgba(12,26,17,0) 70%),
    radial-gradient(ellipse at 60% 20%, rgba(12,26,17,0) 30%, rgba(12,26,17,0.45) 100%);
}
body[data-hero="static"][data-static-bg="image"] .hero-text h1,
body[data-hero="static"][data-static-bg="image"] .hero-text .lead,
body[data-hero="static"][data-static-bg="image"] .hero-text .eyebrow {
  text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.4);
}

/* ---- STATIC HERO: wind animation on the decorative leaves ---- */
body[data-hero="static"][data-static-bg="pattern"][data-static-anim="on"] .hero-static .leaf-deco {
  animation: leaf-wind 8s ease-in-out infinite;
  transform-origin: 50% 0%;
  will-change: transform;
}
body[data-hero="static"][data-static-bg="pattern"][data-static-anim="on"] .hero-static .leaf-deco.l1 {
  --rot-base: -18deg; animation-duration:  9s; animation-delay: -1s;
}
body[data-hero="static"][data-static-bg="pattern"][data-static-anim="on"] .hero-static .leaf-deco.l2 {
  --rot-base: 165deg; animation-duration: 12s; animation-delay: -4s;
}
body[data-hero="static"][data-static-bg="pattern"][data-static-anim="on"] .hero-static .leaf-deco.l3 {
  --rot-base:  35deg; animation-duration:  6s; animation-delay: -2s;
}
body[data-hero="static"][data-static-bg="pattern"][data-static-anim="on"] .hero-static .leaf-deco.l4 {
  --rot-base: -50deg; animation-duration:  7.5s; animation-delay: -3s;
}
@keyframes leaf-wind {
  0%, 100% { transform: rotate(var(--rot-base, 0deg)) translate(0, 0); }
  25%      { transform: rotate(calc(var(--rot-base, 0deg) + 2.4deg))  translate(8px, -5px); }
  50%      { transform: rotate(calc(var(--rot-base, 0deg) - 1.6deg))  translate(-5px, 3px); }
  75%      { transform: rotate(calc(var(--rot-base, 0deg) + 3.6deg))  translate(11px, -8px); }
}

/* ---- STATIC HERO: falling leaves ---- */
.falling-leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}
body[data-hero="static"][data-static-bg="pattern"][data-static-anim="on"] .falling-leaves { opacity: 1; }

.falling-leaf {
  position: absolute;
  top: -14vh;
  left: var(--x, 50%);
  width: var(--sz, 40px);
  height: var(--sz, 40px);
  animation: leaf-fall var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.falling-leaf > svg {
  display: block;
  width: 100%;
  height: 100%;
  color: var(--leaf-color, var(--gold-light));
  opacity: var(--op, 0.32);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
  animation: leaf-sway var(--sway-dur, 4s) ease-in-out var(--sway-delay, 0s) infinite alternate;
  will-change: transform;
  transform-origin: 50% 50%;
}
@keyframes leaf-fall {
  0%   { transform: translateY(0)     rotate(var(--rot, 0deg)); }
  100% { transform: translateY(135vh) rotate(calc(var(--rot, 0deg) + var(--spin, 360deg))); }
}
@keyframes leaf-sway {
  0%   { transform: translateX(-24px) rotate(-12deg); }
  100% { transform: translateX(24px)  rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .falling-leaf, .falling-leaf > svg,
  body[data-static-anim="on"] .hero-static .leaf-deco {
    animation: none !important;
  }
}

/* ---- PALETTE VARIANTS ---- */
body[data-palette="nocni"] {
  --moss-deepest: #060e08;
  --moss-deep:    #0a160d;
  --moss:         #122019;
  --moss-soft:    #1b2e23;
  --moss-warm:    #243a2c;
  --cream:        #efe4cb;
  --cream-soft:   #d9c89e;
  --gold:         #d4b070;
  --gold-light:   #ecd095;
  --gold-deep:    #b08c4d;
}
body[data-palette="sepia"] {
  --moss-deepest: #20180e;
  --moss-deep:    #2a2014;
  --moss:         #3a2c1c;
  --moss-soft:    #4a3a26;
  --moss-warm:    #5a4831;
  --cream:        #f6e8c8;
  --cream-soft:   #e6d3a6;
  --gold:         #d9a55a;
  --gold-light:   #ecc183;
  --gold-deep:    #a87a3a;
  --paper:        #f3e6cc;
}

/* ---- ACCENT VARIANTS (recolor gold tones) ---- */
body[data-accent="oliva"] {
  --gold:       #a8b266;
  --gold-light: #c4cf83;
  --gold-deep:  #7a8344;
}
body[data-accent="terakota"] {
  --gold:       #c97a55;
  --gold-light: #e09773;
  --gold-deep:  #9a5538;
}
body[data-accent="sage"] {
  --gold:       #8eb39a;
  --gold-light: #b4d2bd;
  --gold-deep:  #5e8772;
}

/* ---- HERO HEADING VARIANTS ---- */
/* default: ozdobny (already in place) */
body[data-heading="display"] .hero-text h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "opsz" 144;
  font-size: clamp(3.5rem, 11vw, 9rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: none;
}
body[data-heading="display"] .hero-text h1 em {
  font-style: normal;
  display: block;
  font-weight: 300;
  font-size: 0.55em;
  letter-spacing: -0.02em;
  color: var(--gold-light);
  margin-top: 0.2em;
}
body[data-heading="minimal"] .hero-text h1 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  max-width: 18ch;
}
body[data-heading="minimal"] .hero-text h1 em {
  font-style: normal;
  color: var(--gold-light);
  font-weight: 500;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
body[data-heading="minimal"] .hero-text .lead {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
}

/* ---- NEWS CARD STYLE VARIANTS ---- */
body[data-cards="ostre"] .news-card {
  border-radius: 0;
  border-color: rgba(201,168,106,0.22);
  background: var(--moss-deep);
  border-left: 2px solid var(--gold);
}
body[data-cards="ostre"] .news-card .badge {
  border-radius: 0;
  border-color: var(--gold);
}
body[data-cards="glass"] .news-card {
  background: linear-gradient(160deg, rgba(243,231,205,0.06), rgba(243,231,205,0.02));
  border: 1px solid rgba(243,231,205,0.14);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-radius: 26px;
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.6);
}
body[data-cards="glass"] .news-card .badge {
  background: rgba(201,168,106,0.12);
  border-color: rgba(201,168,106,0.3);
  backdrop-filter: blur(6px);
}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1000;
  width: 280px;
  background: rgba(12, 26, 17, 0.92);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(201,168,106,0.22);
  border-radius: 18px;
  padding: 0;
  color: var(--cream);
  font-family: var(--sans);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
  display: none;
  overflow: hidden;
  max-height: calc(100vh - 2.5rem);
  flex-direction: column;
}
.tweaks-panel.is-open { display: flex; }
.tweaks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(201,168,106,0.18);
  cursor: grab;
  user-select: none;
}
.tweaks-head:active { cursor: grabbing; }
.tweaks-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--cream);
}
.tweaks-title .accent { color: var(--gold-light); font-style: italic; font-weight: 400; }
.tweaks-close {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 1px solid rgba(201,168,106,0.25);
  display: grid; place-items: center;
  color: var(--cream-mute);
  font-size: 0.95rem;
  line-height: 1;
  transition: all 0.2s;
}
.tweaks-close:hover { color: var(--gold-light); border-color: var(--gold); }
.tweaks-body { padding: 0.75rem 1rem 1rem; overflow-y: auto; }
.tweak-group { margin-bottom: 1rem; }
.tweak-group:last-child { margin-bottom: 0; }
.tweak-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}
.tweak-options {
  display: flex;
  gap: 0.3rem;
  background: rgba(243,231,205,0.04);
  border: 1px solid rgba(243,231,205,0.08);
  border-radius: 999px;
  padding: 0.22rem;
}
.tweak-options.wrap { flex-wrap: wrap; border-radius: 12px; gap: 0.25rem; }
.tweak-opt {
  flex: 1;
  padding: 0.45rem 0.5rem;
  font-size: 0.74rem;
  font-weight: 500;
  border-radius: 999px;
  color: var(--cream-mute);
  text-align: center;
  transition: all 0.2s;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.tweak-options.wrap .tweak-opt { border-radius: 8px; flex: 1 0 calc(50% - 0.25rem); }
.tweak-opt:hover { color: var(--cream); }
.tweak-opt.is-active {
  background: var(--gold);
  color: var(--moss-deepest);
}
.tweak-swatch {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: -1px;
  border: 1px solid rgba(0,0,0,0.15);
}
@media (max-width: 640px) {
  .tweaks-panel { right: 0.75rem; bottom: 0.75rem; width: calc(100vw - 1.5rem); max-width: 320px; }
}

/* ============================================================
   CATEGORY DETAIL PAGES (kava / slane / bar)
   ============================================================ */

body[data-page="category"] {
  background: var(--moss-deepest);
}

/* page palettes */
body[data-page="category"][data-palette="lesni"]   { --pg-bg-1: #0c1a11; --pg-bg-2: #1a2e22; --pg-accent: var(--gold); }
body[data-page="category"][data-palette="nocni"]   { --pg-bg-1: #050a08; --pg-bg-2: #0e1a14; --pg-accent: var(--gold-light); }
body[data-page="category"][data-palette="hlina"]   { --pg-bg-1: #2a1813; --pg-bg-2: #3d2419; --pg-accent: #e89d70; }
body[data-page="category"][data-palette="pena"]    { --pg-bg-1: #1a2e22; --pg-bg-2: #2f4a38; --pg-accent: #f3e7cd; }

body[data-page="category"] {
  background: linear-gradient(180deg, var(--pg-bg-1, var(--moss-deepest)) 0%, var(--pg-bg-2, var(--moss)) 100%);
}

/* CATEGORY HERO */
.cat-hero {
  position: relative;
  padding: clamp(7rem, 14vw, 11rem) 0 clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}
.cat-hero::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 70%;
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in oklab, var(--pg-accent, var(--gold)) 12%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 30%, color-mix(in oklab, var(--pg-accent, var(--gold)) 8%, transparent), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.cat-hero .wrap { position: relative; z-index: 1; }
.cat-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cream-mute);
  margin-bottom: 2.25rem;
  transition: color 0.2s, gap 0.25s var(--ease-out);
}
.cat-back svg {
  width: 1rem;
  height: 1rem;
  transform: rotate(180deg);
}
.cat-back:hover { color: var(--pg-accent, var(--gold-light)); gap: 0.75rem; }
.cat-hero h1 {
  font-family: var(--serif);
  font-size: clamp(3rem, 8vw, 6.5rem);
  font-variation-settings: "opsz" 144;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.95;
  margin: 0.75rem 0 1.5rem;
  max-width: 18ch;
}
.cat-hero h1 em {
  font-style: italic;
  color: var(--pg-accent, var(--gold-light));
  font-weight: 500;
}
.cat-hero .lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 56ch; }
.cat-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(243, 231, 205, 0.12);
  font-size: 0.85rem;
}
.cat-meta-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--cream-mute);
}
.cat-meta-item .ico {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(243, 231, 205, 0.05);
  color: var(--pg-accent, var(--gold));
}
.cat-meta-item .ico svg { width: 0.85rem; height: 0.85rem; }
.cat-meta-item strong { color: var(--cream); font-weight: 500; }

/* Decorative side leaf */
.cat-hero-leaf {
  position: absolute;
  right: -10%;
  top: 12%;
  width: clamp(220px, 26vw, 380px);
  color: color-mix(in oklab, var(--pg-accent, var(--gold)) 18%, transparent);
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  animation: catLeafFloat 14s ease-in-out infinite;
}
@keyframes catLeafFloat {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-14px); }
}

/* FILTER CHIPS */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 3rem;
}
.cat-filter {
  padding: 0.5rem 1rem;
  border: 1px solid rgba(243, 231, 205, 0.15);
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--cream-mute);
  letter-spacing: 0.04em;
  transition: all 0.2s;
  cursor: pointer;
}
.cat-filter:hover { color: var(--cream); border-color: rgba(243, 231, 205, 0.3); }
.cat-filter.is-active {
  background: var(--pg-accent, var(--gold));
  color: var(--moss-deepest);
  border-color: transparent;
  font-weight: 500;
}

/* PRODUCTS SECTION */
.cat-products {
  padding-bottom: clamp(5rem, 10vw, 8rem);
}
.cat-products .wrap { position: relative; }
.cat-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.cat-section-head h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  color: var(--cream);
  font-variation-settings: "opsz" 72;
}
.cat-section-head .count {
  font-size: 0.85rem;
  color: var(--cream-dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* PRODUCT GRID — base */
.product-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 960px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }

/* product visual = gradient + leaf overlay placeholder */
.product-vis {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--pg-accent, var(--gold)) 25%, transparent), transparent 55%),
    linear-gradient(140deg, var(--moss-warm), var(--moss-deepest));
  display: grid;
  place-items: center;
  color: rgba(243, 231, 205, 0.15);
}
.product-vis::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
  z-index: 1;
}
.product-vis svg.leaf {
  width: 65%;
  height: 65%;
  position: relative;
  z-index: 0;
  transition: transform 0.6s var(--ease-out);
}
.product-card:hover .product-vis svg.leaf { transform: scale(1.08) rotate(-3deg); }

.product-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  background: rgba(12, 26, 17, 0.55);
  backdrop-filter: blur(8px);
  color: var(--cream);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 2;
  border: 1px solid rgba(243, 231, 205, 0.18);
}

/* product-tag-inline: hidden by default, shown only in list mode */
.product-tag-inline { display: none; }

/* ============================================================
   DISPLAY MODE — GALLERY (default, large photos)
   ============================================================ */
body[data-display="gallery"] .product-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
body[data-display="gallery"] .product-info {
  padding: 1.25rem 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
body[data-display="gallery"] .name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
body[data-display="gallery"] .product-name {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-variation-settings: "opsz" 36;
  color: var(--cream);
  font-weight: 400;
  letter-spacing: -0.005em;
}
body[data-display="gallery"] .product-price {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--pg-accent, var(--gold-light));
  white-space: nowrap;
}
body[data-display="gallery"] .product-desc {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: var(--cream-mute);
  line-height: 1.55;
}

/* ============================================================
   DISPLAY MODE — LIST (restaurant menu)
   ============================================================ */
body[data-display="list"] .product-grid {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
}
body[data-display="list"] .product-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px dashed rgba(243, 231, 205, 0.18);
}
body[data-display="list"] .product-card:last-child { border-bottom: none; }
body[data-display="list"] .product-vis { display: none; }
body[data-display="list"] .product-name {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-variation-settings: "opsz" 48;
  color: var(--cream);
  position: relative;
  display: inline;
  background-image: linear-gradient(to right, rgba(243, 231, 205, 0.25) 25%, transparent 0%);
  background-position: bottom 0.3em left;
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
body[data-display="list"] .product-price {
  font-family: var(--serif);
  font-size: 1.4rem;
  color: var(--pg-accent, var(--gold-light));
  font-style: italic;
  white-space: nowrap;
}
body[data-display="list"] .product-desc {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: var(--cream-mute);
  max-width: 60ch;
  font-style: italic;
}
body[data-display="list"] .product-info {
  display: contents;
}
body[data-display="list"] .product-tag-inline {
  display: inline-block;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pg-accent, var(--gold));
  padding: 0.15rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  margin-left: 0.75rem;
  vertical-align: middle;
  font-style: normal;
  font-family: var(--sans);
}

/* ============================================================
   DISPLAY MODE — CARDS (compact)
   ============================================================ */
body[data-display="cards"] .product-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}
body[data-display="cards"] .product-card {
  background: rgba(243, 231, 205, 0.04);
  border: 1px solid rgba(243, 231, 205, 0.1);
  border-radius: 14px;
  padding: 1rem;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 1rem;
  align-items: center;
  transition: background 0.25s, transform 0.3s var(--ease-out);
}
body[data-display="cards"] .product-card:hover {
  background: rgba(243, 231, 205, 0.07);
  transform: translateY(-2px);
}
body[data-display="cards"] .product-vis {
  aspect-ratio: 1;
  border-radius: 10px;
}
body[data-display="cards"] .product-vis::after { display: none; }
body[data-display="cards"] .product-tag { display: none; }
body[data-display="cards"] .product-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
body[data-display="cards"] .product-info > .name-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
body[data-display="cards"] .product-name {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--cream);
  font-variation-settings: "opsz" 24;
}
body[data-display="cards"] .product-price {
  color: var(--pg-accent, var(--gold-light));
  font-size: 0.9rem;
  font-weight: 500;
}
body[data-display="cards"] .product-desc {
  font-size: 0.78rem;
  color: var(--cream-dim);
  margin-top: 0.25rem;
  line-height: 1.45;
}

/* ============================================================
   DISPLAY MODE — POLAROID
   ============================================================ */
body[data-display="polaroid"] .product-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem 1.5rem;
}
@media (max-width: 960px) { body[data-display="polaroid"] .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { body[data-display="polaroid"] .product-grid { grid-template-columns: 1fr; } }
body[data-display="polaroid"] .product-card {
  background: var(--cream);
  padding: 0.75rem 0.75rem 1.5rem;
  border-radius: 4px;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
  transition: transform 0.4s var(--ease-out);
}
body[data-display="polaroid"] .product-card:nth-child(3n+1) { transform: rotate(-1.4deg); }
body[data-display="polaroid"] .product-card:nth-child(3n+2) { transform: rotate(0.8deg); }
body[data-display="polaroid"] .product-card:nth-child(3n)   { transform: rotate(-0.4deg); }
body[data-display="polaroid"] .product-card:hover {
  transform: rotate(0) scale(1.03);
  z-index: 2;
}
body[data-display="polaroid"] .product-vis { border-radius: 0; aspect-ratio: 1; }
body[data-display="polaroid"] .product-info {
  padding: 1rem 0.5rem 0;
  text-align: center;
  font-family: "Fraunces", serif;
}
body[data-display="polaroid"] .product-name {
  font-style: italic;
  color: var(--moss-deepest);
  font-size: 1.15rem;
  font-variation-settings: "opsz" 24;
  display: block;
  margin-bottom: 0.25rem;
}
body[data-display="polaroid"] .product-price {
  color: var(--gold-deep);
  font-size: 0.9rem;
  font-weight: 500;
}
body[data-display="polaroid"] .product-desc { display: none; }

/* ============================================================
   DISPLAY MODE — TABULE (chalkboard)
   ============================================================ */
body[data-display="tabule"] .cat-products .wrap > .product-grid {
  background:
    radial-gradient(ellipse at center, #1a2820 0%, #0a120c 100%);
  background-color: #0d1610;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 8px;
  border: 14px solid #3d2814;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.6),
    0 30px 60px -20px rgba(0,0,0,0.7);
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
  position: relative;
}
@media (max-width: 700px) {
  body[data-display="tabule"] .cat-products .wrap > .product-grid { grid-template-columns: 1fr; }
}
body[data-display="tabule"] .cat-products .wrap > .product-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(94deg, transparent 0 50px, rgba(255,255,255,0.015) 50px 51px),
    repeating-linear-gradient(176deg, transparent 0 40px, rgba(255,255,255,0.01) 40px 41px);
  pointer-events: none;
  border-radius: 8px;
}
body[data-display="tabule"] .product-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1rem;
  align-items: baseline;
  border-bottom: 1px dotted rgba(243, 231, 205, 0.2);
  padding-bottom: 1rem;
  position: relative;
  z-index: 1;
}
body[data-display="tabule"] .product-vis { display: none; }
body[data-display="tabule"] .product-tag { display: none; }
body[data-display="tabule"] .product-info { display: contents; }
body[data-display="tabule"] .product-name {
  font-family: "Fraunces", serif;
  font-style: italic;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  color: #f3e7cd;
  font-variation-settings: "opsz" 36;
  text-shadow: 0 0 1px rgba(255,255,255,0.3);
  letter-spacing: 0.01em;
}
body[data-display="tabule"] .product-price {
  font-family: "Fraunces", serif;
  color: #e89d70;
  font-size: 1.1rem;
  font-style: italic;
  text-shadow: 0 0 1px rgba(232, 157, 112, 0.4);
}
body[data-display="tabule"] .product-desc {
  grid-column: 1 / -1;
  font-size: 0.82rem;
  color: rgba(243, 231, 205, 0.55);
  font-style: italic;
  font-family: "Fraunces", serif;
}
body[data-display="tabule"] .product-tag-inline {
  display: none;
}
body[data-display="tabule"] .cat-section-head h2 { color: #f3e7cd; font-style: italic; }

/* ============================================================
   ATMOSPHERE — background variants
   ============================================================ */
.cat-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.cat-bg-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
body[data-atmosphere="listy"] .cat-bg-layer[data-bg="listy"] { opacity: 1; }
body[data-atmosphere="mlha"]  .cat-bg-layer[data-bg="mlha"]  { opacity: 1; }
body[data-atmosphere="cisty"] .cat-bg-layer[data-bg="cisty"] { opacity: 1; }

/* listy: scattered big leaves */
.cat-bg-leaves svg {
  position: absolute;
  color: color-mix(in oklab, var(--pg-accent, var(--gold)) 14%, transparent);
  opacity: 0.35;
}
.cat-bg-leaves svg:nth-child(1) { top: 5%;  left: -8%; width: 380px; transform: rotate(-20deg); }
.cat-bg-leaves svg:nth-child(2) { top: 40%; right: -10%; width: 460px; transform: rotate(35deg); }
.cat-bg-leaves svg:nth-child(3) { bottom: -5%; left: 25%; width: 320px; transform: rotate(15deg); opacity: 0.25; }
.cat-bg-leaves svg:nth-child(4) { top: 20%; left: 45%; width: 200px; transform: rotate(-50deg); opacity: 0.18; }

/* mlha: soft blurred glows */
.cat-bg-mist {
  background:
    radial-gradient(ellipse at 15% 20%, color-mix(in oklab, var(--pg-accent, var(--gold)) 12%, transparent), transparent 50%),
    radial-gradient(ellipse at 85% 60%, color-mix(in oklab, var(--pg-accent, var(--gold)) 8%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(243,231,205,0.06), transparent 50%);
  filter: blur(20px);
}

/* ============================================================
   HLAS (typography variants)
   ============================================================ */
body[data-heading="display"] .cat-hero h1 {
  font-variation-settings: "opsz" 144;
  font-weight: 600;
  letter-spacing: -0.025em;
}
body[data-heading="display"] .cat-section-head h2 { font-weight: 600; letter-spacing: -0.02em; }
body[data-heading="minimal"] .cat-hero h1 {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: -0.03em;
}
body[data-heading="minimal"] .cat-hero h1 em { font-style: normal; }
body[data-heading="minimal"] .cat-section-head h2 {
  font-family: var(--sans);
  font-weight: 400;
  letter-spacing: -0.02em;
}
body[data-heading="minimal"] .product-name { font-family: var(--sans); font-weight: 500; letter-spacing: -0.005em; }

/* ============================================================
   CTA STRIP at bottom
   ============================================================ */
.cat-cta {
  padding: clamp(4rem, 8vw, 6rem) 0;
  border-top: 1px solid rgba(243, 231, 205, 0.08);
  text-align: center;
}
.cat-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cream);
}
.cat-cta h2 em { color: var(--pg-accent, var(--gold-light)); font-style: italic; }
.cat-cta p {
  color: var(--cream-mute);
  max-width: 48ch;
  margin: 1rem auto 2rem;
}
.cat-cta-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.cat-cta .btn-primary, .cat-cta .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: transform 0.2s, background 0.2s;
}
.cat-cta .btn-primary {
  background: var(--pg-accent, var(--gold));
  color: var(--moss-deepest);
}
.cat-cta .btn-ghost {
  border: 1px solid rgba(243, 231, 205, 0.25);
  color: var(--cream);
}
.cat-cta .btn-primary:hover { transform: translateY(-2px); }
.cat-cta .btn-ghost:hover { background: rgba(243, 231, 205, 0.06); }