:root { --hd-red:#e83525;--hd-header-h:86px;--hd-container:1280px; }
.app { width:100%; }
.modal-actions { flex-wrap:wrap; margin-top:16px; }
.modal-actions #project-consult { display:inline-flex; align-items:center; padding:10px 18px; border-radius:6px; color:#fff; background:#e83525; text-decoration:none; }
.hd-site-header { position:sticky;z-index:80;top:0;height:var(--hd-header-h);padding:0 max(24px,calc((100% - var(--hd-container))/2));display:flex;align-items:center;background:var(--hd-red);border-bottom:1px solid rgba(255,255,255,.22);box-shadow:none;font-family:var(--font-sans,"Inter","Alibaba PuHuiTi 3.0","Microsoft YaHei",sans-serif);box-sizing:border-box; }
.hd-brand { position:relative;display:flex;align-items:center;flex:none; }
.hd-brand img { display:block;width:158px;max-height:51px;object-fit:contain;filter:brightness(0) invert(1)!important; }
.hd-brand::after { content:none;display:none; }
.hd-brand.is-custom img { filter:none!important; }
.hd-brand.is-custom::after { display:none; }
.hd-main-nav { height:100%;margin-left:auto;display:flex;align-items:stretch;gap:0; }
.hd-nav-link { position:relative;min-width:106px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#fff;font-family:inherit;font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;box-sizing:border-box; }
.hd-nav-link:hover,.hd-nav-link:focus-visible,.hd-nav-link.is-current { color:#fff;background:rgba(118,12,5,.18);outline:0; }
.hd-nav-link.is-current::after { position:absolute;right:22px;bottom:0;left:22px;height:3px;content:"";background:#fff; }
.hd-nav-link--product { min-width:122px;padding-right:25px; }
.hd-nav-link--product::before { position:absolute;right:14px;top:50%;width:6px;height:6px;content:"";border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .2s ease; }
.hd-nav-link--product[aria-expanded="true"]::before { transform:translateY(-20%) rotate(225deg); }
.hd-nav-tools { margin-left:20px;display:flex;align-items:center;gap:16px; }
.hd-search-link,.hd-language-link { height:38px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border:1px solid rgba(255,255,255,.55);border-radius:999px;text-decoration:none;font-size:12px;font-weight:750;transition:.2s; }
.hd-search-link { padding:0 13px;gap:7px; }
.hd-search-link svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round; }
.hd-search-form { position:relative;width:70px;height:38px;transition:width .2s ease; }
.hd-search-form.is-open { width:190px; }
.hd-search-form input { width:100%;height:38px;padding:0 72px 0 14px;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.55);border-radius:999px;outline:0;opacity:0;pointer-events:none;transition:.2s;box-sizing:border-box; }
.hd-search-form input::placeholder { color:rgba(255,255,255,.72); }
.hd-search-form.is-open input { padding-right:48px;opacity:1;pointer-events:auto;box-shadow:0 0 0 3px rgba(255,255,255,.12); }
.hd-search-form .hd-search-link { position:absolute;z-index:2;top:0;right:0;border:0;background:transparent;cursor:pointer; }
.hd-search-form:not(.is-open) .hd-search-link { border:1px solid rgba(255,255,255,.55); }
.hd-search-form.is-open .hd-search-link { width:42px;padding:0; }
.hd-search-form.is-open .hd-search-link span { display:none; }
.hd-language-link { width:58px;flex:0 0 58px;gap:4px;letter-spacing:0; }
.hd-language-link img { width:17px;height:17px;display:block;object-fit:contain; }
.hd-search-link:hover,.hd-language-link:hover { color:var(--hd-red);background:#fff;border-color:#fff; }
.hd-menu-toggle { display:none;width:44px;height:44px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px;color:#fff;background:rgba(118,12,5,.13);border:1px solid rgba(255,255,255,.58);border-radius:50%; }
.hd-menu-toggle span { width:19px;height:1.5px;display:block;background:currentColor; }
.hd-mobile-menu { position:fixed;z-index:160;inset:0;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .22s,visibility .22s; }
.hd-mobile-menu.is-open { visibility:visible;opacity:1;pointer-events:auto; }
.hd-mobile-menu-backdrop { position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:rgba(0,0,0,.48); }
.hd-mobile-menu-panel { position:absolute;top:0;right:0;width:min(340px,90vw);height:100%;padding:24px;overflow-y:auto;background:#fff;box-shadow:-24px 0 60px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .28s ease;box-sizing:border-box; }
.hd-mobile-menu.is-open .hd-mobile-menu-panel { transform:none; }
.hd-mobile-menu-head { padding-bottom:22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e6e7e9; }
.hd-mobile-menu-head img { width:142px;display:block; }
.hd-mobile-menu-close { width:40px;height:40px;padding:0;color:#222;background:transparent;border:0;font-size:32px;font-weight:200;line-height:1; }
.hd-mobile-menu nav { margin-top:20px; }
.hd-mobile-menu nav a { min-height:58px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;color:#202226;border-bottom:1px solid #e6e7e9;text-decoration:none;font-size:17px;font-weight:700; }
.hd-mobile-menu nav a span { color:#b0b2b6;font-size:11px;letter-spacing:.08em; }
.hd-mobile-menu nav a i { color:var(--hd-red);font-size:18px;font-style:normal; }
.hd-mobile-menu-contact { margin-top:24px;padding:20px 22px;display:block;color:#fff;background:var(--hd-red);text-decoration:none; }
.hd-mobile-menu-contact small { display:block;margin-bottom:8px;color:rgba(255,255,255,.72);font-size:10px;font-weight:800;letter-spacing:.14em; }
.hd-mobile-menu-contact strong { display:block;font-size:25px;line-height:1.15;letter-spacing:.01em; }
.hd-mobile-menu-contact em { display:block;margin-top:9px;color:rgba(255,255,255,.76);font-size:11px;font-style:normal;line-height:1.5; }
.hd-mega-menu { position:fixed;z-index:130;top:var(--hd-header-h);left:50%;display:grid;width:min(1280px,calc(100vw - 64px));min-height:350px;grid-template-columns:205px minmax(0,1fr);overflow:hidden;border:0;background:#fff;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,12px);transition:opacity .22s ease,transform .22s ease,visibility .22s ease;font-family:var(--font-sans,"Inter","Alibaba PuHuiTi 3.0","Microsoft YaHei",sans-serif);box-shadow:0 18px 38px rgba(0,0,0,.26),0 5px 14px rgba(0,0,0,.18); }
.hd-mega-menu.is-open { opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0); }
.hd-category-list { padding:40px 20px;background:#fff;border:0; }
.hd-category-list > span { margin:0 0 18px 16px;display:block;color:#86868b;font-size:12px; }
.hd-category-button { display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;width:100%;min-height:48px;margin-bottom:8px;padding:0 16px;color:#222;border:0;border-radius:999px;background:transparent;font-family:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer; }
.hd-category-button:hover,.hd-category-button:focus-visible,.hd-category-button.is-active { color:#222;background:#f3f4f6; }
.hd-category-button::after,.hd-category-button.is-active::after { content:"›";color:#86868b;font-size:20px;font-weight:400;transform:none; }
.hd-product-area { padding:26px 34px 30px; }
.hd-product-heading { display:none; }
.hd-product-panel[hidden] { display:none; }
.hd-product-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px; }
.hd-product-card { display:grid;grid-template-rows:210px auto;overflow:visible;border:0;color:#222;background:#fff;text-decoration:none; }
.hd-product-card:hover,.hd-product-card:focus-visible { border:0;box-shadow:none; }
.hd-product-card img { display:block;width:100%;height:100%;object-fit:contain;background:#fff; }
.hd-product-copy { min-height:75px;padding:12px 0 0;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:5px;text-align:center;border:0; }
.hd-product-copy strong { font-size:21px;font-weight:600; }
.hd-product-copy span { color:#8c8e93;font-size:19px;font-weight:500; }
.hd-product-copy em { width:100%;margin-top:7px;color:var(--hd-red);font-size:12px;font-style:normal;font-weight:600; }
.hd-product-copy i { font-size:17px; }
@media(min-width:901px) {
  .hd-main-nav .hd-nav-link:not(.hd-nav-link--product) { display:inline-flex; }
  .hd-main-nav { overflow:visible; gap:0; }
  .hd-mega-menu { grid-template-columns:205px minmax(0,1fr); }
  .hd-category-list { display:flex; flex-direction:column; border-right:1px solid #e6e7e9; border-bottom:0; }
  .hd-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hd-product-grid--single { grid-template-columns:minmax(0,1fr); }
  .hd-product-card { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:1100px){.hd-site-header{padding:0 24px}.hd-brand img{width:142px}.hd-brand::after{font-size:13.5px}.hd-nav-link{min-width:90px;padding:0 12px;font-size:13px}.hd-nav-link--product{min-width:103px;padding-right:21px}.hd-nav-tools{margin-left:12px}}
@media(max-width:900px){:root{--hd-header-h:70px}.hd-site-header{padding:0 18px}.hd-brand img{width:142px}.hd-main-nav,.hd-nav-tools,.hd-mega-menu{display:none}.hd-menu-toggle{margin-left:auto;display:flex}}

/* Revision 76 — keep the product-centre header in step with the main site.
   The current item carried a dark-red block the main header never shows, the
   links were a weight heavier, and the language switch kept the outline the
   main header dropped in rev67. Scoped under .hd-site-header so these win over
   the shared rules above and the page's inline styles. */
.hd-site-header .hd-nav-link.is-current { background: transparent; }
.hd-site-header .hd-nav-link { font-weight: 400; }
.hd-site-header .hd-language-link { border: 0; }
/* The collapsed search pill is 70px but icon + "搜索" need ~73px, so the label
   wrapped to two lines. Widen it where the label is visible (both the product
   centre and the colour designer share this sheet). */
@media (min-width: 1001px) {
  .hd-site-header form.hd-search-form:not(.is-open) { width: 96px; }
}
.hd-site-header .hd-search-link span { white-space: nowrap; }

/* Revision 78 — line the product-centre header up with the main site's
   .container and its 1200 / 900 / 600 breakpoints (rev44.css), and render text
   with the same antialiasing the main site sets on body; without it the links
   looked a weight heavier on macOS. */
.hd-site-header { padding: 0 max(56px, calc((100% - 1280px) / 2)); -webkit-font-smoothing: antialiased; }
@media (max-width: 1200px) {
  .hd-site-header { padding: 0 max(32px, calc((100% - 1120px) / 2)); }
  .hd-site-header .hd-brand img { width: 158px; }
  .hd-site-header .hd-nav-link { min-width: 80px; padding: 0 10px; font-size: 13px; }
  .hd-site-header .hd-nav-link--product { min-width: 104px; padding-right: 21px; }
  .hd-site-header .hd-nav-tools { margin-left: 12px; gap: 7px; }
  .hd-site-header form.hd-search-form:not(.is-open) .hd-search-link { width: 38px; padding: 0; }
  .hd-site-header form.hd-search-form:not(.is-open) .hd-search-link span { display: none; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .hd-site-header form.hd-search-form:not(.is-open) { width: 70px; }
}
@media (max-width: 900px) {
  .hd-site-header { padding: 0 20px; }
  .hd-site-header .hd-brand img { width: 142px; }
}
@media (max-width: 600px) {
  .hd-site-header { padding: 0 16px; }
}