/* Product catalog /product/: a light page of compact catalog cards. Details live on each product page. */
.page-product{--catnav-h:56px}

.catalog-intro{padding:clamp(48px,7vw,96px) 0 clamp(24px,3.5vw,44px)}
.catalog-intro .page-title{max-width:14em}

/* sticky category bar; site.js ([data-subnav]) marks the section in view with aria-current */
.catalog-nav{position:sticky;top:0;z-index:30;border-bottom:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
.catalog-nav-inner{display:flex;align-items:center;gap:6px;min-height:var(--catnav-h);overflow-x:auto;scrollbar-width:none}
.catalog-nav-inner::-webkit-scrollbar{display:none}
.catalog-nav a{flex:none;padding:6px 16px;border-radius:999px;font-size:14px;line-height:1.6;color:var(--ink-2);transition:background-color .3s var(--ease),color .3s var(--ease)}
.catalog-nav a:hover{background:#ececf0;color:var(--ink)}
.catalog-nav a[aria-current="true"]{background:var(--ink);color:#fff}
.catalog-nav a:focus-visible{outline-offset:2px;border-radius:999px}

.catalog-section{padding-top:clamp(48px,6vw,88px);scroll-margin-top:calc(var(--catnav-h) + 8px)}
.catalog-section .section-title{margin-bottom:clamp(20px,2.6vw,32px)}

/* catalog cards: picture, name, one line, key numbers, actions; the whole card opens the product page */
.product-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.product-card{display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--paper);transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.product-card.has-card-link:hover{box-shadow:0 18px 48px rgba(0,0,0,.08);transform:translateY(-2px)}
.product-card.has-card-link:active{transform:scale(.995)}
.product-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#e9e9ec}
.product-media picture{position:absolute;inset:0}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.product-media.is-studio{background:#dcdcdc}
.product-media.is-object{background:linear-gradient(180deg,#fbfbfd 0%,#ececf0 100%)}
.product-media.is-object picture{inset:clamp(20px,3vw,36px)}
.product-media.is-object img{object-fit:contain}
.product-card.has-card-link:hover .product-media img{transform:scale(1.03)}
.product-media .badge-soon{position:absolute;top:16px;left:16px}
.product-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:24px 28px 26px}
.product-name{font-size:clamp(28px,3vw,36px);line-height:1.15}
.product-name-cn{font-size:clamp(21px,2.1vw,25px);line-height:1.45}
.product-line{font-size:15px;line-height:1.75;color:var(--ink-2)}
.key-specs{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:6px}
.key-specs div{display:flex;flex-direction:column-reverse}
.key-specs dt{font-size:12px;line-height:1.6;color:var(--muted)}
.key-specs dd{font-size:22px;font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums}
.key-specs small{margin-left:2px;font-size:13px;font-weight:500;color:var(--ink-2)}
.product-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:auto;padding-top:14px}
.product-price{margin-top:4px;font-size:17px;font-weight:600}
.product-foot .link-arrow{font-size:15px}
.c-more{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:500;line-height:1.5;color:var(--link)}
.c-more svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.product-card.has-card-link:hover .c-more svg{transform:translateX(3px)}
.product-card.has-card-link:hover .c-more[target="_blank"] svg{transform:translate(2px,-2px)}

/* comparison: a table on wide screens; on phones each row becomes a label line over two values */
.compare{margin-top:20px;padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--paper)}
.compare-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}
.compare-summary::-webkit-details-marker{display:none}
.compare-summary:focus-visible{outline-offset:6px;border-radius:12px}
.compare-title{font-size:20px;line-height:1.45}
.compare-toggle{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:14px;color:var(--muted)}
.compare-toggle svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.compare[open] .compare-toggle svg{transform:rotate(180deg)}
.compare[open] .compare-summary{margin-bottom:14px}
.compare .data-table{min-width:0}
.compare .fine{margin-top:14px}

/* grouped lists: software and buying, one row per link */
.group-list{overflow:hidden;border-radius:24px;background:var(--paper)}
.group-list li{position:relative}
.group-list li + li::before{content:"";position:absolute;top:0;left:24px;right:0;height:1px;background:var(--line)}
.group-list a{display:flex;align-items:center;gap:16px;min-height:60px;padding:16px 22px 16px 24px;transition:background-color .2s}
.group-list a:hover{background:#ececf0}
.group-list a:focus-visible{outline-offset:-3px;border-radius:24px}
.gl-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.gl-text strong{font-size:17px;font-weight:600;line-height:1.5}
.gl-text span{font-size:14px;line-height:1.65;color:var(--muted)}
.group-list svg{width:16px;height:16px;color:var(--muted);transition:transform .25s var(--ease)}
.group-list a:hover svg{transform:translateX(2px)}
.group-list a[target="_blank"]:hover svg{transform:translate(2px,-2px)}
.buy-title{margin-bottom:14px;font-size:20px;line-height:1.45}
.catalog-end{padding-bottom:24px}

@media (max-width:760px){
  .product-pair{grid-template-columns:1fr;gap:16px}
  .product-card{border-radius:24px}
  .product-media{aspect-ratio:16/10}
  .product-body{gap:6px;padding:18px 20px 20px}
  .key-specs dd{font-size:20px}
  .catalog-intro{padding:40px 0 24px}
  .compare{padding:20px 18px}
  /* stacked rows: the table keeps its roles (set in the markup) for screen readers */
  .compare .table-wrap{overflow:visible}
  .compare .data-table,.compare .data-table thead,.compare .data-table tbody{display:block;font-size:14px}
  .compare .data-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .compare .data-table thead{position:sticky;top:var(--catnav-h);z-index:2;margin:0 -18px;padding:10px 18px;background:rgba(245,245,247,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  .compare .data-table thead th{padding:0;font-size:14px}
  .compare .data-table thead th:first-child{display:none}
  .compare .data-table tbody th{grid-column:1/-1;width:auto;padding:14px 0 4px;border-top:1px solid var(--line);font-size:13px}
  .compare .data-table tbody td{padding:0 0 14px;border-top:0}
  .group-list a{padding:14px 18px 14px 20px}
  .group-list li + li::before{left:20px}
}