/* ==========================================================================
   KURO FUSION — theme stylesheet
   --------------------------------------------------------------------------
   The look of the page. index.tpl carries no <style> block of its own beyond
   the five custom properties it writes from the restaurant's colour settings,
   and js/kuro-fusion.js carries no styling — behaviour there, appearance here.

   The design is the editorial light one from the reference build: a warm paper
   ground, white cards with a hairline border, one accent colour, and three
   faces — Cormorant Garamond for headings, Inter for text, JetBrains Mono for
   the small uppercase labels. The owner's "Background home page" setting can
   flip the whole page to a dark ground; that is the [data-kf-theme="dark"]
   block below, and nothing else in this file needs to know which is in force.

   Sections
     1. Tokens
     2. Page ground and shared pieces
     3. Navigation
     4. Hero
     5. Story
     6. Menu — bar, filters, cards
     7. Gallery
     8. Contact
     9. Footer
    10. Language switcher
    11. Shared framework overlays  (the platform's own dialogs)
    12. Small screens
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   Light is the design's own ground; the dark block only restates the same
   names. Every rule below reads tokens, so neither mode is a special case.
   -------------------------------------------------------------------------- */

:root {
    /* Ground. --kf-bg is the paper, --kf-card the raised surface a dish or a
       contact detail sits on, --kf-band the alternating section ground. */
    --kf-bg: #fdfcf9;
    --kf-card: #ffffff;
    --kf-band: #f7f5f1;
    --kf-footer: #1a1a1a;

    /* Ink, from the strongest to the faintest. */
    --kf-text: #1a1a1a;
    --kf-text-soft: rgba(26, 26, 26, 0.72);
    --kf-text-muted: rgba(26, 26, 26, 0.58);
    --kf-text-faint: rgba(26, 26, 26, 0.42);

    /* Rules and washes. */
    --kf-line: rgba(0, 0, 0, 0.08);
    --kf-line-strong: rgba(0, 0, 0, 0.16);
    --kf-scrim: rgba(0, 0, 0, 0.04);
    --kf-glass: rgba(253, 252, 249, 0.92);
    --kf-field: #ffffff;

    /* Brand. index.tpl restates these in the <head> from the restaurant's own
       colour settings, so changing a setting moves the accent through the whole
       page. --kf-accent-rgb carries the same colour as bare channels so
       transparencies can follow it too. */
    --kf-accent: #bc9e82;
    --kf-accent-rgb: 188, 158, 130;
    --kf-name-color: #1a1a1a;
    --kf-subtitle-color: #1a1a1a;
    --kf-category-color: #1a1a1a;

    /* The accent as used for text. On paper it needs to be darker than the
       accent itself, which is chosen to look right as a fill. */
    --kf-accent-ink: var(--kf-accent);

    /* The one colour on the page that is not the restaurant's own. "New" and
       "reduced" are the two things a reader is meant to spot without looking
       for them, and the accent cannot mark them — it is already the dish
       number, the price, the section labels and the order button, so a badge
       wearing it says "more of the same". Red is the exception, and the only
       one. It holds in both grounds, so it is not restated below. */
    --kf-flag: #c0392b;
    --kf-flag-rgb: 192, 57, 43;

    /* Aliases the overlay rules in 11 grew up with. */
    --kf-gold: var(--kf-accent);
    --kf-dark: var(--kf-bg);
    --kf-gray: var(--kf-card);
    --kf-surface: var(--kf-card);
    --kf-surface-2: var(--kf-band);
    --kf-muted: var(--kf-text-muted);
}

/* The owner's dark setting. Same names, different values — and the footer
   stops being a plate of its own because the whole page is that colour. */
:root[data-kf-theme="dark"] {
    --kf-bg: #0f0f0f;
    --kf-card: #161616;
    --kf-band: #131313;
    --kf-footer: #0a0a0a;

    --kf-text: #f5f3ef;
    --kf-text-soft: rgba(245, 243, 239, 0.76);
    --kf-text-muted: rgba(245, 243, 239, 0.6);
    --kf-text-faint: rgba(245, 243, 239, 0.4);

    --kf-line: rgba(255, 255, 255, 0.09);
    --kf-line-strong: rgba(255, 255, 255, 0.18);
    --kf-scrim: rgba(255, 255, 255, 0.05);
    --kf-glass: rgba(15, 15, 15, 0.92);
    --kf-field: #1b1b1b;

    --kf-name-color: #ffffff;
    --kf-subtitle-color: #ffffff;
    --kf-category-color: #ffffff;
}

/* The owner's "Restaurant name", "Restaurant subtitle" and "Menu category
   banner" colours are almost always picked against a dark theme — white, in
   practice — and on this design's paper ground a white heading is simply not
   there. In light mode the ink wins; the dark mode keeps their choice. The
   selector is two levels deep on purpose: index.tpl writes those three tokens
   on a bare :root AFTER this stylesheet, so only a more specific rule can
   answer it. */
:root:not([data-kf-theme="dark"]) {
    --kf-name-color: var(--kf-text);
    --kf-subtitle-color: var(--kf-text);
    --kf-category-color: var(--kf-text);
}

/* --------------------------------------------------------------------------
   2. Page ground and shared pieces
   -------------------------------------------------------------------------- */

body {
    background: var(--kf-bg);
    color: var(--kf-text);
}

/* The design frames the page: a fixed maximum width with a hairline down each
   side, so the content reads as a printed sheet rather than a browser window.
   The header repeats the same width so the two edges line up. */
.kf-shell {
    max-width: 1400px;
    margin: 0 auto;
    border-left: 1px solid var(--kf-line);
    border-right: 1px solid var(--kf-line);
    overflow-x: hidden;
}

/* Every section is separated by a rule rather than by a change of colour —
   that is what holds the editorial feel together. */
.kf-section {
    border-bottom: 1px solid var(--kf-line);
}

/* The small uppercase label above a heading. */
.kf-eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-accent-ink);
}

.kf-heading {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.9rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--kf-text);
}

.kf-rule {
    width: 3rem;
    height: 2px;
    background: var(--kf-accent);
}

/* Two buttons, one filled and one outlined, used everywhere an action is
   offered — the hero, the cards, the dialogs' own buttons are in 11. */
.kf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem 2rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.kf-btn--solid {
    background: var(--kf-accent);
    border-color: var(--kf-accent);
    color: #ffffff;
}

.kf-btn--solid:hover {
    background: rgba(var(--kf-accent-rgb), 0.86);
    color: #ffffff;
}

.kf-btn--ghost {
    background: transparent;
    border-color: var(--kf-accent);
    color: var(--kf-accent-ink);
}

.kf-btn--ghost:hover {
    background: var(--kf-accent);
    color: #ffffff;
}

/* A card: white on paper, hairline border, a shadow soft enough to read as
   paper rather than as a raised UI element. */
.kf-card {
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px -16px rgba(0, 0, 0, 0.25);
}

/* The load screen. Held by kuro-fusion.js until the images are in. */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;
    background: var(--kf-bg);
    transition: opacity 0.7s ease;
}

/* The box is the flex item here, and a flex item will not go narrower than its
   own longest word, so without min-width: 0 it holds a box wider than a phone
   and the centring has nothing to centre. */
.kf-preloader__box {
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

/* The tag and the !important answer the "Restaurant name" size the font dialog
   compiles: on a load screen that size is not a design choice, it is whatever
   fits between the edges of the device. */
h1.kf-preloader__title {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--kf-accent-ink);
}

.kf-preloader__sub {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--kf-text-faint);
    margin-top: 0.75rem;
}

/* Photographs. The design keeps them square-cornered and slightly cooled, and
   lifts them to full colour on hover — the same treatment across hero, story
   and gallery. */
.kf-photo {
    filter: contrast(1.04) saturate(0.94);
    transition: filter 0.6s ease, transform 0.7s ease;
}

.kf-photo:hover {
    filter: contrast(1.04) saturate(1.06);
}

/* --------------------------------------------------------------------------
   3. Navigation
   -------------------------------------------------------------------------- */

.kf-nav {
    background: var(--kf-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--kf-line);
    transition: padding 0.3s ease, box-shadow 0.3s ease;
}

.kf-nav.is-scrolled {
    box-shadow: 0 1px 20px -12px rgba(0, 0, 0, 0.5);
}

.kf-nav__brand-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--kf-text);
    transition: color 0.3s ease;
}

.kf-nav__brand:hover .kf-nav__brand-name { color: var(--kf-accent-ink); }

.kf-nav__brand-sub {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--kf-accent-ink);
}

/* A nav link keeps room for its own underline at all times, so nothing shifts
   when the reader scrolls into the section it points at. */
.kf-nav__link {
    position: relative;
    padding: 0.5rem 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-text-soft);
    transition: color 0.25s ease;
}

.kf-nav__link:hover { color: var(--kf-text); }

.kf-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--kf-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.kf-nav__link.is-active {
    color: var(--kf-accent-ink);
}

.kf-nav__link.is-active::after { transform: scaleX(1); }

.kf-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--kf-text-soft);
    transition: color 0.25s ease, background-color 0.25s ease;
}

.kf-nav__icon:hover {
    color: var(--kf-accent-ink);
    background: var(--kf-scrim);
}

/* ── The header's three actions ───────────────────────────────────────────
   Two round icon buttons — WhatsApp and the telephone — and one filled pill.
   Round here and square everywhere else on purpose: these are controls, not
   part of the reading, and the shape is what tells them apart from the links
   beside them at a glance. */
.kf-nav__round {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--kf-line-strong);
    color: var(--kf-accent-ink);
    font-size: 19px;
    line-height: 1;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.kf-nav__round:hover {
    border-color: var(--kf-accent);
    background: rgba(var(--kf-accent-rgb), 0.12);
    color: var(--kf-accent-ink);
}

/* WhatsApp keeps its own green: the mark is recognised by its colour before it
   is read as a shape, and repainting it in the restaurant's accent costs that. */
.kf-nav__round--whatsapp { color: #25d366; }

.kf-nav__round--whatsapp:hover {
    border-color: #25d366;
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
}

.kf-nav__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.9rem;
    border-radius: 999px;
    background: var(--kf-accent);
    border: 1px solid var(--kf-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 0.3s ease;
}

.kf-nav__cta:hover { opacity: 0.85; color: #ffffff; }

/* The mobile panel drops out of the bar rather than sliding in from the side:
   the bar is already full width, and a drawer would need a scrim of its own. */
.kf-nav__panel {
    max-height: 0;
    overflow: hidden;
    background: var(--kf-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: max-height 0.35s ease, border-color 0.35s ease;
}

.kf-nav__panel.is-open {
    max-height: 85vh;
    overflow-y: auto;
    border-bottom-color: var(--kf-line);
}

.kf-nav__panel-link {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-text-soft);
    transition: color 0.25s ease, background-color 0.25s ease;
}

.kf-nav__panel-link:hover,
.kf-nav__panel-link.is-active {
    color: var(--kf-accent-ink);
    background: rgba(var(--kf-accent-rgb), 0.1);
}

/* --------------------------------------------------------------------------
   4. Hero
   Text on the left, the restaurant's banner on the right — not a full-bleed
   photograph with type on top. The banner is the owner's slideshow or video
   either way, so it keeps its own frame and the words keep the paper.
   -------------------------------------------------------------------------- */

.kf-hero {
    background: var(--kf-bg);
}

.kf-hero__content { min-width: 0; }

/* The kicker over the name. Its size is pinned rather than left to the
   "Welcome text" setting, which the font dialog compiles with !important: that
   setting is one number chosen on some other theme, and at the 63px restaurants
   routinely save there this label would be larger than the restaurant's own
   name and would push the hero apart. It is a mono kicker by design, so the
   tag in the selector and the !important are what keep it one — the dialog's
   family, weight and style still come through. */
p.kf-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: clamp(0.625rem, 1vw, 0.75rem) !important;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--kf-accent-ink);
    line-height: 1.5;
    overflow-wrap: break-word;
}

/* The name is the page's largest type, so it is the one place a size has to
   follow the viewport rather than a fixed number. */
.kf-hero__name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.4rem, 6vw, 4.75rem);
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--kf-name-color);
    overflow-wrap: break-word;
}

.kf-hero__tagline {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.1rem, 2.4vw, 1.65rem);
    font-style: italic;
    font-weight: 400;
    color: var(--kf-subtitle-color);
    overflow-wrap: break-word;
}

.kf-hero__text {
    color: var(--kf-text-muted);
    font-weight: 300;
    font-size: 0.9rem;
    line-height: 1.8;
}

/* ── The hero's entrance ──────────────────────────────────────────────────
   The kicker, the name, the tagline and each action button arrive one after
   another rather than as one block. AOS is not used for this: it fades a whole
   element on scroll, and what this needs is a sequence, started at a moment
   only kuro-fusion.js knows — when the preloader clears.

   The delay is a custom property so the stagger can be handed out in JS, where
   the number of buttons is known (the owner decides how many there are), and
   so the same rule can be replayed with different timings when the banner
   changes slide. */
.kf-hero__reveal {
    opacity: 0;
    transform: translateY(22px);
}

/* Nothing animates on the way out. The buttons carry .kf-btn, whose transition
   would otherwise fade them away when the replay takes .is-in off — the reader
   would watch them leave before watching them arrive. Their hover transition is
   unaffected: outside that one frame of the replay these elements always have
   .is-in. */
.kf-hero__reveal:not(.is-in) { transition: none; }

/* The transition belongs to the finished state, not to the starting one. The
   class above is added by kuro-fusion.js after the page has already painted,
   so with the transition on the base rule the browser would animate the hiding
   too — an 0.8s fade-out of a hero that was already on screen, before the
   entrance could even begin. Declared here it plays only on the way in, and
   taking .is-in away again (which is how the replay works) hides instantly. */
.kf-hero__reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

/* A reader who asked for less motion gets the finished state, not the start of
   an animation that never plays. */
@media (prefers-reduced-motion: reduce) {
    .kf-hero__reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* The two facts under the rule: today's hours and the telephone number. */
.kf-hero__fact-label {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--kf-accent-ink);
    margin-bottom: 0.35rem;
}

.kf-hero__fact-value {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.05rem;
    color: var(--kf-text);
}

a.kf-hero__fact-value:hover { color: var(--kf-accent-ink); }

/* The banner frame. A fixed aspect on wide screens so the column matches the
   text beside it whatever the uploaded picture happens to be. */
.kf-hero__media {
    position: relative;
    overflow: hidden;
    background: var(--kf-band);
    min-height: 420px;
}

.kf-hero__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
}

.kf-hero__slide.is-active { opacity: 1; }

/* The card that sits over the foot of the banner, carrying the two details a
   first-time visitor looks for. */
.kf-hero__badge {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--kf-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--kf-line);
}

.kf-hero__badge-label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-accent-ink);
    margin-bottom: 0.3rem;
}

.kf-hero__badge-value {
    font-size: 12px;
    font-weight: 500;
    color: var(--kf-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.kf-hero__badge-value i { color: var(--kf-accent-ink); }

/* --------------------------------------------------------------------------
   5. Story
   The owner's landing-page blocks. Their own "image left / image right"
   setting drives the order, so the rules here only dress the two halves.
   -------------------------------------------------------------------------- */

.kf-story__media {
    position: relative;
    overflow: hidden;
    background: var(--kf-band);
    border: 1px solid var(--kf-line);
}

.kf-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kf-story__media:hover img { transform: scale(1.05); }

.kf-story__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--kf-text);
}

.kf-story__body {
    color: var(--kf-text-muted);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.9;
}

.kf-story__body p { margin-bottom: 1rem; }
.kf-story__body p:last-child { margin-bottom: 0; }

/* The badge the design lays over the picture: one number, one claim. */
.kf-story__badge {
    position: absolute;
    right: -1rem;
    bottom: -1rem;
    max-width: 210px;
    padding: 1.25rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line-strong);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.5);
}

.kf-story__badge-value {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--kf-accent-ink);
    line-height: 1;
}

.kf-story__badge-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--kf-text-soft);
    margin-top: 0.5rem;
}

/* --------------------------------------------------------------------------
   6. Menu
   A control panel (search + property filters), a row of category tabs, then
   one category at a time as a two-column grid of cards.
   -------------------------------------------------------------------------- */

.kf-menu__panel {
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px -18px rgba(0, 0, 0, 0.3);
}

.kf-search {
    position: relative;
    width: 100%;
}

.kf-search__icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--kf-text-faint);
    pointer-events: none;
}

.kf-search__input {
    width: 100%;
    padding: 0.85rem 2.5rem 0.85rem 2.75rem;
    background: var(--kf-bg);
    border: 1px solid var(--kf-line-strong);
    color: var(--kf-text);
    font-size: 0.85rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.kf-search__input::placeholder { color: var(--kf-text-faint); }

.kf-search__input:focus {
    outline: none;
    border-color: var(--kf-accent);
    box-shadow: 0 0 0 1px var(--kf-accent);
}

/* Clears the field. Hidden until there is something to clear — kuro-fusion.js
   toggles .is-visible. */
.kf-search__clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    padding: 0.35rem;
    color: var(--kf-text-faint);
    cursor: pointer;
}

.kf-search__clear.is-visible { display: inline-flex; }
.kf-search__clear:hover { color: var(--kf-accent-ink); }

/* The property chips (vegan, spicy, …). Built by kuro-fusion.js from the
   properties the dishes actually carry, so a restaurant that marks nothing
   gets no filter row at all. */
.kf-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.kf-tags:empty { display: none; }

.kf-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--kf-bg);
    border: 1px solid var(--kf-line-strong);
    color: var(--kf-text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    transition: all 0.25s ease;
    cursor: pointer;
}

/* The chip's icon is the same artwork the cards carry, but js/svg.js has
   already run by the time these are built, so there is no inline <svg> here to
   put a fill on — and a black <img> on this ground is an invisible square. The
   file is used as a mask instead: the shape is the icon, the colour is the
   chip's own, so it follows the accent when the chip is idle and turns white
   with the label when the chip is on. kuro-fusion.js hands over the URL. */
.kf-tag__icon {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    -webkit-mask: var(--kf-tag-icon) center / contain no-repeat;
    mask: var(--kf-tag-icon) center / contain no-repeat;
}

/* The icon is the accent while the label stays quiet, so a row of chips reads
   as a row of marks rather than a row of words. */
.kf-tag .kf-tag__icon { color: var(--kf-accent-ink); }

.kf-tag:hover { border-color: var(--kf-accent); color: var(--kf-text); }

.kf-tag.is-active,
.kf-tag.is-active .kf-tag__icon {
    color: #ffffff;
}

.kf-tag.is-active {
    background: var(--kf-accent);
    border-color: var(--kf-accent);
}

/* The category tabs. One rule under the row, the open tab marked by a heavier
   line in the accent — the reference design's own device. */
.kf-cats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--kf-line-strong);
}

.kf-cats:empty { display: none; }

.kf-cat-tab {
    flex: 0 0 auto;
    padding: 0.9rem 1.35rem;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--kf-text-muted);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
}

.kf-cat-tab:hover { color: var(--kf-text); }

.kf-cat-tab.is-active {
    color: var(--kf-accent-ink);
    border-bottom-color: var(--kf-accent);
    font-weight: 700;
}

/* A category and its dishes. Closed groups are display:none rather than
   hidden, so the grid never reserves space for them. */
.kf-cat-group.is-hidden { display: none; }

.kf-cat-group__title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.kf-cat-group__title h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.35rem;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--kf-category-color);
}

.kf-cat-group__title .kf-cat-group__line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(to right, rgba(var(--kf-accent-rgb), 0.35), transparent);
}

.kf-cat-group__thumb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    object-fit: cover;
    border: 1px solid var(--kf-line);
}

.kf-cat-group__desc {
    margin: -0.75rem 0 1.5rem;
    color: var(--kf-text-muted);
    font-size: 0.85rem;
    font-weight: 300;
}

.kf-menu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .kf-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── The dish card ────────────────────────────────────────────────────────
   Printed by includes/templates/kuro_fusion.tlp.php. It keeps the platform's
   own hooks — .go-to-order-items to order, .view-info-menu to open the
   allergen popup — so ordering works here exactly as on every other theme. */
.menu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
    padding: 1.35rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.menu-card:hover {
    border-color: rgba(var(--kf-accent-rgb), 0.45);
    box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0.55);
}

.menu-card.is-hidden { display: none; }

/* A dish with a photograph becomes a row; without one the text keeps the whole
   card rather than reserving an empty frame. */
.menu-card--has-thumb .menu-card__inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.menu-card__thumb {
    flex: 0 0 88px;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border: 1px solid var(--kf-line);
    background: var(--kf-band);
}

.menu-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.menu-card:hover .menu-card__thumb img { transform: scale(1.06); }

.menu-card__body { flex: 1 1 auto; min-width: 0; }

.menu-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.menu-card__name {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kf-text);
    transition: color 0.25s ease;
}

.menu-card:hover .menu-card__name { color: var(--kf-accent-ink); }

/* The dish number, set in the mono face the way the design marks any code.
   The full stop after it is added in kuro_fusion.tlp.php, not drawn here: most
   restaurants already type one into the field, and a stop from CSS printed
   "S1.." for every one of them. */
.menu-card__id {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kf-accent-ink);
    margin-right: 0.5rem;
}


/* ── The status badge ─────────────────────────────────────────────────────
   What replaced the corner ribbon. It sits in the line of type it belongs to
   rather than across the card's corner, so it costs the card nothing: the
   price chip and the order button keep the card's own right edge whether a
   dish is marked or not, and a marked card lines up with the plain card beside
   it.

   The shape is the one motion and kuro draw, on this design's own face: two
   plates rather than one. The lower plate is the same shape in a darker tone,
   offset down and to the right; the upper one carries the glyph and the word
   and takes a hairline of white along its top and left edges. Offset plus edge
   light is the whole of the depth — no blur and no box-shadow, which is what
   keeps it crisp at this size where a soft shadow would read as a smudge.

   Both are pseudo-elements, so the markup stays a span with two spans in it.
   They have to be positioned and ordered explicitly: the skew below makes the
   badge a stacking context, and inside one a z-index:-1 child would paint over
   the badge's own background rather than under it. So the badge itself carries
   no background at all — ::before is the lower plate, ::after the upper one,
   and the two spans are lifted above both.

   Four states, and the state is the only thing that changes: each modifier
   restates the two tones and nothing else. They are the spec's colours rather
   than --kf-flag, and that is deliberate — one red cannot tell four states
   apart, and on this design the accent is already the dish number, the price
   chip, the section labels and the order button.

   The mono face is kept: it is what this design sets every small uppercase
   label in, and a badge in the body face beside a mono dish number would be
   the one label on the card that did not belong to the system. */
.menu-card__badge {
    --badge-face: #555;
    --badge-deep: #333;
    --badge-lift: 3px;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.15rem 0.35rem;
    color: #fff;
    background: transparent;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    transform: translateY(-1px) skewX(-12deg);
}

/* A dish may carry several marks at once — dish_status is a list, not a
   choice. They have to read as one run rather than as separate things
   scattered along the line, so they sit closer to each other than the first
   one sits to the name it follows. */
.menu-card__badge + .menu-card__badge {
    margin-left: 0.25rem;
}

/* The lower plate. */
.menu-card__badge::before {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    border-radius: 2px;
    background: var(--badge-deep);
    transform: translate(var(--badge-lift), var(--badge-lift));
}

/* The upper plate, with the light along the two edges that face the source. */
.menu-card__badge::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
    border-top: 1px solid rgba(255, 255, 255, 0.32);
    border-left: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 2px;
    background: var(--badge-face);
}

/* The glyph and the word ride on top of both plates. They are not counter-
   skewed: the design leans the whole mark, lettering included. */
.menu-card__badge > span {
    position: relative;
    z-index: 2;
}

.menu-card__badge-icon {
    display: inline-grid;
    width: 0.7rem;
    place-items: center;
    font-size: 0.7rem;
    line-height: 1;
}

/* ── The four states ───────────────────────────────────────────────────── */
.menu-card__badge--beliebt {
    --badge-face: #1fa363;
    --badge-deep: #10613a;
}

.menu-card__badge--angebot {
    --badge-face: #f4643a;
    --badge-deep: #b03516;
}

.menu-card__badge--neu {
    --badge-face: #3b82f6;
    --badge-deep: #1d4ed8;
}

.menu-card__badge--chef-tipp {
    --badge-face: #e8a221;
    --badge-deep: #96620b;
}

/* The card hover recolours the whole name to the accent; the badge is not part
   of that. Its word is white on its own plate and stays there — the colour is
   the state, not the theme. */
.menu-card:hover .menu-card__badge {
    color: #fff;
}

/* The lower plate hangs the lift below the name's line box and is absolutely
   placed, so it takes no height of its own and would otherwise land on the
   line under it. Only a card that carries a mark pays for the room, which is
   what :has() is for — a plain card keeps its rhythm exactly as drawn. */
.menu-card__name:has(.menu-card__badge) {
    padding-bottom: 4px;
}

@media (max-width: 640px) {
    .menu-card__badge {
        --badge-lift: 2px;

        gap: 0.2rem;
        margin-left: 0.4rem;
        padding: 0.1rem 0.3rem;
        font-size: 0.5625rem;
    }

    .menu-card__badge + .menu-card__badge {
        margin-left: 0.2rem;
    }

    .menu-card__badge-icon {
        width: 0.65rem;
        font-size: 0.65rem;
    }

    .menu-card__name:has(.menu-card__badge) {
        padding-bottom: 3px;
    }
}

/* Allergens as the letters a printed card would set; the full names are in the
   info popup the mark beside them opens. */
.menu-card__alg {
    font-size: 9px;
    letter-spacing: 0.05em;
    color: var(--kf-text-faint);
    margin-left: 0.3rem;
    vertical-align: super;
}

.menu-card__props {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.45rem;
    vertical-align: middle;
    white-space: nowrap;
}

/* The property and allergen marks (vegan, spicy, gluten-free, …). js/svg.js
   swaps every <img class="svg"> for the inline <svg> it points at, keeping the
   classes — so both shapes have to be sized here, and the inline one needs a
   fill: these files carry no fill of their own, so an unstyled one lands on
   black, which is an invisible blob on the dark setting and a smudge on the
   light one. They are the accent, like every other mark on the card. */
.menu-card__alg img,
.menu-card__alg svg,
.menu-card__props img,
.menu-card__props .svg,
.menu-card__props svg {
    width: 15px;
    height: 15px;
    object-fit: contain;
    vertical-align: middle;
    fill: var(--kf-accent-ink);
}

/* ── The card as the way into the dish dialog ─────────────────────────────
   The ⓘ mark beside the name is gone and the card itself opens the popup, so
   it has to look like something you can press and has to answer the keyboard.

   The two things inside it that keep a job of their own get their own cursor
   back, so a reader can tell before clicking that "Bestellen" is not the dish
   info — and the allergen letters keep the help cursor they had, because they
   are still what the popup explains. */
.menu-card {
    cursor: pointer;
}

.menu-card:focus-visible {
    outline: 2px solid var(--kf-accent);
    outline-offset: 3px;
}

.menu-card__order,
.menu-card a,
.menu-card button {
    cursor: pointer;
}

/* The mark that opened the allergen popup. It is no longer printed on a card —
   the card is the target now — but the rule stays: js/kuro-fusion.js routes
   the card's click through one hidden element wearing this class, which is how
   it reaches the handler restaurant.js already binds. */
.view-info-menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: 0.4rem;
    border-radius: 50%;
    border: 1px solid rgba(var(--kf-accent-rgb), 0.5);
    color: var(--kf-accent-ink);
    font-size: 9px;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.view-info-menu:hover {
    background: var(--kf-accent);
    border-color: var(--kf-accent);
    color: #ffffff;
}

/* The price, boxed the way the design prints it — a chip on the paper ground
   rather than loose type.

   1.25rem rather than 1rem. The dish name beside it is 1rem in a bold sans;
   the price is set in Cormorant, a serif with a small eye and light strokes,
   so at the same nominal size it read as the quieter of the two. It is not:
   after the name it is the thing a reader is looking for on a menu, and it is
   the number they have to be able to take in from a phone held at arm's
   length. The step is in the type, not in the chip — the padding is unchanged
   so the chip still lines up with the badge row above it. */
.menu-card__price {
    flex: 0 0 auto;
    padding: 0.25rem 0.625rem;
    background: var(--kf-bg);
    border: 1px solid var(--kf-line);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--kf-accent-ink);
}

/* price_format() prints these two itself, so the class names are its own. */
.menu-card__price .menu-before-price-discount {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    text-decoration: line-through;
    color: var(--kf-text-faint);
}

.menu-card__price .menu-percent-Discount {
    display: block;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.65rem;
    color: var(--kf-text-faint);
}

.menu-card__desc {
    color: var(--kf-text-muted);
    font-size: 0.78rem;
    font-weight: 300;
    line-height: 1.7;
    margin-bottom: 0.9rem;
}

.menu-card__foot {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
    margin-top: auto;
    border-top: 1px solid var(--kf-line);
}

.menu-card__order {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    background: var(--kf-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.25s ease;
    cursor: pointer;
}

.menu-card__order:hover {
    background: rgba(var(--kf-accent-rgb), 0.86);
    color: #ffffff;
}

/* Shown when a search or a filter leaves nothing. */
.kf-menu__empty {
    display: none;
    padding: 4rem 1.5rem;
    text-align: center;
    border: 1px dashed var(--kf-line-strong);
    background: var(--kf-card);
}

.kf-menu__empty.is-visible { display: block; }

.kf-menu__empty h3 {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kf-text-soft);
    margin-bottom: 0.5rem;
}

.kf-menu__empty p {
    color: var(--kf-text-muted);
    font-size: 0.85rem;
    font-weight: 300;
    max-width: 26rem;
    margin: 0 auto;
}

/* While a search is running the category tabs are meaningless — every group is
   open and only the matching dishes are printed. */
.kf-menu__notice {
    display: none;
    margin-bottom: 2rem;
    font-size: 0.85rem;
    color: var(--kf-text-muted);
}

.kf-menu__notice.is-visible { display: block; }
.kf-menu__notice strong { color: var(--kf-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   7. Gallery
   -------------------------------------------------------------------------- */

.kf-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) { .kf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kf-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kf-gallery__item {
    position: relative;
    display: block;
    height: 320px;
    overflow: hidden;
    background: var(--kf-band);
    border: 1px solid var(--kf-line);
}

.kf-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.kf-gallery__item:hover img { transform: scale(1.06); }

/* The caption plate only exists on hover, and it is dark whatever the page's
   ground is — it sits on a photograph, not on the paper. */
.kf-gallery__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    background: linear-gradient(to top, rgba(12, 12, 12, 0.9), rgba(12, 12, 12, 0.35) 45%, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.kf-gallery__item:hover .kf-gallery__overlay { opacity: 1; }

.kf-gallery__label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-accent);
    margin-bottom: 0.4rem;
}

.kf-gallery__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   8. Contact
   -------------------------------------------------------------------------- */

.kf-contact-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
}

.kf-contact-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--kf-bg);
    border: 1px solid var(--kf-line-strong);
    color: var(--kf-accent-ink);
    font-size: 1.1rem;
}

.kf-contact-card__label {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-text-faint);
    margin-bottom: 0.35rem;
}

.kf-contact-card__value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--kf-text);
    word-break: break-word;
}

a.kf-contact-card__value:hover { color: var(--kf-accent-ink); }

.kf-contact-card__note {
    font-size: 0.75rem;
    font-weight: 300;
    color: var(--kf-text-muted);
    margin-top: 0.25rem;
}

/* The week, as the design sets it: a label on the left, the hours in a mono
   chip on the right, and today marked. */
.kf-hours {
    padding: 1.5rem;
    background: var(--kf-card);
    border: 1px solid var(--kf-line);
}

.kf-hours__head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--kf-accent-ink);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.kf-hours__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
    border-bottom: 1px solid var(--kf-line);
    font-size: 0.78rem;
}

.kf-hours__row:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.kf-hours__day {
    font-weight: 500;
    color: var(--kf-text-soft);
}

.kf-hours__value {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    background: var(--kf-bg);
    border: 1px solid var(--kf-line);
    color: var(--kf-accent-ink);
    white-space: nowrap;
}

.kf-hours__row.is-today .kf-hours__day { color: var(--kf-text); font-weight: 700; }

.kf-hours__row.is-today .kf-hours__value {
    background: var(--kf-accent);
    border-color: var(--kf-accent);
    color: #ffffff;
}

/* The map keeps a frame like everything else, and the transparent layer holds
   a scroll gesture on the page until the reader deliberately hovers it. */
.kf-map {
    position: relative;
    height: 340px;
    overflow: hidden;
    background: var(--kf-band);
    border: 1px solid var(--kf-line);
}

.kf-map iframe { width: 100%; height: 100%; border: 0; }

.kf-map__shield {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.kf-map:hover .kf-map__shield { display: none; }

/* The order call to action, printed over the restaurant's own banner picture. */
.kf-order-cta {
    position: relative;
    height: 260px;
    overflow: hidden;
    border: 1px solid var(--kf-line);
}

/* The picture behind the order button. It is a <video> when the restaurant's
   banner is one — a banner set to video has no still to borrow — so both tags
   are named here rather than only the img the panel started with. */
.kf-order-cta img,
.kf-order-cta video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.kf-order-cta:hover img,
.kf-order-cta:hover video { transform: scale(1.05); }

.kf-order-cta__veil {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem;
    text-align: center;
    background: rgba(12, 12, 12, 0.55);
    transition: background-color 0.4s ease;
}

.kf-order-cta:hover .kf-order-cta__veil { background: rgba(12, 12, 12, 0.4); }

.kf-order-cta__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. Footer
   The one plate that is dark in both modes — the design's own full stop.
   -------------------------------------------------------------------------- */

.kf-footer {
    background: var(--kf-footer);
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    font-weight: 300;
}

.kf-footer__quote {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.5rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
}

.kf-footer__brand {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.35rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #faf9f5;
}

.kf-footer__brand-sub {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--kf-accent);
}

.kf-footer__title {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #faf9f5;
    margin-bottom: 1rem;
}

.kf-footer a { color: inherit; transition: color 0.25s ease; }
.kf-footer a:hover { color: #ffffff; }

.kf-footer__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.kf-footer__row i { color: var(--kf-accent); }

.kf-footer__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.kf-footer__social:hover {
    border-color: var(--kf-accent);
    color: var(--kf-accent);
}

.kf-footer__hours {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.78rem;
    margin-bottom: 0.45rem;
}

.kf-footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.kf-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    cursor: pointer;
}

.kf-top:hover {
    background: var(--kf-accent);
    border-color: var(--kf-accent);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   10. Language switcher
   A hover-and-click dropdown. The panel is wrapped in a padded shell whose top
   edge touches the button, so the pointer never leaves the hover area on its
   way down — a margin there would drop the menu the moment it is aimed at.
   -------------------------------------------------------------------------- */

.kf-drop { position: relative; }

.kf-drop__menu {
    position: absolute;
    top: 100%;
    right: 0;
    padding-top: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
    z-index: 60;
}

.kf-drop:hover .kf-drop__menu,
.kf-drop.is-open .kf-drop__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.kf-drop__panel {
    min-width: 190px;
    padding: 0.5rem 0;
    background: var(--kf-card);
    border: 1px solid var(--kf-line-strong);
    box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.55);
}

.kf-lang-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 1rem;
    text-align: left;
    font-size: 13px;
    color: var(--kf-text-soft);
    transition: color 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.kf-lang-item:hover {
    color: var(--kf-accent-ink);
    background: var(--kf-scrim);
}

/* Flags, keyed on the language name — that is what qr_languages stores and
   what the LANGS loop prints. A language with no artwork keeps the empty slot,
   so the names stay aligned. */
.kf-flag {
    display: inline-block;
    flex: 0 0 22px;
    width: 22px;
    height: 15px;
    background: var(--kf-line) center/cover no-repeat;
    box-shadow: inset 0 0 0 1px var(--kf-line-strong);
}

.kf-flag--English    { background-image: url(../images/flag/united-kingdom.png); }
.kf-flag--French     { background-image: url(../images/flag/france.png); }
.kf-flag--German     { background-image: url(../images/flag/germany.png); }
.kf-flag--Spanish    { background-image: url(../images/flag/spain.png); }
.kf-flag--Russian    { background-image: url(../images/flag/russia.png); }
.kf-flag--Turkish    { background-image: url(../images/flag/turkey.png); }
.kf-flag--Vietnamese { background-image: url(../images/flag/vietnam.png); }
.kf-flag--Italian    { background-image: url(../images/flag/italy.png); }
.kf-flag--Japanese   { background-image: url(../images/flag/japan.png); }
.kf-flag--Polish     { background-image: url(../images/flag/poland.png); }
.kf-flag--Portuguese { background-image: url(../images/flag/portugal.png); }
.kf-flag--Korean     { background-image: url(../images/flag/south-korea.png); }

/* --------------------------------------------------------------------------
   11. Shared framework overlays
   Adapted from the kuro theme, which solved the same problem: the order,
   booking, login and allergen dialogs arrive with the platform's own markup
   (see the popup block in index.tpl), and dialog-with-tabs.css lays them out
   for a stock look. These rules move them onto this theme's ground without
   touching the shared stylesheet, and they read the tokens in 1, so they
   follow the light and the dark setting alike.
   -------------------------------------------------------------------------- */

/* dialog-with-tabs.css gives .dialog-with-tabs its box (max-width, centring,
   the close button). The dish popup uses .menu-dialog-with-tabs instead, whose
   box lives only in the modern-cuisine stylesheet — so this theme draws it here,
   otherwise the popup opens full-bleed with no padding. */
.menu-dialog-with-tabs {
    padding: 0;
    max-width: 600px;
    margin: 40px auto;
    position: relative;
    box-sizing: border-box;
    text-align: left;
    border-radius: 2px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

.menu-dialog-with-tabs .mfp-close,
.dialog-with-tabs .mfp-close {
    color: var(--kf-text);
    opacity: 0.8;
}

.popup-tab-content,
.popup-tab-content-login,
.popup-notification-header {
    padding: 20px 24px;
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* dialog-with-tabs.css paints the tab strip white — a light header bar on a
   dark dialog, with the close × landing on it. Everything about the strip is
   restated here rather than patched, because "white" is set on the row, on the
   active tab and on its hover state separately. */
.popup-dialog .popup-tabs-nav {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 24px;
    background: transparent;
    border-bottom: 1px solid var(--kf-line);
}

.popup-dialog .popup-tabs-nav li,
.popup-dialog .popup-tabs-nav li.active,
.popup-dialog .popup-tabs-nav li.active a:hover {
    float: none;
    height: auto;
    line-height: normal;
    background: transparent;
    border: 0;
}

.popup-dialog .popup-tabs-nav li a,
.popup-dialog .popup-tabs-nav li.active a {
    display: inline-block;
    padding: 16px 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-gold);
    background: transparent;
    /* The shared rule ends every tab with a light 1px rule, which on a dark
       panel reads as a stray white stroke beside the label. */
    border: 0;
}

.popup-dialog .popup-tabs-nav li.active::after { display: none; }

/* Inner pieces of the dish popup, filled in by restaurant.js. Same class
   names the other themes use — only the palette changes. */
.popup-tabs-container .category_name {
    color: var(--kf-gold);
    font-size: 10px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.popup-tabs-container .menu_desc {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 300;
    color: var(--kf-muted);
}

.menu_detail { align-self: center; flex-grow: 1; }
.menu_detail h4 { display: flex; align-items: baseline; }

.menu_detail .menu_title {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    font-style: italic;
    color: var(--kf-text);
}

.menu_detail .menu_dots {
    flex-grow: 1;
    margin: 0 8px;
    border-bottom: 1px dotted var(--kf-line-strong);
}

.menu_detail .menu_price,
.popup-tab-content .menu_detail .menu_price {
    color: var(--kf-gold);
    font-size: 16px;
    text-align: right;
    white-space: nowrap;
}

h4.allegie_title {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-gold);
    margin: 16px 0 8px;
}

.popup-tab-content ul { list-style: none; margin: 0; padding: 0; }
.popup-tab-content ul li { font-size: 13px; color: var(--kf-muted); padding: 3px 0; }
.popup-tab-content ul li img,
.popup-tab-content ul li svg { width: 18px; height: 18px; fill: var(--kf-gold); margin-right: 8px; vertical-align: middle; }

.menu-avatar-add-extra {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: cover;
    display: block;
    margin-bottom: 16px;
}

/* ── The dish popup ───────────────────────────────────────────────────────
   restaurant.js builds this content at runtime out of the platform's own
   utility classes (.d-flex, .align-items-center, .margin-left-auto) and its
   own checkbox widget. Those all live in the modern-cuisine stylesheet, which
   this theme does not load — so without the block below the extras stack vertically,
   the prices sit under their labels and the checkboxes fall back to the
   browser's default. Everything here is scoped to the dialog so it cannot
   leak into the page. */

/* The category name is a sibling of the content block, not part of it, so the
   block's padding never reached it and it sat flush against the panel edge.
   It gets its own, matching the 24px gutter below; the wider right inset keeps
   a long category clear of the close button in that corner. */
.menu-dialog-with-tabs .category_name {
    padding: 20px 56px 0 24px;
    margin: 0;
}

.menu-dialog-with-tabs .menu-popup-tab-content { padding: 12px 24px 24px; }

.popup-dialog .d-flex { display: flex; }
.popup-dialog .align-items-center { align-items: center; }
.popup-dialog .margin-left-auto { margin-left: auto; }
.popup-dialog .margin-bottom-5 { margin-bottom: 5px; }

/* One extras group: "Topping 1" + how many may be picked. */
.popup-dialog .category_extra_wraper,
.popup-dialog .menu-price-option-wrapper {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--kf-line);
}

.popup-dialog .section-headline h5 {
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-gold);
    margin: 0 0 4px;
}

.popup-dialog .select_max_title {
    font-size: 12px;
    font-weight: 300;
    color: var(--kf-muted);
    margin: 0 0 10px;
}

/* One option row: label left, price and its checkbox right. */
.popup-dialog .menu-extras-item,
.popup-dialog .menu-price-option-item {
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--kf-line);
}

.popup-dialog .menu-extras-item:last-child,
.popup-dialog .menu-price-option-item:last-child { border-bottom: 0; }

.popup-dialog .extras-item-title,
.popup-dialog .price-item-title {
    font-size: 14px;
    font-weight: 400;
    color: var(--kf-text);
}

/* row-reverse so the price reads before the box it belongs to, which is the
   order the eye wants when the whole group is right-aligned. */
.popup-dialog .checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
    margin: 0;
}

/* The platform's own tick sprite is not loaded here, so the box is drawn from
   scratch rather than left as the browser's default white square, which is the
   one bright thing on an otherwise dark panel. */
.popup-dialog .checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--kf-line-strong);
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.popup-dialog .checkbox input[type="checkbox"]:hover { border-color: var(--kf-gold); }

.popup-dialog .checkbox input[type="checkbox"]:checked {
    background: var(--kf-gold);
    border-color: var(--kf-gold);
}

.popup-dialog .checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--kf-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.popup-dialog .checkbox input[type="checkbox"]:disabled { opacity: 0.35; cursor: not-allowed; }

.popup-dialog .checkbox label {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.popup-dialog .extras-item-price,
.popup-dialog .item-price {
    font-size: 13px;
    color: var(--kf-gold);
    white-space: nowrap;
}

/* The platform's own tick graphic needs its sprite; the native box is doing
   the job here, so the decorative span is dropped rather than left blank. */
.popup-dialog .checkbox-icon { display: none; }

/* Allergens, additives, properties. The icons are <img class="svg"> that
   js/svg.js swaps for inline <svg> — their paths carry no fill of their own,
   so a fill on the <svg> is what colours them. */
#Allegie_detail { border-top-color: var(--kf-line) !important; }

#Allegie_detail ul {
    list-style: none;
    margin: 0 0 4px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

#Allegie_detail li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 300;
    color: var(--kf-muted);
}

#Allegie_detail li img,
#Allegie_detail li svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: var(--kf-gold);
}

/* Close button. dialog-with-tabs.css positions it for .dialog-with-tabs only,
   and the dish popup is .menu-dialog-with-tabs — without this it has no box to
   sit in and disappears against the header. Magnific renders it as an <a> for
   inline content and a <button> elsewhere, so the selector must not name a tag. */
.menu-dialog-with-tabs .mfp-close,
.popup-dialog .mfp-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 28px;
    color: var(--kf-text);
    background: transparent;
    opacity: 0.75;
    z-index: 20;
}

.menu-dialog-with-tabs .mfp-close:hover,
.popup-dialog .mfp-close:hover { opacity: 1; color: var(--kf-gold); }

/* The bundled magnific build ships the close control with no text in it — the
   × is a feather-icons glyph the shared stylesheet draws in ::before, but only
   for .dialog-with-tabs. The dish popup is .menu-dialog-with-tabs, so without
   this it is a 40px hit area with nothing drawn in it. */
.menu-dialog-with-tabs .mfp-close::before,
.popup-dialog .mfp-close::before {
    content: "\ea02";
    font-family: feather-icons;
    font-size: 26px;
    line-height: 40px;
    display: block;
}

.popup-dialog,
#popup-notification {
    background: var(--kf-gray) !important;
    color: var(--kf-text) !important;
    border: 1px solid rgba(var(--kf-accent-rgb), 0.2);
    border-radius: 2px;
}

.popup-dialog .popup-tabs-container,
.popup-dialog .popup-tab-content,
.popup-dialog .popup-tab-content-login {
    background: transparent !important;
    color: var(--kf-text);
}

.popup-dialog h2,
.popup-dialog h3,
.popup-dialog h4,
.popup-dialog label,
.popup-dialog p,
.popup-dialog li,
.popup-dialog span {
    color: var(--kf-text);
}

.popup-dialog input[type="text"],
.popup-dialog input[type="tel"],
.popup-dialog input[type="email"],
.popup-dialog input[type="password"],
.popup-dialog input[type="date"],
.popup-dialog input[type="time"],
.popup-dialog input[type="number"],
.popup-dialog select,
.popup-dialog textarea {
    background: var(--kf-field) !important;
    border: 1px solid var(--kf-line) !important;
    color: var(--kf-text) !important;
    border-radius: 2px;
}

.popup-dialog input::placeholder,
.popup-dialog textarea::placeholder { color: var(--kf-text-faint); }

/* ── Forms inside the dialogs ─────────────────────────────────────────────
   The booking, login and register forms are laid out entirely with the
   platform's grid and field classes (.bookmarks-input-group, .with-border,
   .full-width, .button, the margin-* helpers). Those live in the
   modern-cuisine stylesheet, so here every field would otherwise collapse
   to its intrinsic width and the label, the input and the submit button would
   share one line. This gives them a layout of their own. */

.popup-dialog .text-center { text-align: center; }
.popup-dialog .full-width { width: 100%; }
.popup-dialog .margin-bottom-5 { margin-bottom: 5px; }
.popup-dialog .margin-bottom-15 { margin-bottom: 15px; }
.popup-dialog .margin-top-10 { margin-top: 10px; }

.popup-dialog .section-title-booking,
.popup-dialog .popup-tab-content h2 {
    font-family: "Cormorant Garamond", serif;
    font-size: 26px;
    text-align: center;
    color: var(--kf-text);
    margin: 0 0 20px;
}

/* One field per row: label above, control below, full width. */
.popup-dialog .bookmarks-input-group,
.popup-dialog .submit-field,
.popup-dialog .form-group {
    display: block;
    margin-bottom: 14px;
}

/* The login, register and forgot-password forms mark their fields with an icon
   that belongs INSIDE the control (.input-with-icon-left, the Line Awesome
   glyphs from includes/assets/css/icons.css). What makes it sit there is a
   position pair in the modern-cuisine stylesheet — without it the wrapper is a
   plain block, so the icon is printed as a line of its own above the field and
   the form reads as if it had stray characters in it. */
.popup-dialog .input-with-icon-left {
    position: relative;
    display: block;
}

.popup-dialog .input-with-icon-left > i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    color: var(--kf-gold);
    pointer-events: none;
    z-index: 1;
}


.popup-dialog .bookmarks-input-group label,
.popup-dialog .submit-field label,
.popup-dialog .submit-field h5 {
    display: block;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-gold);
    margin: 0 0 6px;
}

.popup-dialog input[type="text"],
.popup-dialog input[type="tel"],
.popup-dialog input[type="email"],
.popup-dialog input[type="password"],
.popup-dialog input[type="date"],
.popup-dialog input[type="time"],
.popup-dialog input[type="number"],
.popup-dialog select,
.popup-dialog textarea {
    display: block;
    width: 100%;
    padding: 11px 13px;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    box-sizing: border-box;
}

/* Room for the icon inside the field. This has to sit AFTER the block above,
   not with the other .input-with-icon-left rules: the two selectors weigh the
   same, so the later one is the one that applies. */
.popup-dialog .input-with-icon-left input { padding-left: 42px; }

.popup-dialog select { cursor: pointer; }
.popup-dialog textarea { min-height: 90px; resize: vertical; }

/* The date and time controls paint their own picker glyph in the UA's colour,
   which is black on black here. */
.popup-dialog input[type="date"]::-webkit-calendar-picker-indicator,
.popup-dialog input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}

.popup-dialog .button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 24px;
    font-size: 11px;
    cursor: pointer;
}

.popup-dialog .error-message,
.popup-dialog .form-error {
    display: block;
    color: #f87171;
    font-size: 12px;
    margin-top: 5px;
}

.popup-dialog .register_success_box,
.popup-dialog .order-success-message {
    text-align: center;
    color: var(--kf-gold);
    font-size: 14px;
    padding: 12px 0;
}

.popup-dialog .qr-success-icon { font-size: 34px; display: block; margin-bottom: 8px; }

/* The line under the login form that offers registration and the password
   reset. Its markup asks for centring with Bootstrap's utility classes, which
   are not on the page, so the two halves ran together against the left edge —
   and both links inherited plain body colour, which is not how anything else
   on this theme says "this is a link". */
.popup-dialog .modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 4px 16px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--kf-line);
    font-size: 13px;
    color: var(--kf-text-muted);
}

.popup-dialog .modal-footer a {
    color: var(--kf-gold);
    transition: opacity 0.25s ease;
}

.popup-dialog .modal-footer a:hover { opacity: 0.75; text-decoration: underline; }

/* ── The owner's notice ───────────────────────────────────────────────────
   Driven by the popup queue in js/kuro-fusion.js. Two columns: their picture
   fills one side edge to edge, what they wrote sits on the other with room to
   be read. The picture is the reason this notice is opened at all — a dish, an
   offer, a new opening — so it is given half the panel rather than a thumbnail
   floated above the text.

   The panel is wider than the other dialogs, so the width is declared here
   rather than inherited from .dialog-with-tabs. */
#popup-notification.kf-notice {
    display: flex;
    align-items: stretch;
    max-width: 900px;
    width: calc(100vw - 32px);
    margin: 40px auto;
    padding: 0;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.55);
}

.kf-notice__figure {
    flex: 0 0 46%;
    position: relative;
    background: var(--kf-band);
    overflow: hidden;
}

/* Edge to edge. The shared markup pins its own height and margins in a style
   attribute, which is why these carry !important — an inline declaration
   cannot be answered any other way. js/kuro-fusion.js decides whether there is
   a picture at all and marks the panel .is-imageless when there is not. */
#popup-notification .popup-content-img {
    display: block;
    width: 100%;
    height: 100% !important;
    min-height: 320px;
    object-fit: cover;
    margin: 0 !important;
}

/* No picture, no column: the message takes the whole panel and the panel
   narrows to the width a single column of text should be. */
#popup-notification.is-imageless { max-width: 560px; }
#popup-notification.is-imageless .kf-notice__figure { display: none; }

.kf-notice__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 3rem 3rem 2.75rem;
}

.kf-notice__eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--kf-text-faint);
    margin: 0;
}

/* The title is the notice's voice, so it is set at display size — the same
   face the hero uses, not the dialog's small heading. */
#popup-notification .kf-notice__title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 400;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--kf-text);
    text-align: left;
    padding: 0;
    margin: -0.35rem 0 0;
    overflow-wrap: break-word;
}

#popup-notification .kf-notice__text {
    text-align: left !important;
    font-family: "Inter", sans-serif;
    font-size: 14px !important;
    font-weight: 300;
    line-height: 1.8;
    color: var(--kf-text-muted);
    max-width: 44ch;
}

.kf-notice__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.kf-notice__cta {
    display: inline-block;
    padding: 0.95rem 2rem;
    background: var(--kf-accent);
    border: 1px solid var(--kf-accent);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.kf-notice__cta:hover { opacity: 0.85; color: #ffffff; }

/* The quiet way out, beside the loud one. */
.kf-notice__dismiss {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--kf-text-faint);
    transition: color 0.3s ease;
}

.kf-notice__dismiss:hover { color: var(--kf-text); }

/* magnific prints the close button inside the panel, where it would land on
   the picture. Boxed and pinned to the text side instead. */
#popup-notification .mfp-close {
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: var(--kf-scrim);
    border: 1px solid var(--kf-line-strong);
    color: var(--kf-text);
    opacity: 1;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

#popup-notification .mfp-close:hover {
    background: var(--kf-accent);
    border-color: var(--kf-accent);
    color: #ffffff;
}

/* On a phone the two columns become two rows, and the picture gives up most of
   its height — it is an illustration there, not half the composition. */
@media (max-width: 767px) {
    #popup-notification.kf-notice {
        flex-direction: column;
        margin: 20px auto;
    }

    .kf-notice__figure { flex: 0 0 auto; }

    #popup-notification .popup-content-img {
        height: 200px !important;
        min-height: 0;
    }

    .kf-notice__body { padding: 1.75rem 1.5rem 1.5rem; gap: 1rem; }
    #popup-notification .kf-notice__title { font-size: 1.75rem; }
}

.popup-dialog .button,
.popup-dialog button[type="submit"] {
    background: var(--kf-gold) !important;
    border: 1px solid var(--kf-gold) !important;
    color: var(--kf-dark) !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border-radius: 2px;
}

.mfp-bg { background: #000 !important; opacity: 0.9 !important; }

/* Cookie banner. Its markup is the platform's (.cookieConsentContainer), and
   the styling normally comes from the modern-cuisine stylesheet — which this theme
   does not load, so it is redrawn here. */
.cookieConsentContainer {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 9998;
    width: min(340px, calc(100vw - 48px));
    padding: 24px;
    background: var(--kf-gray);
    border: 1px solid rgba(var(--kf-accent-rgb), 0.25);
    border-radius: 2px;
    box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
}

.cookieConsentContainer .cookieTitle h3 {
    font-family: "Cormorant Garamond", serif;
    font-size: 22px;
    color: var(--kf-text);
    margin-bottom: 10px;
}

.cookieConsentContainer .cookieDesc p {
    font-size: 12px;
    line-height: 1.7;
    color: var(--kf-muted);
    margin-bottom: 16px;
}

.cookieConsentContainer .cookieDesc a { color: var(--kf-gold); }

.cookieConsentContainer .cookieAcceptButton {
    display: inline-block;
    padding: 10px 22px;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 1px solid var(--kf-gold);
    color: var(--kf-gold);
    transition: all 0.35s ease;
}

.cookieConsentContainer .cookieAcceptButton:hover {
    background: var(--kf-gold);
    color: var(--kf-dark);
}

/* --------------------------------------------------------------------------
   12. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* The frame's side rules would only eat width on a phone. */
    .kf-shell { border-left: 0; border-right: 0; }

    /* The hero, back under the theme's own responsive sizes. "Restaurant name"
       and "Restaurant subtitle" on the settings page are written into the page
       head as a flat size with !important — one number, chosen while looking at
       a desktop — and at the sizes restaurants routinely save there the name
       runs off the sides of a phone, where a single word cannot wrap out of it.
       Tag + class is what decides between two !important declarations. */
    h1.kf-hero__name {
        font-size: clamp(1.7rem, 9vw, 2.75rem) !important;
    }

    p.kf-hero__tagline {
        font-size: clamp(1rem, 4.5vw, 1.4rem) !important;
    }

    .kf-hero__media { min-height: 300px; }

    .kf-hero__badge {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem 1.25rem;
    }

    /* The story badge hangs off the picture on a wide screen; on a phone that
       would push the page sideways, so it comes back inside. */
    .kf-story__badge {
        position: static;
        max-width: none;
        margin-top: -1px;
    }

    .kf-tags { justify-content: flex-start; }

    /* Every category on screen at once, wrapped, rather than one row that
       scrolls sideways and cuts the last tab off at the edge with nothing to
       say it can be swiped. */
    .kf-cats {
        gap: 0.25rem;
        justify-content: flex-start;
    }

    .kf-cat-tab {
        padding: 0.65rem 0.85rem;
        font-size: 11px;
        letter-spacing: 0.06em;
    }

    .menu-card { padding: 1.1rem; }
    .menu-card__name { font-size: 0.9rem; }

    .kf-gallery__item { height: 260px; }

    .kf-contact-card { padding: 1rem; }

    .cookieConsentContainer { left: 16px; bottom: 16px; }
}
