/* Buyer navigation only; admin navigation and checkout calculations are untouched. */
:root:has(.buyer-promo-banner) { --buyer-promo-height: 44px; }
.teks-atas.buyer-promo-banner {
    display: flex;
    position: fixed;
    inset: 0 0 auto;
    width: 100%;
    height: auto !important;
    min-height: 30px;
    padding: calc(6px + env(safe-area-inset-top)) 16px 6px;
    font-size: 12px;
    line-height: 1.4;
    z-index: 12;
}
.buyer-promo-banner p { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.teks-atas.buyer-promo-banner--mobile { display: none; }
.buyer-nav-icon { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
#buyer-account-menu[hidden] { display: none !important; }
#buyer-account-menu {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    background: rgba(15, 23, 42, .4);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#buyer-account-menu .buyer-account-panel {
    width: min(100%, 380px);
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
}
.buyer-account-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.buyer-account-panel__heading h5 { margin: 0; }
.buyer-account-close { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 0; border-radius: 12px; background: var(--hijaumuda, #f1f5f9); color: var(--hijau); }
.buyer-account-links { display: grid; gap: 8px; }
.buyer-account-links a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 12px; border-radius: 12px; color: #374151; text-decoration: none; overflow-wrap: anywhere; }
.buyer-account-links a:hover, .buyer-account-links a[aria-current='page'] { background: var(--hijaumuda, #f1f5f9); color: var(--hijau); }
.buyer-account-links .material-icons { flex: 0 0 24px; }
html.buyer-menu-open, html.buyer-menu-open body { overflow: hidden; overscroll-behavior: none; }
.buyer-mobile-header :focus-visible, #buyer-account-menu :focus-visible, .account-mobile-tabs a:focus-visible { outline: 2px solid var(--hijau); outline-offset: 3px; }
.buyer-desktop-spacer { height: var(--buyer-header-bottom, 107px) !important; }
.buyer-desktop-header { width: 100%; left: 0; top: var(--buyer-promo-height, 0px) !important; }
body:has(.buyer-mobile-header) .container-kategori-sticky { top: var(--buyer-header-bottom, 116px) !important; }
body:has(.buyer-mobile-header) .account-side-card { top: var(--buyer-header-bottom, 86px); }
.kategori-dropdown-menu { max-width: calc(100vw - 24px); overscroll-behavior: contain; }

@media (max-width: 991.98px) {
    .teks-atas.buyer-promo-banner--desktop { display: none; }
    .teks-atas.buyer-promo-banner--mobile { display: flex; }
    .buyer-desktop-header, .buyer-desktop-spacer { display: none !important; }
    .buyer-mobile-header {
        display: block !important;
        position: fixed;
        top: var(--buyer-promo-height, 0px) !important;
        left: 0;
        width: 100%;
        padding: 8px 0 !important;
        background: rgba(255, 255, 255, .98) !important;
        border-bottom: 1px solid var(--bs-border-color, #e5e7eb);
        z-index: 11;
    }
    .buyer-mobile-header > .container { max-width: 100%; padding-inline: 16px; }
    .buyer-mobile-header .mobile-navbar-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
    .buyer-mobile-header .mobile-navbar-brand { display: inline-flex; align-items: center; min-width: 0; }
    .buyer-mobile-header .mobile-navbar-brand-full { display: none; }
    .buyer-mobile-header .mobile-navbar-brand-mark { display: block; width: 40px; height: 40px; object-fit: contain; }
    .buyer-mobile-header .mobile-navbar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
    .buyer-mobile-header .btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px !important; min-height: 44px !important; padding: 0 !important; border-radius: 14px; color: var(--hijau) !important; background: var(--hijaumuda, #f1f5f9) !important; }
    .buyer-mobile-header .material-icons { font-size: 22px; color: currentColor !important; }
    .buyer-mobile-header .mobile-search-container { display: block; margin-top: 8px; }
    .buyer-mobile-header .search-box .input-group { min-width: 0; min-height: 44px; overflow: hidden; border-radius: 14px; }
    .buyer-mobile-header .search-input { min-width: 0; min-height: 44px; font-size: 16px; }
    .buyer-mobile-header .search-box .btn { width: 48px; flex: 0 0 48px; background: var(--hijau) !important; color: #fff !important; border-radius: 0; }
    .mobile-navbar-spacer.hide-ke-show-block { display: block !important; height: var(--buyer-header-bottom, 116px); }
    .mobile-bottom-nav.hide-ke-show-flex { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 14; align-items: center; justify-content: space-between; gap: 6px; padding: 7px; min-height: 62px; border: 1px solid var(--bs-border-color, #e5e7eb); border-radius: 24px; background: rgba(255,255,255,.98); box-shadow: 0 10px 28px rgba(15,23,42,.12); }
    .mobile-bottom-nav__item { display: flex; flex: 1 1 0; min-width: 0; min-height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 4px; text-align: center; text-decoration: none; border-radius: 18px; font-size: 12px; line-height: 1.3; color: #64748b; }
    .mobile-bottom-nav__item .material-icons { font-size: 22px; }
    .mobile-bottom-nav__item.active { background: var(--hijaumuda, #f1f5f9); color: var(--hijau); }
    /* Reserve space at the end of the document, not before the page content. */
    .mobile-bottom-nav-spacer.hide-ke-show-block { display: none !important; }
    body:has(.mobile-bottom-nav) { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
    .account-shell .account-layout { min-width: 0; grid-template-columns: minmax(0, 1fr); }
    .account-shell .account-mobile-tabs { grid-column: 1 / -1; min-width: 0; max-width: 100%; scrollbar-width: thin; overscroll-behavior-x: contain; scroll-padding-inline: 8px; }
    .account-shell .account-mobile-tabs::-webkit-scrollbar { display: block; height: 4px; }
    .account-shell .account-mobile-tabs a { min-height: 44px; }
    .account-shell .account-content-card { grid-column: 1 / -1; }
    .container-kategori .kategori-arrow { width: 44px; height: 44px; right: 0; top: 32px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .buyer-mobile-header *, .mobile-bottom-nav *, #buyer-account-menu * { transition: none !important; }
}