/*
 * NobodyInJP global frontend pagination — canonical owner.
 *
 * Source: member order list pager (user_transaction.dwt + pages.lbi).
 * HTML contract: themes/quwan/library/pages.lbi (.ni-pagination)
 *
 * Loaded last on every frontend page via lib_ni_frontend_page_css.php.
 * Do not duplicate .ni-pagination paint in page-listing.css, components.css,
 * or member-orders.css.
 */

/* Member order pager wrapper — layout only */
html body .ni-member-order-pager{
  display:block;
  width:100%;
  margin:22px 0 0;
  padding:0;
  background:transparent;
  background-image:none;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Root grid shell */
html body .ni-pagination,
html body form.ni-front-pager-form.ni-pagination{
  display:grid;
  justify-items:center;
  gap:12px;
  width:100%;
  max-width:100%;
  margin:20px auto 0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
  box-sizing:border-box;
  text-align:center;
}

html body .ni-pagination__summary{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  color:#6c554d;
  font-size:15px;
  line-height:1;
}

html body .ni-pagination__summary span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 16px;
  border:1px solid rgba(219,195,181,.58);
  border-radius:999px;
  background:#fffdf9;
  color:#6c554d;
  font-size:15px;
  font-weight:700;
  line-height:1;
  box-shadow:none;
}

html body .ni-pagination__summary b{
  color:#4e3932;
  font-weight:800;
}

html body .ni-pagination__list,
html body .ni-pagination__compact,
html body .ni-pagination-control,
html body .ni-pagination #pager{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  background-image:none;
  box-shadow:none;
}

html body .ni-pagination__item:not(.is-condensed-hidden),
html body .ni-pagination__list a:not(.is-condensed-hidden),
html body .ni-pagination__list span:not(.ni-pagination__ellipsis):not(.is-condensed-hidden),
html body .ni-pagination__compact a:not(.is-condensed-hidden),
html body .ni-pagination__compact span:not(.ni-pagination__ellipsis):not(.is-condensed-hidden),
html body .ni-pagination-control a:not(.is-condensed-hidden),
html body .ni-pagination-control span:not(.ni-pagination__ellipsis):not(.is-condensed-hidden),
html body .ni-pagination #pager a:not(.is-condensed-hidden),
html body .ni-pagination #pager span:not(.ni-pagination__ellipsis):not(.is-condensed-hidden),
html body .ni-pagination__select,
html body .ni-pagination__jump-submit,
html body .ni-pagination__jump-unit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  min-height:34px;
  margin:0;
  padding:0 12px;
  border:1px solid rgba(219,195,181,.58);
  border-radius:999px;
  background:#fffdf9;
  background-image:none;
  color:#6c554d;
  font-size:14px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  box-shadow:none;
  transform:none;
  box-sizing:border-box;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease;
}

html body .ni-pagination__item:hover,
html body .ni-pagination__item:focus,
html body .ni-pagination__list a:hover,
html body .ni-pagination__list a:focus,
html body .ni-pagination__compact a:hover,
html body .ni-pagination__compact a:focus,
html body .ni-pagination-control a:hover,
html body .ni-pagination-control a:focus,
html body .ni-pagination #pager a:hover,
html body .ni-pagination #pager a:focus{
  border-color:var(--ni-pagination-hover-border, rgba(207, 113, 123, .46));
  background:var(--ni-pagination-hover-bg, #fff5f6);
  color:var(--ni-pagination-hover-text, #a85a64);
  text-decoration:none;
  transform:none;
  box-shadow:none;
}

/* Current page — coral solid (matches footer subscribe button)
 * Must use !important: legacy style.css forces #pager span / selectPageForm span
 * to flat card background with !important; canonical pages.lbi uses .is-current
 * instead of legacy .page_now.
 */
html body form[name="selectPageForm"] #pager span.is-current,
html body form[name="selectPageForm"] #pager span[aria-current="page"],
html body form[name="selectPageForm"] #pager span.ni-pagination__item--current,
html body form[name="selectPageForm"] span.is-current,
html body form[name="selectPageForm"] span[aria-current="page"],
html body #pager span.is-current,
html body #pager span[aria-current="page"],
html body #pager span.page_now,
html body .pagebar span.page_now,
html body .ni-pagination .ni-pagination__item.is-current,
html body .ni-pagination .ni-pagination__item--current,
html body .ni-pagination .ni-pagination__page.is-current,
html body .ni-pagination .ni-pagination__page[aria-current="page"],
html body .ni-pagination [data-ni-page-number].is-current,
html body .ni-pagination [data-ni-page-number][aria-current="page"],
html body .ni-pagination .page_now,
html body .ni-pagination #pager .page_now,
html body .ni-pagination #pager span.is-current,
html body .ni-pagination #pager span[aria-current="page"]{
  border-color:var(--ni-pagination-current-border, #cf717b) !important;
  background:var(--ni-pagination-current-bg, #cf717b) !important;
  background-color:var(--ni-pagination-current-bg, #cf717b) !important;
  background-image:none !important;
  color:#fff !important;
  cursor:default;
  box-shadow:0 8px 18px var(--ni-pagination-current-shadow, rgba(207, 113, 123, .24)), inset 0 1px 0 rgba(255,255,255,.28) !important;
  text-shadow:0 1px 0 rgba(120, 60, 67, .12) !important;
}

html body form[name="selectPageForm"] #pager span.is-current:hover,
html body form[name="selectPageForm"] #pager span.is-current:focus,
html body form[name="selectPageForm"] #pager span[aria-current="page"]:hover,
html body form[name="selectPageForm"] #pager span[aria-current="page"]:focus,
html body form[name="selectPageForm"] span.is-current:hover,
html body form[name="selectPageForm"] span.is-current:focus,
html body form[name="selectPageForm"] span[aria-current="page"]:hover,
html body form[name="selectPageForm"] span[aria-current="page"]:focus,
html body #pager span.is-current:hover,
html body #pager span.is-current:focus,
html body #pager span[aria-current="page"]:hover,
html body #pager span[aria-current="page"]:focus,
html body .ni-pagination .ni-pagination__item.is-current:hover,
html body .ni-pagination .ni-pagination__item.is-current:focus,
html body .ni-pagination .ni-pagination__item--current:hover,
html body .ni-pagination .ni-pagination__item--current:focus,
html body .ni-pagination .ni-pagination__page.is-current:hover,
html body .ni-pagination .ni-pagination__page.is-current:focus,
html body .ni-pagination .ni-pagination__page[aria-current="page"]:hover,
html body .ni-pagination .ni-pagination__page[aria-current="page"]:focus,
html body .ni-pagination [data-ni-page-number].is-current:hover,
html body .ni-pagination [data-ni-page-number].is-current:focus,
html body .ni-pagination [data-ni-page-number][aria-current="page"]:hover,
html body .ni-pagination [data-ni-page-number][aria-current="page"]:focus,
html body .ni-pagination .page_now:hover,
html body .ni-pagination .page_now:focus,
html body .ni-pagination #pager span.is-current:hover,
html body .ni-pagination #pager span.is-current:focus,
html body .ni-pagination #pager span[aria-current="page"]:hover,
html body .ni-pagination #pager span[aria-current="page"]:focus{
  border-color:var(--ni-pagination-current-border, #cf717b) !important;
  background:var(--ni-pagination-current-bg, #cf717b) !important;
  background-color:var(--ni-pagination-current-bg, #cf717b) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:0 10px 22px var(--ni-pagination-current-shadow, rgba(207, 113, 123, .28)), inset 0 1px 0 rgba(255,255,255,.30) !important;
  transform:none !important;
}

html body .ni-pagination__edge,
html body .ni-pagination__item[data-ni-pagination-edge]{
  width:34px;
  min-width:34px;
  padding:0;
  font-size:14px;
  color:#6c554d;
  background:#fffdf9;
}

html body .ni-pagination__edge.is-disabled,
html body .ni-pagination__item[data-ni-pagination-edge].is-disabled,
html body .ni-pagination__item.is-disabled,
html body .ni-pagination__list .no,
html body .ni-pagination__compact .no{
  opacity:.42;
  pointer-events:none;
  background:#fffdf9;
  color:#b79c91;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

html body .ni-pagination__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:0;
  height:auto;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:15px;
  line-height:1;
}

html body .ni-pagination__jump-input[data-ni-pagination-jump]::-webkit-outer-spin-button,
html body .ni-pagination__jump-input[data-ni-pagination-jump]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

html body .ni-front-pager-form select[data-ni-pagination-select],
html body .ni-pagination__jump-input[data-ni-pagination-jump]{
  cursor:pointer;
}

html body .ni-pagination__jump-input[data-ni-pagination-jump]:focus,
html body .ni-front-pager-form select[data-ni-pagination-select]:focus{
  outline:0;
  border-color:var(--ni-color-coral-line, rgba(207, 113, 123, .48));
  box-shadow:0 0 0 3px rgba(207, 113, 123, .10);
}

html body .ni-pagination .ni-pagination__page.is-condensed-hidden,
html body .ni-pagination #pager a.ni-pagination__page.is-condensed-hidden,
html body .ni-pagination #pager span.ni-pagination__page.is-condensed-hidden,
html body form[name="selectPageForm"].ni-front-pager-form .ni-pagination__page.is-condensed-hidden{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  min-width:0 !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  pointer-events:none !important;
}

html body .ni-pagination .ni-pagination__jump-unit{
  display:none;
}

html body .ni-pagination .ni-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  border:0;
}

/* Ellipsis — no capsule frame (global) */
html body form[name="selectPageForm"] span.ni-pagination__ellipsis,
html body #pager span.ni-pagination__ellipsis,
html body .ni-pagination #pager .ni-pagination__ellipsis,
html body .ni-pagination__list .ni-pagination__ellipsis,
html body .ni-pagination__compact .ni-pagination__ellipsis,
html body .ni-pagination .ni-pagination__ellipsis,
html body .ni-pagination__ellipsis{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:20px !important;
  width:auto !important;
  height:auto !important;
  min-height:34px !important;
  margin:0 !important;
  padding:0 2px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#ad9187 !important;
  font-size:16px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:default !important;
  pointer-events:none !important;
}

html body .ni-pagination__select select,
html body .ni-pagination__jump-input{
  width:auto;
  min-width:76px;
  height:34px;
  margin:0;
  padding:0 28px 0 14px;
  border:1px solid rgba(219,195,181,.58);
  border-radius:999px;
  background:#fffdf9;
  color:#6c554d;
  font-size:14px;
  font-weight:700;
  line-height:34px;
  box-shadow:none;
  box-sizing:border-box;
}

html body .ni-pagination__jump,
html body .ni-pagination__jump-control,
html body .ni-pagination__jump-field{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

html body .ni-pagination__jump-input[data-ni-pagination-jump]{
  width:100px;
  min-width:100px;
  padding:0 13px;
}

html body .ni-pagination__jump-submit{
  width:34px;
  min-width:34px;
  padding:0;
  appearance:none;
  -webkit-appearance:none;
}

html body .ni-pagination__jump-submit::before{
  content:"↑";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  line-height:1;
}

html body .ni-pagination__jump-submit .ni-pagination__icon{
  display:none;
}

/* Legacy pagebar blocks outside .ni-pagination (rare residue) */
html body #pager.pagebar a,
html body #pager.pagebar span,
html body .pagebar a,
html body .pagebar span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  height:34px;
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(219,195,181,.58);
  border-radius:999px;
  background:#fffdf9;
  color:#6c554d;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  box-sizing:border-box;
}

html body #pager .page_now,
html body .pagebar .page_now{
  border-color:var(--ni-pagination-current-border, #cf717b) !important;
  background:var(--ni-pagination-current-bg, #cf717b) !important;
  background-color:var(--ni-pagination-current-bg, #cf717b) !important;
  background-image:none !important;
  color:#fff !important;
  box-shadow:0 8px 18px var(--ni-pagination-current-shadow, rgba(207, 113, 123, .24)), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

@media (max-width:700px){
  /* NI_LISTING_PAGER_OVERFLOW_FIX_20260620
   * Root cause: .ni-pagination__list is a nowrap flex row with many page chips.
   * Without min-width:0 the flex track grows to full chip width and widens the document
   * (category pages with 6+ pages — 新品現貨/特價現貨/VIP 限定).
   * Contain width on the shell; only the pager rail scrolls horizontally.
   */
  html body .ni-pagination,
  html body form.ni-front-pager-form.ni-pagination{
    gap:10px;
    width:100%;
    max-width:100%;
    min-width:0;
    justify-items:stretch;
    overflow-x:clip;
    box-sizing:border-box;
  }

  html body .ni-pagination__summary{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }

  html body .ni-pagination__list,
  html body .ni-pagination__compact,
  html body .ni-pagination-control,
  html body .ni-pagination #pager{
    gap:8px;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow-x:clip;
    overflow-y:hidden;
    justify-content:center;
    flex-wrap:wrap;
    padding:0;
    box-sizing:border-box;
  }

  html body .ni-pagination [data-ni-pagination-edge="first"],
  html body .ni-pagination [data-ni-pagination-edge="last"]{
    display:none !important;
  }

  html body .ni-pagination__list::-webkit-scrollbar,
  html body .ni-pagination__compact::-webkit-scrollbar,
  html body .ni-pagination-control::-webkit-scrollbar,
  html body .ni-pagination #pager::-webkit-scrollbar{
    display:none;
  }

  html body .ni-pagination [data-ni-pagination-edge="first"].is-condensed-hidden,
  html body .ni-pagination [data-ni-pagination-edge="last"].is-condensed-hidden{
    display:none !important;
  }

  html body .ni-pagination__summary span{
    min-height:32px;
    padding:0 13px;
    font-size:14px;
  }

  html body .ni-pagination__jump,
  html body .ni-pagination__jump-control{
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
}

/* NI_MEMBER_WALLET_LEDGER_ALIGNMENT_FINAL_20260620
 * Late repaint owner for account_detail ledger stack heads.
 * Beats legacy style.css h3 { text-align:right; background }.
 * Kicker 橫線對齊由 member-title.css inline-flex + ::before 負責，不可設 display:block。
 */
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack .ni-member-wallet-card__title,
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack h3,
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack .ni-member-wallet-current{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  text-align:left !important;
  justify-self:start !important;
  align-self:flex-start !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  gap:4px !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack .ni-member-wallet-card__title,
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack h3{
  margin:2px 0 0 !important;
  padding:0 !important;
  border:0 !important;
  border-bottom:0 !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1.4 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  float:none !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] .ni-member-wallet-card__head--ledger-stack .ni-member-wallet-current{
  width:auto !important;
  margin-top:4px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-wallet-row,
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-record-card.ni-member-wallet-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:
    "ledger-title ledger-amount"
    "ledger-date ledger-date"
    "ledger-code ledger-code" !important;
  column-gap:12px !important;
  row-gap:4px !important;
  align-items:start !important;
  justify-items:start !important;
  text-align:left !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-wallet-row .ni-member-record-card__main{
  display:contents !important;
  width:auto !important;
  min-width:0 !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-wallet-row .ni-member-record-card__title{
  grid-area:ledger-title !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-wallet-row .ni-member-record-card__label{
  grid-area:ledger-date !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-wallet-row .ni-member-record-card__code{
  grid-area:ledger-code !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-record-card__meta--wallet-amount{
  display:flex !important;
  grid-area:ledger-amount !important;
  align-self:start !important;
  justify-self:end !important;
  justify-content:flex-end !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-record-card__meta--wallet-amount span,
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-record-card__meta--wallet-amount em,
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-record-card__meta--wallet-amount strong{
  display:inline !important;
  width:auto !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  text-align:right !important;
  white-space:nowrap !important;
}
html body.ni-page-member[data-ni-member-action="account_detail"] :is(
  [data-ni-member-wallet-ledger-list="ledger-detail"],
  [data-ni-member-wallet-ledger-list="points-detail"]
) .ni-member-record-card__meta--wallet-amount span{
  display:inline-flex !important;
  align-items:baseline !important;
  justify-content:flex-end !important;
  gap:4px !important;
}
@media screen and (max-width:700px){
  html body.ni-page-member[data-ni-member-action="account_detail"] :is(
    [data-ni-member-wallet-ledger-list="ledger-detail"],
    [data-ni-member-wallet-ledger-list="points-detail"]
  ) .ni-member-wallet-row,
  html body.ni-page-member[data-ni-member-action="account_detail"] :is(
    [data-ni-member-wallet-ledger-list="ledger-detail"],
    [data-ni-member-wallet-ledger-list="points-detail"]
  ) .ni-member-record-card.ni-member-wallet-row{
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-areas:
      "ledger-title ledger-title"
      "ledger-date ledger-date"
      "ledger-code ledger-amount" !important;
    column-gap:10px !important;
    row-gap:4px !important;
  }
  html body.ni-page-member[data-ni-member-action="account_detail"] :is(
    [data-ni-member-wallet-ledger-list="ledger-detail"],
    [data-ni-member-wallet-ledger-list="points-detail"]
  ) .ni-member-record-card__meta--wallet-amount{
    justify-self:end !important;
    justify-content:flex-end !important;
    width:auto !important;
  }
  html body.ni-page-member[data-ni-member-action="account_detail"] :is(
    [data-ni-member-wallet-ledger-list="ledger-detail"],
    [data-ni-member-wallet-ledger-list="points-detail"]
  ) .ni-member-record-card__meta--wallet-amount span{
    text-align:right !important;
    justify-items:end !important;
  }
}

/* NI_GLOBAL_MOBILE_SHELL_FINAL_GUARD_20260620
 * Site-wide late owner: every frontend page appends frontend-pagination.css last.
 * Re-assert the canonical <=700px mobile header contract after page-specific CSS.
 */
@media screen and (max-width:700px){
  html body .ni-premium-utilbar,
  html body .ni-premium-brandrow{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }
  html body .ni-mobile-luxe-topbar{
    display:grid !important;
    visibility:visible !important;
  }
  html body .block,
  html body .block.clearfix,
  html body .block_s,
  html body #mainNav,
  html body #mainNav.clearfix{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box;
  }

  /* NI_MOBILE_MAINNAV_SINGLE_ROW_CANONICAL
   * Root cause: legacy-bridge mobile #mainNav uses flex + overflow-x:auto and pill min-width:72px.
   * Six top-level tabs exceed 375px and force horizontal scroll / page misalignment.
   * Kept: one underline-tab row. Retired: nav rail horizontal scroll on <=700px.
   */
  html body #mainNav,
  html body #mainNav.clearfix,
  html body.ni-home-index #mainNav,
  html body.ni-home-index #mainNav.clearfix{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    gap:2px !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 4px !important;
    overflow-x:hidden !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:auto !important;
    scrollbar-width:none !important;
    box-sizing:border-box !important;
  }

  html body #mainNav .u1,
  html body #mainNav #cur,
  html body.ni-home-index #mainNav .u1,
  html body.ni-home-index #mainNav #cur{
    flex:1 1 0 !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:center !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:transparent !important;
    box-sizing:border-box !important;
  }

  html body #mainNav .a1,
  html body #mainNav .home_a,
  html body #mainNav #cur .a1,
  html body #mainNav .u1_over .a1,
  html body #mainNav .u1:hover .a1,
  html body.ni-home-index #mainNav .a1,
  html body.ni-home-index #mainNav .home_a,
  html body.ni-home-index #mainNav #cur .a1,
  html body.ni-home-index #mainNav .u1_over .a1,
  html body.ni-home-index #mainNav .u1:hover .a1{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:44px !important;
    min-height:44px !important;
    line-height:1.15 !important;
    margin:0 !important;
    padding:0 2px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    color:#7a6860 !important;
    font:700 clamp(10px,2.85vw,12px)/1.15 "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    text-align:center !important;
    box-sizing:border-box !important;
  }

  html body #mainNav .a1:after,
  html body.ni-home-index #mainNav .a1:after{
    left:4px !important;
    right:4px !important;
    bottom:6px !important;
  }

  html body #mainNav #cur .a1,
  html body #mainNav .u1_over .a1,
  html body #mainNav .u1:hover .a1,
  html body.ni-home-index #mainNav #cur .a1,
  html body.ni-home-index #mainNav .u1_over .a1,
  html body.ni-home-index #mainNav .u1:hover .a1{
    color:#b7757c !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }
}

/* NI_CARTBAR_NAV_OVERFLOW_GUARD
 * Layout-only: frontend-pagination owns late #mainNav overflow:hidden for the tab rail.
 * Fixed cart islands must not be clipped; visual owner is components.css NI_CARTBAR_MOBILE_CANONICAL.
 */
@media screen and (max-width:700px){
  html body #mainNav:has(.meun_float.ni-cartbar),
  html body #mainNav:has(.meun_float[data-ni-cartbar]),
  html body #mainNav.clearfix:has(.meun_float.ni-cartbar),
  html body #mainNav.clearfix:has(.meun_float[data-ni-cartbar]){
    overflow:visible !important;
    overflow-x:visible !important;
    overflow-y:visible !important;
    contain:none !important;
  }
}

/* NI_MEMBER_BUTTON_FONT_CANONICAL
 * Late repaint owner — 全站最後載入，覆蓋 member-orders / page-member 等 font-weight:800 殘留。
 * 字體與 components.css .ni-button / 分類頁 token 對齊。
 */
html body.ni-page-member :is(
  .ni-member-submit,
  .ni-member-dashboard__button,
  .ni-member-dashboard-card__more,
  .ni-member-soft-link,
  .ni-member-order-card__primary,
  .ni-member-order-card__secondary,
  .ni-member-order-card__handler a,
  .ni-member-order-card__handler input,
  .ni-member-order-card__handler button,
  .ni-member-collection-button,
  .ni-member-collection-link,
  .ni-member-account-pay-button input,
  .ni-member-account-pay-button button,
  .ni-member-account-pay-button a,
  .ni-member-record-card__actions a,
  .ni-member-record-card__cancel,
  .ni-member-pending-alert__button,
  .ni-member-dashboard-alert a,
  .ni-member-dashboard-empty a,
  .ni-member-recent-order__side a,
  .ni-member-order-payment-submit,
  .ni-member-affiliate-copy,
  .ni-order-payment-desc-trigger,
  .ni-order-payment-submit,
  .ni-member-secondary-tab,
  .ni-member-order-tabs__item,
  .ni-member-account-tabs__item,
  .ni-member-wallet-tab,
  [data-ni-member-wallet-primary-tabs] a,
  [data-ni-member-order-modern] .ni-member-order-card__handler a,
  [data-ni-member-order-modern] .ni-member-order-card__handler input,
  [data-ni-member-order-modern] .ni-member-order-card__handler button
),
html body.ni-page-member :is(.ni-passport-submit),
html body.ni-page-member-auth :is(.ni-passport-submit){
  font-family:var(--ni-font-button, var(--ni-font-body)) !important;
  font-weight:var(--ni-button-font-weight, 700) !important;
  letter-spacing:var(--ni-button-letter-spacing, .03em) !important;
}
html body.ni-page-member[data-ni-member-action="order_detail"] .ni-order-payment-online :is(a,input[type="submit"],input[type="button"],button){
  font-family:var(--ni-font-button, var(--ni-font-body)) !important;
  font-weight:var(--ni-button-font-weight, 700) !important;
  letter-spacing:var(--ni-button-letter-spacing, .03em) !important;
}
html body.ni-page-member.ni-member-page--dashboard .ni-member-pending-alert__body strong{
  font-family:var(--ni-font-heading) !important;
  font-weight:var(--ni-button-font-weight, 700) !important;
  letter-spacing:var(--ni-button-letter-spacing, .03em) !important;
}