/* V83 revision 6: shared page canvas, scrolling mobile headers and an opaque bottom-navigation surface. */
html.cs-revamp { --cs-ink:#171719; --cs-muted:#67696d; --cs-paper:#f5f5f7; --cs-line:#e4e4e8; --cs-red:#df0924; --cs-ease:cubic-bezier(.22,1,.36,1); --cs-header:66px; scroll-behavior:smooth; scroll-padding-top:calc(var(--cs-header) + 18px); }
html.cs-revamp body { margin:0; background:var(--cs-paper); color:var(--cs-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang HK","Noto Sans TC",Arial,sans-serif; -webkit-text-size-adjust:100%; }
.cs-revamp *, .cs-revamp *::before, .cs-revamp *::after { box-sizing:border-box; }
.cs-revamp :is(button,input,select,textarea) { font:inherit; }
.cs-revamp :is(button,a,input,select,summary):focus-visible { outline:3px solid #b80020; outline-offset:4px; }
.cs-revamp :is(h1,h2,h3,p,li,td,th,dd) { overflow-wrap:break-word; }
.cs-revamp :is(input,select,textarea) { font-size:16px; }
.cs-revamp [hidden] { display:none!important; }
.cs-revamp .reveal { opacity:1!important; transform:none!important; }
.cs-revamp :is(.site-header,.top-header) { height:var(--cs-header)!important; min-height:var(--cs-header)!important; border-bottom:1px solid rgba(210,210,218,.7)!important; background:rgba(255,255,255,.92)!important; backdrop-filter:blur(22px) saturate(150%)!important; -webkit-backdrop-filter:blur(22px) saturate(150%)!important; }
.cs-revamp :is(.site-header,.top-header)>.header-inner { height:var(--cs-header)!important; max-width:1320px!important; gap:28px!important; padding:0 28px!important; }
.cs-revamp :is(.site-header,.top-header) .header-inner>.brand { width:128px!important; min-width:128px!important; flex-basis:128px!important; height:54px!important; }
.cs-revamp :is(.site-header,.top-header) .desktop-nav { gap:25px!important; }
.cs-revamp :is(.site-header,.top-header) .desktop-nav a { font-size:13px!important; font-weight:650!important; }
.cs-revamp :is(.site-header,.top-header) .desktop-nav a::after { height:2px!important; bottom:10px!important; }
.cs-revamp :is(.lang-switch,.language-switch) { box-shadow:none!important; }
.cs-revamp :is(.lang-switch,.language-switch) a { min-height:36px; display:grid!important; place-items:center; }
.cs-header-cart { border:0; color:#171719; background:transparent; width:44px; height:44px; padding:10px; position:relative; display:grid; place-items:center; flex:none; cursor:pointer; }
.cs-header-cart svg { width:22px; height:22px; }
.cs-cart-count { background:var(--cs-red); color:#fff; border-radius:20px; min-width:17px; height:17px; padding:0 4px; font-size:10px; font-weight:750; display:grid; place-items:center; position:absolute; right:1px; top:2px; line-height:1; }
.cs-cart-count:empty { display:none; }
.cs-bottom-nav, .cs-browser-underlay { display:none; }
/* R3: explicit canvas colour and a continuous opaque mobile navigation surface. */
html.cs-revamp { background-color:#fff; }
/* Let CJK glyphs and long translated headings occupy their complete line boxes. */
.cs-revamp :is(main,.page-shell) :is(h1,h2,h3,h4,h5,h6):not(.cardstop-static-hero-title):not(.sr-only):not(.cardstop-sr-only) { height:auto!important; max-height:none!important; line-height:1.4!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; -webkit-line-clamp:unset!important; overflow-wrap:anywhere; }
.cs-revamp :is(.eyebrow,.section-kicker,.category-badge,.market-field label,.market-source-line span,.market-summary-card>span,.market-summary-card>small) { height:auto!important; max-height:none!important; line-height:1.6!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; }
.cs-revamp :is(.breadcrumb,.market-ticker strong,.market-mover-list strong,.set-selector-grid strong,.preview-top strong) { height:auto!important; max-height:none!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.5!important; overflow-wrap:anywhere; }
.cs-revamp :is(.market-ticker,.market-mover-list)>* { min-width:0; }
.cs-revamp :is(.article-card p,.news-card-copy-v64>p) { display:block!important; height:auto!important; max-height:none!important; -webkit-line-clamp:unset!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; line-height:1.65!important; }
.cs-revamp .cardstop-footer { width:100%!important; max-width:none!important; min-width:0; margin:48px 0 0!important; background:#fff!important; border-top:1px solid var(--cs-line)!important; border-radius:0!important; padding:32px 0!important; }
.cs-revamp .cardstop-footer .footer-logo { object-fit:contain!important; max-width:150px!important; height:78px!important; filter:none!important; }
.cs-revamp .cardstop-footer>:is(.footer-top,.footer-bottom,p,.cardstop-footer-v59-links) { width:calc(100% - 64px)!important; max-width:1264px!important; min-width:0; margin-inline:auto!important; }
.cs-revamp .cardstop-footer>.footer-top { flex-wrap:wrap; gap:20px!important; }
.cs-revamp .cardstop-footer>p { color:#62626b!important; font-size:12px!important; line-height:1.75!important; }
.cs-revamp .cardstop-footer .cardstop-footer-v59-links { justify-content:flex-start; gap:4px 24px; }
.cs-revamp .cardstop-footer .cardstop-footer-v59-links a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; line-height:1.5; }
.cs-revamp .social-icon-links a { min-width:44px; min-height:44px; display:grid; place-items:center; }
.cs-revamp .social-icon-links img { width:23px!important; height:23px!important; object-fit:contain; }
.cs-revamp :is(.cardstop-reading-nav,.set-seo-links,.set-intelligence-links-v73,.cardstop-footer-v59-links) { flex-wrap:wrap!important; }
.cs-revamp :is(.cardstop-reading-nav,.set-seo-links,.set-intelligence-links-v73) a { min-height:44px; display:inline-flex; align-items:center; }
.cs-revamp :is(.archive-intro,.news-intro-v64,.about-simple-hero,.market-hero) h1 { letter-spacing:-.035em!important; font-weight:750!important; line-height:1.2!important; }
.cs-revamp :is(.archive-intro,.news-intro-v64,.about-simple-hero,.market-hero) p { color:var(--cs-muted); }
.cs-revamp .cs-sheet { position:fixed; inset:0; z-index:250; display:flex; align-items:center; justify-content:center; background:rgba(14,16,20,.45); backdrop-filter:blur(5px); padding:24px; }
.cs-sheet-panel { background:#fff; color:var(--cs-ink); border-radius:24px; padding:26px; width:min(560px,100%); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; box-shadow:0 28px 100px #0003; animation:cs-sheet-in .26s var(--cs-ease); }
.cs-sheet-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:20px; }
.cs-sheet-head h2 { font-size:24px; margin:0; line-height:1.3; }
.cs-sheet-close { width:44px; height:44px; flex:none; padding:0; border:0; border-radius:50%; background:#f1f1f3; color:#222; font-size:27px; cursor:pointer; }
.cs-sheet-panel fieldset { border:0; margin:20px 0; padding:0; min-width:0; }
.cs-sheet-panel legend { font-size:14px; font-weight:700; margin-bottom:12px; }
.cs-filter-options { display:flex; flex-wrap:wrap; gap:8px; }
.cs-filter-options button { min-height:44px; padding:9px 15px; border:1px solid var(--cs-line); border-radius:13px; background:#f6f6f8; color:#424246; font-size:14px; cursor:pointer; }
.cs-filter-options button.active { background:#171719; color:#fff; border-color:#171719; }
.cs-sheet-panel select { width:100%; min-height:48px; padding:10px 12px; border:1px solid var(--cs-line); border-radius:12px; background:#f5f5f7; color:#171719; }
.cs-stock-check { display:flex; align-items:center; gap:12px; min-height:48px; font-size:16px; margin:18px 0; }
.cs-stock-check input { width:22px; height:22px; accent-color:var(--cs-red); }
.cs-sheet-actions { display:grid; grid-template-columns:1fr 2fr; gap:10px; padding-top:20px; border-top:1px solid var(--cs-line); }
.cs-sheet-actions button { min-height:48px; border:0; border-radius:14px; background:#f0f0f3; color:#171719; font-weight:650; cursor:pointer; }
.cs-sheet-actions button:last-child { background:var(--cs-red); color:#fff; }
.cs-revamp .cs-animated { animation:cs-content-in .22s var(--cs-ease) both; }
@keyframes cs-sheet-in { from { opacity:.5; transform:translateY(24px); } to { opacity:1; transform:none; } }
@keyframes cs-content-in { from { opacity:.4; transform:translateY(7px); } to { opacity:1; transform:none; } }
@keyframes cs-added { 40% { transform:scale(.92); } 100% { transform:scale(1); } }
@media(hover:hover) and (pointer:fine) {
 .cs-revamp :is(.product-card,.card-tile,.news-card-v65,.set-directory-list a,.home-focus-card) { transition:transform .22s var(--cs-ease),box-shadow .22s var(--cs-ease),border-color .18s ease; }
 .cs-revamp :is(.product-card,.card-tile,.news-card-v65,.set-directory-list a):hover { transform:translateY(-3px)!important; box-shadow:0 15px 35px rgba(24,24,32,.07)!important; border-color:#cdd0d5!important; }
}
@media(min-width:901px) and (max-width:1100px) {
 .cs-revamp :is(.site-header,.top-header)>.header-inner { gap:18px!important; padding-inline:22px!important; }
 .cs-revamp :is(.site-header,.top-header) .desktop-nav { gap:16px!important; }
 .cs-revamp :is(.site-header,.top-header) .desktop-nav a { font-size:12px!important; }
}
@media(max-width:900px) {
 html.cs-revamp { --cs-header:58px; scroll-padding-top:16px; background:#fff!important; }
 html.cs-revamp body { padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))!important; background:#fff!important; overflow-x:hidden; position:relative; }
 .cs-revamp body>:is(.site-shell,.page-shell) { min-width:0; width:100%; background:var(--cs-paper); overflow:visible!important; }
 .cs-revamp :is(.site-header,.top-header) { position:relative!important; top:auto!important; inset-block-start:auto!important; }
 .cs-revamp :is(.site-header,.top-header)>.header-inner { padding:0 14px!important; gap:8px!important; }
 .cs-revamp :is(.site-header,.top-header) .desktop-nav { display:none!important; }
 .cs-revamp :is(.site-header,.top-header) .header-inner>.brand { position:absolute!important; left:50%!important; top:50%!important; transform:translate(-50%,-50%)!important; width:112px!important; min-width:112px!important; height:52px!important; margin:0!important; }
 .cs-revamp .cs-header-cart { display:none; }
 .cs-revamp :is(.lang-switch,.language-switch) { margin-left:auto!important; }
 .cs-revamp :is(.lang-switch,.language-switch) a { min-width:31px!important; min-height:36px; padding:5px 7px!important; font-size:11px!important; }
 /* Keep the fixed navigation at the actual viewport edge. Safari may clip fixed painting behind its controls; the separate document-positioned underlay covers the content there. */
 .cs-bottom-nav { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:start; position:fixed; bottom:0; left:0; right:0; z-index:90; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); background:#fff; background-color:#fff; background-image:none; opacity:1; backdrop-filter:none; -webkit-backdrop-filter:none; border-top:1px solid #e2e2e6; border-radius:0; box-shadow:none; overflow:visible; isolation:auto; transform:none; }
 .cs-bottom-nav::after { content:none; display:none; }
 /* Bound the cover to the existing body. Its moving child cannot enlarge the
    document or create an endless scroll area at the bottom of the page. */
 .cs-browser-underlay { display:block; position:absolute; inset:0; z-index:89; margin:0; padding:0; border:0; overflow:hidden; pointer-events:none; }
 .cs-browser-underlay-fill { position:absolute; top:var(--cs-browser-underlay-top,100%); left:0; right:0; height:100vh; margin:0; padding:0; border:0; background:#fff; opacity:1; pointer-events:none; }
 .cs-bottom-nav a { min-height:49px; min-width:0; padding:4px 2px; display:flex; flex-direction:column; gap:3px; align-items:center; justify-content:center; color:#707176; font-size:10px; font-weight:650; line-height:1.5; text-decoration:none; position:relative; border-radius:12px; }
 .cs-bottom-nav a>span { white-space:normal; overflow:visible; text-align:center; }
 .cs-bottom-nav a[aria-current=page] { color:var(--cs-red); background:#fff2f4; }
 .cs-bottom-nav a:active { background:#f1f1f4; }
 .cs-bottom-nav svg { width:21px; height:21px; }
 .cs-bottom-nav .cs-cart-count { right:calc(50% - 23px); top:0; }
 .cs-revamp .cardstop-footer { margin-top:32px!important; padding:24px 0!important; }
 .cs-revamp .cardstop-footer>:is(.footer-top,.footer-bottom,p,.cardstop-footer-v59-links) { width:calc(100% - 28px)!important; }
 .cs-revamp .cardstop-footer>.footer-top { flex-direction:column!important; align-items:flex-start!important; gap:14px!important; }
 .cs-revamp .cardstop-footer .social-icon-links { justify-content:flex-start!important; }
 .cs-revamp .cardstop-footer :is(p,a) { line-height:1.6; }
 .cs-revamp .cs-sheet { align-items:flex-end; padding:0; }
 .cs-sheet-panel { width:100%; max-width:600px; padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px)); max-height:calc(100dvh - 36px); border-radius:24px 24px 0 0; }
 .cs-sheet-panel::before { content:""; display:block; width:36px; height:4px; border-radius:4px; background:#d8d8dd; margin:-12px auto 18px; }
 .cs-sheet-head h2 { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
 html.cs-revamp { scroll-behavior:auto!important; }
 .cs-revamp *, .cs-revamp *::before, .cs-revamp *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}