/* ============================================================
   KnownBoost V25 - authoritative mobile resilience layer

   This file is intentionally loaded after page-specific styles on every
   public, dashboard, support and admin page. Keep shared narrow-screen
   safeguards here so new pages inherit them automatically.
   ============================================================ */

:root{
  --kb-mobile-gutter:clamp(12px,4vw,18px);
  --kb-mobile-header-height:116px;
}

html,body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;overflow-x:clip}
body{min-height:100vh;min-height:100dvh}
main,.page-content,.dashboard-content,.dashboard-main,.dash-main,.dash-layout{min-width:0;max-width:100%}
img,svg,video,canvas,iframe{max-width:100%}
input,select,textarea,button{max-width:100%}

:where(.grid-2,.grid-3,.grid-4,.stat-grid-3,.stat-grid-4,.market-grid,.boost-grid,.browse-layout,
  .listing-detail-layout,.two-col-sidebar,.checkout-layout,.checkout-shell,.service-detail-grid,
  .service-order-layout,.kb36-form-layout,.kb36-market-layout,.kb36-order-card) > *{min-width:0}

:where(.table-responsive,.table-wrap,.orders-table-wrap,.admin-table-wrap,.data-table-wrap,
  .kb36-admin-table-wrap){width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}

/* The preference dialog is a flex shell at every width. Only its option
   region scrolls, so the help text can never cover or cut off currencies. */
.kb-market-pref-menu{display:flex;flex-direction:column;overflow:hidden!important}
.kb-market-pref-menu[hidden]{display:none!important}
.kb-market-pref-head,.kb-market-pref-note,.kb-market-pref-status{flex:0 0 auto}
.kb-market-pref-grid{flex:1 1 auto;min-height:0;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.kb-market-pref-status:empty{display:none}

html.kb-search-open,html.kb-search-open body,
html.kb-pref-open,body.kb-pref-open,
html.kb-modal-open,body.kb-modal-open{overflow:hidden!important;overscroll-behavior:none}

/* Generic overlays remain inside the visual viewport, including when the
   iOS/Android browser bars or on-screen keyboard change its height. */
.modal-overlay{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.modal-overlay>.modal,.modal-overlay>[role="dialog"]{width:min(100%,560px);max-width:100%!important;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:0!important;overflow:auto;-webkit-overflow-scrolling:touch}

@media(max-width:820px){
  :root{--kb-mobile-header-height:116px}

  /* backdrop-filter creates a containing block for fixed descendants in
     Chromium/WebKit. Disabling it here keeps sheets and popovers attached to
     the viewport instead of trapping them inside the 116px sticky header. */
  .kb-market-topbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none!important}

  /* One predictable two-row header from phone through portrait tablet:
     identity/actions above, a large search target below. */
  .kb-market-topbar-inner{
    width:100%!important;max-width:100%!important;height:auto!important;min-height:var(--kb-mobile-header-height)!important;
    padding:9px max(var(--kb-mobile-gutter),env(safe-area-inset-right)) 10px max(var(--kb-mobile-gutter),env(safe-area-inset-left))!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand utilities" "search search"!important;gap:8px 10px!important
  }
  .kb-market-brand{grid-area:brand!important;min-width:0!important;max-width:100%;overflow:hidden}
  .kb-market-wordmark{min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kb-market-search{grid-area:search!important;width:100%!important;min-width:0!important;height:42px!important;margin:0!important}
  .kb-market-search input{min-width:0!important;width:100%;font-size:16px!important}
  .kb-market-utilities{grid-area:utilities!important;min-width:0!important;max-width:100%;gap:7px!important}
  .kb-market-topbar~.navbar{top:var(--kb-mobile-header-height)!important}

  /* Full-height, safe-area-aware bottom sheet. Explicit top/bottom edges are
     more reliable than competing max-height calculations on mobile Safari. */
  .kb-market-pref-backdrop:not([hidden]){position:fixed!important;inset:0!important}
  .kb-market-pref-menu{
    position:fixed!important;
    top:max(70px,env(safe-area-inset-top))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    left:max(8px,env(safe-area-inset-left))!important;
    width:auto!important;height:auto!important;max-height:none!important;min-height:0!important;
    margin:0!important;border-radius:16px!important;contain:layout paint!important
  }
  .kb-market-pref-grid{max-height:none!important;grid-template-columns:1fr!important}
  .kb-market-pref-grid .kb-market-pref-section{min-width:0!important}
  .kb-market-pref-grid .kb-market-pref-section+.kb-market-pref-section{
    border-left:0!important;border-right:0!important;border-top:1px solid rgba(255,255,255,.08)!important
  }
  .kb-market-pref-grid .kb-market-language-options,
  .kb-market-pref-grid .kb-market-currency-options{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .kb-market-pref-grid .kb-market-pref-option{min-width:0!important;touch-action:manipulation}

  .kb-search-overlay{height:100vh;height:100dvh}
  .kb-search-panel{height:100vh!important;height:100dvh!important;min-height:0!important}
  .kb-search-content{min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

  .profile-menu-wrap .profile-dropdown,
  .kb-market-profile-menu .profile-dropdown{
    top:calc(var(--kb-mobile-header-height) + 4px)!important;
    right:max(8px,env(safe-area-inset-right))!important;
    left:max(8px,env(safe-area-inset-left))!important;
    width:auto!important;max-width:none!important;max-height:calc(100dvh - var(--kb-mobile-header-height) - 16px)!important;
    overflow:auto!important;-webkit-overflow-scrolling:touch
  }

  .container,.container-narrow{width:100%;max-width:100%;padding-left:var(--kb-mobile-gutter)!important;padding-right:var(--kb-mobile-gutter)!important}
  .modal-overlay{align-items:flex-end!important}
  .modal-overlay>.modal,.modal-overlay>[role="dialog"]{max-height:calc(100dvh - 24px);border-radius:18px 18px 12px 12px}

  input,select,textarea{font-size:16px}
  button,.btn-gold,.btn-accent,.btn-ghost,.btn-secondary,.page-btn,.cat-tab{touch-action:manipulation;-webkit-tap-highlight-color:transparent}

  .page-admin .dash-main,.page-dashboard .dash-main,.page-support .dash-main{
    width:100%!important;min-width:0!important;max-width:100%!important;
    padding-left:var(--kb-mobile-gutter)!important;padding-right:var(--kb-mobile-gutter)!important
  }

  :where(.page-admin,.page-dashboard,.page-support) :where(.neu,.neu-lg,.card-sku,.gv-surface){min-width:0;max-width:100%}
}

@media(max-width:520px){
  .grid-2,.grid-3,.grid-4,.stat-grid-3,.stat-grid-4{grid-template-columns:1fr!important}
  .flex-between{max-width:100%}
  .page-header.flex-between,.section-heading.flex-between{align-items:stretch!important}
  .page-header.flex-between>:is(a,button),.section-heading.flex-between>:is(a,button){width:100%;justify-content:center}
}

@media(max-width:380px){
  :root{--kb-mobile-gutter:10px}
  .kb-market-wordmark{font-size:14px!important}
  .kb-market-pref-trigger{padding-inline:6px!important}
  .kb-market-pref-grid .kb-market-language-options,
  .kb-market-pref-grid .kb-market-currency-options{grid-template-columns:1fr!important}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:920px){
  .kb-market-pref-menu{top:max(8px,env(safe-area-inset-top))!important}
  .kb-market-pref-head{min-height:52px!important;padding-block:8px!important}
  .kb-market-pref-note{padding-block:7px!important}
}

@media(prefers-reduced-motion:reduce){
  .kb-market-pref-menu,.kb-search-overlay,.kb-search-panel,.modal-overlay{scroll-behavior:auto!important;transition:none!important}
}