/* VitalMen — App-feel base layer (loaded AFTER store.css on the 4 storefront pages).
   Only does what makes the H5 behave like a native app; all visual tokens stay in
   store.css so the design system keeps a single source of truth.

   1) safe-area (notch / home indicator)
   2) no browser affordances: tap highlight, long-press menu, text selection, zoom
   3) press feedback on every tappable thing
   4) no rubber-band / scroll chaining, hidden scrollbars
   5) iOS: 16px inputs so focusing a field never zooms the page

   Not loaded by admin-dashboard.html on purpose: the ops console is a desktop tool
   where selecting text and long-press menus are legitimate. */

:root{
  --sai-top: env(safe-area-inset-top, 0px);
  --sai-bottom: env(safe-area-inset-bottom, 0px);
  --sai-left: env(safe-area-inset-left, 0px);
  --sai-right: env(safe-area-inset-right, 0px);
}

/* ---------- 1. page / safe area ---------- */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  background: var(--surface);
}
body{
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-left: var(--sai-left);
  padding-right: var(--sai-right);
}

/* sticky header clears the notch in an immersive/standalone shell */
.site-header{ padding-top: var(--sai-top); }
/* sticky side rails follow the taller viewport-safe header */
.order-summary, .detail-gallery{ top: calc(78px + var(--sai-top)); }

/* floating UI keeps clear of the home indicator */
.toast-wrap{ bottom: calc(22px + var(--sai-bottom)); }
.search-overlay{ padding-bottom: var(--sai-bottom); }
.drawer{ padding-bottom: var(--sai-bottom); }
.search-overlay .search-panel, .drawer-nav{ scroll-padding-bottom: var(--sai-bottom); }

/* ---------- 2. no browser affordances ---------- */
body, button, .btn, [data-href], .product-card{ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"]{ -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img, svg{ -webkit-user-drag: none; user-select: none; }
button, .btn, [data-href], a, label, select{ touch-action: manipulation; }

/* ---------- 3. press feedback (added on top of the design's own :active rules) ---------- */
button:not(:disabled):active, [data-href]:active, .product-card:active{ transform: scale(.98); }
/* small round controls keep their snappier 6% squeeze (needs the extra type
   selector to outrank the generic rule above) */
button.icon-btn:active, button.add-btn:active, button.cat-chip:active{ transform: scale(.94); }
@media (prefers-reduced-motion: no-preference){
  button, [data-href], .product-card{ transition: transform 90ms ease-out; }
}

/* ---------- 4. scroll behaviour ---------- */
html, body{ scrollbar-width: none; }
::-webkit-scrollbar{ width: 0; height: 0; }
/* keep momentum scrolling inside panes (filter chips, tables, drawers) */
.drawer-nav, .search-panel, .cat-chips, .summary-items{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ---------- 5. iOS: never zoom on focus ---------- */
@supports (-webkit-touch-callout: none){
  input, textarea, select{ font-size: 16px; }
  /* the design uses 13-14px inside small fields; 16px only shifts those, not the layout */
}

/* ---------- 6. standalone / in-app shell ---------- */
@media (display-mode: standalone){
  html{ background: #fff; }
}
body.in-app{ --sai-top: max(var(--sai-top), 8px); }

/* print sheets must stay 1:1 with the screen design */
@media print{
  body{ padding-left: 0; padding-right: 0; }
  .site-header{ padding-top: 0; }
  button, [data-href]{ transform: none !important; }
}

/* ---------- 7. bottom tab bar (mobile widths; hidden on desktop + print) ---------- */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:var(--sai-bottom);padding-left:var(--sai-left);padding-right:var(--sai-right);
}
.tabbar .tb-item{
  flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:56px;border:0;background:none;color:var(--ink-3);font:inherit;font-size:10.5px;font-weight:700;
  letter-spacing:.02em;cursor:pointer;-webkit-tap-highlight-color:transparent
}
.tabbar .tb-item svg{width:22px;height:22px}
.tabbar .tb-item.is-active{color:var(--brand)}
.tabbar .tb-item .tb-badge{
  position:absolute;top:5px;left:calc(50% + 7px);min-width:16px;height:16px;padding:0 4px;border-radius:9px;
  background:var(--brand);color:#fff;font-size:10px;font-weight:800;display:none;place-items:center
}
.tabbar .tb-item .tb-badge.show{display:grid}
body.has-tabbar{padding-bottom:calc(56px + var(--sai-bottom))}
@media (max-width:960px){ .tabbar{display:flex} }
@media (min-width:961px){ body.has-tabbar{padding-bottom:0} }

/* ---------- 8. page transitions (multi-page origin: leave fade + enter slide) ---------- */
.vm-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--brand,#0F2131);z-index:400;opacity:0;transition:transform 240ms ease-out,opacity 200ms ease}
.vm-progress.on{opacity:1;transform:scaleX(.72)}
@keyframes vmEnterFwd{from{opacity:0;transform:translate3d(12%,0,0)}to{opacity:1;transform:none}}
@keyframes vmEnterBack{from{opacity:0;transform:translate3d(-8%,0,0)}to{opacity:1;transform:none}}
@keyframes vmLeaveFade{to{opacity:0}}
html.vm-enter-fwd body{animation:vmEnterFwd 220ms cubic-bezier(.2,.8,.2,1) both}
html.vm-enter-back body{animation:vmEnterBack 200ms cubic-bezier(.2,.8,.2,1) both}
html.vm-leaving body{animation:vmLeaveFade 130ms ease-in both;pointer-events:none}
html.vm-leaving .tabbar{opacity:.6}
@media (prefers-reduced-motion: reduce){
  html.vm-enter-fwd body,html.vm-enter-back body,html.vm-leaving body{animation:none}
  .vm-progress{transition:none}
}

@media print{
  .tabbar{display:none!important}
  body.has-tabbar{padding-bottom:0}
  .vm-progress{display:none}
}

/* ---------- 9. header on scroll ---------- */
.site-header.is-scrolled{
  background:rgba(255,255,255,.985);
  box-shadow:0 6px 18px rgba(11,42,58,.08);
  border-bottom-color:transparent;
}

/* ---------- 10. offline / weak network banner (above the tab bar) ---------- */
.vm-net{
  position:fixed;left:0;right:0;bottom:calc(56px + var(--sai-bottom));z-index:320;
  margin:0 auto;max-width:520px;width:calc(100% - 24px);
  background:#7A4E05;color:#fff;border-radius:11px;padding:9px 14px;
  font-size:12.5px;font-weight:700;line-height:1.45;text-align:center;
  box-shadow:0 10px 26px rgba(9,20,32,.18);
  opacity:0;transform:translateY(10px);transition:opacity 200ms ease,transform 200ms ease;
  pointer-events:none
}
.vm-net.on{opacity:1;transform:none}
@media (min-width:961px){ .vm-net{bottom:calc(16px + var(--sai-bottom))} }
@media print{ .vm-net{display:none} }
.linklike{
  background:none;border:0;padding:0;margin:0;font:inherit;color:var(--brand-2);
  font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px
}