/**
 * Fam Farmer customer PWA — native app shell.
 * One phone-width column, sticky top chrome, fixed bottom dock, safe areas.
 * Load after portal-header + bottom-nav so these rules win for layout chrome.
 */
:root {
    /* World-class mobile frame (~iPhone 14/15 Pro Max logical width) */
    --kf-app-shell-max: 430px;
    --bh-layout-max: var(--kf-app-shell-max);
    --ca-lnav-max: var(--kf-app-shell-max);
}

@media (max-width: 767.98px) {
    :root {
        --bh-layout-max: 100%;
        --ca-lnav-max: 100%;
    }
}

@media (min-width: 768px) {
    :root {
        --bh-layout-max: var(--kf-app-shell-max);
        --ca-lnav-max: var(--kf-app-shell-max);
    }
}

/* App-like viewport: no rubber-band sideways, full height */
html:has(body.bh-page),
html:has(body.kf-login-page) {
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    background: #e8ebe6;
}

body.bh-page,
body.kf-login-page {
    min-height: 100%;
    min-height: 100dvh;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom;
    background: var(--kf-page-bg, #ffffff);
}

/* Wrapped Android APK (WebView): document must scroll — height:100% on html breaks many WebViews */
html.kf-android-webview,
html.kf-android-webview:has(body.bh-page),
html.kf-android-webview:has(body.kf-login-page) {
    height: auto !important;
    min-height: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: auto;
}

/* Body must keep overflow:visible — any other value makes body a scroll
   container and breaks position:sticky for the header/table heads. */
html.kf-android-webview body.bh-page,
html.kf-android-webview body.kf-login-page {
    height: auto !important;
    min-height: 100%;
    min-height: 100dvh;
    overflow: visible !important;
    overscroll-behavior: auto;
    touch-action: pan-y pinch-zoom;
}

/*
 * React Native SafeAreaView already insets the WebView above the system nav.
 * CSS env(safe-area-inset-bottom) then double-pads and floats the colored
 * bottom tabs above a transparent gap (content shows under the bar).
 * Zero our safe-bottom token and pin the dock flush to the WebView bottom.
 */
html.kf-android-webview {
    --safe-t: 0px;
    --safe-top: 0px;
    --safe-b: 0px;
    --kf-floating-cart-bottom: calc(
        var(--ca-lnav-dock, calc(var(--ca-lnav-h) + 2 * var(--ca-lnav-pad) + 22px))
        + var(--kf-floating-cart-nav-gap, 2px)
    );
}

/* Top inset is native (RN SafeAreaView) — strip the CSS copy of it. */
html.kf-android-webview .kph-hero {
    padding-top: 12px !important;
}

html.kf-android-webview .kf-login-stack > .kf-login-topbar,
html.kf-android-webview body.kf-login-page .kf-login-stack > .kf-login-topbar {
    min-height: 72px !important;
    padding-top: 12px !important;
}

html.kf-android-webview .ca-lnav,
html.kf-android-webview body.bh-page.with-login-bottom-nav .ca-lnav {
    bottom: 0 !important;
    min-height: var(--ca-lnav-h) !important;
    padding-bottom: var(--ca-lnav-pad, 0px) !important;
}

html.kf-android-webview .ca-lnav--tile-rebrand,
html.kf-android-webview body.bh-page.with-login-bottom-nav .ca-lnav--tile-rebrand {
    min-height: var(--ca-lnav-h) !important;
    padding-bottom: 0 !important;
}

html.kf-android-webview body.bh-page.with-login-bottom-nav .bh-bar {
    bottom: var(--ca-lnav-dock) !important;
}

html.kf-android-webview .kf-floating-cart,
html.kf-android-webview body.with-login-bottom-nav .kf-floating-cart {
    bottom: var(--kf-floating-cart-bottom) !important;
}

/* Desktop: dim stage behind the phone column */
@media (min-width: 768px) {
    body.bh-page.with-login-bottom-nav,
    body.kf-login-page {
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.7) 0%, transparent 55%),
            #dfe5db;
    }
}

/* —— Sticky header (pins to top of screen) —— */
body.bh-page.with-login-bottom-nav header.kph {
    position: sticky;
    top: 0;
    z-index: 950;
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
}

body.bh-page.with-login-bottom-nav .kph-hero {
    background: color-mix(in srgb, var(--kf-portal-header-chrome-bg, #ffffff) 92%, transparent);
}

@supports not (background: color-mix(in srgb, white 50%, transparent)) {
    body.bh-page.with-login-bottom-nav .kph-hero {
        background: rgba(255, 255, 255, 0.96);
    }
}

/* —— Fixed bottom nav (already fixed; lock to shell width) —— */
body.bh-page.with-login-bottom-nav .ca-lnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: min(100vw, var(--ca-lnav-max));
    margin-left: auto;
    margin-right: auto;
    z-index: 900;
}

/* Unify content clearance above the dock (home + shop + basket) */
body.bh-page.with-login-bottom-nav .cph-shell,
body.bh-page.with-login-bottom-nav .bh-shell {
    width: 100%;
    max-width: var(--bh-layout-max);
    margin-left: auto;
    margin-right: auto;
    padding-bottom: calc(24px + var(--ca-lnav-dock, 74px) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
}

body.bh-page.with-login-bottom-nav .cph-shell.cph-shell--login {
    padding-bottom: var(--kf-app-gutter, 8px);
}

@media (max-width: 767.98px) {
    body.bh-page.with-login-bottom-nav .cph-shell,
    body.bh-page.with-login-bottom-nav .bh-shell {
        max-width: none;
    }
}

/* Desktop phone bezel on the scroll column */
@media (min-width: 768px) {
    body.bh-page.with-login-bottom-nav .cph-shell,
    body.bh-page.with-login-bottom-nav .bh-shell {
        min-height: 100dvh;
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        background: var(--kf-page-bg, #ffffff);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.4) inset,
            0 12px 40px rgba(15, 23, 42, 0.08);
    }

    body.bh-page.with-login-bottom-nav .ca-lnav {
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }
}

/* Legacy wraps → same shell width */
body.bh-page .ca-wrap,
.ca-wrap {
    max-width: var(--bh-layout-max, var(--kf-app-shell-max));
    margin-left: auto;
    margin-right: auto;
}

/* —— Login: same phone column + sticky brand bar —— */
body.kf-login-page .kf-app {
    width: 100%;
    max-width: none;
    min-height: 100dvh;
    margin: 0 auto;
}

body.kf-login-page .kf-login-stack {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    min-height: 100dvh;
}

@media (min-width: 768px) {
    body.kf-login-page .kf-app,
    body.kf-login-page .kf-login-stack {
        max-width: var(--kf-app-shell-max);
    }

    body.kf-login-page .kf-login-stack {
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        border-right: 1px solid rgba(0, 0, 0, 0.08);
        background: var(--kf-page, #f6f1eb);
        box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
    }
}

/* Sticky login brand chrome */
/* Sticky login brand chrome — same width as hero/image stack */
body.kf-login-page .kf-login-stack > .kf-login-topbar,
.kf-login-stack > .kf-login-topbar {
    position: sticky;
    top: 0;
    z-index: 940;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    min-height: calc(72px + env(safe-area-inset-top, 0px));
    padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 12px;
    box-sizing: border-box;
    background: #ffffff !important;
    background-color: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid #e8e8e3;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.kf-login-topbar__logo {
    display: block;
    height: 52px;
    width: auto;
    max-width: min(200px, 48vw);
    object-fit: contain;
    object-position: left center;
}

.kf-login-install {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.72rem 1.15rem;
    border: 1px solid #e6b800;
    border-radius: 0;
    background: #ffd400;
    color: #1a1a1a;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 0 rgba(180, 140, 0, 0.35);
}

.kf-login-install:hover,
.kf-login-install:focus-visible {
    background: #ffca00;
    border-color: #d4a800;
    outline: none;
}

.kf-login-topbar__mark {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #1d7232;
}

/* Login form area clears home-indicator */
body.kf-login-page .kf-sheet,
body.kf-login-page .kf-card {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/* Standalone PWA: hide browser-like rubber edges */
@media (display-mode: standalone) {
    html:has(body.bh-page),
    html:has(body.kf-login-page),
    body.bh-page,
    body.kf-login-page {
        overscroll-behavior: none;
    }
}