/* Motion layer: progressively enhanced; content remains readable without JS. */
.application-card.beyond-card { background:#252729; border:1px solid #ffffff1c; }
.beyond-card p { color:#bfc1c3; }
/* Chroma-style whole-card reveal, including the caption and outer border. */
.catalog-page:has(#product-grid) .catalog-main { width:100%; max-width:1800px; margin-inline:auto; }
.product-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:18px; align-items:stretch; }
.product-card { --card-accent:#e977aa; position:relative; isolation:isolate; display:flex; flex-direction:column; padding:10px; border:1px solid #ffffff20; border-radius:20px; background:#1c1b1f; overflow:hidden; box-shadow:0 5px 14px #0002; transition:border-color .4s,box-shadow .4s,background .4s; }
.product-card::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0; background:radial-gradient(circle 330px at var(--spot-x,50%) var(--spot-y,50%),color-mix(in srgb,var(--card-accent) 54%,transparent),transparent 85%); transition:opacity 1s ease; }
.product-card::after { content:""; position:absolute; inset:0; pointer-events:none; padding:1px; border-radius:inherit; opacity:0; background:radial-gradient(circle 330px at var(--spot-x,50%) var(--spot-y,50%),var(--card-accent),color-mix(in srgb,var(--card-accent) 55%,transparent) 65%,transparent); mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite:exclude; transition:opacity 1s ease; }
.product-card-image { position:relative; flex-shrink:0; width:100%; aspect-ratio:1; border:0; border-radius:12px; background:#1b1b1e; }
.product-card-image img { filter:grayscale(.3) brightness(.68); transition:filter .6s ease; }
.product-card:hover img { transform:none; }
.product-card h2 { margin:18px 10px 6px; font-size:clamp(16px,1.15vw,20px); line-height:1.4; color:#ceccd2; transition:color .4s; }
.product-card .product-code { margin:0 10px 12px; color:#a7a5ac; font-size:13px; }
.product-card:hover h2 { color:#fff; }
.product-card:focus-visible { outline:2px solid var(--card-accent); outline-offset:3px; }
.product-card:focus-visible::before,.product-card:focus-visible::after { opacity:1; }
.product-card:focus-visible .product-card-image img { filter:brightness(1.04) saturate(1.04); }
.product-card:focus-visible { background:#302b34; border-color:var(--card-accent); box-shadow:0 0 22px color-mix(in srgb,var(--card-accent) 22%,transparent); }
.product-card:focus-visible h2 { color:#fff; }
@media(hover:hover) and (pointer:fine) {
  .product-card:hover { border-color:color-mix(in srgb,var(--card-accent) 90%,transparent); background:#302b34; box-shadow:0 6px 22px #0004,0 0 22px color-mix(in srgb,var(--card-accent) 22%,transparent); }
  .product-card:hover::before,.product-card:hover::after { opacity:1; }
  .product-card:hover .product-card-image img { filter:brightness(1.04) saturate(1.04); }
}
@media(max-width:440px) {
  .product-grid { gap:14px; }
  .product-card { padding:7px; border-radius:17px; }
  .product-card-image { border-radius:10px; }
  .product-card h2 { margin:12px 5px 5px; font-size:15px; }
  .product-card .product-code { margin:0 5px 7px; font-size:11px; }
}
@media(max-width:520px) { .product-grid { grid-template-columns:minmax(0,1fr); } }
/* Rounded multi-select paths; no outer trunk beside the section headings. */
.filter-tree { position:relative; padding:0 0 10px; margin:8px 0 24px; }
.filter-tree .filter-group { border:0; padding:0 0 22px; }
.filter-tree .filter-group:last-child { padding-bottom:0; }
.weight-group .weight-filter { min-width:0; padding:12px 0 8px; border:0; }
.filter-tree .filter-group>summary { position:relative; margin:0; padding:7px 24px 7px 0; list-style:none; font-size:16px; line-height:1.5; font-weight:600; color:#aaa; }
.filter-tree summary::-webkit-details-marker { display:none; }
.filter-tree .filter-group[open]>summary { color:#f5f5f5; }
.filter-tree .filter-group>summary::after { content:""; position:absolute; right:5px; top:16px; width:5px; height:5px; border-right:1px solid #888; border-bottom:1px solid #888; rotate:-45deg; transition:rotate .3s; }
.filter-tree .filter-group[open]>summary::after { rotate:45deg; }
.filter-tree .filter-choices { display:block; margin:10px 0 0 10px; }
.filter-subtree { margin-left:15px; padding-bottom:8px; }
.filter-branch { position:relative; padding-left:24px; }
.filter-branch::before { content:""; position:absolute; left:0; top:0; bottom:0; width:1.5px; background:#3f3f46; transition:background .25s; pointer-events:none; }
.filter-branch:has(~ .filter-branch :checked)::before { background:#f5f5f5; z-index:1; }
.filter-branch:last-child::before { display:none; }
.filter-option { position:relative; display:flex; align-items:center; min-height:42px; gap:9px; padding:7px 0 7px 4px; border-radius:0; color:#949498; font-size:13px; line-height:1.6; transition:color .2s; }
.filter-option::before { content:""; position:absolute; left:-24px; top:0; height:50%; width:22px; border-left:1.5px solid #3f3f46; border-bottom:1.5px solid #3f3f46; border-bottom-left-radius:14px; transition:border-color .25s; pointer-events:none; }
.filter-option::after { display:none; }
.filter-option.filter-child { margin:0; padding-left:4px; }
.has-children>.filter-option { color:#c6c6c9; font-weight:600; }
.filter-option:hover,.filter-option:has(:checked) { color:#f5f5f5; background:none; }
.filter-branch:has(:checked)>.filter-option::before { border-color:#f5f5f5; }
.filter-option input { appearance:none; position:relative; width:15px; height:15px; margin:0; border:1.5px solid #69696f; border-radius:4px; background:transparent; cursor:pointer; transition:border-color .2s,background .2s; }
.filter-option input:checked { background:#f5f5f5; border-color:#f5f5f5; }
.filter-option input:checked::after { content:""; position:absolute; left:3px; top:1px; width:4px; height:7px; border:solid #18181b; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.filter-option:has(input:focus-visible) { outline:1px solid #aaa; outline-offset:3px; border-radius:4px; }
.filter-option input:focus-visible { outline:none; }
.filter-tree .filter-empty { padding:10px 0; }
.filter-group[open]>.filter-choices { animation:branch-draw .4s ease both; transform-origin:top left; }
@keyframes branch-draw { from { opacity:0; clip-path:inset(0 0 100% 0); } to { opacity:1; clip-path:inset(0); } }
.product-thumbnails { --push:clamp(6px,1vw,16px); gap:0; padding:18px 12px 34px; overflow-x:hidden; }
.product-thumbnails button { border-radius:clamp(8px,1.5vw,25px); border-width:3px; border-color:#ddd; margin-top:-12%; transform:translateY(var(--shift,0px)) rotate(var(--rotation,0deg)); transition:transform .55s cubic-bezier(.2,1.5,.4,1),border-color .25s; box-shadow:0 5px 10px #0006; }
.product-thumbnails button:first-child { margin-top:0; }
.product-thumbnails button:hover,.product-thumbnails button:focus-visible { transform:scale(1.06); z-index:2; }
.product-thumbnails button[aria-pressed=true] { border-color:var(--button-accent); }
.thumb-enter { animation:thumb-arrive .7s cubic-bezier(.2,1.5,.4,1) both; animation-delay:var(--delay,0s); }
@keyframes thumb-arrive { from { opacity:0; translate:25px 20px; } to { opacity:1; translate:0; } }
.navigation-drawer { padding:0; overflow:hidden; background:transparent; color:#111; }
.navigation-drawer[open] { animation:none; box-shadow:none; }
.drawer-panel { position:absolute; inset:0; pointer-events:none; transform:translateX(100%); }
.drawer-panel-1 { background:#434442; z-index:0; }
.drawer-panel-2 { background:#a6a5a0; z-index:1; }
.drawer-panel-3 { background:#fff; z-index:2; }
.navigation-drawer[open] .drawer-panel { animation:menu-panel-in .68s cubic-bezier(.22,1,.36,1) both; }
.navigation-drawer[open] .drawer-panel-2 { animation-delay:.11s; }
.navigation-drawer[open] .drawer-panel-3 { animation-delay:.22s; }
.drawer-content { position:relative; z-index:3; display:flex; flex-direction:column; width:100%; height:100%; min-height:0; padding:28px 40px 48px; overflow-y:auto; overscroll-behavior:contain; }
.navigation-drawer[open] .drawer-content { animation:menu-content-in .3s .91s both; }
@keyframes menu-panel-in { from { transform:translateX(100%); } to { transform:translateX(0); } }
@keyframes menu-content-in { from { opacity:0; } to { opacity:1; } }
@media(max-width:600px) { .drawer-content { padding:20px 28px 36px; } }
.navigation-drawer .drawer-close,.navigation-drawer .drawer-back,.navigation-drawer .drawer-links>a,.navigation-drawer .drawer-links>button { color:#111; border-color:#0003; }
.navigation-drawer .application-navigation-group h3,.navigation-drawer .application-navigation-group ul { border-color:#0003; }
.navigation-drawer .catalog-message { color:#444; }
.navigation-drawer .catalog-retry { color:#111; border-color:#777; }
.navigation-drawer a:hover,.navigation-drawer button:hover { color:var(--button-accent); }
.drawer-links>* { animation:menu-item .5s both; animation-delay:calc(.91s + var(--item-delay,.1s)); }
@keyframes menu-item { from { opacity:0; transform:translate(25px,12px); } to { opacity:1; transform:none; } }
.motion-char { display:inline-block; position:relative; }
:lang(zh) .contact h2>.motion-char { inline-size:auto; }
.motion-word { display:inline-block; white-space:nowrap; }
.split-heading .motion-char { transition:transform .35s cubic-bezier(.2,1.5,.4,1); }
@media(hover:hover) { .split-heading .motion-char:hover { transform:translateY(-.18em) rotate(-3deg); } }
.split-heading.motion-visible .motion-char { animation:letter-rise .75s both; animation-delay:var(--char-delay); }
@keyframes letter-rise { from { opacity:0; translate:0 .7em; } to { opacity:1; translate:0 0; } }
.split-heading.motion-pending .motion-char { opacity:0; }
.body-word { display:inline-block; transition:transform .25s ease,color .25s ease,text-shadow .25s ease; }
.body-word.body-punctuation { display:inline; }
.interactive-copy.motion-pending .body-word { opacity:0; }
.interactive-copy.motion-visible .body-word { animation:body-rise .55s cubic-bezier(.2,.7,.3,1) both; animation-delay:var(--word-delay); }
@keyframes body-rise { from { opacity:0; translate:0 10px; } to { opacity:1; translate:0 0; } }
@media(hover:hover) and (pointer:fine) {
  .interactive-copy .body-word:hover { transform:translateY(-3px); color:#111; text-shadow:0 0 .3px currentColor; }
}
.type-heading.motion-pending .motion-char { opacity:0; }
.type-heading.motion-visible .motion-char { animation:type-fade .18s both; animation-delay:var(--char-delay); }
@keyframes type-fade { from { opacity:0; } to { opacity:1; } }
.type-heading.typing-active .motion-char.is-typing::after { content:""; position:absolute; left:100%; bottom:.02em; margin-left:.04em; height:max(4px,.075em); width:.5em; background:currentColor; pointer-events:none; }
.footer-sticker { display:inline-block; position:relative; flex-shrink:0; perspective:600px; }
.footer-sticker img { display:block; transition:clip-path .4s,transform .4s; clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.footer-sticker::after { content:""; position:absolute; right:0; bottom:0; width:0; height:0; background:#bbb; clip-path:polygon(100% 0,100% 100%,0 100%); transition:width .4s,height .4s,transform .4s; transform-origin:bottom right; }
@media(hover:hover) {
  .footer-brand:hover .footer-sticker img { clip-path:polygon(0 0,100% 0,100% 85%,85% 100%,0 100%); transform:rotate(-2deg); }
  .footer-brand:hover .footer-sticker::after { width:15%; height:15%; transform:translate(-50%,-50%) rotate(180deg); }
  .footer-brand:active .footer-sticker img { clip-path:polygon(0 0,100% 0,100% 60%,60% 100%,0 100%); }
  .footer-brand:active .footer-sticker::after { width:40%; height:40%; }
}
@media(max-width:760px) { .product-thumbnails { padding-inline:5px; } .product-thumbnails button { border-width:2px; } }
@media(prefers-reduced-motion:reduce) {
  .navigation-drawer[open] .drawer-panel { transform:none; }
  .motion-pending .motion-char,.interactive-copy.motion-pending .body-word { opacity:1; }
  .interactive-copy .body-word:hover { transform:none; }
  .product-thumbnails button { transform:none!important; }
  .motion-char::after { display:none; }
}