:root{
  --charcoal:#0F1115; --gold:#C9B26D; --white:#fff;
  --radius:16px;
}

html,body{
  margin:0; padding:0; background:#f8f6ef; color:var(--charcoal);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}

.italianno-regular {
  font-family: "Italianno", cursive;
  font-weight: 400;
  font-style: normal;
}

.fredericka-the-great-regular {
  font-family: "Fredericka the Great", serif;
  font-weight: 400;
  font-style: normal;
}

/*CSS za intro ispod naslova za sad samo za makarune*/
.category-intro{
  max-width: 720px;
  margin: 0.6rem 0 2.2rem;
  padding-left: 1.2rem;

  font-size: 1.02rem;
  line-height: 1.8;
  letter-spacing: 0.015em;

  color: rgba(0,0,0,0.72);
  font-weight: 300;

  position: relative;

}

@keyframes introFade{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}


.intro-highlight{
  font-weight: 600;
  color: #c9a34a;
  letter-spacing: 0.02em;
  position: relative;
}

/* subtle underline efekt */
.intro-highlight::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 0.5px;
  background: rgba(201,163,74,0.5);
}

h1,h2,h3{font-family:"Cormorant Garamond",Georgia,serif; line-height:1.2; margin:0 0 .5rem;}
.container{width:min(1100px,92vw); margin:0 auto; padding:0 0;}


header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(120%) blur(6px);
  background:rgba(248,246,239,.75); border-bottom:1px solid rgba(0,0,0,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem;}
.brand{font-weight:600; letter-spacing:.5px;}
.lang{display:flex; gap:.5rem;}
.lang button{background:transparent;border:1px solid rgba(0,0,0,.1); padding:.35rem .6rem; border-radius:999px; cursor:pointer}
.lang button.active{border-color:var(--gold); color:var(--gold);}

/* Hero */
.hero{
  position:relative; display:grid; place-items:center; min-height:78svh;
  background:radial-gradient(1200px 600px at 70% 20%, #f2ecda 0%, #f8f6ef 60%, #faf9f4 100%);
  overflow:hidden;
}
.hero__wave{
  position:absolute; inset:auto -10% -8% -10%; height:40vh; background:
  radial-gradient(60% 80% at 50% 40%, rgba(201,178,109,.25), rgba(201,178,109,0) 70%);
  transform:translateY(10px);
}
.hero__inner{display:grid; gap:1rem; text-align:center; padding:4rem 1rem;}
.kicker{letter-spacing:.18em; text-transform:uppercase; font-size:.99rem; color:#7f7b6d}
.hero h1{font-size:clamp(2rem,3.8vw,3.2rem);}
.hero p{max-width:60ch; margin:0 auto; font-size:1.05rem; line-height:1.7}
.cta{display:flex; gap:.75rem; justify-content:center; margin-top:1rem}
.btn{
  background:var(--charcoal); color:var(--white); border:none; border-radius:999px;
  padding:.8rem 1rem; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease;
}
.btn--ghost{background:transparent; color:var(--charcoal); border:1px solid rgba(0,0,0,.12);}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.08);}
.dotline{height:1px; background:linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,.12) 30%, rgba(0,0,0,0) 100%); margin:2rem auto; width:min(520px,80%);}

/* Sections */
.section{padding:3rem 1rem;}
.section__header{display:flex; align-items:center; gap:.75rem; margin:0 auto 1.25rem; width:min(1100px,92vw);}
.section__header h2{font-size:clamp(1.4rem,2.6vw,2.1rem);}
.rule{flex:1; height:1px; background:linear-gradient(90deg, var(--gold), rgba(201,178,109,0));}

/* Quick nav */
.quicknav{
  position: sticky;
  left: 0;
  right: 0;
  top: 82px;
  z-index: 999;

  display: flex;
  gap: .5rem;
  padding: .6rem .8rem;

  overflow-x: auto;

  background: rgba(255,255,255,0.65);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid rgba(0,0,0,.06);
}
.chip{
  white-space: nowrap;
  border-radius: 999px;
  padding: .45rem .8rem;
  font-size: .82rem;
  cursor: pointer;

  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,0.6);

  color: rgba(0,0,0,.75);

  transition: all .25s ease;
}

.chip:hover{
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201,178,109,0.08);
}

.chip.active{
  background: linear-gradient(135deg, #C9B26D, #e3d29a);
  color: #111;
  border-color: transparent;

  box-shadow: 0 4px 14px rgba(201,178,109,0.35);
}

/* Grid & cards */
.grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
@media (min-width:900px){ .grid{grid-template-columns:repeat(3,1fr); gap:16px;} }
@media (min-width:1200px){ .grid{grid-template-columns:repeat(4,1fr); gap:18px;} }

.card{
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:var(--radius);
  padding:16px; display:flex; flex-direction:column; gap:.45rem;
  box-shadow:0 6px 18px rgba(0,0,0,.03);
}
.card:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease;}

/* Naslov + cijena u istom redu */
.card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.card__names{min-width:0; flex:1 1 auto;}
.card__title{font-weight:600;}

/* Cijena: ne lomi se i ne skuplja */
.price{
  margin-left:auto;
  font-variant-numeric: tabular-nums;
  color:var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 0.98rem;
  line-height: 1.2;
}

.desc{opacity:.85; font-size:.95rem; line-height:1.5}
.badges{display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.25rem;}
.badge{border:1px solid rgba(0,0,0,.1); padding:.18rem .45rem; border-radius:999px; font-size:.72rem; color:#5b5b55}

/* Reveal */
.will-reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal{opacity:1; transform:translateY(0);}
.reveal-delay-1{transition-delay:.08s}
.reveal-delay-2{transition-delay:.16s}
.reveal-delay-3{transition-delay:.24s}

/* Modal */
.modal{position: fixed; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .2s ease;}
.modal.is-open{ opacity: 1; pointer-events: auto; }
.modal__backdrop{position: absolute; inset: 0; background: rgba(0,0,0,.42); backdrop-filter: blur(2px);}
.modal__dialog{position: relative; z-index: 1; width: min(800px,92vw); background: #fff; border-radius: var(--radius); box-shadow: 0 30px 80px rgba(0,0,0,.28); overflow: hidden; display: grid; grid-template-columns: 1fr 1.2fr;}
@media (max-width: 860px){ .modal__dialog{ grid-template-columns: 1fr; } }
.modal__close{position: absolute; top: 10px; right: 10px; border: none; background: rgba(0,0,0,.06); width: 36px; height: 36px; border-radius: 999px; cursor: pointer; font-size: 20px; line-height: 1;}
.modal__media{ background: #f6f4ec; display: flex; justify-content:center; align-items:center; }
.modal__media img{ width: 100%; height: auto; max-height:280px; object-fit: contain; display:block; }
.modal__body{ padding: 18px 18px 20px; }
.modal__body h3{ margin: 0 0 .25rem; font-size: clamp(1.2rem,2.8vw,1.6rem); }
.modal__meta{ display: flex; align-items: center; gap: .5rem; margin: .35rem 0 .75rem; }
.modal .price{ font-size: 1rem; white-space: nowrap; flex-shrink: 0; }
.modal .badges{ margin: 0; }
.muted{ color: #6b6b6b; font-size: .86rem; }



/* Kontakt & mapa */
.contact{display: grid; grid-template-columns: 1fr 1.3fr; gap: 18px; align-items: start;}
@media (max-width: 900px){ .contact{ grid-template-columns: 1fr; } }
.contact__card{background:#fff; border:1px solid rgba(0,0,0,.08); border-radius: var(--radius); padding:16px; box-shadow:0 6px 18px rgba(0,0,0,.03);}
.contact__title{ margin: 0 0 .6rem; }
.contact__row{display:grid; grid-template-columns: 110px 1fr; gap:10px; align-items:center; padding:.4rem 0; border-bottom:1px dashed rgba(0,0,0,.08);}
.contact__row:last-child{ border-bottom:none; }
.contact__label{ color:#6b6b6b; font-size:.92rem; }
.contact__actions{ grid-column: 2 / span 1; display:flex; gap:.5rem; margin-top:.35rem; }
.map{ border-radius: var(--radius); overflow: hidden; border:1px solid rgba(0,0,0,.08); box-shadow:0 6px 18px rgba(0,0,0,.03); }
.map iframe{ display:block; width:100%; height:420px; border:0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .will-reveal{opacity:1; transform:none; transition:none}
  .btn, .chip{transition:none}
  .hero__wave{display:none}
}
/* ==== Scroll Cue (hero) ==== */
.scroll-cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:.4rem;
  background:transparent; border:0; color:#39372f; cursor:pointer;
  margin-top:.5rem; opacity:.9;
}
.scroll-cue:hover{ opacity:1; }

.scroll-cue__mouse{
  width:26px; height:40px; border:1.5px solid rgba(0,0,0,.45);
  border-radius:16px; display:grid; place-items:center; position:relative;
}
.scroll-cue__wheel{
  width:3px; height:8px; background:rgba(0,0,0,.55); border-radius:2px;
  animation: wheel 1.8s ease-in-out infinite;
}
@keyframes wheel{
  0%{ transform: translateY(-6px); opacity: 0; }
  30%{ opacity: 1; }
  100%{ transform: translateY(6px); opacity: 0; }
}

.scroll-cue__arrows{
  display:grid; place-items:center; margin-top:.2rem; animation: bob 1.8s ease-in-out infinite;
}
.scroll-cue__arrows svg{ width:16px; height:16px; opacity:.65; }
@keyframes bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(3px); }
}
.scroll-cue__label{ font-size:.82rem; color:#6f6b5e; }

/* ==== Animacije slika na skrol ==== */
/* Primijeni na bilo koji <img class="img-anim"> u sadržaju (galerije, sekcije...) */
.img-anim{
  opacity:0; transform: translateY(12px) scale(1.02);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}
.img-anim.inview{
  opacity:1; transform: none;
}

/* ==== Modal slika “pop-in” pri otvaranju ==== */
@keyframes popIn{
  from{ opacity:0; transform: scale(1.02); }
  to  { opacity:1; transform: scale(1); }
}
.modal__media img{
  opacity:0; transform: scale(1.02);
}
.modal.is-open .modal__media img{
  animation: popIn .32s ease forwards;
}

/* === Hero gallery (tri slike ispod scroll cue) === */
.hero-gallery{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:1.5rem;
  margin-top:2rem;
  flex-wrap:wrap;
  perspective:800px;
}

.hero-gallery img{
  width:clamp(120px,28vw,220px);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  transform-origin:center;
  transition:transform 1.5s ease, opacity .8s ease;
  opacity:0;
}

/* koristi se zajedno s .img-anim i klasom .inview iz JS-a */
.hero-gallery img.inview{
  opacity:1;
  transform:translateY(0) rotateX(0);
}

/* lagano parallax pomicanje pri skrolanju */
.hero-gallery img:nth-child(1){transform:translateY(20px) rotateX(6deg);}
.hero-gallery img:nth-child(2){transform:translateY(10px) rotateX(3deg);}
.hero-gallery img:nth-child(3){transform:translateY(30px) rotateX(-5deg);}


/* === HERO SLIDER === */
.hero-slider{
  position: relative;
  width: min(900px, 92vw);
  margin: 1.5rem auto 0;
  aspect-ratio: 16/9;            /* stabilan omjer */
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,.14);
}

.hero-slide{
  position: absolute; inset: 0;
  opacity: 0; transform: scale(1.02);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.hero-slide.is-active{
  opacity: 1; transform: scale(1);
  z-index: 1;
}
.hero-slide img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* strelice */
.hero-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.85); color: #222;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.hero-arrow:hover{ background: #fff; }
.hero-arrow.prev{ left: 10px; }
.hero-arrow.next{ right: 10px; }

/* točkice */
.hero-dots{
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  display: flex; gap: 8px; padding: 6px 10px;
  background: rgba(0,0,0,.28); border-radius: 999px;
  backdrop-filter: blur(2px);
}
.hero-dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.65); border: 0; cursor: pointer;
}
.hero-dot.is-active{ background: #fff; width: 18px; border-radius: 999px; }

/* pauza na hover (vizual nije nužan, ali korisno) */
.hero-slider:hover .hero-arrow{ background: #fff; }


.price{
  margin-left:auto;
  color:var(--gold);
  flex-shrink:0;
  text-align:right;
}

.price-line{
  display:block;
  white-space:nowrap;
  font-size:0.92rem;
  line-height:1.45;
}

.price-line + .price-line{
  margin-top:2px;
}


/* === MOBILE FIXES === */
@media (max-width: 768px){

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  header{
    position:sticky;
    top:0;
    z-index:100;
  }

  .nav{
    flex-direction:column;
    align-items:flex-start;
    gap:.55rem;
    padding:.65rem .8rem;
  }

  .brand{
    font-size:.95rem;
  }

  .lang{
    width:100%;
    overflow-x:auto;
    gap:.35rem;
    padding-bottom:.15rem;
  }

  .lang button{
    flex:0 0 auto;
    padding:.32rem .55rem;
    font-size:.78rem;
  }

  .quicknav{
    position:sticky;
    top:92px; /* ispod headera na mobitelu */
    z-index:95;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding:.5rem .8rem;
    overflow-x:auto;
  }

  .section{
    padding:2.2rem .75rem;
  }

  .container{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    padding-left:.75rem;
    padding-right:.75rem;
  }

  .grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .card{
    width:100%;
    box-sizing:border-box;
  }

  .card__top{
    gap:8px;
  }

  .price{
    max-width:42%;
    text-align:right;
  }

  .price-line{
    font-size:.88rem;
  }

  .hero-slider{
    width:100%;
  }

  .cta{
    flex-direction:column;
    align-items:center;
  }

  .btn{
    width:100%;
    max-width:280px;
    text-align:center;
    box-sizing:border-box;
  }
}

/* === MODAL MOBILE FIX === */
.modal{
  z-index:999;
}

.modal__dialog{
  max-height:90vh;
  overflow-y:auto;
}

.modal__close{
  z-index:20;
  background:#fff;
  color:#111;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}

@media (max-width:768px){
  .modal{
    padding:1rem;
    box-sizing:border-box;
  }

  .modal__dialog{
    width:100%;
    max-height:88vh;
    border-radius:18px;
  }

  .modal__media{
    min-height:190px;
    max-height:230px;
  }

  .modal__close{
    position:absolute;
    top:10px;
    right:10px;
    width:40px;
    height:40px;
    font-size:24px;
  }

  .modal__body{
    padding:16px;
  }
}

@media (max-width: 768px){

  header{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  .quicknav{
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    z-index: 999;
  }

  body{
    padding-top: 145px;
  }

}