/* Runtime adaptations only. Reference geometry lives in homepage-reference.css. */
/* Keep Chinese and Latin labels in one local sans-serif family, at readable sizes. */
.powerld-reference-home {
  --font-body: "Microsoft YaHei", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-body);
  --font-mono: var(--font-body);
  --color-muted-text: #5f6874;
  --fs-11: 14px;
  --fs-12: 14px;
  --fs-13: 14px;
  --fs-14: 14px;
  --fs-16: 16px;
  font-family: var(--font-body);
  font-size: 16px;
}
/* Keep the configured footer image in its original colors and existing size. */
.powerld-reference-home .site-footer .site-logo__img { height: 40px; }
/* Homepage body and footer: 1680px shell with 32–56px symmetric gutters.
 * Header content follows the product centre's 1568px content boundaries.
 * The body prefix keeps these page-only rules out of the shared chrome build. */
.site-header__inner.container { width: min(1568px, calc(100% - clamp(64px, 8vw, 112px))); max-width: none; padding-inline: 0; }
@media (max-width: 760px) {
  .site-header__inner.container { width: calc(100% - 32px); }
}
body.powerld-reference-home,
body.powerld-reference-home #powerld-site-footer { --content-width: 1680px; }
body.powerld-reference-home .container,
body.powerld-reference-home #powerld-site-footer .container { padding-inline: clamp(32px, 4vw, 56px); }
/* Chinese copy and slide indicators follow the page gutter. */
body.powerld-reference-home { --hp-banner-inset: clamp(32px, 4vw, 56px); }
/* Long English headlines still need clearance from the previous-slide arrow. */
html[lang="en"] body.powerld-reference-home { --hp-banner-inset: calc(clamp(12px, 2.4vw, 36px) + 68px); }
@media (min-width: 768px) and (max-width: 1439px) {
  body.powerld-reference-home { --hp-banner-inset: calc(clamp(12px, 2.4vw, 36px) + 68px); }
}
body.powerld-reference-home .container.hp-banner__inner { padding-inline: var(--hp-banner-inset); }
body.powerld-reference-home .container.hp-banner__bar-inner { padding-left: var(--hp-banner-inset); }
body.powerld-reference-home .hp-banner__dots-list { min-width: 0; }
body.powerld-reference-home .hp-banner__count { flex-shrink: 0; white-space: nowrap; }
/* Navigation has its own row below the image, so it cannot cover slide copy. */
.powerld-reference-home .hp-banner__bar-inner { padding-block: 8px; gap: 12px; }
.powerld-reference-home .hp-banner__controls { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.powerld-reference-home .hp-banner__controls .hp-banner__nav { position: static; transform: none; width: 40px; height: 40px; flex-shrink: 0; }
.powerld-reference-home .hp-banner__controls .hp-banner__count { margin-left: 8px; }
.powerld-reference-home .hp-banner__dots-list { flex: 1; max-width: 184px; }
.powerld-reference-home .hp-banner__dot { flex: 1; width: auto; min-width: 8px; }
@media (max-width: 760px) {
  body.powerld-reference-home .container,
  body.powerld-reference-home #powerld-site-footer .container { padding-inline: 16px; }
}
@media (max-width: 767px) {
  body.powerld-reference-home,
  html[lang="en"] body.powerld-reference-home { --hp-banner-inset: 56px; }
}
.powerld-reference-home .hp-banner__sub,
.powerld-reference-home .hp-head__desc,
.powerld-reference-home .hp-prod-glance p,
.powerld-reference-home .hp-prod__text,
.powerld-reference-home .about__text,
.powerld-reference-home .news-card__text,
.powerld-reference-home .hp-news-empty p,
.powerld-reference-home .cta-band p {
  font-size: 16px;
  line-height: 1.7;
}
/* A short appointment label has the same footprint as the other carousel actions. */
.powerld-reference-home .hp-banner__actions .btn--lg {
  min-width: 176px;
  min-height: 52px;
  max-width: 100%;
  padding: 12px 24px;
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
/* One native link covers each card, retaining ordinary navigation and one tab stop. */
.powerld-reference-home .hp-prod { position: relative; isolation: isolate; }
.powerld-reference-home .hp-prod__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.powerld-reference-home .hp-prod__link:focus-visible { outline: none; }
.powerld-reference-home .hp-prod__link:focus-visible::after {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.hp-banner__slide .ph.hp-banner__image {
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
}
.hp-banner__slide .ph.hp-banner__image--responsive { display: block; padding: 0; background-image: none; }
.hp-banner__image--responsive picture,
.hp-banner__shot { display: block; width: 100%; height: 100%; }
.hp-banner__shot { object-fit: cover; }
/* Let the photography show through while retaining contrast behind white copy. */
.powerld-reference-home .hp-banner__overlay {
  background: linear-gradient(90deg, rgba(16, 20, 26, 0.82) 0%, rgba(16, 20, 26, 0.5) 30%, rgba(16, 20, 26, 0.12) 55%, rgba(16, 20, 26, 0) 72%);
}
.hp-banner__slide:not([data-active="true"]) { pointer-events: none; }
/* Fade opacity on entry, but expose the new actions immediately for keyboard focus. */
.hp-banner__slide[data-active="true"] { transition-property: opacity; }
.hp-banner__slide .ph:not(.hp-banner__image) { color: #8b93a0; }
/* Editable short specifications can truncate, but the live count stays visible. */
.pdcard__meta { display: flex; max-width: 100%; }
.pdcard__meta > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pdcard__meta > span + span { flex-shrink: 0; }
.site-nav__menu--wide { overflow: hidden; }

/* Keep the main navigation above legacy secondary page tabs (z-index:99). */
.site-header { z-index:1000; isolation:isolate; }
/* Switching categories changes only the pane, with internal scrolling. */
.site-nav__menu--wide { height:440px; max-height:calc(100vh - 100px); max-height:calc(100dvh - 100px); overflow:hidden; }
.site-nav__menu--wide .site-nav__menu-body,
.site-nav__menu--wide .pdnav { height:100%; min-height:0; }
.pdnav__side,
.pdnav__panes { min-height:0; overflow-y:auto; overscroll-behavior-y:contain; }
.pdnav__pane { align-content:start; }
.ph.ph--filled { position: relative; padding: 0; overflow: hidden; background-image: none; }
.ph.ph--filled::after { display: none; }
.ph--filled img { display: block; width: 100%; height: 100%; object-fit: cover; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hp-product-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.hp-product-pagination a, .hp-product-pagination span { display: inline-flex; min-width: 2.5rem; min-height: 2.5rem; padding: 0.45rem 0.85rem; align-items: center; justify-content: center; border: 1px solid #d9dfe6; color: #202733; text-decoration: none; }
.hp-product-pagination [aria-current="page"] { color: #fff; background: #dc2d2d; border-color: #dc2d2d; }
.hp-product-pagination a:hover, .hp-product-pagination a:focus-visible { color: #dc2d2d; border-color: #dc2d2d; }
@media (min-width: 768px) and (max-width: 991px) {
  .hp-banner__inner { padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 767px) {
  /* Keep the same overlay placement while avoiding the arrows covering text. */
  .hp-banner__inner { padding-left: 56px; padding-right: 56px; padding-bottom: 2rem; }
  .hp-banner__stage { height: auto; min-height: 520px; }
  .hp-banner__title { font-size: clamp(1.6rem,6.6vw,2rem); }
  .hp-banner__actions { gap: 0.6rem; margin-top: 1.25rem; }
  .powerld-reference-home .hp-banner__actions { flex-direction: column; align-items: flex-start; }
}

/* Keep editable copy in normal flow: the tallest slide sets the carousel height.
 * Full-bleed images and a narrower copy area retain the lower-left composition. */
.powerld-reference-home .hp-banner__stage {
  display: grid;
  flex: 1 0 auto;
  height: auto;
  min-height: max(460px, 43vw, calc(100vh - 157px));
  min-height: max(460px, 43vw, calc(100svh - 157px));
}
.powerld-reference-home .hp-banner__slide {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  display: grid;
  min-width: 0;
}
.powerld-reference-home .hp-banner__slide > .ph {
  position: absolute;
  inset: 0;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #090f19;
  animation: none;
}
.powerld-reference-home .hp-banner__shot { object-fit: cover; }
.powerld-reference-home .hp-banner__overlay {
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding-top: 0;
  align-items: flex-end;
}
body.powerld-reference-home .container.hp-banner__inner {
  --hp-copy-inset: max(var(--hp-banner-inset), calc((100vw - 1680px) / 2 + 56px));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: none;
  padding: clamp(32px, 4vw, 64px) var(--hp-copy-inset);
}
.powerld-reference-home .hp-banner__inner > * {
  max-width: min(600px, calc(38vw - var(--hp-copy-inset)));
  overflow-wrap: anywhere;
}
.powerld-reference-home .hp-banner__title {
  font-size: clamp(28px, 2.8vw, 48px);
  line-height: 1.25;
  text-wrap: balance;
}
@media (min-width: 992px) and (max-width: 1279px) {
  .powerld-reference-home .hp-banner__title { font-size: clamp(26px, 2.4vw, 30px); }
  .powerld-reference-home .hp-banner__actions { width: 100%; }
  .powerld-reference-home .hp-banner__actions > .btn--lg {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 10px;
  }
}
/* A zoomed laptop has less CSS space, so give text its own row instead of
 * shrinking readable type or painting a panel over the smaller power supplies. */
@media (max-width: 991px) {
  .powerld-reference-home .hp-banner { min-height: 0; }
  .powerld-reference-home .hp-banner__stage { min-height: 0; }
  .powerld-reference-home .hp-banner__slide { grid-template-rows: 1fr auto; }
  .powerld-reference-home .hp-banner__slide > .ph {
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 7 / 3;
    grid-row: 2;
  }
  .powerld-reference-home .hp-banner__overlay { grid-row: 1; background: #10141a; }
  body.powerld-reference-home .container.hp-banner__inner {
    padding: 28px clamp(16px, 4vw, 48px) 32px;
  }
  .powerld-reference-home .hp-banner__inner > * { max-width: 100%; }
  .powerld-reference-home .hp-banner__title { font-size: clamp(26px, 3.6vw, 36px); }
  .powerld-reference-home .hp-banner__actions { margin-top: 24px; }
}