/* Shared product navigation. Scope all rules to the existing navbar. */
#main-navbar.kiki-products-nav {
    --nav-content-max-width: 1440px; --nav-content-gutter: 24px;
    --nav-surface: var(--kiki-day-surface); --nav-soft: var(--kiki-day-surface-soft);
    --nav-text: var(--kiki-day-text-primary); --nav-muted: var(--kiki-day-text-secondary);
    --nav-panel-tint: #f0faf5;
    --nav-border: var(--kiki-day-border); --nav-accent: #087c59;
    /* Keep the original transparent-at-top / navbar-blur-on-scroll treatment. */
    background: transparent; border-bottom: 1px solid transparent;
}
.kiki-products-nav > div:first-of-type { max-width: var(--nav-content-max-width); padding-inline: var(--nav-content-gutter); }
/* One brand gap across pages. Tailwind v3/v4 space-x rules can otherwise
   add margins on both sides; the homepage also wraps its image in picture. */
#main-navbar.kiki-products-nav .kiki-nav-brand { display: flex; align-items: center; flex-shrink: 0; gap: 12px; }
#main-navbar.kiki-products-nav .kiki-nav-brand > * { margin: 0 !important; }
.kiki-products-nav .kiki-nav-brand > picture { display: block; flex-shrink: 0; }
/* Center the visible lowercase wordmark optically against the circular icon. */
#main-navbar.kiki-products-nav .kiki-nav-brand > .logo-font-01 { transform: translateY(1px); }
@media (min-width: 1024px) { #main-navbar.kiki-products-nav { --nav-content-gutter: 32px; } }
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav {
    --nav-surface: var(--kiki-night-surface); --nav-soft: var(--kiki-night-surface-soft);
    --nav-text: var(--kiki-night-text-primary); --nav-muted: var(--kiki-night-text-secondary);
    --nav-border: var(--kiki-night-border); --nav-accent: var(--kiki-night-accent);
    --nav-panel-tint: color-mix(in srgb, var(--nav-accent) 6%, var(--nav-surface));
}
html[data-kiki-page-mode="high_contrast"] #main-navbar.kiki-products-nav {
    --nav-surface: var(--kiki-hc-surface); --nav-soft: var(--kiki-hc-surface-soft);
    --nav-text: var(--kiki-hc-text-primary); --nav-muted: var(--kiki-hc-text-secondary);
    --nav-border: var(--kiki-hc-border); --nav-accent: var(--kiki-hc-accent);
}
/* The scrolled toolbar uses a milky surface, not blur alone. The denser fill
   keeps navigation readable while the page still shows softly underneath. */
#main-navbar.kiki-products-nav.navbar-blur {
    background: linear-gradient(180deg, rgba(255, 255, 255, .90) 0%, rgba(246, 251, 249, .82) 100%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(1.03) !important;
    backdrop-filter: blur(30px) saturate(175%) brightness(1.03) !important;
    border-bottom-color: rgba(148, 163, 184, .16) !important;
    box-shadow: 0 3px 12px rgba(15, 23, 42, .045), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
}
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav.navbar-blur {
    background: linear-gradient(180deg, rgba(39, 46, 43, .92) 0%, rgba(32, 37, 34, .86) 100%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(145%) brightness(.96) !important;
    backdrop-filter: blur(28px) saturate(145%) brightness(.96) !important;
    border-bottom-color: rgba(190, 205, 199, .22) !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
html[data-kiki-page-mode="high_contrast"] #main-navbar.kiki-products-nav.navbar-blur {
    background: var(--kiki-hc-surface) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 2px solid var(--kiki-hc-border) !important;
    box-shadow: none !important;
}
.kiki-products-nav .kiki-desktop-links { display: flex; align-items: center; gap: 8px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.kiki-products-nav .kiki-nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 8px; color: var(--nav-muted); font-size: 16px; font-weight: 500; border-radius: 10px; line-height: 1.4; text-decoration: none; }
.kiki-products-nav .kiki-desktop-links .kiki-nav-link { white-space: nowrap; }
/* Current primary links use text color only. */
.kiki-products-nav .kiki-nav-link:hover, .kiki-products-nav .kiki-nav-link[aria-current] { color: var(--nav-accent); background: transparent; }
.kiki-products-nav .kiki-products-trigger svg { width: 16px; height: 16px; }
.kiki-products-nav .kiki-products-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.kiki-products-nav .kiki-products-panel { position: absolute; top: calc(100% + 12px); left: 0; right: 0; margin-inline: auto; width: min(calc(var(--nav-content-max-width) - 2 * var(--nav-content-gutter)), calc(100% - 2 * var(--nav-content-gutter))); max-height: calc(100dvh - 92px); overflow-y: auto; padding: 30px; border: 1px solid var(--nav-border); border-radius: 24px; background: var(--nav-surface); box-shadow: 0 24px 60px rgba(0, 50, 35, .18); }
.kiki-products-nav .kiki-products-panel[hidden] { display: none; }
.kiki-products-nav .kiki-products-panel {
    background: linear-gradient(135deg, var(--nav-surface) 0%, var(--nav-surface) 25%, var(--nav-panel-tint) 100%);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kiki-products-nav .kiki-products-panel {
        background: linear-gradient(135deg,
            color-mix(in srgb, var(--nav-surface) 98%, transparent) 0%,
            color-mix(in srgb, var(--nav-surface) 98%, transparent) 25%,
            color-mix(in srgb, var(--nav-panel-tint) 98%, transparent) 100%);
        -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px);
    }
}
/* A filtered navbar forms a backdrop root and prevents its dropdown from
   blurring the page below. While expanded, blur the toolbar on its own layer. */
@media (min-width: 1280px) {
    #main-navbar.kiki-products-nav.kiki-nav-expanded {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
        transition-property: background-color, border-color, box-shadow;
    }
    html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav.kiki-nav-expanded {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
    #main-navbar.kiki-products-nav.kiki-nav-expanded.navbar-blur::before {
        content: ""; position: absolute; inset: 0; z-index: -1 !important; pointer-events: none;
        -webkit-backdrop-filter: blur(30px) saturate(175%) brightness(1.03);
        backdrop-filter: blur(30px) saturate(175%) brightness(1.03);
    }
    html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav.kiki-nav-expanded.navbar-blur::before {
        -webkit-backdrop-filter: blur(28px) saturate(145%) brightness(.96);
        backdrop-filter: blur(28px) saturate(145%) brightness(.96);
    }
    html[data-kiki-page-mode="high_contrast"] #main-navbar.kiki-products-nav.kiki-nav-expanded::before { content: none; }
}
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-products-panel {
    background: var(--nav-surface); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.kiki-products-nav .kiki-products-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 24px; }
.kiki-products-nav .kiki-products-heading > div:first-child { min-width: 0; }
.kiki-products-nav .kiki-products-welcome { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 8px; }
.kiki-products-nav .kiki-products-mascot { width: 64px; height: 64px; flex: 0 0 auto; }
.kiki-products-nav .kiki-products-mascot img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: center 75%; transition: transform 240ms ease; }
@media (hover: hover) and (pointer: fine) {
    .kiki-products-nav .kiki-products-mascot:hover img { transform: translateY(-2px) rotate(-3deg) scale(1.04); }
}
.kiki-products-nav .kiki-products-heading h2 { font-size: 23px; font-weight: 750; line-height: 1.4; color: var(--nav-text); }
.kiki-products-nav .kiki-products-heading p { margin-top: 6px; color: var(--nav-muted); }
.kiki-products-nav .kiki-products-note { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 24px; background: var(--nav-soft); color: var(--nav-muted); font-size: 12px; line-height: 1.4; white-space: nowrap; }
.kiki-products-nav .kiki-products-note svg { width: 16px; height: 16px; color: var(--nav-accent); }
.kiki-products-nav .kiki-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kiki-products-nav .kiki-product-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; overflow: hidden; min-width: 0; padding: 24px 20px; border: 1px solid var(--nav-border); border-radius: 18px; background: var(--nav-surface); color: var(--nav-text); text-decoration: none; }
.kiki-products-nav .kiki-product-card img { width: 64px; height: 64px; object-fit: contain; margin-bottom: 4px; }
.kiki-products-nav .kiki-product-title { position: relative; z-index: 1; display: flex; align-items: center; gap: 6px; font-weight: 750; font-size: 18px; line-height: 1.4; }
.kiki-products-nav .kiki-product-title svg { width: 16px; height: 16px; flex-shrink: 0; }
.kiki-products-nav .kiki-product-description { position: relative; z-index: 1; color: var(--nav-muted); font-size: 14px; line-height: 1.6; }
.kiki-products-nav .kiki-product-features { display: none; position: relative; z-index: 1; color: var(--nav-muted); font-size: 13px; line-height: 1.5; }
.kiki-products-nav .kiki-product-feature-list { display: grid; gap: 7px; min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; }
.kiki-products-nav .kiki-product-features li { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 0; }
.kiki-products-nav .kiki-product-features li > span { min-width: 0; overflow-wrap: anywhere; }
.kiki-products-nav .kiki-product-features svg { flex: 0 0 15px; width: 15px; height: 15px; margin-top: 2px; color: var(--nav-accent); }
.kiki-products-nav .kiki-product-free { position: absolute; bottom: -24px; right: -8px; font-size: 80px; font-weight: 800; opacity: .045; pointer-events: none; }
.kiki-products-nav .kiki-product-card:hover { border-color: var(--nav-accent); background: var(--nav-soft); }
.kiki-products-nav .kiki-product-card[aria-current] { background: #07583f; color: #fff; border-color: #0c9668; }
.kiki-products-nav .kiki-product-card[aria-current] .kiki-product-description { color: #d1fae5; }
.kiki-products-nav .kiki-product-card[aria-current] .kiki-product-features { color: #d1fae5; }
.kiki-products-nav .kiki-product-card[aria-current] .kiki-product-features svg { color: #a7f3d0; }
.kiki-products-nav .kiki-product-current { position: absolute; top: 14px; right: 12px; padding: 3px 7px; border-radius: 4px; background: #087c59; color: #fff; font-size: 10px; font-weight: 700; }
.kiki-products-nav :is(a,button,summary):focus-visible { outline: 3px solid var(--nav-accent); outline-offset: 3px; }
.kiki-products-nav .kiki-mobile-links { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 24px; }
.kiki-products-nav .kiki-mobile-links .kiki-nav-link { display: flex; padding: 12px; }
.kiki-products-nav .kiki-mobile-products summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 12px; color: var(--nav-text); font-weight: 650; list-style: none; }
.kiki-products-nav .kiki-mobile-products summary::-webkit-details-marker { display: none; }
.kiki-products-nav .kiki-mobile-products summary svg { width: 16px; height: 16px; }
.kiki-products-nav .kiki-mobile-products[open] summary svg { transform: rotate(180deg); }
.kiki-products-nav .kiki-mobile-products-panel { margin: 0 0 8px; padding: 10px; border: 1px dashed var(--nav-border); border-color: color-mix(in srgb, var(--nav-accent) 35%, var(--nav-border)); border-radius: 18px; background: var(--nav-soft); }
html:not([data-kiki-page-mode="day"]) .kiki-products-nav .kiki-products-panel { box-shadow: none; }
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-card[aria-current] { border: 2px solid var(--nav-accent); background: var(--nav-soft); }
@media (max-width: 1279px) {
    .kiki-products-nav .kiki-desktop-links, .kiki-products-nav #kiki-products-panel { display: none; }
    .kiki-products-nav #mobile-menu-btn { display: inline-flex !important; }
    .kiki-products-nav #mobile-menu:not(.hidden) { display: block !important; }
    .kiki-products-nav #mobile-menu { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; background: var(--nav-surface); border-color: var(--nav-border); }
    .kiki-products-nav .kiki-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kiki-products-nav .kiki-product-card { padding: 16px; gap: 8px; }
    .kiki-products-nav .kiki-product-card img { width: 44px; height: 44px; }
    .kiki-products-nav .kiki-product-title { font-size: 15px; }
    .kiki-products-nav .kiki-product-description { font-size: 12px; }
    .kiki-products-nav .kiki-product-current { position: static; }
}
@media (min-width: 1280px) { .kiki-products-nav #mobile-menu-btn, .kiki-products-nav #mobile-menu { display: none !important; } }
@media (min-width: 1280px) {
    .kiki-products-nav .kiki-product-card { transition: border-color 180ms ease, background-color 180ms ease, box-shadow 220ms ease; }
    /* Grow the artwork into existing padding; its 68px flow footprint stays unchanged. */
    .kiki-products-nav .kiki-product-card img { width: 80px; height: 80px; margin-top: -8px; margin-bottom: -4px; }
    .kiki-products-nav .kiki-product-card img,
    .kiki-products-nav .kiki-product-title svg { transition: transform 240ms cubic-bezier(.2, .7, .2, 1); }
    /* Animate to intrinsic content height so translated summaries never get clipped. */
    .kiki-products-nav .kiki-product-features { display: grid; grid-template-rows: 0fr; margin-top: -12px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: grid-template-rows 240ms cubic-bezier(.2, .7, .2, 1), margin-top 240ms cubic-bezier(.2, .7, .2, 1), opacity 180ms ease, transform 240ms ease, visibility 0s linear 240ms; }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) .kiki-product-features { grid-template-rows: 1fr; margin-top: 0; opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) img { transform: translateY(-2px) scale(1.08); }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) .kiki-product-title svg { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .kiki-products-nav .kiki-product-card,
    .kiki-products-nav .kiki-product-card img,
    .kiki-products-nav .kiki-product-title svg,
    .kiki-products-nav .kiki-products-mascot img,
    .kiki-products-nav .kiki-product-features { transition: none; }
    .kiki-products-nav .kiki-products-mascot:hover img { transform: none; }
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) img,
    .kiki-products-nav .kiki-product-card:is(:hover, :focus-visible) .kiki-product-title svg { transform: none; }
}
@media (max-width: 600px) {
    .kiki-products-nav > div:first-of-type { padding-inline: 12px; }
    .kiki-products-nav .kiki-product-free { font-size: 52px; bottom: -16px; }
}

/* VD/VC highlight the disclosure text without making it a current-page link. */
.kiki-products-nav .kiki-products-trigger[aria-expanded="true"] { color: var(--nav-muted); background: transparent; text-decoration: none; }
.kiki-products-nav .kiki-products-trigger[data-current-product="true"],
.kiki-products-nav .kiki-mobile-products summary[data-current-product="true"] { color: var(--nav-accent); background: transparent; text-decoration: none; }

/* V34's disclosure cue: only the open menu gets the underline and connector. */
@media (min-width: 1280px) {
    .kiki-products-nav .kiki-desktop-links { height: 100%; }
    .kiki-products-nav .kiki-products-trigger { position: relative; align-self: stretch; }
    .kiki-products-nav .kiki-products-trigger[aria-expanded="true"] {
        color: var(--nav-accent); background: color-mix(in srgb, var(--nav-accent) 8%, transparent);
    }
    .kiki-products-nav .kiki-products-trigger::after {
        content: ""; position: absolute; inset: auto 16px 0; height: 2px; border-radius: 2px;
        background: var(--nav-accent); opacity: 0; transform: scaleX(.34); pointer-events: none;
        transition: opacity 180ms ease, transform 200ms ease;
    }
    .kiki-products-nav .kiki-products-trigger::before {
        content: ""; position: absolute; top: 100%; left: 50%; width: 1px; height: 13px;
        background: var(--nav-accent); opacity: 0; pointer-events: none;
        transform: translateX(-50%) scaleY(.35); transform-origin: top;
        transition: opacity 160ms ease, transform 190ms ease;
    }
    .kiki-products-nav .kiki-products-trigger[aria-expanded="true"]::after { opacity: 1; transform: scaleX(1); }
    .kiki-products-nav .kiki-products-trigger[aria-expanded="true"]::before { opacity: .55; transform: translateX(-50%) scaleY(1); }
    html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-products-trigger[aria-expanded="true"] {
        background: var(--nav-soft);
    }
    html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-products-trigger[aria-expanded="true"]::before { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .kiki-products-nav .kiki-products-trigger::before,
    .kiki-products-nav .kiki-products-trigger::after { transition: none; }
}

@media (min-width: 1280px) and (max-width: 1439px) { .kiki-products-nav .kiki-desktop-links .kiki-nav-link { font-size: 14px; padding-inline: 6px; } }
/* Above old page footers while open; existing business dialogs use higher layers. */
#main-navbar.kiki-products-nav.kiki-nav-expanded { z-index: 70 !important; }

/* Keep the original at-top integration in dark mode, too. */
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav:not(.navbar-blur) {
    background: transparent !important; border-bottom-color: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-kiki-page-mode="night"] #main-navbar.kiki-products-nav .kiki-nav-link:hover { color: var(--nav-accent) !important; }
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-free { display: none; }
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-current {
    background: var(--nav-accent); color: var(--kiki-hc-page-bg);
}
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav .kiki-product-card[aria-current] :is(.kiki-product-description, .kiki-product-features) {
    color: var(--kiki-hc-text-primary);
}
html[data-kiki-page-mode="high_contrast"] .kiki-products-nav :focus-visible { outline-color: var(--kiki-hc-focus-ring); }