
.hp-categories{margin:50px 0 0;padding:64px 0;font-family:"Microsoft YaHei",sans-serif}
.hp-categories *{box-sizing:border-box}
.hp-category-inner{width:calc(100% - 80px);max-width:1440px;margin:auto}
.hp-category-heading{margin:0 0 32px;font-size:32px;line-height:1.4;font-weight:700;letter-spacing:.035em}
.hp-category-heading small{display:block;font-size:13px;letter-spacing:.22em;font-weight:400;line-height:1.6;margin-top:8px}
.hp-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;list-style:none;margin:0;padding:0}
.hp-category-grid li{list-style:none;margin:0;min-width:0}
.hp-category-label{display:flex;align-items:center;justify-content:center;min-height:88px;padding:18px 12px;font-size:22px;line-height:1.5;font-weight:600;text-align:center;transition:background .2s,border-color .2s,box-shadow .2s;cursor:default}
.hp-category-label:focus-visible{outline:3px solid #639def;outline-offset:5px}
.hp-categories-a{background:#f3f6fa;color:#084499}
.hp-categories-a .hp-category-heading small{color:#75869e}
.hp-categories-a .hp-category-label{background:#fff;border:1px solid #dce4ef;border-radius:8px;box-shadow:0 3px 12px #183b6a06}
.hp-categories-a .hp-category-label:hover,.hp-categories-a .hp-category-label:focus-visible{background:#edf4ff;border-color:#567faf;box-shadow:0 5px 15px #183b6a0c}
.hp-categories-b{background:linear-gradient(112deg,#123b78 0%,#084499 58%,#1a3582 100%);color:#fff}
.hp-categories-b .hp-category-inner{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:64px;align-items:center}
.hp-categories-b .hp-category-heading{grid-column:2;grid-row:1;text-align:right;margin:0;font-size:34px}
.hp-categories-b .hp-category-heading small{color:#c9d9f2;font-size:18px;letter-spacing:.12em}
.hp-categories-b .hp-category-grid{grid-column:1;grid-row:1;gap:20px}
.hp-categories-b .hp-category-label{border:1px solid #ffffff80;background:#ffffff04;border-radius:3px;font-size:21px}
.hp-categories-b .hp-category-label:hover,.hp-categories-b .hp-category-label:focus-visible{background:#ffffff18;border-color:#fff}
@media(max-width:1199px){.hp-category-inner{width:calc(100% - 48px)}.hp-categories-b .hp-category-inner{grid-template-columns:minmax(0,1fr) 175px;gap:28px}.hp-category-label,.hp-categories-b .hp-category-label{font-size:18px}.hp-category-grid,.hp-categories-b .hp-category-grid{gap:14px}.hp-categories-b .hp-category-heading{font-size:27px}}
@media(max-width:800px){.hp-categories{padding:36px 0;margin-top:30px}.hp-category-inner{width:calc(100% - 32px)}.hp-category-heading,.hp-categories-b .hp-category-heading{font-size:26px;text-align:left;margin:0 0 24px}.hp-categories-b .hp-category-inner{display:block}.hp-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hp-category-label,.hp-categories-b .hp-category-label{font-size:17px;min-height:72px;padding:16px 8px}.hp-categories-b .hp-category-heading small{font-size:13px}}
@media(prefers-reduced-motion:reduce){.hp-category-label{transition:none}}

/* Selected A: refined product navigation presentation, scoped to this section. */
.hp-categories-a{padding:64px 0 68px;background:linear-gradient(135deg,#f7f9fc 0%,#eef3f9 100%);border-top:1px solid #edf1f6;border-bottom:1px solid #e8eef5}
.hp-categories-a .hp-category-inner{max-width:1360px;width:calc(100% - 112px)}
.hp-categories-a .hp-category-heading{display:flex;align-items:center;gap:22px;margin-bottom:34px;font-size:32px;letter-spacing:.04em;color:#12365e}
.hp-categories-a .hp-category-heading:before{content:"";width:5px;height:30px;border-radius:4px;background:#084499;flex-shrink:0}
.hp-categories-a .hp-category-heading small{font-family:Arial,sans-serif;font-size:12px;letter-spacing:.23em;color:#8091a7;margin:4px 0 0;font-weight:500}
.hp-categories-a .hp-category-heading:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,#d6e0ed,transparent);margin-left:10px}
.hp-categories-a .hp-category-grid{gap:20px 22px;counter-reset:products}
.hp-categories-a .hp-category-grid li{counter-increment:products}
.hp-categories-a .hp-category-label{position:relative;isolation:isolate;overflow:hidden;min-height:118px;padding:35px 16px 23px;background:#ffffffeb;color:#143c6c;border:1px solid #dfe7f1;border-radius:10px;font-size:22px;font-weight:600;letter-spacing:.025em;box-shadow:0 4px 12px #163c6810,inset 0 1px 0 #fff;transition:background .22s,border-color .22s,box-shadow .22s}
.hp-categories-a .hp-category-label:before{content:counter(products,decimal-leading-zero);position:absolute;left:18px;top:12px;font:500 11px/1.2 Arial,sans-serif;letter-spacing:.12em;color:#8a9eb7}
.hp-categories-a .hp-category-label:after{content:"";position:absolute;bottom:0;left:calc(50% - 16px);width:32px;height:2px;background:#c3d3e7;border-radius:2px}
.hp-categories-a .hp-category-label:hover,.hp-categories-a .hp-category-label:focus-visible{background:#f8fbff;border-color:#8daed5;box-shadow:0 7px 18px #163c6815}
.hp-categories-a .hp-category-label:hover:after,.hp-categories-a .hp-category-label:focus-visible:after{background:#084499}
@media(max-width:1199px){.hp-categories-a .hp-category-inner{width:calc(100% - 64px)}.hp-categories-a .hp-category-label{font-size:19px}.hp-categories-a .hp-category-grid{gap:16px}}
@media(max-width:800px){.hp-categories-a{padding:34px 0 38px}.hp-categories-a .hp-category-inner{width:calc(100% - 36px)}.hp-categories-a .hp-category-heading{font-size:25px;gap:12px;margin-bottom:24px}.hp-categories-a .hp-category-heading:before{width:4px;height:24px}.hp-categories-a .hp-category-heading small{font-size:10px;letter-spacing:.15em}.hp-categories-a .hp-category-heading:after{margin-left:0}.hp-categories-a .hp-category-grid{gap:12px}.hp-categories-a .hp-category-label{min-height:94px;padding:29px 7px 19px;font-size:17px;letter-spacing:0;border-radius:8px}.hp-categories-a .hp-category-label:before{top:10px;left:12px;font-size:10px}.hp-categories-a .hp-category-label:after{width:24px;left:calc(50% - 12px)}}
@media(prefers-reduced-motion:reduce){.hp-categories-a .hp-category-label{transition:none}}

/* Hover preview: restrained motion, only on devices with a precise pointer. */
.hp-categories-a .hp-category-label{transition:transform 230ms cubic-bezier(.2,.7,.3,1),background 230ms ease,border-color 230ms ease,box-shadow 230ms ease}
.hp-categories-a .hp-category-label:before{transition:color 230ms ease}
.hp-categories-a .hp-category-label:after{transition:width 230ms ease,left 230ms ease,background 230ms ease}
@media(hover:hover) and (pointer:fine){
.hp-categories-a .hp-category-label:hover{transform:translateY(-3px);background:#f5f9ff;border-color:#96b5dd;box-shadow:0 10px 24px #163c681c}
.hp-categories-a .hp-category-label:hover:before{color:#084499}
.hp-categories-a .hp-category-label:hover:after{width:60px;left:calc(50% - 30px);background:#084499}
}
.hp-categories-a .hp-category-label:focus-visible{background:#f5f9ff;border-color:#96b5dd;box-shadow:0 10px 24px #163c681c}
.hp-categories-a .hp-category-label:focus-visible:before{color:#084499}
.hp-categories-a .hp-category-label:focus-visible:after{width:60px;left:calc(50% - 30px);background:#084499}
@media(hover:none){.hp-categories-a .hp-category-label:hover{transform:none;background:#ffffffeb;border-color:#dfe7f1;box-shadow:0 4px 12px #163c6810,inset 0 1px 0 #fff}.hp-categories-a .hp-category-label:hover:after{background:#c3d3e7}}
@media(prefers-reduced-motion:reduce){.hp-categories-a .hp-category-label,.hp-categories-a .hp-category-label:before,.hp-categories-a .hp-category-label:after{transition:none}.hp-categories-a .hp-category-label:hover{transform:none}}
