:root {
    --xyz-ink: #14213d;
    --xyz-muted: #667085;
    --xyz-navy: #102a56;
    --xyz-blue: #2258a5;
    --xyz-orange: #ff8a3d;
    --xyz-green: #13a78f;
    --xyz-line: #e4e9f2;
    --xyz-soft: #f4f7fb;
    --xyz-white: #fff;
    --xyz-shadow: 0 16px 42px rgba(16, 42, 86, .09);
    --xyz-radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.xyz-page { margin: 0; color: var(--xyz-ink); background: #f7f9fc; font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
.xyz-page a { color: inherit; text-decoration: none; }
.xyz-page button, .xyz-page input, .xyz-page select { font: inherit; }
.xyz-page button { color: inherit; }
.xyz-page img { display: block; max-width: 100%; }
.xyz-page [hidden] { display: none !important; }
.xyz-shell { min-height: 100vh; overflow: hidden; }
.xyz-wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.xyz-main { min-height: 55vh; padding-bottom: 72px; }
.xyz-glyph { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
.xyz-topbar { position: relative; z-index: 40; background: var(--xyz-white); box-shadow: 0 1px 0 rgba(16, 42, 86, .08); }
.xyz-navline { height: 72px; }
.xyz-navrow { height: 100%; display: flex; align-items: center; gap: 42px; }
.xyz-wordmark { color: var(--xyz-navy); font-size: 24px; font-weight: 900; letter-spacing: -.7px; white-space: nowrap; }
.xyz-wordmark::before { content: ""; display: inline-block; width: 11px; height: 28px; margin-right: 10px; vertical-align: -6px; border-radius: 8px 3px; background: linear-gradient(180deg, var(--xyz-orange), #ffb46f); transform: skew(-10deg); }
.xyz-backlink { display: none; }
.xyz-navlinks { display: flex; align-items: stretch; align-self: stretch; gap: 32px; }
.xyz-navlinks a { position: relative; display: flex; align-items: center; color: #536078; font-weight: 650; }
.xyz-navlinks a::after { content: ""; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background: var(--xyz-orange); border-radius: 3px 3px 0 0; transition: .2s; }
.xyz-navlinks a:hover, .xyz-navlinks a.is-current { color: var(--xyz-navy); }
.xyz-navlinks a.is-current::after { right: 0; left: 0; }
.xyz-navactions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.xyz-iconbutton, .xyz-servicebutton { border: 0; cursor: pointer; }
.xyz-iconbutton { width: 42px; height: 42px; display: grid; place-items: center; background: var(--xyz-soft); border-radius: 50%; }
.xyz-servicebutton { height: 42px; padding: 0 20px; color: #fff; background: var(--xyz-navy); border-radius: 11px; font-weight: 700; }
.xyz-searchtray { max-height: 0; overflow: hidden; visibility: hidden; background: #fff; border-top: 1px solid var(--xyz-line); transition: .25s; }
.xyz-searchtray.is-open { max-height: 76px; visibility: visible; }
.xyz-searchrow { height: 68px; display: grid; grid-template-columns: 22px 1fr 36px; align-items: center; gap: 10px; }
.xyz-searchrow input { width: 100%; border: 0; outline: 0; font-size: 16px; }
.xyz-searchrow button { border: 0; background: none; cursor: pointer; font-size: 25px; }

/* Shared */
.xyz-section { padding-top: 72px; scroll-margin-top: 20px; }
.xyz-sectionhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 25px; }
.xyz-sectionhead > div > span, .xyz-compacthead + span { color: var(--xyz-orange); font-size: 11px; font-weight: 850; letter-spacing: 1.8px; }
.xyz-sectionhead h2, .xyz-compacthead h2 { margin: 3px 0 0; color: var(--xyz-navy); font-size: 30px; line-height: 1.25; letter-spacing: -.5px; }
.xyz-sectionhead p, .xyz-compacthead p { margin: 5px 0 0; color: var(--xyz-muted); }
.xyz-sectionhead > a { color: var(--xyz-blue); font-weight: 750; }
.xyz-sectionhead > a b { color: var(--xyz-orange); font-size: 19px; }
.xyz-panel { background: #fff; border: 1px solid var(--xyz-line); border-radius: var(--xyz-radius); box-shadow: 0 8px 28px rgba(16, 42, 86, .05); }
.xyz-button { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; padding: 0 22px; border: 1px solid transparent; border-radius: 11px; cursor: pointer; font-weight: 750; transition: transform .18s, box-shadow .18s; }
.xyz-button:hover { transform: translateY(-1px); }
.xyz-buttonprimary { color: #fff !important; background: linear-gradient(135deg, var(--xyz-orange), #ff6d3b); box-shadow: 0 9px 20px rgba(255, 122, 55, .24); }
.xyz-buttonplain { color: var(--xyz-navy); background: #fff; border-color: #cfd7e5; }
.xyz-buttonghost { color: #fff !important; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.xyz-buttonwide { width: 100%; }
.xyz-crumbs { min-height: 56px; display: flex; align-items: center; gap: 9px; color: #8a94a7; font-size: 13px; }
.xyz-crumbs a:hover { color: var(--xyz-blue); }
.xyz-crumbs strong { color: #4f5c72; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xyz-emptycard { padding: 44px 24px; text-align: center; background: #fff; border: 1px dashed #cfd7e5; border-radius: var(--xyz-radius); color: var(--xyz-muted); }
.xyz-emptycard > span { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 12px; color: var(--xyz-blue); background: #edf4ff; border-radius: 50%; }
.xyz-emptycard h3, .xyz-emptycard p { margin: 5px 0; }

/* Home hero */
.xyz-homepage .xyz-main { background: linear-gradient(180deg, #edf3fb 0, #f7f9fc 570px); }
.xyz-hero { min-height: 455px; display: grid; grid-template-columns: 1.02fr .98fr; overflow: hidden; color: #fff; background: linear-gradient(120deg, #0d2753 0%, #163e79 58%, #176c83 100%); border-radius: 0 0 28px 28px; box-shadow: var(--xyz-shadow); }
.xyz-herocopy { padding: 68px 30px 60px 68px; position: relative; z-index: 2; }
.xyz-kicker { display: inline-flex; padding: 5px 11px; color: #ffcd9e; border: 1px solid rgba(255,204,157,.35); border-radius: 20px; background: rgba(255,255,255,.06); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.xyz-herocopy h1 { margin: 18px 0 14px; font-size: clamp(38px, 4vw, 58px); line-height: 1.13; letter-spacing: -2px; }
.xyz-herocopy h1 strong { color: #ffad69; font-weight: 900; }
.xyz-herocopy > p { max-width: 500px; margin: 0; color: #d7e3f7; font-size: 17px; }
.xyz-heroactions { display: flex; gap: 12px; margin-top: 30px; }
.xyz-heropoints { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; color: #c9d9ef; font-size: 13px; }
.xyz-heropoints span { display: flex; align-items: center; gap: 5px; }
.xyz-heropoints .xyz-glyph { width: 15px; height: 15px; color: #58d5b8; }
.xyz-heroart { position: relative; min-height: 420px; background: radial-gradient(circle at 54% 42%, rgba(83,182,214,.28), transparent 37%); }
.xyz-orbit { position: absolute; width: 292px; height: 292px; top: 66px; left: 46%; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; }
.xyz-orbit::before, .xyz-orbit::after { content: ""; position: absolute; inset: 33px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; transform: rotate(53deg); }
.xyz-orbit::after { inset: 79px -20px; }
.xyz-orbit > span { position: absolute; inset: 60px; display: grid; place-items: center; color: #b7e8f2; background: rgba(7,29,63,.65); border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 70px rgba(71,194,220,.25); }
.xyz-orbit > span .xyz-glyph { width: 86px; height: 86px; stroke-width: 1; }
.xyz-orbit i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #ffb26e; box-shadow: 0 0 0 7px rgba(255,178,110,.13); }
.xyz-orbit i:nth-of-type(1) { top: 17px; left: 63px; }.xyz-orbit i:nth-of-type(2) { right: -4px; top: 160px; background: #62dfc2; }.xyz-orbit i:nth-of-type(3) { bottom: 9px; left: 46px; background: #78aaff; }
.xyz-floatingnote { position: absolute; right: 48px; bottom: 55px; width: 205px; padding: 15px 17px 15px 48px; color: var(--xyz-ink); background: rgba(255,255,255,.94); border-radius: 14px; box-shadow: 0 18px 38px rgba(4,19,48,.25); }
.xyz-floatingnote::before { content: "✓"; position: absolute; left: 15px; top: 18px; width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--xyz-green); border-radius: 50%; }
.xyz-floatingnote b, .xyz-floatingnote small { display: block; }.xyz-floatingnote small { color: var(--xyz-muted); margin-top: 2px; }

/* Categories */
.xyz-categoryrail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.xyz-categorytile { position: relative; min-width: 0; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 13px; padding: 17px; background: #fff; border: 1px solid var(--xyz-line); border-radius: 16px; box-shadow: 0 5px 18px rgba(16,42,86,.04); transition: .2s; }
.xyz-categorytile:hover, .xyz-categorytile.is-current { transform: translateY(-2px); border-color: #9fb8e2; box-shadow: var(--xyz-shadow); }
.xyz-categorytile.is-current { background: #f5f9ff; }
.xyz-categorytile > span:nth-child(2) { min-width: 0; }
.xyz-categorytile strong, .xyz-categorytile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xyz-categorytile strong { color: var(--xyz-navy); font-size: 15px; }.xyz-categorytile small { margin-top: 2px; color: var(--xyz-muted); font-size: 12px; }
.xyz-categorytile > b { position: absolute; right: 8px; top: 8px; color: var(--xyz-green); }.xyz-categorytile > b .xyz-glyph { width: 15px; }
.xyz-categoryglyph { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; }
.xyz-categoryglyph .xyz-glyph { width: 25px; height: 25px; }
.xyz-tone-1 { color: #2b66b1; background: #eaf2ff; }.xyz-tone-2 { color: #168c84; background: #e5f7f3; }.xyz-tone-3 { color: #7854b9; background: #f1ebff; }.xyz-tone-4 { color: #d27132; background: #fff0e5; }.xyz-tone-5 { color: #c14d70; background: #ffeaf0; }.xyz-tone-6 { color: #64748b; background: #eef1f5; }

/* Product cards */
.xyz-productgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.xyz-productcard { overflow: hidden; background: #fff; border: 1px solid var(--xyz-line); border-radius: 17px; box-shadow: 0 6px 22px rgba(16,42,86,.055); transition: transform .2s, box-shadow .2s; }
.xyz-productcard:hover { transform: translateY(-4px); box-shadow: var(--xyz-shadow); }
.xyz-productvisual { position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background: #edf1f6; }
.xyz-productvisual img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.xyz-productcard:hover .xyz-productvisual img { transform: scale(1.025); }
.xyz-productvisual > span { position: absolute; top: 11px; left: 11px; padding: 4px 9px; color: #fff; background: rgba(16,42,86,.88); border-radius: 20px; font-size: 11px; font-weight: 750; }
.xyz-productinfo { padding: 15px; }
.xyz-productinfo h3 { height: 46px; margin: 0; overflow: hidden; font-size: 15px; line-height: 1.55; }
.xyz-productlabels { display: flex; gap: 6px; margin-top: 9px; }
.xyz-productlabels span { padding: 2px 7px; color: #257469; background: #e9f8f4; border-radius: 5px; font-size: 10px; }.xyz-productlabels span:first-child { color: #2e5f9b; background: #edf4ff; }
.xyz-productinfo > p { margin: 7px 0 0; color: #929bad; font-size: 11px; }
.xyz-productaction { min-height: 42px; display: flex; justify-content: space-between; align-items: flex-end; margin-top: 5px; }
.xyz-productaction strong { color: #f16435; font-size: 23px; line-height: 1; }.xyz-productaction strong:first-letter { font-size: 14px; }
.xyz-productaction a, .xyz-productaction button { padding: 7px 12px; color: #fff; background: var(--xyz-navy); border: 0; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; }
.xyz-productcard.is-soldout { opacity: .67; }.xyz-productcard.is-soldout .xyz-productvisual img { filter: grayscale(.65); }

/* FAQ, tutorial, flow, home news */
.xyz-faqgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.xyz-faqgrid details { overflow: hidden; background: #fff; border: 1px solid var(--xyz-line); border-radius: 14px; }
.xyz-faqgrid summary { min-height: 68px; display: grid; grid-template-columns: 36px 1fr 20px; align-items: center; gap: 10px; padding: 0 18px; cursor: pointer; list-style: none; color: var(--xyz-navy); font-weight: 750; }
.xyz-faqgrid summary::-webkit-details-marker { display: none; }
.xyz-faqgrid summary span { color: var(--xyz-orange); font-size: 12px; }.xyz-faqgrid summary b { font-size: 22px; transition: .2s; }
.xyz-faqgrid details[open] summary b { transform: rotate(45deg); }
.xyz-faqgrid details > div { padding: 0 18px 18px 64px; color: var(--xyz-muted); font-size: 13px; }
.xyz-tutorialgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.xyz-tutorialgrid article { display: grid; grid-template-columns: 45% 1fr; overflow: hidden; background: #fff; border: 1px solid var(--xyz-line); border-radius: 17px; }
.xyz-tutorialgrid article > div:last-child { padding: 24px; }
.xyz-tutorialgrid em { color: var(--xyz-orange); font-size: 11px; font-style: normal; font-weight: 800; }.xyz-tutorialgrid h3 { margin: 5px 0 8px; color: var(--xyz-navy); font-size: 19px; }.xyz-tutorialgrid p { margin: 0; color: var(--xyz-muted); font-size: 13px; }
.xyz-videocover { position: relative; min-height: 200px; display: grid; place-items: center; background: linear-gradient(145deg,#193f77,#0e7890); }
.xyz-videotwo { background: linear-gradient(145deg,#4d347f,#b55c71); }
.xyz-videocover::before { content: ""; width: 96px; height: 96px; border: 1px solid rgba(255,255,255,.22); border-radius: 24px; transform: rotate(12deg); }
.xyz-videocover button { position: absolute; width: 58px; height: 58px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.55); border-radius: 50%; cursor: pointer; backdrop-filter: blur(5px); }.xyz-videocover button .xyz-glyph { width: 28px; height: 28px; }
.xyz-videocover > span { position: absolute; right: 12px; bottom: 12px; padding: 3px 8px; color: #fff; background: rgba(0,0,0,.25); border-radius: 5px; font-size: 11px; }
.xyz-flowgrid { display: grid; grid-template-columns: repeat(4,1fr); overflow: hidden; background: #fff; border: 1px solid var(--xyz-line); border-radius: 18px; }
.xyz-flowgrid > div { position: relative; padding: 28px 23px; text-align: center; border-right: 1px solid var(--xyz-line); }.xyz-flowgrid > div:last-child { border: 0; }
.xyz-flowgrid i { position: absolute; top: 10px; right: 13px; color: #e4e9f1; font-size: 25px; font-style: normal; font-weight: 900; }
.xyz-flowgrid > div > span { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 12px; color: var(--xyz-blue); background: #edf4ff; border-radius: 16px; }.xyz-flowgrid h3 { margin: 0; font-size: 16px; }.xyz-flowgrid p { margin: 4px 0 0; color: var(--xyz-muted); font-size: 12px; }
.xyz-newsgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.xyz-newscard { display: grid; grid-template-columns: 135px 1fr; overflow: hidden; background: #fff; border: 1px solid var(--xyz-line); border-radius: 16px; }
.xyz-newsvisual { min-height: 175px; background: linear-gradient(145deg,#e7eef9,#cbd9ed); }.xyz-newsvisual img { width: 100%; height: 100%; object-fit: cover; }.xyz-newsvisual > span { height: 100%; display: grid; place-items: center; color: var(--xyz-blue); }.xyz-newsvisual .xyz-glyph { width: 50px; height: 50px; }
.xyz-newscopy { min-width: 0; padding: 15px; }.xyz-newscopy > div { display: flex; justify-content: space-between; gap: 8px; color: #929bad; font-size: 10px; }.xyz-newscopy em { color: var(--xyz-orange); font-style: normal; font-weight: 750; }.xyz-newscopy h3 { height: 43px; margin: 7px 0 5px; overflow: hidden; font-size: 14px; line-height: 1.5; }.xyz-newscopy p { height: 36px; margin: 0 0 6px; overflow: hidden; color: var(--xyz-muted); font-size: 11px; line-height: 1.6; }
.xyz-textlink { color: var(--xyz-blue) !important; font-size: 12px; font-weight: 750; }

/* Category page */
.xyz-categoryhero { min-height: 180px; display: flex; justify-content: space-between; align-items: center; padding: 35px 48px; color: #fff; background: linear-gradient(115deg,#102a56,#1b5487 70%,#168c88); border-radius: 20px; }
.xyz-categoryhero > div > span, .xyz-queryhero em, .xyz-newshero > div > span { color: #ffbc82; font-size: 11px; font-style: normal; font-weight: 850; letter-spacing: 1.5px; }.xyz-categoryhero h1 { margin: 5px 0; font-size: 34px; }.xyz-categoryhero p { margin: 0; color: #d6e2f2; }
.xyz-categoryheroicon { width: 96px; height: 96px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 28px; transform: rotate(6deg); }.xyz-categoryheroicon .xyz-glyph { width: 48px; height: 48px; }
.xyz-categorypicker { padding-top: 40px; }.xyz-compacthead { margin-bottom: 17px; }.xyz-compacthead h2 { font-size: 22px; }
.xyz-cataloghead { align-items: center; }.xyz-sortbox { display: flex; align-items: center; gap: 8px; color: var(--xyz-muted); }.xyz-sortbox select { height: 42px; padding: 0 34px 0 13px; color: var(--xyz-ink); background: #fff; border: 1px solid #d4dbe7; border-radius: 10px; outline: none; }
.xyz-feedstatus { display: flex; flex-direction: column; align-items: center; padding: 26px 0 0; color: var(--xyz-muted); }.xyz-feedstatus p { margin: 5px; }.xyz-feedstatus button { padding: 8px 20px; color: var(--xyz-blue); background: #fff; border: 1px solid #cbd5e3; border-radius: 9px; cursor: pointer; }.xyz-feedstatus > span { width: 24px; height: 24px; border: 3px solid #dbe3ef; border-top-color: var(--xyz-blue); border-radius: 50%; animation: xyz-spin .8s linear infinite; }
@keyframes xyz-spin { to { transform: rotate(360deg); } }

/* Query page */
.xyz-queryhero { min-height: 170px; display: flex; align-items: center; gap: 25px; padding: 34px 46px; color: #fff; background: linear-gradient(120deg,#102a56,#214e86); border-radius: 20px; }.xyz-queryhero > span { width: 82px; height: 82px; flex: 0 0 auto; display: grid; place-items: center; color: #ffb679; background: rgba(255,255,255,.08); border-radius: 24px; }.xyz-queryhero > span .xyz-glyph { width: 39px; height: 39px; }.xyz-queryhero h1 { margin: 4px 0; font-size: 32px; }.xyz-queryhero p { margin: 0; color: #d5e2f4; }
.xyz-querylayout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; margin-top: 28px; }.xyz-querypanel { padding: 28px; }.xyz-querypanel > header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }.xyz-querypanel h2, .xyz-queryhelp h2 { margin: 0; color: var(--xyz-navy); font-size: 23px; }.xyz-querypanel header p { margin: 3px 0 0; color: var(--xyz-muted); }.xyz-querypanel header > span { padding: 5px 10px; color: var(--xyz-green); background: #e8f8f4; border-radius: 20px; font-size: 11px; }
.xyz-tabbar { display: flex; gap: 7px; padding: 5px; background: #f0f3f8; border-radius: 12px; }.xyz-tabbar button { flex: 1; min-height: 43px; display: flex; justify-content: center; align-items: center; gap: 7px; border: 0; color: #69758a; background: transparent; border-radius: 9px; cursor: pointer; font-weight: 700; }.xyz-tabbar button.is-current { color: var(--xyz-navy); background: #fff; box-shadow: 0 4px 12px rgba(16,42,86,.08); }.xyz-tabbar .xyz-glyph { width: 17px; height: 17px; }
.xyz-tabpane { display: none; padding-top: 24px; }.xyz-tabpane.is-current { display: block; }
.xyz-field { display: block; margin-bottom: 17px; }.xyz-field > span, .xyz-paymentset legend { display: block; margin-bottom: 7px; color: #34425b; font-size: 13px; font-weight: 750; }.xyz-field > span b { color: #e04e3d; }.xyz-field > span small { color: var(--xyz-muted); font-weight: 400; }.xyz-field > div { position: relative; }.xyz-field > div > .xyz-glyph { position: absolute; top: 13px; left: 13px; width: 18px; height: 18px; color: #8591a5; }.xyz-field input { width: 100%; height: 45px; padding: 0 13px; border: 1px solid #d4dbe7; border-radius: 10px; outline: 0; transition: .2s; }.xyz-field > div > .xyz-glyph + input { padding-left: 42px; }.xyz-field input:focus { border-color: #7d9fd0; box-shadow: 0 0 0 3px rgba(45,96,168,.09); }.xyz-field > small { display: block; margin-top: 6px; color: #929bad; font-size: 11px; }
.xyz-formbuttons { display: flex; gap: 10px; }.xyz-infobox { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 18px; padding: 17px; color: #315b88; background: #edf5ff; border-radius: 12px; }.xyz-infobox .xyz-glyph { flex: 0 0 auto; }.xyz-infobox p { margin: 0; }.xyz-infobox strong, .xyz-infobox span { display: block; }.xyz-infobox span { margin-top: 2px; color: #68809d; font-size: 12px; }
.xyz-securityline { display: flex; align-items: center; gap: 7px; margin-top: 20px; padding-top: 16px; color: var(--xyz-green); border-top: 1px solid var(--xyz-line); font-size: 12px; }.xyz-securityline .xyz-glyph { width: 16px; }
.xyz-queryhelp { padding: 28px; }.xyz-sideicon { width: 50px; height: 50px; display: grid; place-items: center; margin-bottom: 15px; color: var(--xyz-blue); background: #edf4ff; border-radius: 14px; }.xyz-queryhelp ol { list-style: none; margin: 18px 0; padding: 0; }.xyz-queryhelp li { display: flex; gap: 11px; margin: 14px 0; }.xyz-queryhelp li > b { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; color: #fff; background: var(--xyz-navy); border-radius: 50%; font-size: 11px; }.xyz-queryhelp li strong, .xyz-queryhelp li small { display: block; }.xyz-queryhelp li small { color: var(--xyz-muted); }.xyz-queryhelp h3 { margin-bottom: 7px; }.xyz-queryhelp ul { margin: 0 0 19px; padding-left: 20px; color: var(--xyz-muted); font-size: 13px; }
.xyz-warningbox { padding: 12px 14px; color: #96602c; background: #fff5e8; border: 1px solid #f5d9b8; border-radius: 10px; font-size: 12px; }
.xyz-querymethods { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; margin-top: 22px; }.xyz-querymethods article { display: flex; gap: 13px; align-items: center; padding: 21px; background: #fff; border: 1px solid var(--xyz-line); border-radius: 14px; }.xyz-querymethods > article > .xyz-glyph { width: 30px; height: 30px; color: var(--xyz-blue); }.xyz-querymethods h3, .xyz-querymethods p { margin: 0; }.xyz-querymethods h3 { font-size: 15px; }.xyz-querymethods p { color: var(--xyz-muted); font-size: 11px; }

/* Product detail */
.xyz-buylayout { display: grid; grid-template-columns: minmax(0,1fr) 375px; align-items: start; gap: 22px; }.xyz-buymain { min-width: 0; }.xyz-productoverview { display: grid; grid-template-columns: minmax(280px,43%) 1fr; overflow: hidden; }.xyz-productimage { aspect-ratio: 1/1; padding: 0; border: 0; background: #eef2f7; cursor: zoom-in; }.xyz-productimage img { width: 100%; height: 100%; object-fit: contain; }.xyz-productsummary { padding: 31px; }.xyz-detailkicker { color: var(--xyz-orange); font-size: 10px; font-weight: 850; letter-spacing: 1.5px; }.xyz-productsummary h1 { margin: 8px 0 13px; color: var(--xyz-navy); font-size: 27px; line-height: 1.4; }.xyz-detailtags { display: flex; flex-wrap: wrap; gap: 7px; }.xyz-detailtags span { display: flex; align-items: center; gap: 4px; padding: 4px 8px; color: #315f94; background: #edf4ff; border-radius: 6px; font-size: 11px; }.xyz-detailtags .xyz-glyph { width: 13px; height: 13px; }.xyz-detailprice { display: flex; align-items: baseline; gap: 10px; margin-top: 19px; }.xyz-detailprice small { color: var(--xyz-muted); }.xyz-detailprice strong { color: #f16435; font-size: 34px; }.xyz-detailprice del { color: #a8b0bd; }.xyz-buyreminder { display: flex; gap: 10px; margin-top: 15px; padding: 13px; color: #7a5129; background: #fff5e8; border-radius: 10px; }.xyz-buyreminder > .xyz-glyph { flex: 0 0 auto; }.xyz-buyreminder p { margin: 0; }.xyz-buyreminder strong, .xyz-buyreminder span { display: block; }.xyz-buyreminder span { color: #96714d; font-size: 11px; }.xyz-miniflow { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: #68758b; font-size: 11px; }.xyz-miniflow span { display: flex; align-items: center; gap: 5px; }.xyz-miniflow b { width: 23px; height: 23px; display: grid; place-items: center; color: var(--xyz-blue); background: #edf4ff; border-radius: 50%; font-size: 9px; }.xyz-miniflow i { color: #bcc5d2; font-style: normal; }
.xyz-detailcontent { margin-top: 20px; padding: 26px; }.xyz-detailcontent .xyz-tabpane { padding: 25px 4px 4px; }
.xyz-richtext { color: #46536a; line-height: 1.9; }.xyz-richtext h1, .xyz-richtext h2, .xyz-richtext h3 { color: var(--xyz-navy); }.xyz-richtext img { max-width: 100%; height: auto; margin: 18px auto; border-radius: 12px; }.xyz-richtext a { color: var(--xyz-blue); text-decoration: underline; }.xyz-richtext table { width: 100%; border-collapse: collapse; }.xyz-richtext th, .xyz-richtext td { padding: 9px; border: 1px solid var(--xyz-line); }
.xyz-checkoutbox { position: sticky; top: 18px; padding: 24px; }.xyz-checkoutbox > header { display: flex; justify-content: space-between; align-items: flex-start; }.xyz-checkoutbox header span { color: var(--xyz-orange); font-size: 10px; font-weight: 850; letter-spacing: 1px; }.xyz-checkoutbox header h2 { margin: 1px 0 0; color: var(--xyz-navy); font-size: 22px; }.xyz-checkoutbox header em { padding: 4px 8px; color: var(--xyz-green); background: #e8f8f4; border-radius: 20px; font-size: 10px; font-style: normal; }
.xyz-checkoutproduct { display: grid; grid-template-columns: 58px 1fr; gap: 11px; align-items: center; margin: 17px 0; padding: 10px; background: var(--xyz-soft); border-radius: 11px; }.xyz-checkoutproduct img { width: 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 8px; }.xyz-checkoutproduct p { min-width: 0; margin: 0; }.xyz-checkoutproduct strong, .xyz-checkoutproduct span { display: block; }.xyz-checkoutproduct strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.xyz-checkoutproduct span { color: #f16435; font-weight: 800; }
.xyz-quantity { display: grid !important; grid-template-columns: 44px 1fr 44px; }.xyz-quantity button { border: 1px solid #d4dbe7; background: #f6f8fb; cursor: pointer; font-size: 19px; }.xyz-quantity button:first-child { border-radius: 10px 0 0 10px; }.xyz-quantity button:last-child { border-radius: 0 10px 10px 0; }.xyz-quantity input { border-radius: 0; text-align: center; }
.xyz-captcharow { display: grid !important; grid-template-columns: 1fr 115px; gap: 8px; }.xyz-captcharow img { width: 115px; height: 45px; object-fit: cover; border: 1px solid #d4dbe7; border-radius: 9px; cursor: pointer; }
.xyz-paymentset { margin: 0 0 16px; padding: 0; border: 0; }.xyz-paymentgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.xyz-paymentgrid button { position: relative; min-height: 45px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #d4dbe7; background: #fff; border-radius: 9px; cursor: pointer; }.xyz-paymentgrid button.is-current { color: var(--xyz-blue); border-color: #759bd0; background: #f1f6ff; }.xyz-paymentgrid button > b { display: none; margin-left: auto; }.xyz-paymentgrid button.is-current > b { display: block; }.xyz-paymentgrid .xyz-glyph { width: 16px; height: 16px; }
.xyz-checkoutnotice { display: flex; gap: 6px; padding: 10px; color: #4d6687; background: #edf5ff; border-radius: 8px; font-size: 11px; }.xyz-checkoutnotice .xyz-glyph { width: 15px; height: 15px; }.xyz-checkouttotal { display: flex; justify-content: space-between; align-items: center; margin: 17px 0; }.xyz-checkouttotal strong { color: #f16435; font-size: 26px; }.xyz-agreement { margin: 9px 0 0; color: #9aa3b2; text-align: center; font-size: 10px; }.xyz-mobilecheckout { display: none; }

/* News index */
.xyz-newshero { min-height: 245px; display: grid; grid-template-columns: 1fr 340px; align-items: center; overflow: hidden; padding: 40px 48px; color: #fff; background: linear-gradient(118deg,#102a56,#1b4f82 65%,#147f86); border-radius: 20px; }.xyz-newshero h1 { margin: 6px 0 8px; font-size: 38px; }.xyz-newshero p { max-width: 650px; margin: 0; color: #d6e3f3; }.xyz-newshero > div > div { display: flex; gap: 8px; margin-top: 21px; }.xyz-newshero em { padding: 4px 10px; color: #d8e8f8; background: rgba(255,255,255,.09); border-radius: 20px; font-size: 11px; font-style: normal; }.xyz-newsart { position: relative; height: 180px; }.xyz-newsart > span, .xyz-newsart > i, .xyz-newsart > b { position: absolute; display: grid; place-items: center; color: #d8e9fa; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(5px); }.xyz-newsart > span { width: 124px; height: 145px; left: 85px; top: 8px; border-radius: 25px; transform: rotate(-7deg); }.xyz-newsart > span .xyz-glyph { width: 53px; height: 53px; }.xyz-newsart > i, .xyz-newsart > b { width: 54px; height: 54px; border-radius: 16px; }.xyz-newsart > i { right: 24px; top: 17px; color: #8be0c8; }.xyz-newsart > b { left: 25px; bottom: 5px; color: #ffbd85; }.xyz-newsart i .xyz-glyph, .xyz-newsart b .xyz-glyph { width: 26px; height: 26px; }
.xyz-newstoolbar { min-height: 76px; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 22px; padding: 14px 18px; background: #fff; border: 1px solid var(--xyz-line); border-radius: 14px; }.xyz-newstoolbar nav { display: flex; flex-wrap: wrap; gap: 6px; }.xyz-newstoolbar nav a { padding: 7px 11px; color: #68758a; border-radius: 8px; font-size: 12px; font-weight: 700; }.xyz-newstoolbar nav a.is-current { color: #fff; background: var(--xyz-navy); }.xyz-newstoolbar > label { width: 280px; height: 42px; display: grid; grid-template-columns: 34px 1fr 55px; align-items: center; padding-left: 8px; border: 1px solid #d4dbe7; border-radius: 10px; }.xyz-newstoolbar label span { display: grid; place-items: center; color: #8792a5; }.xyz-newstoolbar input { min-width: 0; border: 0; outline: 0; }.xyz-newstoolbar button { height: 32px; margin-right: 4px; color: #fff; background: var(--xyz-blue); border: 0; border-radius: 7px; cursor: pointer; font-size: 12px; }
.xyz-newslistlayout { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 24px; margin-top: 45px; }.xyz-newsmain .xyz-sectionhead { margin-bottom: 18px; }.xyz-featuredarticle { display: grid; grid-template-columns: 42% 1fr; overflow: hidden; margin-bottom: 18px; background: #fff; border: 1px solid var(--xyz-line); border-radius: 17px; }.xyz-featuredvisual { min-height: 265px; background: linear-gradient(145deg,#dce7f6,#b9cae2); }.xyz-featuredvisual img { width: 100%; height: 100%; object-fit: cover; }.xyz-featuredvisual > span { height: 100%; display: grid; place-items: center; color: var(--xyz-blue); }.xyz-featuredvisual .xyz-glyph { width: 70px; height: 70px; }.xyz-featuredarticle > div { padding: 27px; }.xyz-featuredarticle em { color: var(--xyz-orange); font-size: 11px; font-style: normal; font-weight: 800; }.xyz-featuredarticle h2 { margin: 8px 0; color: var(--xyz-navy); font-size: 24px; line-height: 1.4; }.xyz-featuredarticle p { color: var(--xyz-muted); }.xyz-featuredarticle footer { display: flex; justify-content: space-between; align-items: center; color: #929bad; font-size: 12px; }
.xyz-newslist { display: grid; gap: 14px; }.xyz-newslist .xyz-newscard { grid-template-columns: 190px 1fr; }.xyz-newslist .xyz-newsvisual { min-height: 180px; }.xyz-newslist .xyz-newscopy { padding: 20px; }.xyz-newslist .xyz-newscopy h3 { height: auto; font-size: 18px; }.xyz-newslist .xyz-newscopy p { height: 46px; font-size: 12px; }
.xyz-newssidebar { display: grid; gap: 16px; }.xyz-newssidebar .xyz-panel { padding: 20px; }.xyz-newssidebar h2 { margin: 0 0 14px; color: var(--xyz-navy); font-size: 17px; }.xyz-sidecategories > a { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; color: #5f6d83; border-radius: 8px; }.xyz-sidecategories > a.is-current { color: var(--xyz-blue); background: #edf4ff; font-weight: 750; }.xyz-sidecategories b { min-width: 26px; padding: 1px 6px; text-align: center; background: #eef1f5; border-radius: 20px; font-size: 10px; }
.xyz-popularlist > a { display: grid; grid-template-columns: 29px 1fr; gap: 8px; align-items: start; padding: 10px 0; border-top: 1px solid #edf0f5; }.xyz-popularlist > a:first-of-type { border-top: 0; }.xyz-popularlist i { color: var(--xyz-orange); font-size: 11px; font-style: normal; font-weight: 850; }.xyz-popularlist span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 12px; line-height: 1.55; }
.xyz-newssupport { padding: 24px; color: #fff; text-align: center; background: linear-gradient(145deg,#163767,#1f5c89); border-radius: 17px; }.xyz-newssupport > span { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 10px; color: #ffbd85; background: rgba(255,255,255,.09); border-radius: 50%; }.xyz-newssupport h2 { margin: 0 !important; color: #fff !important; }.xyz-newssupport p { color: #d4e1f0; font-size: 12px; }.xyz-keywords div { display: flex; flex-wrap: wrap; gap: 7px; }.xyz-keywords span { padding: 4px 8px; color: #637188; background: #f0f3f7; border-radius: 6px; font-size: 10px; }
.xyz-pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }.xyz-pagination a, .xyz-pagination span { min-width: 36px; height: 36px; display: grid; place-items: center; padding: 0 9px; color: #69758a; background: #fff; border: 1px solid var(--xyz-line); border-radius: 8px; font-size: 12px; }.xyz-pagination a.is-current { color: #fff; background: var(--xyz-navy); border-color: var(--xyz-navy); }

/* Article */
.xyz-articlelayout { display: grid; grid-template-columns: minmax(0,1fr) 300px; align-items: start; gap: 24px; }.xyz-articlebody { overflow: hidden; }.xyz-articlebody > header { padding: 43px 50px 30px; text-align: center; border-bottom: 1px solid var(--xyz-line); }.xyz-categorypill { display: inline-flex; padding: 4px 11px; color: var(--xyz-blue) !important; background: #edf4ff; border-radius: 20px; font-size: 11px; font-weight: 750; }.xyz-articlebody > header h1 { max-width: 790px; margin: 13px auto 12px; color: var(--xyz-navy); font-size: 34px; line-height: 1.4; }.xyz-articlebody > header > p { max-width: 720px; margin: 0 auto; color: var(--xyz-muted); font-size: 16px; }.xyz-articlebody > header > div { display: flex; justify-content: center; gap: 20px; margin-top: 17px; color: #929bad; font-size: 11px; }.xyz-articlebody > header span { display: flex; align-items: center; gap: 5px; }.xyz-articlebody > header .xyz-glyph { width: 14px; height: 14px; }.xyz-articlebody > figure { margin: 0; padding: 30px 50px 0; }.xyz-articlebody > figure img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 14px; }.xyz-articlecontent { padding: 35px 50px 45px; font-size: 16px; }.xyz-articlebody > footer { padding: 0 50px 40px; }.xyz-articlehint { display: flex; gap: 8px; padding: 13px; color: #586f8e; background: #edf5ff; border-radius: 10px; font-size: 12px; }.xyz-articlehint .xyz-glyph { flex: 0 0 auto; }.xyz-articlebody > footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }.xyz-articlebody > footer nav a { min-width: 0; padding: 14px; background: #f6f8fb; border-radius: 10px; }.xyz-articlebody > footer nav small, .xyz-articlebody > footer nav strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.xyz-articlebody > footer nav small { color: #929bad; }.xyz-nextarticle { text-align: right; }.xyz-safetycard { background: linear-gradient(145deg,#254268,#287b78); }.xyz-backtonews { display: block; padding: 10px; color: var(--xyz-blue) !important; text-align: center; font-weight: 700; }

/* Footer */
.xyz-footer { padding: 37px 0 18px; color: #c5d0e1; background: #0c1d39; }.xyz-footerrow { display: flex; justify-content: space-between; align-items: center; }.xyz-footbrand { color: #fff !important; font-size: 19px; font-weight: 850; }.xyz-footerrow p { margin: 3px 0 0; color: #8494ad; font-size: 12px; }.xyz-footerrow nav { display: flex; gap: 23px; }.xyz-footerrow nav a, .xyz-footerrow nav button { color: #b9c5d7; background: none; border: 0; cursor: pointer; font-size: 12px; }.xyz-copyright { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 16px; color: #687991; border-top: 1px solid rgba(255,255,255,.08); font-size: 10px; }.xyz-customfooter * { margin: 0; }
.xyz-mobilenav { display: none; }

/* Dialog and toast */
.xyz-dialog { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; }.xyz-dialog.is-open { display: flex; }.xyz-dialogshade { position: absolute; inset: 0; background: rgba(5,17,38,.68); backdrop-filter: blur(3px); }.xyz-dialogbox { position: relative; width: min(500px,100%); max-height: min(760px,calc(100vh - 40px)); overflow: auto; padding: 29px; background: #fff; border-radius: 18px; box-shadow: 0 28px 90px rgba(0,0,0,.28); }.xyz-dialogcompact { width: min(420px,100%); }.xyz-dialogclose { position: absolute; top: 11px; right: 13px; width: 34px; height: 34px; border: 0; background: #f0f3f7; border-radius: 50%; cursor: pointer; font-size: 22px; }.xyz-dialogheading { display: flex; gap: 12px; align-items: center; padding-right: 30px; }.xyz-dialogheading > span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--xyz-blue); background: #edf4ff; border-radius: 14px; }.xyz-dialogheading h2, .xyz-dialogheading p { margin: 0; }.xyz-dialogheading h2 { color: var(--xyz-navy); font-size: 21px; }.xyz-dialogheading p { color: var(--xyz-muted); font-size: 12px; }.xyz-dialogcontent { margin: 20px 0; color: #58657a; }.xyz-dialogcontent ol { padding-left: 21px; }.xyz-contactrows { margin: 20px 0; border: 1px solid var(--xyz-line); border-radius: 11px; }.xyz-contactrows div { display: flex; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--xyz-line); }.xyz-contactrows div:last-child { border: 0; }.xyz-contactrows span { color: var(--xyz-muted); }.xyz-imagedialog .xyz-dialogbox { width: min(820px,100%); padding: 45px 20px 20px; }.xyz-imagedialog img { max-height: 78vh; margin: auto; }
.xyz-videodialog .xyz-dialogbox { width: min(860px,100%); padding: 22px; background: #0a162a; }.xyz-videodialog h2 { margin: 0 40px 14px 0; color: #fff; font-size: 18px; }.xyz-videodialog video { width: 100%; max-height: 72vh; display: block; background: #000; border-radius: 10px; }
.xyz-toasts { position: fixed; right: 18px; top: 18px; z-index: 130; display: grid; gap: 8px; }.xyz-toast { min-width: 230px; padding: 12px 15px; color: #fff; background: var(--xyz-navy); border-radius: 10px; box-shadow: var(--xyz-shadow); animation: xyz-toastin .2s ease; }.xyz-toast.is-warning { background: #b86b27; }.xyz-toast.is-success { background: #168571; }@keyframes xyz-toastin { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1024px) {
    .xyz-navrow { gap: 22px; }.xyz-navlinks { gap: 18px; }
    .xyz-productgrid { grid-template-columns: repeat(3,1fr); }
    .xyz-categoryrail { grid-template-columns: repeat(3,1fr); }
    .xyz-newsgrid { grid-template-columns: 1fr 1fr; }
    .xyz-buylayout { grid-template-columns: minmax(0,1fr) 345px; }.xyz-productoverview { grid-template-columns: 42% 1fr; }.xyz-productsummary { padding: 23px; }
}

@media (max-width: 767px) {
    body.xyz-page { padding-bottom: 68px; font-size: 14px; }.xyz-wrap { width: min(100% - 24px, 560px); }.xyz-main { padding-bottom: 45px; }
    .xyz-navline { height: 57px; }.xyz-navrow { justify-content: center; }.xyz-wordmark { font-size: 19px; }.xyz-wordmark::before { width: 8px; height: 22px; margin-right: 7px; vertical-align: -5px; }.xyz-backlink { position: absolute; left: 12px; display: grid; place-items: center; }.xyz-navlinks, .xyz-servicebutton { display: none; }.xyz-navactions { position: absolute; right: 12px; margin: 0; }.xyz-iconbutton { width: 37px; height: 37px; background: transparent; }.xyz-searchrow { height: 58px; }.xyz-searchtray.is-open { max-height: 62px; }
    .xyz-section { padding-top: 45px; }.xyz-sectionhead { align-items: center; margin-bottom: 17px; }.xyz-sectionhead h2 { font-size: 23px; }.xyz-sectionhead p { font-size: 12px; }.xyz-sectionhead > a { font-size: 12px; }
    .xyz-crumbs { min-height: 43px; font-size: 11px; }
    .xyz-hero { min-height: 480px; grid-template-columns: 1fr; border-radius: 0 0 20px 20px; }.xyz-herocopy { padding: 39px 24px 20px; text-align: center; }.xyz-herocopy h1 { margin: 13px 0 10px; font-size: 34px; letter-spacing: -1px; }.xyz-herocopy > p { font-size: 14px; }.xyz-heroactions { justify-content: center; margin-top: 22px; }.xyz-heropoints { justify-content: center; gap: 11px; margin-top: 20px; font-size: 11px; }.xyz-heroart { min-height: 190px; }.xyz-orbit { width: 180px; height: 180px; top: 2px; }.xyz-orbit > span { inset: 37px; }.xyz-orbit > span .xyz-glyph { width: 52px; height: 52px; }.xyz-orbit::before { inset: 20px; }.xyz-orbit::after { inset: 49px -10px; }.xyz-orbit i:nth-of-type(1) { top: 6px; left: 35px; }.xyz-orbit i:nth-of-type(2) { top: 95px; }.xyz-orbit i:nth-of-type(3) { bottom: 0; left: 26px; }.xyz-floatingnote { right: 18px; bottom: 20px; width: 174px; padding: 10px 10px 10px 39px; font-size: 11px; }.xyz-floatingnote::before { left: 10px; top: 13px; width: 21px; height: 21px; }
    .xyz-categoryrail { display: flex; gap: 10px; margin-right: -12px; padding-right: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }.xyz-categoryrail::-webkit-scrollbar { display: none; }.xyz-categorytile { min-width: 176px; grid-template-columns: 45px 1fr; padding: 13px; scroll-snap-align: start; }.xyz-categoryglyph { width: 45px; height: 45px; border-radius: 12px; }.xyz-categoryglyph .xyz-glyph { width: 21px; height: 21px; }
    .xyz-productgrid { grid-template-columns: 1fr; gap: 12px; }.xyz-productcard { display: grid; grid-template-columns: 116px minmax(0,1fr); min-height: 116px; border-radius: 13px; }.xyz-productcard:hover { transform: none; }.xyz-productvisual { width: 116px; height: 116px; aspect-ratio: auto; }.xyz-productvisual > span { top: 7px; left: 7px; padding: 2px 6px; font-size: 9px; }.xyz-productinfo { min-width: 0; padding: 10px 11px; }.xyz-productinfo h3 { height: 39px; font-size: 13px; line-height: 1.5; }.xyz-productlabels { margin-top: 5px; }.xyz-productinfo > p { display: none; }.xyz-productaction { min-height: 31px; margin-top: 3px; align-items: center; }.xyz-productaction strong { font-size: 19px; }.xyz-productaction a, .xyz-productaction button { padding: 5px 9px; font-size: 10px; }
    .xyz-faqgrid, .xyz-tutorialgrid, .xyz-flowgrid, .xyz-newsgrid { grid-template-columns: 1fr; }.xyz-faqgrid details > div { padding-left: 18px; }.xyz-tutorialgrid { gap: 12px; }.xyz-tutorialgrid article { grid-template-columns: 125px 1fr; }.xyz-videocover { min-height: 150px; }.xyz-tutorialgrid article > div:last-child { padding: 16px; }.xyz-tutorialgrid h3 { font-size: 15px; }.xyz-flowgrid > div { display: grid; grid-template-columns: 48px 1fr; text-align: left; padding: 15px; border-right: 0; border-bottom: 1px solid var(--xyz-line); }.xyz-flowgrid > div > span { grid-row: span 2; width: 42px; height: 42px; margin: 0; }.xyz-flowgrid h3, .xyz-flowgrid p { grid-column: 2; }.xyz-flowgrid i { top: 13px; right: 15px; font-size: 20px; }.xyz-newscard { grid-template-columns: 110px 1fr; }.xyz-newsvisual { min-height: 145px; }
    .xyz-categoryhero, .xyz-queryhero { min-height: 145px; padding: 25px 22px; border-radius: 15px; }.xyz-categoryhero h1, .xyz-queryhero h1 { font-size: 25px; }.xyz-categoryhero p, .xyz-queryhero p { font-size: 12px; }.xyz-categoryheroicon { width: 65px; height: 65px; border-radius: 19px; }.xyz-categoryheroicon .xyz-glyph { width: 31px; }.xyz-cataloghead { align-items: flex-end; }.xyz-sortbox > span { display: none; }.xyz-sortbox select { width: 130px; font-size: 11px; }
    .xyz-queryhero { gap: 14px; }.xyz-queryhero > span { width: 58px; height: 58px; border-radius: 17px; }.xyz-queryhero > span .xyz-glyph { width: 28px; }.xyz-querylayout { grid-template-columns: 1fr; margin-top: 15px; }.xyz-querypanel, .xyz-queryhelp { padding: 18px; }.xyz-querypanel > header > span { display: none; }.xyz-tabbar { overflow-x: auto; }.xyz-tabbar button { min-width: 118px; padding: 0 10px; font-size: 11px; }.xyz-formbuttons .xyz-button { flex: 1; }.xyz-querymethods { grid-template-columns: 1fr; gap: 9px; }.xyz-querymethods article { padding: 15px; }
    .xyz-buylayout { grid-template-columns: 1fr; }.xyz-productoverview { grid-template-columns: 125px 1fr; }.xyz-productimage { width: 125px; height: 125px; aspect-ratio: auto; }.xyz-productsummary { padding: 13px; }.xyz-detailkicker { display: none; }.xyz-productsummary h1 { height: 43px; margin: 0 0 7px; overflow: hidden; font-size: 15px; }.xyz-detailtags span:nth-child(n+3) { display: none; }.xyz-detailprice { margin-top: 9px; }.xyz-detailprice small { display: none; }.xyz-detailprice strong { font-size: 23px; }.xyz-buyreminder, .xyz-miniflow { grid-column: 1/-1; }.xyz-productoverview { position: relative; }.xyz-buyreminder, .xyz-miniflow { display: none; }.xyz-detailcontent { padding: 15px; }.xyz-detailcontent .xyz-tabbar { margin: -2px; }.xyz-detailcontent .xyz-tabpane { padding-top: 17px; }.xyz-checkoutbox { position: static; padding: 18px; }.xyz-mobilecheckout { position: fixed; right: 0; bottom: 62px; left: 0; z-index: 35; display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; background: #fff; border-top: 1px solid var(--xyz-line); box-shadow: 0 -6px 20px rgba(16,42,86,.08); }.xyz-mobilecheckout strong { color: #f16435; font-size: 20px; }.xyz-productpage .xyz-footer { display: none; }
    .xyz-newshero { min-height: 215px; grid-template-columns: 1fr; padding: 28px 22px; border-radius: 15px; }.xyz-newshero h1 { font-size: 27px; }.xyz-newshero p { font-size: 12px; }.xyz-newsart { display: none; }.xyz-newstoolbar { display: block; margin-top: 13px; padding: 11px; }.xyz-newstoolbar nav { flex-wrap: nowrap; margin-bottom: 10px; overflow-x: auto; }.xyz-newstoolbar nav a { flex: 0 0 auto; }.xyz-newstoolbar > label { width: 100%; }.xyz-newslistlayout, .xyz-articlelayout { grid-template-columns: 1fr; margin-top: 32px; }.xyz-featuredarticle { grid-template-columns: 1fr; }.xyz-featuredvisual { min-height: 190px; max-height: 230px; }.xyz-featuredarticle > div { padding: 18px; }.xyz-featuredarticle h2 { font-size: 19px; }.xyz-newslist .xyz-newscard { grid-template-columns: 110px 1fr; }.xyz-newslist .xyz-newsvisual { min-height: 145px; }.xyz-newslist .xyz-newscopy { padding: 12px; }.xyz-newslist .xyz-newscopy h3 { font-size: 14px; }.xyz-newslist .xyz-newscopy p { height: 36px; font-size: 11px; }
    .xyz-articlebody > header { padding: 28px 18px 22px; }.xyz-articlebody > header h1 { font-size: 24px; }.xyz-articlebody > header > p { font-size: 13px; }.xyz-articlebody > figure { padding: 18px 16px 0; }.xyz-articlecontent { padding: 24px 18px 32px; font-size: 15px; }.xyz-articlebody > footer { padding: 0 18px 25px; }.xyz-articlebody > footer nav { grid-template-columns: 1fr; }.xyz-nextarticle { text-align: left; }
    .xyz-footer { padding: 28px 0 14px; }.xyz-footerrow { display: block; text-align: center; }.xyz-footerrow nav { justify-content: center; flex-wrap: wrap; gap: 13px 20px; margin-top: 17px; }.xyz-copyright { justify-content: center; text-align: center; }.xyz-customfooter { display: none; }
    .xyz-mobilenav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 36; height: 63px; display: grid; grid-template-columns: repeat(4,1fr); padding-bottom: env(safe-area-inset-bottom); background: rgba(255,255,255,.97); border-top: 1px solid #dfe5ee; box-shadow: 0 -5px 18px rgba(16,42,86,.07); }.xyz-mobilenav a, .xyz-mobilenav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #7d889a; background: none; border: 0; font-size: 10px; }.xyz-mobilenav .xyz-glyph { width: 20px; height: 20px; }.xyz-mobilenav .is-current { color: var(--xyz-blue); }
    .xyz-dialog { align-items: flex-end; padding: 12px; }.xyz-dialogbox { width: 100%; max-height: 84vh; padding: 23px 20px; border-radius: 18px 18px 12px 12px; }.xyz-toasts { right: 12px; left: 12px; top: 12px; }.xyz-toast { min-width: 0; }
}

@media (max-width: 390px) {
    .xyz-heroactions .xyz-button { padding: 0 15px; font-size: 12px; }.xyz-productcard { grid-template-columns: 104px minmax(0,1fr); }.xyz-productvisual { width: 104px; height: 104px; }.xyz-productlabels span:last-child { display: none; }.xyz-tutorialgrid article { grid-template-columns: 105px 1fr; }.xyz-productoverview { grid-template-columns: 112px 1fr; }.xyz-productimage { width: 112px; height: 112px; }.xyz-detailprice del { display: none; }
}

/* Effect-image fidelity layer: ios/*.png */
body.xyz-page { color: #07132f; background: #fff; font-size: 14px; }
.xyz-wrap { width: min(1320px, calc(100% - 36px)); }
.xyz-main { padding-bottom: 34px; }
.xyz-topbar { background: #03122e; box-shadow: none; }
.xyz-navline { height: 60px; }
.xyz-wordmark { color: #fff; font-size: 22px; letter-spacing: 0; }
.xyz-wordmark::before { display: none; }
.xyz-navrow { gap: 58px; }
.xyz-navlinks { flex: 1; justify-content: center; gap: 52px; }
.xyz-navlinks a { color: #fff; font-size: 15px; font-weight: 650; }
.xyz-navlinks a:hover, .xyz-navlinks a.is-current { color: #fff; }
.xyz-navlinks a::after { background: #1766ff; }
.xyz-iconbutton { color: #fff; background: transparent; }
.xyz-servicebutton { color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.75); border-radius: 7px; }
.xyz-section { padding-top: 30px; }
.xyz-sectionhead { margin-bottom: 15px; }
.xyz-sectionhead > div > span { display: none; }
.xyz-sectionhead h2 { color: #08142e; font-size: 22px; letter-spacing: 0; }
.xyz-sectionhead p { display: inline; margin-left: 12px; color: #6d7891; font-size: 12px; }
.xyz-sectionhead > div { display: flex; align-items: baseline; }
.xyz-sectionhead > a { color: #075bff; font-size: 12px; }
.xyz-panel { border-color: #dfe7f4; border-radius: 11px; box-shadow: none; }
.xyz-button { min-height: 39px; border-radius: 6px; }
.xyz-buttonprimary { background: linear-gradient(135deg,#075cff,#073bd6); box-shadow: none; }
.xyz-crumbs { min-height: 42px; color: #61708b; }

/* Home */
.xyz-homepage .xyz-main { background: #fff; }
.xyz-hero { min-height: 278px; grid-template-columns: 55% 45%; margin-top: 20px; color: #07132f; background: linear-gradient(115deg,#f8fbff 0%,#eef5ff 60%,#f7faff 100%); border: 1px solid #e2ebf8; border-radius: 9px; box-shadow: none; }
.xyz-herocopy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 42px 30px 42px 58px; }
.xyz-herocopy h1 { margin: 0; color: #07132f; font-size: 31px; line-height: 1.3; letter-spacing: 0; }
.xyz-herocopy > p { margin-top: 8px; color: #43577e; font-size: 16px; }
.xyz-heroactions { margin-top: 23px; }
.xyz-heroart { min-height: 278px; background: none; }
.xyz-heroart img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.xyz-categorysection { padding-top: 20px; }
.xyz-categorysection .xyz-sectionhead { display: none; }
.xyz-categoryrail { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.xyz-categorytile { min-height: 72px; grid-template-columns: 40px 1fr; padding: 13px 16px; border-radius: 8px; box-shadow: none; }
.xyz-categoryglyph { width: 40px; height: 40px; color: #075bff; background: transparent; border-radius: 50%; }
.xyz-categorytile strong { font-size: 14px; }
.xyz-categorytile small { display: none; }
.xyz-categorytile.is-current { border-color: #075bff; background: #f4f8ff; }
.xyz-productgrid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.xyz-productcard { border-radius: 8px; box-shadow: none; }
.xyz-productcard:hover { transform: none; box-shadow: 0 8px 24px rgba(21,75,160,.08); }
.xyz-productvisual { margin: 9px 9px 0; aspect-ratio: 1/1; border-radius: 6px; }
.xyz-productvisual > span { display: none; }
.xyz-productinfo { padding: 8px 10px 10px; }
.xyz-productinfo h3 { height: 24px; font-size: 14px; line-height: 24px; white-space: nowrap; text-overflow: ellipsis; }
.xyz-productlabels { margin-top: 4px; }
.xyz-productlabels span { padding: 1px 6px; color: #0462ec; background: #eef5ff; }
.xyz-productlabels span:last-child { color: #258238; background: #eaf8ec; }
.xyz-productinfo > p { display: none; }
.xyz-productaction { display: grid; grid-template-columns: 1fr; gap: 5px; align-items: center; margin-top: 6px; }
.xyz-productaction strong { font-size: 18px; }
.xyz-productaction a, .xyz-productaction button { width: 100%; padding: 5px; text-align: center; background: linear-gradient(90deg,#064ee7,#075fff); border-radius: 4px; }
.xyz-guidepanel { display: grid; grid-template-columns: 36% 64%; overflow: hidden; border: 1px solid #dfe7f4; border-radius: 10px; }
.xyz-guideintro { position: relative; min-height: 250px; padding: 20px 22px; }
.xyz-guideintro h2 { margin: 0; font-size: 21px; }
.xyz-guideintro p { margin: 2px 0; color: #6b7891; }
.xyz-guideintro img { width: 205px; height: 145px; margin: 0 auto; object-fit: contain; }
.xyz-guideintro small { position: absolute; right: 14px; bottom: 12px; left: 14px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; color: #075bff; background: #eff5ff; border-radius: 5px; }
.xyz-guideintro small .xyz-glyph { width: 15px; }
.xyz-faqgrid { display: block; padding: 8px 12px; }
.xyz-faqgrid details { border: 0; border-bottom: 1px solid #dfe7f4; border-radius: 0; }
.xyz-faqgrid summary { min-height: 41px; grid-template-columns: 22px 1fr 18px; padding: 0 8px; font-size: 13px; }
.xyz-faqgrid summary span { width: 16px; height: 16px; display: grid; place-items: center; color: #fff; background: #075bff; border-radius: 50%; font-size: 10px; }
.xyz-faqgrid details[open] { background: linear-gradient(90deg,#f2f6ff,#fff); }
.xyz-faqgrid details > div { padding: 0 20px 12px 38px; font-size: 11px; line-height: 1.7; }
.xyz-tutorialgrid { gap: 20px; }
.xyz-tutorialgrid article { position: relative; display: block; min-height: 175px; border: 0; border-radius: 6px; }
.xyz-videocover { min-height: 175px; background: linear-gradient(125deg,#031342,#063891); }
.xyz-videotwo { background: linear-gradient(125deg,#061a4d,#052d79); }
.xyz-videocover::before { width: 130px; height: 95px; border-radius: 9px; }
.xyz-tutorialgrid article > div:last-child { position: absolute; top: 10px; left: 16px; padding: 0; color: #fff; pointer-events: none; }
.xyz-tutorialgrid article > div:last-child em, .xyz-tutorialgrid article > div:last-child p { display: none; }
.xyz-tutorialgrid article > div:last-child h3 { color: #fff; font-size: 17px; }
.xyz-flowgrid { border-radius: 9px; }
.xyz-flowgrid > div { padding: 20px 12px; }
.xyz-flowgrid > div > span { width: 40px; height: 40px; margin-bottom: 7px; }
.xyz-flowgrid i { color: #075bff; font-size: 12px; }
.xyz-newsgrid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.xyz-newscard { grid-template-columns: 92px minmax(0,1fr); border-radius: 7px; }
.xyz-newsvisual { min-height: 115px; }
.xyz-newscopy { padding: 10px; }
.xyz-newscopy h3 { height: 40px; margin: 4px 0; font-size: 14px; }
.xyz-newscopy p { height: 35px; margin: 0; font-size: 10px; }
.xyz-homearticles .xyz-textlink { display: none; }

/* Category */
.xyz-categorypage .xyz-main { padding-top: 18px; }
.xyz-categoryhero { min-height: 198px; padding: 24px 60px; color: #07132f; background: linear-gradient(110deg,#f7faff,#edf4ff); border: 1px solid #e0e9f7; border-radius: 8px; }
.xyz-categoryhero > div { position: relative; z-index: 2; }
.xyz-categoryhero > div > span { color: #075bff; }
.xyz-categoryhero h1 { margin: 4px 0; color: #07132f; font-size: 31px; }
.xyz-categoryhero p { color: #354b72; font-size: 15px; }
.xyz-categoryhero .xyz-button { margin-top: 16px; }
.xyz-categoryheroimage { width: 48%; height: 190px; object-fit: contain; }
.xyz-categorypicker { padding-top: 15px; }
.xyz-categorypicker .xyz-compacthead { display: none; }
.xyz-categorypage .xyz-crumbs { min-height: 38px; }
.xyz-categorypage #xyz-category-products { padding-top: 0; }
.xyz-cataloghead { margin-bottom: 10px; }
.xyz-feedstatus { padding-top: 8px; }

/* Product */
.xyz-productpage .xyz-main { background: #fff; }
.xyz-buylayout { grid-template-columns: minmax(0,1fr) 390px; gap: 26px; }
.xyz-productoverview { grid-template-columns: 39% 61%; background: linear-gradient(110deg,#f7faff,#edf4ff); border-radius: 9px; }
.xyz-productimage { margin: 14px; border-radius: 13px; overflow: hidden; }
.xyz-productsummary { padding: 28px 28px 15px 12px; }
.xyz-productsummary h1 { font-size: 31px; }
.xyz-detailprice strong { color: #f31818; }
.xyz-buyreminder { color: #075bff; background: transparent; border: 1px solid #bed3f7; }
.xyz-miniflow { padding-top: 13px; border-top: 1px solid #d5e2f5; }
.xyz-checkoutbox { border-radius: 10px; }
.xyz-checkoutbox > header > div > span { display: none; }
.xyz-checkoutproduct { display: none; }
.xyz-paymentgrid { grid-template-columns: 1fr; }
.xyz-paymentgrid button { min-height: 44px; }
.xyz-detailcontent { border: 0; padding: 10px 5px; }
.xyz-detailcontent .xyz-tabbar { justify-content: flex-start; background: transparent; border-bottom: 1px solid #dfe7f4; border-radius: 0; }
.xyz-detailcontent .xyz-tabbar button { max-width: 150px; }

/* Query */
.xyz-queryhero { min-height: 170px; justify-content: space-between; padding: 25px 35px; color: #07132f; background: linear-gradient(110deg,#f8fbff,#edf4ff); border: 1px solid #e1eaf7; border-radius: 8px; }
.xyz-queryhero h1 { color: #07132f; font-size: 31px; }
.xyz-queryhero p { color: #354b72; }
.xyz-queryhero > img { width: 39%; height: 170px; object-fit: contain; }
.xyz-queryfeatures { display: flex; gap: 22px; margin-top: 14px; color: #345078; font-size: 12px; }
.xyz-queryfeatures span { display: flex; align-items: center; gap: 5px; }
.xyz-queryfeatures .xyz-glyph { width: 16px; color: #075bff; }
.xyz-querylayout { grid-template-columns: minmax(0,1fr) 380px; }
.xyz-querypanel, .xyz-queryhelp { padding: 20px; }
.xyz-querybottom { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; margin-top: 16px; }
.xyz-querymethods { grid-template-columns: repeat(3,1fr); margin: 0; padding: 14px; border: 1px solid #dfe7f4; border-radius: 9px; }
.xyz-querymethods > h2 { grid-column: 1/-1; margin: 0 0 8px; font-size: 17px; }
.xyz-querymethods article { padding: 12px; }
.xyz-statuscard { padding: 14px; background: #f5f8fd; border-radius: 9px; }
.xyz-statuscard h2 { margin: 0 0 11px; font-size: 17px; }
.xyz-statuscard > div { display: flex; justify-content: space-between; align-items: center; }
.xyz-statuscard span { min-width: 62px; display: grid; place-items: center; padding: 9px; background: #fff; border-radius: 8px; }
.xyz-statuscard span small { display: block; margin-top: 3px; white-space: nowrap; }
.xyz-statuscard .xyz-glyph { color: #075bff; }
.xyz-statuscard p { margin: 7px 0 0; color: #69758a; font-size: 10px; }

/* News */
.xyz-newspage .xyz-main, .xyz-articlepage .xyz-main { background: #fff; }
.xyz-newshero { min-height: 180px; grid-template-columns: 58% 42%; padding: 25px 32px; color: #07132f; background: linear-gradient(110deg,#f7faff,#edf4ff); border: 1px solid #e0e9f7; border-radius: 8px; }
.xyz-newshero h1 { color: #07132f; font-size: 30px; }
.xyz-newshero p { color: #354b72; }
.xyz-newshero > div > span { display: none; }
.xyz-newshero > div > div { margin-top: 13px; }
.xyz-newshero em { color: #075bff; background: #fff; border: 1px solid #d3e2f8; }
.xyz-newsart { height: 175px; }
.xyz-newsart img { width: 100%; height: 100%; object-fit: contain; }
.xyz-newstoolbar { min-height: 58px; margin-top: 14px; padding: 8px 0; border: 0; }
.xyz-newstoolbar nav a { min-width: 95px; text-align: center; border: 1px solid #dfe7f4; }
.xyz-newstoolbar nav a.is-current { background: #075bff; border-color: #075bff; }
.xyz-newslistlayout { grid-template-columns: minmax(0,1fr) 300px; gap: 20px; margin-top: 10px; }
.xyz-newsmain .xyz-sectionhead { display: none; }
.xyz-featuredarticle { grid-template-columns: 235px 1fr; margin-bottom: 10px; border-radius: 8px; }
.xyz-featuredvisual { min-height: 150px; }
.xyz-featuredarticle > div { padding: 18px; }
.xyz-featuredarticle h2 { font-size: 20px; }
.xyz-featuredarticle p { margin: 6px 0; font-size: 12px; }
.xyz-newslist { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.xyz-newslist .xyz-newscard { grid-template-columns: 92px minmax(0,1fr); }
.xyz-newslist .xyz-newsvisual { min-height: 105px; }
.xyz-newslist .xyz-newscopy { padding: 9px; }
.xyz-newslist .xyz-newscopy h3 { height: 38px; margin: 2px 0; font-size: 13px; }
.xyz-newslist .xyz-newscopy p { height: 31px; font-size: 10px; }
.xyz-newslist .xyz-textlink { display: none; }
.xyz-newssidebar .xyz-panel { border-radius: 8px; }
.xyz-newssupport { border-radius: 8px; }
.xyz-articlelayout { grid-template-columns: minmax(0,1fr) 330px; gap: 22px; }
.xyz-articlebody > header { padding: 24px 28px 16px; text-align: left; }
.xyz-articlebody > header h1 { max-width: none; margin: 12px 0 8px; font-size: 28px; }
.xyz-articlebody > header > p { max-width: none; margin: 0; font-size: 13px; }
.xyz-articlebody > header > div { justify-content: flex-start; }
.xyz-articlebody > figure { padding: 16px 28px 0; }
.xyz-articlecontent { padding: 18px 28px 25px; font-size: 14px; }
.xyz-articlebody > footer { padding: 0 28px 26px; }
.xyz-mobile-related { display: none; }

/* Footer */
.xyz-footer { padding: 18px 0; }
.xyz-footerrow { justify-content: center; }
.xyz-footerrow nav { gap: 28px; }
.xyz-copyright { justify-content: center; gap: 34px; margin-top: 13px; padding-top: 0; border: 0; font-size: 12px; }

@media (min-width: 768px) {
    .xyz-productgrid { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

@media (max-width: 767px) {
    body.xyz-page { padding-bottom: 66px; background: #fff; }
    .xyz-wrap { width: calc(100% - 20px); }
    .xyz-topbar { background: #fff; border-bottom: 1px solid #e6ebf3; }
    .xyz-navline { height: 62px; }
    .xyz-navrow { justify-content: center; gap: 8px; }
    .xyz-wordmark { color: #050b19; font-size: 20px; }
    .xyz-backlink { color: #075bff; }
    .xyz-homepage .xyz-backlink { display: none; }
    .xyz-navactions { display: flex; right: 10px; }
    .xyz-iconbutton { width: 40px; height: 40px; color: #07132f; background: #f4f7fc; border-radius: 10px; }
    .xyz-servicebutton { display: block; height: 40px; padding: 0 8px; color: #075bff; background: #f4f7ff; border: 0; font-size: 12px; }
    .xyz-main { padding-bottom: 25px; }
    .xyz-section { padding-top: 21px; }
    .xyz-sectionhead h2 { font-size: 18px; }
    .xyz-sectionhead p { margin-left: 7px; font-size: 10px; }
    .xyz-crumbs { min-height: 39px; }
    .xyz-hero { min-height: 300px; display: block; margin-top: 12px; border-radius: 8px; }
    .xyz-herocopy { position: relative; z-index: 2; align-items: center; padding: 24px 12px 0; text-align: center; }
    .xyz-herocopy h1 { font-size: 24px; }
    .xyz-herocopy > p { font-size: 14px; }
    .xyz-heroactions { margin-top: 13px; }
    .xyz-heroart { height: 175px; min-height: 0; margin-top: -3px; }
    .xyz-categorysection { padding-top: 14px; }
    .xyz-categorysection .xyz-sectionhead { display: flex; }
    .xyz-categorysection .xyz-sectionhead p { display: none; }
    .xyz-categoryrail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; overflow: visible; }
    .xyz-categorytile { min-width: 0; min-height: 76px; grid-template-columns: 34px 1fr; gap: 6px; padding: 9px; }
    .xyz-categoryglyph { width: 34px; height: 34px; }
    .xyz-categorytile strong { font-size: 11px; }
    .xyz-productgrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .xyz-productcard { min-height: 105px; grid-template-columns: 42% 58%; border-radius: 7px; }
    .xyz-productvisual { width: auto; height: auto; margin: 5px; aspect-ratio: 1/1; border-radius: 5px; }
    .xyz-productinfo { padding: 6px 6px 6px 2px; }
    .xyz-productinfo h3 { height: 30px; font-size: 11px; line-height: 15px; white-space: normal; }
    .xyz-productlabels { gap: 2px; margin-top: 2px; white-space: nowrap; }
    .xyz-productlabels span { padding: 1px 3px; font-size: 7px; }
    .xyz-productaction { gap: 3px; margin-top: 3px; }
    .xyz-productaction strong { font-size: 14px; }
    .xyz-productaction a, .xyz-productaction button { padding: 3px; font-size: 9px; }
    .xyz-guidepanel { display: block; }
    .xyz-guideintro { min-height: 48px; padding: 9px 10px; }
    .xyz-guideintro h2 { font-size: 17px; }
    .xyz-guideintro p, .xyz-guideintro img, .xyz-guideintro small { display: none; }
    .xyz-faqgrid { padding: 0; }
    .xyz-faqgrid summary { min-height: 39px; font-size: 11px; }
    .xyz-faqgrid details > div { padding: 0 12px 10px 38px; }
    .xyz-tutorialgrid { grid-template-columns: 1fr; gap: 4px; }
    .xyz-tutorialgrid article { min-height: 94px; }
    .xyz-videocover { min-height: 94px; }
    .xyz-videocover::before { width: 78px; height: 58px; }
    .xyz-videocover button { width: 40px; height: 40px; }
    .xyz-tutorialgrid article > div:last-child h3 { font-size: 13px; }
    .xyz-flowgrid { grid-template-columns: repeat(4,1fr); }
    .xyz-flowgrid > div { display: block; padding: 12px 3px; text-align: center; border-right: 1px solid #dfe7f4; border-bottom: 0; }
    .xyz-flowgrid > div > span { width: 31px; height: 31px; margin: 0 auto 5px; }
    .xyz-flowgrid h3 { font-size: 10px; }
    .xyz-flowgrid p { display: none; }
    .xyz-flowgrid i { display: none; }
    .xyz-newsgrid { grid-template-columns: 1fr; gap: 0; border: 1px solid #dfe7f4; border-radius: 8px; }
    .xyz-homearticles .xyz-newscard { min-height: 44px; grid-template-columns: 42px 1fr; border: 0; border-bottom: 1px solid #e5ebf3; border-radius: 0; }
    .xyz-homearticles .xyz-newsvisual { min-height: 44px; background: transparent; }
    .xyz-homearticles .xyz-newsvisual img { width: 34px; height: 34px; margin: 5px; border-radius: 8px; }
    .xyz-homearticles .xyz-newsvisual > span .xyz-glyph { width: 22px; height: 22px; }
    .xyz-homearticles .xyz-newscopy { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 5px; }
    .xyz-homearticles .xyz-newscopy > div { grid-column: 2; grid-row: 1; }
    .xyz-homearticles .xyz-newscopy em { display: none; }
    .xyz-homearticles .xyz-newscopy h3 { grid-column: 1; grid-row: 1; height: auto; margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .xyz-homearticles .xyz-newscopy p { display: none; }
    .xyz-footer { display: none; }

    .xyz-categorypage .xyz-main { padding-top: 10px; }
    .xyz-categoryhero { min-height: 330px; display: block; padding: 22px 18px 0; overflow: hidden; }
    .xyz-categoryhero h1 { font-size: 26px; }
    .xyz-categoryheroimage { width: 100%; height: 205px; margin-top: -10px; object-position: center bottom; }
    .xyz-categorypicker { padding-top: 10px; }
    .xyz-categorypage .xyz-crumbs { margin-top: 8px; }
    .xyz-cataloghead { align-items: flex-end; }
    .xyz-cataloghead .xyz-sectionhead p { display: inline; }

    .xyz-buylayout { grid-template-columns: 1fr; gap: 12px; }
    .xyz-productoverview { grid-template-columns: 37% 63%; }
    .xyz-productimage { width: auto; height: auto; margin: 9px; aspect-ratio: 1/1; }
    .xyz-productsummary { padding: 11px 8px 8px 2px; }
    .xyz-productsummary h1 { font-size: 19px; }
    .xyz-detailprice strong { font-size: 25px; }
    .xyz-checkoutbox { padding: 13px; }
    .xyz-detailcontent { margin-top: 8px; }

    .xyz-queryhero { min-height: 170px; padding: 18px; }
    .xyz-queryhero h1 { font-size: 25px; }
    .xyz-queryhero > img { width: 42%; height: 130px; }
    .xyz-queryfeatures { gap: 10px; font-size: 9px; }
    .xyz-querylayout { grid-template-columns: 1fr; margin-top: 10px; }
    .xyz-querybottom { grid-template-columns: 1fr; gap: 10px; }
    .xyz-querymethods { grid-template-columns: 1fr; }
    .xyz-querymethods article { min-height: 68px; }
    .xyz-statuscard > div { gap: 3px; }
    .xyz-statuscard span { min-width: 0; padding: 7px 3px; }
    .xyz-statuscard span small { font-size: 8px; }

    .xyz-newshero { min-height: 190px; grid-template-columns: 58% 42%; padding: 20px 14px; }
    .xyz-newshero h1 { font-size: 24px; }
    .xyz-newshero p { font-size: 11px; }
    .xyz-newshero > div > div { display: flex; }
    .xyz-newshero em { padding: 2px 5px; font-size: 8px; }
    .xyz-newsart { display: block; height: 155px; }
    .xyz-newstoolbar { display: block; }
    .xyz-newstoolbar nav { display: flex; margin: 0; }
    .xyz-newstoolbar nav a { min-width: 95px; }
    .xyz-newstoolbar > label { display: none; }
    .xyz-newslistlayout { grid-template-columns: 1fr; margin-top: 8px; }
    .xyz-featuredarticle { grid-template-columns: 31% 69%; }
    .xyz-featuredvisual { min-height: 135px; }
    .xyz-featuredarticle > div { padding: 11px; }
    .xyz-featuredarticle h2 { font-size: 14px; }
    .xyz-featuredarticle p { font-size: 10px; }
    .xyz-newslist { grid-template-columns: 1fr; }
    .xyz-newslist .xyz-newscard { grid-template-columns: 31% 69%; min-height: 125px; }
    .xyz-newslist .xyz-newsvisual { min-height: 125px; }
    .xyz-newslist .xyz-newscopy { padding: 11px; }
    .xyz-newslist .xyz-newscopy h3 { height: auto; font-size: 14px; }
    .xyz-newslist .xyz-newscopy p { height: 35px; font-size: 10px; }
    .xyz-newssidebar { display: none; }

    .xyz-articlelayout { grid-template-columns: 1fr; }
    .xyz-articlebody > header { padding: 20px 12px 12px; }
    .xyz-articlebody > header h1 { font-size: 23px; }
    .xyz-articlebody > figure { padding: 10px 10px 0; }
    .xyz-articlecontent { padding: 16px 12px 20px; }
    .xyz-mobile-related { display: block; margin: 0 10px 12px; padding: 10px; border: 1px solid #dfe7f4; border-radius: 8px; }
    .xyz-mobile-related header { display: flex; justify-content: space-between; align-items: center; }
    .xyz-mobile-related h2 { margin: 0 0 7px; font-size: 16px; }
    .xyz-mobile-related header a { color: #075bff; font-size: 10px; }
    .xyz-mobile-related > a { display: grid; grid-template-columns: 50px 1fr auto; gap: 8px; align-items: center; padding: 7px; border: 1px solid #e4eaf3; border-radius: 7px; }
    .xyz-mobile-related > a > span { width: 45px; height: 38px; display: grid; place-items: center; color: #075bff; background: #eef5ff; border-radius: 6px; }
    .xyz-mobile-related p { margin: 0; }
    .xyz-mobile-related strong, .xyz-mobile-related small { display: block; }
    .xyz-mobile-related small, .xyz-mobile-related > a > b { color: #7c879a; font-size: 9px; font-weight: 400; }
    .xyz-mobile-related > a > b { display: flex; align-items: center; gap: 3px; }
    .xyz-mobile-related .xyz-glyph { width: 14px; height: 14px; }
    .xyz-articlebody > footer { padding: 0 10px 18px; }
    .xyz-articlehint { display: none; }
    .xyz-articlebody > footer nav { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 390px) {
    .xyz-productcard { grid-template-columns: 42% 58%; }
    .xyz-productvisual { width: auto; height: auto; }
    .xyz-tutorialgrid article { grid-template-columns: 1fr; }
    .xyz-productoverview { grid-template-columns: 37% 63%; }
    .xyz-productimage { width: auto; height: auto; }
}

/* Mobile usability corrections */
@media (min-width: 768px) {
    .xyz-navlinks a { color: #f8fbff !important; text-shadow: 0 1px 1px rgba(0,0,0,.18); }
    .xyz-navlinks a.is-current, .xyz-navlinks a:hover { color: #fff !important; background: rgba(255,255,255,.055); }
    .xyz-iconbutton { color: #fff !important; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.38); }
    .xyz-iconbutton .xyz-glyph { color: #fff; stroke: #fff; }
    .xyz-topbar .xyz-servicebutton { color: #03122e !important; background: #fff !important; border-color: #fff; font-weight: 750; opacity: 1; }
    .xyz-topbar .xyz-servicebutton:hover { color: #fff !important; background: #075bff !important; border-color: #075bff; }
}

@media (max-width: 767px) {
    /* Home and category products: image, title, labels, price, full-width action. */
    .xyz-productgrid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .xyz-productcard { display: block; min-height: 0; overflow: hidden; }
    .xyz-productvisual { width: auto; height: auto; margin: 7px 7px 0; aspect-ratio: 1/1; }
    .xyz-productvisual img { width: 100%; height: 100%; object-fit: contain; }
    .xyz-productinfo { display: flex; flex-direction: column; min-height: 137px; padding: 8px; }
    .xyz-productinfo h3 { height: 38px; margin: 0; font-size: 13px; line-height: 19px; white-space: normal; overflow: hidden; }
    .xyz-productlabels { min-height: 20px; display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; white-space: normal; }
    .xyz-productlabels span { padding: 2px 5px; font-size: 9px; line-height: 15px; }
    .xyz-productinfo > p { display: none; }
    .xyz-productaction { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin-top: auto; }
    .xyz-productaction strong { display: block; color: #f01818; font-size: 18px; line-height: 24px; }
    .xyz-productaction a, .xyz-productaction button { min-height: 35px; display: flex; justify-content: center; align-items: center; padding: 6px; font-size: 12px; border-radius: 5px; }

    /* Shorter mobile banners. */
    .xyz-hero { min-height: 235px; }
    .xyz-herocopy { padding-top: 17px; }
    .xyz-herocopy h1 { font-size: 21px; }
    .xyz-herocopy > p { margin-top: 4px; font-size: 12px; }
    .xyz-heroactions { margin-top: 9px; }
    .xyz-heroart { height: 125px; }
    .xyz-categoryhero { min-height: 245px; padding: 16px 16px 0; }
    .xyz-categoryhero h1 { font-size: 23px; }
    .xyz-categoryhero p { font-size: 12px; }
    .xyz-categoryhero .xyz-button { min-height: 34px; margin-top: 8px; }
    .xyz-categoryheroimage { height: 145px; margin-top: -12px; }
    .xyz-queryhero { min-height: 140px; padding: 13px 15px; }
    .xyz-queryhero h1 { margin: 1px 0; font-size: 22px; }
    .xyz-queryhero p { max-width: 230px; font-size: 10px; line-height: 1.5; }
    .xyz-queryhero > img { width: 38%; height: 105px; }
    .xyz-queryfeatures { gap: 7px; margin-top: 7px; font-size: 8px; }
    .xyz-newshero { min-height: 148px; padding: 13px; }
    .xyz-newshero h1 { margin: 2px 0 4px; font-size: 21px; }
    .xyz-newshero p { font-size: 9px; line-height: 1.5; }
    .xyz-newshero > div > div { margin-top: 7px; }
    .xyz-newsart { height: 116px; }

    /* Keep purchase form immediately after the product overview. */
    .xyz-buylayout { display: flex; flex-direction: column; gap: 11px; }
    .xyz-buymain { display: contents; }
    .xyz-productoverview { order: 1; grid-template-columns: 34% 66%; }
    .xyz-checkoutbox { order: 2; }
    .xyz-detailcontent { order: 3; }
    .xyz-productimage { width: auto; height: auto; margin: 8px; }
    .xyz-productsummary { min-width: 0; padding: 10px 8px 8px 0; }
    .xyz-productsummary h1 { width: 100%; height: auto; max-height: 42px; margin: 1px 0 6px; overflow: hidden; font-size: 15px; line-height: 21px; word-break: break-all; }
    .xyz-detailtags { display: flex; flex-wrap: wrap; gap: 4px; }
    .xyz-detailtags span, .xyz-detailtags span:nth-child(n+3) { display: inline-flex; padding: 3px 5px; font-size: 8px; line-height: 13px; }
    .xyz-detailtags .xyz-glyph { width: 11px; height: 11px; }
    .xyz-detailprice { margin-top: 6px; }
    .xyz-detailprice strong { font-size: 23px; }
    .xyz-detailprice del { font-size: 10px; }
    .xyz-checkoutbox > header h2 { font-size: 19px; }
}

@media (max-width: 380px) {
    .xyz-productgrid { gap: 7px; }
    .xyz-productinfo { min-height: 132px; padding: 7px; }
    .xyz-productinfo h3 { font-size: 12px; }
    .xyz-productlabels span { padding: 1px 3px; font-size: 8px; }
    .xyz-productaction a, .xyz-productaction button { min-height: 33px; }
}

/* Banner, checkout width and sales-volume corrections */
.xyz-productinfo > p { display: block; margin: 4px 0 0; color: #7c8799; font-size: 10px; line-height: 15px; }

@media (max-width: 767px) {
    /* Compact banners: their lower edge now sits just below the main action. */
    .xyz-hero { position: relative; min-height: 158px; height: 158px; overflow: hidden; }
    .xyz-herocopy { position: relative; z-index: 2; width: 62%; height: 100%; align-items: flex-start; justify-content: center; padding: 12px 0 12px 16px; text-align: left; }
    .xyz-herocopy h1 { max-width: 225px; font-size: 18px; line-height: 1.35; }
    .xyz-herocopy > p { font-size: 10px; white-space: nowrap; }
    .xyz-heroactions { margin-top: 8px; }
    .xyz-heroactions .xyz-button { min-height: 33px; padding: 0 16px; font-size: 11px; }
    .xyz-heroart { position: absolute; z-index: 1; right: -18px; bottom: -4px; width: 53%; height: 148px; margin: 0; }

    .xyz-categoryhero { position: relative; min-height: 166px; height: 166px; padding: 14px 14px; }
    .xyz-categoryhero > div { width: 62%; }
    .xyz-categoryhero h1 { max-width: 220px; font-size: 19px; }
    .xyz-categoryhero p { font-size: 10px; white-space: nowrap; }
    .xyz-categoryhero .xyz-button { min-height: 32px; padding: 0 12px; }
    .xyz-categoryheroimage { position: absolute; right: -13px; bottom: -3px; width: 49%; height: 157px; margin: 0; }

    .xyz-queryhero { min-height: 98px; height: 98px; padding: 9px 12px; overflow: hidden; }
    .xyz-queryhero > div { width: 67%; }
    .xyz-queryhero h1 { font-size: 18px; }
    .xyz-queryhero p { max-width: 250px; font-size: 8px; }
    .xyz-queryhero > img { width: 34%; height: 92px; }
    .xyz-queryfeatures { gap: 5px; margin-top: 4px; font-size: 7px; }
    .xyz-queryfeatures .xyz-glyph { width: 10px; height: 10px; }

    .xyz-newshero { min-height: 104px; height: 104px; grid-template-columns: 65% 35%; padding: 9px 11px; overflow: hidden; }
    .xyz-newshero > div:first-child { width: auto; }
    .xyz-newshero h1 { font-size: 18px; }
    .xyz-newshero p { font-size: 8px; }
    .xyz-newshero > div > div { margin-top: 4px; }
    .xyz-newshero em { font-size: 7px; }
    .xyz-newsart { width: 100%; height: 98px; }

    /* The complete ordering panel spans the mobile viewport. */
    .xyz-checkoutbox { width: calc(100% + 20px); max-width: none; margin-right: -10px; margin-left: -10px; padding: 16px 10px; border-right: 0; border-left: 0; border-radius: 0; }
    .xyz-checkoutbox form, .xyz-checkoutbox .xyz-field, .xyz-checkoutbox .xyz-paymentset { width: 100%; }

    /* Keep sales volume visible without shrinking the action target. */
    .xyz-productinfo { min-height: 153px; }
    .xyz-productinfo > p { display: block; margin: 3px 0 0; font-size: 9px; line-height: 14px; }
}

@media (max-width: 380px) {
    .xyz-productinfo { min-height: 148px; }
    .xyz-herocopy h1 { font-size: 17px; }
}

/* Product label order: delivery, stock, sales volume. */
.xyz-productlabels span:nth-child(2) { color: #258238; background: #eaf8ec; }
.xyz-productlabels span.xyz-saleslabel { display: inline-flex; color: #68758a; background: #f0f3f7; }

@media (max-width: 767px) {
    .xyz-productlabels span.xyz-saleslabel { flex: 0 0 auto; }
}