/* NI_LISTING_COMMERCE_CANONICAL
 * Canonical product-listing visual system for category/search/brand/brand-list.
 * Kept implementation: ni-* listing/page/card/sidebar components in this file.
 * Retired implementation: fragmented extracted blocks and listing-specific legacy bridge overrides.
 */

html body.ni-page-category,
html body.ni-page-search,
html body.ni-page-brand{
  background:var(--ni-color-page, #fdfbf8);
  color:var(--ni-color-text, #5d514b);
}

html body .ni-listing-shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  width:min(var(--ni-page-max,960px),calc(100% - var(--ni-page-shell-edge, 32px)));
  max-width:var(--ni-page-max,960px);
  margin:0 auto 34px;
  padding:0;
  background:transparent;
  box-sizing:border-box;
  overflow:visible;
}

/* NI_CONVERGENCE: listing breadcrumbs span the shell grid; inset owner is components.css. */
html body .ni-listing-shell > .ni-breadcrumb-wrap,
html body .ni-listing-shell > .ni-global-breadcrumb-wrap{
  grid-column:1 / -1;
}

html body.ni-page-category .ni-listing-shell > .ni-listing-hero{
  grid-column:1 / -1;
  width:100%;
  max-width:100%;
}

html body .ni-listing-sidebar,
html body .ni-listing-main{
  min-width:0;
  float:none;
  box-sizing:border-box;
}

html body .ni-listing-main{
  display:flex;
  flex-direction:column;
  gap:16px;
  width:100%;
}

html body .ni-listing-sidebar{
  position:fixed;
  z-index:2147482600;
  top:max(12px,env(safe-area-inset-top));
  bottom:max(12px,env(safe-area-inset-bottom));
  left:12px;
  display:block!important;
  width:min(88vw,360px)!important;
  max-width:360px!important;
  max-height:none;
  margin:0!important;
  padding:18px 16px 26px!important;
  overflow-y:auto;
  float:none!important;
  border:1px solid rgba(222,200,188,.70);
  border-radius:26px;
  background:rgba(253,251,248,.98);
  box-shadow:18px 0 42px rgba(80,55,45,.18), 0 18px 44px rgba(120,90,80,.12);
  transform:translateX(calc(-100% - 34px));
  transition:transform .22s ease;
  box-sizing:border-box;
  -webkit-overflow-scrolling:touch;
}

/* Listing hero */
html body .ni-listing-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  min-height:118px;
  margin:4px 0 16px;
  padding:24px 28px;
  overflow:hidden;
  border:1px solid rgba(222,200,188,.58);
  border-radius:30px;
  background:
    radial-gradient(circle at 14% -18%,rgba(255,244,236,.92) 0%,rgba(255,244,236,0) 48%),
    linear-gradient(180deg,rgba(255,253,249,.96) 0%,rgba(251,244,238,.82) 100%);
  box-shadow:0 12px 30px rgba(120,90,80,.075);
  box-sizing:border-box;
}

html body .ni-listing-hero::before,
html body .ni-listing-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
}

html body .ni-listing-hero::before{
  width:156px;
  height:156px;
  right:-76px;
  top:-88px;
  background:rgba(215,160,157,.10);
}

html body .ni-listing-hero::after{
  width:118px;
  height:118px;
  right:54px;
  bottom:-92px;
  background:rgba(219,195,181,.13);
}

html body .ni-listing-hero__body{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1 1 auto;
  width:100%;
  max-width:none;
  min-width:0;
  text-align:left;
}

html body .ni-listing-hero__header{
  width:100%;
  max-width:none;
  text-align:left;
}

/* NI_LISTING_HERO_TEXT_ALIGN — 列表頁 hero（Search Result / 標題 / 副文）全寬度靠左 */
html body .ni-listing-hero__kicker,
html body .ni-listing-hero__title,
html body .ni-listing-hero__text{
  width:100%;
  max-width:none;
  text-align:left;
  text-align-last:left;
}

html body .ni-listing-hero__kicker{
  justify-content:flex-start;
  width:auto;
  max-width:100%;
}

html body .ni-listing-hero__kicker,
html body .ni-section-kicker,
.ni-listing-toolbar__eyebrow,
.ni-sidebar-card__eyebrow,
.ni-empty-state__kicker{
  margin:0;
}

html body .ni-listing-hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
}

html body .ni-listing-hero__kicker::before{
  content:"";
  display:inline-block;
  width:24px;
  height:1px;
  border-radius:999px;
}

html body .ni-listing-hero__title,
html body .ni-section-title{
  margin:0;
  color:var(--ni-color-heading,#4e372f);
  font-family:var(--ni-font-heading,"Noto Serif TC","PMingLiU",serif);
  font-weight:var(--ni-page-hero-title-weight,700);
  font-synthesis:none;
  line-height:var(--ni-page-hero-title-line-height,1.24);
  letter-spacing:var(--ni-page-hero-title-letter-spacing,.045em);
}

html body .ni-listing-hero__title{
  font-size:var(--ni-page-hero-title-size, clamp(24px, 3vw, 34px));
}

html body .ni-listing-hero__text{
  max-width:620px;
  margin:10px 0 0;
  color:var(--ni-color-muted,#8a766f);
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  font-size:14px;
  line-height:1.76;
  letter-spacing:.025em;
}

html body .ni-listing-hero__meta{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:6px;
  min-height:34px;
  padding:7px 12px;
  border:1px solid rgba(215,160,157,.30);
  border-radius:999px;
  background:rgba(255,250,246,.72);
  color:#a76468;
  white-space:nowrap;
  box-sizing:border-box;
}

html body .ni-listing-hero__meta-label{
  display:none;
}

html body .ni-listing-hero__meta-value{
  color:var(--ni-color-rose-cta,#9b6463);
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  font-size:18px;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
}

html body .ni-listing-hero__meta-unit{
  color:#b58e86;
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:.04em;
  text-transform:none;
}

html body .ni-brand-hero{
  align-items:center;
}

html body .ni-brand-hero__logo{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:108px;
  min-height:76px;
  padding:12px;
  border:1px solid rgba(219,195,181,.48);
  border-radius:22px;
  background:rgba(255,250,246,.78);
  box-sizing:border-box;
}

html body .ni-brand-hero__logo img{
  display:block;
  max-width:100%;
  max-height:52px;
  object-fit:contain;
}

/* Minimal page panels and search */
html body .ni-listing-panel{
  width:100%;
  margin:0 0 18px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
}

html body .ni-search-advanced-panel{
  padding:18px;
  border:1px solid rgba(222,200,188,.48);
  border-radius:24px;
  background:rgba(255,253,249,.76);
  box-shadow:0 10px 24px rgba(120,90,80,.055);
}

html body .ni-section-head{
  margin:0 0 14px;
}

html body .ni-section-title{
  font-size:23px;
}

html body .ni-search-inline-form{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:520px;
  margin-top:12px;
}

html body .ni-search-inline-form input[type="text"],
html body .ni-search-inline-form input:not([type]){
  flex:1 1 auto;
  min-width:0;
  height:42px;
  padding:0 16px;
  border:1px solid rgba(219,195,181,.62);
  border-radius:999px;
  background:var(--ni-color-surface,#fffdf9);
  color:var(--ni-color-text,#5d514b);
  font-size:14px;
  box-sizing:border-box;
}

html body .ni-search-inline-form .ni-form-field{
  flex:1 1 auto;
  margin:0;
}

html body .ni-search-inline-form .ni-form-field span{
  display:block;
  margin:0 0 6px;
  color:var(--ni-color-muted,#8a766f);
  font-weight:800;
}

/* Toolbar, sorting and filters */
.ni-listing-toolbar{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:14px;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0 0 14px;
  padding:14px 16px;
  border:1px solid rgba(222,200,188,.46);
  border-radius:24px;
  background:rgba(255,253,249,.78);
  box-shadow:0 8px 22px rgba(120,90,80,.045);
  box-sizing:border-box;
  overflow-x:clip;
}

.ni-listing-toolbar__summary{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  min-width:0;
  margin-right:auto;
  color:var(--ni-color-text,#5d514b);
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  text-align:left;
}

.ni-listing-toolbar__summary strong{
  color:var(--ni-color-text,#5d514b);
  font-size:15px;
  line-height:1.25;
  letter-spacing:.04em;
}

.ni-listing-toolbar__helper{
  display:block;
  margin-top:2px;
  color:#9d8981;
  font-size:12px;
  font-weight:600;
  line-height:1.45;
  letter-spacing:.03em;
}

.ni-listing-toolbar__controls{
  display:flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  min-width:0;
  max-width:100%;
  margin-left:auto;
}

.ni-listing-mobile-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  gap:0;
  min-width:0;
  margin:0;
  padding:0;
}

.ni-listing-filter-menu + .ni-listing-sort{
  margin-left:2px;
}

.ni-listing-filter-menu{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  min-height:32px;
  margin:0;
  padding:0;
  color:#6d5a53;
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  box-sizing:border-box;
}

.ni-listing-filter-menu__summary{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:32px;
  margin:0;
  padding:0 7px 0 2px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#6d5a53;
  font-size:12px;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  list-style:none;
  white-space:nowrap;
  cursor:pointer;
  box-sizing:border-box;
  transition:color .16s ease,transform .14s ease;
}

.ni-listing-filter-menu__summary::-webkit-details-marker{
  display:none;
}

.ni-listing-filter-menu__summary:hover,
.ni-listing-filter-menu__summary:focus,
.ni-listing-filter-menu[open] .ni-listing-filter-menu__summary{
  color:#a76468;
  text-decoration:none;
  outline:none;
}

.ni-listing-filter-menu__icon{
  position:relative;
  display:inline-block;
  width:15px;
  height:12px;
  flex:0 0 15px;
}

.ni-listing-filter-menu__icon::before,
.ni-listing-filter-menu__icon::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  border-radius:999px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor;
  opacity:.78;
}

.ni-listing-filter-menu__icon::before{
  top:1px;
  width:15px;
}

.ni-listing-filter-menu__icon::after{
  top:1px;
  left:4px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ni-color-surface,#fffdf9);
  border:2px solid currentColor;
  box-shadow:7px 5px 0 -1px var(--ni-color-surface,#fffdf9),7px 5px 0 1px currentColor;
}

.ni-listing-filter-menu__label::after{
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  margin-left:7px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  opacity:.68;
  transition:transform .16s ease;
}

.ni-listing-filter-menu[open] .ni-listing-filter-menu__label::after{
  transform:translateY(1px) rotate(-135deg);
}

.ni-listing-filter-menu__body{
  position:absolute;
  z-index:90;
  top:calc(100% + 12px);
  right:0;
  left:auto;
  width:min(480px,calc(100vw - 32px));
  max-height:min(64vh,520px);
  overflow:auto;
  padding:14px;
  border:1px solid rgba(222,200,188,.52);
  border-radius:22px;
  background:rgba(255,253,249,.98);
  box-shadow:0 18px 42px rgba(82,55,45,.16),0 8px 20px rgba(120,90,80,.08);
  box-sizing:border-box;
}

.ni-listing-filter-menu[open] .ni-listing-filter-menu__body{
  animation:niListingFilterMenuIn .16s ease both;
}

@keyframes niListingFilterMenuIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

.ni-listing-sort{
  display:flex;
  flex:0 1 auto;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  min-width:0;
  max-width:100%;
  margin:0;
  padding:0;
  overflow-x:auto;
  scrollbar-width:none;
}

.ni-listing-sort[data-ni-listing-sort]{
  scroll-margin-top:84px;
}

.ni-listing-sort::-webkit-scrollbar{
  display:none;
}

.ni-listing-sort__item,
.ni-listing-sort__submit,
.ni-listing-sort select{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border:1px solid rgba(219,195,181,.44);
  border-radius:999px;
  background:rgba(255,253,249,.78);
  color:#6d5a53;
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  font-size:12px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .14s ease,box-shadow .16s ease;
}

.ni-listing-sort select{
  padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,#b98a83 50%),linear-gradient(135deg,#b98a83 50%,transparent 50%);
  background-position:calc(100% - 16px) 13px,calc(100% - 11px) 13px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.ni-listing-sort__item:hover,
.ni-listing-sort__item:focus,
.ni-listing-sort__submit:hover,
.ni-listing-sort__submit:focus{
  border-color:rgba(215,160,157,.62);
  background:#fff7f3;
  color:#a76468;
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(147,111,101,.08);
}

.ni-listing-sort__item.is-active{
  border-color:rgba(201,110,116,.36);
  background:rgba(248,229,226,.68);
  color:#9b6463;
}

.ni-listing-mobile-action,
button.ni-listing-mobile-action,
a.ni-listing-mobile-action{
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(201,110,116,.32);
  border-radius:999px;
  background:rgba(255,248,244,.82);
  color:#9b6463;
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  text-decoration:none;
  cursor:pointer;
  box-sizing:border-box;
}

.ni-listing-explore-toggle::before{
  content:"☰";
  display:inline-block;
  margin-right:6px;
  font-size:12px;
  line-height:1;
}

.ni-listing-mobile-action:hover,
.ni-listing-mobile-action:focus,
button.ni-listing-mobile-action:hover,
button.ni-listing-mobile-action:focus,
a.ni-listing-mobile-action:hover,
a.ni-listing-mobile-action:focus{
  border-color:rgba(215,160,157,.62);
  background:#fff7f3;
  color:#a76468;
  text-decoration:none;
  box-shadow:0 8px 18px rgba(147,111,101,.08);
}

.ni-listing-filter-panel,
.ni-listing-filters{
  margin:0 0 14px;
  overflow:hidden;
  border:1px solid rgba(222,200,188,.44);
  border-radius:22px;
  background:rgba(255,253,249,.70);
  box-shadow:0 8px 18px rgba(120,90,80,.04);
  box-sizing:border-box;
}

.ni-listing-filter-panel__toggle{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:50px;
  margin:0;
  padding:11px 14px;
  border:0;
  border-bottom:1px solid rgba(219,195,181,.40);
  background:rgba(255,250,246,.66);
  color:#9b6463;
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  text-align:left;
  cursor:pointer;
  box-sizing:border-box;
}

.ni-listing-filter-panel__toggle strong{
  display:block;
  color:#9b6463;
  font-size:15px;
  font-weight:900;
  letter-spacing:.04em;
}

.ni-listing-filter-panel__kicker{
  display:block;
  margin:0;
}

.ni-listing-filter-panel__chevron,
.ni-sidebar-card__chevron{
  flex:0 0 auto;
  width:9px;
  height:9px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  opacity:.72;
  transition:transform .16s ease;
}

.ni-listing-filter-panel__toggle[aria-expanded="false"] .ni-listing-filter-panel__chevron{
  transform:rotate(-45deg);
}

.ni-listing-filter-panel__body,
.ni-listing-filters__body,
.ni-listing-filter-menu__body{
  padding:13px 14px;
}

.ni-listing-filter-group{
  margin:0 0 13px;
}

.ni-listing-filter-group:last-child{
  margin-bottom:0;
}

.ni-listing-filter-label{
  display:block;
  margin:0 0 8px;
  color:#665650;
  font-size:13px;
  font-weight:900;
  letter-spacing:.03em;
}

.ni-listing-filter-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}

.ni-facet-chip,
a.ni-facet-chip,
span.ni-facet-chip{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(219,195,181,.46);
  border-radius:999px;
  background:rgba(255,253,249,.76);
  color:#7a665f;
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}

.ni-facet-chip:hover,
a.ni-facet-chip:hover,
.ni-facet-chip.is-active,
.ni-facet-chip.is-clear{
  border-color:rgba(215,160,157,.54);
  background:rgba(248,229,226,.62);
  color:#9b6463;
  text-decoration:none;
}

/* Sidebar */
.ni-sidebar-card{
  width:100%;
  margin:0 0 14px;
  padding:14px 13px;
  border:1px solid rgba(222,200,188,.36);
  border-radius:22px;
  background:rgba(255,253,249,.50);
  box-shadow:0 6px 18px rgba(120,90,80,.034);
  box-sizing:border-box;
  color:var(--ni-color-text,#5d514b);
}

.ni-listing-sidebar > .ni-sidebar-card:last-child{
  margin-bottom:0;
}

.ni-sidebar-card__head,
.ni-sidebar-card__toggle{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  box-sizing:border-box;
}

.ni-sidebar-card__toggle{
  position:relative;
  cursor:pointer;
  padding-right:26px;
}

.ni-sidebar-card__eyebrow{
  display:block;
  margin:0 0 5px;
}

.ni-sidebar-card__title{
  display:block;
  margin:0;
  color:var(--ni-color-heading,#4e372f);
  font-family:var(--ni-font-heading,"Noto Serif TC","PMingLiU",serif);
  font-size:15px;
  font-weight:900;
  line-height:1.35;
  letter-spacing:.04em;
}

.ni-sidebar-card__title a,
.ni-sidebar-category-group__title a,
.ni-sidebar-product__title,
.ni-history-product__title{
  color:inherit;
  text-decoration:none;
}

.ni-sidebar-card__title a:hover,
.ni-sidebar-category-group__title a:hover,
.ni-sidebar-product__title:hover,
.ni-history-product__title:hover{
  color:#b66e72;
  text-decoration:none;
}

.ni-sidebar-card__hint{
  display:block;
  margin:5px 0 0;
  color:#9a837a;
  font-size:12px;
  font-weight:500;
  line-height:1.55;
  letter-spacing:.02em;
}

.ni-sidebar-card__chevron{
  position:absolute;
  top:19px;
  right:2px;
}

.ni-sidebar-card.is-open .ni-sidebar-card__chevron{
  transform:rotate(225deg);
}

.ni-sidebar-card__body{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(219,195,181,.34);
}

.ni-sidebar-card__body[hidden]{
  display:none!important;
}

.ni-sidebar-category-tree{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:12px;
}

.ni-sidebar-category-group{
  padding:7px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-sizing:border-box;
}

.ni-sidebar-category-group + .ni-sidebar-category-group{
  border-top:1px solid rgba(219,195,181,.30);
}

.ni-sidebar-category-group__title{
  margin:0;
  color:var(--ni-color-text,#5d514b);
  font-size:13px;
  font-weight:900;
  line-height:1.45;
}

/* NI_CONVERGENCE: drawer category parent alignment guard.
 * Keep parent category headings, including the current parent such as 現貨,
 * left-aligned and visually intentional inside the explore drawer instead of
 * inheriting legacy table/header alignment from old category markup.
 */
html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-card__head,
html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-card__title,
html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-card__hint{
  text-align:left!important;
  text-align-last:left!important;
}

html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-card__title{
  font-size:20px!important;
  line-height:1.35!important;
  letter-spacing:.035em!important;
}

html body .ni-listing-sidebar .ni-sidebar-category-group__title{
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  text-align:left!important;
  text-align-last:left!important;
  line-height:1.45!important;
}

html body .ni-listing-sidebar .ni-sidebar-category-group__title a{
  display:flex;
  align-items:center;
  justify-content:flex-start!important;
  width:100%;
  min-height:36px;
  padding:6px 10px;
  border-radius:14px;
  text-align:left!important;
  text-align-last:left!important;
  color:var(--ni-color-text,#5d514b);
  font-size:16px;
  font-weight:900;
  line-height:1.45;
  letter-spacing:.035em;
  box-sizing:border-box;
}

html body .ni-listing-sidebar .ni-sidebar-category-group__title a.is-current,
html body .ni-listing-sidebar .ni-sidebar-category-group__title a[aria-current="page"]{
  justify-content:flex-start!important;
  min-height:40px;
  padding:8px 12px;
  background:rgba(248,242,237,.92);
  color:#6b514a;
  font-size:18px;
  font-weight:950;
  text-align:left!important;
  text-align-last:left!important;
}

.ni-sidebar-category-group__children{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:2px;
  margin-top:6px;
}

.ni-sidebar-category-group__children a{
  position:relative;
  display:block;
  min-height:0;
  max-width:100%;
  padding:3px 0 3px 12px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--ni-color-muted,#8a766f);
  font-size:12px;
  line-height:1.55;
  text-decoration:none;
  box-sizing:border-box;
}

.ni-sidebar-category-group__children a::before{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(201,110,116,.34);
  transform:translateY(-50%);
}

.ni-sidebar-category-group__children a:hover{
  color:#9b6463;
  text-decoration:none;
}

.ni-category-brand-ad .ni-sidebar-card__body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.ni-category-brand-ad .ni-sidebar-card__body > div,
.ni-category-brand-ad .ni-sidebar-card__body > p,
.ni-category-brand-ad .ni-sidebar-card__body > center{
  display:contents!important;
}

.ni-category-brand-ad .ni-sidebar-card__body br{
  display:none!important;
}

.ni-category-brand-ad a,
.ni-category-brand-ad .ni-sidebar-brand-item{
  display:block!important;
  min-width:0;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border-radius:14px;
  text-decoration:none;
}

.ni-category-brand-ad img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:66px!important;
  margin:0!important;
  border-radius:14px;
  object-fit:cover;
  object-position:center;
  opacity:.82;
  filter:saturate(.88);
}

.ni-sidebar-products,
.ni-sidebar-history__list{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:12px;
}

.ni-sidebar-product,
.ni-history-product{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:9px;
  align-items:center;
  min-width:0;
  padding:7px;
  border:1px solid rgba(219,195,181,.34);
  border-radius:15px;
  background:rgba(255,255,255,.42);
  box-sizing:border-box;
}

.ni-sidebar-product__media,
.ni-history-product__media{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  overflow:hidden;
  border-radius:13px;
  background:var(--ni-color-surface-soft,#fbf4ee);
  text-decoration:none;
}

.ni-sidebar-product__media img,
.ni-sidebar-product__media picture,
.ni-sidebar-product__media .ni-img-frame,
.ni-history-product__media img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  margin:0!important;
}

.ni-sidebar-product__body,
.ni-history-product__body{
  min-width:0;
}

.ni-sidebar-product__title,
.ni-history-product__title{
  display:-webkit-box;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--ni-color-text,#5d514b);
  font-size:12px;
  font-weight:800;
  line-height:1.48;
}

.ni-sidebar-product__price,
.ni-history-product__price{
  display:block;
  margin-top:5px;
  color:var(--ni-color-rose-cta,#9b6463);
  font-size:12px;
  font-weight:900;
  line-height:1.25;
}

.ni-sidebar-history__tools{
  display:flex;
  justify-content:flex-end;
  margin-bottom:8px;
}

.ni-sidebar-history__clear{
  min-height:26px;
  padding:0 10px;
  border:1px solid rgba(215,160,157,.34);
  border-radius:999px;
  background:rgba(248,229,226,.62);
  color:#9b6463;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

.ni-sidebar-history__clear:hover{
  background:#efd6d2;
}

.ni-sidebar-history__empty{
  color:var(--ni-color-muted,#8a766f);
  font-size:12px;
  line-height:1.7;
}

.ni-sidebar-empty{
  margin-top:12px;
  padding:12px;
  border:1px dashed rgba(219,195,181,.50);
  border-radius:16px;
  background:rgba(255,250,246,.54);
  color:var(--ni-color-muted,#8a766f);
  font-size:12px;
  line-height:1.7;
}

.ni-sidebar-category-group.is-current .ni-sidebar-category-group__title a,
.ni-sidebar-category-group__title a.is-current,
.ni-sidebar-category-group__title a[aria-current="page"],
.ni-sidebar-category-group__children a.is-current,
.ni-sidebar-category-group__children a[aria-current="page"]{
  color:#9b6463;
  font-weight:950;
}

.ni-sidebar-category-group__title a.is-current,
.ni-sidebar-category-group__title a[aria-current="page"]{
  display:block;
  padding:5px 9px;
  border-radius:14px;
  background:rgba(248,229,226,.52);
}

.ni-sidebar-category-group__children a.is-current,
.ni-sidebar-category-group__children a[aria-current="page"]{
  padding-left:14px;
  background:linear-gradient(90deg,rgba(248,229,226,.72),rgba(248,229,226,0));
}

.ni-sidebar-category-group__children a.is-current::before,
.ni-sidebar-category-group__children a[aria-current="page"]::before{
  width:5px;
  height:5px;
  background:#9b6463;
}

.ni-listing-filters.is-collapsed .ni-listing-filter-panel__toggle,
.ni-listing-filter-panel.is-collapsed .ni-listing-filter-panel__toggle{
  border-bottom-color:transparent;
}

/* Product grid and card */
.ni-product-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px 20px;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

.ni-product-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-width:0;
  margin:0;
  padding:12px;
  overflow:hidden;
  border:1px solid rgba(222,200,188,.30);
  border-radius:26px;
  background:rgba(255,253,249,.90);
  box-shadow:0 8px 22px rgba(120,90,80,.042);
  box-sizing:border-box;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}

.ni-product-card:hover,
.ni-product-card:focus-within{
  transform:translateY(-3px);
  border-color:rgba(215,160,157,.48);
  background:#fffdf9;
  box-shadow:0 16px 34px rgba(120,90,80,.095);
}

/* NI_CONVERGENCE: Listing product media follows the current product-detail main image surface.
 * The product card keeps a square clickable media area for stable grid alignment,
 * but that holder is no longer a visible frame. The visible surface is the
 * product bitmap/picture itself: natural ratio, no extra outer canvas, rounded
 * clipping on the real image edge. This replaces the previous card-media
 * canvas/border/shadow layer that made some contain-fitted images look square.
 */
.ni-product-card__media,
.ni-product-card__image-frame{
  --ni-product-card-media-radius:24px;
  --ni-product-card-image-radius:20px;
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:1/1;
  margin:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:var(--ni-product-card-media-radius);
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
  text-decoration:none;
  line-height:0;
  contain:paint;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

.ni-product-card__media > .ni-product-card__image-frame{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  contain:initial;
  -webkit-mask-image:none;
  clip-path:none;
}

.ni-product-card__media::before{
  display:none;
  content:none;
}

.ni-product-card.is-media-ready .ni-product-card__media::before{
  display:none;
  opacity:0;
  animation:none;
}

.ni-product-card__media picture,
.ni-product-card__media .autoslim-picture,
.ni-product-card__media .ni-img-frame--product-card,
.ni-product-card__image-frame picture,
.ni-product-card__image-frame .autoslim-picture,
.ni-product-card__image-frame .ni-img-frame--product-card{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
  line-height:0;
}

.ni-product-card__media picture,
.ni-product-card__media .autoslim-picture,
.ni-product-card__media img,
.ni-product-card__image-frame{
  position:relative;
  z-index:1;
}

.ni-product-card__media img,
.ni-product-card__image,
.ni-product-card__media .ni-img--product-card{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0;
  object-fit:contain;
  object-position:center center;
  border:0;
  border-radius:var(--ni-product-card-image-radius);
  background:transparent;
  box-shadow:none;
  box-sizing:border-box;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  -webkit-mask-image:-webkit-radial-gradient(white,black);
  clip-path:inset(0 round var(--ni-product-card-image-radius));
  transition:transform .22s ease,opacity .22s ease,filter .22s ease;
}

/* NI_CONVERGENCE: do not scale listing images on hover.
 * Root cause fixed: the detail-page-like rounded image surface is the bitmap itself;
 * scaling that bitmap inside a clipped square holder cuts the rounded image edge.
 * Keep hover feedback on the card/buttons, not by enlarging the product image.
 */
.ni-product-card:hover .ni-product-card__image,
.ni-product-card:focus-within .ni-product-card__image,
.ni-product-card:hover .ni-product-card__media img,
.ni-product-card:focus-within .ni-product-card__media img{
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  filter:saturate(1.015);
}

.ni-product-card.is-media-missing .ni-product-card__media,
.ni-product-card.is-media-missing .ni-product-card__image-frame{
  border:1px dashed rgba(219,195,181,.54);
  background:
    radial-gradient(circle at 50% 24%,rgba(255,255,255,.62),rgba(255,255,255,0) 42%),
    linear-gradient(180deg,rgba(251,244,238,.96),rgba(255,250,246,.88));
}

.ni-product-card.is-media-missing .ni-product-card__media img,
.ni-product-card.is-media-missing .ni-product-card__image{
  opacity:.08;
  filter:grayscale(1) saturate(.45);
}

.ni-product-card.is-media-missing .ni-product-card__media::after,
.ni-product-card.is-media-missing .ni-product-card__image-frame::after{
  content:attr(data-ni-media-label);
  position:absolute;
  z-index:2;
  inset:auto 14px 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:26px;
  padding:0 10px;
  border:1px solid rgba(219,195,181,.44);
  border-radius:999px;
  background:rgba(255,253,249,.76);
  color:#a28d85;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ni-product-card__quick{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  min-width:36px;
  min-height:36px;
  padding:4px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:var(--ni-heart-idle,#b8a69d);
  line-height:1;
  cursor:pointer;
  box-shadow:none!important;
  outline:none;
  -webkit-appearance:none!important;
  appearance:none!important;
  transition:transform .16s ease, opacity .16s ease;
}

.ni-product-card__quick:hover,
.ni-product-card__quick:focus,
.ni-product-card__quick:focus-visible{
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  color:var(--ni-heart-hover,#a8958c);
  transform:translateY(-1px);
  box-shadow:none!important;
}

.ni-product-card__quick:focus-visible{
  outline:2px solid rgba(184,166,157,.42);
  outline-offset:2px;
}

.ni-product-card__quick.is-active,
.ni-product-card__quick[aria-pressed="true"]{
  border:0!important;
  background:transparent!important;
  background-color:transparent!important;
  color:var(--ni-heart-active,#c4a29d);
}

.ni-product-card__quick.is-pending,
.ni-product-card__quick[aria-busy="true"]{
  opacity:.62;
  pointer-events:none;
}

.ni-product-card__ribbon{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 8px;
  border:1px solid rgba(201,110,116,.24);
  border-radius:999px;
  background:rgba(255,248,246,.88);
  color:#b66e72;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.ni-product-card__ribbon--vip{
  left:auto;
  right:12px;
  color:#9b6463;
  background:rgba(248,229,226,.92);
}

.ni-product-card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  align-self:stretch;
  align-items:stretch;
  width:100%;
  min-width:0;
  gap:8px;
  padding:13px 3px 2px;
  text-align:left;
  box-sizing:border-box;
}

.ni-product-card__topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  min-width:0;
  min-height:24px;
  text-align:left;
}

.ni-product-card__topline .ni-product-card__meta{
  flex:1 1 auto;
  min-width:0;
}

.ni-product-card__topline .ni-product-card__price-row{
  flex:0 0 auto;
  width:auto;
  min-width:max-content;
  min-height:auto;
  justify-content:flex-end;
  text-align:right;
}

.ni-product-card__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  gap:5px;
  min-height:20px;
  margin:0;
  text-align:left;
}

.ni-product-card__meta span{
  display:inline-flex;
  align-items:center;
  min-height:19px;
  padding:0 7px;
  border:1px solid rgba(221,196,184,.34);
  border-radius:999px;
  background:rgba(255,251,247,.60);
  color:#927c74;
  font-size:10px;
  font-weight:750;
  line-height:1;
  letter-spacing:.06em;
}

.ni-product-card__title{
  display:-webkit-box;
  align-self:stretch;
  width:100%;
  min-width:0;
  min-height:3.06em;
  margin:0;
  overflow:hidden;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--ni-color-text,#5d514b);
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  font-size:13.5px;
  font-weight:820;
  line-height:1.53;
  letter-spacing:.025em;
  text-align:left;
  text-align-last:left;
  text-decoration:none;
}

.ni-product-card__title:hover{
  color:#b66e72;
  text-decoration:none;
}

.ni-product-card__brief,
.ni-product-card__link{
  display:none;
}

.ni-product-card__price-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-end;
  width:100%;
  gap:5px 8px;
  min-height:24px;
  word-break:break-word;
}

.ni-product-card__price,
.ni-product-card__price .shop,
.ni-product-card__price font{
  color:var(--ni-color-rose-cta,#9b6463);
  font-size:15px;
  font-weight:900;
  line-height:1.2;
}

.ni-product-card__market{
  display:inline-flex;
  color:#b7a29a;
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  text-decoration:line-through;
}

.ni-product-card__price:empty::before,
.ni-product-card__price .shop:empty::before,
.ni-product-card__price font:empty::before{
  content:"價格請洽詢";
  color:#a28d85;
  font-size:12px;
  font-weight:850;
  text-decoration:none;
}

.ni-product-card__market:empty{
  display:none;
}

.ni-product-card__badge{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:0 7px;
  border-radius:999px;
  background:rgba(248,229,226,.66);
  color:#a76468;
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
}

.ni-product-card__actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:auto;
  padding-top:3px;
}

.ni-product-card__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:96px;
  min-height:32px;
  padding:0 15px;
  border:1px solid rgba(185,104,105,.62);
  border-radius:999px;
  background-color:#d79696;
  background-image:linear-gradient(180deg,#dfa9a7 0%,#c97f82 100%);
  color:#fffdf9;
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif);
  font-size:12px;
  font-weight:var(--ni-button-font-weight, 700);
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-sizing:border-box;
  box-shadow:0 8px 18px rgba(178,105,100,.20);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease,border-color .16s ease,color .16s ease;
}

.ni-product-card__cta:hover{
  border-color:rgba(172,90,94,.68);
  background-color:#cd8586;
  background-image:linear-gradient(180deg,#d69a99 0%,#bd7076 100%);
  color:#fffdf9;
  text-decoration:none;
  transform:translateY(-1px);
  filter:saturate(1.02);
  box-shadow:0 10px 21px rgba(178,105,100,.25);
}

.ni-product-card__cta.is-soft{
  border-color:rgba(215,160,157,.38);
  background:rgba(251,244,238,.88);
  color:#9b6463;
  box-shadow:none;
}

.ni-product-card__cta.is-spec{
  min-width:98px;
}

.ni-product-card__spec-template{
  display:none !important;
}

.ni-card-spec-backdrop{
  position:fixed;
  inset:0;
  z-index:2147483200;
  border:0;
  background:rgba(58,49,44,.24);
  -webkit-backdrop-filter:blur(22px) saturate(.98) contrast(.96);
  backdrop-filter:blur(22px) saturate(.98) contrast(.96);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, background .18s ease;
}

.ni-card-spec-dialog{
  position:fixed;
  z-index:2147483210;
  left:50%;
  top:50%;
  width:min(520px,calc(100vw - 48px));
  max-height:calc(100dvh - 72px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  isolation:isolate;
  border:1px solid rgba(218,190,176,.76);
  border-radius:28px;
  background:#fffdf9;
  box-shadow:0 28px 76px rgba(67,47,39,.22);
  transform:translate(-50%,-47%) scale(.985);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
}

.ni-card-spec-dialog::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:none;
  pointer-events:none;
}

.ni-card-spec-dialog > *{
  position:relative;
  z-index:1;
}

.is-ni-card-spec-open .ni-card-spec-backdrop,
.is-ni-card-spec-open .ni-card-spec-dialog{
  opacity:1;
  pointer-events:auto;
}

.is-ni-card-spec-open .ni-card-spec-dialog{
  transform:translate(-50%,-50%) scale(1);
}

.ni-card-spec-dialog__head{
  position:static;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:20px 68px 14px 22px;
  border-bottom:1px solid rgba(232,210,199,.72);
  background:#fffdf9;
}

.ni-card-spec-dialog__eyebrow{
  display:block;
  margin-bottom:4px;
  color:#b7827d;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.ni-card-spec-dialog__title{
  margin:0;
  color:#4e372f;
  font-size:18px;
  font-weight:900;
  line-height:1.45;
}

.ni-card-spec-dialog__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  border:1px solid rgba(211,181,167,.75);
  border-radius:999px;
  background:#fffdf9;
  color:#7c6860;
  font-size:0;
  line-height:1;
  text-align:center;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(76,55,46,.10), inset 0 1px 0 rgba(255,255,255,.72);
  appearance:none;
  -webkit-appearance:none;
}

.ni-card-spec-dialog__close::before,
.ni-card-spec-dialog__close::after{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  width:14px;
  height:1.6px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center center;
}

.ni-card-spec-dialog__close::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.ni-card-spec-dialog__close::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.ni-card-spec-dialog__body{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:18px;
  padding:18px 22px;
  overflow:auto;
}

.ni-card-spec-dialog__media{
  align-self:start;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:130px;
  border-radius:22px;
  background:#fff8f4;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);
}

.ni-card-spec-dialog__media picture,
.ni-card-spec-dialog__media .autoslim-picture,
.ni-card-spec-dialog__media .ni-product-card__image-frame,
.ni-card-spec-dialog__media .ni-card-spec-dialog__media-frame{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:160px !important;
  aspect-ratio:auto !important;
  border-radius:20px;
  overflow:hidden;
}

.ni-card-spec-dialog__media img,
.ni-card-spec-dialog__media .ni-card-spec-dialog__media-img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:160px !important;
  min-width:0 !important;
  min-height:0 !important;
  object-fit:contain !important;
  object-position:center center !important;
  aspect-ratio:auto !important;
  border-radius:20px;
}

.ni-card-spec-dialog__summary{
  min-width:0;
}

.ni-card-spec-dialog__price{
  margin:2px 0 14px;
  color:#9b6463;
  font-size:18px;
  font-weight:900;
  letter-spacing:.01em;
}

.ni-card-spec-dialog__specs{
  display:grid;
  gap:14px;
}

.ni-card-spec-group{
  display:grid;
  gap:8px;
}

.ni-card-spec-group__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ni-card-spec-group__name{
  color:#5d514b;
  font-size:13px;
  font-weight:900;
}

.ni-card-spec-group__hint{
  color:#a99790;
  font-size:11px;
  font-weight:700;
}

.ni-card-spec-group.is-missing .ni-card-spec-group__hint{
  color:#c35f69;
}

.ni-card-spec-group__options{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.ni-card-spec-option{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:34px;
  padding:0 13px;
  border:1px solid rgba(218,193,180,.7);
  border-radius:999px;
  background:#fffdf9;
  color:#6c5952;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease,transform .16s ease;
}

.ni-card-spec-option:hover,
.ni-card-spec-option:focus{
  border-color:rgba(200,137,132,.72);
  background:#fff5f2;
}

.ni-card-spec-option.is-selected,
.ni-card-spec-option[aria-pressed="true"],
.ni-card-spec-option[data-ni-spec-selected="1"]{
  border-color:rgba(177,88,94,.86);
  background-color:#c96f78;
  background-image:linear-gradient(180deg,#d88b90 0%,#be626d 100%);
  color:#fffdf9;
  box-shadow:0 11px 22px rgba(178,105,100,.24), inset 0 1px 0 rgba(255,255,255,.30);
  transform:translateY(-1px);
}

.ni-card-spec-dialog__qty{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  color:#5d514b;
  font-size:13px;
  font-weight:900;
}

.ni-card-spec-dialog__qty button,
.ni-card-spec-dialog__qty input{
  width:32px;
  height:30px;
  border:1px solid rgba(211,181,167,.75);
  border-radius:10px;
  background:#fffdf9;
  color:#6c5952;
  font-weight:800;
}

.ni-card-spec-dialog__qty button{
  cursor:pointer;
}

.ni-card-spec-dialog__foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:14px 22px 20px;
  border-top:1px solid rgba(232,210,199,.72);
  background:#fffdf9;
}

.ni-card-spec-dialog__detail,
.ni-card-spec-dialog__add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 18px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

.ni-card-spec-dialog__detail{
  border:1px solid rgba(211,181,167,.75);
  background:rgba(255,253,249,.82);
  color:#6c5952;
}

.ni-card-spec-dialog__add{
  border:1px solid rgba(177,88,94,.68);
  background-color:#c96f78;
  background-image:linear-gradient(180deg,#d88b90 0%,#be626d 100%);
  color:#fffdf9;
  box-shadow:0 12px 24px rgba(178,105,100,.24);
  cursor:pointer;
}

html body .ni-card-spec-dialog__add{
  border-color:rgba(177,88,94,.68) !important;
  background-color:#c96f78 !important;
  background-image:linear-gradient(180deg,#d88b90 0%,#be626d 100%) !important;
  color:#fffdf9 !important;
}

.ni-card-spec-dialog.is-pending .ni-card-spec-dialog__add{
  opacity:.72;
  pointer-events:none;
}

@media (max-width:700px){
  .ni-card-spec-dialog{
    left:50%;
    right:auto;
    top:50%;
    bottom:auto;
    width:calc(100vw - 28px);
    max-height:calc(100dvh - 72px);
    border-radius:24px;
    transform:translate(-50%,-47%) scale(.985);
  }

  .is-ni-card-spec-open .ni-card-spec-dialog{
    transform:translate(-50%,-50%) scale(1);
  }

  .ni-card-spec-dialog__head{
    padding:18px 64px 12px 18px;
  }

  .ni-card-spec-dialog__close{
    top:14px;
    right:14px;
  }

  .ni-card-spec-dialog__body{
    grid-template-columns:92px 1fr;
    gap:12px;
    padding:16px 18px;
    max-height:calc(100dvh - 230px);
  }

  .ni-card-spec-dialog__media{
    min-height:92px;
    border-radius:18px;
  }

  .ni-card-spec-dialog__media picture,
  .ni-card-spec-dialog__media .autoslim-picture,
  .ni-card-spec-dialog__media .ni-product-card__image-frame,
  .ni-card-spec-dialog__media .ni-card-spec-dialog__media-frame{
    max-height:112px !important;
    border-radius:16px;
  }

  .ni-card-spec-dialog__media img,
  .ni-card-spec-dialog__media .ni-card-spec-dialog__media-img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:112px !important;
    object-fit:contain !important;
    border-radius:16px;
  }

  .ni-card-spec-dialog__foot{
    padding:12px 18px 16px;
  }

  .ni-card-spec-dialog__detail,
  .ni-card-spec-dialog__add{
    flex:1 1 0;
    padding:0 12px;
  }
}

.ni-product-card.is-restricted .ni-product-card__media img{
  filter:saturate(.9);
}

.ni-product-card.is-action-pending .ni-product-card__cta{
  pointer-events:none;
  opacity:.72;
  transform:translateY(0);
}

.ni-product-card.is-action-pending .ni-product-card__cta::after{
  content:"";
  width:10px;
  height:10px;
  margin-left:7px;
  border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff;
  border-radius:50%;
  animation:niListingSpin .72s linear infinite;
}

/* Inline interaction convergence: status feedback and JS-retired controls */
html body .ni-listing-status{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}

html body .ni-listing-status.is-active{
  position:static;
  width:auto;
  height:auto;
  margin:8px 0 0;
  padding:7px 12px;
  overflow:visible;
  clip:auto;
  clip-path:none;
  border:1px solid rgba(215,160,157,.24);
  border-radius:999px;
  background:rgba(255,250,246,.82);
  color:#9b6463;
  font-size:12px;
  font-weight:800;
  letter-spacing:.03em;
  white-space:normal;
  box-shadow:0 6px 16px rgba(120,90,80,.045);
}

/* Template sync / no-inline-js convergence helpers */
html body .ni-listing-i18n{
  display:none!important;
}

html body .ni-listing-sort--form label{
  display:inline-flex;
  align-items:center;
  margin:0;
}

/* NI_CONVERGENCE: search sort pills — same compact capsule contract as category .ni-listing-sort__item. */
html body .ni-listing-sort--form .ni-listing-sort__submit{
  display:none!important;
}

html body .ni-listing-sort--form select[data-ni-listing-sort-control]{
  width:48px;
  min-width:48px;
  max-width:48px;
  padding:0 8px;
  text-align:center;
  text-align-last:center;
  background-image:none;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Empty state and pagination */
.ni-empty-state{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:248px;
  padding:34px 24px;
  overflow:hidden;
  border:1px dashed rgba(213,183,170,.56);
  border-radius:28px;
  background:
    radial-gradient(circle at 50% -10%,rgba(248,229,226,.48),rgba(248,229,226,0) 46%),
    linear-gradient(180deg,rgba(255,253,249,.92),rgba(250,244,239,.62));
  color:var(--ni-color-muted,#8a766f);
  text-align:center;
  box-sizing:border-box;
}

.ni-empty-state::after{
  content:"";
  position:absolute;
  inset:auto 14% -64px 14%;
  height:128px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(215,160,157,.10) 0%,rgba(215,160,157,0) 70%);
  pointer-events:none;
}

.ni-empty-state__icon{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  margin:0 0 2px;
  border:1px solid rgba(215,160,157,.28);
  border-radius:18px;
  background:rgba(248,229,226,.78);
  box-shadow:0 12px 22px rgba(190,95,103,.08);
}

.ni-empty-state__icon::before{
  content:"";
  position:absolute;
  width:18px;
  height:2px;
  border-radius:999px;
  background:#b58e86;
  opacity:.72;
}

.ni-empty-state__icon::after{
  content:"";
  position:absolute;
  width:2px;
  height:18px;
  border-radius:999px;
  background:#b58e86;
  opacity:.72;
  transform:rotate(90deg);
}

.ni-empty-state > *{
  position:relative;
  z-index:1;
}

.ni-empty-state strong{
  color:var(--ni-color-text,#5d514b);
  font-family:var(--ni-font-heading,"Noto Serif TC","PMingLiU",serif);
  font-size:20px;
  line-height:1.35;
  letter-spacing:.04em;
}

.ni-empty-state p{
  max-width:460px;
  margin:0;
  color:var(--ni-color-muted,#8a766f);
  font-size:14px;
  line-height:1.75;
}

.ni-empty-state a:not(.ni-button){
  color:#b66e72;
  text-decoration:none;
  border-bottom:1px solid rgba(182,110,114,.28);
}

.ni-empty-state__kicker{
  display:inline-flex;
  margin:0 0 6px;
}

.ni-empty-state__suggest{
  padding:8px 12px;
  border:1px solid rgba(215,160,157,.22);
  border-radius:999px;
  background:rgba(255,250,246,.72);
}

.ni-empty-state__tips{
  display:grid;
  gap:6px;
  width:min(100%,440px);
  margin:5px auto 2px;
  padding:0;
  list-style:none;
  color:#8a766f;
  font-size:12px;
  line-height:1.6;
  text-align:left;
}

.ni-empty-state__tips li{
  position:relative;
  padding-left:16px;
}

.ni-empty-state__tips li::before{
  content:"";
  position:absolute;
  top:.72em;
  left:2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:rgba(155,100,99,.52);
}

.ni-empty-state__search{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:min(100%,420px);
  margin:8px auto 0;
}

.ni-empty-state__search input[type="text"]{
  flex:1 1 auto;
  min-width:0;
  height:40px;
  padding:0 14px;
  border:1px solid rgba(219,195,181,.54);
  border-radius:999px;
  background:#fffdf9;
  color:var(--ni-color-text,#5d514b);
  font-size:13px;
  box-sizing:border-box;
}

.ni-empty-state__quick-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:7px;
  margin-top:3px;
}

.ni-empty-state__quick-links a{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(219,195,181,.42);
  border-radius:999px;
  background:rgba(255,253,249,.70);
  color:#8a766f;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

.ni-empty-state__quick-links a:hover{
  border-color:rgba(215,160,157,.52);
  background:#fff7f3;
  color:#9b6463;
}

.ni-empty-state__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

/* NI_CONVERGENCE: listing product-card text/action canonical rules.
 * Root cause: previous image-output/product-card CSS centered inherited text and made
 * the cart CTA look like a plain white outline. Keep the listing card's content
 * width stretched, title/category badge left-aligned, and use one visible
 * low-saturation Japanese soft rose CTA source here.
 */
html body .ni-listing-shell .ni-product-card,
html body .ni-listing-panel .ni-product-card{
  text-align:left;
}

html body .ni-listing-shell .ni-product-card__body,
html body .ni-listing-panel .ni-product-card__body{
  align-self:stretch;
  align-items:stretch;
  width:100%;
  min-width:0;
  text-align:left;
}

html body .ni-listing-shell .ni-product-card__meta,
html body .ni-listing-panel .ni-product-card__meta{
  justify-content:flex-start;
  width:100%;
  text-align:left;
}

html body .ni-listing-shell .ni-product-card__title,
html body .ni-listing-panel .ni-product-card__title{
  align-self:stretch;
  width:100%;
  min-width:0;
  margin:0;
  text-align:left;
  text-align-last:left;
}

html body .ni-listing-shell .ni-product-card__price-row,
html body .ni-listing-panel .ni-product-card__price-row{
  justify-content:flex-end;
  width:auto;
}

html body .ni-listing-shell .ni-product-card__topline,
html body .ni-listing-panel .ni-product-card__topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  text-align:left;
}

html body .ni-listing-shell .ni-product-card__cta:not(.is-soft),
html body .ni-listing-panel .ni-product-card__cta:not(.is-soft){
  border-color:rgba(177,88,94,.68) !important;
  background-color:#c96f78 !important;
  background-image:linear-gradient(180deg,#d88b90 0%,#be626d 100%) !important;
  color:#fffdf9 !important;
  box-shadow:0 9px 20px rgba(178,105,100,.24) !important;
}

html body .ni-listing-shell .ni-product-card__cta:not(.is-soft):hover,
html body .ni-listing-panel .ni-product-card__cta:not(.is-soft):hover{
  border-color:rgba(166,75,83,.78) !important;
  background-color:#bd626d !important;
  background-image:linear-gradient(180deg,#cd7d84 0%,#ad5863 100%) !important;
  color:#fffdf9 !important;
  box-shadow:0 11px 24px rgba(178,105,100,.28) !important;
}

html body.is-ni-card-spec-open .ni-card-spec-dialog .ni-card-spec-option.is-selected,
html body.is-ni-card-spec-open .ni-card-spec-dialog .ni-card-spec-option[aria-pressed="true"],
html body.is-ni-card-spec-open .ni-card-spec-dialog .ni-card-spec-option[data-ni-spec-selected="1"]{
  border-color:rgba(177,88,94,.86) !important;
  background-color:#c96f78 !important;
  background-image:linear-gradient(180deg,#d88b90 0%,#be626d 100%) !important;
  color:#fffdf9 !important;
  box-shadow:0 11px 22px rgba(178,105,100,.24), inset 0 1px 0 rgba(255,255,255,.30) !important;
}

/* NI_CONVERGENCE: spec drawer backdrop/card canonical guard.
 * Root cause: only the page backdrop should inherit the product lightbox-style
 * frosted blur.  The spec card itself stays on the canonical solid soft-boutique
 * surface so controls remain legible and the mobile card can sit centered in the
 * viewport without its footer being hidden by the browser chrome.
 *
 * Header blur repair: the legacy header/nav/search/cart layers use very high
 * z-index values in legacy-bridge.css.  The spec backdrop was still on the old
 * local modal layer, so the product grid blurred while the header remained
 * visually above the overlay.  Keep the implementation in this listing owner
 * and lift only the spec drawer overlay pair above the legacy shell.
 */
html body .ni-card-spec-backdrop{
  z-index:2147483200 !important;
}

html body .ni-card-spec-dialog{
  z-index:2147483210 !important;
}

html body.is-ni-card-spec-open .ni-card-spec-backdrop{
  z-index:2147483200 !important;
  background:rgba(58,49,44,.24) !important;
  -webkit-backdrop-filter:blur(22px) saturate(.98) contrast(.96) !important;
  backdrop-filter:blur(22px) saturate(.98) contrast(.96) !important;
}

html body.is-ni-card-spec-open .ni-card-spec-dialog{
  z-index:2147483210 !important;
  background:#fffdf9 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-color:rgba(218,190,176,.76) !important;
}

html body.is-ni-card-spec-open .ni-card-spec-dialog__add{
  border-color:rgba(177,88,94,.68) !important;
  background-color:#c96f78 !important;
  background-image:linear-gradient(180deg,#d88b90 0%,#be626d 100%) !important;
  color:#fffdf9 !important;
}

/* NI_CONVERGENCE: listing spec drawer close button canonical anchor.
 * The close control lives inside the head markup, but it must be anchored to the
 * dialog's top-right corner rather than the header content box.  Keep the head
 * non-positioned so the absolute close button uses the fixed dialog as its
 * containing block, and draw the close mark with two centered pseudo-element
 * strokes instead of a font glyph, avoiding baseline and glyph-box drift.
 */
html body .ni-card-spec-dialog .ni-card-spec-dialog__head{
  position:static !important;
}

html body .ni-card-spec-dialog .ni-card-spec-dialog__close{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  z-index:3 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:40px !important;
  height:40px !important;
  margin:0 !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:1 !important;
  text-align:center !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}

html body .ni-card-spec-dialog .ni-card-spec-dialog__close::before,
html body .ni-card-spec-dialog .ni-card-spec-dialog__close::after{
  content:'' !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  display:block !important;
  width:14px !important;
  height:1.6px !important;
  border-radius:999px !important;
  background:currentColor !important;
  transform-origin:center center !important;
}

html body .ni-card-spec-dialog .ni-card-spec-dialog__close::before{
  transform:translate(-50%,-50%) rotate(45deg) !important;
}

html body .ni-card-spec-dialog .ni-card-spec-dialog__close::after{
  transform:translate(-50%,-50%) rotate(-45deg) !important;
}

@media (max-width:700px){
  html body .ni-card-spec-dialog .ni-card-spec-dialog__close{
    top:14px !important;
    right:14px !important;
  }
}

/* Pagination paint: frontend-pagination.css (global canonical owner). */

/* Listing explore drawer */
.ni-listing-sidebar-close,
.ni-listing-sidebar-backdrop{
  display:none;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar]{
  overscroll-behavior:contain;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar][aria-hidden="true"]{
  visibility:hidden;
}

html body.is-ni-listing-sidebar-open .ni-listing-sidebar[data-ni-listing-sidebar]{
  transform:translateX(0);
  visibility:visible;
}

html body .ni-listing-sidebar-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  margin:0 0 14px auto;
  padding:0 13px;
  border:1px solid rgba(219,195,181,.54);
  border-radius:999px;
  background:var(--ni-color-surface,#fffdf9);
  color:var(--ni-color-muted,#8a766f);
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(120,90,80,.06);
}

html body .ni-listing-sidebar-close:focus,
html body .ni-listing-sidebar-close:hover{
  border-color:rgba(215,160,157,.54);
  color:#9b6463;
}

html body .ni-listing-sidebar-backdrop{
  position:fixed;
  z-index:2147482500;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:transparent!important;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

html body.is-ni-listing-sidebar-open .ni-listing-sidebar-backdrop{
  opacity:1;
  pointer-events:auto;
}

html body.is-ni-listing-sidebar-open{
  overflow:auto;
}

/* NI_LISTING_FILTER_MOBILE_SHEET_CANONICAL
 * Root cause: filter backdrop is a <button>; style.css global button{background:!important}
 * paints an opaque cream layer over the listing, so products disappear (white page).
 * Sheet body is portaled to document.body; in-details body stays hidden on mobile.
 */
.ni-listing-filter-backdrop{
  display:none;
}

html body .ni-listing-filter-backdrop{
  position:fixed;
  z-index:2147482290;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0!important;
  border-radius:0!important;
  background:rgba(82,55,45,.30)!important;
  background-color:rgba(82,55,45,.30)!important;
  background-image:none!important;
  color:transparent!important;
  box-shadow:none!important;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  -webkit-appearance:none!important;
  appearance:none!important;
}

html body.is-ni-listing-filter-open .ni-listing-filter-backdrop{
  opacity:1;
  pointer-events:auto;
  touch-action:none;
}

/* Do not lock body scroll: overflow:hidden on body collapses the listing viewport on mobile. */

/* NI_CONVERGENCE: listing explore drawer visibility guard.
 * Root cause fixed: the first drawer pass kept the sidebar in the listing grid
 * and used a full-screen opaque-feeling backdrop with a z-index lower than the
 * legacy header.  The drawer now floats above the old header, keeps the product
 * list visible, and compacts nested brand ad markup so History remains reachable.
 */
html body .ni-listing-sidebar .ni-sidebar-card{
  margin-bottom:14px;
}

html body .ni-listing-sidebar .ni-sidebar-card--history{
  order:2;
}

html body .ni-listing-sidebar .ni-sidebar-card--ad{
  order:3;
}

html body .ni-listing-sidebar .ni-sidebar-card--category{
  order:1;
}

html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-category-tree{
  max-height:min(48vh,480px);
  overflow-y:auto;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:rgba(218,190,178,.72) transparent;
}

html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-category-tree::-webkit-scrollbar{
  width:6px;
}

html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-category-tree::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:rgba(218,190,178,.72);
}

html body .ni-listing-sidebar .ni-sidebar-card--products{
  order:4;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar]{
  flex-direction:column;
}

html body.is-ni-listing-sidebar-open .ni-listing-sidebar[data-ni-listing-sidebar]{
  display:flex!important;
}

html body .ni-listing-sidebar .ni-sidebar-card__body[hidden]{
  display:none!important;
}

html body.is-ni-listing-sidebar-open .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__body:not([hidden]){
  display:block;
}

@keyframes niListingSpin{
  to{transform:rotate(360deg);}
}

@media (prefers-reduced-motion: reduce){
  .ni-product-card,
  .ni-product-card *,
  .ni-pagination__item,
  .ni-pagination__list a,
  .ni-pagination__compact a{
    transition:none!important;
    animation:none!important;
  }
}

@media (max-width:960px){
  html body .ni-listing-shell{
    width:calc(100% - var(--ni-page-shell-edge-tablet, 24px));
    grid-template-columns:minmax(0,1fr);
    gap:14px;
  }

  html body .ni-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
  }
}

@media (max-width:700px){
  html body.ni-page-category,
  html body.ni-page-search,
  html body.ni-page-brand{
    overflow-x:clip;
  }

  html body .ni-listing-shell{
    display:block;
    width:calc(100% - var(--ni-page-shell-edge-mobile, 16px));
    max-width:100%;
    min-width:0;
    margin-bottom:20px;
    overflow-x:clip;
  }

  html body .ni-listing-main{
    display:block;
    width:100%!important;
    max-width:100%;
    min-width:0;
    margin:0!important;
    float:none!important;
    overflow-x:clip;
  }

  html body .ni-listing-panel{
    max-width:100%;
    min-width:0;
    overflow-x:clip;
  }

  html body .ni-listing-hero{
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
    min-height:0;
    margin:7px 0 13px;
    padding:18px 16px 16px;
    border-radius:24px;
  }

  html body .ni-listing-hero::before{
    width:116px;
    height:116px;
    right:-52px;
    top:-58px;
  }

  html body .ni-listing-hero::after{
    display:none;
  }

  html body .ni-listing-hero__kicker::before{
    width:18px;
  }

  html body .ni-listing-hero__title{
    font-size:var(--ni-page-hero-title-size-mobile, 24px);
    line-height:1.25;
  }

  html body .ni-listing-hero__text{
    font-size:13px;
    line-height:1.65;
  }

  html body .ni-listing-hero__meta{
    min-height:32px;
    padding:0 12px;
  }

  html body .ni-brand-hero{
    flex-direction:row;
    flex-wrap:wrap;
  }

  html body .ni-brand-hero__logo{
    width:92px;
    min-height:60px;
    padding:10px;
    border-radius:18px;
  }

  html body .ni-brand-hero .ni-listing-hero__body{
    flex:1 1 180px;
  }

  /* NI_CONVERGENCE: listing toolbar mobile single-row.
   * Root cause fixed: grid column auto + controls overflow:visible + sort max-width:100vw
   * let filter-toolbar pages (≡篩選+排序) exceed the viewport and scroll the whole page.
   * Flex containment keeps controls right-aligned; only .ni-listing-sort scrolls internally.
   */
  html body .ni-listing-toolbar{
    position:relative;
    top:auto;
    z-index:40;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    gap:8px 10px;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    padding:14px 16px 16px;
    overflow-x:clip;
    border-radius:20px;
    background:rgba(255,253,249,.96);
    box-sizing:border-box;
  }

  html body .ni-listing-toolbar:has(.ni-listing-filter-menu[open]){
    overflow-x:clip;
    z-index:2147482296;
  }

  html body .ni-listing-toolbar__summary{
    flex:1 1 auto;
    align-items:flex-start;
    justify-content:center;
    width:auto;
    min-width:0;
    margin:0 auto 0 0;
    text-align:left;
  }

  html body .ni-listing-toolbar .ni-listing-status{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    border:0;
    white-space:nowrap;
  }

  html body .ni-listing-toolbar__summary strong{
    font-size:18px;
    line-height:1.18;
    white-space:nowrap;
  }

  html body .ni-listing-toolbar__eyebrow{
    display:none;
  }

  html body .ni-listing-toolbar__helper{
    display:none;
  }

  html body .ni-listing-mobile-actions{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    width:auto;
    min-width:0;
    margin:0;
    overflow:visible;
    padding:0;
    gap:0;
  }

  html body .ni-listing-mobile-action,
  html body button.ni-listing-mobile-action,
  html body a.ni-listing-mobile-action{
    appearance:none!important;
    -webkit-appearance:none!important;
    width:28px;
    min-width:28px;
    height:28px;
    min-height:28px;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#6d5a53;
    font-size:0;
    line-height:1;
    letter-spacing:0;
  }

  html body .ni-listing-explore-toggle::before{
    margin:0;
    font-size:20px;
    line-height:1;
  }

  html body .ni-listing-mobile-action:hover,
  html body .ni-listing-mobile-action:focus,
  html body button.ni-listing-mobile-action:hover,
  html body button.ni-listing-mobile-action:focus,
  html body a.ni-listing-mobile-action:hover,
  html body a.ni-listing-mobile-action:focus{
    border:0;
    background:transparent;
    box-shadow:none;
    color:#9b6463;
    outline:0;
  }

  html body .ni-listing-mobile-action,
  html body .ni-facet-chip,
  html body .ni-listing-sort__item,
  html body .ni-listing-sort__submit,
  html body .ni-listing-sort select{
    flex:0 0 auto;
  }

  html body .ni-listing-sort{
    display:flex;
    flex:0 1 auto;
    flex-wrap:nowrap;
    align-items:center;
    width:auto;
    min-width:0;
    max-width:100%;
    justify-content:flex-start;
    gap:4px;
    overflow-x:auto;
    overflow-y:visible;
    padding:0 2px 0 0;
    scroll-padding-inline-end:6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  html body .ni-listing-sort::-webkit-scrollbar{
    display:none;
  }

  html body .ni-listing-sort__item,
  html body .ni-listing-sort__submit,
  html body .ni-listing-sort select{
    min-height:28px;
    padding:0 8px;
    font-size:12px;
  }

  html body .ni-listing-sort--form select[data-ni-listing-sort-control]{
    width:44px;
    min-width:44px;
    max-width:44px;
    padding:0 7px;
  }

  html body .ni-listing-sort__item:hover,
  html body .ni-listing-sort__item:focus,
  html body .ni-listing-sort__submit:hover,
  html body .ni-listing-sort__submit:focus{
    transform:none;
    box-shadow:none;
  }

  html body .ni-listing-sidebar[data-ni-listing-sidebar]{
    position:fixed;
    z-index:2147482600;
    top:max(8px,env(safe-area-inset-top));
    bottom:max(8px,env(safe-area-inset-bottom));
    left:8px;
    display:block!important;
    width:min(88vw,326px)!important;
    max-width:326px!important;
    max-height:none;
    margin:0!important;
    padding:16px 13px 24px!important;
    overflow-y:auto;
    float:none!important;
    border:1px solid rgba(222,200,188,.70);
    border-radius:24px;
    background:rgba(253,251,248,.985);
    box-shadow:16px 0 34px rgba(80,55,45,.18), 0 14px 34px rgba(120,90,80,.12);
    transform:translateX(calc(-100% - 28px));
    transition:transform .22s ease;
    box-sizing:border-box;
    -webkit-overflow-scrolling:touch;
  }

  html body.is-ni-listing-sidebar-open .ni-listing-sidebar[data-ni-listing-sidebar]{
    transform:translateX(0);
  }

  html body .ni-listing-sidebar-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin:0 0 12px auto;
    padding:0 13px;
    border:1px solid rgba(219,195,181,.54);
    border-radius:999px;
    background:var(--ni-color-surface,#fffdf9);
    color:var(--ni-color-muted,#8a766f);
    font-size:12px;
    font-weight:900;
    letter-spacing:.04em;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(120,90,80,.06);
  }

  html body .ni-listing-sidebar-close:focus,
  html body .ni-listing-sidebar-close:hover{
    border-color:rgba(215,160,157,.54);
    color:#9b6463;
  }

  html body .ni-listing-sidebar-backdrop{
    position:fixed;
    z-index:2147482500;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    border:0;
    background:rgba(253,251,248,.18)!important;
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease;
  }

  html body.is-ni-listing-sidebar-open .ni-listing-sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  html body.is-ni-listing-sidebar-open{
    overflow:auto;
  }

  html body .ni-listing-sidebar .ni-sidebar-card--category .ni-sidebar-category-tree{
    max-height:min(42vh,390px);
  }

  html body .ni-listing-toolbar__controls{
    flex:0 0 auto;
    display:flex;
    flex-wrap:nowrap;
    align-items:center;
    justify-content:flex-end;
    width:auto;
    min-width:0;
    max-width:100%;
    margin-left:auto;
    gap:4px;
    overflow:hidden;
    padding:1px 0;
    scrollbar-width:none;
  }

  html body .ni-listing-mobile-actions + .ni-listing-filter-menu{
    margin-left:0;
  }

  html body .ni-listing-filter-menu + .ni-listing-sort{
    margin-left:2px;
  }

  html body .ni-listing-filter-menu{
    flex:0 0 auto;
    min-height:28px;
  }

  html body .ni-listing-filter-menu__summary{
    min-height:28px;
    padding:0 2px;
    border:0;
    background:transparent;
    box-shadow:none;
    font-size:12.5px;
    gap:5px;
  }

  html body .ni-listing-filter-menu__icon{
    width:14px;
    height:11px;
    flex-basis:14px;
  }

  html body .ni-listing-filter-menu__label::after{
    width:6px;
    height:6px;
    margin-left:5px;
  }

  html body #ni_listing_filter_menu .ni-listing-filter-menu__body{
    display:none!important;
  }

  html body #ni_listing_filter_body.is-ni-filter-sheet-portaled{
    position:fixed;
    z-index:2147482310;
    inset:auto 12px calc(92px + env(safe-area-inset-bottom)) 12px;
    width:auto;
    height:max-content;
    max-height:min(56vh,calc(100dvh - 180px));
    margin:0;
    padding:12px;
    overflow:auto;
    overscroll-behavior:contain;
    border:1px solid rgba(222,200,188,.52);
    border-radius:22px;
    background:rgba(255,253,249,.98);
    box-shadow:0 18px 42px rgba(82,55,45,.16),0 8px 20px rgba(120,90,80,.08);
    box-sizing:border-box;
    display:none!important;
  }

  html body #ni_listing_filter_body.is-ni-filter-sheet-portaled.is-ni-filter-sheet-open{
    display:block!important;
    animation:niListingFilterMenuIn .16s ease both;
  }

  html body .ni-listing-filter-chips{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
  }

  html body .ni-product-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 10px;
    align-items:start;
  }

  html body .ni-product-card{
    min-width:0;
    padding:8px;
    overflow:hidden;
    border-radius:20px;
  }

  html body .ni-product-card__media,
  html body .ni-product-card__image-frame{
    --ni-product-card-media-radius:18px;
    --ni-product-card-image-radius:16px;
    padding:0;
    border-radius:var(--ni-product-card-media-radius);
    clip-path:none;
  }

  html body .ni-product-card__media > .ni-product-card__image-frame{
    padding:0;
    border-radius:0;
    clip-path:none;
  }

  html body .ni-product-card__quick{
    min-width:34px;
    min-height:34px;
    padding:3px;
  }

  html body .ni-product-card__ribbon{
    top:7px;
    left:7px;
    min-height:20px;
    padding:0 7px;
    font-size:9px;
  }

  html body .ni-product-card__ribbon--vip{
    left:auto;
    right:7px;
  }

  html body .ni-product-card__body{
    gap:6px;
    padding:9px 1px 1px;
  }

  html body .ni-product-card__topline{
    flex-wrap:nowrap;
    align-items:center;
    gap:6px;
    min-height:22px;
  }

  html body .ni-product-card__topline .ni-product-card__price-row{
    flex:0 0 auto;
    max-width:54%;
    min-width:0;
  }

  html body .ni-product-card__meta{
    flex:1 1 auto;
    flex-wrap:nowrap;
    gap:4px;
    min-width:0;
    min-height:18px;
    overflow:hidden;
  }

  html body .ni-product-card__meta span{
    min-height:18px;
    padding:0 7px;
    font-size:9px;
  }

  html body .ni-product-card__title{
    min-height:2.9em;
    font-size:12.5px;
    line-height:1.45;
    text-align:left;
  }

  html body .ni-product-card__price{
    display:block;
    max-width:100%;
    overflow:hidden;
    font-size:13.5px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  html body .ni-product-card__market{
    font-size:10px;
  }

  html body .ni-product-card__actions{
    flex-wrap:nowrap;
    justify-content:center;
    min-width:0;
  }

  html body .ni-product-card__cta{
    min-width:82px;
    min-height:30px;
    padding:0 10px;
    font-size:11.5px;
  }

  html body .ni-empty-state{
    min-height:190px;
    padding:24px 15px;
    border-radius:22px;
  }

  html body .ni-empty-state strong{
    font-size:18px;
  }

  html body .ni-empty-state p{
    font-size:13px;
  }

  html body .ni-empty-state__search{
    flex-direction:column;
    align-items:stretch;
  }

  html body .ni-empty-state__search .ni-button,
  html body .ni-empty-state__search button,
  html body .ni-empty-state__search input[type="text"]{
    width:100%;
  }

  html body .ni-empty-state__tips{
    text-align:left;
    font-size:12px;
  }

  html body .ni-empty-state__actions{
    flex-direction:column;
    align-items:stretch;
  }

  html body .ni-empty-state__actions .ni-button{
    width:100%;
    justify-content:center;
  }
}

@media (max-width:420px){
  html body .ni-listing-toolbar{
    padding:12px 14px 14px;
    gap:8px;
  }

  html body .ni-listing-toolbar__summary strong{
    font-size:17px;
  }

  html body .ni-listing-toolbar__controls{
    gap:4px;
  }

  html body .ni-listing-sort__item,
  html body .ni-listing-sort__submit,
  html body .ni-listing-sort select{
    min-height:26px;
    padding:0 7px;
    font-size:11px;
  }

  html body .ni-listing-sort--form select[data-ni-listing-sort-control]{
    width:42px;
    min-width:42px;
    max-width:42px;
    padding:0 6px;
  }
}

@media (max-width:360px){
  html body .ni-listing-toolbar{
    padding-left:12px;
    padding-right:12px;
    gap:7px;
  }

  html body .ni-listing-toolbar__summary strong{
    font-size:16px;
  }

  html body .ni-listing-toolbar__controls{
    gap:4px;
  }

  html body .ni-listing-mobile-action,
  html body button.ni-listing-mobile-action,
  html body a.ni-listing-mobile-action{
    width:26px;
    min-width:26px;
    height:26px;
    min-height:26px;
  }

  html body .ni-listing-filter-menu__summary{
    font-size:11.5px;
  }

  html body .ni-listing-sort{
    gap:4px;
  }

  html body .ni-listing-sort__item,
  html body .ni-listing-sort__submit,
  html body .ni-listing-sort select{
    min-height:26px;
    padding:0 7px;
    font-size:11px;
  }

  html body .ni-product-grid{
    gap:10px 8px;
  }

  html body .ni-product-card__title{
    font-size:12px;
    text-align:left;
  }

  html body .ni-product-card__price{
    font-size:12.5px;
  }
}

/* NI_CONVERGENCE: listing explore drawer history placement.
 * Kept implementation: category card, selected brand card, history card, then hot products.
 * Retired implementation: forcing history above selected brand and framing the history title button.
 */
html body .ni-listing-sidebar .ni-sidebar-card{
  margin:0 0 14px !important;
}

html body .ni-listing-sidebar .ni-sidebar-card--category{
  order:1 !important;
}

html body .ni-listing-sidebar .ni-sidebar-card--ad{
  order:2 !important;
}

html body .ni-listing-sidebar .ni-sidebar-card--history{
  order:3 !important;
}

html body .ni-listing-sidebar .ni-sidebar-card--products{
  order:4 !important;
}

html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__toggle{
  display:block!important;
  width:100%!important;
  min-height:0!important;
  padding:0 26px 0 0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  outline:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  color:inherit!important;
  text-align:left!important;
  text-align-last:left!important;
}

html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__toggle:focus,
html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__toggle:focus-visible{
  outline:0!important;
  box-shadow:none!important;
}

html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__eyebrow,
html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__title,
html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__hint{
  display:block!important;
  border:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  text-align:left!important;
  text-align-last:left!important;
}

html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-card__body{
  margin-top:12px;
  padding-top:12px;
}
/* NI_CONVERGENCE: listing drawer history text alignment.
 * Kept implementation: horizontal mini history cards align product text to the left.
 */
html body .ni-listing-sidebar .ni-sidebar-card--history .ni-sidebar-history__list{
  align-items:stretch;
}

html body .ni-listing-sidebar .ni-sidebar-card--history .ni-history-product{
  border:0!important;
  border-radius:16px!important;
  background:rgba(255,253,249,.70)!important;
  background-image:none!important;
  box-shadow:none!important;
}

html body .ni-listing-sidebar .ni-history-product__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start!important;
  justify-content:center;
  width:100%;
  min-width:0;
  text-align:left!important;
  text-align-last:left!important;
}

html body .ni-listing-sidebar .ni-history-product__title,
html body .ni-listing-sidebar .ni-history-product__price{
  align-self:stretch;
  width:100%;
  text-align:left!important;
  text-align-last:left!important;
}

/* NI_LISTING_TOOLBAR_FILTER_RWD_ROOTFIX
 * Kept implementation: page-listing.css owns category/search/brand toolbar, filter dropdown and mobile product-card rhythm.
 * Retired implementation: update sort chip and mobile pill-style explore button.
 */

/* Pagination paint: frontend-pagination.css (global canonical owner). */

/* NI_BRAND_LIST_RWD_REDESIGN_CANONICAL
 * Target page: /brand.php all-brand index, body .ni-page-brand-list.
 * Kept implementation: modern ni-listing-shell + ni-brand-* card system.
 * Retired implementation: legacy .block / .AreaL / .AreaR / .brandBox layout for this page.
 */
html body.ni-page-brand-list{
  background:var(--ni-color-page,#fdfbf8)!important;
  color:var(--ni-color-text,#5d514b)!important;
}

html body.ni-page-brand-list .ni-page-brand-list__shell{
  width:min(var(--ni-page-max,960px),calc(100% - 32px))!important;
  max-width:var(--ni-page-max,960px)!important;
  margin:0 auto 40px!important;
  padding:0!important;
  background:transparent!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-list-main{
  gap:18px!important;
}

html body.ni-page-brand-list .ni-brand-list-hero{
  align-items:center!important;
  min-height:132px!important;
  margin:4px 0 18px!important;
  border-color:rgba(222,200,188,.58)!important;
  background:
    radial-gradient(circle at 10% -20%,rgba(255,240,232,.94) 0%,rgba(255,240,232,0) 48%),
    radial-gradient(circle at 92% 18%,rgba(248,218,219,.36) 0%,rgba(248,218,219,0) 36%),
    linear-gradient(180deg,rgba(255,253,249,.98) 0%,rgba(251,244,238,.86) 100%)!important;
}

html body.ni-page-brand-list .ni-brand-list-hero .ni-listing-hero__title{
  color:var(--ni-color-heading,#4e372f)!important;
}

html body.ni-page-brand-list .ni-brand-list-hero .ni-listing-hero__text{
  max-width:560px!important;
}

html body.ni-page-brand-list .ni-brand-list-panel{
  overflow:hidden!important;
  border:1px solid rgba(222,200,188,.50)!important;
  border-radius:30px!important;
  background:rgba(255,253,249,.72)!important;
  box-shadow:0 12px 32px rgba(120,90,80,.055)!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-list-panel__head{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:0!important;
  padding:18px 24px 16px!important;
  border-bottom:1px solid rgba(219,195,181,.36)!important;
  background:linear-gradient(180deg,rgba(251,244,238,.76) 0%,rgba(255,253,249,.62) 100%)!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-list-panel__explore,
html body.ni-page-brand-list button.ni-brand-list-panel__explore{
  appearance:none!important;
  -webkit-appearance:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#9b6463!important;
  font-family:var(--ni-font-body,"Noto Sans TC",Arial,sans-serif)!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.3!important;
  letter-spacing:.04em!important;
  text-decoration:none!important;
  cursor:pointer!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-list-panel__explore::before{
  margin-right:6px!important;
  font-size:12px!important;
  line-height:1!important;
}

html body.ni-page-brand-list .ni-brand-list-panel__explore:hover,
html body.ni-page-brand-list .ni-brand-list-panel__explore:focus-visible{
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#a76468!important;
  transform:none!important;
  outline:0!important;
}

html body.ni-page-brand-list .ni-brand-grid,
html body.ni-page-brand-list #brandList.ni-brand-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  width:100%!important;
  margin:0!important;
  padding:18px!important;
  background:transparent!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-card{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-card__link{
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:218px!important;
  height:100%!important;
  padding:16px!important;
  overflow:hidden!important;
  border:1px solid rgba(222,200,188,.58)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,rgba(255,253,249,.96) 0%,rgba(252,247,242,.86) 100%)!important;
  color:var(--ni-color-text,#5d514b)!important;
  text-decoration:none!important;
  box-shadow:0 10px 24px rgba(120,90,80,.052)!important;
  box-sizing:border-box!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease!important;
}

html body.ni-page-brand-list .ni-brand-card__link::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  width:96px!important;
  height:96px!important;
  right:-54px!important;
  top:-54px!important;
  border-radius:999px!important;
  background:rgba(248,218,219,.28)!important;
  pointer-events:none!important;
}

html body.ni-page-brand-list .ni-brand-card__link:hover,
html body.ni-page-brand-list .ni-brand-card__link:focus{
  border-color:rgba(201,110,116,.42)!important;
  background:#fffdf9!important;
  color:var(--ni-color-text,#5d514b)!important;
  text-decoration:none!important;
  transform:translateY(-2px)!important;
  box-shadow:0 16px 34px rgba(120,90,80,.10)!important;
  outline:0!important;
}

html body.ni-page-brand-list #brandList .ni-brand-card__head,
html body.ni-page-brand-list .ni-brand-card__head{
  display:block!important;
  min-width:0!important;
  margin:0 0 12px!important;
  background:transparent!important;
  background-color:transparent!important;
}

html body.ni-page-brand-list #brandList .ni-brand-card__title,
html body.ni-page-brand-list .ni-brand-card__title{
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  color:var(--ni-color-heading,#4e372f)!important;
  font-family:var(--ni-font-heading,"Noto Serif TC","PMingLiU",serif)!important;
  font-size:17px!important;
  font-weight:900!important;
  line-height:1.35!important;
  letter-spacing:.035em!important;
  text-align:left!important;
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
}

html body.ni-page-brand-list .ni-brand-card__media{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:1 1 auto!important;
  min-height:96px!important;
  margin:0!important;
  padding:14px!important;
  overflow:hidden!important;
  border-radius:20px!important;
  background:rgba(251,244,238,.72)!important;
  box-sizing:border-box!important;
}

html body.ni-page-brand-list .ni-brand-card__media img{
  display:block!important;
  width:auto!important;
  max-width:100%!important;
  height:auto!important;
  max-height:88px!important;
  margin:0 auto!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html body.ni-page-brand-list .ni-brand-card__no-logo{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:82px!important;
  min-height:34px!important;
  padding:0 14px!important;
  border:1px solid rgba(219,195,181,.46)!important;
  border-radius:999px!important;
  background:rgba(255,253,249,.78)!important;
  color:#b58e86!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.16em!important;
  text-transform:uppercase!important;
}

html body.ni-page-brand-list .ni-brand-card__desc{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  min-height:38px!important;
  margin:12px 0 0!important;
  overflow:hidden!important;
  color:var(--ni-color-muted,#8a766f)!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1.6!important;
  text-align:left!important;
}

html body.ni-page-brand-list .ni-brand-card__desc.is-empty{
  color:#a9958e!important;
}

html body.ni-page-brand-list .ni-brand-list-empty{
  grid-column:1 / -1!important;
  margin:0!important;
  padding:28px!important;
  border:1px dashed rgba(219,195,181,.58)!important;
  border-radius:24px!important;
  background:rgba(255,250,246,.62)!important;
  color:var(--ni-color-muted,#8a766f)!important;
  text-align:left!important;
}

html body.ni-page-brand-list .ni-brand-list-empty strong{
  display:block!important;
  margin:6px 0!important;
  color:var(--ni-color-heading,#4e372f)!important;
  font-size:18px!important;
}

html body.ni-page-brand-list .ni-brand-list-empty p{
  margin:0!important;
  font-size:13px!important;
  line-height:1.7!important;
}

@media (max-width:960px){
  html body.ni-page-brand-list .ni-page-brand-list__shell{
    width:calc(100% - 24px)!important;
  }

  html body.ni-page-brand-list .ni-brand-list-hero{
    align-items:flex-start!important;
  }

  html body.ni-page-brand-list .ni-brand-grid,
  html body.ni-page-brand-list #brandList.ni-brand-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding:14px!important;
  }

  html body.ni-page-brand-list .ni-brand-card__link{
    min-height:204px!important;
  }
}

@media (max-width:700px){
  html body.ni-page-brand-list .ni-page-brand-list__shell{
    width:calc(100% - 16px)!important;
    margin-bottom:24px!important;
  }

  html body.ni-page-brand-list .ni-brand-list-hero{
    min-height:0!important;
    margin:7px 0 13px!important;
    padding:18px 16px 16px!important;
    border-radius:24px!important;
  }

  html body.ni-page-brand-list .ni-brand-list-panel{
    border-radius:24px!important;
  }

  html body.ni-page-brand-list .ni-brand-list-panel__head{
    padding:18px 16px 14px!important;
  }

  html body.ni-page-brand-list .ni-brand-grid,
  html body.ni-page-brand-list #brandList.ni-brand-grid{
    gap:10px!important;
    padding:12px!important;
  }

  html body.ni-page-brand-list .ni-brand-card__link{
    min-height:188px!important;
    padding:12px!important;
    border-radius:20px!important;
  }

  html body.ni-page-brand-list .ni-brand-card__title{
    font-size:15px!important;
  }

  html body.ni-page-brand-list .ni-brand-card__media{
    min-height:82px!important;
    padding:10px!important;
    border-radius:16px!important;
  }

  html body.ni-page-brand-list .ni-brand-card__media img{
    max-height:74px!important;
  }
}

@media (max-width:480px){
  html body.ni-page-brand-list .ni-brand-grid,
  html body.ni-page-brand-list #brandList.ni-brand-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  html body.ni-page-brand-list .ni-brand-card__link{
    min-height:168px!important;
  }
}

/* NI_LISTING_DRAWER_CATEGORY_VERTICAL_CANONICAL
 * Target: category/search/brand/brand-list mobile explore drawer.
 * Kept implementation: one-column category tree inside the drawer.
 * Retired implementation: responsive.css row carousel for .ni-sidebar-category-group.
 */
html body .ni-listing-sidebar[data-ni-listing-sidebar]{
  overflow-x:hidden!important;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-card--category,
html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-card--category .ni-sidebar-card__head,
html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-card--category #category_tree,
html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-card--category .ni-sidebar-category-tree{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-card--category .ni-sidebar-category-tree{
  gap:8px!important;
  overflow-x:hidden!important;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-category-group{
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:8px 0!important;
  box-sizing:border-box!important;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-category-group__title,
html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-category-group__title a{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  text-align:left!important;
  text-align-last:left!important;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-category-group__children{
  display:flex!important;
  flex:0 0 auto!important;
  flex-direction:column!important;
  flex-wrap:nowrap!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  gap:4px!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:7px 0 0!important;
  padding:0!important;
  box-sizing:border-box!important;
}

html body .ni-listing-sidebar[data-ni-listing-sidebar] .ni-sidebar-category-group__children a{
  display:block!important;
  flex:0 0 auto!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:28px!important;
  padding:5px 0 5px 16px!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  word-break:break-word!important;
  text-align:left!important;
  text-align-last:left!important;
}