/* ============ Ušećerena priča — deljeni stil ============ */
:root{
  --pink:#ff8fab;
  --pink-deep:#d9436f;
  --pink-soft:#ffd6e2;
  --pink-pale:#fff0f5;
  --cream:#fffaf2;
  --choco:#4a2e26;
  --choco-soft:#6b4a3d;
  --gold:#e3a857;
  --gold-deep:#a8720f;
  --mint:#bfe3cc;
  --mint-soft:#e3f4e9;
  --white:#ffffff;
  --shadow-pink: 0 14px 30px -12px rgba(217,67,111,.35);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Quicksand', sans-serif;
  font-size:18px;
  font-weight:600;
  color:var(--choco);
  background:
    radial-gradient(circle at 6px 6px, rgba(255,143,171,.16) 2px, transparent 2.4px) 0 0/34px 34px,
    var(--cream);
  line-height:1.75;
  overflow-x:hidden;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3,h4{font-family:'Baloo 2', cursive; color:var(--pink-deep); font-weight:700;}
.script{font-family:'Dancing Script', cursive;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}

/* ---------- inline icon utilities ---------- */
.i16{width:16px; height:16px; vertical-align:-3px; margin-right:5px; flex-shrink:0;}

/* ---------- nav ---------- */
nav.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px;
  padding:14px 6vw;
  background:rgba(255,250,242,.92);
  backdrop-filter:blur(6px);
  border-bottom:2px dashed var(--pink-soft);
}
nav.topbar .logo{
  font-family:'Dancing Script', cursive;
  font-size:1.7rem;
  color:var(--pink-deep);
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
}
nav.topbar .logo svg{width:22px; height:22px; flex-shrink:0;}
.nav-toggle{display:none;}
.nav-burger{
  display:none;
  font-size:1.4rem;
  line-height:1;
  color:var(--pink-deep);
  cursor:pointer;
  padding:8px 12px;
  border-radius:12px;
  border:2px solid var(--pink-soft);
  user-select:none;
}
nav.topbar .links{
  display:flex; gap:8px; flex-wrap:wrap;
}
nav.topbar .links a{
  text-decoration:none;
  font-weight:700;
  font-size:1.02rem;
  padding:9px 18px;
  border-radius:30px;
  color:var(--choco);
  transition:all .25s ease;
  white-space:nowrap;
}
nav.topbar .links a:hover, nav.topbar .links a.active{
  background:var(--pink);
  color:#fff;
  box-shadow:var(--shadow-pink);
  transform:translateY(-2px);
}
@media (max-width:760px){
  .nav-burger{display:inline-block;}
  nav.topbar .links{
    order:3; width:100%;
    display:none;
    flex-direction:column; gap:6px;
    margin-top:4px;
  }
  .nav-toggle:checked ~ .links{display:flex;}
  nav.topbar .links a{width:100%; text-align:center;}
}

/* ---------- scallop divider (icing edge) ---------- */
.scallop{
  width:100%; height:26px;
  background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--pink-pale) 13.5px);
  background-size:26px 26px;
  background-repeat:repeat-x;
  position:relative; z-index:2;
}
.scallop.flip{ transform:scaleY(-1);}
.scallop.deep{
  background-image: radial-gradient(circle at 13px 0, transparent 13px, var(--pink) 13.5px);
}

/* ---------- generic containers ---------- */
main{flex:1; position:relative; z-index:1;}
.wrap{max-width:1040px; margin:0 auto; padding:0 20px;}
section{padding:70px 20px;}
.center{text-align:center;}
.eyebrow{
  display:inline-block;
  font-size:.92rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--gold-deep); font-weight:700; margin-bottom:10px;
}
.section-title{font-size:clamp(1.9rem,4vw,2.7rem); margin-bottom:10px;}
.section-sub{color:var(--choco-soft); max-width:640px; margin:0 auto 46px; font-size:1.15rem; font-weight:600;}
.divider-orn{margin:26px auto; width:110px; height:2px; border-radius:2px; background:var(--pink-soft); position:relative;}
.divider-orn::before{content:""; position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--pink); border-radius:50%; transform:translate(-50%,-50%);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--pink-deep);
  color:#fff !important;
  padding:14px 30px;
  border-radius:40px;
  text-decoration:none;
  font-weight:700;
  font-size:1.06rem;
  box-shadow:var(--shadow-pink);
  border:none;
  cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn:hover{transform:translateY(-4px) rotate(-1deg); box-shadow:0 20px 34px -12px rgba(239,95,136,.5);}
.btn.ghost{
  background:transparent; color:var(--pink-deep) !important;
  border:2px solid var(--pink-deep);
  box-shadow:none;
}
.btn.ghost:hover{background:var(--pink-deep); color:#fff !important;}
.btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top:26px;}

/* ---------- cake / info cards ---------- */
.card{
  background:var(--white);
  border-radius:22px;
  padding:26px 24px;
  box-shadow:0 10px 26px -16px rgba(107,70,59,.25);
  border:2px solid var(--pink-pale);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.card:hover{
  transform:translateY(-6px) rotate(-.6deg);
  border-color:var(--pink);
  box-shadow:0 18px 34px -16px rgba(239,95,136,.35);
}
.card h4{font-size:1.25rem; margin-bottom:8px; display:flex; align-items:center; gap:8px;}
.card p{color:var(--choco-soft); font-size:1.05rem; font-weight:600; line-height:1.65;}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:22px;}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}

/* category header */
.cat-head{display:flex; align-items:center; gap:16px; margin:56px 0 28px;}
.cat-head:first-of-type{margin-top:0;}
.cat-head .badge{
  width:52px; height:52px; border-radius:50%;
  background:var(--pink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2',cursive; font-size:1.4rem; flex-shrink:0;
  box-shadow:var(--shadow-pink);
}
.cat-head h3{font-size:1.65rem; margin:0;}
.cat-head .ln{flex:1; height:3px; border-radius:3px; background:repeating-linear-gradient(90deg,var(--pink) 0 8px, transparent 8px 14px);}

/* posni + accent panels */
.panel{
  border-radius:26px; padding:40px 32px; margin-top:20px;
}
.panel.mint{background:var(--mint-soft); border:2px dashed var(--mint);}
.panel.pink{background:var(--pink-pale); border:2px dashed var(--pink-soft);}
.panel.choco{background:var(--choco); color:var(--cream);}
.panel.choco h3{color:#fff;}
.panel.choco p{color:#f1e2dc;}

/* pill badge */
.pill{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px; padding:9px 22px;
  border:2px solid var(--gold); color:var(--gold); border-radius:30px;
  font-size:1rem; font-weight:700; letter-spacing:.5px;
}
.pill svg{width:16px; height:16px; flex-shrink:0;}

/* footer */
footer{
  background:var(--pink-pale);
  text-align:center;
  padding:50px 20px 34px;
  border-top:2px dashed var(--pink-soft);
  position:relative; z-index:1;
}
footer .flogo{font-family:'Dancing Script',cursive; font-size:1.9rem; color:var(--pink-deep); display:block; margin-bottom:6px;}
footer .fnav{margin:16px 0; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}
footer .fnav a{text-decoration:none; font-weight:700; font-size:1.02rem; color:var(--choco);}
footer .fnav a:hover{color:var(--pink-deep);}
footer small{color:var(--choco-soft); font-size:.92rem;}
footer .fcontact{
  display:flex; gap:22px; justify-content:center; flex-wrap:wrap;
  margin:14px 0 6px; font-size:1rem; font-weight:700; color:var(--choco);
}
footer .fcontact a{text-decoration:none; color:var(--choco);}
footer .fcontact a:hover{color:var(--pink-deep);}

/* contact cards */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px; margin-top:26px;
}
.contact-card{
  background:var(--white); border-radius:20px; padding:24px 18px; text-align:center;
  border:2px solid var(--pink-pale); box-shadow:0 10px 22px -16px rgba(107,70,59,.2);
  text-decoration:none; color:var(--choco);
  transition:transform .25s ease, border-color .25s ease;
}
.contact-card:hover{transform:translateY(-5px) rotate(-1deg); border-color:var(--pink);}
.contact-card .ic{display:flex; justify-content:center; margin-bottom:8px;}
.contact-card .ic svg{width:28px; height:28px; color:var(--gold-deep);}
.contact-card .label{font-size:.86rem; text-transform:uppercase; letter-spacing:1px; color:var(--gold-deep); font-weight:700;}
.contact-card .value{font-weight:700; margin-top:4px; font-size:1.12rem;}
.note-tiny{display:flex; align-items:center; justify-content:center; gap:6px; font-size:.92rem; color:var(--choco-soft); font-style:italic; margin-top:18px; font-weight:600;}
.note-tiny svg{width:15px; height:15px; flex-shrink:0;}

/* hero (per-page mini banner) */
.page-hero{
  text-align:center;
  padding:64px 20px 40px;
  position:relative;
}
.page-hero .cake-emoji{display:inline-flex; animation:bob 3s ease-in-out infinite;}
.page-hero .cake-emoji svg{width:50px; height:50px; color:var(--pink-deep);}
@keyframes bob{
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%{transform:translateY(-10px) rotate(3deg);}
}
.page-hero h1{font-size:clamp(2.1rem,5vw,3rem);}
.page-hero p{color:var(--choco-soft); max-width:600px; margin:10px auto 0; font-size:1.12rem; font-weight:600;}

/* gallery polaroid */
.polaroid{
  background:#fff; border-radius:14px; padding:14px 14px 24px;
  box-shadow:0 14px 28px -16px rgba(107,70,59,.3);
  text-align:center; transform:rotate(var(--r,0deg));
  transition:transform .3s ease;
}
.polaroid:hover{transform:rotate(0deg) scale(1.04);}
.polaroid .ph{
  height:230px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; overflow:hidden;
  background:linear-gradient(135deg, var(--pink-soft), var(--mint-soft));
  margin-bottom:12px;
}
.polaroid .ph img{width:100%; height:100%; object-fit:cover; display:block;}
.polaroid span.cap{font-family:'Dancing Script',cursive; font-size:1.35rem; font-weight:700; color:var(--choco); display:block;}

/* video cards */
.video-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px; margin-top:10px;
}
.video-card{
  background:var(--white); border-radius:20px; padding:14px 14px 18px;
  box-shadow:0 12px 28px -16px rgba(107,70,59,.28);
  border:2px solid var(--pink-pale); text-align:center;
  transition:transform .25s ease, border-color .25s ease;
}
.video-card:hover{transform:translateY(-5px); border-color:var(--pink);}
.video-card video{
  width:100%; border-radius:12px; display:block; background:#000;
  aspect-ratio:478/850; max-height:420px; object-fit:cover;
}
.video-card span.cap{font-family:'Dancing Script',cursive; font-size:1.3rem; font-weight:700; color:var(--choco); display:block; margin-top:10px;}

/* trust badges */
.trust-row{
  display:flex; justify-content:center; gap:30px; flex-wrap:wrap;
  margin:36px auto 0; max-width:780px;
}
.trust-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.96rem; font-weight:700; color:var(--choco);
  max-width:130px; text-align:center;
}
.trust-item svg{width:32px; height:32px; color:var(--pink-deep);}

/* floating order button */
.float-cta{
  position:fixed; right:20px; bottom:20px; z-index:70;
  background:var(--pink-deep); color:#fff !important;
  padding:14px 24px; border-radius:50px;
  font-weight:700; font-size:1.05rem;
  text-decoration:none; display:flex; align-items:center; gap:8px;
  box-shadow:var(--shadow-pink);
  animation:pulse 2.6s ease-in-out infinite;
}
.float-cta:hover{animation-play-state:paused; transform:translateY(-3px);}
.float-cta svg{width:19px; height:19px; flex-shrink:0;}
@keyframes pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.05);}
}

@media (max-width:640px){
  section{padding:50px 16px;}
  .float-cta{padding:12px 18px; font-size:.85rem; right:14px; bottom:14px;}
}