/* Built by new/theme/build.py from stylesheet/src/ — edit the sources, not this file. */
.lst-pager { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.lst-pager__btn { min-width: 280px; }
.lst-pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.lst-pages__a { min-width: 36px; height: 36px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--r-8); font-weight: 500; }
.lst-pages__a.is-cur { background: var(--surface-2); font-weight: 700; }
@media (hover: hover) { a.lst-pages__a:hover { background: var(--surface-2); color: var(--ink); } }
.lst-pages__gap { min-width: 24px; text-align: center; color: var(--ink-3); }
@media (max-width: 767px) {
.lst-pager__btn { min-width: 0; width: 100%; }
.lst-pages__a { min-width: 44px; height: 44px; }
}
[data-page="listing"] [hidden] { display: none !important; }
html.lst-lock { overflow: hidden; }
.lst-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.lst-h__n { color: var(--ink-3); }
.lst-subs { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.lst-sub { display: flex; flex-direction: column; min-height: 168px; padding: 12px; border-radius: var(--r-16); background: var(--surface-2); }
@media (hover: hover) { .lst-sub:hover { background: var(--surface-4); color: var(--ink); } }
.lst-sub__t { font-weight: 700; hyphens: auto; overflow-wrap: anywhere; }
.lst-sub__n { margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-13); color: var(--ink-3); }
.lst-sub__img { display: block; margin-top: auto; padding-top: 8px; height: 80px; }
.lst-sub__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.lst-body { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 48px; align-items: start; margin-top: 40px; }
.lst-found { padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 700; }
.lst-fg { padding-top: 24px; }
.lst-fg--cat { padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.lst-fh { margin-bottom: 12px; font-size: var(--fs-16); line-height: 20px; font-weight: 700; }
.lst-up { display: flex; align-items: center; gap: 4px; min-height: 32px; }
.lst-up .ico { color: var(--ink-3); }
.lst-cur { display: block; margin: 4px 0 0 20px; padding: 6px 12px; border-radius: var(--r-8); background: var(--surface-2); }
.lst-cbs { display: grid; gap: 4px 12px; }
.lst-cbs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lst-cb { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; }
.lst-cb__in { position: absolute; left: 0; top: 6px; width: 20px; height: 20px; margin: 0; opacity: 0; }
.lst-cb__box {
flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--r-6);
background: var(--white); box-shadow: inset 0 0 0 1px var(--line-strong); color: transparent;
}
@media (hover: hover) { .lst-cb:hover .lst-cb__box { box-shadow: inset 0 0 0 1px var(--ink); } }
.lst-cb__in:checked + .lst-cb__box { background: var(--brand); box-shadow: none; color: var(--on-brand); }
.lst-cb__in:focus-visible + .lst-cb__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.lst-cb__l { min-width: 0; }
.lst-cb__n { color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.lst-cb--strong .lst-cb__l { font-weight: 700; }
.lst-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; color: var(--ink-3); font-weight: 500; }
@media (hover: hover) { .lst-more:hover { color: var(--ink); } }
.lst-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lst-pf { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: var(--r-12); border: 1px solid var(--line-strong); background: var(--white); cursor: text; }
.lst-pf span { margin-right: 6px; color: var(--ink-3); }
.lst-pf input { flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: none; font-size: var(--fs-16); }
.lst-pf input:focus { outline: none; }
.lst-pf:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.lst-range { position: relative; height: 24px; margin: 12px 10px 0; }
.lst-range__track, .lst-range__fill { position: absolute; top: 11px; height: 2px; }
.lst-range__track { left: 0; right: 0; background: var(--line); }
.lst-range__fill { background: var(--brand); }
.lst-range input {
position: absolute; top: 0; left: -10px; width: calc(100% + 20px); height: 24px; margin: 0;
-webkit-appearance: none; appearance: none; background: none; pointer-events: none;
}
.lst-range input::-webkit-slider-runnable-track { background: none; border: 0; }
.lst-range input::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; pointer-events: auto; width: 20px; height: 20px; border: 0; border-radius: 50%;
background: var(--brand); cursor: pointer;
}
.lst-range input::-moz-range-thumb { pointer-events: auto; width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--brand); cursor: pointer; }
.lst-range input:focus { outline: none; }
.lst-range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus); }
.lst-range input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus); }
.lst-sel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.lst-x { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-radius: var(--r-12); background: var(--surface-2); white-space: nowrap; }
.lst-x .ico { color: var(--ink-3); }
@media (hover: hover) { .lst-x:hover { background: var(--surface-4); } }
@media (hover: hover) { .lst-x:hover .ico { color: var(--ink); } }
.lst-clear { height: 32px; padding: 0 4px; color: var(--ink-3); font-weight: 500; white-space: nowrap; }
a.lst-clear { display: inline-flex; align-items: center; }
.lst-apply { width: 100%; margin-top: 24px; }
.lst-main { transition: opacity var(--d-150) var(--ease-std); }
.lst-body[aria-busy="true"] .lst-main { opacity: .6; }
@media (hover: hover) { .lst-clear:hover { color: var(--ink); } }
.lst-sort { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 16px; min-height: 32px; }
.lst-sort__l { color: var(--ink-3); margin-right: -8px; }
.lst-sort__o { color: var(--ink-3); text-align: center; }
@media (hover: hover) { .lst-sort__o:hover { color: var(--ink); } }
.lst-sort__o[aria-current] { color: var(--ink); font-weight: 500; }
.lst-sort__o::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 700; pointer-events: none; user-select: none; }
.lst-sort__n { margin-left: auto; color: var(--ink-3); }
.lst-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lst-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 24px; border-radius: var(--r-20); background: var(--surface-2); text-align: center; }
.lst-bar, .lst-cnt { display: none; }
.lst-sheet, .lst-bs, .lst-scrim { display: none; }
@media (max-width: 1279px) {
.lst-subs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lst-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
.lst-subs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lst-body { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 16px; }
.lst-side, .lst-sort { display: none; }
.lst-bar {
position: sticky; top: 0; z-index: 20; display: flex; gap: 8px;
margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter);
background: var(--white); overflow-x: auto; scrollbar-width: none;
}
.lst-bar::-webkit-scrollbar { display: none; }
.lst-bar.is-stuck { box-shadow: var(--sh-sticky); }
.lst-chip { flex: none; gap: 6px; min-width: 0; height: 36px; font-weight: 500; }
.lst-chip .ico { color: var(--ink-2); }
.lst-badge {
display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: var(--r-6);
background: var(--ink); color: var(--white); font-size: var(--fs-13); line-height: 1; font-weight: 700;
}
.lst-sel { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 4px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); }
.lst-sel::-webkit-scrollbar { display: none; }
.lst-x, .lst-clear { flex: none; }
.lst-cnt { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 12px; font-size: var(--fs-13); line-height: var(--lh-13); }
.lst-sheet { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--white); }
.lst-sheet__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.lst-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-12); background: var(--surface-3); }
@media (hover: hover) { .lst-close:hover { background: var(--surface-4); } }
.lst-sheet__b { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; }
.lst-sheet__stock { padding: 12px 0; border-bottom: 1px solid var(--line); }
.lst-acc { border-bottom: 1px solid var(--line); }
.lst-acc__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 56px; padding: 8px 0; text-align: left; }
.lst-acc__h b { display: block; font-size: var(--fs-16); line-height: 20px; }
.lst-acc__s { display: block; margin-top: 2px; color: var(--ink-3); font-size: var(--fs-13); line-height: var(--lh-13); }
.lst-acc__h .ico { flex: none; color: var(--ink-3); transition: transform var(--d-150) var(--ease-std); }
.lst-acc__h[aria-expanded="true"] .ico { transform: rotate(180deg); }
.lst-acc__b { padding-bottom: 16px; }
.lst-sheet .lst-cbs--2 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lst-sheet .lst-cb { min-height: 40px; }
.lst-sheet .lst-cb__in { top: 10px; }
.lst-sheet__f { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--white); }
.lst-scrim { position: fixed; inset: 0; z-index: 65; display: block; background: var(--ink); opacity: .4; }
.lst-bs {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: block;
border-radius: var(--r-20) var(--r-20) 0 0; background: var(--white); box-shadow: var(--sh-pop);
padding-bottom: calc(12px + env(safe-area-inset-bottom));
}
.lst-bs .lst-sheet__h { border-bottom: 0; padding-top: 12px; }
.lst-bs__b { padding: 0 16px; }
.lst-radio { display: flex; align-items: center; gap: 12px; min-height: 52px; border-bottom: 1px solid var(--line); cursor: pointer; }
.lst-radio:last-child { border-bottom: 0; }
.lst-radio__in { position: absolute; opacity: 0; width: 1px; height: 1px; }
.lst-radio__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.lst-radio__in:checked + .lst-radio__dot { box-shadow: inset 0 0 0 6px var(--brand); }
.lst-radio__in:checked ~ * { font-weight: 500; }
.lst-radio__in:focus-visible + .lst-radio__dot { outline: 2px solid var(--focus); outline-offset: 2px; }
.lst-radio[aria-current] .lst-radio__dot { box-shadow: inset 0 0 0 6px var(--brand); }
.lst-radio[aria-current] { font-weight: 500; }
}
@media (max-width: 767px) {
[data-page="listing"] .hdr-fixed .hdr-main__in { height: auto; }
.lst .crumbs { padding: 12px 0 8px; }
.lst .crumbs li:not(:nth-last-child(2)) { display: none; }
.lst .crumbs li:nth-last-child(2)::before { content: "‹"; margin-right: 6px; }
.lst-h .h23 { font-size: var(--fs-20); line-height: var(--lh-20); }
.lst-h__n { font-size: var(--fs-13); line-height: var(--lh-13); }
.lst-subs {
grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 31%; gap: 8px; margin: 12px calc(-1 * var(--gutter)) 0;
padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
}
.lst-subs::-webkit-scrollbar { display: none; }
.lst-sub { min-height: 140px; padding: 12px; scroll-snap-align: start; }
.lst-sub__t { font-size: var(--fs-13); line-height: var(--lh-13); }
.lst-sub__img { height: 60px; }
.lst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lst-grid .tile__meta { flex-wrap: wrap; row-gap: 4px; }
.lst-grid .tile__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.lst-empty { padding: 40px 16px; border-radius: var(--r-16); }
}
.prose { max-width: 720px; }
.prose > * + * { margin-top: 12px; }
.prose h2 { margin-top: 32px; font-size: var(--fs-20); line-height: var(--lh-20); font-weight: 700; }
.prose h3 { margin-top: 24px; font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 700; }
.prose > h2 + *, .prose > h3 + * { margin-top: 8px; }
.prose ul { padding-left: 20px; list-style: disc; }
.prose ol { padding-left: 20px; list-style: decimal; }
.prose li + li { margin-top: 4px; }
.prose a { color: var(--link); }
@media (hover: hover) { .prose a:hover { text-decoration: underline; } }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); line-height: var(--lh-14); }
.prose th { padding: 0 16px 8px 0; text-align: left; vertical-align: bottom; font-size: var(--fs-13); line-height: var(--lh-13); font-weight: 400; color: var(--ink-3); }
.prose td { padding: 10px 16px 10px 0; vertical-align: top; border-top: 1px solid var(--line); }
.prose td:first-child { font-weight: 500; }
.prose th, .prose td { min-width: 6.5em; }
.cat-intro { max-width: 720px; margin-top: 8px; color: var(--ink-2); }
.app-nodes__h + .cat-intro { margin: -8px 0 16px; }
.cat-more { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.cat-text > h2:first-child { margin-top: 0; }
.cat-text + .cat-rel { margin-top: 40px; }
.cat-rel__h { margin-bottom: 12px; font-size: var(--fs-18); line-height: var(--lh-18); font-weight: 700; }
.cat-rel .tag { height: auto; min-height: 32px; padding: 6px 12px; }
@media (max-width: 767px) {
.app-nodes__h + .cat-intro { margin-bottom: 12px; }
.cat-more { padding-top: 24px; }
}