.navigation-lahoda-1 {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--bg-cream);
    transition: box-shadow var(--transition-base);
    container-type: inline-size;
}

/*
 * layout-1 renders every header-slot component inside a plain <header>
 * wrapper exactly as tall as this component, so `position: sticky` on the
 * root above has no room to move and the header scrolled away with the page
 * (measured on the dev host 2026-11-08). The wrapper itself must stick; the
 * root keeps its own background/shadow/compact mode. `:has()` scopes it to
 * pages whose header slot holds this component; `:not([data-slot])` leaves
 * the CMS editor preview (which measures the wrapper for insert positions)
 * exactly as it was.
 */
body.layout-1 > header:not([data-slot]):has(> .navigation-lahoda-1) {
    position: sticky;
    top: 0;
    z-index: 500;
    /*
     * component.js locks this wrapper's min-height to the full header height
     * while compact (see "Compact-mode height lock"), leaving a transparent
     * strip under the shrunken bar — it must not swallow clicks on the page.
     */
    pointer-events: none;
}

body.layout-1 > header:not([data-slot]) > .navigation-lahoda-1 {
    pointer-events: auto;
}

/* Synchronous measurement of the full height while compact (component.js). */
.navigation-lahoda-1--measuring .navigation-lahoda-1__bar,
.navigation-lahoda-1--measuring .navigation-lahoda-1__logo-img,
.navigation-lahoda-1--measuring .navigation-lahoda-1__contact-bar {
    transition: none;
}

.navigation-lahoda-1--scrolled {
    box-shadow: var(--shadow-md);
}

.navigation-lahoda-1__bar {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-4) var(--container-gutter);
    /* Anchor for the card-style mega menu, which spans the bar width. */
    position: relative;
    transition: padding var(--transition-base);
}

@container (min-width: 768px) {
    .navigation-lahoda-1__bar {
        padding: var(--space-5) var(--container-gutter);
    }
}

@container (min-width: 1080px) {
    /*
     * Three-way header layout via flexbox, not grid: the menu and status groups
     * share equal grown space (flex: 1 1 0, equal regardless of their content
     * width), which pushes the logo — sized to its own content only — into true
     * horizontal center between them. `order` repositions them visually left to
     * right (menu, logo, status) without touching source order/tab order, which
     * stays logo → menu → status as written in template.phtml. (A logo-left
     * variant was tried in the 2026-10 round and reverted by the owner — the
     * centered logo is the brand look; the menu wraps to two rows if it must.)
     */
    .navigation-lahoda-1__menu {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }

    .navigation-lahoda-1__logo {
        order: 2;
        flex: 0 0 auto;
    }

    .navigation-lahoda-1__status {
        order: 3;
        flex: 1 1 0;
        justify-content: flex-end;
    }
}

.navigation-lahoda-1__logo-img {
    display: block;
    height: 40px;
    width: auto;
    transition:
        opacity var(--transition-fast),
        height var(--transition-base);
}

@container (min-width: 768px) {
    .navigation-lahoda-1__logo-img {
        height: 48px;
    }
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__logo-img {
        height: 64px;
    }
}

.navigation-lahoda-1__logo {
    font-family: var(--font-display);
}

.navigation-lahoda-1__logo:hover .navigation-lahoda-1__logo-img,
.navigation-lahoda-1__logo:focus-visible .navigation-lahoda-1__logo-img {
    opacity: 0.85;
}

.navigation-lahoda-1__menu {
    display: none;
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__menu {
        display: block;
    }
}

.navigation-lahoda-1__menu-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    /*
     * Fixed 16px (was clamp(16px, 2cqw, 32px)) + 14px links from 1080px: the
     * menu half of the centered-logo bar is ~422px at the 1280px max width, and
     * six items (Sladké, Slané, Svadby, Katering, Galéria, Kontakt) only fit on
     * one row this tight. Narrower desktops (< ~1280px) still wrap to two rows.
     */
    column-gap: var(--space-4);
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}

.navigation-lahoda-1__menu-item {
    position: relative;
}

.navigation-lahoda-1__menu-item > a {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
    text-decoration: none;
    padding: var(--space-2) 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    transition: border-color var(--transition-fast);
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__menu-item > a {
        font-size: 14px;
    }
}

.navigation-lahoda-1__menu-item > a:hover,
.navigation-lahoda-1__menu-item > a:focus-visible,
.navigation-lahoda-1__menu-item > a.navigation-lahoda-1__link--active {
    border-bottom-color: var(--brand-red);
}

/* Visual affordance that this item's hover/focus reveals a mega menu — mirrors
   the chevron the mobile drawer already shows on its own submenu toggle. */
.navigation-lahoda-1__menu-item--has-mega > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--space-2);
    margin-bottom: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.navigation-lahoda-1__menu-item--has-mega:hover > a::after,
.navigation-lahoda-1__menu-item--has-mega:focus-within > a::after {
    transform: rotate(-135deg);
}

.navigation-lahoda-1__mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-cream);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius-sm);
    padding: var(--space-3) 0;
    min-width: 200px;
    flex-direction: column;
    z-index: 10;
    opacity: 0;
    transform: translateY(4px);
    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

/* `--open` is set by component.js (hover intent with a close delay); the
   `:hover` / `:focus-within` rules stay as the no-JS and keyboard fallback. */
.navigation-lahoda-1__menu-item:hover .navigation-lahoda-1__mega,
.navigation-lahoda-1__menu-item:focus-within .navigation-lahoda-1__mega,
.navigation-lahoda-1__menu-item--open .navigation-lahoda-1__mega {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.navigation-lahoda-1__mega a {
    padding: var(--space-2) var(--space-5);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.navigation-lahoda-1__mega a:hover,
.navigation-lahoda-1__mega a:focus-visible {
    background: var(--bg-cream-deep);
}

/* Last row of a dropdown: "Všetky sladké →". */
.navigation-lahoda-1__mega a.navigation-lahoda-1__mega-footer {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    font-weight: 600;
}

.navigation-lahoda-1__mega-footer span::after {
    content: " \2192";
}

.navigation-lahoda-1__mega-footer:hover span,
.navigation-lahoda-1__mega-footer:focus-visible span {
    color: var(--brand-red);
}

/*
 * Card mega menu (at least one category has a photo). The panel stops being
 * anchored to its list item and spans the bar instead, so a card grid under a
 * menu item far from the left edge cannot run off-screen. Selectors repeat the
 * block name to out-rank the plain `.navigation-lahoda-1__mega a` list rules.
 */
.navigation-lahoda-1__menu-item--mega-cards {
    position: static;
}

.navigation-lahoda-1__mega.navigation-lahoda-1__mega--cards {
    left: var(--container-gutter);
    right: var(--container-gutter);
    max-width: 960px;
    margin-inline: auto;
    padding: var(--space-5);
    border-radius: var(--radius);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
    align-content: start;
}

/* No hover bridge above the card panel: a full-width pseudo-element there
   sits over the other menu links and swallows their clicks while the panel is
   open. Crossing the gap between the link and the panel is covered by the
   close delay in component.js (initMegaMenus) instead. */

.navigation-lahoda-1__menu-item:hover .navigation-lahoda-1__mega--cards,
.navigation-lahoda-1__menu-item:focus-within .navigation-lahoda-1__mega--cards,
.navigation-lahoda-1__menu-item--open .navigation-lahoda-1__mega--cards {
    display: grid;
}

.navigation-lahoda-1__mega--cards .navigation-lahoda-1__mega-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: 0;
    border-radius: var(--radius);
    background: none;
}

.navigation-lahoda-1__mega--cards .navigation-lahoda-1__mega-card:hover,
.navigation-lahoda-1__mega--cards .navigation-lahoda-1__mega-card:focus-visible {
    background: none;
}

.navigation-lahoda-1__mega-card-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--bg-cream-deep);
    margin-bottom: var(--space-2);
}

.navigation-lahoda-1__mega-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.navigation-lahoda-1__mega-card-name {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.2;
    color: var(--ink);
    transition: color var(--transition-fast);
}

.navigation-lahoda-1__mega-card:hover .navigation-lahoda-1__mega-card-name,
.navigation-lahoda-1__mega-card:focus-visible .navigation-lahoda-1__mega-card-name {
    color: var(--brand-red-dark);
}

.navigation-lahoda-1__mega-card-desc {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink-muted);
}

.navigation-lahoda-1__mega--cards a.navigation-lahoda-1__mega-footer {
    grid-column: 1 / -1;
    padding: var(--space-3) 0 0;
}

.navigation-lahoda-1__mega--cards a.navigation-lahoda-1__mega-footer:hover,
.navigation-lahoda-1__mega--cards a.navigation-lahoda-1__mega-footer:focus-visible {
    background: none;
}

.navigation-lahoda-1__status {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

/* ----- Header search --------------------------------------------------- */

.navigation-lahoda-1__search {
    position: relative;
    display: flex;
    align-items: center;
}

/* Desktop pill lives in the status area; below 1080px the toggle + row take over. */
.navigation-lahoda-1__search--header {
    display: none;
    width: 160px;
    transition: width var(--transition-base);
}

.navigation-lahoda-1__search--header:focus-within {
    width: 240px;
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__search--header {
        display: flex;
    }
}

@container (min-width: 1280px) {
    .navigation-lahoda-1__search--header {
        width: 200px;
    }

    .navigation-lahoda-1__search--header:focus-within {
        width: 280px;
    }
}

.navigation-lahoda-1__search-input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 44px 0 var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    appearance: none;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.navigation-lahoda-1__search-input::placeholder {
    color: var(--ink-muted);
}

.navigation-lahoda-1__search-input:focus-visible {
    outline: none;
    border-color: var(--brand-gold-dark);
    box-shadow: 0 0 0 3px var(--brand-gold-tint);
}

.navigation-lahoda-1__search-submit,
.navigation-lahoda-1__search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 16px;
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--transition-fast);
}

.navigation-lahoda-1__search-submit {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
}

.navigation-lahoda-1__search-submit:hover,
.navigation-lahoda-1__search-submit:focus-visible,
.navigation-lahoda-1__search-toggle:hover,
.navigation-lahoda-1__search-toggle:focus-visible,
.navigation-lahoda-1__search-toggle[aria-expanded="true"] {
    background: var(--brand-gold-tint);
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__search-toggle {
        display: none;
    }
}

.navigation-lahoda-1__search-row {
    padding: 0 var(--container-gutter) var(--space-3);
}

.navigation-lahoda-1__search-row .navigation-lahoda-1__search {
    max-width: 480px;
    margin: 0 auto;
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__search-row {
        display: none;
    }
}

.navigation-lahoda-1__drawer-search {
    padding: var(--space-4) var(--container-gutter) 0;
}

.navigation-lahoda-1__account {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--brand-gold);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

/*
 * Placed after the base rule (not inside the earlier `@container (min-width: 1080px)`
 * block) so it reliably wins in the cascade below 1080px regardless of source
 * order elsewhere — a same-specificity rule earlier in the file was silently
 * winning at all widths, including desktop, before this was split out.
 */
@container (max-width: 1079.98px) {
    .navigation-lahoda-1__account {
        display: none;
    }
}

.navigation-lahoda-1__account:hover,
.navigation-lahoda-1__account:focus-visible {
    background: var(--brand-gold-tint);
}

.navigation-lahoda-1__cart {
    position: relative;
}

.navigation-lahoda-1__cart-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--transition-fast);
}

.navigation-lahoda-1__cart-button:hover,
.navigation-lahoda-1__cart-button:focus-visible {
    background: var(--brand-gold-tint);
}

.navigation-lahoda-1__cart-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--brand-red);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

.navigation-lahoda-1__cart-dropdown {
    position: absolute;
    top: calc(100% + var(--space-3));
    right: 0;
    width: min(340px, 90vw);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md, 0 6px 18px rgba(42, 33, 26, 0.12));
    padding: var(--space-4);
    z-index: 20;
}

.navigation-lahoda-1__cart-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-height: 320px;
    overflow-y: auto;
}

.navigation-lahoda-1__cart-line {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.navigation-lahoda-1__cart-line-img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm, var(--radius));
    flex-shrink: 0;
}

.navigation-lahoda-1__cart-line-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.navigation-lahoda-1__cart-line-img-link {
    display: block;
    flex-shrink: 0;
}

.navigation-lahoda-1__cart-line-name {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

a.navigation-lahoda-1__cart-line-name:hover {
    text-decoration: underline;
}

.navigation-lahoda-1__cart-line-warning {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--brand-red);
}

.navigation-lahoda-1__cart-line-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    width: fit-content;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--navigation-lahoda-1-badge-color, var(--ink));
    border: 1px solid var(--navigation-lahoda-1-badge-color, var(--border));
    border-radius: var(--radius-pill);
    padding: 1px var(--space-2);
    margin: 2px 0;
}

.navigation-lahoda-1__cart-line-badge-icon {
    width: 12px;
    height: 12px;
    object-fit: contain;
}

.navigation-lahoda-1__cart-line-meta {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--ink-muted);
}

.navigation-lahoda-1__cart-line-meta--pending {
    font-style: italic;
    animation: navigation-lahoda-1-pulse 1.4s ease-in-out infinite;
}

@keyframes navigation-lahoda-1-pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.45;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-lahoda-1__cart-line-meta--pending {
        animation: none;
    }
}

.navigation-lahoda-1__cart-empty {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--ink-muted);
    margin: 0;
}

.navigation-lahoda-1__cart-footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.navigation-lahoda-1__cart-subtotal {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--space-3);
}

.navigation-lahoda-1__cart-view {
    display: block;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.875rem;
    color: #fff;
    background: var(--brand-red);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.navigation-lahoda-1__cart-view:hover,
.navigation-lahoda-1__cart-view:focus-visible {
    opacity: 0.9;
}

.navigation-lahoda-1__contact-bar {
    background: var(--bg-cream-deep);
    border-top: 1px solid var(--border);
    position: relative;
    max-height: 120px;
    overflow: hidden;
    transition:
        max-height var(--transition-base),
        opacity var(--transition-base),
        visibility var(--transition-base);
}

/* ----- Compact (scrolled) mode ------------------------------------------- */

.navigation-lahoda-1--compact .navigation-lahoda-1__contact-bar {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    border-top-width: 0;
}

.navigation-lahoda-1--compact .navigation-lahoda-1__bar {
    padding-block: var(--space-2);
}

@container (min-width: 1080px) {
    .navigation-lahoda-1--compact .navigation-lahoda-1__logo-img {
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .navigation-lahoda-1,
    .navigation-lahoda-1__bar,
    .navigation-lahoda-1__logo-img,
    .navigation-lahoda-1__contact-bar,
    .navigation-lahoda-1__search--header {
        transition: none;
    }
}

/*
 * Scroll affordance. The track below hides its scrollbar (a 6px bar would be
 * noise on a ~60px row), so this right-edge fade is the only hint that more
 * links sit off-screen. component.js toggles `--overflowing` while the track
 * can actually scroll and `--scroll-end` once it is scrolled all the way, so
 * the last icon is never left dimmed with nothing behind it.
 */
.navigation-lahoda-1__contact-bar::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: var(--space-7);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--transition-fast);
    /* rgba() literal of --bg-cream-deep: a `transparent` stop is interpolated
       through transparent black in older engines and greys the fade. */
    background: linear-gradient(to right, rgba(241, 228, 208, 0), var(--bg-cream-deep));
}

.navigation-lahoda-1__contact-bar--overflowing::after {
    opacity: 1;
}

.navigation-lahoda-1__contact-bar--scroll-end::after {
    opacity: 0;
}

/*
 * Single non-wrapping row that scrolls horizontally when it does not fit —
 * wrapping put a lone social icon on a second line on phones, which read as a
 * layout bug. Note there is no `justify-content: flex-end` here: right-aligning
 * an overflowing scroll container pushes the first items past the start edge,
 * where they cannot be scrolled back into view. The auto margin below does the
 * same alignment but collapses to 0 as soon as free space runs out.
 */
.navigation-lahoda-1__contact-bar-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-4);
    /* Inline-end gutter is a margin on the last link, not padding: Blink/WebKit
       drop a scroll container's inline-end padding at the scroll end, which
       would jam the last icon against the screen edge. */
    padding: var(--space-2) 0 var(--space-2) var(--container-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.navigation-lahoda-1__contact-bar-inner::-webkit-scrollbar {
    display: none;
}

.navigation-lahoda-1__contact-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.navigation-lahoda-1__contact-link:last-child {
    margin-inline-end: var(--container-gutter);
}

@container (min-width: 768px) {
    .navigation-lahoda-1__contact-link:first-child {
        margin-inline-start: auto;
    }
}

/* Phone-width tightening, so the common case (phone + e-mail + two social
   icons) fits outright and the scroll is only a fallback for longer text or
   more links. Only spacing and type shrink — the 44px touch target does not. */
@container (max-width: 767.98px) {
    .navigation-lahoda-1__contact-bar-inner {
        gap: var(--space-1);
    }

    .navigation-lahoda-1__contact-link {
        gap: var(--space-1);
        padding-inline: var(--space-2);
        font-size: 13px;
    }
}

/*
 * After the media query above on purpose: same specificity, so source order
 * decides which `padding-inline` wins, and an icon-only link must stay square
 * at every width.
 */
.navigation-lahoda-1__contact-link--icon-only {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
}

/*
 * Narrow phones (< 480px): phone text + e-mail text + two social icons ran
 * ~430px wide, so Instagram was always clipped behind the scroll fade. An
 * e-mail link that has its own icon collapses to that icon; the address
 * stays in the accessible name (visually hidden, not display: none). The
 * phone number is the contact people actually tap, so it keeps its text.
 */
@container (max-width: 479.98px) {
    .navigation-lahoda-1__contact-link[href^="mailto:"]:has(
            .navigation-lahoda-1__contact-link-icon
        ) {
        width: 44px;
        padding-inline: 0;
        justify-content: center;
    }

    .navigation-lahoda-1__contact-link[href^="mailto:"]:has(
            .navigation-lahoda-1__contact-link-icon
        )
        .navigation-lahoda-1__contact-link-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.navigation-lahoda-1__contact-link:hover,
.navigation-lahoda-1__contact-link:focus-visible {
    background: var(--bg-cream);
    color: var(--brand-red);
}

.navigation-lahoda-1__contact-link-icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.navigation-lahoda-1__burger {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    font-size: 18px;
    position: relative;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.navigation-lahoda-1__burger {
    flex-direction: column;
    gap: 4px;
}

@container (min-width: 1080px) {
    .navigation-lahoda-1__burger {
        display: none;
    }
}

.navigation-lahoda-1__burger span {
    width: 20px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    display: block;
    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        background var(--transition-fast);
}

.navigation-lahoda-1__burger--active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navigation-lahoda-1__burger--active span:nth-child(2) {
    opacity: 0;
}

.navigation-lahoda-1__burger--active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.navigation-lahoda-1__drawer {
    background: var(--bg-cream);
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-md);
}

.navigation-lahoda-1__drawer[hidden] {
    display: none;
}

.navigation-lahoda-1__drawer-list {
    list-style: none;
    margin: 0;
    padding: var(--space-2) var(--container-gutter) var(--space-5);
    display: flex;
    flex-direction: column;
}

.navigation-lahoda-1__drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.navigation-lahoda-1__drawer-row a {
    flex: 1;
    display: block;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.navigation-lahoda-1__drawer-row a:hover,
.navigation-lahoda-1__drawer-row a:focus-visible {
    color: var(--brand-red);
}

/*
 * Contact row at the end of the drawer (phone, e-mail, social icons): the
 * contact strip under the bar collapses in compact mode, so this keeps the
 * phone number one tap away however far the page is scrolled.
 */
.navigation-lahoda-1__drawer-item--contacts {
    margin-top: var(--space-4);
}

.navigation-lahoda-1__drawer-contacts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.navigation-lahoda-1__drawer-contact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--bg-cream-deep);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}

.navigation-lahoda-1__drawer-contact--icon-only {
    width: 44px;
    padding-inline: 0;
    justify-content: center;
}

.navigation-lahoda-1__drawer-contact:hover,
.navigation-lahoda-1__drawer-contact:focus-visible {
    background: var(--brand-gold-tint);
    color: var(--brand-red);
}

.navigation-lahoda-1__drawer-item--account {
    margin-top: var(--space-3);
}

.navigation-lahoda-1__drawer-item--account .navigation-lahoda-1__drawer-row a {
    font-weight: 600;
    color: var(--brand-gold-dark);
}

.navigation-lahoda-1__drawer-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}

.navigation-lahoda-1__drawer-toggle:hover,
.navigation-lahoda-1__drawer-toggle:focus-visible {
    background: var(--bg-cream-deep);
}

.navigation-lahoda-1__drawer-chevron {
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
    transform: rotate(45deg);
    transition: transform var(--transition-fast);
}

.navigation-lahoda-1__drawer-toggle[aria-expanded="true"]
    .navigation-lahoda-1__drawer-chevron {
    transform: rotate(-135deg);
}

.navigation-lahoda-1__drawer-submenu {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--space-2) var(--space-4);
    display: flex;
    flex-direction: column;
}

.navigation-lahoda-1__drawer-submenu[hidden] {
    display: none;
}

.navigation-lahoda-1__drawer-submenu a {
    display: block;
    padding: var(--space-2) 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    opacity: 0.8;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.navigation-lahoda-1__drawer-submenu a:hover,
.navigation-lahoda-1__drawer-submenu a:focus-visible {
    color: var(--brand-red);
    opacity: 1;
}

.navigation-lahoda-1__drawer-row a.navigation-lahoda-1__drawer-link--active {
    font-weight: 600;
    color: var(--brand-red-dark);
}