/* Fullscreen jelovnik: maketa desktop/mobile, nezavisno od starog Swipebox-a. */
html.cr-menu-modal-open,
body.cr-menu-modal-open { overflow: hidden; }

.cr-menu-modal,
.cr-menu-modal * { box-sizing: border-box; }

.cr-menu-modal {
    --modal-green: #314d43;
    --modal-cream: #f5f2eb;
    --modal-gold: #bda05d;
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: grid;
    grid-template-columns: 54.4% 45.6%;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: var(--modal-cream);
    font-family: "Open Sans", Arial, sans-serif;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

.cr-menu-modal.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
.cr-menu-modal-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: clamp(28px, 6.5vh, 90px) clamp(28px, 3.75vw, 76px);
    background: var(--modal-green);
}
.cr-menu-modal-image {
    display: block;
    width: min(100%, calc(100dvh - 2 * clamp(28px, 6.5vh, 90px)));
    aspect-ratio: 1;
    object-fit: cover;
}
.cr-menu-modal-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: clamp(20px, 3vh, 34px) clamp(30px, 3.4vw, 72px) clamp(20px, 3vh, 34px);
    color: var(--modal-green);
    background: var(--modal-cream);
}
.cr-menu-modal-close {
    position: fixed;
    top: clamp(20px, 3vh, 34px);
    right: clamp(24px, 3.4vw, 72px);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    padding: 0;
    border: 1px solid #d3d0c7;
    border-radius: 0;
    background: var(--modal-cream);
    color: var(--modal-green);
    cursor: pointer;
}
.cr-menu-modal-close span { position: relative; width: 28px; height: 28px; }
.cr-menu-modal-close span::before,
.cr-menu-modal-close span::after {
    content: "";
    position: absolute;
    top: 13px;
    left: -2px;
    width: 32px;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
}
.cr-menu-modal-close span::after { transform: rotate(-45deg); }
/* The copy owns the flexible area; navigation stays inside the viewport. */
.cr-menu-modal-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: safe center;
    min-height: 0;
    overflow-y: auto;
    padding-top: 36px;
    scrollbar-width: thin;
}
.cr-menu-modal-content > * { flex-shrink: 0; }
.cr-menu-modal-eyebrow,
.cr-menu-modal-label,
.cr-menu-modal-nav em { font-style: normal; text-transform: uppercase; letter-spacing: .17em; }
.cr-menu-modal-eyebrow {
    margin: 0 0 clamp(10px, 2vh, 22px);
    color: #82978d;
    font-size: clamp(14px, .95vw, 18px);
    font-weight: 700;
    line-height: 1.4;
}
.cr-menu-modal-title {
    margin: 0;
    color: var(--modal-green);
    font-family: "Open Sans", Arial, sans-serif;
    font-size: clamp(31px, 2.8vw, 54px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: none;
}
.cr-menu-modal-rule { display: block; flex-shrink: 0; width: 112px; height: 2px; margin: clamp(18px, 3vh, 32px) 0 clamp(20px, 4vh, 44px); background: var(--modal-gold); }
.cr-menu-modal-label { margin: 0 0 14px; color: var(--modal-green); font-size: 16px; font-weight: 700; }
.cr-menu-modal-ingredients {
    min-height: 0;
    margin: 0;
    padding-bottom: clamp(18px, 3vh, 30px);
    border-bottom: 1px solid #d1d0c8;
    color: #617168;
    font-size: clamp(18px, 1.2vw, 23px);
    font-weight: 400;
    line-height: 1.45;
}
.cr-menu-modal-price {
    margin: clamp(15px, 2.5vh, 25px) 0 clamp(14px, 2.4vh, 24px);
    color: var(--modal-gold);
    font-size: clamp(30px, 2.5vw, 46px);
    font-weight: 700;
    line-height: 1.2;
}
.cr-menu-modal-order { display: flex; align-items: center; gap: 26px; }
.cr-menu-modal-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 302px;
    min-height: clamp(54px, 6.5vh, 70px);
    padding: 12px;
    border: 1px solid var(--modal-green);
    border-radius: 0;
    background: var(--modal-green);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .12em;
    text-decoration: none;
    text-transform: uppercase;
}
.cr-menu-modal-cta:hover,
.cr-menu-modal-cta:focus-visible { background: #3f6256; color: #fff; text-decoration: none; }
.cr-menu-modal-phone { color: #57665e; font-size: 16px; white-space: nowrap; }
.cr-menu-modal-phone a { color: var(--modal-green); font-weight: 700; text-decoration: none; }
.cr-menu-modal-phone a:hover { color: var(--modal-gold); text-decoration: none; }
.cr-menu-modal-navigation { display: flex; flex: 0 0 auto; justify-content: space-between; gap: 12px; margin-top: 0; padding-top: clamp(14px, 2.2vh, 26px); background: var(--modal-cream); }
.cr-menu-modal-nav {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--modal-green);
    cursor: pointer;
}
.cr-menu-modal-nav span { display: grid; place-items: center; width: clamp(50px, 6vh, 69px); height: clamp(50px, 6vh, 69px); border: 1px solid #d3d0c7; font-family: Arial, sans-serif; font-size: 35px; font-weight: 300; }
.cr-menu-modal-nav em { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cr-menu-modal-nav:hover span { border-color: var(--modal-gold); color: var(--modal-gold); }
.cr-menu-modal-close:hover { border-color: var(--modal-gold); color: var(--modal-gold); }
.cr-menu-modal :focus-visible { outline: 2px solid var(--modal-gold); outline-offset: 3px; }
.cr-menu-modal-panel.is-changing .cr-menu-modal-content { animation: cr-item-enter .28s ease both; }
@keyframes cr-item-enter { from { opacity: .35; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 1100px) and (min-width: 768px) {
    .cr-menu-modal { grid-template-columns: 50% 50%; }
    .cr-menu-modal-media { padding: 24px; }
    .cr-menu-modal-image { width: 100%; }
    .cr-menu-modal-close { top: 24px; right: 30px; width: 58px; height: 58px; }
    .cr-menu-modal-content { padding-top: 54px; }
    .cr-menu-modal-rule { margin: 24px 0 34px; }
    .cr-menu-modal-ingredients { min-height: 0; padding-bottom: 22px; }
    .cr-menu-modal-cta { min-height: 58px; width: 190px; }
    .cr-menu-modal-phone { white-space: normal; }
    .cr-menu-modal-nav span { width: 50px; height: 50px; }
    .cr-menu-modal-nav em { font-size: 11px; }
    .cr-menu-modal-nav { gap: 8px; }
}

@media (max-width: 767px) {
    /* A short viewport crops the photo before it pushes the controls below the fold. */
    .cr-menu-modal { display: flex; flex-direction: column; overflow: hidden; overscroll-behavior: contain; }
    .cr-menu-modal-media { display: block; flex: 0 0 min(100vw, max(160px, calc(100dvh - 475px))); width: 100%; min-height: 0; padding: 0; }
    .cr-menu-modal-image { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
    .cr-menu-modal-close { top: 18px; right: 18px; left: auto; width: 54px; height: 54px; border: 0; background: var(--modal-cream); box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }
    .cr-menu-modal-close span { transform: scale(.82); }
    .cr-menu-modal-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 36px 28px 19px; }
    .cr-menu-modal-content { display: grid; grid-template-columns: minmax(0, 1fr) auto; flex: 1 1 auto; align-content: start; min-height: 0; overflow-y: auto; margin-top: 0; padding-top: 0; }
    .cr-menu-modal-eyebrow, .cr-menu-modal-title, .cr-menu-modal-rule,
    .cr-menu-modal-label, .cr-menu-modal-ingredients { grid-column: 1 / -1; }
    .cr-menu-modal-eyebrow { margin-bottom: 15px; font-size: 12px; line-height: 1.4; }
    .cr-menu-modal-title { font-size: clamp(30px, 8.8vw, 38px); line-height: 1.15; }
    .cr-menu-modal-rule { width: 72px; margin: 14px 0 29px; }
    .cr-menu-modal-label { margin-bottom: 13px; font-size: 12px; }
    .cr-menu-modal-ingredients { min-height: 113px; padding-bottom: 16px; font-size: 17px; line-height: 1.53; }
    .cr-menu-modal-price { grid-column: 1; align-self: center; margin: 18px 0; font-size: 35px; white-space: nowrap; }
    .cr-menu-modal-order { grid-column: 2; align-self: center; justify-content: flex-end; gap: 0; }
    .cr-menu-modal-cta { width: 177px; min-height: 54px; font-size: 14px; }
    .cr-menu-modal-phone { display: none; }
    .cr-menu-modal-navigation { align-items: center; flex-shrink: 0; padding-top: 30px; }
    .cr-menu-modal-nav { gap: 12px; }
    .cr-menu-modal-nav span { width: 48px; height: 48px; font-size: 25px; }
    .cr-menu-modal-nav em { font-size: 11px; letter-spacing: .08em; }
}

@media (max-width: 767px) and (max-height: 800px) {
    .cr-menu-modal-panel { padding-top: 22px; padding-bottom: 12px; }
    .cr-menu-modal-eyebrow { margin-bottom: 9px; }
    .cr-menu-modal-title { font-size: clamp(28px, 7.8vw, 34px); }
    .cr-menu-modal-rule { margin: 11px 0 18px; }
    .cr-menu-modal-label { margin-bottom: 8px; }
    .cr-menu-modal-ingredients { min-height: 84px; padding-bottom: 10px; font-size: 15px; line-height: 1.4; }
    .cr-menu-modal-price { margin: 10px 0; font-size: 31px; }
    .cr-menu-modal-cta { min-height: 48px; }
    .cr-menu-modal-navigation { padding-top: 12px; }
}

@media (max-width: 375px) {
    .cr-menu-modal-panel { padding-left: 20px; padding-right: 20px; }
    .cr-menu-modal-cta { width: 150px; }
    .cr-menu-modal-nav { gap: 6px; }
    .cr-menu-modal-nav em { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
    .cr-menu-modal { transition: none; }
    .cr-menu-modal-panel.is-changing .cr-menu-modal-content { animation: none; }
}