/*
 * Base Content: menus, galleries, announcements, CTA. Themed ONLY through CSS variables.
 * Shared with the other Kickbytes plugins:  --bk-accent --bk-accent-ink --bk-ink --bk-ink-muted --bk-paper --bk-surface --bk-line
 *                                           --bk-danger --bk-success --bk-radius --bk-font-body --bk-gap
 * Added by this plugin:
 *   --bk-font-display            headings (menu/group titles, CTA)
 *   --bk-sticky-offset           height of a sticky site header, so anchors and the menu navigation clear it
 *   --bk-menu-price-ink          price colour               --bk-menu-leader  dotted line style (e.g. 2px dotted)
 *   --bk-gallery-gap             gap between images         --bk-gallery-radius  image corner radius
 *   --bk-gallery-shadow          resting image shadow       --bk-lightbox-bg / --bk-lightbox-ink
 *   --bk-announce-info-bg/-ink, --bk-announce-promo-bg/-ink, --bk-announce-urgent-bg/-ink
 * The literals below are only fallbacks for sites that define none of them.
 */
.bkn, .bkn-notice, .bkn-lb {
    --_accent: var(--bk-accent, light-dark(#4f46e5, #818cf8));
    --_accent-ink: var(--bk-accent-ink, light-dark(#ffffff, #0b0d12));
    --_ink: var(--bk-ink, light-dark(#14151a, #eceef3));
    --_muted: var(--bk-ink-muted, light-dark(#565b6b, #a3a9b8));
    --_paper: var(--bk-paper, light-dark(#ffffff, #0e1015));
    --_surface: var(--bk-surface, light-dark(#f4f5f8, #171a21));
    --_line: var(--bk-line, light-dark(#d4d7e0, #3a3f4c));
    --_danger: var(--bk-danger, light-dark(#b91c1c, #f87171));
    --_success: var(--bk-success, light-dark(#15803d, #4ade80));
    --_radius: var(--bk-radius, 0.625rem);
    --_gap: var(--bk-gap, 1rem);
    --_display: var(--bk-font-display, var(--bk-font-body, inherit));
    font-family: var(--bk-font-body, inherit);
}
.bkn *, .bkn *::before, .bkn *::after, .bkn-notice *, .bkn-lb * { box-sizing: border-box; }
.bkn { color: var(--_ink); }
.bkn [hidden], .bkn-notice[hidden], .bkn-lb:not([open]) { display: none !important; }
.bkn-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bkn-empty { padding: 1rem; border: 1px dashed var(--_line); border-radius: var(--_radius); color: var(--_muted); }
.bkn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .7rem 1.4rem;
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; color: var(--_accent-ink); background: var(--_accent);
    border: 2px solid var(--_accent); border-radius: var(--bk-btn-radius, 999px);
}
.bkn-btn:hover { background: color-mix(in oklab, var(--_accent) 86%, var(--_ink)); }
.bkn a:focus-visible, .bkn button:focus-visible, .bkn [tabindex]:focus-visible, .bkn-notice a:focus-visible, .bkn-notice button:focus-visible, .bkn-lb button:focus-visible {
    outline: 3px solid color-mix(in oklab, var(--_accent) 65%, transparent); outline-offset: 2px;
}

/* =============================== MENU =============================== */
.bkn-tabs { display: none; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.bkn-js .bkn-tabs { display: flex; }
.bkn-tab { min-height: 2.75rem; padding: .55rem 1.2rem; font: inherit; font-weight: 700; color: var(--_ink); background: transparent; border: 2px solid var(--_line); border-radius: 999px; cursor: pointer; }
.bkn-tab[aria-selected="true"] { color: var(--_accent-ink); background: var(--_accent); border-color: var(--_accent); }
.bkn-js [data-bkn-tabs] .bkn-panel[hidden] { display: none; }
.bkn-panel + .bkn-panel { margin-top: 4rem; }
.bkn-js [data-bkn-tabs] .bkn-panel + .bkn-panel { margin-top: 0; }

.bkn-menu__head { max-width: 46rem; margin-bottom: 1.5rem; }
.bkn-menu__title { margin: 0; font-family: var(--_display); font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); line-height: 1.05; letter-spacing: -.02em; }
.bkn-menu__intro { margin: .9rem 0 0; font-size: 1.15rem; color: var(--_muted); line-height: 1.6; }
.bkn-menu__nav { position: sticky; top: var(--bk-sticky-offset, 0px); z-index: 8; margin: 0 0 2rem; padding: .6rem 0; background: color-mix(in oklab, var(--_paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--_line); }
.bkn-menu__nav ul { display: flex; gap: .5rem; margin: 0; padding: 0 0 2px; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.bkn-menu__nav a { display: flex; align-items: center; min-height: 2.75rem; padding: .45rem 1.1rem; white-space: nowrap; text-decoration: none; color: var(--_ink); font-weight: 600; border-radius: 999px; border: 1px solid transparent; }
.bkn-menu__nav a:hover { background: var(--_surface); }
.bkn-menu__nav a[aria-current="true"] { color: var(--_accent-ink); background: var(--_accent); }
.bkn-group { margin: 0 0 3.25rem; scroll-margin-top: calc(var(--bk-sticky-offset, 0px) + 4.5rem); }
.bkn-group__title { margin: 0 0 .35rem; font-family: var(--_display); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); line-height: 1.15; letter-spacing: -.01em; }
.bkn-group__title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: .6rem; background: var(--_accent); border-radius: 2px; }
.bkn-group__note { margin: .8rem 0 0; color: var(--_muted); max-width: 44rem; }
.bkn-items { display: grid; gap: 1.5rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.bkn-item { display: grid; grid-template-columns: 1fr; gap: 1rem; break-inside: avoid; }
.bkn-item.has-image { grid-template-columns: 5.5rem 1fr; align-items: start; }
@media (min-width: 40rem) { .bkn-item.has-image { grid-template-columns: 8rem 1fr; } }
.bkn-item__img { margin: 0; aspect-ratio: 1; border-radius: var(--_radius); overflow: hidden; background: var(--_surface); }
.bkn-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bkn-item__row { display: flex; align-items: baseline; gap: .6rem; }
.bkn-item__name { font-weight: 700; font-size: 1.125rem; line-height: 1.3; }
.bkn-item__leader { flex: 1 1 1rem; min-width: 1rem; border-bottom: var(--bk-menu-leader, 2px dotted) var(--_line); transform: translateY(-.28em); }
.bkn-item__price { flex: none; font-weight: 800; white-space: nowrap; color: var(--bk-menu-price-ink, var(--_accent)); font-variant-numeric: tabular-nums; }
.bkn-item__variant { font-weight: 500; color: var(--_muted); font-size: .8em; }
.bkn-item__desc { margin: .3rem 0 0; color: var(--_muted); line-height: 1.55; max-width: 40rem; }
.bkn-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin: .5rem 0 0; font-size: .8rem; }
.bkn-tag { padding: .12rem .6rem; border-radius: 999px; font-weight: 700; font-size: .72rem; letter-spacing: .02em; color: var(--_ink); background: color-mix(in oklab, var(--_accent) 14%, transparent); border: 1px solid color-mix(in oklab, var(--_accent) 28%, transparent); }
.bkn-tag--veg, .bkn-tag--vegan, .bkn-tag--gf { background: color-mix(in oklab, var(--_success) 16%, transparent); border-color: color-mix(in oklab, var(--_success) 34%, transparent); }
.bkn-tag--spicy { background: color-mix(in oklab, var(--_danger) 14%, transparent); border-color: color-mix(in oklab, var(--_danger) 32%, transparent); }
.bkn-tag--new { color: var(--_accent-ink); background: var(--_accent); border-color: var(--_accent); }
.bkn-allergens { color: var(--_muted); }
.bkn-menu[data-layout="columns"] .bkn-items { display: block; columns: 2 24rem; column-gap: 3.5rem; }
.bkn-menu[data-layout="columns"] .bkn-item { margin-bottom: 1.5rem; }
.bkn-menu[data-layout="cards"] .bkn-items { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.bkn-menu[data-layout="cards"] .bkn-item { align-content: start; padding: 1.25rem; background: var(--_surface); border: 1px solid var(--_line); border-radius: calc(var(--_radius) * 1.6); }
.bkn-menu[data-layout="cards"] .bkn-item__leader { display: none; }
.bkn-menu[data-layout="cards"] .bkn-item__row { justify-content: space-between; }
.bkn-menu__foot { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--_line); color: var(--_muted); font-size: .9rem; }
.bkn-menu__foot p { margin: 0 0 .75rem; }
.bkn-slider--menu { margin-bottom: 2.5rem; }

/* =============================== SLIDER (menu pages, gallery slider) =============================== */
.bkn-slider { position: relative; }
.bkn-slider__track { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: calc(var(--_radius) * 1.6); overscroll-behavior-x: contain; }
.bkn-slider__track::-webkit-scrollbar { display: none; }
.bkn-slider__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; position: relative; background: var(--_surface); border-radius: calc(var(--_radius) * 1.6); overflow: hidden; }
@media (min-width: 62rem) { .bkn-slider:not(.bkn-slider--menu) .bkn-slider__slide { flex-basis: calc((100% - 1rem) / 1.35); } }
.bkn-slider__link { display: block; cursor: zoom-in; }
.bkn-slider__img { display: block; width: 100%; height: auto; aspect-ratio: var(--bk-slide-ratio, 4 / 3); object-fit: cover; }
.bkn-slider--menu .bkn-slider__img { object-fit: contain; max-height: 80vh; }
.bkn-slider__caption { position: absolute; inset: auto 0 0 0; margin: 0; padding: 2rem 1.25rem 1rem; color: #fff; font-size: .95rem; background: linear-gradient(transparent, rgb(0 0 0 / .62)); }
.bkn-slider__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; padding: 0; transform: translateY(-50%); cursor: pointer; color: var(--_ink); background: color-mix(in oklab, var(--_paper) 92%, transparent); border: 1px solid var(--_line); border-radius: 50%; box-shadow: 0 4px 14px rgb(0 0 0 / .18); }
.bkn-slider__btn svg { width: 1.3rem; height: 1.3rem; }
.bkn-slider__prev { left: .75rem; } .bkn-slider__next { right: .75rem; }
.bkn-slider__btn:hover { background: var(--_accent); color: var(--_accent-ink); border-color: var(--_accent); }
.bkn-slider__btn[disabled] { opacity: .35; pointer-events: none; }
.bkn-slider__dots { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; }
.bkn-slider__dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--_line); transition: background-color .2s, transform .2s; }
.bkn-slider__dots span.is-active { background: var(--_accent); transform: scale(1.25); }

/* =============================== GALLERY =============================== */
.bkn-gallery__grid { display: grid; gap: var(--bk-gallery-gap, .75rem); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 62rem) { .bkn-gallery__grid { grid-template-columns: repeat(var(--bk-cols, 3), 1fr); } }
.bkn-gallery__item { margin: 0; min-width: 0; }
.bkn-gallery__item figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--bk-gallery-radius, var(--_radius)); background: var(--_surface); box-shadow: var(--bk-gallery-shadow, none); }
.bkn-gallery__link { display: block; cursor: zoom-in; }
.bkn-gallery__img { display: block; width: 100%; height: auto; aspect-ratio: var(--bk-ratio, 4 / 3); object-fit: cover; transition: transform .6s cubic-bezier(.2, 0, 0, 1); }
.bkn-gallery[data-layout="masonry"] .bkn-gallery__img { aspect-ratio: auto; }
.bkn-gallery__item:hover .bkn-gallery__img { transform: scale(1.045); }
.bkn-gallery[data-layout="masonry"] .bkn-gallery__grid { display: block; column-count: 2; column-gap: var(--bk-gallery-gap, .75rem); }
@media (min-width: 62rem) { .bkn-gallery[data-layout="masonry"] .bkn-gallery__grid { column-count: var(--bk-cols, 3); } }
.bkn-gallery[data-layout="masonry"] .bkn-gallery__item { break-inside: avoid; margin-bottom: var(--bk-gallery-gap, .75rem); }
.bkn-gallery[data-layout="mosaic"] .bkn-gallery__grid { grid-auto-flow: dense; grid-auto-rows: 1fr; }
.bkn-gallery[data-layout="mosaic"] .bkn-gallery__img { aspect-ratio: auto; height: 100%; min-height: 9rem; }
@media (min-width: 40rem) { .bkn-gallery[data-layout="mosaic"] .bkn-gallery__item:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; } }
.bkn-gallery__caption { padding: .55rem .15rem 0; font-size: .9rem; color: var(--_muted); }
.bkn-gallery[data-captions="overlay"] .bkn-gallery__caption { position: absolute; inset: auto 0 0 0; padding: 2.2rem 1rem .85rem; color: #fff; background: linear-gradient(transparent, rgb(0 0 0 / .68)); opacity: 0; transform: translateY(.4rem); transition: opacity .25s, transform .25s; pointer-events: none; }
.bkn-gallery[data-captions="overlay"] .bkn-gallery__item:hover .bkn-gallery__caption, .bkn-gallery[data-captions="overlay"] .bkn-gallery__item:focus-within .bkn-gallery__caption { opacity: 1; transform: none; }
.bkn-filters, .bkn-more { display: none; }
.bkn-js .bkn-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.bkn-js .bkn-more { display: block; margin: 1.5rem 0 0; text-align: center; }
.bkn-chip { min-height: 2.75rem; padding: .4rem 1rem; font: inherit; font-weight: 600; color: var(--_ink); background: transparent; border: 2px solid var(--_line); border-radius: 999px; cursor: pointer; }
.bkn-chip.is-active { color: var(--_accent-ink); background: var(--_accent); border-color: var(--_accent); }
.bkn-js .bkn-gallery [data-extra]:not(.is-shown) { display: none; }
.bkn-gallery .bkn-gallery__item[hidden] { display: none; }

/* =============================== LIGHTBOX =============================== */
html.bkn-lb-open { overflow: hidden; }
.bkn-lb { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--bk-lightbox-ink, #fff); background: var(--bk-lightbox-bg, light-dark(#0b0d12f0, #000000f2)); }
.bkn-lb::backdrop { background: transparent; }
.bkn-lb[open] { display: grid; animation: bkn-fade .22s ease; }
.bkn-lb__stage { position: relative; display: grid; place-items: center; padding: 3.5rem 1rem 4rem; min-height: 0; }
.bkn-lb__figure { display: grid; justify-items: center; gap: .8rem; margin: 0; max-width: 100%; }
.bkn-lb__img { display: block; max-width: min(100%, 94vw); max-height: calc(100dvh - 10rem); object-fit: contain; border-radius: calc(var(--_radius) * .6); touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-drag: none; }
.bkn-lb__caption { max-width: 50rem; margin: 0; text-align: center; font-size: 1rem; line-height: 1.5; }
.bkn-lb__caption:empty { display: none; }
.bkn-lb__count { position: absolute; bottom: 1.1rem; left: 50%; margin: 0; transform: translateX(-50%); font-size: .85rem; letter-spacing: .08em; opacity: .85; font-variant-numeric: tabular-nums; }
.bkn-lb__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; cursor: pointer; color: inherit; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .28); border-radius: 50%; backdrop-filter: blur(6px); }
.bkn-lb__btn svg { width: 1.4rem; height: 1.4rem; }
.bkn-lb__btn:hover { background: rgb(255 255 255 / .26); }
.bkn-lb__close { top: .9rem; right: .9rem; } .bkn-lb__prev { left: .9rem; top: 50%; transform: translateY(-50%); } .bkn-lb__next { right: .9rem; top: 50%; transform: translateY(-50%); }
@keyframes bkn-fade { from { opacity: 0; } }

/* =============================== ANNOUNCEMENTS =============================== */
.bkn-notice {
    --_n-bg: var(--bk-announce-promo-bg, var(--_accent)); --_n-ink: var(--bk-announce-promo-ink, var(--_accent-ink));
    position: relative; color: var(--_n-ink); background: var(--_n-bg);
}
.bkn-notice--info { --_n-bg: var(--bk-announce-info-bg, var(--_surface)); --_n-ink: var(--bk-announce-info-ink, var(--_ink)); }
.bkn-notice--urgent { --_n-bg: var(--bk-announce-urgent-bg, var(--_danger)); --_n-ink: var(--bk-announce-urgent-ink, light-dark(#ffffff, #1a0606)); }
.bkn-notice__text { margin: 0; font-weight: 600; line-height: 1.4; }
.bkn-notice__link { color: inherit; font-weight: 800; text-underline-offset: .2em; white-space: nowrap; }
.bkn-notice__close { position: absolute; top: 50%; right: .6rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; transform: translateY(-50%); cursor: pointer; color: inherit; background: transparent; border: 0; border-radius: 50%; }
.bkn-notice__close svg { width: 1.15rem; height: 1.15rem; }
.bkn-notice__close:hover { background: color-mix(in oklab, currentColor 16%, transparent); }
.bkn-notice--bar { padding: .5rem 3.6rem .5rem 1rem; text-align: center; font-size: .95rem; border-bottom: 1px solid var(--_line); }
.bkn-notice--info.bkn-notice--bar { border-bottom-color: var(--_line); }
.bkn-notice--card { position: fixed; left: 1rem; bottom: 1rem; z-index: 80; max-width: min(24rem, calc(100vw - 2rem)); padding: 1rem 3.2rem 1rem 1.15rem; border-radius: calc(var(--_radius) * 1.6); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45); border: 1px solid color-mix(in oklab, var(--_n-ink) 20%, transparent); animation: bkn-rise .5s cubic-bezier(.2, 0, 0, 1) .6s both; }
.bkn-notice--card .bkn-notice__close { top: .55rem; transform: none; right: .5rem; }
@keyframes bkn-rise { from { opacity: 0; transform: translateY(1.2rem); } }

/* =============================== CTA PANEL =============================== */
.bkn-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; padding: clamp(1.5rem, 1rem + 3vw, 3rem); border-radius: calc(var(--_radius) * 2); color: var(--_accent-ink); background: var(--_accent); }
.bkn-cta--surface { color: var(--_ink); background: var(--_surface); border: 1px solid var(--_line); }
.bkn-cta--accent { color: var(--_ink); background: color-mix(in oklab, var(--_accent) 18%, var(--_paper)); border: 1px solid color-mix(in oklab, var(--_accent) 35%, transparent); }
.bkn-cta__copy { flex: 1 1 22rem; }
.bkn-cta__title { margin: 0; font-family: var(--_display); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); line-height: 1.1; }
.bkn-cta__text { margin: .6rem 0 0; font-size: 1.05rem; opacity: .92; max-width: 40rem; }
.bkn-cta .bkn-btn { color: var(--_accent); background: var(--_accent-ink); border-color: var(--_accent-ink); }
.bkn-cta--surface .bkn-btn, .bkn-cta--accent .bkn-btn { color: var(--_accent-ink); background: var(--_accent); border-color: var(--_accent); }

@media (prefers-reduced-motion: reduce) {
    .bkn-gallery__img, .bkn-slider__dots span, .bkn-gallery[data-captions="overlay"] .bkn-gallery__caption { transition: none; }
    .bkn-gallery__item:hover .bkn-gallery__img { transform: none; }
    .bkn-lb[open], .bkn-notice--card { animation: none; }
}