/* pizzamax — shared design system. Brand reference:
   docs/superpowers/specs/2026-09-14-frontend-design-reference.md */

@import url('https://fonts.googleapis.com/css2?family=Staatliches&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
    --color-brand-orange: #FFA836;
    --category-default-bg: #2B2B2B; /* behind the default category drawings; baked into their SVGs too */
    --color-brand-red: #FA1414; /* corporate red */
    --color-brand-red-hover: #D10F0F;
    /* 60/40 blend of brand orange and brand red — deep end of orange gradients. */
    --color-brand-orange-deep: #FD6D28;
    /* Footer band and its social icons, sampled from the approved footer design. */
    --color-footer-bg: #FCB424;
    --color-footer-icon: #504E4A;
    --color-footer-divider: #D4961C; /* darker shade of the footer band */
    --color-heading: #101828;
    --color-body: #475467;
    --color-bg: #F9FAFB;
    --color-surface: #FFFFFF;
    --color-border: #E4E7EC;
    --color-success: #2ECC71;
    --color-danger: #E4572E;
    /* An ingredient the customer removed: dark red text (5.7:1 on its tint), brand-red border. */
    --color-removed: #B91C1C;
    --color-removed-bg: #FEECEC;

    --font-display: 'Staatliches', 'Noto Sans', sans-serif;
    --font-body: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;

    --radius: 10px;
    --shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-body);
    background: var(--color-bg);
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-heading);
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-3);
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; text-transform: lowercase; }
h3 { font-size: 1.25rem; }

a { color: var(--color-brand-red); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-3);
}

/* Header — mobile-first. Both rows stay pinned while scrolling and never
   change size: the top bar (phones, language) at top 0 and .site-header
   (logo, categories, account, cart) right under it. Below
   1024px the categories become one swipeable chip row under the logo. */

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.icon {
    width: 20px; height: 20px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.site-topbar {
    position: sticky;
    top: 0;
    z-index: 49; /* below .site-header, so the hanging logo paints over it */
    background: #000;
    color: #fff;
    font-size: 0.85rem;
    transition: background-color 0.2s ease;
}
.site-topbar__inner {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    /* Start the phone numbers just right of the hanging logo: container
       gutter + logo width (computed server-side from the image, set as
       --logo-w-sm/--logo-w-lg on .site-topbar) + a gap. */
    padding-left: calc(var(--space-3) + var(--logo-w-sm, 100px) + var(--space-3));
    align-items: center;
    min-height: 36px;
}
.site-topbar__phones { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; white-space: nowrap; }
.site-topbar__phones .icon { width: 16px; height: 16px; color: var(--color-brand-orange); }
/* The icon is part of the first number's link, so it stays tappable even
   when a very wide logo leaves room only for the icon on small phones. */
.site-topbar__phone { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; }
.site-topbar a { color: #fff; font-weight: 600; }
/* Phones: both numbers, each with its icon, stacked on two lines;
   side by side from 640px. */
.site-topbar__phones { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; font-size: 0.8rem; line-height: 1.2; }
.site-topbar__phones .site-topbar__phone { min-height: 0; gap: 6px; }
.site-topbar__phones .site-topbar__phone .icon { width: 13px; height: 13px; }

/* Its own tab hanging from the top edge, same shape as .topbar-pages /
   .topbar-admin but black — always visible, even on phones. */
.lang-switcher { display: flex; align-items: center; align-self: stretch; gap: 2px; padding: 0 5px 4px; background: rgba(28, 28, 28, 0.8); border-radius: 0 0 15px 15px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.lang-switcher a {
    display: inline-flex; align-items: center; justify-content: center; align-self: stretch;
    min-width: 36px; min-height: 28px;
    color: #fff; opacity: 0.7; font-size: 0.85rem; text-transform: uppercase; font-weight: 700;
    border-radius: 0 0 12px 12px;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.lang-switcher a:hover { opacity: 1; background: rgba(255,255,255,0.15); text-decoration: none; }
.lang-switcher a.active { opacity: 1; color: var(--color-brand-orange); }
/* Flag mode (Nastavenia › Prepínač jazykov): the current language gets an orange ring. */
.lang-switcher__flag { display: block; width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25); }
.lang-switcher a.active .lang-switcher__flag { box-shadow: 0 0 0 2px var(--color-brand-orange); }
@media (max-width: 479px) {
    /* Three or more languages: narrower pills, so the switcher takes the room
       two took and the phone numbers beside it are not cut off. */
    .lang-switcher:has(a:nth-child(3)) { gap: 0; padding: 0 3px 4px; }
    .lang-switcher:has(a:nth-child(3)) a { min-width: 26px; font-size: 0.8rem; }
}

.site-header {
    position: sticky;
    top: var(--topbar-h, 36px); /* measured in header.php */
    z-index: 50;
    background: #000;
    color: #fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.08);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
/* Pages opening with a full-width picture (home hero, category cover,
   body.has-hero-overlay): both rows are fully transparent at the top and
   turn black once the page is scrolled (.is-scrolled, header.php). Other
   pages have a light background, so the header is black from the start. */
.has-hero-overlay .site-topbar:not(.is-scrolled),
.has-hero-overlay .site-header:not(.is-scrolled) {
    background: transparent;
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .site-topbar, .site-header { transition: none; }
}

.site-header__main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "logo actions"
        "nav  nav";
    align-items: center;
    column-gap: var(--space-3);
}

.site-header__logo {
    grid-area: logo;
    align-self: stretch; /* full row height, so the image can hang over the top bar */
    position: relative;
    display: flex; align-items: center; gap: var(--space-2);
    min-height: 64px; /* second header row height on phones */
    min-width: 0;
}
.site-header__logo:hover { text-decoration: none; }
/* The logo hangs over the top bar from the very top edge of the screen
   (margin-top = −top bar height, 36px) down across the main row.
   It is painted over .site-topbar because it lives in the header's
   higher z-index layer; the negative bottom margin keeps it from
   growing the row. Its size never changes while scrolling. */
.site-header__logo img {
    align-self: flex-start;
    /* Logo height = whole header (top bar 36px + second row 64px / 88px). */
    width: 100px; height: 100px;
    margin-top: -36px;
    margin-bottom: 0;
    border-radius: 50%;
}
/* Uploaded logo (Supervisor → Frontend design): natural shape, no round crop. */
.site-header__logo img.site-header__logo-img--custom {
    width: auto;
    border-radius: 0;
    object-fit: contain;
}
.site-header__logo img.site-header__logo-img--custom { max-width: 232px; }
.site-header__logo-text {
    font-family: var(--font-display);
    color: var(--color-brand-orange);
    font-size: 1.35rem;
    white-space: nowrap;
}

.site-nav {
    grid-area: nav;
    position: relative;
    min-width: 0; /* grid items default to min-content width — without this the chip row widens the page */
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Bleed to the screen edges so chips scroll under the gutter. */
    margin: 0 calc(-1 * var(--space-3));
    padding: var(--space-1) var(--space-3) var(--space-2);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--space-3), #000 calc(100% - var(--space-3)), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 var(--space-3), #000 calc(100% - var(--space-3)), transparent 100%);
}
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a {
    flex: none;
    scroll-snap-align: start;
    display: inline-flex; align-items: center;
    min-height: 40px;
    padding: 0 18px;
    color: rgba(255,255,255,0.75); white-space: nowrap; text-transform: uppercase;
    /* Same display face as the home hero heading (Staatliches has a single
       weight, so no bold — the browser would fake it). */
    font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.03em;
    border-radius: 999px;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
/* Segmented bar: categories on one dark track, the current one a red pill. */
.site-nav a:hover { color: #fff; text-decoration: none; background: rgba(255,255,255,0.07); }
.site-nav a.active { color: #fff; background: var(--color-brand-red); box-shadow: 0 6px 18px -6px rgba(250,20,20,0.75); }
.site-nav a.active:hover { background: var(--color-brand-red); }

.site-header__actions {
    grid-area: actions;
    display: flex; align-items: center; gap: var(--space-1);
}

/* Top bar, right side: account (name + logout icon, or "Prihlásiť") next to
   the language switcher. Desktop only — below 1024px the bottom nav's
   "Účet" tab covers login/account. */
/* Stretched to the full bar height, so the tabs inside always start at the
   very top edge — whichever of them happens to be the tallest. */
.site-topbar__end { display: flex; align-items: center; align-self: stretch; gap: var(--space-2); flex: none; }
/* Account (name link + logout icon, or "Prihlásiť"): same tab shape as
   .topbar-pages / .topbar-admin — black background, rounded bottom
   corners only, hanging from the top edge. Desktop only. */
.topbar-account { display: none; align-items: center; align-self: stretch; gap: 2px; padding: 0 5px 4px; background: rgba(28, 28, 28, 0.8); border-radius: 0 0 15px 15px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); }
.topbar-action {
    display: inline-flex; align-items: center; align-self: stretch; gap: var(--space-1);
    min-height: 28px; justify-content: center;
    padding: 0 var(--space-2);
    background: none; border: 0; border-radius: 0 0 12px 12px;
    color: #fff; font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.topbar-action .icon { width: 16px; height: 16px; }
.topbar-action:hover { color: var(--color-brand-orange); background: rgba(255,255,255,0.15); text-decoration: none; }
.topbar-action:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
.topbar-action__name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Information page links (StaticPages: Kontakty, ...) - desktop only. */
/* A tab hanging from the top edge of the screen, like the logo banner:
   full top-bar height, no top border, rounded bottom corners only. */
.topbar-pages { display: none; align-items: center; align-self: stretch; gap: 2px; padding: 0 5px 4px; background: var(--color-brand-red); border-radius: 0 0 15px 15px; box-shadow: 0 4px 14px rgba(250, 20, 20, 0.3); }
.topbar-pages a { display: inline-flex; align-items: center; align-self: stretch; min-height: 28px; padding: 0 var(--space-3); border-radius: 0 0 12px 12px; /* flush with the top edge, like the tab */ font-size: 0.8rem; line-height: 1; transition: color 0.15s ease, background-color 0.15s ease; }
.topbar-pages a:hover { color: #fff; background: rgba(0, 0, 0, 0.18); text-decoration: none; }
.topbar-pages a[aria-current="page"] { background: #fff; color: var(--color-brand-red); }
.topbar-pages a:focus-visible { outline: 3px solid #fff; outline-offset: 1px; }

.header-action {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-width: 44px; min-height: 44px;
    padding: 0 var(--space-2);
    background: none; border: none; border-radius: var(--radius);
    color: #fff; font: inherit; font-weight: 600; cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.header-action:hover { color: var(--color-brand-orange); background: rgba(255,255,255,0.06); text-decoration: none; }

/* Header cart card: red icon with count badge, "Košík · N ks", total,
   orange arrow to the cart (desktop header; phones use the bottom nav). */
.cart-link {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 54px;
    padding: 6px 8px;
    background: #1A1414; color: #fff;
    border: 1px solid #2E2422; border-radius: 16px;
    white-space: nowrap;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.cart-link:hover { border-color: var(--color-brand-orange); text-decoration: none; transform: translateY(-1px); }
.cart-link__icon {
    position: relative;
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px;
    background: var(--color-brand-red);
}
.cart-link__count {
    position: absolute; top: -6px; right: -6px;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    background: var(--color-brand-orange); color: var(--color-heading);
    border-radius: 999px; font-size: 0.72rem; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 2px #1A1414;
}
.cart-link__count[hidden] { display: none; }
.cart-link__text { display: grid; line-height: 1.15; }
.cart-link__text small { color: #A79E97; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cart-link__text strong { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-link__go {
    display: grid; place-items: center;
    width: 30px; height: 30px; border-radius: 10px;
    background: var(--color-brand-orange); color: var(--color-heading);
}
.cart-link__go .icon { width: 16px; height: 16px; stroke-width: 2.5; }
/* Empty cart: same card, muted — the red/orange returns with the first item. */
.cart-link.is-empty .cart-link__icon { background: #3A2E2C; color: rgba(255,255,255,0.75); }
.cart-link.is-empty .cart-link__go { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.cart-link.is-empty .cart-link__text strong { color: rgba(255,255,255,0.7); }
.cart-link__icon, .cart-link__go { transition: background-color 0.2s ease, color 0.2s ease; }

.site-topbar a:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 3px solid var(--color-brand-orange);
    outline-offset: 2px;
}

@media (min-width: 640px) {
    .site-topbar__phones { flex-direction: row; align-items: center; gap: var(--space-4); font-size: inherit; line-height: inherit; }
    .site-topbar__phones .site-topbar__phone { min-height: 36px; gap: var(--space-2); }
    .site-topbar__phones .site-topbar__phone .icon { width: 16px; height: 16px; }
    .header-action { padding: 0 var(--space-3); }
    .site-header__logo-text { font-size: 1.5rem; }
}

@media (min-width: 1024px) {
    .site-header__main {
        grid-template-columns: auto 1fr auto;
        grid-template-areas: "logo nav actions";
        min-height: 88px; /* second header row height on desktop */
    }
    .site-topbar__inner { padding-left: calc(var(--space-3) + var(--logo-w-lg, 124px) + var(--space-3)); }
    .topbar-account { display: flex; }
    .topbar-pages { display: flex; }
    .header-pages { display: none; }
    .site-header__logo img { width: 124px; height: 124px; }
    .site-header__logo img.site-header__logo-img--custom { max-width: 292px; }
    /* The track hugs its categories and sits centred between logo and cart;
       if the categories don't fit it scrolls instead of overflowing. */
    .site-nav {
        justify-self: center;
        max-width: 100%;
        margin: 0;
        gap: 2px;
        padding: 5px;
        background: #1A1414;
        border: 1px solid #2E2422;
        border-radius: 999px;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header, .site-nav a, .header-action, .topbar-action, .cart-link, .site-header__logo img { transition: none; }
    .cart-link:hover { transform: none; }
}

/* Buttons */

.btn {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 700;
    border: none;
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary { background: var(--color-brand-red); color: #fff; }
.btn-primary:hover { background: var(--color-brand-red-hover); text-decoration: none; }
.btn-secondary { background: var(--color-brand-orange); color: var(--color-heading); }
.btn-secondary:hover { opacity: 0.9; text-decoration: none; }
.btn-outline { background: transparent; border: 2px solid var(--color-border); color: var(--color-heading); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Hero */

.hero {
    background: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-red));
    color: #fff;
    padding: var(--space-5) 0;
    text-align: center;
}
.hero h1 { color: #fff; }
.hero p { font-size: 1.1rem; max-width: 640px; margin: 0 auto var(--space-4); }
.hero { padding-left: var(--space-3); padding-right: var(--space-3); }

.hero--image {
    background-color: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Full-screen hero: starts at the very top of the screen, exactly one
   viewport tall, with the pinned top bar + header (transparent until the
   page is scrolled) floating over it.
   --header-overlap (their combined height) is measured in header.php.
   Also used by the category page cover (.category-cover), 400px tall. */
.hero--fullscreen {
    position: relative;
    margin-top: calc(-1 * var(--header-overlap, 0px));
    padding-top: var(--header-overlap, 0px); /* centre content in the area below the header */
}
.hero--fullscreen > * { position: relative; z-index: 1; }

/* Home hero (home-hero.php): the uploaded photo as is, no darkening layer.
   Desktop: text on the left, over the empty part of the photo; the photo is
   anchored right of centre so a pizza on the right survives cover-cropping.
   --hero-h / --hero-img / --hero-img-mobile come from the inline style. */
.hero.hero--home {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    height: var(--hero-h, auto);
    padding-left: max(var(--space-3), calc((100% - 1200px) / 2 + var(--space-3)));
    padding-right: var(--space-3);
    padding-bottom: var(--space-5);
}
.hero--home.hero--fullscreen { padding-top: var(--header-overlap, 0px); }
.hero--home.hero--image {
    background-color: #000;
    background-image: var(--hero-img);
    background-position: 78% center;
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 640px; }
.hero .hero__status {
    display: inline-flex; align-items: center; gap: 0.55em;
    margin: 0; padding: 0.4em 0.9em; border-radius: 999px;
    font-size: 0.875rem; font-weight: 600;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); color: #E6E0DB;
}
.hero__status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: #9A918A; }
.hero__status.is-open { background: rgba(53, 196, 106, 0.14); border-color: rgba(53, 196, 106, 0.45); color: #C9F5D8; }
.hero__status.is-open::before { background: #35C46A; box-shadow: 0 0 0 0.25em rgba(53, 196, 106, 0.25); }
.hero__status.is-closed { background: rgba(250, 20, 20, 0.16); border-color: rgba(250, 20, 20, 0.5); color: #FFD3D3; }
.hero__status.is-closed::before { background: var(--color-brand-red); box-shadow: 0 0 0 0.25em rgba(250, 20, 20, 0.25); }
.hero .hero__title {
    margin: 0; color: #fff;
    font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5.5rem); line-height: 0.92; letter-spacing: 0.01em;
    text-wrap: balance;
}
.hero__title span { display: block; color: var(--color-brand-orange); }
.hero .hero__lead { margin: 0; max-width: 34em; font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem); color: #ECE6E1; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.hero__cta, .hero__ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.6em; font-size: 1.05rem; }
.hero__cta { box-shadow: 0 0.4em 1.2em rgba(250, 20, 20, 0.35); }
.hero__cta svg { transition: transform 0.2s ease; }
.hero__cta:hover svg { transform: translateX(3px); }
.hero__ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.75); }
.hero__ghost:hover { background: #fff; color: var(--color-heading); text-decoration: none; }
.hero__phones { display: none; }

/* Delivery options bar (home-hero.php): free delivery in the zone, and outside
   it Bolt Food / Wolt. Desktop: one compact glass bar, as wide as its content,
   at the bottom left of a hero with a photo; phones: a two-row list (below). */
.hero-delivery {
    display: flex; align-items: center; gap: 4px;
    max-width: 100%; box-sizing: border-box;
    margin: var(--space-4) 0 0; padding: 6px; list-style: none;
    border-radius: 18px; color: #fff;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16);
    -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.hero-delivery__item { display: flex; align-items: center; gap: 12px; }
.hero-delivery__item--outside { padding: 8px 8px 8px 18px; border-left: 1px solid rgba(255, 255, 255, 0.16); }
.hero-delivery__zone {
    display: flex; align-items: center; gap: 12px;
    padding: 8px 18px 8px 8px; border-radius: 13px;
    color: #fff; text-decoration: none; transition: background 0.15s ease;
}
.hero-delivery__zone:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
.hero-delivery__icon {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.14);
}
.hero-delivery__icon--accent { background: var(--color-brand-orange); color: var(--color-heading); }
.hero-delivery__icon svg, .hero-delivery__chevron {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.hero-delivery__item--outside .hero-delivery__icon, .hero-delivery__chevron { display: none; }
.hero-delivery__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; line-height: 1.3; }
.hero-delivery__text strong { font-size: 0.95rem; white-space: nowrap; }
.hero-delivery__sub { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.8); white-space: nowrap; }
.hero-delivery__zone .hero-delivery__sub { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hero-delivery__couriers { display: flex; gap: 6px; flex: none; }
.hero-delivery__courier {
    display: flex; align-items: center; height: 44px; padding: 0 14px; border-radius: 11px;
    background: #fff; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hero-delivery__courier:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.hero-delivery__courier img { display: block; width: auto; height: 16px; }
.hero-delivery__courier img[src$="wolt.png"] { height: 20px; }
.hero-delivery__zone:focus-visible, .hero-delivery__courier:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
/* Desktop with a photo: the text stays centred in the space above, the bar sits at the bottom. */
@media (min-width: 1024px) {
    .hero--home.hero--image .hero__content { margin-top: auto; margin-bottom: var(--space-4); }
    .hero--home.hero--image .hero-delivery { margin-top: auto; }
}

/* Phones and portrait tablets: the text at the bottom, in thumb reach.
   The photo always covers the whole section: the separate phone image
   (Supervisor → Vzhľad webu) when there is one, else the desktop photo,
   cropped at the sides and anchored right of centre where the dish is.
   Only the image matching the screen is downloaded. */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
    .hero.hero--home {
        height: auto;
        min-height: 72vh; /* only a hero without a photo; with one it is the whole screen, see below */
        min-height: 72svh;
        justify-content: flex-end;
        padding-bottom: var(--space-3);
    }
    .hero--home.hero--has-mobile { background-image: var(--hero-img-mobile); background-size: cover; background-position: center top; }
    .hero__content { width: 100%; max-width: 560px; gap: 10px; }
    .hero .hero__title { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3rem); }
    .hero .hero__lead { font-size: 0.95rem; line-height: 1.4; }
    .hero__actions { display: grid; grid-template-columns: 1fr; width: 100%; gap: var(--space-1); }
    .hero__cta { width: 100%; }
    /* Delivery options: a list of two rows under the buttons, full width. */
    .hero-delivery { display: block; width: 100%; max-width: 560px; margin-top: 10px; padding: 4px 0; }
    .hero-delivery__zone { flex: 1; min-height: 60px; padding: 0 14px; border-radius: 16px; }
    .hero-delivery__item--outside { position: relative; min-height: 60px; padding: 8px 10px 8px 14px; border-left: 0; }
    .hero-delivery__item--outside::before { content: ""; position: absolute; top: 0; left: 66px; right: 14px; height: 1px; background: rgba(255, 255, 255, 0.12); }
    .hero-delivery__icon { width: 40px; height: 40px; }
    .hero-delivery__icon svg { width: 21px; height: 21px; }
    .hero-delivery__item--outside .hero-delivery__icon { display: flex; }
    .hero-delivery__text { flex: 1; }
    .hero-delivery__text strong, .hero-delivery__sub { white-space: normal; }
    .hero-delivery__zone .hero-delivery__sub { font-weight: 400; text-decoration: none; }
    .hero-delivery__chevron { display: block; flex: none; width: 18px; height: 18px; color: rgba(255, 255, 255, 0.6); }
    .hero-delivery__courier { padding: 0 11px; border-radius: 10px; }
    .hero-delivery__courier img { height: 13px; }
    .hero-delivery__courier img[src$="wolt.png"] { height: 18px; }
    /* "Pec" look: the text block sits in the middle of the free area between
       the header and the bottom bars, not at the bottom. */
    body.mobile-pec .hero.hero--home.hero--fullscreen { justify-content: center; }
}
/* Phones and tablets, every look: the hero with a photo is the whole screen,
   top edge to bottom edge, so nothing of the next section shows when the
   page opens. The pinned bottom bars lie over its lower part, so the content
   is kept above them by --hero-bars (64px tabs; Terasa's floating bar 92px;
   Pec's cart bar 72px more when the cart has items). 100dvh (last, where
   supported) follows the browser's own address bar: when it slides away on a
   real phone the hero grows with the screen. */
@media (max-width: 1023px) {
    .hero.hero--home.hero--fullscreen {
        --hero-bars: calc(64px + env(safe-area-inset-bottom, 0px));
        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;
        padding-bottom: calc(var(--hero-bars) + var(--space-3));
    }
    body.mobile-terasa .hero.hero--home.hero--fullscreen { --hero-bars: calc(92px + env(safe-area-inset-bottom, 0px)); }
    body.mobile-pec .hero.hero--home.hero--fullscreen { padding-bottom: var(--hero-bars); }
    body.mobile-pec:has(.cart-bar:not([hidden])) .hero.hero--home.hero--fullscreen { --hero-bars: calc(136px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones and tablets: no "Pozrieť menu" — the "Ponuka" tab in the bottom nav leads there.
   Under "Objednať online" one call button per store number instead. */
@media (max-width: 1023px) {
    .hero__ghost { display: none; }
    .hero__phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--space-1); width: 100%; }
    .hero__phone {
        display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0 0.6em;
        background: rgba(0, 0, 0, 0.55); border: 1.5px solid rgba(255, 255, 255, 0.55); color: #fff;
        font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .hero__phone .icon { flex: none; width: 18px; height: 18px; color: var(--color-brand-orange); }
    .hero__phone:hover { background: rgba(0, 0, 0, 0.75); border-color: #fff; color: #fff; text-decoration: none; }
    .hero__phone:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
}
@media (prefers-reduced-motion: reduce) { .hero__cta svg { transition: none; } .hero__cta:hover svg { transform: none; } }

/* Cinematic opening of the home hero, once per page load: the photo eases
   in with a slow zoom (a copy of the section's own background on ::before,
   so every image rule above keeps working) and the text rises in line by
   line. Off for reduced motion. */
.hero--home.hero--image { overflow: hidden; }
.hero--home.hero--image::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: inherit;
    transform-origin: 70% 50%;
    animation: hero-zoom 14s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.hero--home .hero__content > * { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero--home .hero__content > :nth-child(1) { animation-delay: 0.15s; }
.hero--home .hero__content > :nth-child(2) { animation-delay: 0.3s; }
.hero--home .hero__content > :nth-child(3) { animation-delay: 0.45s; }
.hero--home .hero__content > :nth-child(4) { animation-delay: 0.6s; }
.hero--home .hero-delivery { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.75s both; }
@keyframes hero-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .hero--home.hero--image::before { content: none; }
    .hero--home .hero__content > *, .hero--home .hero-delivery { animation: none; }
}

/* Product grid & cards */

/* Vertical only — a shorthand here would zero .container's side gutters
   on <main class="container section">. */
.section { padding-top: var(--space-5); padding-bottom: var(--space-5); }

.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Product cards (rendered by public/assets/js/product-card.js).
   Default: photo-on-top card (grid ≥640px, home carousel at all sizes).
   The category grid on phones switches to compact list rows (thumbnail
   left) so several products fit on one screen — see the max-width
   640px block below. The whole card opens the product's options
   (.pcard__open overlay); the round "+" sits above that overlay and
   quick-adds single-size products. */

.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

/* Reserves space while JS loads the products, so the footer doesn't
   flash up under the cover and then jump down. */
.product-grid.is-loading { min-height: 100vh; }
/* Cards the category search filters out (menu-category.js). */
.product-grid > .pcard[hidden] { display: none; }

/* Category search (menu-category.js, categories with more than 10 products).
   Reads the colour theme's values where one is set (body.theme-*). */
.category-search {
    position: relative;
    max-width: 520px;
    margin: 0 0 var(--space-4);
}
.category-search__icon {
    position: absolute; left: 16px; top: 26px; transform: translateY(-50%);
    z-index: 1; width: 20px; height: 20px; pointer-events: none;
    fill: none; stroke: var(--th-text, var(--color-body)); stroke-width: 2; stroke-linecap: round;
}
.category-search__input {
    box-sizing: border-box; width: 100%; min-height: 52px;
    padding: 0 16px 0 46px; border-radius: 999px;
    font: 500 1rem var(--font-body);
    color: var(--th-heading, var(--color-heading));
    background: var(--th-card, var(--color-surface));
    border: 1px solid var(--th-card-border, var(--color-border));
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.category-search__input::placeholder { color: var(--th-text, var(--color-body)); opacity: 0.85; }
.category-search__input:focus { outline: none; border-color: var(--color-brand-orange); box-shadow: 0 0 0 3px rgba(255, 168, 54, 0.3); }
.category-search__status { margin: var(--space-2) 0 0 18px; font-size: 0.875rem; color: inherit; opacity: 0.9; } /* the page's text colour: light on the dark phone looks */
.category-search__status:empty { display: none; }

.pcard {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* extra height goes to the text, keeping names aligned across a row */
    overflow: hidden;
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pcard:hover {
    box-shadow: 0 14px 28px -14px rgba(16, 24, 40, 0.3);
    transform: translateY(-2px);
}

.pcard__media {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #FFF4E5, #FFE2BA);
    color: var(--color-brand-orange-deep);
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
/* Product photos are uploaded as transparent cut-outs: no tinted backdrop,
   and scale to fit (contain) so the dish is never cropped. The warm tint
   above stays only for the no-photo placeholder. */
.pcard__media--photo { background: none; }
.pcard__media--photo img { object-fit: contain; padding: var(--space-2); }
.pcard__media .icon { width: 56px; height: 56px; stroke-width: 1.5; }
.pcard:hover .pcard__media img { transform: scale(1.04); }

.pcard__body { display: flex; flex-direction: column; min-width: 0; padding: var(--space-3); }
.pcard__name {
    font-family: var(--font-body);
    font-size: 1.05rem; font-weight: 700; letter-spacing: 0;
    color: var(--color-heading);
    margin: 0;
}
.pcard__desc {
    margin: 2px 0 0;
    font-size: 0.875rem;
    color: var(--color-body);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* "Hmotnosť: 450 g": the description's colour in every look, one line, a little smaller. */
.pcard__weight { display: block; margin-top: 4px; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.pcard__footer {
    margin-top: auto;
    padding-top: var(--space-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
}
.pcard__price {
    font-size: 1.05rem; font-weight: 700;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}
.pcard__from { font-size: 0.8rem; font-weight: 500; color: var(--color-body); }

.pcard__add {
    position: relative;
    z-index: 2; /* above the .pcard__open overlay */
    flex: none;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 50%;
    background: var(--color-brand-red); color: #fff;
    box-shadow: 0 6px 14px -6px rgba(250, 20, 20, 0.7);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.pcard__add .icon { width: 22px; height: 22px; stroke-width: 2.5; }
.pcard__add:hover { background: var(--color-brand-red-hover); }
.pcard__add:active { transform: scale(0.92); }
.pcard__add.is-busy { opacity: 0.7; cursor: progress; }
.pcard__add.is-added { background: #16A34A; box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.7); }
.pcard__add.is-error { animation: pcard-shake 0.3s; }

.pcard__open {
    position: absolute; inset: 0; z-index: 1;
    border: 0; padding: 0; background: transparent;
    border-radius: inherit; cursor: pointer;
}
.pcard__open:focus-visible,
.pcard__add:focus-visible {
    outline: 3px solid var(--color-brand-orange);
    outline-offset: 2px;
}

.cart-link__count.is-bumped { animation: badge-pop 0.35s ease; }

@keyframes badge-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.35); }
}
@keyframes pcard-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@media (min-width: 640px) {
    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: var(--space-4);
    }
}

@media (max-width: 639px) {
    .product-grid .pcard {
        grid-template-columns: 96px 1fr;
        grid-template-rows: none;
        gap: var(--space-3);
        padding: var(--space-2);
    }
    .product-grid .pcard__media { width: 96px; aspect-ratio: 1 / 1; border-radius: 12px; }
    .product-grid .pcard__media .icon { width: 36px; height: 36px; }
    .product-grid .pcard__body { padding: 0; }
    .product-grid .pcard__name { font-size: 1rem; }
}

/* Home "most popular": black full-width band with a swipeable carousel. */

.popular {
    background: #000;
    color: #fff;
    padding: var(--space-5) 0;
}
/* Three columns (spacer | title | arrows) so the title sits in the true
   centre of the section rather than centred in the space left of the arrows. */
.popular__head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.popular__title {
    grid-column: 2;
    text-align: center;
    color: #fff;
    font-size: clamp(2.25rem, 6vw, 3.5rem);
    line-height: 1.05;
    margin: 0;
}

.carousel-nav { display: none; gap: var(--space-2); grid-column: 3; justify-self: end; }
.carousel-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.carousel-btn .icon { width: 22px; height: 22px; }
.carousel-btn:hover:not(:disabled) { color: var(--color-heading); background: var(--color-brand-orange); border-color: var(--color-brand-orange); }
.carousel-btn:disabled { opacity: 0.3; cursor: default; }
.carousel-btn:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }

.product-carousel {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* room for card shadows / hover lift, and bleed to the screen edge on phones */
    padding: var(--space-2) var(--space-3) var(--space-3);
    margin: 0 calc(-1 * var(--space-3));
    scroll-padding-inline: var(--space-3);
}
.product-carousel::-webkit-scrollbar { display: none; }
.product-carousel:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 4px; }
.product-carousel .pcard {
    flex: 0 0 clamp(220px, 72vw, 280px);
    scroll-snap-align: start;
}
.product-carousel .pcard:hover { box-shadow: 0 14px 28px -12px rgba(255, 168, 54, 0.35); }

/* Home "naše najobľúbenejšie" carousel: dark cards on the black band.
   Charcoal surface + hairline edge; the dish sits on a warm glow; white
   name, muted description, orange "od". Only .popular — the product page's
   related carousel and category grids keep the light card. */
.popular .pcard {
    background: linear-gradient(180deg, #1C1717 0%, #121010 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px -16px rgba(0, 0, 0, 0.9);
}
.popular .pcard:hover {
    box-shadow: 0 0 0 1px rgba(255, 168, 54, 0.45), 0 18px 36px -16px rgba(250, 20, 20, 0.45);
}
.popular .pcard__media {
    background: radial-gradient(60% 60% at 50% 55%, rgba(255, 168, 54, 0.22), transparent 70%), #141111;
    color: var(--color-brand-orange);
}
.popular .pcard__media--photo { background: radial-gradient(55% 55% at 50% 55%, rgba(253, 109, 40, 0.28), transparent 72%); }
.popular .pcard__media--photo img { filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.55)); }
.popular .pcard__name { color: #fff; }
.popular .pcard__desc { color: rgba(255, 255, 255, 0.65); }
.popular .pcard__price { color: #fff; }
.popular .pcard__from { color: var(--color-brand-orange); }
.popular .pcard__add { box-shadow: 0 6px 16px -4px rgba(250, 20, 20, 0.6); }

/* Phones/tablets: the product cards copy the category tiles above them
   (.home-categories .category-tile) — same black surface, hairline edge,
   shadow, lift, photo zoom, press feedback and focus ring — so both landing
   sections feel like one set of cards. */
@media (max-width: 1023px) {
    .popular .pcard {
        background: #000;
        border-radius: 16px;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px -12px rgba(0, 0, 0, 0.8);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .popular .pcard:hover {
        transform: translateY(-3px);
        box-shadow: 0 0 0 1px rgba(255, 168, 54, 0.45), 0 18px 36px -14px rgba(250, 20, 20, 0.45);
    }
    .popular .pcard:active { transform: scale(0.98); }
    .popular .pcard__media img { transition: transform 0.4s ease; }
    .popular .pcard:hover .pcard__media img { transform: scale(1.05); }
    .popular .pcard:hover .pcard__add { background: var(--color-brand-red-hover); }
    /* Focus ring around the whole card, like the tiles (the card clips its children). */
    .popular .pcard__open:focus-visible { outline: none; }
    .popular .pcard:has(.pcard__open:focus-visible) { outline: 3px solid var(--color-brand-orange); outline-offset: 3px; }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .popular .pcard, .popular .pcard__media img { transition: none; }
    .popular .pcard:hover, .popular .pcard:active, .popular .pcard:hover .pcard__media img { transform: none; }
}

@media (min-width: 640px) {
    .carousel-nav { display: flex; }
    .product-carousel { gap: var(--space-4); }
    /* A whole number of cards per view (2 / 3 / 4), so the last visible card
       is never cut at the edge; carousel.js pages by exactly one view. */
    .product-carousel .pcard { flex-basis: calc((100% - var(--space-4)) / 2); }
}
@media (min-width: 900px) {
    .product-carousel .pcard { flex-basis: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (min-width: 1200px) {
    .product-carousel .pcard { flex-basis: calc((100% - 3 * var(--space-4)) / 4); }
}

/* Landing page "naše najobľúbenejšie" below 1024px: a 2-column grid of at
   most 6 products (3 rows) instead of the carousel; no arrows. Desktop
   keeps the carousel (home.js mounts 8 products). */
@media (max-width: 1023px) {
    .popular .carousel-nav { display: none; }
    .popular .product-carousel {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
        overflow: visible;
        scroll-snap-type: none;
        margin: 0;
        padding: 0;
    }
    .popular .product-carousel .pcard { flex: none; scroll-snap-align: none; }
    .popular .product-carousel .pcard:nth-child(n + 7) { display: none; }
    .popular .pcard__body { padding: var(--space-2) var(--space-3) var(--space-3); }
    .popular .pcard__name { font-size: 0.98rem; }
    .popular .pcard__desc { font-size: 0.8rem; }
}
/* Phone cards, design "B · Sivý pás" (options kept in
   docs/design/popular-card-options.html) on the black band: dark grey
   cards, and the dish photo rises above the card's top edge. The band
   itself stays black (the option drew it grey; changed on request). Not in the light "Terasa"
   look, which has its own cards. */
@media (max-width: 1023px) {
    body:not(.mobile-terasa) .popular .product-carousel { gap: 44px var(--space-3); padding-top: 30px; }
    body:not(.mobile-terasa) .popular .pcard {
        overflow: visible; /* the photo sticks out at the top */
        background: #383838;
        box-shadow: none;
    }
    body:not(.mobile-terasa) .popular .pcard:hover { box-shadow: 0 0 0 1px rgba(255, 168, 54, 0.45); }
    body:not(.mobile-terasa) .popular .pcard__media {
        aspect-ratio: auto;
        height: 96px;
        border-radius: 16px 16px 0 0; /* the card no longer clips its children */
    }
    body:not(.mobile-terasa) .popular .pcard__media--photo { overflow: visible; padding: 0 10px; background: none; }
    body:not(.mobile-terasa) .popular .pcard__media--photo img {
        height: 132px;
        margin-top: -36px;
        padding: 0;
        object-position: center bottom;
        filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
    }
    body:not(.mobile-terasa) .popular .pcard__body { padding-top: 10px; }
}

/* Product page "related": same carousel on the light page background,
   so the arrows are dark instead of white. */
.related { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.related[hidden] { display: none; }
.related__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.related__title { margin: 0; font-size: clamp(1.6rem, 4vw, 2.25rem); line-height: 1.1; }
.related__all { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.related .carousel-nav { margin-left: auto; }
.related .carousel-btn { color: var(--color-heading); border-color: var(--color-border); background: var(--color-surface); }
.related .product-carousel .pcard:hover { box-shadow: 0 14px 28px -12px rgba(16, 24, 40, 0.25); }

@media (prefers-reduced-motion: reduce) {
    .pcard, .pcard__media img, .pcard__add, .carousel-btn { transition: none; }
    .pcard:hover, .pcard:hover .pcard__media img, .pcard__add:active { transform: none; }
    .cart-link__count.is-bumped, .pcard__add.is-error { animation: none; }
}

/* Category page cover & menu overview tiles */

.category-cover {
    background: linear-gradient(135deg, var(--color-brand-orange), var(--color-brand-red));
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: left;
    /* Full width, 400px from the top edge of the screen (header floats over
       it via .hero--fullscreen), never taller than the screen. Side padding
       only — a padding shorthand here would cancel .hero--fullscreen's
       padding-top that centres the text below the header. */
    height: min(400px, 100vh);
    height: min(400px, 100svh);
    /* Text starts on the same left edge as the page content below
       (the 1200px .container incl. its gutter). */
    padding-left: max(var(--space-3), calc((100% - 1200px) / 2 + var(--space-3)));
    padding-right: var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
/* The photo; phones and tablets swap in the category's own image when it has one
   (Kategórie › Obrázok pre mobil). A category with only that image keeps the
   gradient on desktop. */
.category-cover--image { background-image: var(--cover-img); }
@media (max-width: 1023px) {
    .category-cover--has-mobile { background-image: var(--cover-img-mobile); }
    /* The phone image is framed for the tile: centred, not anchored right like the wide cover. */
    .category-tile--has-mobile .category-tile__img { object-position: center; }

    /* No image for phones: the category's default drawing (yellow on dark grey,
       Modules\Menu\CategoryDefaultPicture) above the centred name, instead of the cover photo. */
    .category-cover.category-cover--default {
        background: var(--category-default-bg); height: auto; min-height: min(220px, 100svh);
        align-items: center; text-align: center; padding-left: var(--space-3); padding-bottom: var(--space-3);
    }
    .category-cover--default .category-cover__icon { display: block; width: 76px; height: 76px; margin-bottom: var(--space-1); }
    .category-cover--default h1 { text-shadow: none; }
    .category-tile.category-tile--default { background: var(--category-default-bg); }
    .category-tile.category-tile--default::after { content: none; }
    .category-tile--default .category-tile__img { inset: 10% 0 auto; width: 100%; height: 50%; object-fit: contain; object-position: center; }
    .category-tile--default .category-tile__body { width: 100%; align-items: center; text-align: center; padding-right: var(--space-3); }
    .category-tile--default .category-tile__go { display: none; }
    .category-tile.category-tile--default:hover .category-tile__img { transform: none; }
}
/* Desktop: no picture element for a category without a cover (its tile is the plain one). */
.category-cover__icon { display: none; }
@media (min-width: 1024px) { .category-tile--plain .category-tile__img { display: none; } }
.category-cover h1 {
    color: #fff; margin: 0;
    font-size: clamp(3rem, 9vw, 5rem);
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}
.category-cover p { font-size: 1.1rem; max-width: 640px; margin: var(--space-2) 0 0; }
/* Small elements around the name: a red-to-orange bar under it and glass
   pills — the lowest price (CategoryRepository::productStats) and, in orange,
   each active "Kúp X → odmena" promotion this category earns (by its name in
   Zľavy; RewardSync::forCategory). */
.category-cover__bar {
    display: block; flex: none; width: 64px; height: 4px; margin-top: var(--space-2); border-radius: 2px;
    background: linear-gradient(90deg, var(--color-brand-red), var(--color-brand-orange));
    box-shadow: 0 2px 12px rgba(250, 20, 20, 0.45);
}
.category-cover__meta { flex: none; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: var(--space-3) 0 0; padding: 0; max-width: 640px; }
.category-cover__meta li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 0.85rem; font-weight: 600; color: #fff;
    background: rgba(0, 0, 0, 0.38); border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.category-cover__meta strong { color: var(--color-brand-orange); }
.category-cover__meta .category-cover__promo {
    color: #1A0F00; font-weight: 700;
    background: linear-gradient(135deg, #FFC46B, var(--color-brand-orange));
    border-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 6px 18px -6px rgba(255, 168, 54, 0.7);
}
.category-cover__promo .icon { flex: none; width: 16px; height: 16px; stroke-width: 2.2; }

/* Opening, once per page load: the name, bar, text and pills rise in one
   after another, and the accent bar draws in from its start. The cover
   picture itself stays still. Off for reduced motion. */
.category-cover { overflow: hidden; }
.category-cover > :is(.category-cover__icon, h1, .category-cover__bar, p, .category-cover__meta) { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.category-cover > .category-cover__icon { animation-delay: 0.05s; }
.category-cover > h1 { animation-delay: 0.15s; }
.category-cover > .category-cover__bar { transform-origin: left center; animation: cover-bar-draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.category-cover > p { animation-delay: 0.45s; }
.category-cover > .category-cover__meta { animation-delay: 0.6s; }
@keyframes cover-bar-draw { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
@media (max-width: 1023px) {
    .category-cover--default > .category-cover__bar { transform-origin: center; } /* centred under the name */
}
@media (prefers-reduced-motion: reduce) {
    .category-cover > * { animation: none !important; }
}
/* Phones and tablets: the cover is short — smaller pills, centred with the default drawing.
   The cover grows with its content (220px at least), so wrapped pills never spill out of it;
   "html body" wins over the phone looks' fixed height (body.mobile-compact .category-cover). */
@media (max-width: 1023px) {
    html body .category-cover.category-cover { height: auto; min-height: min(220px, 100svh); padding-bottom: var(--space-3); }
    .category-cover__bar { width: 48px; height: 3px; margin-top: var(--space-1); }
    .category-cover__meta { margin-top: var(--space-2); gap: 6px; }
    .category-cover__meta li { padding: 4px 10px; font-size: 0.78rem; }
    .category-cover--default .category-cover__meta { justify-content: center; }
}

/* Menu overview (templates/menu.php): photo tiles, 2 per row on phones
   (all categories on one screen), 3 from 768px. Photo anchored right where
   the covers place the food; name + "od X €" bottom-left on
   a dark gradient; red arrow mirrors the product cards' red "+" button. */
/* Dark "pizza oven" page background for /menu (main.menu-main): solid black
   at the top so it continues the black header seamlessly, then a red ember
   glow lower down, a warm orange glow rising from the bottom like an oven
   mouth, and a very faint flour-dust speckle. */
.menu-main {
    --menu-bg: #000;
    position: relative;
    isolation: isolate;
    min-height: 70vh;
    color: rgba(255, 255, 255, 0.85);
    background:
        linear-gradient(var(--menu-bg) 0, var(--menu-bg) 120px, transparent 420px),
        radial-gradient(70% 45% at 12% 45%, rgba(250, 20, 20, 0.20), transparent 70%),
        radial-gradient(60% 40% at 90% 55%, rgba(253, 109, 40, 0.12), transparent 70%),
        radial-gradient(120% 60% at 50% 115%, rgba(255, 168, 54, 0.20), transparent 65%),
        var(--menu-bg);
}
.menu-main::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background-image:
        radial-gradient(rgba(255, 244, 229, 0.06) 1px, transparent 1.5px),
        radial-gradient(rgba(255, 244, 229, 0.04) 1px, transparent 1.5px);
    background-size: 28px 28px, 46px 46px;
    background-position: 0 0, 13px 19px;
    /* speckle fades in below the solid black top as well */
    -webkit-mask-image: linear-gradient(transparent 0, transparent 120px, #000 420px);
            mask-image: linear-gradient(transparent 0, transparent 120px, #000 420px);
    pointer-events: none;
}
.menu-main + .site-footer { margin-top: 0; }
/* No hairline under the black header: header and page read as one surface. */
body:has(.menu-main) .site-header { box-shadow: none; }

.menu-intro { margin-bottom: var(--space-4); }
.menu-intro__title { margin: 0; color: #fff; }
.menu-intro__lead { margin: var(--space-1) 0 0; color: rgba(255, 255, 255, 0.72); }
.menu-intro__title::after {
    content: ''; display: block; width: 56px; height: 4px; margin-top: var(--space-2);
    border-radius: 999px; background: linear-gradient(90deg, var(--color-brand-red), var(--color-brand-orange));
}
/* Tiles on a dark background (/menu, landing page): a hairline light edge so they lift off it. */
.menu-main .category-tile,
.home-categories .category-tile { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px -12px rgba(0, 0, 0, 0.8); }
.menu-main .category-tile:hover,
.home-categories .category-tile:hover { box-shadow: 0 0 0 1px rgba(255, 168, 54, 0.45), 0 18px 36px -14px rgba(250, 20, 20, 0.45); }

/* Landing page category tiles: phones and tablets only, on the same black
   band as "naše najobľúbenejšie" right below; hidden from 1024px, where the
   header's category buttons do this job. */
.home-categories { background: #000; padding: var(--space-5) 0 0; }
.home-categories__title { margin-bottom: var(--space-4); }
@media (min-width: 1024px) {
    .home-categories { display: none; }
}

.category-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}
.category-tile {
    position: relative;
    display: flex; align-items: flex-end;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    color: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* No cover uploaded: dark brand surface instead of a lone orange block. */
.category-tile--plain {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(250, 20, 20, 0.55), transparent 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(255, 168, 54, 0.35), transparent 65%),
        #000;
}
.category-tile__img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 88% center;
    transition: transform 0.4s ease;
}
/* Legibility scrim behind the text (bottom-left). */
.category-tile::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 75%);
    pointer-events: none;
}
.category-tile__body {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
    padding: var(--space-3);
    padding-right: calc(var(--space-3) + 44px);
}
.category-tile__name {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 5.5vw, 2rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
}
.category-tile__meta { display: flex; flex-direction: column; font-size: 0.8rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); font-variant-numeric: tabular-nums; }
.category-tile__price strong { color: var(--color-brand-orange); font-weight: 700; }
.category-tile__go {
    position: absolute; right: var(--space-2); bottom: var(--space-3); z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-brand-red); color: #fff;
    box-shadow: 0 4px 12px -2px rgba(250, 20, 20, 0.5);
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.category-tile__go .icon { width: 18px; height: 18px; stroke-width: 2.5; }
.category-tile:hover { text-decoration: none; color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(16, 24, 40, 0.45); }
.category-tile:hover .category-tile__img { transform: scale(1.05); }
.category-tile:hover .category-tile__go { background: var(--color-brand-red-hover); transform: translateX(2px); }
.category-tile:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 3px; }
.category-tile:active { transform: scale(0.98); }

@media (min-width: 768px) {
    .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
    .category-tile { aspect-ratio: 4 / 3; }
    .category-tile__body { padding: var(--space-4); padding-right: calc(var(--space-4) + 52px); gap: var(--space-1); }
    .category-tile__meta { flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-2); font-size: 0.9rem; }
    .category-tile__go { width: 44px; height: 44px; right: var(--space-4); bottom: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
    .category-tile, .category-tile__img, .category-tile__go { transition: none; }
    .category-tile:hover, .category-tile:active, .category-tile:hover .category-tile__img, .category-tile:hover .category-tile__go { transform: none; }
}

/* Product page (templates/product.php, public/assets/js/product-page.js) */

/* Product page breadcrumb (templates/product.php). Phones: one "‹ parent"
   back link; from 640px the full trail with a home icon and chevrons. */
.breadcrumb { margin-bottom: var(--space-4); font-size: 0.9rem; }
.breadcrumb__back {
    display: inline-flex; align-items: center; gap: 2px;
    min-height: 44px; padding: 0 var(--space-3) 0 var(--space-2); margin-left: calc(-1 * var(--space-2));
    border-radius: 999px; color: var(--color-heading); font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.breadcrumb__back .icon { width: 18px; height: 18px; color: var(--color-brand-red); }
.breadcrumb__back:hover { background: rgba(250, 20, 20, 0.08); color: var(--color-brand-red); text-decoration: none; }
.breadcrumb__list { display: none; list-style: none; margin: 0; padding: 0; align-items: center; flex-wrap: wrap; gap: 2px; min-width: 0; }
.breadcrumb__item { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.breadcrumb__link {
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 10px;
    border-radius: 999px; color: var(--color-body); font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.breadcrumb__link .icon { width: 18px; height: 18px; }
.breadcrumb__link:hover { background: rgba(250, 20, 20, 0.08); color: var(--color-brand-red); text-decoration: none; }
.breadcrumb__back:focus-visible, .breadcrumb__link:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 1px; }
.breadcrumb__sep { width: 14px; height: 14px; color: #98A2B3; flex: none; }
.breadcrumb__current {
    display: inline-block; max-width: 32ch; padding: 0 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-heading); font-weight: 700;
}
@media (min-width: 640px) {
    .breadcrumb__back { display: none; }
    .breadcrumb__list { display: flex; margin-left: -10px; }
}
@media (prefers-reduced-motion: reduce) { .breadcrumb__back, .breadcrumb__link { transition: none; } }

.product-page { display: grid; gap: var(--space-4); }
.product-page__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; }
.product-page__media img { width: 100%; height: 100%; object-fit: contain; }
.product-page__media--placeholder { background: linear-gradient(135deg, #FFF4E5, #FFE2BA); border-radius: 16px; color: var(--color-brand-orange-deep); }
.product-page__media--placeholder .icon { width: 72px; height: 72px; stroke-width: 1.5; }

.product-page__name { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin-bottom: var(--space-2); }
.product-page__tags { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1); }
.product-page__tags li { background: #FFF4E5; color: var(--color-heading); border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 600; }
/* one minimum label width, so the values of the weight row and the facts below line up */
.product-page__facts { display: grid; grid-template-columns: minmax(5.5rem, max-content) 1fr; gap: 2px var(--space-3); margin: 0 0 var(--space-3); line-height: 1.35; }
.product-page__facts dt { font-weight: 700; color: var(--color-heading); }
.product-page__facts dd { margin: 0; }
/* The line under the product name: "450 g · Alergény 1, 7 ⓘ"; the button opens the panel below it. */
.product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-1)) 0 var(--space-3); font-size: 0.875rem; color: var(--color-body); }
.product-meta[hidden], .product-meta [hidden], .product-meta__panel[hidden] { display: none; }
.product-meta__weight strong { font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.product-meta__allergens {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0;
    border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 3px;
}
.product-meta__allergens .icon { width: 15px; height: 15px; }
.product-meta__allergens:hover, .product-meta__allergens[aria-expanded="true"] { color: var(--color-heading); }
.product-meta__panel { margin: calc(-1 * var(--space-2)) 0 var(--space-3); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.8125rem; line-height: 1.5; }
.product-meta__panel p { margin: 0 0 4px; }
.product-meta__panel strong { color: var(--color-heading); }
.product-meta__panel a { font-weight: 600; }

.option-group { border: 0; padding: 0; margin: 0 0 var(--space-4); }
.option-group legend { font-weight: 700; color: var(--color-heading); margin-bottom: var(--space-2); padding: 0; }
.option-note { font-size: 0.85rem; margin: 0 0 var(--space-2); }
.option-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.option-pill { position: relative; cursor: pointer; }
.option-pill input { position: absolute; opacity: 0; }
.option-pill span {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: 44px; padding: 0 var(--space-3);
    border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option-pill input:checked + span { border-color: var(--color-brand-red); background: #FFF1F1; color: var(--color-heading); }
.option-pill input:focus-visible + span { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
/* Zloženie on the product page: click a pill to remove that ingredient
   (checked = removed, the opposite sense of most pills on this page). */
.ingredient-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.ingredient-pill {
    display: inline-flex; align-items: center;
    min-height: 40px; padding: 0 16px;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-surface); color: var(--color-heading);
    font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.ingredient-pill:hover { border-color: var(--color-brand-red); }
.ingredient-pill:has(input:checked) {
    background: var(--color-removed-bg); border-color: var(--color-brand-red);
    box-shadow: inset 0 0 0 1px var(--color-brand-red); /* reads as a 2px border without moving the pills */
    color: var(--color-removed);
}
.ingredient-pill:has(input:checked) span { text-decoration: line-through; text-decoration-thickness: 2px; }
/* A mark besides the colour, so "removed" does not rely on red alone. */
.ingredient-pill:has(input:checked) span::before { content: '\2715'; display: inline-block; margin-right: 6px; font-weight: 700; text-decoration: none; }
.ingredient-pill:has(input:focus-visible) { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
.option-check { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.option-check input { width: 20px; height: 20px; accent-color: var(--color-brand-red); }
.option-check__price { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Extra toppings: two columns, smaller type (a long list stays short). */
.option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }
.option-grid .option-check { font-size: 0.875rem; gap: var(--space-1); min-width: 0; }
.option-grid .option-check input { width: 18px; height: 18px; flex: none; }
.option-grid .option-check__name { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
.option-grid .option-check__price { flex: none; font-size: 0.8rem; color: var(--color-body); }

.product-order__bar {
    position: sticky; bottom: 0;
    display: flex; gap: var(--space-2); align-items: center;
    padding: var(--space-3) 0;
    background: var(--color-bg);
}
.product-order__submit { flex: 1; min-width: 0; min-height: 48px; font-size: 1.05rem; white-space: nowrap; }
@media (max-width: 359px) {
    /* The narrowest phones: a longer word than "Pridať" (Ukrainian "Додати") must still fit beside the quantity. */
    .product-order__submit { padding-left: var(--space-2); padding-right: var(--space-2); font-size: 0.95rem; }
}
@media (max-width: 419px) {
    .product-order__label-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.qty-stepper { display: inline-flex; align-items: center; border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.qty-stepper button { width: 44px; height: 44px; border: 0; background: none; font-size: 1.25rem; cursor: pointer; color: var(--color-heading); }
.qty-stepper input { width: 40px; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty-stepper input::-webkit-inner-spin-button, .qty-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.product-order__done[hidden] { display: none; }
.product-order__done { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-3); border-radius: 12px; background: #EAFAF0; }
.product-order__done p { margin: 0; flex-basis: 100%; font-weight: 600; color: #1a7a44; }

@media (min-width: 768px) {
    .product-page { grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
    .product-page__media { position: sticky; top: calc(var(--header-overlap, 108px) + var(--space-3)); }
}

/* Phone bottom navigation (partials/bottom-nav.php): Domov · Ponuka ·
   Zavolať · Košík · Účet. Below 1024px it replaces the header's category
   row, account icon and cart button. */
.bottom-nav { display: none; }
@media (max-width: 1023px) {
    .site-nav, .site-header__actions { display: none; }

    /* Kontakty / Alergény in the second row, right of the hanging logo. */
    .header-pages {
        grid-area: actions; justify-self: end; align-self: center;
        display: flex; gap: 2px; padding: 3px; margin: var(--space-2) 0;
        background: var(--color-brand-orange); border-radius: 15px; /* the logo banner's colour */
        box-shadow: 0 4px 14px rgba(255, 168, 54, 0.3);
    }
    /* Empty slot kept for a page not linked on phones yet (Rozvoz): takes no room. */
    .header-pages__placeholder { display: none; }
    .header-pages a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--space-3); border-radius: 12px; color: #1A0F00; font-size: 0.85rem; font-weight: 700; line-height: 1; }
    .header-pages a:hover { background: rgba(0, 0, 0, 0.12); text-decoration: none; }
    .header-pages a[aria-current="page"] { background: #1A0F00; color: #fff; }
    .header-pages a:focus-visible { outline: 3px solid #1A0F00; outline-offset: 1px; }

    .bottom-nav {
        --bottom-nav-h: 64px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
        display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
        min-height: var(--bottom-nav-h);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--color-brand-red); /* corporate red */
        box-shadow: 0 -6px 20px -10px rgba(0, 0, 0, 0.5);
    }
    .bottom-nav__item {
        position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        min-height: 52px;
        padding: 0;
        background: none; border: 0; border-radius: 12px;
        color: rgba(255, 255, 255, 0.88);
        font: inherit; font-size: 0.72rem; font-weight: 600;
        cursor: pointer;
        transition: color 0.15s ease;
    }
    .bottom-nav__item:hover { color: #fff; text-decoration: none; }
    .bottom-nav__item.is-active { color: #fff; font-weight: 700; }
    .bottom-nav__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 28px;
        border-radius: 999px;
        transition: background-color 0.15s ease;
    }
    .bottom-nav__icon .icon { width: 22px; height: 22px; }
    .bottom-nav__item.is-active .bottom-nav__icon { background: rgba(255, 255, 255, 0.22); }
    .bottom-nav__badge {
        position: absolute; top: 1px; left: calc(50% + 6px);
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 999px;
        background: var(--color-brand-orange); color: var(--color-heading); /* like the header cart count */
        box-shadow: 0 0 0 2px var(--color-brand-red);
        font-size: 0.7rem; font-weight: 700; line-height: 1;
    }
    .bottom-nav__badge[hidden] { display: none; }
    .bottom-nav__item:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }


    /* Keep content and the product page's add-to-cart bar clear of the nav. */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    .product-order__bar { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .bottom-nav__item, .bottom-nav__icon { transition: none; }
}

/* Cart page (templates/cart.php, public/assets/js/cart.js): item cards in a
   list + summary card; two columns from 900px with a sticky summary. */
.cart-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.cart-list { display: grid; gap: var(--space-3); }
.cart-list__loading { color: var(--color-body); }
.cart-empty { text-align: center; padding: var(--space-5) var(--space-3); background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow); }
.cart-empty p { font-size: 1.1rem; margin: 0 0 var(--space-3); }

.cart-card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    transition: opacity 0.15s ease;
}
.cart-card.is-busy { opacity: 0.55; pointer-events: none; }
.cart-card__media {
    width: 72px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; overflow: hidden;
    background: linear-gradient(135deg, #FFF4E5, #FFE2BA);
    color: var(--color-brand-orange-deep);
}
.cart-card__media--photo { background: none; }
.cart-card__media img { width: 100%; height: 100%; object-fit: contain; }
.cart-card__media .icon { width: 30px; height: 30px; stroke-width: 1.5; }
.cart-card__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cart-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.cart-card__name { font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0; color: var(--color-heading); margin: 0; }
.cart-card__total { font-weight: 700; font-size: 1.05rem; color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-card__meta { margin: 0; font-size: 0.9rem; color: var(--color-body); }
.cart-card__unit { font-variant-numeric: tabular-nums; }
.cart-card__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); }
.cart-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; border-radius: 999px; font-size: 0.85rem; color: var(--color-heading); }
.cart-chip--extra { background: #FFF4E5; padding-left: var(--space-3); }
.cart-chip--extra strong { font-variant-numeric: tabular-nums; }
.cart-chip--without { border: 1px solid var(--color-brand-red); padding: 0 var(--space-3); background: var(--color-removed-bg); color: var(--color-removed); font-weight: 600; }
/* Cart → Upraviť dialog: a ticked "bez …" row stands out the same way. */
.option-check:has(input[name="edit-exclude"]:checked) span { color: var(--color-removed); font-weight: 600; }
.cart-chip__remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: none; border: 0; border-radius: 50%;
    color: var(--color-body); cursor: pointer;
}
.cart-chip__remove .icon { width: 16px; height: 16px; }
.cart-chip__remove:hover { color: var(--color-brand-red); background: rgba(250, 20, 20, 0.08); }
.cart-chip__remove:focus-visible, .cart-card__remove:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 1px; }
.cart-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.cart-card__actions .qty-stepper button:disabled { opacity: 0.35; cursor: default; }
.qty-stepper__value { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Odstrániť / Nechcem: a red outlined button (Upraviť beside it is the neutral one). */
.cart-card__remove {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 14px; border-radius: 10px;
    border: 1.5px solid color-mix(in srgb, var(--color-brand-red) 45%, transparent);
    background: transparent; color: var(--color-brand-red);
    font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cart-card__remove:hover { background: var(--color-brand-red); border-color: var(--color-brand-red); color: #fff; }
.cart-card__error:empty { display: none; }

.cart-summary { padding: var(--space-4); background: var(--color-surface); border-radius: 16px; box-shadow: var(--shadow); }
.cart-summary[hidden] { display: none; }
.cart-summary__title { font-size: 1.5rem; text-transform: uppercase; margin: 0 0 var(--space-3); }
.cart-summary__row { display: flex; justify-content: space-between; padding: var(--space-1) 0; font-variant-numeric: tabular-nums; }
.cart-summary__row[hidden] { display: none; }
.cart-summary__tip { margin: var(--space-2) 0; }
.cart-summary__total { border-top: 1px solid var(--color-border); margin-top: var(--space-2); padding-top: var(--space-3); font-size: 1.25rem; font-weight: 700; color: var(--color-heading); }
.cart-summary__cta { display: flex; justify-content: center; width: 100%; min-height: 48px; align-items: center; margin-top: var(--space-3); }

@media (min-width: 640px) {
    .cart-card { grid-template-columns: 96px minmax(0, 1fr); padding: var(--space-4); }
    .cart-card__media { width: 96px; }
}
@media (min-width: 900px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .cart-summary { position: sticky; top: calc(var(--header-overlap, 108px) + var(--space-3)); }
}
@media (prefers-reduced-motion: reduce) { .cart-card { transition: none; } }

/* Forms */

.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-weight: 600; margin-bottom: var(--space-1); color: var(--color-heading); }
.form-field input, .form-field select, .form-field textarea {
    width: 100%; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius);
    font-family: var(--font-body); font-size: 1rem;
}
.form-error { color: var(--color-danger); font-size: 0.9rem; margin-top: var(--space-1); }
/* Show / hide password (password-toggle.js wraps <input data-reveal>). */
.password-field { position: relative; }
.form-field .password-field input { padding-right: 52px; }
.password-field__toggle {
    position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
    display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 10px; background: transparent; color: var(--color-body); cursor: pointer;
}
.password-field__toggle:hover { color: var(--color-heading); }
.password-field__toggle:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: -3px; }
.password-field__toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.badge {
    display: inline-block; background: var(--color-brand-orange); color: var(--color-heading);
    border-radius: 999px; padding: 2px 10px; font-size: 0.8rem; font-weight: 700;
}

/* Cart */

.cart-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.cart-total { display: flex; justify-content: space-between; font-size: 1.25rem; font-weight: 700; padding: var(--space-3) 0; }

/* Footer */

/* The home page ends in a full-width band — no light gap above the footer. */
/* Footer (partials/footer.php): 3 columns on #FCB424 — contact, opening
   hours, social icons — stacked on phones; 2 columns when no social icon is
   set up (--no-social). Data from settings via renderLayout(). */
.site-footer { background: var(--color-footer-bg); color: #000; padding: var(--space-5) 0 var(--space-4); margin-top: var(--space-5); }
.site-footer a { color: #000; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.site-footer__title { font-family: var(--font-display); color: #000; font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 var(--space-2); }
.site-footer__text { font-size: 0.95rem; line-height: 1.65; margin: 0; }
/* Opening hours as a small timetable: day left, time right. */
.site-footer__hours { list-style: none; padding: 0; max-width: 320px; }
.site-footer__hours li { display: flex; justify-content: space-between; gap: var(--space-3); }
.site-footer__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site-footer__time.is-closed { font-weight: 600; }
.site-footer__social-icons { display: flex; flex-direction: row; align-items: center; gap: var(--space-2); }
.site-footer__social-title { display: none; } /* desktop only, see min-width: 1024px */
/* 32px icons inside a 44px tap target, side by side. */
.site-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-footer-icon); transition: transform 0.15s ease; }
.site-footer__social a:hover { transform: translateY(-2px); }
.site-footer__social svg { width: 32px; height: 32px; }
.site-footer a:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
/* Copyright line under a divider in the same colour as the column dividers. */
.site-footer__copy { text-align: center; margin: var(--space-4) auto 0; padding-top: var(--space-3); border-top: 1px solid var(--color-footer-divider); font-size: 0.8rem; }
/* Phones: compact — less padding, smaller type, tighter blocks. */
@media (max-width: 767px) {
    .site-footer { padding: var(--space-4) 0 var(--space-3); margin-top: var(--space-4); }
    .site-footer__grid { gap: var(--space-4); }
    .site-footer__title { font-size: 1.15rem; margin-bottom: var(--space-1); }
    .site-footer__text { font-size: 0.9rem; line-height: 1.6; }
    .site-footer__hours { max-width: none; }
    .site-footer__copy { margin-top: var(--space-3); }
}
@media (min-width: 768px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr 1fr; }
    .site-footer__grid--no-social { grid-template-columns: 1fr 1fr; }
    /* Vertical divider before columns 2 and 3, centred in the gap
       (grid gap on its left, matching padding on its right). */
    .site-footer__grid { column-gap: var(--space-4); }
    .site-footer__grid > * + * { border-left: 1px solid var(--color-footer-divider); padding-left: var(--space-4); }
    .site-footer__social-icons { justify-content: center; }
}
@media (min-width: 1024px) {
    .site-footer__grid { column-gap: var(--space-5); }
    .site-footer__grid > * + * { padding-left: var(--space-5); }
    /* Desktop: "Sociálne siete" heading and larger icons */
    .site-footer__social-title { display: block; text-align: center; margin-bottom: var(--space-3); }
    .site-footer__social-icons { gap: var(--space-3); }
    .site-footer__social a { width: 60px; height: 60px; }
    .site-footer__social svg { width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) { .site-footer__social a { transition: none; } .site-footer__social a:hover { transform: none; } }
.home-main + .site-footer { margin-top: 0; }
.store-closed-banner { background: #FFF4E5; border-left: 4px solid var(--color-brand-orange); color: var(--color-heading); padding: var(--space-3); border-radius: var(--radius); margin-bottom: var(--space-4); font-weight: 600; }

/* Responsive */

@media (max-width: 640px) {
    h1 { font-size: 1.75rem; }
    .hero { padding: var(--space-4) 0; }
}

/* Modal (product customization) */

.modal { position: relative; z-index: 200; } /* above the sticky header */
.modal[hidden] { display: none; }
.modal__backdrop {
    position: fixed; inset: 0; background: rgba(16,24,40,0.6);
}
.modal__panel {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: var(--space-4); max-width: 480px; width: calc(100% - 2rem); max-height: 85vh; overflow-y: auto;
}
.modal__close { position: absolute; top: var(--space-2); right: var(--space-2); background: none; border: none; font-size: 1.5rem; cursor: pointer; }
.topping-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.size-option { display: flex; justify-content: space-between; padding: var(--space-1) 0; }

/* Cookie consent banner */

.consent-banner[hidden] { display: none; }
.consent-banner {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    background: var(--color-surface); border-top: 3px solid var(--color-brand-red);
    box-shadow: 0 -2px 12px rgba(16,24,40,0.15);
    padding: var(--space-4); max-height: 60vh; overflow-y: auto;
}
.consent-banner__categories { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-3) 0; }
.consent-banner__category { display: flex; align-items: center; gap: var(--space-2); }
.consent-banner__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.consent-banner__preview { display: inline-block; margin: 0 0 var(--space-2); padding: 2px 10px; border-radius: 999px; background: var(--color-brand-orange); color: var(--color-heading); font-size: 0.78rem; font-weight: 700; }

/* Checkout (templates/checkout.php, public/assets/js/checkout.js): numbered
   step cards + order summary card holding the only submit button; two
   columns from 900px with a sticky summary (same grid as the cart page). */

.checkout-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-4); align-items: start; }
.checkout-layout[hidden] { display: none; }
.checkout-steps { display: grid; gap: var(--space-3); min-width: 0; counter-reset: checkout-step; }

.checkout-step {
    min-width: 0; margin: 0;
    padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--color-surface);
    border: 0; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    counter-increment: checkout-step;
}
.checkout-step[hidden] { display: none; }
/* A legend can't be a grid/flex item reliably, so float it into the box. */
.checkout-step__title {
    float: left; width: 100%;
    display: flex; align-items: center; gap: var(--space-2);
    margin: 0 0 var(--space-3); padding: 0;
    font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; text-transform: uppercase;
    color: var(--color-heading);
}
.checkout-step__title::before {
    content: counter(checkout-step);
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--color-brand-red); color: #fff;
    font-family: var(--font-body); font-size: 0.95rem; font-weight: 700;
}
.checkout-step__title + * { clear: both; }
.checkout-step__note { margin: 0 0 var(--space-3); color: var(--color-body); }
.checkout-step__note a { font-weight: 600; }
.checkout-step__action { min-height: 44px; }

/* Selectable tiles (fulfillment, payment): native radios kept for keyboard
   and screen readers, visually replaced by the card. */
.choice-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-2); }
.choice-tile { position: relative; display: block; cursor: pointer; }
.choice-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-tile__box {
    display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); align-items: center;
    min-height: 64px; height: 100%;
    padding: var(--space-3);
    border: 2px solid var(--color-border); border-radius: 12px;
    background: var(--color-surface);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice-tile__box .icon { grid-row: span 2; width: 28px; height: 28px; color: var(--color-body); }
.choice-tile__label { font-weight: 700; color: var(--color-heading); }
.choice-tile__hint { font-size: 0.85rem; color: var(--color-body); }
.choice-tile:hover .choice-tile__box { border-color: #CBD2DC; }
.choice-tile input:checked + .choice-tile__box { border-color: var(--color-brand-red); background: #FFF1F1; }
.choice-tile input:checked + .choice-tile__box .icon { color: var(--color-brand-red); }
.choice-tile input:focus-visible + .choice-tile__box { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }

/* Two-column field grid inside a step; collapses to one column on phones. */
.form-grid { display: grid; grid-template-columns: 1fr; column-gap: var(--space-3); }
.form-grid__full { grid-column: 1 / -1; }
@media (min-width: 560px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.checkout-step .form-field input,
.account-form .form-field input { min-height: 48px; padding: 0 var(--space-3); border-radius: 12px; border-width: 2px; background: var(--color-surface); }
.checkout-step .form-field input:focus,
.account-form .form-field input:focus { outline: none; border-color: var(--color-heading); box-shadow: 0 0 0 3px rgba(255, 168, 54, 0.45); }
.checkout-step .form-field input[aria-invalid="true"],
.account-form .form-field input[aria-invalid="true"] { border-color: var(--color-danger); background: #FFF8F6; }
.field-hint { margin: var(--space-1) 0 0; font-size: 0.85rem; color: var(--color-body); }
.field-error { margin: var(--space-1) 0 0; font-size: 0.85rem; font-weight: 600; color: #B42318; }
.field-error:empty { display: none; }
input[aria-invalid="true"] ~ .field-hint { display: none; }

.promo-toggle { margin-top: var(--space-3); }
.promo-toggle summary { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--color-brand-red); cursor: pointer; }
.promo-toggle summary:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; border-radius: 4px; }
.promo-toggle .form-field { margin: var(--space-2) 0 0; max-width: 320px; }
.promo-toggle input { text-transform: uppercase; }

/* Kitchen manual order (kitchenview/templates/new-order.php) still uses the
   older radio row and shares .checkout-layout / .checkout-summary. */
.fulfillment-choice { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.fulfillment-choice label { flex: 1; border: 2px solid var(--color-border); border-radius: var(--radius); padding: var(--space-3); text-align: center; cursor: pointer; }
.fulfillment-choice input:checked + span { color: var(--color-brand-red); font-weight: 700; }

.eligibility-banner { padding: var(--space-3); border-radius: 12px; margin: var(--space-3) 0 0; font-weight: 600; }
.eligibility-banner--ok { background: #eafaf0; color: #1a7a44; }
.eligibility-banner--blocked { background: #fdecea; color: #a5301f; }
/* Address outside the delivery zone: message + three identical option tiles
   (Bolt Food logo, Wolt logo, pickup icon + label). */
.outside-zone__text { margin: 0 0 var(--space-3); }
.outside-zone__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); }
.outside-zone__option {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 64px; padding: var(--space-2) var(--space-3);
    background: #fff; border: 2px solid var(--color-border); border-radius: var(--radius);
    color: var(--color-heading); font: 700 1rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.outside-zone__option:hover { border-color: #CBD2DC; box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08); }
.outside-zone__option:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
.outside-zone__option .icon { width: 26px; height: 26px; flex: none; }
.outside-zone__logo { display: block; height: 28px; width: auto; max-width: 100%; }

/* Summary card (extends .cart-summary). */
.checkout-summary__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.checkout-summary__edit { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.checkout-lines { list-style: none; margin: 0 0 var(--space-3); padding: 0 0 var(--space-2); border-bottom: 1px solid var(--color-border); }
.checkout-line {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-2);
    padding: var(--space-2) 0;
}
.checkout-line + .checkout-line { border-top: 1px dashed var(--color-border); }
.checkout-line__qty { font-weight: 700; color: var(--color-brand-red); font-variant-numeric: tabular-nums; }
.checkout-line__name { font-weight: 600; color: var(--color-heading); }
.checkout-line__price { font-weight: 600; color: var(--color-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-line__details { grid-column: 2 / -1; font-size: 0.85rem; color: var(--color-body); }

.checkout-consents { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.consent-check { display: flex; align-items: flex-start; gap: var(--space-2); min-height: 44px; padding-top: var(--space-2); font-size: 0.9rem; cursor: pointer; }
.consent-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--color-brand-red); }
.checkout-summary .form-error:empty { display: none; }
.checkout-summary__cta {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
    width: 100%; min-height: 56px; margin-top: var(--space-3); padding: 0 var(--space-4);
    font-size: 1.1rem;
}
.checkout-summary__cta-total { font-variant-numeric: tabular-nums; }
.checkout-summary__cta.is-loading { opacity: 0.75; cursor: progress; }
.checkout-summary__assure { margin: var(--space-2) 0 0; text-align: center; font-size: 0.85rem; color: var(--color-body); }

@media (min-width: 640px) {
    .checkout-step { padding: var(--space-4); }
}
@media (min-width: 900px) {
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 380px; }
    .checkout-summary { position: sticky; top: calc(var(--header-overlap, 108px) + var(--space-3)); }
}
@media (prefers-reduced-motion: reduce) { .choice-tile__box { transition: none; } }

/* Customer account (templates/account.php, public/assets/js/account.js):
   orders on the left, address + password cards on the right from 900px. */
.account-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.account-head__title { margin: 0; }
.account-head__hello { margin: var(--space-1) 0 0; color: var(--color-body); overflow-wrap: anywhere; }
.account-head .btn { min-height: 44px; }
.account-layout { display: grid; grid-template-columns: 1fr; gap: var(--space-3); align-items: start; }
.account-main, .account-side { display: grid; gap: var(--space-3); min-width: 0; }
.account-card {
    padding: var(--space-4) var(--space-3);
    background: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
}
.account-card[hidden] { display: none; }
.account-card__title { margin: 0 0 var(--space-3); font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.02em; }
.account-muted { margin: 0 0 var(--space-3); color: var(--color-body); }
.account-empty { text-align: center; padding: var(--space-4) 0; }
.account-empty p { margin: 0 0 var(--space-3); }
.account-form .form-grid { grid-template-columns: 1fr 1fr; }
.account-form__submit { width: 100%; min-height: 48px; }
.account-form__status { margin: var(--space-2) 0 0; font-size: 0.9rem; font-weight: 600; color: #B42318; }
.account-form__status:empty { display: none; }
.account-form__status.is-ok { color: #1a7a44; }

.account-current { border: 2px solid var(--color-brand-orange); }

/* Status tracker: dots joined by a line, done/current steps in brand red. */
.order-tracker { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: var(--space-3) 0; padding: 0; counter-reset: none; }
.order-tracker__step { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; font-size: 0.8rem; color: var(--color-body); }
.order-tracker__step::before {
    content: ''; position: absolute; top: 8px; right: 50%; width: 100%; height: 3px;
    background: var(--color-border);
}
.order-tracker__step:first-child::before { display: none; }
.order-tracker__step.is-done::before, .order-tracker__step.is-current::before { background: var(--color-brand-red); }
.order-tracker__dot { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; background: var(--color-surface); border: 3px solid var(--color-border); }
.order-tracker__step.is-done .order-tracker__dot { background: var(--color-brand-red); border-color: var(--color-brand-red); }
.order-tracker__step.is-current .order-tracker__dot { border-color: var(--color-brand-red); box-shadow: 0 0 0 4px rgba(250, 20, 20, 0.15); }
.order-tracker__step.is-current .order-tracker__label { font-weight: 700; color: var(--color-heading); }
.order-tracker__label { overflow-wrap: anywhere; }

.order-history { display: grid; gap: var(--space-3); }
.order-card { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: 12px; }
.order-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.order-card__meta { margin: 0; font-size: 0.9rem; color: var(--color-body); }
.order-card__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.order-card__total { display: flex; gap: var(--space-2); justify-content: space-between; margin: 0; font-weight: 700; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.account-current .order-card__total { margin-top: var(--space-2); font-size: 1.1rem; }
.order-card__again { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; }
.order-card__again .icon { width: 18px; height: 18px; }
.order-card__notice { margin: var(--space-2) 0 0; font-size: 0.9rem; color: var(--color-heading); }
.order-card__notice:empty { display: none; }

.order-lines { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.order-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); padding: var(--space-1) 0; }
.order-line__qty { font-weight: 700; color: var(--color-brand-red); font-variant-numeric: tabular-nums; }
.order-line__name { font-weight: 600; color: var(--color-heading); }
.order-line__details { display: block; font-weight: 400; font-size: 0.85rem; color: var(--color-body); }
.order-line__price { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-heading); }

.status-pill { flex: none; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: #FFF4E5; color: #93370D; white-space: nowrap; }
.status-pill--completed { background: #eafaf0; color: #1a7a44; }
.status-pill--cancelled { background: #F2F4F7; color: var(--color-body); }

@media (min-width: 640px) {
    .account-card { padding: var(--space-4); }
}
@media (min-width: 900px) {
    .account-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-4); }
}

/* Kitchen View */

.staff-header {
    background: var(--color-heading); color: #fff;
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-2) var(--space-3);
}
.staff-header a { color: var(--color-brand-orange); }
.staff-header__store { font-family: var(--font-display); font-size: 1.25rem; }

/* Admin panel sidebar layout ("admin-view" — see modules/adminui/module_description.md) */

.admin-view { display: flex; align-items: flex-start; }
.admin-view__sidebar {
    width: 220px; flex-shrink: 0; background: var(--color-surface); box-shadow: var(--shadow);
    min-height: calc(100vh - 52px); padding: var(--space-3);
}
.admin-view__nav { display: flex; flex-direction: column; gap: 2px; }
.admin-view__nav a {
    padding: var(--space-2); border-radius: var(--radius); color: var(--color-heading);
    font-weight: 600; font-size: 0.95rem;
}
.admin-view__nav a:hover { background: var(--color-bg); color: var(--color-brand-red); text-decoration: none; }
.admin-view__main { flex: 1; min-width: 0; padding: var(--space-4); }

@media (max-width: 800px) {
    .admin-view { flex-direction: column; }
    /* Stacked: the main area takes the screen width (align-items: flex-start
       would otherwise size it to its widest content, e.g. a scrolling pill row). */
    .admin-view__main { width: 100%; }
    .admin-view__sidebar { width: 100%; min-height: auto; }
    .admin-view__nav { flex-direction: row; flex-wrap: wrap; }
}

.kitchen-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); }
.kitchen-column { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-2); min-height: 60vh; }
.kitchen-column h3 { text-align: center; }
.kitchen-column__count { background: var(--color-brand-red); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 0.85rem; }
.kitchen-column__pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); font-size: 0.85rem; }
.kitchen-column__pagination .btn { padding: 2px 10px; font-size: 0.85rem; }

.order-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-2); margin-bottom: var(--space-2); cursor: pointer; transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.order-card:hover { box-shadow: var(--shadow); border-color: var(--color-brand-red); }
.order-card--new { animation: pulse-highlight 1.5s ease-in-out 2; }
.order-card--finished { opacity: 0.65; }
.order-card__id { font-weight: 700; color: var(--color-heading); }
.order-card__meta { font-size: 0.85rem; color: var(--color-body); margin: var(--space-1) 0; }
.order-card__actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-2); }
.order-card__actions button { flex: 1; font-size: 0.85rem; padding: var(--space-1) var(--space-2); }

@keyframes pulse-highlight {
    0%, 100% { box-shadow: 0 0 0 0 rgba(250, 20, 20, 0); }
    50% { box-shadow: 0 0 0 6px rgba(250, 20, 20, 0.4); }
}

@media (max-width: 699px) {
    .kitchen-board { grid-template-columns: minmax(0, 1fr); }
}

/* Admin promotions */

.promo-type-fields { display: none; }
.promo-type-fields.active { display: block; }

/* ------------------------------------------------------------------
   Information pages (templates/page.php + templates/pages/*.php)
   ------------------------------------------------------------------ */
/* Page head: continues the black header, with a warm ember glow rising
   from the bottom right (same family as the /menu oven background). */
.page-head {
    background:
        radial-gradient(ellipse 60% 120% at 92% 130%, rgba(253, 109, 40, 0.38), transparent 60%),
        radial-gradient(ellipse 40% 90% at 70% 140%, rgba(250, 20, 20, 0.22), transparent 60%),
        #000;
    color: #fff;
    padding: var(--space-4) 0 var(--space-5);
}
.page-head__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; list-style: none; margin: 0 0 var(--space-3); padding: 0; font-size: 0.875rem; color: #B9B2AC; }
.page-head__crumbs li { display: inline-flex; align-items: center; gap: 2px; }
.page-head__crumbs a { color: #B9B2AC; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.page-head__crumbs a:hover { color: #fff; text-decoration: none; background: rgba(255, 255, 255, 0.08); }
.page-head__crumbs a:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 1px; }
.page-head__crumbs [aria-current] { color: #fff; font-weight: 600; padding: 4px 6px; }
.page-head__sep { width: 16px; height: 16px; color: #6F6862; }
.page-head .page-head__title { margin: 0; color: #fff; font-size: clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem); line-height: 0.95; letter-spacing: 0.01em; text-wrap: balance; }
.page-head__lead { margin: var(--space-3) 0 0; max-width: 60ch; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.15rem); color: #D9D2CC; }
.page-main + .site-footer { margin-top: var(--space-5); }
.page-body { padding-top: var(--space-5); }

/* Kontakty */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.contact-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.contact-card, .hours-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-4); }
.contact-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-1); align-content: start; }
.contact-card > :not(.contact-card__icon) { grid-column: 2; }
.contact-card__icon { grid-row: span 4; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(250, 20, 20, 0.08); color: var(--color-brand-red); }
.contact-card__icon .icon { width: 22px; height: 22px; }
.contact-card .contact-card__title { margin: 0; font-size: 1.35rem; letter-spacing: 0.02em; color: var(--color-heading); }
.contact-card__text { margin: 0; font-style: normal; line-height: 1.6; }
.contact-card__text a { color: var(--color-heading); font-weight: 600; word-break: break-word; }
.contact-card__note { margin: var(--space-1) 0 0; font-size: 0.875rem; color: #667085; }
.contact-card__link { display: inline-flex; align-items: center; gap: 0.35em; justify-self: start; min-height: 44px; font-weight: 700; color: var(--color-brand-red); }
.contact-card__link .icon { width: 16px; height: 16px; }
/* The phone card is the one dark, prominent card: calling is how many order. */
.contact-card--phone { background: #111; border-color: #111; color: #fff; }
.contact-card--phone .contact-card__title { color: #fff; }
.contact-card--phone .contact-card__icon { background: rgba(255, 168, 54, 0.16); color: var(--color-brand-orange); }
.contact-card--phone .contact-card__note { color: #A8A19B; }
.contact-card__phones { list-style: none; margin: var(--space-1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.contact-card__phones a { display: inline-flex; min-height: 44px; align-items: center; font-family: var(--font-display); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.4rem); letter-spacing: 0.02em; color: #fff; font-variant-numeric: tabular-nums; transition: color 0.15s ease; }
.contact-card__phones a:hover { color: var(--color-brand-orange); text-decoration: none; }
.contact-card a:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; border-radius: 4px; }

.hours-card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.hours-card .hours-card__title { margin: 0; font-size: 1.6rem; letter-spacing: 0.02em; color: var(--color-heading); }
.status-chip { display: inline-flex; align-items: center; gap: 0.5em; margin: 0; padding: 0.35em 0.8em; border-radius: 999px; font-size: 0.85rem; font-weight: 600; background: #F2F4F7; color: #475467; }
.status-chip::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: #98A2B3; }
.status-chip.is-open { background: #E7F6EC; color: #146C36; }
.status-chip.is-open::before { background: #22A355; box-shadow: 0 0 0 0.22em rgba(34, 163, 85, 0.2); }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: 0.7rem 0.75rem; border-bottom: 1px solid var(--color-border); }
.hours-table tr:last-child th, .hours-table tr:last-child td { border-bottom: 0; }
.hours-table th { text-align: left; font-weight: 400; color: var(--color-body); }
.hours-table td { text-align: right; white-space: nowrap; color: var(--color-heading); font-weight: 600; }
.hours-table td.is-closed { color: #98A2B3; font-weight: 400; }
.hours-table tr.is-today th, .hours-table tr.is-today td { background: #FFF4E5; font-weight: 700; color: var(--color-heading); }
.hours-table tr.is-today th { border-radius: 8px 0 0 8px; }
.hours-table tr.is-today td { border-radius: 0 8px 8px 0; }
.hours-table__today { display: inline-block; margin-left: 0.4em; padding: 0.15em 0.55em; border-radius: 999px; background: var(--color-brand-red); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.1em; }
.hours-card__note { margin: var(--space-3) 0 0; font-size: 0.875rem; color: #667085; }

/* Map: a click-to-load placeholder (no Google request before the click). */
.map-card { margin-top: var(--space-4); }
.map-card__placeholder {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 320px; padding: var(--space-4); border-radius: 14px; text-align: center; color: #fff;
    background:
        radial-gradient(circle at 50% 45%, rgba(253, 109, 40, 0.28), transparent 45%),
        repeating-linear-gradient(28deg, transparent 0 46px, rgba(255, 255, 255, 0.05) 46px 48px),
        repeating-linear-gradient(-62deg, transparent 0 70px, rgba(255, 255, 255, 0.05) 70px 72px),
        #17120F;
}
.map-card__pin { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-brand-red); box-shadow: 0 0 0 10px rgba(250, 20, 20, 0.18); }
.map-card__pin .icon { width: 28px; height: 28px; color: #fff; }
.map-card__address { margin: var(--space-1) 0 0; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.02em; }
.map-card__note { margin: 0; font-size: 0.8rem; color: #A8A19B; }
.map-card__frame { display: block; width: 100%; height: 380px; border: 0; border-radius: 14px; }

/* Rozvoz page: fact cards (reuse .contact-card), zone map, options outside the zone
   (reuse the checkout's .outside-zone__option tiles). */
.delivery-facts__status { justify-self: start; margin-top: var(--space-2); }
.delivery-facts .contact-card__text a { white-space: nowrap; }
.delivery-section { margin-top: var(--space-5); }
.delivery-section .delivery-section__title { margin: 0; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); line-height: 1; color: var(--color-heading); }
.delivery-section__title--anchor { scroll-margin-top: calc(var(--header-overlap, 120px) + var(--space-3)); } /* jump target, clear of the pinned header */
.delivery-section__lead { margin: var(--space-2) 0 var(--space-3); max-width: 70ch; }
/* "Is my address in the zone?" form above the map. */
.zone-check { margin-bottom: var(--space-3); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.zone-check .zone-check__title { margin: 0 0 var(--space-3); font-size: 1.35rem; letter-spacing: 0.02em; color: var(--color-heading); }
.zone-check__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: end; }
.zone-check .form-field { margin: 0; }
.zone-check .form-field input { min-height: 48px; padding: 0 var(--space-3); border-radius: 12px; border-width: 2px; background: var(--color-surface); }
.zone-check .form-field input[aria-invalid="true"] { border-color: var(--color-brand-red); }
.zone-check__btn { min-height: 48px; padding: 0 var(--space-4); }
.zone-check__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); padding: var(--space-3); border-radius: 12px; font-weight: 600; }
.zone-check__result[hidden] { display: none; }
.zone-check__result p { margin: 0; }
.zone-check__result.is-ok { background: #eafaf0; color: #1a7a44; }
.zone-check__result.is-outside, .zone-check__result.is-error { background: #fdecea; color: #a5301f; }
.zone-check__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: inherit; text-decoration: underline; }
@media (min-width: 720px) { .zone-check__fields { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } }
.delivery-map { margin-top: 0; }
.delivery-map__frame { height: 440px; border: 1px solid var(--color-border); position: relative; z-index: 0; background: #F1F3F6; }
.delivery-map__frame.is-unavailable { display: grid; place-items: center; color: var(--color-body); }
.delivery-options .outside-zone__option { min-height: 76px; text-align: left; }
.delivery-options__address { display: block; margin-top: 2px; font-size: 0.8rem; font-weight: 400; color: var(--color-body); }

/* Closing call to action, shared by the information pages. */
.page-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
    margin-top: var(--space-5); padding: var(--space-4); border-radius: 16px; color: #fff;
    background: radial-gradient(ellipse 70% 140% at 100% 100%, rgba(253, 109, 40, 0.35), transparent 60%), #000;
}
.page-cta .page-cta__title { margin: 0; color: #fff; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); line-height: 1; }
.page-cta__text { margin: var(--space-1) 0 0; color: #D9D2CC; }
.page-cta__btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.6em; font-size: 1.05rem; }
.page-cta__btn .icon { width: 18px; height: 18px; }

@media (min-width: 640px) {
    .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-card--phone { grid-column: 1 / -1; }
    .page-cta { padding: var(--space-4) var(--space-5); }
}
@media (min-width: 1024px) {
    .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
    .page-head { padding: var(--space-5) 0 calc(var(--space-5) * 1.4); }
}
@media (prefers-reduced-motion: reduce) { .topbar-pages a, .contact-card__phones a { transition: none; } }

/* Kontakty: contact form (pages/contact.php, contact-form.js) */
.contact-form-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); margin-top: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; }
.contact-form-card .contact-form-card__title { margin: 0 0 var(--space-2); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem); line-height: 1; color: var(--color-heading); }
.contact-form-card__intro p { margin: 0 0 var(--space-2); max-width: 42ch; }
.contact-form-card__hint { font-size: 0.9rem; color: #667085; }
.contact-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-3); }
.contact-form .form-field { margin-bottom: var(--space-2); }
.contact-form .form-field input,
.contact-form .form-field textarea { width: 100%; min-height: 48px; padding: 0.7rem var(--space-3); border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font: inherit; color: var(--color-heading); }
.contact-form .form-field textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.contact-form .form-field input:focus,
.contact-form .form-field textarea:focus { outline: none; border-color: var(--color-heading); box-shadow: 0 0 0 3px rgba(255, 168, 54, 0.45); }
.contact-form .form-field [aria-invalid] { border-color: var(--color-danger); }
.contact-form .form-error:empty { display: none; }
.contact-form__req { color: var(--color-brand-red); }
.contact-form__opt { font-weight: 400; color: #667085; }
.contact-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__privacy { margin: var(--space-1) 0 var(--space-3); font-size: 0.85rem; color: #667085; }
.contact-form__status:empty { display: none; }
.contact-form__status { margin: 0 0 var(--space-3); font-weight: 600; }
.contact-form__status.is-error { padding: var(--space-2) var(--space-3); border-radius: 10px; background: #FEF3F2; color: #B42318; }
.contact-form__submit { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.8em 1.8em; font-size: 1.05rem; }
.contact-form__submit:disabled { opacity: 0.7; cursor: progress; }
.contact-form__done { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-1); padding: var(--space-4); border-radius: 12px; background: #E7F6EC; color: #0E4F27; }
.contact-form__done:focus { outline: none; }
.contact-form__done h3 { margin: var(--space-1) 0 0; font-size: 1.6rem; color: #0E4F27; }
.contact-form__done p { margin: 0; }
.contact-form__done-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #22A355; color: #fff; }
.contact-form__done-icon .icon { width: 26px; height: 26px; stroke-width: 3; }
@media (min-width: 640px) {
    .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-form__full { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .contact-form-card { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--space-5); padding: var(--space-5); }
}
.contact-form__done[hidden] { display: none; }
.contact-form__done { scroll-margin-top: calc(var(--header-overlap, 108px) + var(--space-3)); }

/* Alergény page (pages/allergens.php, allergens-page.js) */
.allergen-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); border-radius: 14px; background: #FFF4E5; border: 1px solid #F7C97E; color: #4A2E05; }
.allergen-notice__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-brand-orange); color: #1A0F00; }
.allergen-notice__icon .icon { width: 24px; height: 24px; }
.allergen-notice .allergen-notice__title { margin: 0 0 var(--space-1); font-size: 1.5rem; letter-spacing: 0.02em; color: #2E1B02; }
.allergen-notice p { margin: 0; max-width: 72ch; }
.allergen-notice__phones { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-2) !important; }
.allergen-notice__phones a { display: inline-flex; align-items: center; gap: 0.4em; min-height: 44px; font-weight: 700; color: #2E1B02; }
.allergen-notice__phones .icon { width: 18px; height: 18px; color: var(--color-brand-red); }

.allergen-section { margin-top: var(--space-5); }
.allergen-section__head { margin-bottom: var(--space-3); }
.allergen-section .allergen-section__title { margin: 0 0 var(--space-1); font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.6rem); line-height: 1; color: var(--color-heading); }
.allergen-section__head p { margin: 0; max-width: 70ch; color: #475467; }

.allergen-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.allergen-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; scroll-margin-top: calc(var(--header-overlap, 108px) + var(--space-3)); }
.allergen-card:target { border-color: var(--color-brand-orange); box-shadow: 0 0 0 3px rgba(255, 168, 54, 0.35); }
.allergen-card__number { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #111; color: #fff; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.allergen-card .allergen-card__name { margin: 2px 0 var(--space-1); font-size: 1.45rem; letter-spacing: 0.02em; color: var(--color-heading); }
.allergen-card__covers { margin: 0; font-size: 0.925rem; line-height: 1.55; color: #475467; }
.allergen-card__count { margin: var(--space-2) 0 0; font-size: 0.85rem; color: var(--color-heading); }
.allergen-card__count strong { color: var(--color-brand-red); }
.allergen-card__count.is-none { color: #98A2B3; }

.allergen-filter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: end; margin-bottom: var(--space-3); padding: var(--space-3); border-radius: 14px; background: var(--color-surface); border: 1px solid var(--color-border); }
.allergen-filter__field label { display: block; margin-bottom: var(--space-1); font-weight: 600; color: var(--color-heading); }
.allergen-filter input, .allergen-filter select { width: 100%; min-height: 48px; padding: 0 var(--space-3); border: 2px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font: inherit; color: var(--color-heading); }
.allergen-filter input:focus, .allergen-filter select:focus { outline: none; border-color: var(--color-heading); box-shadow: 0 0 0 3px rgba(255, 168, 54, 0.45); }
.allergen-filter__count { margin: 0; font-size: 0.875rem; color: #667085; }

.allergen-menu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.allergen-menu__group { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: var(--space-3) var(--space-3) var(--space-2); }
.allergen-menu .allergen-menu__category { margin: 0 0 var(--space-1); font-size: 1.4rem; letter-spacing: 0.02em; color: var(--color-heading); }
.allergen-menu__list { list-style: none; margin: 0; padding: 0; }
.allergen-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; border-bottom: 1px solid var(--color-border); }
.allergen-menu__row:last-child { border-bottom: 0; }
.allergen-menu__row a { color: var(--color-heading); font-weight: 600; }
.allergen-menu__row a:hover { color: var(--color-brand-red); }
.allergen-menu__numbers { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; flex: none; max-width: 50%; }
.allergen-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: #FFF4E5; color: #7A4A06; font-size: 0.85rem; font-weight: 700; text-decoration: none; cursor: help; font-variant-numeric: tabular-nums; }
.allergen-menu__none { font-size: 0.85rem; color: #98A2B3; white-space: nowrap; }
.allergen-menu__empty { margin: 0; padding: var(--space-4); text-align: center; color: #667085; }
.allergen-legal { margin: var(--space-4) 0 0; max-width: 80ch; font-size: 0.85rem; color: #667085; }

@media (min-width: 640px) {
    .allergen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .allergen-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .allergen-filter__count { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .allergen-filter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
    .allergen-filter__count { grid-column: auto; padding-bottom: 14px; white-space: nowrap; }
    .allergen-menu__list { columns: 2; column-gap: var(--space-5); }
    .allergen-menu__row { break-inside: avoid; }
    .allergen-menu__row:last-child { border-bottom: 1px solid var(--color-border); }
}

/* Kitchen board: banner while the browser blocks the new-order sound (kitchen.js) */
.kitchen-sound { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); padding: var(--space-3); border-radius: 12px; background: #FFF4E5; border: 1px solid #F7C97E; color: #4A2E05; font-weight: 600; }
.kitchen-sound[hidden] { display: none; }
.kitchen-sound .icon { width: 24px; height: 24px; flex: none; color: var(--color-brand-red); }
.kitchen-sound span { flex: 1 1 260px; }
.kitchen-sound .btn { min-height: 44px; }

/* Cart → "Upraviť" dialog (cart.php, cart.js): the product's options for one line */
.cart-card__links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cart-card__edit {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; padding: 0 14px; border-radius: 10px;
    border: 1.5px solid var(--color-border); background: var(--color-surface); color: var(--color-heading);
    font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cart-card__edit .icon { width: 16px; height: 16px; }
.cart-card__edit:hover { border-color: var(--color-heading); }
@media (prefers-reduced-motion: reduce) { .cart-card__edit, .cart-card__remove { transition: none; } }
.cart-card__edit:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
.cart-edit { width: min(620px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 18px; background: var(--color-surface); color: var(--color-body); box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3); overflow: hidden; }
.cart-edit::backdrop { background: rgba(16, 24, 40, 0.55); }
.cart-edit[open] { animation: cart-edit-in 0.18s ease-out; }
@keyframes cart-edit-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html:has(.cart-edit[open]) { overflow: hidden; scrollbar-gutter: stable; }
.cart-edit__form { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); margin: 0; }
.cart-edit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex: none; padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); }
.cart-edit__eyebrow { margin: 0 0 2px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand-red); }
.cart-edit .cart-edit__title { margin: 0; font-size: 1.6rem; line-height: 1.1; text-transform: none; }
.cart-edit__close { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%; background: var(--color-bg); color: var(--color-heading); cursor: pointer; }
.cart-edit__close:hover { background: #FFF1F1; color: var(--color-brand-red); }
.cart-edit__close .icon { width: 20px; height: 20px; }
.cart-edit__body { flex: 1; overflow-y: auto; padding: var(--space-4); }
.cart-edit__body .option-group:last-child { margin-bottom: 0; }
.cart-edit__loading { color: #667085; }
.cart-edit__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); flex: none; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); background: var(--color-bg); }
.cart-edit__error { flex-basis: 100%; margin: 0; }
.cart-edit__error:empty { display: none; }
.cart-edit__save { flex: 1; min-height: 48px; padding-inline: var(--space-3); text-align: center; white-space: nowrap; font-size: 1rem; }
/* Phones: a bottom sheet across the full width (sized in %, not vw, so the
   open dialog can't widen the mobile layout viewport). */
@media (max-width: 600px) {
    .cart-edit { width: 100%; max-height: calc(100dvh - 40px); margin: auto 0 0; border-radius: 18px 18px 0 0; }
    .cart-edit__form { max-height: calc(100dvh - 40px); }
    .cart-edit__foot { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
    .cart-edit .option-grid { grid-template-columns: minmax(0, 1fr); }
}
@keyframes cart-edit-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 600px) { .cart-edit[open] { animation-name: cart-edit-up; } }
@media (prefers-reduced-motion: reduce) { .cart-edit[open] { animation: none; } }

/* Cart gift line (Zľavy → "Nákup nad sumu → produkt") and the "Pridať" offer */
.cart-card--gift { box-shadow: inset 0 0 0 2px var(--color-brand-orange), 0 1px 3px rgba(16, 24, 40, 0.08); background: linear-gradient(180deg, #FFF8EE, var(--color-surface) 60%); }
.cart-card__gift { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; padding: 3px 10px 3px 8px; border-radius: 999px; background: var(--color-brand-orange); color: #2B1700; font-size: 0.78rem; font-weight: 700; }
.cart-card__gift .icon { width: 15px; height: 15px; }
.cart-card--gift .cart-card__meta s { color: #667085; }
.cart-card--gift .cart-card__meta strong { color: var(--color-heading); }
.cart-card--gift .cart-card__total { color: var(--color-brand-red); }
.cart-card__gift-note { font-size: 0.85rem; color: #667085; }
.cart-gift-offer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3); border: 2px dashed var(--color-brand-orange); border-radius: 16px; background: #FFF8EE; }
.cart-gift-offer p { flex: 1 1 180px; margin: 0; color: var(--color-heading); }
.cart-gift-offer__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-brand-orange); color: #2B1700; }
.cart-gift-offer__icon .icon { width: 20px; height: 20px; }
.cart-gift-offer__btn { min-height: 44px; }
/* Reward with several options: the options under the offer text, one button each */
.cart-reward-choice__options { flex: 1 1 100%; display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cart-reward-choice__option { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--color-brand-orange); color: var(--color-heading); }

/* Home "špeciálne ponuky" (partials/home-offers.php): promotion images on the
   black band between the hero (or the phone category tiles) and "naše
   najobľúbenejšie". 1 image full width, 2 side by side (stacked on phones),
   3+ a carousel: 1 per view on phones, 2 from 768px (offers.js). */
.offers { background: #000; color: #fff; padding: var(--space-5) 0 0; }
.offers__track { display: grid; gap: var(--space-3); }
.offer { margin: 0; overflow: hidden; border-radius: 18px; background: #141010; box-shadow: 0 18px 40px -24px rgba(255, 168, 54, 0.35); }
.offer img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.offer__link { display: block; border-radius: inherit; }
.offer__link img { transition: transform 0.35s ease; }
.offer__link:hover img { transform: scale(1.03); }
.offer__link:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 3px; }
@media (min-width: 768px) {
    .offers--n2 .offers__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
}
.offers--carousel .offers__track {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
}
.offers--carousel .offers__track::-webkit-scrollbar { display: none; }
.offers--carousel .offers__track:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 4px; }
.offers--carousel .offer { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 768px) {
    .offers--carousel .offers__track { gap: var(--space-4); }
    .offers--carousel .offer { flex-basis: calc((100% - var(--space-4)) / 2); }
}
.offers__nav { display: flex; gap: var(--space-2); grid-column: 3; justify-self: end; }
.offers__nav [data-offers-dir] { display: none; }
@media (min-width: 640px) { .offers__nav [data-offers-dir] { display: inline-flex; } }
.offers__pause .offers__icon-play, .offers__pause.is-paused .offers__icon-pause { display: none; }
.offers__pause.is-paused .offers__icon-play { display: block; }
.offers__pause[hidden] { display: none; }
.offers__dots { display: flex; justify-content: center; gap: 4px; margin-top: var(--space-2); }
.offers__dot { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.offers__dot::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transition: width 0.2s ease, background-color 0.2s ease; }
.offers__dot[aria-current="true"]::before { width: 24px; background: var(--color-brand-orange); }
.offers__dot:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 0; border-radius: 8px; }
.offers__dot[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
    .offer__link img, .offers__dot::before { transition: none; }
    .offer__link:hover img { transform: none; }
}
/* Cinematic entrance, once, when the section scrolls into view
   (offers-reveal.js arms it): the title rises, each offer fades in while its
   image settles from a slow zoom. Scale only, no vertical shift - the
   carousel track is a scroll container and would clip it. */
.offers.is-armed:not(.is-in) .popular__title,
.offers.is-armed:not(.is-in) .offer { opacity: 0; }
.offers.is-in .popular__title { animation: hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.offers.is-in .offer { animation: offer-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both; }
.offers.is-in .offer:nth-child(2) { animation-delay: 0.4s; }
.offers.is-in .offer img { animation: offer-zoom 2.4s cubic-bezier(0.2, 0.6, 0.2, 1) 0.2s backwards; }
.offers.is-in .offer:nth-child(2) img { animation-delay: 0.4s; }
@keyframes offer-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes offer-zoom { from { transform: scale(1.14); } to { transform: scale(1); } }

/* Storefront top bar: "Administrácia" for signed-in admins / supervisors
   (partials/header.php) — an orange icon tab hanging from the top edge,
   rounded bottom corners only, like the Kontakty / Alergény tab. */
.topbar-admin { display: inline-flex; align-items: center; justify-content: center; align-self: stretch; min-width: 40px; min-height: 36px; padding: 0 10px 4px; border-radius: 0 0 12px 12px; background: var(--color-brand-orange); color: #2B1700; box-shadow: 0 4px 14px rgba(255, 168, 54, 0.3); transition: background-color 0.15s ease; }
.topbar-admin .icon { width: 18px; height: 18px; }
.topbar-admin:hover { background: #FFBE66; color: #2B1700; text-decoration: none; }
.topbar-admin:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .topbar-admin { transition: none; } }
@media (max-width: 479px) {
    /* Room for the phone numbers when the staff button is in the row. */
    .topbar-admin ~ .lang-switcher a { min-width: 36px; }
}
.header-pages__admin { display: none !important; }
@media (max-width: 389px) {
    /* Below 390px the phone numbers need the whole top bar: the staff
       button moves into the second row, in front of Kontakty / Alergény. */
    .site-topbar .topbar-admin { display: none; }
    .header-pages__admin { display: inline-flex !important; justify-content: center; min-width: 38px; padding: 0 !important; }
    .header-pages__admin .icon { width: 17px; height: 17px; }
}

/* "Overiť adresu" hidden when address verification is switched off
   (Nastavenia › Mapy a adresy) — .btn would otherwise override [hidden]. */
#validate-address-btn[hidden], #new-order-validate-address-btn[hidden] { display: none; }

/* Údržba: public maintenance page (modules/maintenance/templates/maintenance.php) */
.mnt-body { min-height: 100vh; min-height: 100dvh; margin: 0; background: radial-gradient(120% 80% at 50% 0%, #2A0A0A 0%, #000 60%); color: var(--color-body); }
.mnt { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 80px 16px 96px; }
.mnt__card { width: 100%; max-width: 560px; padding: 32px 28px; border-radius: 22px; background: var(--color-surface); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-align: center; }
.mnt__logo { display: block; width: auto; height: 84px; margin: -72px auto 12px; border-radius: 0 0 12px 12px; }
.mnt__icon { display: inline-grid; place-items: center; width: 56px; height: 56px; margin: 4px 0 8px; border-radius: 50%; background: rgba(255, 168, 54, 0.18); color: var(--color-brand-orange-deep); }
.mnt__icon svg, .mnt__phone svg, .mnt-login svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mnt__title { margin: 0 0 8px; font-family: var(--font-display); font-size: clamp(2rem, 6vw, 2.6rem); font-weight: 400; letter-spacing: 0.02em; color: var(--color-heading); }
.mnt__lead { margin: 0 auto 8px; max-width: 44ch; font-size: 1.05rem; line-height: 1.5; }
.mnt__until { margin: 0 0 8px; color: var(--color-heading); }
.mnt__section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.mnt__subtitle { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 0 0 6px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.03em; color: var(--color-heading); text-transform: none; }
.mnt__note { margin: 0 0 14px; font-size: 0.95rem; }
.mnt__phones { display: grid; gap: 10px; }
.mnt__phone { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 60px; padding: 0 20px; border-radius: 14px; background: var(--color-brand-red); color: #fff; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; box-shadow: 0 8px 20px rgba(250, 20, 20, 0.3); transition: background-color 0.15s ease; }
.mnt__phone:hover { background: var(--color-brand-red-hover); }
.mnt__phone:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 3px; }
.mnt__status { padding: 3px 10px; border-radius: 999px; background: #FDECEC; color: #C20F0F; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0; }
.mnt__status.is-open { background: rgba(46, 204, 113, 0.15); color: #1F9D57; }
.mnt__hours { display: grid; gap: 2px; max-width: 340px; margin: 10px auto 0; padding: 0; list-style: none; text-align: left; }
.mnt__hours li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 12px; border-radius: 8px; }
.mnt__hours li.is-today { background: rgba(255, 168, 54, 0.18); color: var(--color-heading); font-weight: 700; }
.mnt__hours .is-closed { color: #C20F0F; font-weight: 600; }
.mnt-login { position: fixed; bottom: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); font-size: 0.8rem; text-decoration: none; transition: color 0.15s ease, background-color 0.15s ease; }
.mnt-login svg { width: 16px; height: 16px; }
.mnt-login:hover, .mnt-login:focus-visible { background: rgba(255, 255, 255, 0.16); color: #fff; }
.mnt-login:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
.mnt-preview { position: sticky; top: 0; z-index: 10; margin: 0; padding: 10px 16px; background: var(--color-brand-orange); color: #1A0F00; font-weight: 700; text-align: center; }
/* Standalone staff login during maintenance (templates/maintenance-login.php) */
.mnt__card--login { max-width: 440px; }
.mnt-notice { margin: 4px 0 20px; padding: 12px 16px; border-left: 4px solid var(--color-brand-orange); border-radius: 0 10px 10px 0; background: rgba(255, 168, 54, 0.14); color: var(--color-heading); font-size: 0.95rem; line-height: 1.45; text-align: left; }
.mnt-notice p { margin: 0; }
.mnt-form { text-align: left; }
.mnt-form .form-field input { min-height: 48px; border-radius: 12px; }
.mnt-form__submit { width: 100%; min-height: 50px; font-size: 1.05rem; }
.mnt-back { display: inline-block; margin-top: 18px; color: var(--color-body); font-size: 0.9rem; }
.mnt-back:hover { color: var(--color-heading); }
/* Storefront bar for logged-in staff while customers see the maintenance page */
.maintenance-staff-bar { margin: 0; padding: 8px 16px; background: #C20F0F; color: #fff; font-size: 0.9rem; font-weight: 600; text-align: center; }
.maintenance-staff-bar a { color: #fff; }
@media (max-width: 480px) {
    .mnt__card { padding: 28px 18px; }
    .mnt__phone { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .mnt__phone, .mnt-login { transition: none; } }

/* "Pec" mobile look (Nastavenia › Mobilné zobrazenie, Modules\Storefront\MobileLayout):
   body.mobile-pec, phones and tablets only — desktop is the same in both
   looks. One header row, black bottom tabs with a red cart bar above them,
   all categories as a grid (no sideways scrolling), dark category and
   product pages. Red is kept for actions, orange marks the current place. */
.site-header__status, .category-switch, .cart-bar, .bottom-nav__total, .pages-menu { display: none; }
@media (max-width: 1023px) {
    /* Header: the top bar gives up its row; the language switcher (and the
       staff button) move into the header row, right of the logo. */
    body.mobile-compact .site-topbar { z-index: 51; height: 0; background: transparent; }
    body.mobile-compact .site-topbar__inner { position: relative; min-height: 0; height: 0; padding-left: var(--space-3); }
    body.mobile-compact .site-topbar__phones { display: none; }
    body.mobile-compact .site-topbar__end { position: absolute; top: 8px; right: var(--space-3); height: 44px; align-self: auto; align-items: center; }
    body.mobile-compact .lang-switcher { align-self: center; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; box-shadow: none; }
    body.mobile-compact .lang-switcher a { min-height: 34px; border-radius: 9px; }
    body.mobile-compact .site-topbar .topbar-admin { display: inline-flex; align-self: center; min-height: 44px; padding: 0 10px; border-radius: 12px; box-shadow: none; }
    body.mobile-compact .header-pages { display: none; } /* Pec: the burger below; Terasa: the footer */

    /* Burger right of the language switcher: Kontakty | Rozvoz | Alergény as a list under it. */
    body.mobile-pec .pages-menu { display: block; position: relative; align-self: center; }
    body.mobile-pec .pages-menu__button {
        display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: rgba(28, 28, 28, 0.8);
        color: #fff; cursor: pointer; list-style: none;
    }
    body.mobile-pec .pages-menu__button::-webkit-details-marker { display: none; }
    body.mobile-pec .pages-menu__button .icon { width: 22px; height: 22px; }
    body.mobile-pec .pages-menu__button:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
    body.mobile-pec .pages-menu[open] .pages-menu__button { border-color: var(--color-brand-orange); color: var(--color-brand-orange); }
    body.mobile-pec .pages-menu__panel {
        position: absolute; top: calc(100% + 8px); right: 0; display: flex; flex-direction: column; min-width: 200px; padding: 6px;
        border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 14px; background: #1C1C1C; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
    }
    body.mobile-pec .pages-menu__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; color: #fff; font-size: 1rem; font-weight: 600; }
    body.mobile-pec .pages-menu__panel a:hover { background: rgba(255, 255, 255, 0.1); text-decoration: none; }
    body.mobile-pec .pages-menu__panel a[aria-current="page"] { color: var(--color-brand-orange); }
    body.mobile-pec .pages-menu__panel a:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: -3px; }

    body.mobile-compact .site-header__main { display: flex; align-items: center; gap: 10px; min-height: 60px; padding-right: calc(var(--space-3) + var(--topbar-end-w, 96px) + 10px); }
    body.mobile-compact .site-header__logo { flex: none; min-height: 60px; max-width: 100%; }
    body.mobile-compact .site-header__logo img { align-self: center; width: 44px; height: 44px; margin-top: 0; }
    body.mobile-compact .site-header__logo img.site-header__logo-img--custom { width: auto; max-width: 120px; }
    /* Open / closed takes the place of the name (the logo carries it). */
    body.mobile-compact .site-header__main:has(.site-header__status) .site-header__logo-text { display: none; }
    body.mobile-compact .site-header__status {
        display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; margin: 0;
        color: #C9C1BB; font-size: 0.75rem; font-weight: 600; line-height: 1.25;
    }
    body.mobile-compact .site-header__status span { min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    body.mobile-compact .site-header__status::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #35C46A; }
    body.mobile-compact .site-header__status.is-closed::before { background: var(--color-brand-red); }

    /* Bottom tabs: black, the current tab orange. */
    body.mobile-pec .bottom-nav { background: #000; border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; }
    body.mobile-pec .bottom-nav__item { color: #C9C1BB; }
    body.mobile-pec .bottom-nav__item:hover { color: #fff; }
    body.mobile-pec .bottom-nav__item.is-active { color: var(--color-brand-orange); }
    body.mobile-pec .bottom-nav__item.is-active .bottom-nav__icon { background: none; }
    body.mobile-pec .bottom-nav__badge { box-shadow: 0 0 0 2px #000; }
    body.mobile-pec .bottom-nav__item:focus-visible { outline-color: var(--color-brand-orange); }
    /* Where the cart bar is shown it replaces the "Košík" tab. */
    body.mobile-pec--cart-bar .bottom-nav__item--cart { display: none; }

    /* Cart bar: count, "Zobraziť košík", total. Display type keeps the white
       label large enough to read on the corporate red. */
    body.mobile-pec .cart-bar {
        position: fixed; left: 12px; right: 12px; z-index: 70;
        bottom: calc(64px + 8px + env(safe-area-inset-bottom, 0px));
        display: flex; align-items: center; gap: 12px;
        min-height: 56px; padding: 0 16px 0 10px;
        border-radius: 16px;
        background: var(--color-brand-red); color: #fff;
        box-shadow: 0 10px 24px -8px rgba(250, 20, 20, 0.6);
        font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.03em; line-height: 1;
    }
    body.mobile-pec .cart-bar[hidden] { display: none; }
    body.mobile-pec .cart-bar:hover { background: var(--color-brand-red-hover); text-decoration: none; }
    body.mobile-pec .cart-bar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
    body.mobile-pec .cart-bar__count {
        display: inline-flex; align-items: center; justify-content: center; flex: none;
        min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px;
        background: #fff; color: #B50B0B;
        font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0;
    }
    body.mobile-pec .cart-bar__label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    body.mobile-pec .cart-bar__total { flex: none; font-weight: 400; font-variant-numeric: tabular-nums; }
    /* Keep the end of the page clear of the bar as well as the tabs. */
    body.mobile-pec:has(.cart-bar:not([hidden])) { padding-bottom: calc(64px + 72px + env(safe-area-inset-bottom, 0px)); }

    /* Landing page: all categories in rows of three, name only. */
    body.mobile-compact .home-categories .category-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    body.mobile-compact .home-categories .category-tile__meta,
    body.mobile-compact .home-categories .category-tile__go { display: none; }
    body.mobile-compact .home-categories .category-tile__body { padding: var(--space-2); }
    body.mobile-compact .home-categories .category-tile__name { font-size: clamp(0.95rem, 4.4vw, 1.5rem); }

    /* Category page: shorter cover, then every category as a button. */
    body.mobile-compact .category-cover { height: min(220px, 100svh); }
    body.mobile-compact .category-cover h1 { font-size: clamp(2.5rem, 11vw, 3.5rem); }
    body.mobile-compact .category-cover p { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    body.mobile-compact .category-switch { display: block; padding: var(--space-3) 0 0; }
    body.mobile-compact .category-switch__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
    body.mobile-compact .category-switch a {
        display: flex; align-items: center; justify-content: center;
        min-height: 44px; padding: 4px 6px; border-radius: 12px;
        background: #1C1817; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        color: #fff; font-size: 0.875rem; font-weight: 600; line-height: 1.15; text-align: center; overflow-wrap: anywhere;
    }
    body.mobile-compact .category-switch a:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--color-brand-orange); }
    body.mobile-compact .category-switch a.is-active { background: var(--color-brand-orange); box-shadow: none; color: #1A0F00; font-weight: 700; }
    body.mobile-compact .category-switch a:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
    body.mobile-compact .category-switch a.is-active:focus-visible { outline-color: #fff; }

    /* Dark category and product pages. */
    body.mobile-pec--category, body.mobile-pec--product { background: #000; }
    body.mobile-pec--category main, body.mobile-pec--product main { color: rgba(255, 255, 255, 0.82); }
    body.mobile-pec--category main.section { padding-top: var(--space-3); }
    body.mobile-pec--product main :is(h1, h2, h3) { color: #fff; }

    /* Product cards: two per row, photo on top, charcoal like the home
       page section "naše najobľúbenejšie". */
    body.mobile-pec--category .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    body.mobile-pec--category .product-grid .pcard { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 0; padding: 0; }
    body.mobile-pec--category .product-grid .pcard__media { width: 100%; aspect-ratio: 4 / 3; border-radius: 0; }
    body.mobile-pec--category .product-grid .pcard__media .icon { width: 44px; height: 44px; }
    body.mobile-pec--category .product-grid .pcard__body { padding: var(--space-2) var(--space-3) var(--space-3); }
    body.mobile-pec--category .product-grid .pcard__name { font-size: 0.98rem; }
    body.mobile-pec--category .product-grid .pcard__desc { font-size: 0.8rem; }
    body.mobile-pec--category .product-grid .pcard,
    body.mobile-pec--product .related .pcard {
        background: #1C1817;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    body.mobile-pec--category .product-grid .pcard:hover,
    body.mobile-pec--product .related .pcard:hover { box-shadow: 0 0 0 1px rgba(255, 168, 54, 0.45); }
    body.mobile-pec--category .product-grid .pcard__media,
    body.mobile-pec--product .related .pcard__media {
        background: radial-gradient(60% 60% at 50% 55%, rgba(255, 168, 54, 0.22), transparent 70%), #141111;
        color: var(--color-brand-orange);
    }
    body.mobile-pec--category .product-grid .pcard__media--photo,
    body.mobile-pec--product .related .pcard__media--photo { background: radial-gradient(55% 55% at 50% 55%, rgba(253, 109, 40, 0.28), transparent 72%); }
    body.mobile-pec--category .product-grid .pcard__name,
    body.mobile-pec--category .product-grid .pcard__price,
    body.mobile-pec--product .related .pcard__name,
    body.mobile-pec--product .related .pcard__price { color: #fff; }
    body.mobile-pec--category .product-grid .pcard__desc,
    body.mobile-pec--product .related .pcard__desc { color: #B8B0AA; }
    body.mobile-pec--category .product-grid .pcard__from,
    body.mobile-pec--product .related .pcard__from { color: var(--color-brand-orange); }

    /* Product page controls on the dark background. */
    body.mobile-pec--product .breadcrumb__back,
    body.mobile-pec--product .breadcrumb__current { color: #fff; }
    body.mobile-pec--product .breadcrumb__back .icon { color: var(--color-brand-orange); }
    body.mobile-pec--product .breadcrumb__back:hover,
    body.mobile-pec--product .breadcrumb__link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
    body.mobile-pec--product .breadcrumb__link { color: #C9C1BB; }
    body.mobile-pec--product .product-page__facts dt,
    body.mobile-pec--product .option-group legend { color: #fff; }
    body.mobile-pec--product .product-meta { color: #B8B0AA; }
    body.mobile-pec--product .product-meta__weight strong,
    body.mobile-pec--product .product-meta__allergens:hover,
    body.mobile-pec--product .product-meta__allergens[aria-expanded="true"],
    body.mobile-pec--product .product-meta__panel strong { color: #fff; }
    body.mobile-pec--product .product-meta__panel { background: #1C1817; border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.82); }
    body.mobile-pec--product .product-meta__panel a { color: var(--color-brand-orange); }
    body.mobile-pec--product .option-pill span,
    body.mobile-pec--product .ingredient-pill { background: #1C1817; border-color: rgba(255, 255, 255, 0.14); color: #fff; }
    body.mobile-pec--product .option-pill input:checked + span { background: var(--color-brand-orange); border-color: var(--color-brand-orange); color: #1A0F00; }
    body.mobile-pec--product .ingredient-pill:hover { border-color: var(--color-brand-orange); }
    body.mobile-pec--product .ingredient-pill:has(input:checked) { background: rgba(250, 20, 20, 0.16); border-color: #FF5A5A; box-shadow: inset 0 0 0 1px #FF5A5A; color: #FF9B9B; }
    body.mobile-pec--product .option-check { border-bottom-color: rgba(255, 255, 255, 0.1); }
    body.mobile-pec--product .option-grid .option-check__price { color: #C9C1BB; }
    body.mobile-pec--product .product-order__bar { background: #000; }
    body.mobile-pec--product .qty-stepper { background: #1C1817; border-color: rgba(255, 255, 255, 0.14); }
    body.mobile-pec--product .qty-stepper button,
    body.mobile-pec--product .qty-stepper input { color: #fff; background: transparent; }
    body.mobile-pec--product .related { border-top-color: rgba(255, 255, 255, 0.1); }
}

/* "Terasa" mobile look (same setting, body.mobile-terasa): light. The
   compact one-row header (body.mobile-compact, shared with Pec above) as an
   orange band with dark text, a floating white tab bar with the cart raised
   in its centre and the total under it, light home sections, and on
   category pages a "Kategórie" button that unfolds the list of all
   categories. Red stays for actions only. */
@media (max-width: 1023px) {
    /* Header: always the orange band, also over a hero or cover photo. */
    body.mobile-terasa .site-header,
    body.mobile-terasa.has-hero-overlay .site-header:not(.is-scrolled) { background: var(--color-footer-bg); color: #1A0F00; box-shadow: none; }
    body.mobile-terasa .site-header__logo-text { color: #1A0F00; }
    body.mobile-terasa .site-header__status { color: #1A0F00; font-weight: 700; }
    body.mobile-terasa .site-header__status::before { background: #0B6B32; }
    body.mobile-terasa .site-header__status.is-closed::before { background: #B50B0B; }
    body.mobile-terasa .lang-switcher { background: #1A0F00; border-color: #1A0F00; }
    body.mobile-terasa .site-topbar .topbar-admin { background: #1A0F00; color: #fff; }
    body.mobile-terasa .site-topbar a:focus-visible,
    body.mobile-terasa .site-header a:focus-visible { outline-color: #1A0F00; }

    /* Bottom bar: floating white pill; the current tab gets an orange chip. */
    body.mobile-terasa .bottom-nav {
        left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        padding: 6px 4px; border-radius: 24px;
        background: var(--color-surface);
        box-shadow: 0 0 0 1px var(--color-border), 0 16px 32px -12px rgba(16, 24, 40, 0.35);
    }
    body.mobile-terasa .bottom-nav__item { color: var(--color-body); }
    body.mobile-terasa .bottom-nav__item:hover { color: var(--color-heading); }
    body.mobile-terasa .bottom-nav__item.is-active { color: var(--color-heading); }
    body.mobile-terasa .bottom-nav__item.is-active .bottom-nav__icon { background: #FFE3B0; }
    body.mobile-terasa .bottom-nav__item:focus-visible { outline-color: var(--color-heading); }
    /* Cart: red button raised out of the bar, count badge, total below. */
    body.mobile-terasa .bottom-nav__item--cart .bottom-nav__icon,
    body.mobile-terasa .bottom-nav__item--cart.is-active .bottom-nav__icon {
        width: 56px; height: 56px; margin-top: -30px; border-radius: 50%;
        background: var(--color-brand-red); color: #fff;
        box-shadow: 0 0 0 5px var(--color-surface), 0 10px 20px -6px rgba(250, 20, 20, 0.6);
    }
    body.mobile-terasa .bottom-nav__item--cart .bottom-nav__icon .icon { width: 26px; height: 26px; }
    body.mobile-terasa .bottom-nav__item--cart { color: var(--color-heading); font-weight: 700; }
    body.mobile-terasa .bottom-nav__badge { top: -30px; left: calc(50% + 12px); min-width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--color-surface); }
    body.mobile-terasa .bottom-nav__total { display: inline; font-variant-numeric: tabular-nums; }
    body.mobile-terasa .bottom-nav__total[hidden] { display: none; }
    body.mobile-terasa .bottom-nav__item--cart:has(.bottom-nav__total:not([hidden])) .bottom-nav__label {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
    body.mobile-terasa { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    body.mobile-terasa .product-order__bar { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }

    /* Light home sections (the hero and "špeciálne ponuky" keep their own look). */
    body.mobile-terasa .home-categories,
    body.mobile-terasa .popular { background: var(--color-bg); }
    body.mobile-terasa .home-categories .popular__title,
    body.mobile-terasa .popular .popular__title { color: var(--color-heading); }
    body.mobile-terasa .home-categories .category-tile { box-shadow: 0 0 0 1px var(--color-border); }
    body.mobile-terasa .popular .pcard { background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-border); }
    body.mobile-terasa .popular .pcard:hover { box-shadow: 0 0 0 1px var(--color-brand-orange), 0 14px 28px -14px rgba(16, 24, 40, 0.3); }
    body.mobile-terasa .popular .pcard__media { background: linear-gradient(135deg, #FFF4E5, #FFE2BA); color: var(--color-brand-orange-deep); }
    body.mobile-terasa .popular .pcard__media--photo { background: #FFF7EB; }
    body.mobile-terasa .popular .pcard__media--photo img { filter: none; }
    body.mobile-terasa .popular .pcard__name,
    body.mobile-terasa .popular .pcard__price { color: var(--color-heading); }
    body.mobile-terasa .popular .pcard__desc,
    body.mobile-terasa .popular .pcard__from { color: var(--color-body); }

    /* Light menu overview instead of the dark "oven" page. */
    body.mobile-terasa .menu-main { background: var(--color-bg); color: var(--color-body); }
    body.mobile-terasa .menu-main::before { content: none; }
    body.mobile-terasa .menu-intro__title { color: var(--color-heading); }
    body.mobile-terasa .menu-intro__lead { color: var(--color-body); }
    body.mobile-terasa .menu-main .category-tile { box-shadow: 0 0 0 1px var(--color-border); }

    /* Category page: "Kategórie: <current>" unfolds all categories, two per row. */
    body.mobile-terasa .category-switch__fold summary {
        display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
        min-height: 48px; padding: 0 var(--space-3); border-radius: 14px;
        background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-border);
        color: var(--color-heading); font-weight: 600; cursor: pointer; list-style: none;
    }
    body.mobile-terasa .category-switch__fold summary::-webkit-details-marker { display: none; }
    body.mobile-terasa .category-switch__fold summary .icon { transition: transform 0.15s ease; }
    body.mobile-terasa .category-switch__fold[open] summary .icon { transform: rotate(180deg); }
    body.mobile-terasa .category-switch__fold summary:focus-visible { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; }
    body.mobile-terasa .category-switch__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
        margin-top: var(--space-2); padding: var(--space-2); border-radius: 16px;
        background: var(--color-surface);
        box-shadow: 0 0 0 1px var(--color-border), 0 12px 24px -12px rgba(16, 24, 40, 0.25);
    }
    body.mobile-terasa .category-switch a { min-height: 48px; background: none; box-shadow: none; color: var(--color-heading); }
    body.mobile-terasa .category-switch a:hover { background: var(--color-bg); box-shadow: none; }
    body.mobile-terasa .category-switch a.is-active { background: #FFE3B0; color: #1A0F00; }
    body.mobile-terasa .category-switch a.is-active:focus-visible { outline-color: var(--color-heading); }
    body.mobile-terasa--category main.section { padding-top: var(--space-3); }
}
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    body.mobile-terasa .category-switch__fold summary .icon { transition: none; }
}

/* ---------------------------------------------------------------------------
   Colour themes of the page content (Vzhľad webu › Farebná téma; class
   ContentTheme). Only the category pages get body.theme-* — the header and the
   footer keep their own colours. Each theme sets the values below; the rules
   after them are shared. "html body" makes them win over the phone looks
   (body.mobile-pec--category …), which style the same cards.
   --------------------------------------------------------------------------- */
body.theme-pec {
    --th-bg: #0B0908;
    --th-surface: #1C1817;
    --th-border: rgba(255, 255, 255, 0.16);
    --th-glow:
        radial-gradient(55% 60% at 8% 40%, rgba(250, 20, 20, 0.30), transparent 70%),
        radial-gradient(45% 55% at 92% 25%, rgba(255, 168, 54, 0.24), transparent 70%),
        radial-gradient(40% 40% at 55% 100%, rgba(253, 109, 40, 0.18), transparent 70%);
    --th-heading: #FFFFFF;
    --th-text: #CFC6BF;
    --th-accent: #FFA836;
    --th-card: rgba(255, 255, 255, 0.07);
    --th-card-solid: #1C1817;
    --th-card-border: rgba(255, 255, 255, 0.14);
    --th-card-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --th-card-shadow-hover: 0 24px 44px -22px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 168, 54, 0.45);
    --th-media: rgba(255, 255, 255, 0.06);
    --th-img-shadow: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.55));
}
body.theme-terakota {
    --th-bg: #F6EBDD;
    --th-surface: #FFFBF5;
    --th-border: #E6D3BE;
    --th-glow:
        radial-gradient(50% 60% at 6% 60%, rgba(214, 96, 52, 0.30), transparent 70%),
        radial-gradient(45% 55% at 94% 25%, rgba(255, 190, 90, 0.45), transparent 70%),
        radial-gradient(35% 40% at 60% 105%, rgba(250, 20, 20, 0.12), transparent 70%);
    --th-heading: #2B1A12;
    --th-text: #6B4F3F;
    --th-accent: #B4471F;
    --th-card: rgba(255, 255, 255, 0.55);
    --th-card-solid: #FFFBF5;
    --th-card-border: rgba(255, 255, 255, 0.80);
    --th-card-shadow: 0 18px 36px -22px rgba(107, 52, 20, 0.45);
    --th-card-shadow-hover: 0 24px 40px -20px rgba(107, 52, 20, 0.55);
    --th-media: linear-gradient(135deg, #FFF4E5, #FFE2BA);
    --th-img-shadow: drop-shadow(0 16px 18px rgba(107, 52, 20, 0.30));
}
body.theme-bazalka {
    --th-bg: #0D2018;
    --th-surface: #163126;
    --th-border: rgba(255, 255, 255, 0.16);
    --th-glow:
        radial-gradient(55% 60% at 10% 40%, rgba(52, 168, 96, 0.32), transparent 70%),
        radial-gradient(40% 50% at 92% 70%, rgba(250, 40, 30, 0.22), transparent 70%),
        radial-gradient(35% 35% at 60% 0%, rgba(255, 214, 120, 0.12), transparent 70%);
    --th-heading: #F4F7F2;
    --th-text: #C3D2C7;
    --th-accent: #FFA836;
    --th-card: rgba(255, 255, 255, 0.07);
    --th-card-solid: #163126;
    --th-card-border: rgba(255, 255, 255, 0.15);
    --th-card-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    --th-card-shadow-hover: 0 24px 44px -22px rgba(0, 0, 0, 0.85), inset 0 0 0 1px rgba(255, 168, 54, 0.45);
    --th-media: rgba(255, 255, 255, 0.06);
    --th-img-shadow: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.5));
}

html body:is(.theme-pec, .theme-terakota, .theme-bazalka) { background: var(--th-bg); }
/* The glow stays put while the cards scroll over it (and shows through the glass). */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka)::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: var(--th-glow);
}
/* Everything inside the page content reads the theme through the shared colour
   values; the header, footer, bottom bar and dialogs sit outside <main>. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main {
    --color-bg: var(--th-bg);
    --color-surface: var(--th-surface);
    --color-heading: var(--th-heading);
    --color-body: var(--th-text);
    --color-border: var(--th-border);
    color: var(--th-text);
}

html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard {
    background: var(--th-card);
    border: 1px solid var(--th-card-border);
    box-shadow: var(--th-card-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard:hover { box-shadow: var(--th-card-shadow-hover); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__media { background: var(--th-media); color: var(--th-accent); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__media--photo { background: none; }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__media--photo img { filter: var(--th-img-shadow); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__name,
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__price { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__desc { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard__from { color: var(--th-accent); font-weight: 600; }

/* No blur in the browser, or the visitor asked for less transparency: solid cards. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard { background: var(--th-card-solid); }
}
@media (prefers-reduced-transparency: reduce) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-grid .pcard {
        background: var(--th-card-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Dark themes (Pec, Bazalka): light tints whose text follows the theme turn into
   translucent tints, so light text stays readable. Badges with their own dark
   text on a light tint (status pills, zone results, allergen notice) stay as
   they are. Native inputs, selects and checkboxes go dark with color-scheme. */
html body:is(.theme-pec, .theme-bazalka) main { color-scheme: dark; }
html body:is(.theme-pec, .theme-bazalka) main :is(.product-page__tags li, .store-closed-banner, .cart-chip--extra, .cart-gift-offer),
html body:is(.theme-pec, .theme-bazalka) main .hours-table tr.is-today :is(th, td) { background: rgba(255, 168, 54, 0.14); }
html body:is(.theme-pec, .theme-bazalka) main .option-pill input:checked + span,
html body:is(.theme-pec, .theme-bazalka) main .choice-tile input:checked + .choice-tile__box { background: rgba(250, 20, 20, 0.16); }
html body:is(.theme-pec, .theme-bazalka) main input[aria-invalid="true"] { background: rgba(250, 20, 20, 0.12); }
html body:is(.theme-pec, .theme-bazalka) main .outside-zone__option { background: var(--color-surface); }
html body:is(.theme-pec, .theme-bazalka) main .cart-card--gift { background: linear-gradient(180deg, rgba(255, 168, 54, 0.16), var(--color-surface) 60%); }
html body:is(.theme-pec, .theme-bazalka) main .cart-card--gift .cart-card__meta s { color: var(--color-body); }
html body:is(.theme-pec, .theme-bazalka) main .choice-tile:hover .choice-tile__box { border-color: rgba(255, 255, 255, 0.32); }

/* Secondary text written as fixed greys follows the theme text instead. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(.contact-card__note, .hours-card__note, .contact-form-card__hint, .contact-form__opt, .contact-form__privacy, .allergen-section__head p, .allergen-card__covers, .allergen-filter__count, .allergen-menu__empty, .allergen-legal, .cart-card__gift-note, .cart-edit__loading) { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(.breadcrumb__sep, .hours-table td.is-closed, .allergen-card__count.is-none, .allergen-menu__none) { color: var(--th-text); opacity: 0.75; }
html body:is(.theme-pec, .theme-bazalka) main :is(.field-error, .form-error, .account-form__status) { color: #FF8A80; }
html body:is(.theme-pec, .theme-bazalka) main .account-form__status.is-ok { color: #6EE7A0; }

/* The menu overview drops its own "oven" background and sits on the theme. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .menu-main { background: none; color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .menu-main::before { display: none; }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .menu-intro__title { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .menu-intro__lead { color: var(--th-text); }
/* The dark phone card on Kontakty keeps its own note colour. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .contact-card--phone .contact-card__note { color: #A8A19B; opacity: 1; }

/* Home page: the black bands (categories, offers, most popular) sit on the
   theme, and the popular cards are glass like the category cards. The hero
   and the category / offer images keep their own look. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) :is(.home-categories, .offers, .popular) { background: none; color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular__title { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .carousel-btn { color: var(--th-heading); border-color: color-mix(in srgb, var(--th-heading) 35%, transparent); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .carousel-btn:hover:not(:disabled) { color: #1A0F00; }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .offers__dot::before { background: color-mix(in srgb, var(--th-heading) 35%, transparent); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard {
    background: var(--th-card);
    border: 1px solid var(--th-card-border);
    box-shadow: var(--th-card-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard:hover { box-shadow: var(--th-card-shadow-hover); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular :is(.pcard__name, .pcard__price) { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard__desc { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard__from { color: var(--th-accent); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard__media--photo { background: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard { background: var(--th-card-solid); }
}
@media (prefers-reduced-transparency: reduce) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .popular .pcard { background: var(--th-card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------------------------------------------------------------------------
   Smooth transition out of the home hero and the category cover — Pec colour
   theme only (tried in the others and in Klasická, kept only where it works).
   The bottom of the image fades to transparent (mask), so the dark theme
   background and its glow show through without a seam. --hero-fade is the
   height of the fade.
   --------------------------------------------------------------------------- */
body.theme-pec { --hero-fade: 180px; }
body.theme-pec .category-cover { --hero-fade: 110px; } /* a 400px cover: the fade stays below its title */
/* Phones: the hero text stays above the bottom bars (--hero-bars), the fade lies under them. */
@media (max-width: 1023px) {
    body.theme-pec { --hero-fade: 72px; }
    body.theme-pec .category-cover { --hero-fade: 48px; }
    /* the cover text (centred, or at the bottom of the default drawing) stays above the fade */
    html body.theme-pec .category-cover { padding-bottom: calc(var(--hero-fade) + var(--space-1)); }
}
html body.theme-pec :is(.hero--home.hero--image, .category-cover) {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade)), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hero-fade)), transparent);
}

/* Product page: the sticky add-to-cart bar (quantity + "Pridať do košíka")
   becomes a floating glass panel in a colour theme instead of a block of the
   page colour (or the Pec phone look's black), so it does not cut a
   rectangle out of the glow. On phones it floats a little above the bottom
   bar (64px tabs; Terasa's floating bar 92px). */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-order__bar {
    bottom: var(--space-2);
    padding: 10px;
    border: 1px solid var(--th-card-border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--th-surface) 72%, transparent);
    box-shadow: var(--th-card-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
@media (max-width: 1023px) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-order__bar { bottom: calc(64px + var(--space-2) + env(safe-area-inset-bottom, 0px)); }
    html body.mobile-terasa:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-order__bar { bottom: calc(92px + var(--space-2) + env(safe-area-inset-bottom, 0px)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-order__bar { background: var(--th-surface); }
}
@media (prefers-reduced-transparency: reduce) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .product-order__bar { background: var(--th-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Product page with a colour theme: the Pec phone look paints this page dark
   with fixed colours (headings, breadcrumb, pills, stepper, option rows,
   related cards); with a theme the theme decides. A removed ingredient keeps
   its own dark red on light pink, readable on every theme. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(h1, h2, h3, .product-page__facts dt, .option-group legend) { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .product-meta { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(.product-meta__weight strong, .product-meta__panel strong, .product-meta__allergens:hover, .product-meta__allergens[aria-expanded="true"]) { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .product-meta__panel { background: var(--th-surface); border-color: var(--th-border); color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .product-meta__panel a { color: var(--th-accent); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(.breadcrumb__back, .breadcrumb__current) { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .breadcrumb__link { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(.breadcrumb__back, .breadcrumb__link):hover { background: color-mix(in srgb, var(--th-heading) 10%, transparent); color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main :is(.option-pill span, .ingredient-pill) { background: var(--th-surface); border-color: var(--th-border); color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .option-pill input:checked + span { background: color-mix(in srgb, var(--color-brand-red) 14%, var(--th-surface)); border-color: var(--color-brand-red); color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .ingredient-pill:hover { border-color: var(--color-brand-red); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .ingredient-pill:has(input:checked) { background: var(--color-removed-bg); border-color: var(--color-brand-red); box-shadow: inset 0 0 0 1px var(--color-brand-red); color: var(--color-removed); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .option-check { border-bottom-color: var(--th-border); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .option-grid .option-check__price { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .qty-stepper { background: var(--th-surface); border-color: var(--th-border); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .qty-stepper :is(button, input) { color: var(--th-heading); background: transparent; }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related { border-top-color: var(--th-border); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard {
    background: var(--th-card);
    border: 1px solid var(--th-card-border);
    box-shadow: var(--th-card-shadow);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
}
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard:hover { box-shadow: var(--th-card-shadow-hover); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard__media { background: var(--th-media); color: var(--th-accent); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard__media--photo { background: none; }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related :is(.pcard__name, .pcard__price) { color: var(--th-heading); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard__desc { color: var(--th-text); }
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard__from { color: var(--th-accent); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard { background: var(--th-card-solid); }
}
@media (prefers-reduced-transparency: reduce) {
    html body:is(.theme-pec, .theme-terakota, .theme-bazalka) main .related .pcard { background: var(--th-card-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------------------------------------------------------------------------
   Home hero designs (Vzhľad webu › Vzhľad úvodnej sekcie, HeroStyle; home-hero.php):
   .hero--design-sunny ("Slnečná": light cream, orange sun, two pizzas, solid
   header above it) and .hero--design-table ("Na stole": dark, centred, three
   pizzas rising from the bottom edge, header over it). Same content and buttons
   as the photo hero; .hero-dishes are menu photos (transparent PNG cut-outs).
   --------------------------------------------------------------------------- */
.hero--design { position: relative; overflow: hidden; }
.hero--design .hero__content, .hero--design .hero-delivery { position: relative; z-index: 2; }
.hero-dishes { position: absolute; z-index: 1; pointer-events: none; }
.hero-dishes__img { position: absolute; display: block; width: 100%; height: auto; }

/* Slnečná */
.hero.hero--home.hero--design-sunny {
    min-height: calc(100vh - var(--header-overlap, 0px));
    min-height: calc(100svh - var(--header-overlap, 0px));
    background: #FFF4E3; color: #1F130D;
}
.hero--design-sunny::before {
    content: ""; position: absolute; z-index: 0; border-radius: 50%; background: var(--color-brand-orange);
    width: min(56vw, 800px); aspect-ratio: 1; right: max(-8vw, -120px); top: 50%; transform: translateY(-46%);
}
.hero--design-sunny .hero-dishes { right: max(2vw, 24px); top: 50%; width: min(44vw, 640px); aspect-ratio: 1; transform: translateY(-46%); }
.hero--design-sunny .hero-dishes__img { filter: drop-shadow(0 30px 34px rgba(120, 50, 10, 0.35)); }
.hero--design-sunny .hero-dishes__img--1 { width: 80%; left: 0; bottom: 0; transform: rotate(-8deg); }
.hero--design-sunny .hero-dishes__img--2 { width: 62%; right: -6%; top: -4%; transform: rotate(10deg); z-index: -1; }
.hero--design-sunny .hero__title { color: #1F130D; }
.hero--design-sunny .hero__title span { color: #D10F0F; }
.hero--design-sunny .hero__lead { color: #5A4636; }
.hero--design-sunny .hero__status.is-open { background: #E3F6EA; border-color: #A8DFC1; color: #146C3E; }
.hero--design-sunny .hero__status.is-closed { background: #FDECEC; border-color: #F3B7A3; color: #B91C1C; }
.hero--design-sunny .hero__ghost { color: #1F130D; border-color: #1F130D; }
.hero--design-sunny .hero__ghost:hover { background: #1F130D; color: #fff; }
.hero--design-sunny .hero__phone { background: #fff; border-color: #F0E2CF; color: #1F130D; }
.hero--design-sunny .hero__phone:hover { background: #fff; border-color: #1F130D; color: #1F130D; }
.hero--design-sunny .hero-delivery { background: #fff; border-color: #F0E2CF; color: #1F130D; box-shadow: 0 16px 40px rgba(120, 50, 10, 0.16); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero--design-sunny .hero-delivery__zone, .hero--design-sunny .hero-delivery__zone:hover { color: #1F130D; }
.hero--design-sunny .hero-delivery__zone:hover { background: #FFF4E3; }
.hero--design-sunny .hero-delivery__sub { color: #6B5444; }
.hero--design-sunny .hero-delivery__item--outside { border-color: #F0E2CF; }
.hero--design-sunny .hero-delivery__item--outside::before { background: #F0E2CF; }
.hero--design-sunny .hero-delivery__icon { background: #FFF4E3; }
.hero--design-sunny .hero-delivery__icon--accent { background: var(--color-brand-orange); }
.hero--design-sunny .hero-delivery__courier { border: 1px solid #F0E2CF; }
.hero--design-sunny .hero-delivery__chevron { color: #9A8574; }
.hero-price {
    position: absolute; z-index: 3; margin: 0; right: min(38vw, 560px); top: calc(50% - min(20vw, 280px));
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
    background: #fff; color: #1F130D; font-weight: 800; box-shadow: 0 12px 28px rgba(120, 50, 10, 0.18);
}
.hero-price strong { color: #D10F0F; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1; }

/* Na stole */
.hero.hero--home.hero--design-table {
    align-items: center; text-align: center; justify-content: flex-start;
    min-height: 100vh; min-height: 100svh;
    padding-right: max(var(--space-3), calc((100% - 1200px) / 2 + var(--space-3)));
    background: radial-gradient(70% 60% at 50% 100%, rgba(253, 109, 40, 0.35), transparent 70%), linear-gradient(#0E0A09, #1A0F0B);
}
.hero--design-table .hero__content { align-items: center; max-width: 980px; margin-top: var(--space-4); }
.hero--design-table .hero-delivery { text-align: left; }
.hero--design-table .hero__title { font-size: clamp(2.8rem, 1.2rem + 5vw, 6.5rem); }
.hero--design-table .hero__lead { margin-inline: auto; }
.hero--design-table .hero__actions { justify-content: center; }
.hero--design-table .hero-dishes { left: 50%; bottom: 0; width: min(92vw, 1180px); height: min(30vw, 400px); transform: translateX(-50%); }
.hero--design-table .hero-dishes__img { width: 34%; filter: drop-shadow(0 -10px 40px rgba(0, 0, 0, 0.6)); }
.hero--design-table .hero-dishes__img--1 { left: 4%; top: 22%; transform: rotate(-14deg); }
.hero--design-table .hero-dishes__img--2 { left: 31%; width: 38%; top: 6%; }
.hero--design-table .hero-dishes__img--3 { right: 4%; top: 22%; transform: rotate(14deg); }
@media (min-width: 1024px) {
    .hero--design-table .hero-delivery { margin-top: var(--space-4); margin-bottom: min(24vw, 320px); }
}

/* Phones and portrait tablets: the pizzas at the top, the text and buttons below (thumb reach). */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
    .hero--design-sunny::before { width: 110vw; right: -30vw; top: -18vw; transform: none; }
    .hero--design-sunny .hero-dishes { right: 2vw; top: 4vw; width: 86vw; transform: none; }
    .hero-price { right: auto; left: var(--space-3); top: calc(var(--header-overlap, 0px) + 6vw); font-size: 0.85rem; padding: 8px 12px; }
    .hero-price strong { font-size: 1.25rem; }
    .hero--design-table .hero-dishes { top: calc(var(--header-overlap, 0px) + 8px); bottom: auto; width: 110vw; height: 44vw; }
    .hero--design-table .hero-dishes__img--1, .hero--design-table .hero-dishes__img--3 { top: 6%; }
    .hero--design-table .hero-dishes__img--2 { top: 0; }
    .hero.hero--home.hero--design-table { justify-content: flex-end; }
    .hero--design-table .hero__actions { width: 100%; }
}
@media (max-width: 1023px) {
    .hero.hero--home.hero--design-sunny {
        --hero-bars: calc(64px + env(safe-area-inset-bottom, 0px));
        justify-content: flex-end;
        padding-bottom: calc(var(--hero-bars) + var(--space-3));
    }
    body.mobile-terasa .hero.hero--home.hero--design-sunny { --hero-bars: calc(92px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .hero--design .hero__content > * { animation: none; }
}

/* Installable app: the notice above the footer of the home page and the iPhone guide
   (partials/pwa-notice.php). Shown by pwa.js on phones and tablets only, so it is laid out for
   those widths. Dark by default: it continues the black "naše najobľúbenejšie" band of the
   Klasické and Pec looks, its card the grey of their product cards. Terasa and the colour
   themes follow below. */
.pwa-notice[hidden], .pwa-notice [hidden] { display: none; }
.pwa-notice {
    --pwa-band: #000; --pwa-card: #383838; --pwa-sheet: #1C1C1C; --pwa-inset: #2C2C2E;
    --pwa-heading: #fff; --pwa-text: #C9C1BB; --pwa-line: rgba(255, 255, 255, 0.14);
    background: var(--pwa-band); color: var(--pwa-text); padding: 6px 0 var(--space-5);
}
.pwa-notice__card { position: relative; isolation: isolate; padding: var(--space-4); border-radius: 18px; background: var(--pwa-card); }
.pwa-notice__card::before {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
    background: radial-gradient(70% 90% at 0% 0%, rgba(255, 168, 54, 0.18), transparent 60%);
}
.pwa-notice__head { display: flex; align-items: center; gap: 14px; padding-right: 32px; }
.pwa-notice__icon { flex: none; width: 60px; height: 60px; border-radius: 14px; box-shadow: 0 8px 18px -6px rgba(255, 168, 54, 0.55); }
.pwa-notice__title, .pwa-guide__title {
    margin: 0 0 3px; font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.05;
    letter-spacing: 0.3px; text-transform: uppercase; color: var(--pwa-heading);
}
.pwa-notice__title em, .pwa-guide__title em { font-style: normal; color: var(--color-brand-orange); }
.pwa-notice__lead { margin: 0; font-size: 0.88rem; line-height: 1.45; }
.pwa-notice__close {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; height: 44px;
    padding: 0; border: 0; background: none; color: var(--pwa-text); cursor: pointer;
}
.pwa-notice__close svg, .pwa-notice__action svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwa-notice__action { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; margin-top: 14px; border-radius: 14px; box-shadow: 0 8px 20px -8px rgba(250, 20, 20, 0.75); }
.pwa-notice__done {
    display: block; width: 100%; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none;
    color: var(--pwa-text); font: inherit; font-size: 0.88rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pwa-notice__steps { margin: 14px 0 0; padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.35); list-style: none; counter-reset: pwa-step; }
.pwa-notice__steps li, .pwa-guide__steps > li { counter-increment: pwa-step; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.pwa-notice__steps li { padding: 5px 0; color: var(--pwa-heading); font-size: 0.92rem; line-height: 1.5; }
.pwa-notice__steps li::before, .pwa-guide__steps > li::before {
    content: counter(pwa-step); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-brand-orange); color: #1A0F00; font-weight: 800; font-size: 0.85rem;
}
.pwa-notice__steps small, .pwa-guide__steps small { display: block; margin-top: 2px; color: var(--pwa-text); font-size: 0.8rem; font-weight: 400; }
/* The browser's buttons drawn inside the step texts (Pwa::stepHtml): Safari's on white, the rest round. */
.pwa-chip { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 2px; vertical-align: -8px; border-radius: 8px; background: #fff; color: #0A84FF; }
.pwa-chip--round { border-radius: 50%; background: var(--pwa-inset); color: var(--pwa-heading); }
.pwa-chip svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The iPhone guide: a panel from the bottom, like the Pec burger menu. */
.pwa-guide {
    --pwa-card: #383838; --pwa-sheet: #1C1C1C; --pwa-inset: #2C2C2E; --pwa-heading: #fff; --pwa-text: #C9C1BB; --pwa-line: rgba(255, 255, 255, 0.14);
    position: fixed; inset: auto 0 0; width: 100%; max-width: 560px; max-height: 92dvh; margin: 0 auto; overflow-y: auto;
    padding: 10px 18px calc(24px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--pwa-line); border-radius: 24px 24px 0 0;
    background: var(--pwa-sheet); color: var(--pwa-heading); box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.6);
}
.pwa-guide[open] { animation: pwa-guide-in 0.28s ease; }
.pwa-guide::backdrop { background: rgba(0, 0, 0, 0.6); }
@keyframes pwa-guide-in { from { transform: translateY(100%); } }
.pwa-guide__grabber { width: 40px; height: 5px; margin: 0 auto 12px; border-radius: 3px; background: #555; }
.pwa-guide__title { margin: 4px 40px 16px; font-size: 1.5rem; text-align: center; }
.pwa-guide__steps { margin: 0; padding: 0; list-style: none; counter-reset: pwa-step; }
.pwa-guide__steps > li { margin-bottom: 16px; }
.pwa-guide__steps p { margin: 3px 0 8px; font-size: 0.92rem; line-height: 1.5; }
.pwa-guide__steps > li > * { grid-column: 2; }
.pwa-guide__picture { padding: 8px; border-radius: 12px; background: var(--pwa-card); color: var(--pwa-heading); }
.pwa-guide__picture svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pwa-guide__bar { display: flex; align-items: center; gap: 6px; }
.pwa-guide__address { flex: 1; min-width: 0; height: 30px; padding: 0 10px; overflow: hidden; border-radius: 15px; background: var(--pwa-inset); font-size: 0.72rem; line-height: 30px; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.pwa-guide__round { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--pwa-inset); }
.pwa-guide__menu { overflow: hidden; border-radius: 10px; background: var(--pwa-inset); font-size: 0.8rem; }
.pwa-guide__menu span { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border-bottom: 1px solid var(--pwa-line); }
.pwa-guide__menu span:last-child { border-bottom: 0; }
.pwa-guide__spot { outline: 3px solid var(--color-brand-orange); outline-offset: 2px; animation: pwa-spot 1.4s ease-in-out infinite; }
.pwa-guide__menu .pwa-guide__spot { outline-offset: -3px; border-radius: 9px; }
@keyframes pwa-spot { 50% { outline-color: rgba(255, 168, 54, 0.2); } }
.pwa-guide__home { display: flex; justify-content: center; gap: 16px; padding: 10px 8px 6px; background: linear-gradient(160deg, #3A2A1A, #6B3A12); color: #fff; }
.pwa-guide__home span { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 60px; overflow: hidden; font-size: 0.64rem; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.pwa-guide__home i, .pwa-guide__home img { display: block; width: 44px; height: 44px; border-radius: 11px; }
.pwa-guide__home i { background: rgba(255, 255, 255, 0.22); }
@media (prefers-reduced-motion: reduce) {
    .pwa-guide[open], .pwa-guide__spot { animation: none; }
}

/* Terasa is light: a white card on the light page, the same layout. */
@media (max-width: 1023px) {
    body.mobile-terasa .pwa-notice {
        --pwa-band: var(--color-bg); --pwa-card: var(--color-surface); --pwa-inset: #F2F4F7;
        --pwa-heading: var(--color-heading); --pwa-text: var(--color-body);
    }
    body.mobile-terasa .pwa-notice__card { box-shadow: 0 0 0 1px var(--color-border), 0 10px 30px -18px rgba(16, 24, 40, 0.35); }
    body.mobile-terasa .pwa-notice__steps { background: #FFF6EA; }
    body.mobile-terasa .pwa-chip { box-shadow: 0 0 0 1px var(--color-border); }
    body.mobile-terasa .pwa-chip--round { color: var(--color-heading); }
    body.mobile-terasa .pwa-guide {
        --pwa-sheet: var(--color-surface); --pwa-card: #F2F4F7; --pwa-inset: #fff;
        --pwa-heading: var(--color-heading); --pwa-text: var(--color-body); --pwa-line: var(--color-border);
    }
    body.mobile-terasa .pwa-guide::backdrop { background: rgba(16, 24, 40, 0.45); }
    body.mobile-terasa .pwa-guide__grabber { background: #D0D5DD; }
}
/* A colour theme: the band shows the theme's background, the card is the theme's. */
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .pwa-notice {
    --pwa-band: transparent; --pwa-card: var(--th-card-solid); --pwa-heading: var(--th-heading); --pwa-text: var(--th-text);
}
html body:is(.theme-pec, .theme-terakota, .theme-bazalka) .pwa-notice__card { box-shadow: 0 0 0 1px var(--th-card-border); }