/* Kate brand shell — PLACEHOLDERS for pink logo + Chatarina smiley.
   Activated with body.theme-kate (?brand=kate). */

/* Helvetica Neue LT Std from Kate (Roman / Medium / Bold / Light).
   Logo wordmark stays outlined SVG. */
@font-face {
    font-family: "Helvetica Neue LT Std";
    src: url("../fonts/helvetica-neue/HelveticaNeueLTStd-Lt.woff2") format("woff2"),
         url("../fonts/helvetica-neue/HelveticaNeueLTStd-Lt.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helvetica Neue LT Std";
    src: url("../fonts/helvetica-neue/HelveticaNeueLTStd-Roman.woff2") format("woff2"),
         url("../fonts/helvetica-neue/HelveticaNeueLTStd-Roman.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helvetica Neue LT Std";
    src: url("../fonts/helvetica-neue/HelveticaNeueLTStd-Md.woff2") format("woff2"),
         url("../fonts/helvetica-neue/HelveticaNeueLTStd-Md.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Helvetica Neue LT Std";
    src: url("../fonts/helvetica-neue/HelveticaNeueLTStd-Bd.woff2") format("woff2"),
         url("../fonts/helvetica-neue/HelveticaNeueLTStd-Bd.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Tokens — borders/type from Kate screenshots + font files. */
:root {
    --lon-blue: #0D13DD;
    --lon-white: #ffffff;
    --lon-menu-bg: #FFFCD7;
    --lon-menu-fg: #FAAAEF;
    --lon-badge: #D92026;
    --lon-chat-bubble: #F8A8E8;       /* Figma chat pink */
    --lon-chat-input: #F8A8E8;
    --lon-chat-text: #0D13DD;
    --lon-chat-placeholder: #B878D0;

    --lon-font: "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --lon-stroke: 1.5px;          /* filter, chips, inputs — thin white outline */
    --lon-stroke-soft: 1px;
    --lon-radius-field: 14px;     /* search / text fields */
    --lon-radius-chip: 999px;     /* pills */
    --lon-radius-btn: 10px;       /* solid outline buttons */
    --lon-radius-icon: 50%;       /* round icon buttons */

    --lon-fs-display: 24px;       /* /STEIERMARK — measured from Kate shot */
    --lon-fs-maker: 16px;         /* producer — same as wine row (Kate) */
    --lon-fs-row: 16px;           /* product / year / price */
    --lon-lh-row: 30px;           /* wine-row pitch (Kate) */
    --lon-space-geo-top: 51px;    /* 44 * 1.15 — before region (not first) */
    --lon-space-geo-maker: 21px;  /* 22 * 0.95 — /REGION → first maker */
    --lon-space-geo-first: 21px;  /* first region: same above as below */
    --lon-space-maker: 16px;      /* between makers */
    --lon-dot-size: 14px;
    --lon-dot-gap: 10px;          /* plupp → wine name */
    --lon-fs-meta: 14px;          /* chips, expand meta */
    --lon-fs-ai-label: 12px;
    --lon-fs-ai-body: 14px;
    --lon-fs-menu: 32px;
    --lon-lh-menu: 32px;
    --lon-lh-tight: 1.12;
    --lon-tracking-caps: 0.01em;
    --lon-col-year: 3.4rem;
    --lon-col-price: 3.6rem;
}

/* Wrappers are inert outside Kate so legacy layout stays intact. */
.kate-shell,
.kate-main,
.kate-chat-dock {
    display: contents;
}

html:has(body.theme-kate) {
    height: 100%;
    overflow: hidden;
}

body.theme-kate {
    --bg: var(--lon-blue);
    --panel: transparent;
    --text: var(--lon-white);
    --muted: rgba(255, 255, 255, 0.78);
    --line: rgba(255, 255, 255, 0.55);
    --chip: transparent;
    --accent: var(--lon-white);
    /* Layout tokens — partitioned shell (no overlay inset) */
    --lon-gutter: 15px;
    --lon-col-max: 390px;
    --lon-chat-fs: 16px;
    --lon-chat-lh: 21px;
    --lon-fab-open: calc(8px + 6px + 21px); /* padding + lh — match input */
    --lon-fab-closed: calc(56px * 1.25 * 1.5 * 0.85); /* white (unchanged) */
    --lon-fab-space: calc(56px * 1.25 * 1.5 * 0.85 + 16px);
    --lon-chat-max: min(50dvh, 420px);
    --lon-chat-ms: 520ms;
    --lon-chat-ease: cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--lon-blue);
    color: var(--lon-white);
    font-family: var(--lon-font);
    font-weight: 400;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    height: 100%;
    max-height: 100dvh;
    overflow: hidden;
    margin: 0;
}

/*
 * App shell — regions share one viewport height.
 * #kateMain scrolls: logo → sticky filter → list
 * chat dock grows at bottom (sibling of kate-main)
 */
body.theme-kate .kate-shell {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body.theme-kate .kate-main {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

body.theme-kate .kate-chat-dock {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    position: relative;
    min-height: 0;
    background: var(--lon-blue);
    z-index: 20;
}

body.theme-kate:not(.is-chat-open) .kate-chat-dock {
    min-height: 0;
}

/* Empty topbar shell — chrome moved into .kate-hero with the logo. */
body.theme-kate .topbar {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    flex: none;
    height: 0;
    overflow: visible;
    pointer-events: none;
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
}

body.theme-kate .topbar-inner {
    max-width: var(--lon-col-max);
    margin: 0 auto;
    padding: 0;
    gap: 0;
    pointer-events: none;
}

body.theme-kate .topbar-main {
    position: relative;
    min-height: 0;
}

/* Logo + hamburger scroll away together above the sticky filter. */
body.theme-kate .kate-hero {
    position: relative;
    width: 100%;
    max-width: var(--lon-col-max);
    margin: 0 auto;
    padding: 0 var(--lon-gutter);
    box-sizing: border-box;
    flex: 0 0 auto;
}

body.theme-kate .kate-hero > .brand {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 0 6px;
    padding-top: 52px; /* room for hamburger above logo (+4px optical) */
    order: unset;
}

body.theme-kate .brand-sub { display: none; }

body.theme-kate .brand-title {
    display: none;
}

body.theme-kate .brand-logo {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    pointer-events: none;
}

body.theme-kate .kate-hero .auth-area {
    position: absolute;
    top: 10px;
    right: var(--lon-gutter);
    z-index: 5;
    pointer-events: auto;
}

/* Logged-in initial plupp — mirrors hamburger, top-left */
body.theme-kate .kate-user-dot {
    position: absolute;
    top: 10px;
    left: var(--lon-gutter);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--lon-white);
    color: var(--lon-blue);
    font-family: var(--lon-font);
    font-size: 18px;
    font-weight: 700;
    font-style: normal;
    line-height: 32px;
    text-align: center;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    /* Optical: caps sit high — nudge letter 5px down */
    padding-top: 5px;
}

body.theme-kate .kate-user-dot[hidden] {
    display: none !important;
}

body.theme-kate .kate-hero .nav-menu-btn,
body.theme-kate .topbar .nav-menu-btn {
    width: 31px;
    height: 31px;
    padding: 0;
    border-radius: 50%;
    background: transparent; /* circle is in hamburger.svg */
    color: var(--lon-blue);
    border: none;
    pointer-events: auto;
    overflow: visible;
}

body.theme-kate .kate-hero .nav-menu,
body.theme-kate .topbar .nav-menu,
body.theme-kate .auth-panel {
    pointer-events: auto;
}

body.theme-kate .kate-hero .nav-menu-btn .nav-menu-icon,
body.theme-kate .topbar .nav-menu-btn .nav-menu-icon {
    display: block;
    width: 31px;
    height: 31px;
}

body.theme-kate .nav-menu-unread-dot {
    top: -2px;
    left: -2px;
    right: auto;
    width: 10px;
    height: 10px;
    border: 2px solid var(--lon-blue);
    background: var(--lon-badge);
    box-shadow: none;
}

body.theme-kate .topbar-actions {
    display: none;
}

/* Plus = cancel icon @ 45°, to the right of the user plupp */
body.theme-kate .kate-hero > #quickAddWineBtn {
    position: absolute;
    top: 10px;
    left: calc(var(--lon-gutter) + 40px);
    right: auto;
    z-index: 5;
    width: 31px;
    height: 31px;
    padding: 0;
    border-radius: 50%;
    background: transparent; /* circle is in the SVG */
    color: var(--lon-blue);
    border: none;
    pointer-events: auto;
    overflow: visible;
}

body.theme-kate .kate-hero > #quickAddWineBtn .quick-add-icon-classic {
    display: none !important;
}

body.theme-kate .kate-hero > #quickAddWineBtn .quick-add-icon-kate {
    display: block !important;
    width: 31px;
    height: 31px;
    transform: rotate(45deg);
    pointer-events: none;
}

/* Classic theme keeps stroke plus; Kate img stays hidden */
.quick-add-icon-kate {
    display: none;
}

/* Same content column as logo/list */
body.theme-kate .topbar-inner,
body.theme-kate .container {
    max-width: var(--lon-col-max);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--lon-gutter);
    padding-right: var(--lon-gutter);
    box-sizing: border-box;
}

/*
 * Filter sticks to the top of #kateMain after the logo scrolls away.
 */
body.theme-kate .kate-main > .kate-sticky-filter {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 30;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 8px max(var(--lon-gutter), calc((100% - var(--lon-col-max)) / 2 + var(--lon-gutter))) 10px;
    box-sizing: border-box;
    background: var(--lon-blue);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

body.theme-kate #kateSearchSlot {
    width: 100%;
}

body.theme-kate .kate-sticky-filter #search,
body.theme-kate .kate-sticky-filter input[type="search"],
body.theme-kate .topbar input[type="search"] {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    height: 48px;
    border-radius: var(--lon-radius-field);
    border: var(--lon-stroke) solid var(--lon-white) !important;
    background: var(--lon-blue) !important;
    color: var(--lon-white) !important;
    caret-color: var(--lon-white);
    font-family: var(--lon-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    /* Same optical nudge as chip label (slightly lower in the field) */
    padding: 15px 14px 11px;
    box-shadow: none !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

body.theme-kate .kate-sticky-filter #search::placeholder,
body.theme-kate .kate-sticky-filter input[type="search"]::placeholder,
body.theme-kate .topbar input[type="search"]::placeholder {
    color: var(--lon-white) !important;
    opacity: 1;
    font-weight: 400;
}

body.theme-kate .kate-sticky-filter #search::-webkit-search-decoration,
body.theme-kate .kate-sticky-filter #search::-webkit-search-cancel-button,
body.theme-kate .kate-sticky-filter #search::-webkit-search-results-button,
body.theme-kate .kate-sticky-filter #search::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

/* Kill autofill tint so field stays brand blue + white text */
body.theme-kate .kate-sticky-filter #search:-webkit-autofill,
body.theme-kate .kate-sticky-filter #search:-webkit-autofill:hover,
body.theme-kate .kate-sticky-filter #search:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lon-white);
    caret-color: var(--lon-white);
    box-shadow: 0 0 0 1000px var(--lon-blue) inset !important;
    transition: background-color 99999s ease-out;
}

body.theme-kate .list-filter-chips {
    display: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

body.theme-kate .list-filter-chips.is-active {
    display: flex;
}

body.theme-kate .list-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: var(--lon-stroke) solid var(--lon-white);
    border-radius: var(--lon-radius-chip);
    background: var(--lon-blue);
    color: var(--lon-white);
    padding: 8px 12px 4px;
    font-family: var(--lon-font);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
    box-shadow: none;
}

body.theme-kate .list-filter-chip-label {
    font: inherit;
    line-height: 21px;
    letter-spacing: 0;
    text-align: left;
    position: relative;
    top: 0;
}

body.theme-kate .list-filter-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--lon-white);
    font-family: var(--lon-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    width: 1em;
    height: 21px;
    position: relative;
    top: 0;
    cursor: pointer;
}

body.theme-kate .container {
    padding-top: 4px;
    padding-bottom: calc(var(--lon-fab-space) + env(safe-area-inset-bottom, 0px));
}

body.theme-kate.is-chat-open .container {
    padding-bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
    body.theme-kate {
        --lon-chat-ms: 0ms;
    }
}

/* Geo: AUSTRIA\n/BURGENLAND — slash glued, ALL CAPS
 * Measured from Kate Figma phone frame (wine pitch 38px → 32css). */
body.theme-kate .kate-geo {
    margin: var(--lon-space-geo-top) 0 var(--lon-space-geo-maker);
}

/* First region in the list: equal space above and below */
body.theme-kate .country:first-child .region:first-child > .kate-geo {
    margin-top: var(--lon-space-geo-first);
}

body.theme-kate .country-title,
body.theme-kate .region-title,
body.theme-kate .kate-geo-country,
body.theme-kate .kate-geo-region {
    color: var(--lon-white);
    text-transform: uppercase;
    letter-spacing: var(--lon-tracking-caps);
    font-weight: 400;
    font-size: var(--lon-fs-display);
    line-height: var(--lon-lh-tight);
    padding-left: 0;
    margin: 0;
}

body.theme-kate .kate-geo-country {
    margin: 0;
}

body.theme-kate .kate-geo-region {
    margin: 0;
}

body.theme-kate .kate-geo-slash {
    margin-right: 0;
}

/* Buttons don't reliably inherit text-transform — force caps on geo links */
body.theme-kate .kate-geo .filter-link,
body.theme-kate .kate-geo .filter-link--heading {
    font: inherit;
    font-weight: 400;
    font-size: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    color: inherit;
}

body.theme-kate .region {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

body.theme-kate .country {
    margin-top: 0;
}

body.theme-kate .maker {
    margin-top: var(--lon-space-maker);
    padding-top: 0;
    border-top: none;
}

/* First maker under a region — geo margin already provides the gap */
body.theme-kate .region > .maker:first-of-type {
    margin-top: 0;
}

body.theme-kate .maker-header {
    margin-bottom: 0;
}

body.theme-kate .maker-title {
    color: var(--lon-white);
    font-family: var(--lon-font);
    font-size: var(--lon-fs-maker);
    font-weight: 400;
    font-style: normal;
    line-height: var(--lon-lh-row);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

body.theme-kate .wine-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.theme-kate .wine-item {
    margin: 0;
    padding: 0;
}

/* Closed row: prick | namn | år | pris */
body.theme-kate .wine-row.wine-row--kate {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        var(--lon-col-year)
        var(--lon-col-price);
    gap: 0.45rem;
    align-items: center;
    padding: 0;
    font-family: var(--lon-font);
    font-size: var(--lon-fs-row);
    font-weight: 400;
    font-style: normal;
    line-height: var(--lon-lh-row);
    letter-spacing: 0;
}

body.theme-kate .wine-row.wine-row--kate .cell-product { grid-column: 1; padding-left: 0; }
body.theme-kate .wine-row.wine-row--kate .cell-year {
    grid-column: 2;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.theme-kate .wine-row.wine-row--kate .cell-list {
    grid-column: 3;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.theme-kate .wine-row.wine-row--kate .cell-type,
body.theme-kate .wine-row.wine-row--kate .cell-grapes {
    display: none !important;
}

body.theme-kate .wine-card,
body.theme-kate .wine-row,
body.theme-kate .wine-item,
body.theme-kate .wine-item .wine-row,
body.theme-kate .wine-item.is-open .wine-row {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
}

body.theme-kate .wine-item .wine-row:hover {
    background: transparent !important;
}

body.theme-kate .wine-item .wine-row:focus,
body.theme-kate .wine-item .wine-row:focus-visible {
    outline: var(--lon-stroke-soft) solid rgba(255, 255, 255, 0.55);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Closed row + expand: samma textstorlek (ingen hopp vid klick) */
body.theme-kate .wine-item,
body.theme-kate .wine-item.is-open,
body.theme-kate .wine-product-text,
body.theme-kate .wine-row.wine-row--kate,
body.theme-kate .wine-row.wine-row--kate .cell,
body.theme-kate .wine-row.wine-row--kate .cell-year,
body.theme-kate .wine-row.wine-row--kate .cell-list,
body.theme-kate .wine-detail {
    font-family: var(--lon-font) !important;
    font-size: var(--lon-fs-row) !important;
    font-weight: 400;
    font-style: normal;
    line-height: var(--lon-lh-row);
    letter-spacing: 0;
    color: var(--lon-white);
}

/* Expand meta: type · grapes · alcohol */
body.theme-kate .wine-detail .detail-line,
body.theme-kate .wine-detail .detail-meta,
body.theme-kate .wine-detail .filter-link--meta,
body.theme-kate .wine-detail .detail-meta-plain,
body.theme-kate .wine-detail .detail-meta-sep,
body.theme-kate .wine-detail .detail-meta-grape-group {
    font-family: var(--lon-font) !important;
    font-size: var(--lon-fs-row) !important;
    font-weight: 400;
    font-style: normal;
    line-height: 21px;
    letter-spacing: 0;
    color: var(--lon-white);
}

body.theme-kate .wine-product-wrap {
    display: flex;
    align-items: center;
    gap: var(--lon-dot-gap);
    min-width: 0;
    width: 100%;
    line-height: var(--lon-lh-row);
}

/*
 * Kate dots ≈ capital letter size.
 * Sit higher than optical center of the 32px line (with the caps).
 */
body.theme-kate .wine-dot {
    width: var(--lon-dot-size) !important;
    height: var(--lon-dot-size) !important;
    font-size: var(--lon-fs-row);
    position: relative;
    top: -2px;
    flex: 0 0 var(--lon-dot-size);
}

body.theme-kate .wine-dot.dot-spark-dots {
    background-size: 4px 4px;
    background-position: 2px 2px;
}

body.theme-kate .wine-detail {
    border: none !important;
    background: transparent !important;
    padding: 4px 0 16px;
    margin: 0;
    border-radius: 0 !important;
}

body.theme-kate .wine-detail-top {
    display: block !important;
}

body.theme-kate .detail-meta {
    margin: 2px 0 10px;
    gap: 0.35em;
}

body.theme-kate .detail-meta-sep {
    opacity: 0.85;
}

body.theme-kate .ai-wrap {
    margin: 0 0 12px;
}

body.theme-kate .ai-title {
    margin-bottom: 4px;
    opacity: 1;
    font-family: var(--lon-font);
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: 0;
    color: #ffffff !important;
}

/* Same typography as Chatarina chat bubbles */
body.theme-kate .ai-note,
body.theme-kate .ai-note * {
    font-family: var(--lon-font) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: var(--lon-chat-fs) !important;
    line-height: var(--lon-chat-lh) !important;
    letter-spacing: 0 !important;
    color: var(--lon-white) !important;
    white-space: normal;
}

body.theme-kate .detail-image,
body.theme-kate .detail-image--hero {
    margin: 8px 0 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent;
    overflow: hidden;
}

body.theme-kate .detail-image img,
body.theme-kate .detail-image--hero img {
    width: 100%;
    height: auto;
    display: block;
}

body.theme-kate .empty,
body.theme-kate .status {
    border: var(--lon-stroke-soft) solid rgba(255, 255, 255, 0.35);
    border-radius: var(--lon-radius-btn);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

body.theme-kate .status[hidden],
body.theme-kate .status:empty {
    display: none !important;
    margin: 0;
    padding: 0;
    border: none;
}

/* Forms (account / register / admin) — outline only.
   Exclude .kate-login-input (those match search: solid blue fill). */
body.theme-kate .auth-input,
body.theme-kate input[type="text"]:not(.kate-login-input),
body.theme-kate input[type="email"]:not(.kate-login-input),
body.theme-kate input[type="password"]:not(.kate-login-input),
body.theme-kate select:not(.kate-login-input),
body.theme-kate textarea {
    border: var(--lon-stroke) solid var(--lon-white) !important;
    border-radius: var(--lon-radius-btn) !important;
    background: transparent !important;
    color: var(--lon-white) !important;
    box-shadow: none !important;
    font-family: var(--lon-font);
}

body.theme-kate .auth-btn,
body.theme-kate button.auth-btn {
    border: var(--lon-stroke) solid var(--lon-white);
    border-radius: var(--lon-radius-btn);
    background: transparent;
    color: var(--lon-white);
    box-shadow: none;
}

/* Full-screen yellow menu — same content width as wine list column */
body.theme-kate .nav-menu {
    --lon-menu-inline: max(
        var(--lon-gutter),
        calc((100% - var(--lon-col-max)) / 2 + var(--lon-gutter))
    );
    position: fixed;
    inset: 0;
    z-index: 200;
    min-width: 0;
    margin: 0;
    padding: 16px var(--lon-menu-inline) 40px;
    border: none;
    border-radius: 0;
    background: var(--lon-menu-bg);
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: auto;
    pointer-events: auto;
    box-sizing: border-box;
}

body.theme-kate .nav-menu[hidden] {
    display: none !important;
}

/* While menu is open: hide list chrome that was stacking above the panel */
body.theme-kate.is-nav-open .kate-sticky-filter,
body.theme-kate.is-nav-open .kate-chat-fab,
body.theme-kate.is-nav-open #kateChatFab,
body.theme-kate.is-nav-open .kate-chat-dock,
body.theme-kate.is-nav-open .sommelier-chat,
body.theme-kate.is-nav-open .sommelier-chat-toggle {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.theme-kate.is-nav-open {
    overflow: hidden;
}

/* Same spot as hamburger: 31×31, top 10px, right edge on list column */
body.theme-kate .nav-menu-close {
    position: absolute;
    top: 10px;
    right: var(--lon-menu-inline);
    z-index: 2;
    width: 31px;
    height: 31px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
    line-height: 0;
}

body.theme-kate .nav-menu-close-icon {
    display: block;
    width: 31px;
    height: 31px;
}

body.theme-kate .nav-menu-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: var(--lon-col-max);
    margin: 44px auto 36px; /* +4px vs previous — same logo nudge as list */
}

/* White logo SVG, tinted via mask → menu pink */
body.theme-kate .nav-menu-logo {
    display: block;
    width: 100%;
    max-width: var(--lon-col-max);
    aspect-ratio: 360 / 195;
    background-color: var(--lon-menu-fg);
    -webkit-mask: url("../img/brand/logo-luckyornot.svg") center / contain no-repeat;
    mask: url("../img/brand/logo-luckyornot.svg") center / contain no-repeat;
}

body.theme-kate .nav-menu .auth-btn {
    justify-content: flex-end;
    text-align: right;
    color: var(--lon-menu-fg);
    font-family: var(--lon-font);
    font-size: var(--lon-fs-menu);
    font-weight: 400;
    font-style: normal;
    line-height: var(--lon-lh-menu);
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 10px 0;
    border: none !important;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    margin: 0;
}

/* Kill classic muted logout + separator — same pink as siblings */
body.theme-kate .nav-menu #logoutBtn {
    color: var(--lon-menu-fg) !important;
    margin-top: 0;
    padding-top: 10px;
    border-top: none;
    border-radius: 0;
}

body.theme-kate .nav-menu .auth-btn:hover {
    background: transparent;
    color: var(--lon-menu-fg);
    opacity: 0.85;
}

/* Kate menu: plain labels only — no classic badge / inline unread chip */
body.theme-kate .nav-menu .nav-badge,
body.theme-kate .nav-menu .nav-notif-dot,
body.theme-kate .nav-menu .nav-unread-dot {
    display: none !important;
}

body.theme-kate .nav-menu .nav-notif-btn {
    display: none; /* visibility still toggled inline when logged in */
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

body.theme-kate .nav-menu .nav-notif-label {
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
}

body.theme-kate .auth-name {
    display: none !important;
}

/* Classic auth panel unused in Kate — full login view instead */
body.theme-kate .auth-panel {
    display: none !important;
}

/* ---- Kate login view (replaces list) ---- */
body.theme-kate .kate-login {
    width: 100%;
    margin: 0;
    padding: 8px 0 40px;
    box-sizing: border-box;
}

body.theme-kate .kate-login[hidden] {
    display: none !important;
}

/* Same type as menu items: 32 / 32 / 400 / uppercase */
body.theme-kate .kate-login-title {
    margin: 8px 0 28px;
    color: var(--lon-white);
    font-family: var(--lon-font);
    font-weight: 400;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0;
}

body.theme-kate .kate-login-title-main,
body.theme-kate .kate-login-title-sub {
    margin: 0;
    font-family: var(--lon-font);
    font-size: var(--lon-fs-menu);
    font-weight: 400;
    font-style: normal;
    line-height: var(--lon-lh-menu);
    letter-spacing: 0;
    text-transform: uppercase;
}

body.theme-kate .kate-login-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

body.theme-kate .kate-login-label {
    margin: 0 0 8px;
    color: var(--lon-white);
    font-family: var(--lon-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
}

/* Same field chrome as sticky search filter */
body.theme-kate input.kate-login-input,
body.theme-kate input.kate-login-input[type="email"],
body.theme-kate input.kate-login-input[type="password"] {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    box-sizing: border-box;
    height: 48px;
    margin: 0 0 18px;
    border-radius: var(--lon-radius-field) !important;
    border: var(--lon-stroke) solid var(--lon-white) !important;
    background: var(--lon-blue) !important;
    background-color: var(--lon-blue) !important;
    color: var(--lon-white) !important;
    -webkit-text-fill-color: var(--lon-white);
    caret-color: var(--lon-white);
    font-family: var(--lon-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    padding: 15px 14px 11px;
    box-shadow: none !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

body.theme-kate .kate-login-input::placeholder {
    color: var(--lon-white) !important;
    -webkit-text-fill-color: var(--lon-white);
    opacity: 1;
    font-weight: 400;
}

body.theme-kate .kate-login-input:focus {
    border-color: var(--lon-white) !important;
    background: var(--lon-blue) !important;
    background-color: var(--lon-blue) !important;
    outline: none;
}

/* Same autofill lock as search — stops white/yellow flash */
body.theme-kate .kate-login-input:-webkit-autofill,
body.theme-kate .kate-login-input:-webkit-autofill:hover,
body.theme-kate .kate-login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lon-white);
    caret-color: var(--lon-white);
    box-shadow: 0 0 0 1000px var(--lon-blue) inset !important;
    transition: background-color 99999s ease-out;
}

body.theme-kate .kate-login-submit {
    align-self: flex-start;
    margin-top: 8px;
    /* Optical nudge: 2px down, 1px left (caps sit high in the box) */
    padding: 10px 19px 6px 17px;
    border: var(--lon-stroke) solid var(--lon-white);
    border-radius: var(--lon-radius-field);
    background: transparent;
    color: var(--lon-white);
    font-family: var(--lon-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
}

body.theme-kate .kate-login-submit:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ---- Kate account (same shell as login/register) ---- */
body.theme-kate .kate-account {
    max-width: none;
}

body.theme-kate .kate-account-body {
    width: 100%;
}

body.theme-kate select.kate-login-input,
body.theme-kate select.kate-login-select {
    display: block;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
    height: 48px;
    margin: 0 0 18px;
    border-radius: var(--lon-radius-field) !important;
    border: var(--lon-stroke) solid var(--lon-white) !important;
    background: var(--lon-blue) !important;
    background-color: var(--lon-blue) !important;
    color: var(--lon-white) !important;
    font-family: var(--lon-font);
    font-size: 16px;
    font-weight: 400;
    line-height: 21px;
    padding: 12px 14px 10px;
    box-shadow: none !important;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--lon-white) 50%),
        linear-gradient(135deg, var(--lon-white) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    cursor: pointer;
}

body.theme-kate select.kate-login-input option,
body.theme-kate select.kate-login-select option {
    background: var(--lon-blue);
    color: var(--lon-white);
}

body.theme-kate .kate-account input.kate-login-input[readonly] {
    opacity: 0.85;
    cursor: default;
}

body.theme-kate .kate-push-block {
    margin: 8px 0 18px;
    padding: 0;
    border: none;
}

body.theme-kate .kate-account-hint {
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--lon-font);
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
}

body.theme-kate .kate-account-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}

body.theme-kate .kate-account-row .kate-login-submit {
    margin-top: 0;
}

body.theme-kate .kate-account-msg {
    margin-top: 12px;
    min-height: 18px;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--lon-font);
    font-size: 14px;
    line-height: 18px;
}

body.theme-kate .kate-account-msg.is-error {
    color: var(--lon-white);
}

body.theme-kate .kate-account-msg.is-ok {
    color: var(--lon-white);
}

body.theme-kate .kate-orders-title {
    margin-top: 12px;
}

/* Login / register / account: hide list chrome like open menu */
body.theme-kate.is-login-view .kate-sticky-filter,
body.theme-kate.is-login-view .kate-chat-fab,
body.theme-kate.is-login-view #kateChatFab,
body.theme-kate.is-login-view .kate-chat-dock,
body.theme-kate.is-login-view .sommelier-chat,
body.theme-kate.is-account-view .kate-sticky-filter,
body.theme-kate.is-account-view .kate-chat-fab,
body.theme-kate.is-account-view #kateChatFab,
body.theme-kate.is-account-view .kate-chat-dock,
body.theme-kate.is-account-view .sommelier-chat {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/*
 * Chatarina smiley — floating FAB when chat closed; flies down-left into input slot when open.
 * Solid base colour + ::after shimmer overlay (opacity fade in/out → always returns to base):
 *  1) closed → white, soft Kate shimmer ~every 5s
 *  2) open, empty input → solid pink
 *  3) open, has text → continuous soft Kate shimmer over pink
 */
body.theme-kate .kate-chat-fab {
    /* Sampled from Kate smiley shot: sage → silver → pink → red → orange */
    --lon-smiley-shimmer: linear-gradient(
        to right,
        #5CA47E 0%,
        #92A4AC 22%,
        #E5ACE4 48%,
        #DA3E3E 72%,
        #EA7838 100%
    );
    position: fixed;
    left: calc(100vw - 16px - var(--lon-fab-closed));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
    width: var(--lon-fab-closed);
    height: var(--lon-fab-closed);
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #ffffff;
    background-image: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-mask: url("../img/brand/smiley.svg") center / contain no-repeat;
    mask: url("../img/brand/smiley.svg") center / contain no-repeat;
    transition:
        left var(--lon-chat-ms) var(--lon-chat-ease),
        bottom var(--lon-chat-ms) var(--lon-chat-ease),
        width var(--lon-chat-ms) var(--lon-chat-ease),
        height var(--lon-chat-ms) var(--lon-chat-ease),
        background-color var(--lon-chat-ms) var(--lon-chat-ease);
    will-change: left, top, bottom, width, height;
}

/* JS owns left/top while free-floating / bouncing */
body.theme-kate .kate-chat-fab.is-fab-free {
    right: auto !important;
    bottom: auto !important;
    cursor: grabbing;
    transition:
        width var(--lon-chat-ms) var(--lon-chat-ease),
        height var(--lon-chat-ms) var(--lon-chat-ease),
        background-color var(--lon-chat-ms) var(--lon-chat-ease);
}

body.theme-kate .kate-chat-fab.is-fab-free:active {
    cursor: grabbing;
}

/* Shimmer layer — fades opacity so base colour always returns */
body.theme-kate .kate-chat-fab::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--lon-smiley-shimmer);
    background-size: 220% 100%;
    background-position: 0% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: kate-smiley-idle 5.5s ease-in-out infinite;
    pointer-events: none;
}

body.theme-kate .kate-chat-fab img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0; /* painted by mask + background */
    pointer-events: none;
}

/* FLIP dock: final CSS position already applied; only transform animates */
body.theme-kate.is-chat-open .kate-chat-fab.is-fab-docking,
body.theme-kate .kate-chat-fab.is-fab-docking {
    will-change: transform;
    cursor: pointer;
}

/* Land beside chat input — tap to send (same as Enter). */
body.theme-kate.is-chat-open .kate-chat-fab {
    left: 16px !important;
    top: auto !important;
    right: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: var(--lon-fab-open);
    height: var(--lon-fab-open);
    cursor: pointer;
    pointer-events: auto;
    background-color: var(--lon-chat-bubble);
    transition:
        background-color var(--lon-chat-ms) var(--lon-chat-ease);
}

body.theme-kate.is-chat-open .kate-chat-fab::after {
    animation: none;
    opacity: 0;
}

/* Open + text in input: soft continuous shimmer over pink */
body.theme-kate.is-chat-open .kate-chat-fab.is-shimmering::after {
    animation: kate-smiley-live 2.6s ease-in-out infinite;
}

@keyframes kate-smiley-idle {
    0%,
    70% {
        opacity: 0;
        background-position: 0% 50%;
    }
    78% {
        opacity: 0.45;
        background-position: 35% 50%;
    }
    84% {
        opacity: 0.95;
        background-position: 55% 50%;
    }
    92% {
        opacity: 0.35;
        background-position: 80% 50%;
    }
    100% {
        opacity: 0;
        background-position: 100% 50%;
    }
}

@keyframes kate-smiley-live {
    0% {
        opacity: 0.12;
        background-position: 0% 50%;
    }
    50% {
        opacity: 0.9;
        background-position: 50% 50%;
    }
    100% {
        opacity: 0.12;
        background-position: 100% 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-kate .kate-chat-fab::after,
    body.theme-kate.is-chat-open .kate-chat-fab.is-shimmering::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

body.theme-kate .sommelier-chat {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    top: auto;
    width: 100%;
    max-width: none;
    /* Pixel height is JS-driven (open / close / message growth). */
    height: 0;
    max-height: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #0D13DD;
    z-index: 1;
    font-family: var(--lon-font);
    /* Never display:none — bottlelist mobile uses that and kills height animation */
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    transform: none;
    visibility: hidden;
    pointer-events: none;
    opacity: 1; /* height alone carries the motion — opacity fade hides it */
    transition:
        height var(--lon-chat-ms) var(--lon-chat-ease),
        visibility 0s linear var(--lon-chat-ms);
}

body.theme-kate .sommelier-chat.is-open {
    /* height set inline by JS */
    transform: none;
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition:
        height var(--lon-chat-ms) var(--lon-chat-ease),
        visibility 0s linear 0s;
}

body.theme-kate .sommelier-chat-header {
    display: none;
}

body.theme-kate .sommelier-chat-close {
    display: none !important;
}

body.theme-kate .sommelier-chat-filter-bar {
    display: none !important;
}

body.theme-kate .sommelier-chat-body {
    flex: 0 1 auto;
    min-height: 0;
    padding: 16px 16px 10px;
    gap: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #0D13DD;
}

body.theme-kate .sommelier-chat-empty {
    display: none;
}

body.theme-kate .sommelier-chat-msg {
    max-width: min(82%, 340px);
    font-family: var(--lon-font);
    font-weight: 400;
    font-style: normal;
    font-size: var(--lon-chat-fs);
    line-height: var(--lon-chat-lh);
    letter-spacing: 0;
    /* Lite mer topp-padding → texten sitter lägre i bubblan */
    padding: 8px 18px 6px;
    border-radius: 24px;
    border: none;
    box-shadow: none;
}

body.theme-kate .sommelier-chat-msg.user,
body.theme-kate .sommelier-chat-msg.assistant {
    background: var(--lon-chat-bubble);
    color: var(--lon-chat-text);
}

body.theme-kate .sommelier-chat-typing {
    background: var(--lon-chat-bubble);
    border-radius: 24px;
    padding: 14px 16px;
}

body.theme-kate .sommelier-chat-typing span {
    background: var(--lon-chat-text);
}

body.theme-kate .sommelier-chat-footer {
    flex: 0 0 auto;
    border-top: none;
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: #0D13DD;
}

body.theme-kate .sommelier-chat-form {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* Invisible spacer — real smiley is the FAB that lands here when open. */
body.theme-kate .sommelier-chat-form::before {
    content: "";
    width: var(--lon-fab-open);
    height: var(--lon-fab-open);
    flex: 0 0 var(--lon-fab-open);
    border-radius: 50%;
    background: transparent;
    visibility: hidden;
}

/*
 * Input uses the exact same surface as chat bubbles.
 * !important: bottlelist + iOS UA. Note: radius 24px ≈ pill at 1-line height —
 * both bubbles and input share that look on purpose.
 */
body.theme-kate .sommelier-chat-input,
body.theme-kate textarea.sommelier-chat-input,
body.theme-kate #chatInput {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(8px + 6px + var(--lon-chat-lh)) !important;
    max-height: min(40vh, 220px) !important;
    margin: 0 !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 24px !important;
    background: var(--lon-chat-bubble) !important;
    background-color: var(--lon-chat-bubble) !important;
    color: var(--lon-chat-text) !important;
    padding: 8px 18px 6px !important;
    font-family: var(--lon-font) !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: var(--lon-chat-fs) !important;
    line-height: var(--lon-chat-lh) !important;
    letter-spacing: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    caret-color: var(--lon-chat-text);
    resize: none !important;
    overflow-y: auto;
}

body.theme-kate .sommelier-chat-input::placeholder,
body.theme-kate textarea.sommelier-chat-input::placeholder,
body.theme-kate #chatInput::placeholder {
    color: var(--lon-chat-placeholder) !important;
    opacity: 1 !important;
}

body.theme-kate .sommelier-chat-input:focus,
body.theme-kate textarea.sommelier-chat-input:focus,
body.theme-kate #chatInput:focus {
    outline: none !important;
    box-shadow: none !important;
    border: 0 !important;
    background: var(--lon-chat-bubble) !important;
    background-color: var(--lon-chat-bubble) !important;
}

body.theme-kate .sommelier-chat-send {
    display: none !important;
}

body.theme-kate.is-chat-open .container,
body.theme-kate.is-chat-open .topbar-inner {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--lon-col-max);
}

/* Kill legacy bottlelist mobile chat layout for Kate */
@media (max-width: 768px) {
    body.theme-kate {
        display: block !important;
        height: 100% !important;
        max-height: 100dvh !important;
        overflow: hidden !important;
        min-height: 0 !important;
    }

    body.theme-kate .mobile-search-slot {
        display: none !important;
    }

    body.theme-kate.is-mobile-chat-open .topbar,
    body.theme-kate.is-chat-open .topbar {
        display: block !important;
    }

    body.theme-kate .container {
        flex: none !important;
        overflow: visible !important;
        min-height: 0 !important;
        /* Override bottlelist mobile: keep same centered column as logo */
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var(--lon-col-max) !important;
        width: 100% !important;
        padding-left: var(--lon-gutter) !important;
        padding-right: var(--lon-gutter) !important;
        box-sizing: border-box;
    }

    body.theme-kate .topbar-inner,
    body.theme-kate .kate-hero {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var(--lon-col-max) !important;
        width: 100%;
        padding-left: var(--lon-gutter);
        padding-right: var(--lon-gutter);
        box-sizing: border-box;
    }

    body.theme-kate.is-chat-open .container,
    body.theme-kate.is-chat-open .topbar-inner {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: var(--lon-col-max) !important;
    }

    body.theme-kate .sommelier-chat {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        height: 0;
        max-height: none !important;
        min-height: 0 !important;
        flex: none !important;
        border: none !important;
        background: #0D13DD !important;
        z-index: 1 !important;
        transform: none !important;
    }

    body.theme-kate .sommelier-chat:not(.is-open) {
        display: flex !important; /* override bottlelist display:none */
        max-height: none !important;
        min-height: 0 !important;
    }

    body.theme-kate .sommelier-chat.is-open {
        display: flex !important;
        max-height: none !important;
        min-height: 0 !important;
    }
}