/*
 * Shop 頁首 UPTI 入口樣式。由 Cloudflare Worker 以外部 <link> 注入，所以全部
 * 選擇器都掛在 upti- 命名空間下，不影響 Shop 自己的版面。
 *
 * 位置（top／height／right）由 shop-nav.js 量測後寫進 inline style；這裡只決定
 * 「量到位置才顯示」，以及那顆入口自己的外觀。
 */

.upti-shop-nav-root {
  position: fixed;
  /* 高於 Shop 頁首的 z-index 99，低於對話框的 2147483000，才不會蓋住對話內容。 */
  z-index: 2147482000;
  display: flex;
  align-items: center;
  /* 還沒量到位置前不顯示；用 visibility 而不是 display，否則量不到寬度。 */
  visibility: hidden;
}

.upti-shop-nav-root[data-nav-ready="true"][data-nav-fit="true"] { visibility: visible; }
/*
 * 空隙不夠（例如窄螢幕）時維持 visibility: hidden，不要用 display: none：
 * display: none 會讓下一次量測量到 0 寬，之後放大視窗就再也回不來了。
 */

.upti-shop-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #1f2933;
  color: #fff;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}
.upti-shop-nav-link:hover { background: #35404b; }
.upti-shop-nav-link:focus-visible { outline: 3px solid #f2b134; outline-offset: 2px; }