/* stranica menija, ide nakon styles.css */
.meni-page { --u: calc(min(100vw, 1400px) / 1024); }
.meni-page [hidden] { display: none !important; }
.meni-page .topbar { position: relative; inset: auto; background: linear-gradient(90deg, #8d0a16, #c8101e 28%, #c8101e 76%, #900b16); }

/* ---------- baner ---------- */
.meni-page .topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(100% - 6px);
  z-index: 3;
  height: clamp(14px, 1.8vw, 34px);
  background: linear-gradient(90deg, #8d0a16, #c8101e 28%, #c8101e 76%, #900b16);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1876 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0V17C100 8 220 2 340 3c170 2 340 28 560 27 110 0 190-16 300-20 110-4 250 20 400 22 120 2 200-8 276-17V0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1876 34' preserveAspectRatio='none'%3E%3Cpath d='M0 0V17C100 8 220 2 340 3c170 2 340 28 560 27 110 0 190-16 300-20 110-4 250 20 400 22 120 2 200-8 276-17V0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}
.m-hero { position: relative; height: calc(var(--u) * 206); overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 180' fill='none' stroke='%23fbe7de' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 62c0-20 18-32 40-32s40 12 40 32zM26 74c10 0 10 6 20 6s10-6 20-6 10 6 20 6 10-6 22-6M30 88h76v4a10 10 0 0 1-10 10H40a10 10 0 0 1-10-10z'/%3E%3Cpath d='M160 116l8 44h34l8-44zM166 116l-4-30M180 116l-2-38M194 116l2-34M206 116l6-28'/%3E%3Cpath d='M180 26l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3C/svg%3E") left top / calc(var(--u) * 150) auto, linear-gradient(90deg, #fff6f0, #fdebe2 60%); }
.m-photo-bg { position: absolute; z-index: 1; right: 0; top: 0; width: calc(var(--u) * 582); height: calc(var(--u) * 202); }
.m-zeko { position: absolute; z-index: 2; left: calc(var(--gutter) - var(--u) * 44); bottom: calc(var(--u) * -20); width: auto; height: calc(var(--u) * 206); }
.m-hero-wave { position: absolute; z-index: 3; left: 0; bottom: -1px; width: 62%; height: calc(var(--u) * 11); fill: var(--cream); }
.m-title { position: absolute; z-index: 2; left: calc(var(--gutter) + var(--u) * 186); top: calc(var(--u) * 42); }
.m-title h1 {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: calc(var(--u) * 52);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: #0f0b0b;
  -webkit-text-stroke: .006em #0f0b0b;
  text-shadow: none;
  transform: rotate(-6deg) skewX(-12deg);
  transform-origin: left center;
}
.m-title h1 span { position: relative; display: inline-block; margin: 0; font-size: 1em; line-height: 1; color: inherit; -webkit-text-stroke: inherit; text-shadow: none; }
.m-title h1 span::after {
  content: "";
  position: absolute;
  left: -32%; right: 0; bottom: -.3em;
  height: .19em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffc21a' d='M3 28C70 12 190 3 294 1c6 0 7 11 0 13C205 19 115 30 18 39c-11 1-25-6-15-11z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.m-title h1 span::before {
  content: "";
  position: absolute;
  left: 108%; right: auto; top: .02em;
  width: .72em; height: .8em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 48'%3E%3Cpath d='M6 19 22 5M8 28l30-5M8 37l24 8' stroke='%23e0182a' stroke-width='6.500' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.m-title p {
  margin-top: calc(var(--u) * 27);
  font-size: calc(var(--u) * 17);
  font-weight: 900;
  font-style: italic;
  white-space: nowrap;
  transform: rotate(-5deg);
  transform-origin: left center;
}
.m-slogan {
  position: absolute;
  z-index: 2;
  right: calc(var(--u) * 42); top: calc(var(--u) * 42);
  color: #fff;
  font-size: calc(var(--u) * 24);
  font-weight: 800;
  font-style: italic;
  line-height: 1.26;
  white-space: nowrap;
  transform: rotate(-9deg);
}
.m-slogan span { position: relative; display: inline-block; }
.m-slogan span::after {
  content: "";
  position: absolute;
  left: 4%; right: 0; bottom: -.34em;
  height: .24em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffc21a' d='M3 28C70 12 190 3 294 1c6 0 7 11 0 13C205 19 115 30 18 39c-11 1-25-6-15-11z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---------- kategorije i pretraga ---------- */
.m-body { padding: clamp(10px, 1.1vw, 20px) max(var(--gutter), calc((100% - 1700px) / 2)) clamp(30px, 3vw, 54px); }
.m-tools { display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 2.4vw, 46px); margin-bottom: clamp(16px, 1.6vw, 30px); }
.m-tabs { display: flex; align-items: center; gap: clamp(8px, 1.25vw, 24px); }
.m-tabs button[data-f="sve"] { min-width: clamp(110px, 10vw, 172px); min-height: clamp(46px, 3vw, 54px); border-radius: 999px; margin-right: clamp(0px, 1.2vw, 24px); }
.m-tabs button[data-f="sve"] .i { width: 18px; height: 18px; }
.m-tabs button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: clamp(84px, 6.6vw, 112px);
  min-height: clamp(60px, 4.2vw, 72px);
  padding: 6px 12px;
  border: 0;
  border-radius: clamp(16px, 1.3vw, 24px);
  color: var(--ink);
  background: linear-gradient(180deg, #fffaf6, #fff1ea);
  box-shadow: inset 0 0 0 1px #f0aca1, 0 4px 10px rgb(120 30 20 / .08);
  font: 900 clamp(.88rem, .9vw, 1rem)/1.1 "Nunito", sans-serif;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.m-tabs button .i { width: clamp(24px, 1.5vw, 28px); height: clamp(24px, 1.5vw, 28px); color: var(--red); }
.m-tabs button:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--red), 0 8px 14px rgb(120 30 20 / .16); }
.m-tabs button[aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #ee1d2c, #a80b18); box-shadow: 0 6px 14px rgb(140 10 21 / .35); }
.m-tabs button[aria-pressed="true"] .i { color: #fff; }
.m-search { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 540px; min-height: clamp(46px, 2.9vw, 52px); padding: 0 24px; border-radius: 999px; background: #fffaf7; box-shadow: inset 0 0 0 1px #f0aca1, 0 4px 10px rgb(120 30 20 / .08); }
.m-search:focus-within { box-shadow: inset 0 0 0 2px var(--red); }
.m-search .i { width: 22px; height: 22px; }
.m-search input { flex: 1; width: 100%; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: italic 700 1rem "Nunito", sans-serif; }
.m-search input::placeholder { color: #6e625f; opacity: 1; }

/* ---------- sekcije ---------- */
.m-sec { margin-top: clamp(20px, 1.7vw, 30px); scroll-margin-top: 16px; }
.m-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: clamp(12px, 1.1vw, 20px); }
.m-sec-head h2 {
  display: flex; align-items: center; gap: .32em;
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.1vw, 2.35rem);
  line-height: 1;
  color: #0f0b0b;
}
.m-sec-head h2 .i { width: 1.15em; height: 1.15em; color: var(--red); stroke-width: 1.8; }
.m-sec-head h2 span {
  position: relative;
  -webkit-text-stroke: .016em #0f0b0b;
  transform: rotate(-3deg) skewX(-9deg);
}
.m-sec-head h2 span::after {
  content: "";
  position: absolute;
  left: 4%; right: 0; bottom: -.2em;
  height: .17em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffc21a' d='M3 28C70 12 190 3 294 1c6 0 7 11 0 13C205 19 115 30 18 39c-11 1-25-6-15-11z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.m-count { flex: none; padding: 2px 8px 1px; border-bottom: 1.5px solid #f2b6a8; border-radius: 6px; background: rgb(255 255 255 / .55); color: var(--red); font-size: clamp(.86rem, .8vw, .95rem); font-weight: 800; }
.m-grid { --gap: clamp(8px, .95vw, 18px); display: flex; flex-wrap: wrap; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.m-card {
  flex: 1 1 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  display: flex; flex-direction: column; align-items: center;
  min-width: 0;
  padding: clamp(6px, .5vw, 10px) clamp(5px, .5vw, 10px) clamp(10px, .8vw, 16px);
  border-radius: clamp(12px, 1vw, 20px);
  text-align: center;
  background: linear-gradient(180deg, #fff, #fff6f1);
  box-shadow: 0 5px 14px rgb(120 30 20 / .12);
  transition: transform .15s, box-shadow .15s;
}
.m-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgb(120 30 20 / .2); }
.is-trazi .m-card { flex-grow: 0; }
.m-img { position: relative; width: 100%; aspect-ratio: 1.75; margin-bottom: 5px; }
.m-img img { position: absolute; inset: 3%; display: block; width: 94%; height: 94%; object-fit: contain; }
.m-photo .m-img img { inset: 0; width: 100%; height: 100%; border-radius: clamp(8px, .7vw, 14px); object-fit: cover; }
#dodaci .m-img { aspect-ratio: auto; height: clamp(62px, 4.4vw, 80px); }
#sendvici .m-card h3, #sendvici .m-price { font-size: clamp(.84rem, .8vw, .94rem); }
.m-card h3 { font-size: clamp(.9rem, .86vw, 1rem); font-weight: 900; line-height: 1.16; text-wrap: balance; }
.m-price { margin-top: auto; padding-top: 5px; color: var(--red); font-size: clamp(.95rem, .92vw, 1.05rem); font-weight: 900; }
.m-pecivo { display: block; width: 100%; margin-top: 6px; font-size: clamp(.76rem, .72vw, .84rem); font-weight: 800; }
.m-pecivo select { display: block; width: 100%; min-height: 30px; margin-top: 3px; padding: 2px 6px; border: 1px solid #e6c2b4; border-radius: 999px; background: #fffaf7; color: var(--ink); font: 700 clamp(.76rem, .72vw, .84rem) "Nunito", sans-serif; cursor: pointer; }
.m-empty { padding: 50px 0 30px; text-align: center; font-size: 1.15rem; font-weight: 800; }

/* ---------- poziv na dnu ---------- */
.m-cta {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: clamp(16px, 3vw, 60px);
  min-height: calc(var(--u) * 118);
  margin-top: clamp(70px, 7vw, 110px);
  padding: 6px var(--gutter) 10px calc(var(--gutter) + var(--u) * 216);
  background: #c8101e;
  color: #fff;
}
.m-cta-wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(30px, 4vw, 76px); fill: #c8101e; }
.m-cta-zeko { position: absolute; left: calc(var(--gutter) - var(--u) * 30); bottom: 0; width: calc(var(--u) * 232); height: auto; }
.m-cta-text { flex: 1; text-align: center; transform: rotate(-3deg) skewX(-8deg); }
.m-cta h2 { font-family: "Fredoka", "Nunito", sans-serif; font-weight: 700; font-size: clamp(1.7rem, 2.8vw, 2.7rem); line-height: 1.05; }
.m-cta h2 span { position: relative; display: inline-block; }
.m-cta h2 span::after {
  content: "";
  position: absolute;
  left: 4%; width: 62%; bottom: -.24em;
  height: .17em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='%23ffc21a' d='M3 28C70 12 190 3 294 1c6 0 7 11 0 13C205 19 115 30 18 39c-11 1-25-6-15-11z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.m-cta-text p { margin-top: .5em; font-size: clamp(1.1rem, 1.6vw, 1.55rem); font-family: "Fredoka", "Nunito", sans-serif; font-weight: 700; }
.m-cta-btn { flex: none; display: inline-flex; align-items: center; gap: 14px; min-height: clamp(56px, 4vw, 68px); padding: 8px clamp(26px, 2.6vw, 44px); border-radius: 999px; color: var(--ink); background: linear-gradient(180deg, #fff, #fbeae2); box-shadow: 0 8px 20px rgb(70 0 8 / .35); font-size: clamp(1.2rem, 1.5vw, 1.5rem); font-weight: 900; white-space: nowrap; transition: transform .15s; }
.m-cta-btn:hover { transform: translateY(-2px); }
.m-cta-btn .i { width: 1.25em; height: 1.25em; color: var(--red); stroke-width: 2.6; }
.meni-page .footer { margin-top: 0; background: linear-gradient(180deg, #c8101e, #a50c1a 40%, #8c0a15); }
.m-footer-line { display: block; width: 100%; height: clamp(14px, 1.6vw, 30px); fill: none; stroke: rgb(255 255 255 / .4); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

@media (max-width: 1240px) {
  .m-body { padding-inline: 24px; }
  .m-tools { flex-wrap: wrap; }
  .m-search { flex-basis: 100%; max-width: none; }
  .m-grid { display: grid; grid-template-columns: repeat(var(--c, 5), minmax(0, 1fr)); }
  #dodaci .m-grid { --c: 4; }
  #deserti .m-grid { --c: 3; }
  #sendvici .m-card h3, #sendvici .m-price, .m-card h3 { font-size: 1rem; }
  .m-pecivo, .m-pecivo select { font-size: .86rem; }
  .m-pecivo select { min-height: 36px; }
}
@media (max-width: 860px) {
  .m-grid { --c: 3; }
  #dodaci .m-grid { --c: 2; }
  .m-cta { flex-direction: column; gap: 18px; margin-top: calc(var(--u) * 110); padding: calc(var(--u) * 150) 24px 28px; text-align: center; }
  .m-cta-zeko { left: 50%; bottom: auto; top: calc(var(--u) * -70); width: calc(var(--u) * 230); transform: translateX(-50%); }
  .m-cta-text { flex: none; }
}
@media (max-width: 760px) {
  .meni-page { --u: calc(100vw / 520); }
  .m-hero { height: calc(var(--u) * 372); }
  .m-photo-bg { right: 0; top: auto; bottom: 0; width: 100%; height: calc(var(--u) * 186); }
  .m-zeko { left: calc(var(--u) * 6); top: calc(var(--u) * 14); bottom: auto; height: calc(var(--u) * 178); }
  .m-title { left: calc(var(--u) * 192); top: calc(var(--u) * 42); }
  .m-title h1 { font-size: calc(var(--u) * 56); }
  .m-title p { font-size: calc(var(--u) * 19); }
  .m-hero-wave { display: none; }
  .m-slogan { right: calc(var(--u) * 26); top: auto; bottom: calc(var(--u) * 92); font-size: calc(var(--u) * 19); }
}
@media (max-width: 620px) {
  .m-tabs { width: 100%; }
  .m-tabs button, .m-tabs button[data-f="sve"] { flex: 1 1 0; min-width: 0; margin: 0; padding: 6px 2px; font-size: .78rem; white-space: normal; }
  .m-tabs button[data-f="sve"] { min-height: 60px; border-radius: clamp(16px, 1.3vw, 24px); }
  .m-body { padding-inline: 14px; }
  .m-grid { --c: 2; --gap: 10px; }
  #dodaci .m-grid, #deserti .m-grid { --c: 2; }
  .m-sec-head h2 { font-size: 1.75rem; }
}