@font-face {
  font-family: "VA Shop HarmonyOS Sans";
  src: url("./fonts/HarmonyOS-Sans-shop-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "VA Shop HarmonyOS Sans";
  src: url("./fonts/HarmonyOS-Sans-shop-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.va-detail--shop {
  --va-font: "VA Shop HarmonyOS Sans", "Microsoft YaHei", sans-serif;
}

.va-shop-translated .va-hero {
  display: flex;
  flex-direction: column;
}

.va-shop-translated .va-shop-hero-copy {
  position: relative;
  z-index: 1;
  width: 90%;
  margin: 0 auto;
  padding: 40px 0 20px;
}

.va-shop-translated .va-eyebrow,
.va-shop-translated .va-hero-title,
.va-shop-translated .va-hero-description {
  position: static;
  width: 100%;
  transform: none;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.va-shop-translated .va-eyebrow {
  font-size: var(--va-shop-fs-17);
  line-height: 1.5;
}

.va-shop-translated .va-hero-title {
  display: block;
  margin-top: 16px;
}

.va-shop-translated .va-hero-name {
  display: block;
  font-size: clamp(26px, 3.159vw, 34px);
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.va-shop-translated .va-hero-description {
  margin-top: 16px;
  font-size: var(--va-shop-fs-19);
  line-height: 1.5;
}

/* Reuse the PC artwork without cropping; its empty upper area sits behind the copy. */
.va-shop-translated .va-hero .va-background {
  order: 1;
  margin-top: -20cqw;
  padding-top: 0;
}

.va-shop-translated .va-assembly { --va-shop-screen-height: 77.137546cqw; }
.va-shop-translated .va-installation { --va-shop-screen-height: 77.044610cqw; }
.va-shop-translated .va-airflow { --va-shop-screen-height: 73.605948cqw; }
.va-shop-translated .va-cruise { --va-shop-screen-height: 79.646840cqw; }

.va-shop-translated .va-section:not(.va-hero) {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  min-height: var(--va-shop-screen-height);
  padding-bottom: 40px;
}

.va-shop-translated .va-section .va-copy {
  position: relative;
  top: auto;
  left: auto;
  order: -1;
  flex: 0 0 auto;
  margin: 0 auto;
  padding-top: 8.921933cqw;
  transform: none;
}

.va-shop-translated .va-title,
.va-shop-translated .va-description {
  overflow-wrap: anywhere;
}

.va-shop-translated .va-section .va-video {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  margin: 40px auto 0;
}

@media (max-width: 750px) {
  .va-shop-translated .va-shop-hero-copy {
    padding-top: 28px;
  }

  .va-shop-translated .va-section:not(.va-hero) {
    min-height: 0;
  }

  .va-shop-translated .va-section .va-copy {
    padding-top: 40px;
  }

  .va-shop-translated .va-section .va-video {
    margin-top: 24px;
  }
}
.va-shop-translated .va-line {
  white-space: pre-wrap;
}

.va-shop-translated .va-hero .va-background {
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%);
}

.va-shop-translated[lang="en"] {
  --va-shop-en-mark-size: clamp(38px, 10.502vw, 113px);
  --va-shop-en-name-size: clamp(16px, 4.162vw, 44.8px);
  --va-shop-en-eyebrow-size: clamp(11px, 1.424vw, 15.32px);
  --va-shop-en-subtitle-size: clamp(12px, 1.898vw, 20.42px);
}

.va-shop-translated[lang="en"] .va-shop-hero-copy {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
}

.va-shop-translated[lang="en"] .va-eyebrow,
.va-shop-translated[lang="en"] .va-hero-title,
.va-shop-translated[lang="en"] .va-hero-description {
  position: absolute;
  left: 0;
  margin: 0;
}

.va-shop-translated[lang="en"] .va-eyebrow {
  top: 6cqw;
  font-size: var(--va-shop-en-eyebrow-size);
  line-height: 1.2;
  letter-spacing: 1px;
}

.va-shop-translated[lang="en"] .va-hero-title {
  top: 9.57cqw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 2.23vw, 24px);
}

.va-shop-translated[lang="en"] .va-mark,
.va-shop-translated[lang="en"] .va-hero-name {
  flex: 0 0 auto;
  font-family: "VA Anton", sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

.va-shop-translated[lang="en"] .va-mark {
  font-size: var(--va-shop-en-mark-size);
  line-height: 1;
}

.va-shop-translated[lang="en"] .va-hero-name {
  font-size: var(--va-shop-en-name-size);
  line-height: 1.187;
  text-align: left;
}

.va-shop-translated[lang="en"] .va-hero-name .va-line {
  background-size: 100% 200%;
  background-repeat: no-repeat;
}

.va-shop-translated[lang="en"] .va-hero-name .va-line:nth-child(2) {
  background-position: 0 100%;
}

.va-shop-translated[lang="en"] .va-hero-description {
  top: 23.2cqw;
  font-size: var(--va-shop-en-subtitle-size);
  line-height: 1.5;
  letter-spacing: clamp(0px, 0.19vw, 2px);
}

.va-shop-translated[lang="en"] .va-hero .va-background {
  margin-top: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (max-width: 750px) {
  .va-shop-translated[lang="en"] .va-hero .va-background {
    padding-top: 32px;
  }

  .va-shop-translated[lang="en"] .va-eyebrow,
  .va-shop-translated[lang="en"] .va-hero-description {
    letter-spacing: 0.36px;
  }
}