/* Kozlov Living Facade: block and card on the home page, phones only.
   Everything is scoped to #kzf-root and kzf- classes; nothing here touches the theme
   except two things while the block is mounted on a phone: the old slider is hidden, and the site
   header takes the facade's paper colour while the house is on screen, so header and house are one sheet. */

@media (min-width: 768px) {
  #kzf-root { display: none !important; }
}
@media (max-width: 767px) {
  html.kzf-on .content_home .slider-wrapper { display: none !important; }
  html.kzf-on.kzf-top header.header, html.kzf-on.kzf-top header.header > .inner { background-color: #faf8f4 !important; }
}

#kzf-root[hidden] { display: none !important; }
#kzf-root { --kzf-front-css: 1; }
#kzf-root.kzf-root {
  display: block;
  position: relative;
  width: 100%;
  margin: 0 0 12px;
  padding: 0 0 2px;
  background: #faf8f4;
  color: #2b2522;
  box-sizing: border-box;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
#kzf-root *, #kzf-root *::before, #kzf-root *::after { box-sizing: border-box; }
#kzf-root a, #kzf-root button { -webkit-tap-highlight-color: transparent; }
/* while the drawing loads, its place is kept so nothing below jumps */
#kzf-root .kzf-hero:empty { aspect-ratio: var(--kzf-ratio, 1.804); }
/* a new song: the lit windows fade out first, then light up again one by one */
#kzf-root.kzf-dim .kzf-glow, #kzf-root.kzf-dim .kzf-who { opacity: 0 !important; transition: opacity 0.35s ease; }
/* the house leaves room for the site header and the card (about 330px), so the ticket button stays on
   the first screen; never wider than 480px, never smaller than 240px (phone held sideways) */
#kzf-root .kzf-hero {
  display: block; width: 100%; margin: 0 auto; line-height: 0;
  max-width: min(480px, max(240px, calc((100vh - 330px) * 1.804)));
  max-width: min(480px, max(240px, calc((100svh - 330px) * 1.804)));
}

/* the card: swipeable slides, each labelled by what it is */
#kzf-root .kzf-card { position: relative; width: calc(100% - 32px); max-width: 448px; margin: 0 auto 16px; }
#kzf-root .kzf-frame span { position: absolute; display: block; background: #2b2522; pointer-events: none; }
/* a plain thin frame around the card, there from the start (no line from the door since 1.4.3) */
#kzf-root .kzf-f1 { top: 0; left: 0; right: 0; height: 1.2px; }
#kzf-root .kzf-f2 { top: 0; right: 0; bottom: 0; width: 1.2px; }
#kzf-root .kzf-f3 { left: 0; right: 0; bottom: 0; height: 1.2px; }
#kzf-root .kzf-f4 { top: 0; left: 0; bottom: 0; width: 1.2px; }
#kzf-root .kzf-frame .kzf-f5 { display: none; }

#kzf-root .kzf-track {
  display: flex; align-items: stretch; width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
#kzf-root .kzf-track::-webkit-scrollbar { display: none; }
#kzf-root .kzf-slide {
  flex: 0 0 100%; min-width: 0; margin: 0; scroll-snap-align: start;
  padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 8px;
}
#kzf-root .kzf-dots { position: absolute; top: 4px; right: 6px; display: flex; }
#kzf-root .kzf-dot {
  appearance: none; -webkit-appearance: none; width: 20px; height: 28px; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
#kzf-root .kzf-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #2b2522;
}
#kzf-root .kzf-dot[aria-current="true"]::before { background: #cb3a2a; border-color: #cb3a2a; }
#kzf-root .kzf-dot:focus-visible { outline: 2px solid #cb3a2a; outline-offset: -2px; }

#kzf-root .kzf-eyebrow {
  margin: 0; padding-right: calc(var(--kzf-dots, 4) * 20px); font-size: 11px; line-height: 1.3; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: #cb3a2a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* photo and text side by side, the round photo centred against the text (reference mockup) */
#kzf-root .kzf-row { display: flex; gap: 14px; align-items: center; min-height: 0; }
#kzf-root .kzf-photo {
  flex: 0 0 100px; width: 100px; height: 100px; display: block; overflow: hidden; background: #ece6dc;
  border-radius: 50%;
}
#kzf-root .kzf-photo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; }
#kzf-root .kzf-paper {
  flex: 0 0 88px; width: 88px; height: 100px; border: 1px solid #2b2522; text-decoration: none; color: #2b2522;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
#kzf-root .kzf-paper .kzf-pn { font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.05; }
#kzf-root .kzf-paper .kzf-pr { width: 56px; border-top: 1px solid #2b2522; }
#kzf-root .kzf-paper .kzf-pd { font-size: 11px; color: #6b625c; }
#kzf-root .kzf-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#kzf-root .kzf-when { font-size: 12px; line-height: 1.3; font-weight: 500; color: #6b625c; font-variant-numeric: tabular-nums; }
#kzf-root .kzf-title {
  margin: 0; padding: 0; font-family: inherit; font-size: 17px; line-height: 1.15; font-weight: 600;
  text-transform: none; letter-spacing: -0.01em; color: #2b2522;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#kzf-root .kzf-title a { color: inherit; text-decoration: none; }
#kzf-root .kzf-title.kzf-long { font-size: 15px; }
#kzf-root .kzf-sub { font-size: 13px; line-height: 1.25; font-style: italic; color: #2b2522; }
#kzf-root .kzf-sub.kzf-caps { font-style: normal; font-size: 11.5px; font-weight: 500; letter-spacing: 0.06em; }
#kzf-root .kzf-meta { font-size: 12px; line-height: 1.3; color: #6b625c; }
#kzf-root .kzf-buy, #kzf-root .kzf-act {
  appearance: none; -webkit-appearance: none; width: 100%; margin: auto 0 0; height: auto; min-height: 44px; padding: 10px 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 15px; line-height: 1; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  text-decoration: none; border-radius: 0; box-shadow: none; cursor: pointer;
}
#kzf-root .kzf-buy { background: #cb3a2a; color: #fff; border: 0; }
#kzf-root .kzf-buy:active { background: #a52c1f; }
#kzf-root .kzf-act { background: transparent; color: #2b2522; border: 1px solid #2b2522; }
#kzf-root .kzf-act:active { background: #2b2522; color: #faf8f4; }
#kzf-root .kzf-buy:focus-visible, #kzf-root .kzf-act:focus-visible { outline: 2px solid #2b2522; outline-offset: 2px; }

@media (max-width: 359px) {
  #kzf-root .kzf-photo { flex-basis: 80px; width: 80px; height: 80px; }
  #kzf-root .kzf-paper { flex-basis: 76px; width: 76px; height: 90px; }
  #kzf-root .kzf-paper .kzf-pn { font-size: 13px; }
  #kzf-root .kzf-paper .kzf-pr { width: 44px; }
  #kzf-root .kzf-paper .kzf-pd { font-size: 10px; }
  #kzf-root .kzf-title { font-size: 15.5px; }
  #kzf-root .kzf-slide { padding: 10px 12px 12px; }
}