body.equipment-list-page { margin: 0; color: #17283e; background: #f5f7fb; font-family: "Cabinet Grotesk", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
body.equipment-list-page *, body.equipment-list-page *::before, body.equipment-list-page *::after { box-sizing: border-box; }
.catalog-skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 12px 16px; border-radius: 8px; background: #fff; color: #14243b; transform: translateY(-150%); }
.catalog-skip-link:focus { transform: translateY(0); }
body.equipment-list-page { --catalog-header-slot: 90px; }
body.equipment-list-page [data-shared-header] { height: 0; }
.catalog-hero { position: relative; isolation: isolate; min-height: calc(374px + var(--catalog-header-slot)); overflow: hidden; color: #f5f7ff; background: radial-gradient(ellipse at 77% 58%, rgba(119, 63, 199, .34), transparent 34%), radial-gradient(ellipse at 7% 110%, rgba(27, 112, 227, .3), transparent 46%), linear-gradient(115deg, #071426 5%, #0b1930 52%, #17132d 100%); }
.catalog-hero::before { position: absolute; z-index: -1; inset: 0; content: ""; opacity: .17; background-image: linear-gradient(rgba(129, 166, 228, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 166, 228, .17) 1px, transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(90deg, transparent, #000 90%); }
.catalog-hero-inner { position: relative; display: flex; align-items: center; width: min(1240px, calc(100% - 80px)); min-height: calc(374px + var(--catalog-header-slot)); padding: calc(56px + var(--catalog-header-slot)) 0 49px; margin: 0 auto; }
.catalog-breadcrumb { position: absolute; top: calc(30px + var(--catalog-header-slot)); left: 0; display: flex; align-items: center; gap: 10px; color: #98a9c4; font-size: 12px; }
.catalog-breadcrumb a { display: inline-flex; align-items: center; min-height: 30px; color: #bdcbe0; text-decoration: none; }
.catalog-breadcrumb a:hover { color: #fff; }
.catalog-breadcrumb [aria-current="page"] { color: #eaf0fb; }
.catalog-hero-copy { position: relative; z-index: 2; width: min(690px, 68%); }
.catalog-eyebrow, .catalog-section-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; color: #a9bfe8; font-size: 11px; letter-spacing: .16em; }
.catalog-eyebrow > span { width: 7px; height: 7px; border-radius: 50%; background: #9c7aff; box-shadow: 0 0 14px #a582ff; }
.catalog-hero-copy h1 { margin: 0; color: #f3f6ff; font-size: clamp(36px, 4.2vw, 56px); font-weight: 620; line-height: 1.18; letter-spacing: -.055em; }
.catalog-hero-copy h1 span { color: #a9b7ff; }
.catalog-hero-intro { max-width: 630px; margin: 16px 0 0; color: #bac8dc; font-size: 14px; line-height: 1.85; }
.catalog-hero-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; margin-top: 24px; color: #dae4f4; font-size: 12px; }
.catalog-hero-facts i { width: 3px; height: 3px; border-radius: 50%; background: #997bff; }
.catalog-hero-grid { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg, transparent, #73a8f165 18%, #9c7aff6b 82%, transparent); }
.catalog-hero-lighting { position: absolute; z-index: 1; top: 50%; right: 1%; width: min(510px, 42vw); aspect-ratio: 620 / 360; transform: translateY(-44%); pointer-events: none; }
.catalog-hero-lighting img { display: block; width: 100%; height: 100%; object-fit: contain; filter: saturate(.9) drop-shadow(0 10px 32px #5082ff17); }
.catalog-browser { padding: 48px 0 64px; background: linear-gradient(180deg, #f4f6fa, #f8f9fc 65%, #f2f5fa); }
.catalog-browser-inner { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }
.catalog-browser-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.catalog-section-eyebrow { margin-bottom: 7px; color: #5875a0; font-size: 10px; }
.catalog-browser-heading h2 { margin: 0; color: #17283e; font-size: clamp(25px, 2.7vw, 34px); font-weight: 620; letter-spacing: -.04em; }
.catalog-used-link { display: inline-flex; align-items: center; gap: 22px; min-height: 42px; padding: 7px 0; border-bottom: 1px solid #9baabd; color: #425a78; font-size: 13px; text-decoration: none; transition: color 180ms ease, border-color 180ms ease; }
.catalog-used-link:hover { color: #0756d8; border-color: currentColor; }
.catalog-category-panel { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid #d7dfeb; border-radius: 12px; background: #fff; box-shadow: 0 6px 20px #18345608; }
.catalog-category-label { display: flex; align-items: center; gap: 11px; min-height: 44px; padding-right: 17px; border-right: 1px solid #e0e6ef; }
.catalog-category-icon { display: grid; flex: 0 0 auto; place-items: center; width: 38px; height: 38px; border: 1px solid #b6c6dd; border-radius: 10px; color: #3466ac; background: #eff5ff; font-size: 20px; }
.catalog-category-label strong, .catalog-category-label small { display: block; }
.catalog-category-label strong { color: #203752; font-size: 13px; }
.catalog-category-label small { margin-top: 4px; color: #77879b; font-size: 10px; }
.catalog-category-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.catalog-category-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 13px; border: 1px solid #c3cedd; border-radius: 8px; background: #f8faff; color: #405671; font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.catalog-category-filters button:hover { border-color: #6c96d4; background: #eef4ff; color: #1d56a7; }
.catalog-category-filters button[aria-pressed="true"] { border-color: #2264c2; background: linear-gradient(110deg, #2267d8, #515cd3); color: #fff; box-shadow: 0 4px 12px #2464ce32; }
.catalog-category-filters button:focus-visible, .catalog-used-link:focus-visible, .catalog-product-card:focus-visible, .catalog-cta-link:focus-visible { outline: 3px solid #466fe0; outline-offset: 3px; }
.catalog-filter-mark { display: grid; place-items: center; width: 18px; height: 18px; color: #5579a8; font-size: 14px; }
.catalog-category-filters button[aria-pressed="true"] .catalog-filter-mark { color: #fff; }
.catalog-products-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 26px 0 13px; }
.catalog-products-toolbar p { min-height: 20px; margin: 0; color: #314b69; font-size: 13px; font-weight: 570; }
.catalog-products-toolbar > span { display: inline-flex; align-items: center; gap: 8px; color: #77879b; font-size: 11px; }
.catalog-products-toolbar > span i { width: 6px; height: 6px; border-radius: 50%; background: #8098b9; }
.catalog-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 18px; margin-top: 25px; }
.catalog-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 32px; }
.catalog-pagination[hidden] { display: none; }
.catalog-pagination button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid #c8d3e4; border-radius: 8px; background: #fff; color: #3b5575; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; cursor: pointer; }
.catalog-pagination button:hover:not(:disabled) { border-color: #547fce; color: #1e5fbf; }
.catalog-pagination button[aria-current="page"] { border-color: #286bd6; background: linear-gradient(110deg, #286bd6, #6855d8); color: #fff; }
.catalog-pagination button:disabled { opacity: .45; cursor: default; }
.catalog-pagination button:focus-visible { outline: 3px solid #466fe0; outline-offset: 3px; }
.catalog-pagination > span { min-width: 18px; color: #6d7f9b; text-align: center; }
.catalog-page-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.catalog-product-card { display: flex; min-width: 0; min-height: 300px; border: 1px solid #dce3ed; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 5px 16px #16294409; overflow: hidden; transform: translateY(0) scale(1); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; }
.catalog-product-card:hover { z-index: 1; border-color: #a7bcda; box-shadow: 0 16px 34px #172d4918; transform: translateY(-4px) scale(1.015); }
.catalog-product-card-inner { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.catalog-product-art { position: relative; display: grid; place-items: center; min-height: 196px; aspect-ratio: 1.55; overflow: hidden; background: radial-gradient(ellipse at 50% 62%, #fff 0, #f0f4fa 63%, #e7edf6 100%); }
.catalog-product-art::after { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; height: 2px; background: #cbd8e9; content: ""; pointer-events: none; }
.catalog-product-art svg { position: absolute; inset: 14% 7% 7%; width: 86%; height: 78%; overflow: visible; }
.catalog-product-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.catalog-product-category { position: absolute; z-index: 1; top: 12px; left: 13px; display: inline-flex; align-items: center; min-height: 24px; padding: 4px 8px; border: 1px solid #ccd9ed; border-radius: 5px; background: #ffffffd9; color: #526985; font-size: 10px; }
.catalog-product-art-note { position: absolute; z-index: 1; right: 12px; bottom: 10px; color: #8392a6; font-size: 9px; letter-spacing: .03em; }
.catalog-product-copy { display: flex; flex: 1; flex-direction: column; padding: 16px 16px 15px; }
.catalog-product-type { color: #526d94; font-size: 10px; letter-spacing: .02em; }
.catalog-product-copy h3 { margin: 6px 0 0; color: #1b2f49; font-size: 18px; font-weight: 620; line-height: 1.4; }
.used-product-stock { display: flex; align-items: center; gap: 7px; margin-top: 7px; color: #236255; font-size: 12px; font-weight: 650; }
.used-product-stock::before { width: 7px; height: 7px; border-radius: 50%; background: #30a177; content: ""; }
.used-product-stock.is-sold { color: #9b4f4f; }
.used-product-stock.is-sold::before { background: #bd6464; }
.catalog-product-bottom { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
body.equipment-list-page[data-equipment-type="used"] .catalog-product-card { min-height: 280px; }
body.equipment-list-page[data-equipment-type="used"] .catalog-product-art { min-height: 166px; aspect-ratio: 1.8; }
body.equipment-list-page[data-equipment-type="used"] .catalog-product-copy { padding: 13px 14px 12px; }
body.equipment-list-page[data-equipment-type="used"] .catalog-product-copy h3 { margin-top: 4px; }
body.equipment-list-page[data-equipment-type="used"] .used-product-stock { margin-top: 5px; }
body.equipment-list-page[data-equipment-type="used"] .catalog-product-bottom { padding-top: 12px; }
.catalog-product-price { color: #1d3760; font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.15; }
.catalog-product-price small { display: block; margin-top: 6px; color: #8592a3; font-size: 9px; font-weight: 400; letter-spacing: 0; }
.catalog-product-detail { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; color: #285eaf; font-size: 11px; white-space: nowrap; }
.catalog-product-note { margin: 14px 0 0; color: #7b899b; font-size: 11px; line-height: 1.7; }
.catalog-action-status { margin: 12px 0 0; color: #325fa2; font-size: 12px; line-height: 1.6; }
.catalog-action-status:empty { display: none; }
.catalog-products-empty { grid-column: 1 / -1; padding: 48px 20px; border: 1px dashed #bac7d8; border-radius: 10px; color: #66788f; text-align: center; }
.catalog-cta { display: flex; align-items: center; gap: 17px; margin-top: 46px; padding: 23px 26px; border: 1px solid #d1dcf0; border-radius: 12px; background: radial-gradient(ellipse at 95% 20%, #d9dcff7d, transparent 39%), linear-gradient(110deg, #edf4ff, #f2f1ff); }
.catalog-cta-symbol { display: grid; flex: 0 0 auto; place-items: center; width: 48px; height: 48px; border: 1px solid #b9c9e8; border-radius: 12px; color: #426ac0; background: #ffffff9e; font-size: 22px; }
.catalog-cta > div:nth-child(2) { min-width: 0; }
.catalog-cta p { margin: 0 0 4px; color: #617693; font-size: 11px; }
.catalog-cta h2 { margin: 0; color: #1d3351; font-size: 16px; font-weight: 600; }
.catalog-cta-link, .catalog-cta > a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 22px; min-height: 42px; margin-left: auto; padding: 8px 16px; border: 1px solid #426ad0; border-radius: 7px; background: linear-gradient(105deg, #2868db, #6260d9); color: #fff; font-size: 12px; text-decoration: none; box-shadow: 0 4px 12px #3264bf2a; transition: filter 180ms ease, transform 180ms ease; }
.catalog-cta > a:hover { filter: brightness(1.08); transform: translateY(-1px); }
.used-recovery-entry { position: relative; display: flex; align-items: center; gap: 18px; margin: 34px 0 0; padding: 19px 22px; border: 1px solid #d8d4f2; border-radius: 12px; background: radial-gradient(ellipse at 90% 0%, #c8c2ff55, transparent 42%), linear-gradient(110deg, #f0f4ff, #f5f1ff); }
.used-recovery-icon { display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; border: 1px solid #c4c8ec; border-radius: 12px; color: #5a5cb4; background: #ffffffb8; }
.used-recovery-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.used-recovery-copy { min-width: 0; }
.used-recovery-eyebrow { margin: 0 0 4px; color: #6969a5; font-size: 9px; letter-spacing: .15em; }
.used-recovery-copy h2 { margin: 0; color: #1d3351; font-size: 16px; font-weight: 620; line-height: 1.45; }
.used-recovery-copy > p:last-child { margin: 5px 0 0; color: #697b95; font-size: 11px; line-height: 1.6; }
.used-recovery-entry > a { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 15px; min-height: 44px; margin-left: auto; padding: 8px 14px; border: 1px solid #685ac8; border-radius: 7px; background: linear-gradient(105deg, #7652cd, #496bd1); color: #fff; font-size: 11px; text-decoration: none; box-shadow: 0 4px 12px #574db528; transition: filter 180ms ease, transform 180ms ease; }
.used-recovery-entry > a:hover { filter: brightness(1.08); transform: translateY(-1px); }
.used-recovery-entry > a:focus-visible { outline: 3px solid #466fe0; outline-offset: 3px; }
@media (max-width: 1080px) { .catalog-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .catalog-category-panel { grid-template-columns: 1fr; gap: 12px; } .catalog-category-label { padding: 0 0 12px; border-right: 0; border-bottom: 1px solid #e0e6ef; } }
@media (max-width: 900px) { .catalog-hero-lighting { top: auto; right: -44px; bottom: -38px; width: 320px; opacity: .3; transform: none; } }
@media (max-width: 760px) { body.equipment-list-page { --catalog-header-slot: 76px; } .catalog-hero { min-height: calc(335px + var(--catalog-header-slot)); } .catalog-hero-inner { width: calc(100% - 40px); min-height: calc(335px + var(--catalog-header-slot)); padding: calc(83px + var(--catalog-header-slot)) 0 36px; } .catalog-breadcrumb { top: calc(23px + var(--catalog-header-slot)); gap: 8px; font-size: 11px; } .catalog-hero-copy { width: 100%; } .catalog-hero-copy h1 { font-size: clamp(33px, 8vw, 45px); } .catalog-hero-intro { max-width: 44em; font-size: 12px; } .catalog-hero-facts { gap: 9px; margin-top: 18px; font-size: 10px; } .catalog-hero-lighting { top: auto; right: -54px; bottom: -54px; width: 245px; opacity: .3; transform: none; } .catalog-browser { padding: 34px 0 46px; } .catalog-browser-inner { width: calc(100% - 40px); } .catalog-browser-heading { align-items: flex-start; margin-bottom: 17px; } .catalog-browser-heading h2 { font-size: 25px; } .catalog-used-link { min-height: 38px; gap: 9px; font-size: 11px; } .catalog-category-panel { padding: 13px; } .catalog-category-filters { gap: 7px; } .catalog-category-filters button { min-height: 42px; padding: 8px 10px; font-size: 11px; } .catalog-products-toolbar { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 20px; } .catalog-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .catalog-product-card { min-height: 314px; border-radius: 10px; } .catalog-product-art { min-height: 138px; aspect-ratio: 1.15; } .catalog-product-category { top: 8px; left: 8px; min-height: 21px; padding: 3px 6px; font-size: 9px; } .catalog-product-art-note { right: 8px; bottom: 7px; font-size: 8px; } .catalog-product-copy { padding: 12px 10px 11px; } .catalog-product-copy h3 { font-size: 15px; } .catalog-product-copy > p { min-height: 34px; font-size: 10px; } .catalog-product-bottom { align-items: flex-start; flex-direction: column; gap: 5px; padding-top: 12px; } .catalog-product-price { font-size: 19px; } .catalog-product-detail { min-height: 25px; font-size: 10px; } .catalog-product-note { font-size: 10px; } .catalog-cta { align-items: flex-start; flex-wrap: wrap; gap: 12px; margin-top: 32px; padding: 17px; } .catalog-cta-symbol { width: 40px; height: 40px; } .catalog-cta > div:nth-child(2) { flex: 1; padding-top: 1px; } .catalog-cta h2 { font-size: 14px; line-height: 1.6; } .catalog-cta > a { width: 100%; margin: 0; } }
@media (max-width: 760px) { .used-recovery-entry { align-items: flex-start; flex-wrap: wrap; gap: 11px; margin: 20px 0; padding: 15px; } .used-recovery-icon { width: 40px; height: 40px; } .used-recovery-copy { flex: 1; padding-top: 1px; } .used-recovery-copy h2 { font-size: 14px; } .used-recovery-entry > a { width: 100%; margin: 0; } .used-product-stock { font-size: 12px; } }
@media (max-width: 760px) { body.equipment-list-page[data-equipment-type="used"] .catalog-product-card { min-height: 280px; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-art { min-height: 126px; aspect-ratio: 1.25; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-copy { padding: 9px 9px 8px; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-copy h3 { margin-top: 4px; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-copy > p { min-height: 30px; margin-top: 5px; line-height: 1.5; } body.equipment-list-page[data-equipment-type="used"] .used-product-stock { margin-top: 4px; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-bottom { gap: 4px; padding-top: 8px; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-price { font-size: 18px; } }
@media (max-width: 380px) { .catalog-browser-inner, .catalog-hero-inner { width: calc(100% - 32px); } .catalog-category-filters button { gap: 5px; padding-inline: 8px; font-size: 10px; } .catalog-filter-mark { width: 14px; } .catalog-product-art { min-height: 120px; } body.equipment-list-page[data-equipment-type="used"] .catalog-product-art { min-height: 116px; } .catalog-product-copy h3 { font-size: 14px; } .catalog-hero-facts { gap: 7px; font-size: 9px; } }
@media (max-width: 760px) {
  .catalog-product-card { min-height: 258px; }
  body.equipment-list-page[data-equipment-type="used"] .catalog-product-card { min-height: 244px; }
}
@media (prefers-reduced-motion: reduce) { .catalog-product-card, .catalog-used-link, .catalog-category-filters button, .catalog-cta > a { transition: none; } .catalog-product-card:hover { transform: none; } }