.careers-page { width:min(calc(100% - 48px),1200px); margin:auto; padding:32px 0 80px; min-height:75vh; }
.careers-top { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 0 24px; }
.careers-top h1 { font-size:28px; font-weight:600; }.careers-top nav { display:flex; gap:32px; font-size:14px; color:#777; }.careers-top a[aria-current=page] { color:#000c3c; font-weight:600; }
.careers-hero svg { display:block; width:100%; aspect-ratio:881/496; }
.career-tabs { display:flex; justify-content:center; gap:48px; border-bottom:1px solid #ddd; margin:28px 0; }.career-tabs button,.career-categories button { background:none; border:0; border-bottom:2px solid transparent; padding:16px 0; font:inherit; cursor:pointer; }.career-tabs button { font-size:24px; }.career-tabs button[aria-pressed=true],.career-categories button[aria-pressed=true] { font-weight:600; border-bottom-color:#000c3c; }
.career-search { display:flex; gap:12px; max-width:640px; margin:28px auto 40px; }.career-search input { min-width:0; flex:1; border:1px solid #bbb; border-radius:40px; padding:10px 20px; font:inherit; }
.career-categories { display:flex; gap:24px; flex-wrap:wrap; border-bottom:1px solid #ddd; }.career-lead { margin:24px 0; color:#666; line-height:1.7; }.career-filters { display:flex; gap:16px; margin-bottom:24px; }.career-filters select { border:1px solid #ddd; border-radius:24px; padding:8px 16px; background:#fff; font:inherit; }.career-empty { padding:56px 24px; background:#f6f6f6; color:#777; text-align:center; }
.location-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.location-grid article { background:#f6f6f6; }.location-grid article[hidden] { display:none; }.location-visual svg { width:100%; display:block; aspect-ratio:434/286; }.location-copy { padding:24px; }.location-copy h2 { font-size:26px; margin-bottom:12px; }.location-copy p { font-size:16px; line-height:1.7; }.location-copy a { display:inline-block; margin-top:16px; color:#006d9c; }.location-placeholder { aspect-ratio:434/286; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:12px; background:#eef0f3; color:#9ca5b5; letter-spacing:4px; font-size:28px; }.location-placeholder span { font-size:18px; letter-spacing:2px; }
@media(max-width:767px) { .careers-page { width:calc(100% - 40px); padding-top:24px; }.careers-top { align-items:flex-start; flex-direction:column; }.careers-top nav { gap:24px; width:100%; overflow:auto; white-space:nowrap; padding-bottom:8px; }.careers-top h1 { font-size:24px; }.career-tabs button { font-size:20px; }.career-categories { gap:16px; font-size:14px; }.career-filters { flex-wrap:wrap; }.location-grid { grid-template-columns:1fr; }.location-copy h2 { font-size:22px; }.career-search { gap:8px; }.career-search .cta { width:80px; }.career-search input { padding-inline:12px; } }
.career-invitation { padding:64px 24px 32px; text-align:center; }
.career-invitation h2 { font-size:32px; font-weight:600; line-height:1.5; }
.career-invitation > p { margin-top:20px; font-size:18px; line-height:1.8; color:#666; }
.career-invitation-actions { display:flex; justify-content:center; align-items:center; gap:24px; flex-wrap:wrap; margin-top:32px; }
.career-email { font-size:16px; overflow-wrap:anywhere; }
@media(max-width:767px) { .career-invitation { padding:36px 0 8px; }.career-invitation h2 { font-size:24px; }.career-invitation > p { font-size:16px; }.career-invitation-actions { flex-direction:column; gap:20px; }.career-email { font-size:14px; } }
.boss-recruit-link { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 20px; border-radius:12px; background:#00bebd; color:#fff; }
.boss-wordmark { display:inline-flex; align-items:center; gap:5px; line-height:1; }
.boss-wordmark b { font-family:Arial,sans-serif; font-size:24px; font-weight:800; letter-spacing:-1px; }
.boss-wordmark > span { font-size:20px; font-weight:700; }
.boss-recruit-link:hover { background:#00bebd; color:#fff; }
.careers-hero > img { display:block; width:100%; aspect-ratio:881/496; object-fit:cover; object-position:center; }
.careers-hero > img { height:auto; }
.product-page-image { width:100%; overflow:hidden; background:#f6f6f6; }
.product-page-image img { width:100%; height:auto; display:block; }
.product-feature { scroll-margin-top:110px; }
.product-feature + .product-feature { margin-top:40px; }
.product-tabs button { padding:12px 0; border:0; border-bottom:2px solid transparent; background:transparent; color:#777; font:inherit; white-space:nowrap; cursor:pointer; }
.product-tabs button[aria-selected=true] { color:#000c3c; font-weight:600; border-bottom-color:#000c3c; }
.product-page .product-page-image img { height:480px; object-fit:cover; object-position:center; }
@media(max-width:767px) { .product-page .product-page-image img { height:280px; } .product-tabs { gap:20px; } }
/* Match the recruitment homepage image proportions at every viewport. */
.product-page .product-page-image img { height:auto; aspect-ratio:881/496; object-fit:cover; object-position:center; }
/* Recruitment categories share the product category treatment. */
.career-category-nav a { display:inline-block; padding:12px 0; border-bottom:2px solid transparent; color:#777; font:inherit; white-space:nowrap; }
.careers-top .career-category-nav a[aria-current=page] { color:#000c3c; font-weight:600; border-bottom-color:#000c3c; }
@media(max-width:767px) { .careers-top .career-category-nav { gap:20px; } }
.product-purchase-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:18px; }
.product-purchase-actions .cta { white-space:nowrap; }
.product-purchase-actions button:disabled { background:#888; color:#fff; cursor:not-allowed; }
@media(max-width:600px) { .product-purchase-actions { gap:12px; } }
/* Product actions size to their labels, including the longer store-locator label. */
.product-purchase-actions .cta { width:auto; min-width:128px; max-width:100%; padding-inline:28px; flex-shrink:0; }
@media(max-width:600px) { .product-purchase-actions .cta { min-width:160px; white-space:normal; height:auto; min-height:40px; padding:10px 24px; line-height:1.5; } }
/* Center the product group in the supplied right-weighted composition. */
.product-page .product-page-image img[src$="tabletennis-collection-lossless-web-20260924.webp"] { object-position:right center; transform:scale(1.25); transform-origin:right 75%; }

/* Center the four tennis products using the same framing as the collection. */
.product-page .product-page-image img[src="assets/tennis-collection-lossless-web-20260924.webp"] { object-position:right center; transform:scale(1.25); transform-origin:right 75%; }
/* Normalize product-group height and platform baseline across all three tabs. */
.product-page .product-page-image { position:relative; aspect-ratio:881/496; background:#080704; }
.product-page .product-page-image img { position:absolute; display:block; max-width:none; height:auto; aspect-ratio:auto; transform:none; object-fit:initial; }
.product-page .product-page-image img[src$="tabletennis-collection-lossless-web-20260924.webp"] { width:175.3%; left:-69.2%; top:-27.1%; transform:none; }
.product-page .product-page-image img[src="assets/tennis-collection-lossless-web-20260924.webp"] { width:233.8%; left:-107.6%; top:-50.1%; transform:none; }
.product-page .product-page-image img[src$="education-solution-cover-lossless-web-20260924.webp"] { width:133.9%; left:-18.96%; top:-15.1%; transform:none; }


.purchase-page { min-height:65vh; padding-bottom:100px; }
.purchase-breadcrumb { display:flex; gap:12px; align-items:center; color:#777; font-size:14px; margin-bottom:40px; }
.purchase-breadcrumb a:hover { color:#000; text-decoration:underline; }
.purchase-page > h1 { text-align:center; font-size:32px; }
.purchase-channels { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; max-width:840px; margin:72px auto 0; }
.purchase-channel { display:flex; flex-direction:column; align-items:center; gap:24px; padding:32px 16px; }
.purchase-icon { width:104px; height:104px; display:grid; place-items:center; background:#f5f5f5; border-radius:24px; }
.purchase-icon img { object-fit:contain; }
.purchase-channel h2 { font-size:20px; font-weight:500; }
@media(max-width:600px) { .purchase-channels { gap:8px; margin-top:40px; } .purchase-channel { padding:20px 0; gap:16px; } .purchase-icon { width:72px; height:72px; border-radius:18px; } .purchase-page > h1 { font-size:26px; } }

/* Scene files are cropped at native resolution; no runtime reframing. */
.product-page .product-page-image img[src$="-cropped.png"] { position:static; width:100%; max-width:100%; height:auto; aspect-ratio:auto; transform:none; object-fit:contain; object-position:center; }
/* Recruitment artwork is cropped in the source file, with no additional cropping. */
.careers-hero > img { width:100%; height:auto; aspect-ratio:auto; object-fit:contain; transform:none; }
/* Each tab slides along its position in the category row. */
.product-slide-viewport { position:relative; overflow:hidden; isolation:isolate; }
.product-slide-viewport > #product-panel { position:relative; width:100%; }
.product-slide-viewport > .product-slide-outgoing { position:absolute; inset:0 auto auto 0; width:100%; pointer-events:none; }
.location-visual > img { display:block; width:100%; height:auto; aspect-ratio:434/286; }
/* Official high-resolution app artwork, without a second background tile. */
.purchase-icon { background:transparent; border-radius:24px; overflow:hidden; }
.purchase-icon img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
@media(max-width:600px) { .purchase-icon { border-radius:18px; } }


.purchase-channel { color:inherit; text-decoration:none; } .purchase-channel:focus-visible { outline:2px solid #0091d2; outline-offset:4px; border-radius:24px; } .purchase-channel:hover h2 { color:#0091d2; }
#experience-advisor-dialog { margin:auto; border:0; border-radius:16px; padding:48px 32px 32px; width:min(420px,calc(100vw - 32px)); max-height:90vh; overflow:auto; text-align:center; background:#fff; color:#000c3c; }
#experience-advisor-dialog::backdrop { background:rgba(0,0,0,.65); }
#experience-advisor-dialog h2 { font-size:22px; margin:0 0 24px; }
#experience-advisor-dialog img { display:block; width:100%; max-width:280px; height:auto; margin:auto; }
.advisor-close { position:absolute; top:8px; right:12px; border:0; background:transparent; color:#000c3c; font-size:28px; width:36px; height:36px; }
/* Match the established WeChat QR dialog layout. */
#experience-advisor-dialog { width:min(400px,calc(100vw - 32px)); padding:40px 24px 28px; border-radius:8px; color:#161616; max-height:calc(100dvh - 32px); }
#experience-advisor-dialog h2 { font-size:20px; font-weight:400; line-height:1.5; margin:0 0 20px; }
#experience-advisor-dialog img { width:min(260px,100%); max-width:260px; height:auto; margin:0 auto; }
#experience-advisor-help { font-size:16px; line-height:1.6; margin:20px 0 0; color:#666; }
#experience-advisor-dialog .advisor-close { top:4px; right:4px; width:44px; height:44px; padding:0; border-radius:0; background:#000; color:#fff; font-size:28px; line-height:44px; }
/* Switch between recruitment home and office locations. */
.career-slide-viewport { display:grid; grid-template-columns:minmax(0,1fr); overflow:hidden; }
.career-slide-panel { grid-area:1/1; min-width:0; align-self:start; }
.career-slide-panel[hidden] { display:none; }
/* Category tabs use the underline instead of a rectangular focus outline. */
.product-tabs button:focus { outline:none; }
.product-tabs button:focus-visible { border-bottom-color:#000c3c; border-bottom-width:3px; }