/* ==========================================================================
   kafabuka — shared design layer
   Ported from the Claude Design prototype (Kafabuka *.dc.html).
   Loaded site-wide. Page-specific animation scenes keep their own <style>
   inside the page's HTML widget, exactly as the prototype had them, so
   per-page keyframe names can never collide.
   ========================================================================== */

:root {
  --kb-moss:    #6F7D2F;
  --kb-bez:     #E9DEC9;
  --kb-mustard: #E5A62C;
  --kb-terra:   #D97A4E;
  --kb-brick:   #B4552A;
  --kb-ink:     #2E2A21;
  --kb-cream:   #F7F0EA;
  --kb-card:    #FFFCF7;
  --kb-navy:    #3B4A6B;
  --kb-navy-dk: #2F3A54;
  --kb-muted:   #6B6455;
  --kb-body:    #4A4437;
  --kb-line:    #E7DECB;
  --kb-line-2:  #DED3BC;
  --kb-onmoss:  #F3EFE2;
  --kb-onterra: #FFF8F0;
  --kb-max:     1220px;
  --kb-head:    'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --kb-text:    'Nunito Sans', system-ui, -apple-system, sans-serif;
}

/* --- base ---------------------------------------------------------------- */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--kb-cream);
  font-family: var(--kb-text);
  color: var(--kb-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body a { color: var(--kb-moss); text-decoration: none; }
body a:hover { color: var(--kb-brick); }

h1, h2, h3, h4, .kb-head {
  font-family: var(--kb-head);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* Anchor jumps land clear of the sticky header. */
[id] { scroll-margin-top: 120px; }

a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--kb-mustard);
  outline-offset: 3px;
  border-radius: 8px;
}
@media (hover: none) {
  a:active, button:active { transform: scale(.97); transition: transform .12s ease; }
}

/* --- design-system utilities -------------------------------------------- */

.kb-eyebrow {
  display: inline-block;
  color: var(--kb-brick);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.kb-eyebrow--onnavy { color: var(--kb-mustard); }
.kb-eyebrow--onterra { color: #FFEBDC; }

.kb-chip {
  display: inline-block;
  background: var(--kb-bez);
  color: #5A5340;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
}
.kb-chip--surface {
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line-2);
}

.kb-tag {
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--kb-cream);
  border: 1.5px solid var(--kb-line-2);
  color: #5A5340;
}
.kb-tag--mustard { background: var(--kb-mustard); border-color: var(--kb-mustard); color: #33301F; }
.kb-tag--onnavy  { background: rgba(255,253,246,.14); border-color: transparent; color: #FFFDF6; }

.kb-card {
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line);
  border-radius: 34px;
  overflow: hidden;
}

.kb-arch      { border-radius: 260px 260px 40px 40px; overflow: hidden; background: var(--kb-bez); }
.kb-arch--dn  { border-radius: 40px 40px 220px 220px; overflow: hidden; background: var(--kb-bez); }
.kb-arch--alt { border-radius: 200px 40px 200px 40px; overflow: hidden; background: var(--kb-bez); }

.kb-dash { border-top: 2px dashed var(--kb-line-2); }

.kb-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #EFE7D8;
}
.kb-row:last-child { border-bottom: 0; }
.kb-row__name  { font-size: 17px; color: var(--kb-ink); }
.kb-row__price { font-size: 17px; font-weight: 700; color: var(--kb-brick); }
.kb-row--onbez { border-bottom-color: rgba(46,42,33,.12); }
.kb-row--onbez .kb-row__price { color: #5C5334; }

.kb-dotlist { display: grid; gap: 14px; margin: 0; padding: 0; }
.kb-dotlist > li { display: flex; gap: 12px; align-items: flex-start; list-style: none; font-size: 17px; color: var(--kb-body); }
.kb-dotlist > li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: 9px;
  background: var(--kb-moss);
}
.kb-dotlist > li:nth-child(3n+2)::before { background: var(--kb-mustard); }
.kb-dotlist > li:nth-child(3n+3)::before { background: var(--kb-terra); }

.kb-blob { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }

.kb-marquee { background: var(--kb-moss); overflow: hidden; padding: 18px 0; }
.kb-marquee__track {
  display: flex;
  width: max-content;
  animation: kb-marquee var(--kb-marquee-s, 30s) linear infinite;
}
.kb-marquee__set {
  display: flex; align-items: center; gap: 30px;
  padding-right: 30px;
  font-family: var(--kb-head);
  font-weight: 700; font-size: 26px;
  color: var(--kb-onmoss);
  white-space: nowrap;
}
.kb-marquee__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--kb-mustard); }
.kb-marquee__dot:nth-child(even) { background: var(--kb-terra); }
@keyframes kb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- motion layer (ported from kb-motion.js) ---------------------------- */

.kb-rv { opacity: 0; transform: translateY(26px); will-change: opacity, transform; }
.kb-rv-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.2,.8,.3,1), transform .7s cubic-bezier(.2,.8,.3,1);
}

.kb-photo {
  transition: transform .5s cubic-bezier(.2,.8,.3,1), box-shadow .5s cubic-bezier(.2,.8,.3,1);
  will-change: transform;
}

/* Hover lift on cards. Targets an explicit class instead of the prototype's
   [style*="border-radius"] sniffing, which no longer exists post-conversion. */
.kb-lift { transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease; }
@media (hover: hover) {
  .kb-lift:hover { transform: translateY(-8px); box-shadow: 0 26px 44px -28px rgba(46,42,33,.55); }
}

#kb-prog {
  position: fixed; top: 0; left: 0;
  height: 3px; width: 0;
  background: var(--kb-mustard);
  z-index: 999;
  border-radius: 0 3px 3px 0;
  transition: width .12s linear;
}

body.kb-fade { opacity: 0; animation: kb-pagein .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes kb-pagein { to { opacity: 1; } }
body.kb-leaving { opacity: 0; transition: opacity .18s ease; }

/* --- app shell: mobile bottom tab bar + sheet --------------------------- */

#kb-tabs {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: none;
  background: rgba(255,252,247,.94);
  backdrop-filter: blur(14px);
  border-top: 1.5px solid #E4D9C4;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 30px -26px rgba(46,42,33,.9);
  -webkit-user-select: none; user-select: none;
}
#kb-tabs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
#kb-tabs li { margin: 0; }
#kb-tabs a, #kb-tabs button {
  width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; min-height: 52px; padding: 6px 2px;
  border: 0; background: none;
  font-family: inherit; font-weight: 700; font-size: 11px;
  color: #7A7263; cursor: pointer;
  border-radius: 14px;
  transition: background .2s ease, color .2s ease;
}
#kb-tabs a[data-on="1"] { color: var(--kb-moss); background: var(--kb-bez); }
#kb-tabs .kb-ico, #kb-sheet .kb-ico { width: 22px; height: 22px; position: relative; display: block; flex: 0 0 auto; }

#kb-scrim {
  position: fixed; inset: 0; z-index: 940;
  background: rgba(46,42,33,.55);
  animation: kb-fade-in .22s ease;
}
#kb-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  background: var(--kb-card);
  border-radius: 28px 28px 0 0;
  padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px));
  animation: kb-sheet-in .3s cubic-bezier(.2,.8,.3,1);
  max-height: 82vh; overflow: auto;
  -webkit-user-select: none; user-select: none;
}
#kb-sheet .kb-grab { width: 44px; height: 5px; border-radius: 999px; background: var(--kb-line-2); margin: 0 auto 14px; }
#kb-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#kb-sheet li { margin: 0; }
#kb-sheet a {
  display: flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 8px 12px;
  border-radius: 16px; font-weight: 700; font-size: 17px;
  color: var(--kb-ink);
}
#kb-sheet a[data-on="1"] { background: var(--kb-bez); color: var(--kb-moss); }
@keyframes kb-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes kb-fade-in  { from { opacity: 0; } to { opacity: 1; } }

/* The tab bar replaces the desktop nav below this width. Kept in sync with
   MOBILE in kb-app.js and with Elementor's tablet breakpoint. */
@media (max-width: 1024px) {
  #kb-tabs { display: block; }
}

/* --- reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .kb-rv { opacity: 1; transform: none; }
  body.kb-fade, #kb-sheet, #kb-scrim { animation: none !important; opacity: 1 !important; }
  #kb-prog { display: none; }
}

/* --- header, nav and language pill -------------------------------------
   The header lives in an Elementor Theme Builder template; these rules cover
   the parts Elementor cannot express: the compaction state driven by
   kb-motion.js, and the shortcode-rendered nav and pill.
   ---------------------------------------------------------------------- */

.kb-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247,240,234,.85);
  backdrop-filter: blur(10px);
  transition: box-shadow .3s ease;
}
.kb-header--on { box-shadow: 0 10px 30px -24px rgba(46,42,33,.7); }
.kb-header > .e-con,
.kb-header > .elementor-section {
  transition: padding .3s cubic-bezier(.2,.8,.3,1);
}
.kb-header--on > .e-con,
.kb-header--on > .elementor-section {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.kb-logo { display: flex; flex-direction: column; line-height: .9; text-decoration: none; }
.kb-logo__name {
  font-family: var(--kb-head);
  font-weight: 800;
  font-size: 30px;
  color: var(--kb-moss);
  letter-spacing: -.01em;
}
.kb-logo__sub {
  font-size: 9px;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--kb-brick);
  text-transform: uppercase;
}

.kb-nav { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; }
.kb-nav__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--kb-ink);
}
.kb-nav__item:hover { color: var(--kb-brick); }
.kb-nav__item[data-on='1'] { color: var(--kb-moss); }

.kb-langpill {
  display: flex;
  background: var(--kb-bez);
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
}
.kb-langpill a {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  padding: 9px 13px;
  border-radius: 999px;
  color: #7A7263;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.kb-langpill a[data-on='1'] {
  background: var(--kb-cream);
  color: var(--kb-ink);
}

/* Below the app-shell breakpoint the desktop nav is replaced by the bottom
   tab bar, so it is hidden rather than allowed to wrap onto a second row. */
@media (max-width: 1024px) {
  .kb-nav { display: none; }
  .kb-logo__name { font-size: 25px; }
}

/* --- footer ------------------------------------------------------------- */

.kb-footlinks { display: flex; flex-wrap: wrap; gap: 18px; }
.kb-footlinks a { font-size: 14px; font-weight: 600; color: #5A5340; }
.kb-footlinks a:hover { color: var(--kb-brick); }
@media (max-width: 1024px) {
  .kb-footlinks { gap: 14px; }
  .kb-footlinks a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* --- photo frames -------------------------------------------------------
   The design crops photos to fixed aspect ratios inside rounded or arched
   frames. Elementor containers cannot express aspect-ratio directly, so a
   frame is a container carrying .kb-ph plus a ratio and a radius class, with
   an image widget inside it.
   ---------------------------------------------------------------------- */

.kb-ph {
  position: relative;
  overflow: hidden;
  background: var(--kb-bez);
  width: 100%;
}
.kb-ph > .elementor-widget-image,
.kb-ph > .elementor-widget-image > .elementor-widget-container,
.kb-ph > .e-con-inner > .elementor-widget-image,
.kb-ph > .e-con-inner > .elementor-widget-image > .elementor-widget-container {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}
.kb-ph img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.kb-ph figure { margin: 0; height: 100%; }

/* Ratios */
.kb-ph--4x5  { aspect-ratio: 4 / 5; }
.kb-ph--3x4  { aspect-ratio: 3 / 4; }
.kb-ph--4x3  { aspect-ratio: 4 / 3; }
.kb-ph--1x1  { aspect-ratio: 1 / 1; }
.kb-ph--16x10 { aspect-ratio: 16 / 10; }
.kb-ph--21x9 { aspect-ratio: 21 / 9; }
.kb-ph--fill { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }

/* Radii, including the arch crops. Scaled down on phones so the arch does not
   eat the whole viewport. */
.kb-r-34   { border-radius: 34px; }
.kb-r-40   { border-radius: 40px; }
.kb-r-arch { border-radius: 260px 260px 40px 40px; }
.kb-r-archdn { border-radius: 40px 40px 220px 220px; }
.kb-r-archalt { border-radius: 200px 40px 200px 40px; }
.kb-r-archfoot { border-radius: 34px 34px 200px 200px; }
@media (max-width: 1024px) {
  .kb-r-arch { border-radius: 160px 160px 26px 26px; }
  .kb-r-archdn { border-radius: 26px 26px 150px 150px; }
  .kb-r-archalt { border-radius: 140px 26px 140px 26px; }
  .kb-r-archfoot { border-radius: 26px 26px 150px 150px; }
  .kb-r-34, .kb-r-40 { border-radius: 26px; }
}

/* Hero inset: the circular photo overlapping the arch, and the moss badge. */
.kb-inset {
  position: absolute;
  bottom: -26px;
  left: -26px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  overflow: hidden;
  border: 9px solid var(--kb-cream);
  background: var(--kb-bez);
  z-index: 2;
}
.kb-badge {
  position: absolute;
  top: -16px;
  right: -12px;
  z-index: 2;
  background: var(--kb-moss);
  color: var(--kb-onmoss);
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 17px;
  padding: 14px 20px;
  border-radius: 22px;
  animation: kb-badge-bob 6s ease-in-out infinite;
}
@keyframes kb-badge-bob { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

@media (max-width: 1024px) {
  .kb-inset { width: 120px; height: 120px; border-width: 7px; bottom: -18px; left: -12px; }
  .kb-badge { font-size: 14px; padding: 10px 14px; top: -12px; right: -4px; }
}
@media (max-width: 480px) {
  .kb-inset { display: none; }
}

/* The emblem discs that sit on the shop-card photos. */
.kb-emblem {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--kb-card);
  box-shadow: 0 10px 20px -10px rgba(46,42,33,.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

/* --- positioning helpers ------------------------------------------------ */

.kb-rel { position: relative; }

/* The excavator band that drives across under the hero. It sits on the page
   background rather than over a photo, which is where the design landed. */
.kb-band {
  position: relative;
  height: 200px;
  overflow: hidden;
  margin-top: -10px;
  pointer-events: none;
}
@media (max-width: 1024px) { .kb-band { height: 150px; } }
@media (max-width: 640px)  { .kb-band { height: 120px; } }

/* Cards keep their radius when Elementor nests a container inside them. */
.kb-card > .e-con-inner { padding: 0; }

/* Hero photo: the design caps the arch at 620px tall, letting the cover crop
   take over on wide columns rather than shrinking the frame. */
.kb-ph--maxh620 { max-height: 620px; }
.kb-ph--maxh560 { max-height: 560px; }
.kb-inset img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kb-lead { max-width: 35em; }
.kb-measure-32 { max-width: 32em; }
.kb-measure-30 { max-width: 30em; }
.kb-measure-22 { max-width: 22em; }
.kb-measure-20 { max-width: 20em; }

/* --- grids --------------------------------------------------------------
   The design uses repeat(auto-fit, minmax(...)) grids. Elementor containers
   are flex by default, so these override .e-con with a two-class selector.
   ---------------------------------------------------------------------- */

.e-con.kb-grid, .kb-grid { display: grid; gap: 26px; }
.e-con.kb-grid > .e-con-inner { display: contents; }
.kb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kb-grid--tight { gap: 18px; }

@media (max-width: 1024px) {
  .kb-grid--3, .kb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .e-con.kb-grid, .kb-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

/* Shop card: photo on top, copy below, lifting on hover. */
.kb-shop { display: flex; flex-direction: column; height: 100%; }
.kb-shop__body { padding: 26px; }
.kb-shop__name {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 26px;
  margin: 0;
  color: var(--kb-moss);
}
.kb-shop__slogan {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kb-brick);
  margin: 8px 0 12px;
}
.kb-shop__desc {
  font-size: 16px;
  line-height: 1.6;
  color: var(--kb-muted);
  margin: 0;
}
@media (max-width: 1024px) { .kb-shop__body { padding: 20px; } }

/* --- coloured panels ---------------------------------------------------- */

.e-con.kb-panel { border-radius: 48px; overflow: hidden; }
.kb-panel--navy  { background: var(--kb-navy); }
.kb-panel--terra { background: var(--kb-terra); }
.kb-panel--moss  { background: var(--kb-moss); }
.kb-panel__pad { padding: clamp(30px, 4vw, 56px); }
@media (max-width: 1024px) {
  .e-con.kb-panel { border-radius: 28px; }
  .kb-panel__pad { padding: 24px; }
}

/* --- price / menu cards -------------------------------------------------- */

.kb-pricecard {
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line);
  border-radius: 40px;
  padding: 34px;
}
.kb-pricecard--bez { background: var(--kb-bez); border-color: transparent; }
.kb-pricecard__title {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 32px;
  color: var(--kb-moss);
  margin: 0 0 4px;
}
.kb-pricecard--bez .kb-pricecard__title { font-size: 28px; color: var(--kb-ink); }
@media (max-width: 1024px) { .kb-pricecard { padding: 24px; border-radius: 26px; } }

/* Mustard note pill, e.g. "Bebe do 1 godine besplatno". */
.kb-note {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  background: var(--kb-mustard);
  border-radius: 999px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #33301F;
}
.kb-note::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #33301F;
}

/* --- birthday packages --------------------------------------------------- */

.kb-pkg {
  background: rgba(255,248,240,.14);
  border-radius: 26px;
  padding: 22px;
}
.kb-pkg__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
}
.kb-pkg__name {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 23px;
  color: var(--kb-onterra);
}
.kb-pkg__price { font-weight: 700; font-size: 19px; color: var(--kb-onterra); }
.kb-pkg__desc { font-size: 16px; line-height: 1.55; color: #FFF1E6; margin: 10px 0 0; }

/* --- workshop cards ------------------------------------------------------ */

.kb-wcard {
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line);
  border-radius: 30px;
  padding: 26px;
  height: 100%;
}
.kb-wcard__when {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kb-brick);
}
.kb-wcard__title {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 24px;
  margin: 10px 0 8px;
  color: var(--kb-ink);
}
.kb-wcard__desc { font-size: 16px; line-height: 1.6; color: var(--kb-muted); margin: 0; }

/* --- contact card -------------------------------------------------------- */

.e-con.kb-contact {
  background: var(--kb-moss);
  border-radius: 40px;
  color: var(--kb-onmoss);
  overflow: hidden;
}
.kb-contact__pad { padding: 38px; }
.kb-clabel {
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: #E5D9A8;
}
.kb-cval {
  font-size: 19px;
  margin: 6px 0 0;
  color: #FFFDF6;
}
.kb-cval a { color: #FFFDF6; }
.kb-cval a:hover { color: var(--kb-mustard); }
@media (max-width: 1024px) {
  .e-con.kb-contact { border-radius: 26px; }
  .kb-contact__pad { padding: 24px; }
}

/* Elementor form, restyled to the design's pill inputs. */
.kb-form .elementor-field-group > label {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #E5D9A8;
  margin-bottom: 8px;
}
.kb-form .elementor-field-textual {
  border: 0;
  border-radius: 999px;
  background: #FFFDF6;
  color: var(--kb-ink);
  font-family: var(--kb-text);
  font-size: 16px;
  padding: 15px 18px;
  min-height: 50px;
}
.kb-form .elementor-button {
  border-radius: 999px;
  background: var(--kb-terra);
  color: var(--kb-onterra);
  font-family: var(--kb-text);
  font-weight: 700;
  font-size: 16px;
  padding: 15px 26px;
  min-height: 50px;
  border: 0;
}
.kb-form .elementor-button:hover { background: var(--kb-brick); }
.kb-form .elementor-message { color: #FFFDF6; }
@media (max-width: 1024px) {
  .kb-form .elementor-field-textual { font-size: 16px; width: 100%; }
  .kb-form .elementor-button { width: 100%; min-height: 52px; justify-content: center; }
}

/* Map frame. */
.e-con.kb-map { border-radius: 40px; overflow: hidden; background: var(--kb-bez); min-height: 360px; }
.kb-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
@media (max-width: 1024px) { .e-con.kb-map { border-radius: 26px; min-height: 280px; } }

/* --- shared scene keyframes --------------------------------------------
   The prototype's kb-motion.js injected these at runtime and the inner pages
   rely on them for their hero objects. They live here now. A page that
   defines its own version in its page-level <style> still wins, because that
   block comes later in the document — which is the behaviour each page was
   authored against.
   ---------------------------------------------------------------------- */

@keyframes kb-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes kb-bob-lg { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes kb-spin   { to { transform: rotate(360deg); } }
@keyframes kb-swing  { 0%,100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes kb-rise   { 0% { transform: translateY(28px) scale(.9); opacity: 0; } 18% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-120px) scale(1.05); opacity: 0; } }
@keyframes kb-fall   { 0% { transform: translateY(-14px) rotate(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(120px) rotate(280deg); opacity: 0; } }
@keyframes kb-drop   { 0% { transform: translateY(-26px); opacity: 0; } 22% { transform: translateY(0); opacity: 1; } 34% { transform: translateY(-7px); } 44% { transform: translateY(0); } 100% { transform: translateY(0); opacity: 1; } }
@keyframes kb-ripple { 0% { transform: scale(.4); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes kb-blink  { 0%,42%,100% { transform: scale(1); opacity: 1; } 48% { transform: scale(1.35); opacity: .75; } }
@keyframes kb-roll   { 0% { transform: translateX(-6px) rotate(0); } 100% { transform: translateX(6px) rotate(200deg); } }
@keyframes kb-drip   { 0% { transform: translateY(0) scaleY(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(22px) scaleY(1.2); opacity: 0; } }
@keyframes kb-tick   { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* --- inner-page hero ---------------------------------------------------- */

/* The white discs carrying each page's animated object. */
.kb-disc {
  position: absolute;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: var(--kb-card);
  box-shadow: 0 18px 34px -18px rgba(46,42,33,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
.kb-disc--tl { top: -24px; left: -26px; animation: kb-bob 5.5s ease-in-out infinite; }
.kb-disc--br { bottom: 38px; right: -30px; animation: kb-bob 4.2s ease-in-out infinite .4s; }

/* The mustard ring and terracotta dot that parallax behind the hero photo. */
.kb-ring {
  position: absolute;
  bottom: -34px;
  left: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 10px solid var(--kb-mustard);
  opacity: .5;
  z-index: 1;
  pointer-events: none;
}
.kb-dot {
  position: absolute;
  top: 8%;
  right: -28px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--kb-terra);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 640px) {
  .kb-disc { width: 62px; height: 62px; }
  .kb-disc--tl { top: -14px; left: -10px; }
  .kb-disc--br { bottom: 20px; right: -10px; }
  .kb-ring { width: 84px; height: 84px; border-width: 8px; left: -20px; bottom: -20px; }
  .kb-dot { width: 26px; height: 26px; right: -10px; }
}

/* Closing CTA band shared by every inner page. */
.kb-cta__title {
  font-family: var(--kb-head);
  font-weight: 700;
  line-height: 1.08;
  color: #FFFDF6;
  margin: 0;
  max-width: 22em;
}

/* The inner-page hero arch is shallower than the home one. */
.kb-r-arch220 { border-radius: 220px 220px 40px 40px; }
.kb-ph--maxh520 { max-height: 520px; }
@media (max-width: 1024px) { .kb-r-arch220 { border-radius: 150px 150px 26px 26px; } }

.kb-measure-34 { max-width: 34em; }

/* Value card (O nama). */
.kb-vcard {
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line);
  border-radius: 32px;
  padding: 28px;
  height: 100%;
}
.kb-vcard__title {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 25px;
  margin: 0;
  color: var(--kb-moss);
}
.kb-vcard__slogan {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--kb-brick);
  margin: 8px 0 12px;
}
.kb-vcard__desc { font-size: 16px; line-height: 1.6; color: var(--kb-muted); margin: 0; }
@media (max-width: 1024px) { .kb-vcard { padding: 22px; border-radius: 24px; } }

/* Rule list (O nama house rules). */
.kb-rules { display: grid; gap: 12px; margin: 0; padding: 0; }
.kb-rules > li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  color: #4A4437;
}
.kb-rules > li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 9px;
  background: var(--kb-moss);
}

/* --- gallery mosaic ------------------------------------------------------
   One shape throughout (24px), variety only from tile size, packed dense so
   there are no holes. This is where the gallery design landed after the mixed
   arches were dropped.
   ---------------------------------------------------------------------- */

.kb-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(132px, 20vw, 250px), 1fr));
  grid-auto-rows: clamp(128px, 19vw, 232px);
  grid-auto-flow: row dense;
  gap: 14px;
}
.kb-mosaic__t {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--kb-bez);
  box-shadow: 0 12px 28px -22px rgba(46,42,33,.7);
  transition: box-shadow .45s cubic-bezier(.2,.8,.3,1);
}
@media (hover: hover) {
  .kb-mosaic__t:hover { box-shadow: 0 26px 46px -24px rgba(46,42,33,.75); }
}
.kb-mosaic__t img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kb-mosaic__t--w2 { grid-column: span 2; }
.kb-mosaic__t--h2 { grid-row: span 2; }

@media (max-width: 640px) {
  .kb-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kb-mosaic__t--w2 { grid-column: span 2; }
}

.kb-measure-38 { max-width: 38em; }

/* Sign-up terms list (Radionice). */
.kb-terms { display: grid; gap: 12px; margin: 0; padding: 0; }
.kb-terms > li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 17px;
  color: #4A4437;
}
.kb-terms > li::before {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 9px;
  background: var(--kb-mustard);
}

/* Contact detail rows reused on the Kontakt page. */
.kb-cgrid { display: grid; gap: 20px; }

/* The espresso scene on the Meni hero is sized in container-query units, so
   its frame has to establish a container. */
.kb-cq { container-type: inline-size; }

/* Contact form on a light card (Kontakt) rather than the moss panel. */
.kb-form--light .elementor-field-group > label { color: var(--kb-brick); }
.kb-form--light .elementor-field-textual {
  background: var(--kb-cream);
  border: 1.5px solid var(--kb-line-2);
}
.kb-form--light .elementor-message { color: var(--kb-moss); font-weight: 700; }

/* --- Igraonica: the guided walk ----------------------------------------
   Six stops threaded on a dotted footpath spine, with a sticky numbered rail
   pinned under the header. The green trail draws itself as you scroll and an
   amber marker travels down it.
   ---------------------------------------------------------------------- */

.kb-journey { position: relative; }

/* Sticky stop rail. */
.kb-rail {
  position: sticky;
  top: 70px;
  z-index: 40;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 10px;
  margin: 0 0 26px;
  border-radius: 999px;
  background: rgba(247,240,234,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px -26px rgba(46,42,33,.9);
  scrollbar-width: none;
}
.kb-rail::-webkit-scrollbar { display: none; }
.kb-rail a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--kb-line-2);
  background: var(--kb-card);
  color: #5A5340;
  font-weight: 700;
  font-size: 14px;
  transition: background .3s, color .3s, border-color .3s;
}
.kb-rail a b {
  font-family: var(--kb-head);
  font-weight: 800;
  font-size: 12px;
  opacity: .75;
}
.kb-rail a[data-on='1'] {
  background: var(--kb-moss);
  border-color: var(--kb-moss);
  color: var(--kb-onmoss);
}
@media (max-width: 1024px) { .kb-rail { top: 58px; } }

/* The footpath spine and the trail drawn over it. */
.kb-spine {
  position: absolute;
  left: 50%;
  top: 20px;
  bottom: 20px;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: repeating-linear-gradient(180deg, #DED3BC 0 10px, rgba(0,0,0,0) 10px 24px);
  z-index: 0;
  pointer-events: none;
}
.kb-spine__trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--kb-path, 0%);
  border-radius: 999px;
  background: repeating-linear-gradient(180deg, var(--kb-moss) 0 10px, rgba(0,0,0,0) 10px 24px);
}
.kb-spine__marker {
  position: absolute;
  left: 50%;
  top: var(--kb-path, 0%);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--kb-mustard);
  border: 5px solid var(--kb-cream);
  box-shadow: 0 10px 20px -10px rgba(46,42,33,.8);
  z-index: 2;
}
@media (max-width: 820px) { .kb-spine { display: none; } }

/* A stop. */
.e-con.kb-stop {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 7vw, 110px);
  align-items: center;
  padding: clamp(30px, 5vw, 58px) 0;
}
.e-con.kb-stop > .e-con-inner { display: contents; }
.kb-stop:nth-child(even) .kb-stop__media { order: -1; }
@media (max-width: 820px) {
  .e-con.kb-stop { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .kb-stop:nth-child(even) .kb-stop__media { order: 0; }
}

.kb-stop__slogan {
  display: inline-block;
  color: var(--kb-brick);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.kb-stop__rule {
  width: 56px;
  height: 5px;
  border-radius: 999px;
  background: var(--kb-mustard);
  margin: 18px 0 0;
}
.kb-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 22px 0 0; }
.kb-chips li {
  list-style: none;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line);
  font-size: 13px;
  font-weight: 700;
  color: #5A5340;
}

/* Media side: the coloured panel offset behind the photo, the number badge
   and the living emblem. */
.kb-stop__media { position: relative; min-width: 0; }
.kb-stop__panel {
  position: absolute;
  inset: 18px -16px -18px 18px;
  border-radius: 30px;
  opacity: .9;
}
.kb-stop:nth-child(even) .kb-stop__panel { inset: 18px 18px -18px -16px; }
.kb-stop__photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: var(--kb-bez);
  box-shadow: 0 30px 54px -34px rgba(46,42,33,.75);
}
.kb-stop__num {
  position: absolute;
  top: -18px;
  left: -14px;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: var(--kb-card);
  box-shadow: 0 16px 30px -16px rgba(46,42,33,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kb-head);
  font-weight: 800;
  font-size: 26px;
  z-index: 3;
  animation: kb-bobsm 5s ease-in-out infinite;
}
.kb-stop__emblem {
  position: absolute;
  bottom: -16px;
  right: -14px;
  width: 78px;
  height: 78px;
  border-radius: 26px;
  background: var(--kb-card);
  box-shadow: 0 16px 30px -16px rgba(46,42,33,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
@keyframes kb-bobsm { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 640px) {
  .kb-stop__num { width: 58px; height: 58px; font-size: 21px; top: -12px; left: -8px; }
  .kb-stop__emblem { width: 62px; height: 62px; border-radius: 20px; bottom: -10px; right: -8px; }
}

/* "Prije nego dođete" cards inside the navy panel. */
.kb-know {
  background: rgba(255,253,246,.1);
  border-radius: 26px;
  padding: 24px;
}
.kb-know h3 {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 22px;
  color: #FFFDF6;
  margin: 0 0 8px;
}
.kb-know p { font-size: 16px; line-height: 1.6; color: #E4E8F2; margin: 0; }

/* --- birthday packages and the four steps ------------------------------- */

.kb-pkglist { display: grid; gap: 10px; margin: 20px 0 0; padding: 0; }
.kb-pkglist li {
  list-style: none;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
  color: inherit;
  opacity: .95;
}
.kb-pkglist li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 8px;
  background: currentColor;
  opacity: .7;
}

.kb-step {
  background: var(--kb-card);
  border: 1.5px solid var(--kb-line);
  border-radius: 30px;
  padding: 26px;
  height: 100%;
}
.kb-step__n {
  font-family: var(--kb-head);
  font-weight: 800;
  font-size: 26px;
  color: var(--kb-mustard);
}
.kb-step__t {
  font-family: var(--kb-head);
  font-weight: 700;
  font-size: 22px;
  margin: 12px 0 8px;
  color: var(--kb-ink);
}
.kb-step__p { font-size: 16px; line-height: 1.6; color: var(--kb-muted); margin: 0; }
@media (max-width: 1024px) { .kb-step { padding: 20px; border-radius: 24px; } }

/* The birthday scene replaces the hero photo, so it must not pick up the
   photo tilt or overflow its arch on small screens. */
.kb-scene-wrap { position: relative; }