@font-face {
  font-family: "WixChineseTitle";
  src: url("/fonts/wix-font-1.woff2") format("woff2");
  font-display: swap;
}

/* Absolute final order package typography override. */
@media (min-width: 761px) {
  .order.sectionBand .packageOption button {
    min-height: 43px !important;
    padding: 8px 16px !important;
    border: 1.5px solid #000 !important;
    border-radius: 7px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: -4px 5px 0 #000 !important;
    transform: translate(0, 0) !important;
  }

  .order.sectionBand .packagePrice,
  .order.sectionBand .packagePrice strong {
    font-size: 18px !important;
  }

  .order.sectionBand .packagePrice {
    gap: 5px !important;
    margin-top: 13px !important;
  }

  .order.sectionBand .packageOption button.selected,
  .order.sectionBand .packageOption button:hover,
  .order.sectionBand .packageOption button:focus-visible {
    border-color: #000 !important;
    background: #fff !important;
    color: #000 !important;
    outline: none !important;
    box-shadow: -4px 5px 0 #000 !important;
  }
}

/* Final package button design for all responsive widths. */
.order.sectionBand .packageOption button {
  min-height: 43px !important;
  padding: 8px 16px !important;
  border: 1.5px solid #000 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow: -4px 5px 0 #000 !important;
  transform: translate(0, 0) !important;
}

.order.sectionBand .packageOption button.selected,
.order.sectionBand .packageOption button:hover,
.order.sectionBand .packageOption button:focus-visible {
  border-color: #000 !important;
  background: #fff !important;
  color: #000 !important;
  outline: none !important;
  box-shadow: -4px 5px 0 #000 !important;
}

.order.sectionBand .packagePrice,
.order.sectionBand .packagePrice strong {
  font-size: 18px !important;
}

@font-face {
  font-family: "WixChineseBody";
  src: url("/fonts/wix-font-2.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "CanvaShanhai";
  src: url("/fonts/shanhai.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "OpenSansLocal";
  src: url("/fonts/open-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "MXiangheHei";
  src: url("/fonts/wix-font-2.woff2") format("woff2");
  font-display: swap;
}

:root {
  color: #000;
  background: #f8f6f3;
  font-family: "WixChineseBody", "Noto Sans SC", Arial, sans-serif;
  --blue: #0732ef;
  --blue-dark: #001d4b;
  --paper: #f8f6f3;
  --soft-blue: #e5f0fe;
  --red: #fc0000;
  --green: #407c51;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background: var(--paper);
}

button,
a {
  font: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.site {
  overflow: hidden;
}

.header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 12px clamp(18px, 5vw, 72px);
  background: rgba(248, 246, 243, 0.96);
  border-bottom: 2px solid var(--blue);
  backdrop-filter: blur(12px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.08em;
}

.brand img {
  width: 88px;
}

.brand span {
  font-family: "Lucida Console", monospace;
  font-size: 15px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.nav button,
.menuButton {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
  letter-spacing: 0.1em;
  padding: 8px 11px;
  font-family: "Lucida Console", monospace;
  font-size: 15px;
}

.nav button:hover,
.nav button:focus-visible,
.menuButton:hover,
.menuButton:focus-visible {
  color: var(--blue);
  outline: none;
}

.menuButton {
  display: none;
  border: 1px solid var(--blue);
}

.sectionBand {
  background: linear-gradient(180deg, #f8f6f3 0%, #e5f0fe 100%);
}

.hero {
  min-height: calc(100vh - 82px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
  align-items: center;
  gap: clamp(28px, 5vw, 70px);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 6vw, 90px) clamp(42px, 5vw, 70px);
}

.heroText {
  max-width: 760px;
}

.brandStrip {
  width: min(390px, 80vw);
  margin-bottom: 28px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.hero h1 {
  font-family: "WixChineseTitle", "Noto Sans SC", sans-serif;
  font-size: clamp(52px, 8.6vw, 106px);
  line-height: 0.95;
  color: var(--blue);
  letter-spacing: 0;
}

.hero h2 {
  margin-top: 10px;
  font-family: "WixChineseTitle", "Noto Sans SC", sans-serif;
  font-size: clamp(42px, 7vw, 88px);
  line-height: 1;
  color: #000;
}

.hero p {
  margin-top: 24px;
  max-width: 680px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.55;
}

.heroActions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.primaryCta {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  padding: 13px 28px;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 7px 7px 0 var(--blue);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.primaryCta:hover,
.primaryCta:focus-visible {
  transform: translate(3px, 3px);
  box-shadow: 4px 4px 0 var(--blue);
  outline: none;
}

.heroActions span {
  color: var(--blue-dark);
  font-size: 18px;
  font-weight: 700;
}

.heroVisual {
  position: relative;
  min-height: 500px;
  display: grid;
  place-items: center;
}

.heroPack {
  width: min(420px, 82vw);
  filter: drop-shadow(0 28px 36px rgba(0, 29, 75, 0.24));
}

.seal {
  position: absolute;
  right: 4%;
  bottom: 13%;
  width: 112px;
}

.heroImageSection,
.hero.sectionBand {
  position: relative;
  min-height: auto;
  width: 100%;
  aspect-ratio: 1920 / 990;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #fff url("/assets/hero-section-reference.jpg") center / cover no-repeat;
}

.heroImageSection .heroText,
.hero.sectionBand .heroText {
  position: absolute;
  inset: 0;
  max-width: none;
  pointer-events: none;
}

.heroImageSection .brandStrip,
.heroImageSection h1,
.heroImageSection h2,
.heroImageSection p,
.heroImageSection .heroVisual,
.hero.sectionBand .brandStrip,
.hero.sectionBand h1,
.hero.sectionBand h2,
.hero.sectionBand p,
.hero.sectionBand .heroVisual {
  display: none;
}

.heroImageSection .heroActions,
.hero.sectionBand .heroActions {
  position: absolute;
  left: 22.4%;
  bottom: 14.5%;
  width: 27.8%;
  height: 10.8%;
  margin: 0;
  display: block;
  pointer-events: auto;
}

.heroImageSection .primaryCta,
.hero.sectionBand .primaryCta {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  box-shadow: none;
}

.heroImageSection .heroActions span,
.hero.sectionBand .heroActions span {
  display: none;
}

/* True final hero override: keep this below all cloned source rules. */
@media (min-width: 761px) {
  .hero.sectionBand {
    aspect-ratio: 1920 / 1018 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .mobileHero,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .desktopHero {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand .desktopHeroContent {
    position: absolute !important;
    left: 13.65% !important;
    top: 10.1% !important;
    width: 45.6% !important;
    text-align: center !important;
  }

  .hero.sectionBand .desktopChineseTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.15vw, 22px) !important;
    margin: 4% 0 0 !important;
    width: 100% !important;
    font-size: initial !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero.sectionBand .desktopChineseTitle img {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(150px, 14.583vw, 280px) !important;
    max-width: none !important;
    height: auto !important;
  }

  .hero.sectionBand .desktopChineseTitle span {
    display: inline-block !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(78px, 8.333vw, 160px) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-shadow: 0.055em 0.055em 0 #6c6c6c !important;
    transform: translateY(-0.01em) !important;
  }

  .hero.sectionBand .desktopEnglishTitle {
    display: block !important;
    margin: 6.8% 0 0 !important;
    font-family: "OpenSansLocal", "Open Sans", Arial, sans-serif !important;
    font-size: clamp(34px, 3.385vw, 65px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero.sectionBand .desktopHeroCopy {
    display: block !important;
    width: 98% !important;
    max-width: none !important;
    margin: 4.9% auto 0 !important;
    font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
    font-size: clamp(13px, 1.042vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 1.46 !important;
    text-align: center !important;
  }

  .hero.sectionBand .desktopHeroCta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9% !important;
    width: 60.3% !important;
    aspect-ratio: 528 / 108 !important;
    margin: 12.9% auto 0 !important;
    border: clamp(4px, 0.42vw, 8px) solid #f40000 !important;
    border-radius: 999px !important;
    background: #fff !important;
  }

  .hero.sectionBand .desktopHeroCta span {
    display: inline-block !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(26px, 2.604vw, 50px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  .hero.sectionBand .desktopHeroCta b {
    display: inline-flex !important;
  }

  .hero.sectionBand .desktopCerts {
    display: block !important;
    width: 63.5% !important;
    margin: 7.7% auto 0 !important;
  }

  .hero.sectionBand .desktopHeroBox {
    right: 11.15% !important;
    top: 14.8% !important;
    width: 26.8% !important;
  }

  .hero.sectionBand .desktopHeroCandy {
    left: 1.25% !important;
    bottom: 1.6% !important;
    width: 14.1% !important;
    transform: rotate(-10deg) !important;
  }
}

/* Footer removed per latest design direction. */
.footer {
  display: none !important;
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: auto !important;
    background: #fff !important;
  }

  .hero.sectionBand > .desktopHero,
  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .mobileHero {
    display: flex !important;
  }
}

/* Final sample-matched desktop lock for the last section. */
@media (min-width: 761px) {
  .orderStage {
    min-height: min(42.35vw, 593px) !important;
  }

  .orderPanel {
    left: 30.9% !important;
    top: 7.2% !important;
    width: 40.4% !important;
    max-width: 566px !important;
  }

  .orderTitle,
  .orderTitleLs {
    font-size: 80px !important;
  }

  .orderTitle {
    gap: 15px !important;
    margin-bottom: 40px !important;
  }

  .orderCopy {
    width: 86% !important;
    margin-bottom: 19px !important;
    line-height: 1.43 !important;
  }

  .orderBullets {
    margin-bottom: 24px !important;
  }

  .orderBullets,
  .orderBullets li {
    line-height: 1.42 !important;
  }

  .orderCod {
    margin-bottom: 30px !important;
    font-size: 38px !important;
  }

  .orderPrompt {
    margin-bottom: 14px !important;
  }

  .order .packageSelect > span {
    margin-bottom: 18px !important;
  }

  .packageOptions {
    gap: 34px !important;
  }

  .packageOption button {
    min-height: 39px !important;
    border: 1.5px solid #000 !important;
    border-left-width: 5px !important;
    border-radius: 7px !important;
    padding: 8px 16px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    outline: none !important;
  }

  .packageOption button.selected,
  .packageOption button:hover,
  .packageOption button:focus-visible {
    border-color: #000 !important;
    background: #fff !important;
    color: #000 !important;
    outline: none !important;
  }

  .packagePrice {
    font-size: 18px !important;
    margin-top: 13px !important;
  }

  .packagePrice strong {
    font-size: 18px !important;
  }

  .orderProduct {
    right: 18% !important;
    top: 6.2% !important;
    width: 18.45% !important;
    max-width: 258px !important;
    filter: drop-shadow(25px 25px 0 rgba(0, 0, 0, 0.98)) !important;
  }

  .orderCandy {
    left: 20.5% !important;
    bottom: 2% !important;
    width: 10.4% !important;
    max-width: 146px !important;
  }

  .packageOption button {
    min-height: 43px !important;
    padding: 8px 16px !important;
    border: 1.5px solid #000 !important;
    border-left-width: 5px !important;
    border-radius: 7px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: none !important;
  }

  .packagePrice,
  .packagePrice strong {
    font-size: 18px !important;
  }

  .packagePrice {
    gap: 5px !important;
    margin-top: 13px !important;
  }
}

.header,
.nav,
.menuButton {
  display: none !important;
}

/* User spacing revision for desktop hero. */
@media (min-width: 761px) {
  .hero.sectionBand {
    aspect-ratio: 1920 / 1060 !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroContent {
    top: 9.6% !important;
  }

  .hero.sectionBand .desktopHero .desktopEnglishTitle {
    margin-top: 100px !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroCopy {
    margin-top: 80px !important;
  }

  .hero.sectionBand .desktopHero button.desktopHeroCta,
  .hero.sectionBand .desktopHero .desktopHeroCta {
    margin-top: 0 !important;
  }

  .hero.sectionBand .desktopHero .desktopCerts {
    margin-top: 60px !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroBox {
    top: 12.65% !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroCandy {
    top: 66.42% !important;
  }
}

/* User revision: desktop hero typography and CTA position. */
@media (min-width: 761px) {
  .hero.sectionBand .desktopHero h1.desktopChineseTitle > span,
  .hero.sectionBand .desktopHero .desktopChineseTitle > span {
    font-size: clamp(70px, 7.292vw, 140px) !important;
  }

  .hero.sectionBand .desktopHero .desktopEnglishTitle {
    font-size: clamp(42px, 4.167vw, 80px) !important;
    line-height: 1 !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroCopy {
    font-size: clamp(16px, 1.458vw, 28px) !important;
    line-height: 1.42 !important;
  }

  .hero.sectionBand .desktopHero button.desktopHeroCta,
  .hero.sectionBand .desktopHero .desktopHeroCta {
    margin-top: 5.1% !important;
  }
}

@media (min-width: 761px) {
  .hero.sectionBand .desktopHero h1.desktopChineseTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.15vw, 22px) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 4% 0 0 !important;
    padding: 0 !important;
    font-size: initial !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero.sectionBand .desktopHero h1.desktopChineseTitle > span {
    display: inline-block !important;
    align-self: center !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(78px, 8.333vw, 160px) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-shadow: 0.055em 0.055em 0 #6c6c6c !important;
  }
}

/* Final LS hero lockup: keep SEO text as text while matching the supplied 1920x1018 reference. */
@media (min-width: 761px) {
  .hero.sectionBand {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1920 / 1018 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .mobileHero,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .desktopHero {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand .desktopHeroLeftShape {
    position: absolute !important;
    left: -3.2% !important;
    top: 0 !important;
    width: 23.5% !important;
    height: 100% !important;
    clip-path: polygon(0 0, 16.5% 0, 100% 100%, 0 100%) !important;
    background: #f90012 !important;
  }

  .hero.sectionBand .desktopHeroRightShape {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 29% !important;
    height: 100% !important;
    background: #f90012 !important;
  }

  .hero.sectionBand .desktopHeroLogoImage {
    position: absolute !important;
    left: 2.08% !important;
    top: 3.63% !important;
    z-index: 4 !important;
    width: 6.46% !important;
    height: auto !important;
  }

  .hero.sectionBand .desktopHeroLang {
    position: absolute !important;
    right: 5.3% !important;
    top: 4.2% !important;
    z-index: 5 !important;
    color: #000 !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(26px, 2.2vw, 42px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-decoration: underline !important;
  }

  .hero.sectionBand .desktopHeroContent {
    position: absolute !important;
    left: 13.65% !important;
    top: 10.1% !important;
    z-index: 3 !important;
    width: 45.6% !important;
    text-align: center !important;
  }

  .hero.sectionBand .desktopTechImage {
    display: block !important;
    width: 81.7% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  .hero.sectionBand .desktopChineseTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.15vw, 22px) !important;
    width: 100% !important;
    margin: 4% 0 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-size: initial !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .hero.sectionBand .desktopChineseTitle img {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(150px, 14.583vw, 280px) !important;
    max-width: none !important;
    height: auto !important;
  }

  .hero.sectionBand .desktopChineseTitle span {
    display: inline-block !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(78px, 8.333vw, 160px) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-shadow: 0.055em 0.055em 0 #6c6c6c !important;
    transform: translateY(-0.01em) !important;
  }

  .hero.sectionBand .desktopEnglishTitle {
    display: block !important;
    width: 100% !important;
    margin: 6.8% 0 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-family: "OpenSansLocal", "Open Sans", Arial, sans-serif !important;
    font-size: clamp(34px, 3.385vw, 65px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero.sectionBand .desktopHeroCopy {
    display: block !important;
    width: 98% !important;
    max-width: none !important;
    margin: 4.9% auto 0 !important;
    padding: 0 !important;
    color: #000 !important;
    font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
    font-size: clamp(13px, 1.042vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 1.46 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
  }

  .hero.sectionBand .desktopHeroCta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9% !important;
    width: 60.3% !important;
    min-height: 0 !important;
    aspect-ratio: 528 / 108 !important;
    margin: 9.2% auto 0 !important;
    padding: 0 !important;
    border: clamp(4px, 0.42vw, 8px) solid #f40000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer !important;
  }

  .hero.sectionBand .desktopHeroCta span {
    display: inline-block !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(26px, 2.604vw, 50px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    transform: translateY(-0.02em) !important;
  }

  .hero.sectionBand .desktopHeroCta b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(30px, 3.18vw, 61px) !important;
    height: clamp(30px, 3.18vw, 61px) !important;
    border-radius: 999px !important;
    background: #f40000 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(34px, 3.45vw, 66px) !important;
    font-weight: 900 !important;
    line-height: 0.72 !important;
  }

  .hero.sectionBand .desktopCerts {
    display: block !important;
    width: 63.5% !important;
    height: auto !important;
    margin: 7.7% auto 0 !important;
  }

  .hero.sectionBand .desktopHeroBox {
    position: absolute !important;
    right: 11.15% !important;
    top: 14.8% !important;
    z-index: 3 !important;
    width: 26.8% !important;
    max-width: none !important;
    height: auto !important;
  }

  .hero.sectionBand .desktopHeroCandy {
    position: absolute !important;
    left: 1.25% !important;
    bottom: 3.6% !important;
    z-index: 3 !important;
    width: 14.1% !important;
    max-width: none !important;
    height: auto !important;
    transform: rotate(-10deg) !important;
  }
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: 36px 0 28px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand > .desktopHero,
  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .mobileHero {
    display: flex !important;
  }

  .hero.sectionBand .mobileHero h1,
  .hero.sectionBand .mobileHero h2,
  .hero.sectionBand .mobileHero p {
    display: block !important;
  }

  .hero.sectionBand .mobileHero img {
    display: block !important;
  }

  .hero.sectionBand .mobileHero button {
    display: flex !important;
  }

  .hero.sectionBand .mobileHero span,
  .hero.sectionBand .mobileHero b,
  .hero.sectionBand .mobileHero a {
    display: inline-flex !important;
  }
}

.header,
.nav,
.menuButton {
  display: none !important;
}

@media (max-width: 760px) {
  .hero.sectionBand {
    display: block !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    padding: 20px 0 22px !important;
    background: #fff !important;
    overflow: hidden;
  }

  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual {
    display: none !important;
  }

  .hero.sectionBand .mobileHero {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 9%;
    background: #fff;
    color: #000;
    text-align: center;
  }

  .hero.sectionBand .mobileHero * {
    box-sizing: border-box;
  }

  .hero.sectionBand .mobileHero h1,
  .hero.sectionBand .mobileHero h2,
  .hero.sectionBand .mobileHero p,
  .hero.sectionBand .mobileHero img,
  .hero.sectionBand .mobileHero button,
  .hero.sectionBand .mobileHero a,
  .hero.sectionBand .mobileHero div,
  .hero.sectionBand .mobileHero span,
  .hero.sectionBand .mobileHero b {
    display: revert !important;
  }

  .hero.sectionBand .mobileHeroTop {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 38px;
  }

  .hero.sectionBand .mobileLsLogo {
    width: 20.5%;
    min-width: 74px;
    max-width: 120px;
    height: auto;
  }

  .hero.sectionBand .mobileLang {
    margin-top: 10px;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: clamp(22px, 6.1vw, 34px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  .hero.sectionBand .mobileTech {
    margin: 0 0 8px;
    font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif;
    font-size: clamp(21px, 6.1vw, 34px);
    font-weight: 900;
    line-height: 1.05;
    color: #fff;
    -webkit-text-stroke: 1px #000;
    text-shadow: 1px 1px 0 #000;
  }

  .hero.sectionBand .mobileChineseTitle {
    margin: 0;
    width: 100%;
    font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif;
    font-size: clamp(40px, 11.6vw, 64px);
    font-weight: 900;
    line-height: 1.08;
    color: #000;
    white-space: nowrap;
  }

  .hero.sectionBand .mobileChineseTitle span {
    display: inline !important;
    color: #f40000;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.16em;
    font-weight: 700;
    text-shadow: -0.08em 0 0 #8b8b8b;
  }

  .hero.sectionBand .mobileEnglishTitle {
    margin: 16px 0 0;
    font-family: Arial, sans-serif;
    font-size: clamp(30px, 8.1vw, 46px);
    font-weight: 800;
    line-height: 1.1;
  }

  .hero.sectionBand .mobileHeroCopy {
    margin: 34px 0 0;
    max-width: 100%;
    font-family: "WixChineseBody", "Noto Sans SC", Arial, sans-serif;
    font-size: clamp(20px, 5.4vw, 30px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
  }

  .hero.sectionBand .mobileHeroCta {
    width: 79%;
    min-height: 0;
    margin: 42px 0 24px;
    aspect-ratio: 4.25 / 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8%;
    border: clamp(7px, 1.8vw, 11px) solid #f40000;
    border-radius: 999px;
    background: #fff;
    color: #000;
    cursor: pointer;
    padding: 0;
  }

  .hero.sectionBand .mobileHeroCta span {
    font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif;
    font-size: clamp(34px, 9.2vw, 56px);
    font-weight: 900;
    line-height: 1;
  }

  .hero.sectionBand .mobileHeroCta b {
    width: clamp(48px, 12vw, 74px);
    height: clamp(48px, 12vw, 74px);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f40000;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: clamp(35px, 9vw, 56px);
    line-height: 1;
  }

  .hero.sectionBand .mobileCerts {
    width: 87%;
    height: auto;
    margin: 0 auto 80px;
  }

  .hero.sectionBand .mobileProductStage {
    position: relative;
    display: block !important;
    width: 86%;
    min-height: clamp(600px, 142vw, 920px);
    margin: 0 auto;
  }

  .hero.sectionBand .mobileBox {
    position: absolute;
    left: 3%;
    top: 0;
    width: 76%;
    height: auto;
    filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.16));
  }

  .hero.sectionBand .mobileCandy {
    position: absolute;
    right: -2%;
    bottom: 5%;
    width: 54%;
    height: auto;
    transform: rotate(8deg);
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.18));
  }
}

.header,
.nav,
.menuButton {
  display: none !important;
}

.hero.sectionBand {
  position: relative;
  min-height: auto;
  aspect-ratio: 1920 / 990;
  display: block;
  padding: 0;
  overflow: hidden;
  background: #fff !important;
}

.hero.sectionBand > .heroText,
.hero.sectionBand > .heroVisual,
.hero.sectionBand > .mobileHero {
  display: none !important;
}

.desktopHero {
  position: absolute;
  inset: 0;
  display: block;
  background: #fff;
  color: #000;
  overflow: hidden;
}

.hero.sectionBand .desktopHero h1,
.hero.sectionBand .desktopHero h2,
.hero.sectionBand .desktopHero p,
.hero.sectionBand .desktopHero span,
.hero.sectionBand .desktopHero b {
  display: revert !important;
}

.desktopHeroLeftShape {
  position: absolute;
  left: -3.5%;
  top: 0;
  width: 24%;
  height: 100%;
  background: #f70011;
  clip-path: polygon(0 0, 16% 0, 100% 100%, 0 100%);
}

.desktopHeroRightShape {
  position: absolute;
  right: 0;
  top: 0;
  width: 29%;
  height: 100%;
  background: #f70011;
}

.desktopHeroLogo {
  position: absolute;
  left: 2.1%;
  top: 3.7%;
  width: 6.4%;
  aspect-ratio: 1.24 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#ef1d25, #7b1017);
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(24px, 3.1vw, 58px);
  font-weight: 700;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.desktopHeroLang {
  position: absolute;
  right: 5.1%;
  top: 4.4%;
  z-index: 2;
  color: #000;
  font-family: Arial, sans-serif;
  font-size: clamp(20px, 2.2vw, 42px);
  font-weight: 900;
  text-decoration: underline;
}

.desktopHeroContent {
  position: absolute;
  left: 13.8%;
  top: 10.6%;
  z-index: 2;
  width: 45.6%;
  text-align: center;
}

.desktopTech {
  margin: 0 0 3.2%;
  font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif;
  font-size: clamp(30px, 3.45vw, 66px);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 1.8px #000;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0.04em;
}

.desktopChineseTitle {
  margin: 0;
  font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif;
  font-size: clamp(58px, 7vw, 134px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  color: #000;
}

.desktopChineseTitle span {
  color: #f00000;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08em;
  font-weight: 700;
  text-shadow: -0.08em 0 0 #8d8d8d;
}

.desktopEnglishTitle {
  margin: 4.2% 0 0;
  font-family: Arial, sans-serif;
  font-size: clamp(34px, 4.5vw, 86px);
  font-weight: 800;
  line-height: 1;
}

.desktopHeroCopy {
  margin: 4.2% auto 0;
  width: 91%;
  font-family: "WixChineseBody", "Noto Sans SC", Arial, sans-serif;
  font-size: clamp(14px, 1.42vw, 28px);
  font-weight: 600;
  line-height: 1.55;
}

.desktopHeroCta {
  width: 54%;
  min-height: 0;
  aspect-ratio: 4.9 / 1;
  margin: 7.5% auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8%;
  border: clamp(3px, 0.42vw, 8px) solid #f40000;
  border-radius: 999px;
  background: #fff;
  color: #000;
  cursor: pointer;
}

.desktopHeroCta span {
  font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif;
  font-size: clamp(22px, 2.65vw, 51px);
  font-weight: 900;
  line-height: 1;
}

.desktopHeroCta b {
  width: clamp(26px, 3.1vw, 60px);
  height: clamp(26px, 3.1vw, 60px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f40000;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: clamp(28px, 3.2vw, 62px);
  line-height: 0.75;
}

.desktopCerts {
  width: 59%;
  margin: 7.5% auto 0;
}

.desktopHeroBox {
  position: absolute;
  right: 11.1%;
  top: 15.2%;
  z-index: 2;
  width: 28.2%;
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, 0.22));
}

.desktopHeroCandy {
  position: absolute;
  left: 1.1%;
  bottom: 6.3%;
  z-index: 2;
  width: 15.1%;
  transform: rotate(-12deg);
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: auto;
  }

  .desktopHero {
    display: none !important;
  }
}

@media (min-width: 761px) {
  .hero.sectionBand {
    aspect-ratio: 1920 / 1018 !important;
    background: #fff !important;
  }

  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .mobileHero {
    display: none !important;
  }

  .desktopHero {
    display: block !important;
    position: absolute;
    inset: 0;
    background: #fff;
    overflow: hidden;
  }

  .desktopHeroLeftShape {
    left: -3.2%;
    top: 0;
    width: 23.5%;
    height: 100%;
    clip-path: polygon(0 0, 16.5% 0, 100% 100%, 0 100%);
    background: #f90012;
  }

  .desktopHeroRightShape {
    right: 0;
    top: 0;
    width: 29%;
    height: 100%;
    background: #f90012;
  }

  .desktopHeroLogoImage {
    position: absolute;
    left: 2.08%;
    top: 3.63%;
    z-index: 3;
    width: 6.46%;
    height: auto;
  }

  .desktopHeroLang {
    right: 5.3%;
    top: 4.2%;
    z-index: 4;
    font-family: Arial, sans-serif;
    font-size: clamp(26px, 2.2vw, 42px);
    font-weight: 900;
    line-height: 1;
    color: #000;
    text-decoration: underline;
  }

  .desktopHeroContent {
    left: 13.65%;
    top: 10.1%;
    width: 45.6%;
    z-index: 3;
    text-align: center;
  }

  .desktopTechImage {
    width: 81.2%;
    height: auto;
    margin: 0 auto;
  }

  .desktopChineseTitle {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 1.1%;
    margin: 3.25% 0 0;
    width: 100%;
    white-space: nowrap;
    line-height: 0.95;
  }

  .desktopChineseTitle img {
    display: block !important;
    width: 32%;
    height: auto;
    flex: 0 0 auto;
  }

  .desktopChineseTitle span {
    display: inline-block !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif;
    font-size: clamp(78px, 8.333vw, 160px);
    font-weight: 400;
    line-height: 0.95;
    color: #000;
    letter-spacing: 0;
    transform: translateY(-0.01em);
    text-shadow: 0.055em 0.055em 0 #6c6c6c;
  }

  .desktopEnglishTitle {
    margin: 3.75% 0 0;
    font-family: "OpenSansLocal", "Open Sans", Arial, sans-serif;
    font-size: clamp(34px, 3.385vw, 65px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    color: #000;
  }

  .desktopHeroCopy {
    margin: 3.7% auto 0;
    width: 98%;
    font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    font-size: clamp(13px, 1.042vw, 20px);
    font-weight: 400;
    line-height: 1.46;
    letter-spacing: 0;
    color: #000;
    text-align: center;
  }

  .desktopHeroCta {
    width: 60.3%;
    aspect-ratio: 528 / 108;
    margin: 7.55% auto 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 9%;
    border: clamp(4px, 0.42vw, 8px) solid #f40000;
    border-radius: 999px;
    background: #fff;
    padding: 0;
  }

  .desktopHeroCta span {
    display: inline-block !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif;
    font-size: clamp(26px, 2.604vw, 50px);
    font-weight: 400;
    line-height: 1;
    color: #000;
    transform: translateY(-0.02em);
  }

  .desktopHeroCta b {
    width: clamp(30px, 3.18vw, 61px);
    height: clamp(30px, 3.18vw, 61px);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f40000;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: clamp(34px, 3.45vw, 66px);
    font-weight: 900;
    line-height: 0.72;
    transform: translateY(-0.01em);
  }

  .desktopCerts {
    width: 63.5%;
    margin: 7.35% auto 0;
  }

  .desktopHeroBox {
    right: 11.05%;
    top: 14.8%;
    z-index: 3;
    width: 29.45%;
  }

  .desktopHeroCandy {
    left: 1.1%;
    bottom: 6.4%;
    z-index: 3;
    width: 15.25%;
    transform: rotate(-12deg);
  }
}

.mobileHero {
  display: none;
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: auto;
    min-height: 0;
    padding: 36px 0 28px;
    background: #fff;
  }

  .hero.sectionBand .heroText,
  .hero.sectionBand .heroVisual,
  .hero.sectionBand .heroActions {
    display: none;
  }

  .mobileHero {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #fff;
    color: #000;
    text-align: center;
    padding: 0 8.8%;
  }

  .hero.sectionBand .mobileHero h1,
  .hero.sectionBand .mobileHero h2,
  .hero.sectionBand .mobileHero p {
    display: block;
  }

  .mobileHeroTop {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 72px;
  }

  .mobileLsLogo {
    width: 22.3%;
    max-width: 148px;
    min-width: 92px;
  }

  .mobileLang {
    margin-top: 18px;
    color: #000;
    font-family: Arial, sans-serif;
    font-size: clamp(28px, 7.4vw, 42px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
  }

  .mobileTech {
    margin: 0 0 12px;
    font-family: "WixChineseTitle", "Noto Sans SC", sans-serif;
    font-size: clamp(29px, 8vw, 47px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.03em;
    color: #fff;
    -webkit-text-stroke: 1.4px #000;
    text-shadow: 1.5px 1.5px 0 #000;
  }

  .mobileChineseTitle {
    margin: 0;
    width: 100%;
    font-family: "WixChineseTitle", "Noto Sans SC", sans-serif;
    font-size: clamp(48px, 13.8vw, 82px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
    color: #000;
    white-space: nowrap;
  }

  .mobileChineseTitle span {
    color: #f40000;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.14em;
    font-weight: 700;
    text-shadow: -0.08em 0 0 #8c8c8c;
  }

  .mobileEnglishTitle {
    margin: 24px 0 0;
    font-family: Arial, sans-serif;
    font-size: clamp(36px, 9.4vw, 58px);
    font-weight: 800;
    line-height: 1.1;
  }

  .mobileHeroCopy {
    margin: 52px 0 0;
    max-width: 100%;
    font-family: "WixChineseBody", "Noto Sans SC", Arial, sans-serif;
    font-size: clamp(26px, 7vw, 41px);
    font-weight: 500;
    line-height: 1.48;
    letter-spacing: 0.02em;
  }

  .mobileHeroCta {
    width: 76%;
    min-height: 0;
    margin: 66px 0 34px;
    aspect-ratio: 4.25 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8%;
    border: clamp(7px, 1.8vw, 11px) solid #f40000;
    border-radius: 999px;
    background: #fff;
    color: #000;
    cursor: pointer;
  }

  .mobileHeroCta span {
    font-family: "WixChineseTitle", "Noto Sans SC", sans-serif;
    font-size: clamp(28px, 7.5vw, 42px);
    font-weight: 900;
    line-height: 1;
  }

  .mobileHeroCta b {
    width: clamp(40px, 10.5vw, 58px);
    height: clamp(40px, 10.5vw, 58px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f40000;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: clamp(30px, 7.8vw, 44px);
    line-height: 1;
  }

  .mobileCerts {
    width: 84%;
    margin: 0 auto 44px;
  }

  .mobileProductStage {
    position: relative;
    width: 86%;
    min-height: clamp(390px, 103vw, 620px);
    margin: 0 auto;
  }

  .mobileBox {
    position: absolute;
    left: 2%;
    top: 0;
    width: 78%;
    filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.16));
  }

  .mobileCandy {
    position: absolute;
    right: -2%;
    bottom: 5%;
    width: 56%;
    transform: rotate(8deg);
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.18));
  }
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: 1816 / 4888;
    background-image: url("/assets/hero-section-mobile.jpg");
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .hero.sectionBand .heroActions {
    left: 18%;
    top: 46.6%;
    bottom: auto;
    width: 64%;
    height: 6.2%;
  }
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: 1816 / 4888;
    background-image: url("/assets/hero-section-mobile.jpg");
    background-size: 100% 100%;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .hero.sectionBand .heroActions {
    left: 18%;
    top: 46.6%;
    bottom: auto;
    width: 64%;
    height: 6.2%;
  }
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: 1816 / 4888;
    background-image: url("/assets/hero-section-mobile.jpg");
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
  }

  .hero.sectionBand .heroActions {
    left: 18%;
    top: 46.6%;
    bottom: auto;
    width: 64%;
    height: 6.2%;
  }
}

.intro,
.ingredients,
.gallery,
.order {
  padding: clamp(56px, 7vw, 92px) clamp(20px, 6vw, 90px);
}

.intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.9fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  background: #fff;
}

.intro h2,
.sectionTitle h2,
.orderPanel h2 {
  font-family: "WixChineseTitle", "Noto Sans SC", sans-serif;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.1;
  color: var(--blue);
}

.intro p,
.ingredient p,
.usage p,
.orderPanel p {
  margin-top: 18px;
  font-size: 18px;
  line-height: 1.72;
}

.intro img {
  width: min(560px, 100%);
  justify-self: center;
}

.sectionTitle {
  text-align: center;
  margin-bottom: clamp(32px, 5vw, 56px);
}

.sectionTitle span,
.kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--red);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.benefits {
  padding: clamp(54px, 7vw, 92px) clamp(18px, 6vw, 88px);
}

.benefitGrid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px) clamp(12px, 2vw, 24px);
}

.benefit {
  min-width: 0;
  text-align: center;
}

.benefit img {
  width: min(142px, 100%);
  margin: 0 auto 12px;
}

.benefit strong {
  display: block;
  min-height: 48px;
  color: #000;
  font-size: 18px;
  line-height: 1.25;
}

.ingredientGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.ingredient {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 26px;
  background: #fff;
  border: 2px solid var(--blue);
}

.ingredient:last-child {
  grid-column: 1 / -1;
  max-width: 760px;
  justify-self: center;
}

.ingredient img {
  width: 120px;
}

.ingredient h3,
.usage h3 {
  color: var(--green);
  font-size: 28px;
  line-height: 1.15;
}

.usage {
  padding: clamp(56px, 7vw, 92px) clamp(20px, 6vw, 90px);
}

.usageGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.usage article {
  background: #fff;
  border: 2px solid var(--blue);
  padding: 30px 24px;
  text-align: center;
}

.usage img {
  width: 128px;
  height: 128px;
  object-fit: contain;
  margin: 0 auto 16px;
}

.course {
  max-width: 900px;
  margin: 34px auto 0;
  text-align: center;
  font-weight: 700;
  color: var(--blue-dark);
}

.gallery {
  display: grid;
  grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  background: #fff;
}

.groupProduct {
  width: min(430px, 100%);
  justify-self: center;
}

.lifestyle {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: center;
}

.lifestyle img {
  width: 100%;
  height: clamp(320px, 46vw, 520px);
  object-fit: cover;
  border: 2px solid var(--blue);
}

.reviews {
  padding: clamp(56px, 7vw, 92px) 0;
}

.reviewRail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 300px);
  gap: 22px;
  overflow-x: auto;
  padding: 0 clamp(20px, 6vw, 90px) 16px;
  scroll-snap-type: x mandatory;
}

.reviewRail img {
  width: 100%;
  scroll-snap-align: start;
  border: 2px solid var(--blue);
  background: #fff;
}

.order {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(320px, 1fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
  background: #fff;
}

.orderMedia {
  position: relative;
  min-height: 520px;
  display: grid;
  place-items: center;
}

.orderMedia img:first-child {
  position: absolute;
  left: 0;
  top: 7%;
  width: min(260px, 44vw);
}

.orderMedia img:last-child {
  width: min(360px, 70vw);
  justify-self: end;
  filter: drop-shadow(0 24px 35px rgba(0, 29, 75, 0.22));
}

.orderPanel {
  border: 3px solid var(--blue);
  padding: clamp(26px, 4vw, 42px);
  background: var(--paper);
}

.packageSelect {
  margin-top: 26px;
  display: grid;
  gap: 11px;
}

.packageSelect span {
  font-size: 20px;
  font-weight: 700;
}

.packageSelect button {
  min-height: 48px;
  border: 2px solid var(--blue);
  background: #fff;
  color: #000;
  cursor: pointer;
  text-align: left;
  padding: 11px 14px;
}

.packageSelect button.selected,
.packageSelect button:hover,
.packageSelect button:focus-visible {
  background: var(--blue);
  color: #fff;
  outline: none;
}

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin: 28px 0;
}

.price span {
  color: #5b5b5b;
  font-size: 23px;
  text-decoration: line-through;
}

.price strong {
  color: var(--red);
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
}

.block {
  width: 100%;
}

.footer {
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 34px 20px;
  color: #fff;
  text-align: center;
  background: var(--blue);
}

.footer img {
  width: 112px;
  filter: brightness(0) invert(1);
}

@media (max-width: 980px) {
  .hero,
  .intro,
  .gallery,
  .order {
    grid-template-columns: 1fr;
  }

  .hero {
    text-align: center;
  }

  .brandStrip,
  .hero p,
  .heroActions {
    margin-left: auto;
    margin-right: auto;
  }

  .heroActions {
    justify-content: center;
  }

  .heroVisual,
  .orderMedia {
    min-height: auto;
  }

  .ingredientGrid {
    grid-template-columns: 1fr;
  }

  .ingredient:last-child {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .header {
    min-height: 72px;
    padding: 10px 16px;
  }

  .brand img {
    width: 70px;
  }

  .brand span {
    font-size: 13px;
  }

  .menuButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 18px;
    background: var(--paper);
    border-bottom: 2px solid var(--blue);
  }

  .navOpen {
    display: flex;
  }

  .nav button {
    text-align: left;
    border-bottom: 1px solid rgba(7, 50, 239, 0.2);
  }

  .hero {
    min-height: auto;
    padding-top: 42px;
  }

  .heroVisual {
    margin-top: 12px;
  }

  .seal {
    right: 1%;
    bottom: 6%;
    width: 82px;
  }

  .benefitGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit img {
    width: 118px;
  }

  .ingredient {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .ingredient img {
    margin: 0 auto;
  }

  .usageGrid,
  .lifestyle {
    grid-template-columns: 1fr;
  }

  .lifestyle img {
    height: auto;
    max-height: none;
  }

  .reviewRail {
    grid-auto-columns: minmax(220px, 76vw);
  }

  .orderMedia img:first-child {
    left: 0;
    width: 44%;
  }

  .orderMedia img:last-child {
    width: 72%;
  }
}

@media (max-width: 420px) {
  .primaryCta {
    width: 100%;
    font-size: 20px;
  }

  .heroActions span {
    font-size: 16px;
  }

  .benefitGrid {
    gap: 18px 8px;
  }

  .benefit strong {
    font-size: 16px;
  }
}

.hero.sectionBand {
  min-height: auto;
  aspect-ratio: 1920 / 990;
  display: block;
  padding: 0;
  background: #fff url("/assets/hero-section-reference.jpg") center / cover no-repeat;
}

.hero.sectionBand .heroText {
  position: absolute;
  inset: 0;
  max-width: none;
  pointer-events: none;
}

.hero.sectionBand .brandStrip,
.hero.sectionBand h1,
.hero.sectionBand h2,
.hero.sectionBand p,
.hero.sectionBand .heroVisual {
  display: none;
}

.hero.sectionBand .heroActions {
  position: absolute;
  left: 22.4%;
  bottom: 14.5%;
  width: 27.8%;
  height: 10.8%;
  margin: 0;
  display: block;
  pointer-events: auto;
}

.hero.sectionBand .primaryCta {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  box-shadow: none;
}

.hero.sectionBand .heroActions span {
  display: none;
}

/* Absolute final desktop/mobile hero correction. */
@media (min-width: 761px) {
  .hero.sectionBand .desktopHero h1.desktopChineseTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.15vw, 22px) !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 4% 0 0 !important;
    padding: 0 !important;
    font-size: initial !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero.sectionBand .desktopHero h1.desktopChineseTitle > span {
    display: inline-block !important;
    align-self: center !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(70px, 7.292vw, 140px) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-shadow: 0.055em 0.055em 0 #6c6c6c !important;
  }

  .hero.sectionBand .desktopHero button.desktopHeroCta {
    margin: 5.1% auto 0 !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroCandy {
    bottom: 1.6% !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroBox {
    left: 59.64% !important;
    right: auto !important;
    top: 13.26% !important;
    width: 32.03% !important;
    max-width: none !important;
    transform: none !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroCandy {
    left: 0 !important;
    top: 69.74% !important;
    bottom: auto !important;
    width: 18.75% !important;
    max-width: none !important;
    transform: none !important;
  }

  .hero.sectionBand .desktopHero img.desktopTechImage {
    margin-left: 16.7% !important;
    margin-right: 0 !important;
  }

  .hero.sectionBand {
    aspect-ratio: 1920 / 1018 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .mobileHero,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .desktopHero {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand .desktopHeroContent {
    position: absolute !important;
    left: 13.65% !important;
    top: 10.1% !important;
    width: 45.6% !important;
    text-align: center !important;
  }

  .hero.sectionBand .desktopChineseTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(10px, 1.15vw, 22px) !important;
    width: 100% !important;
    margin: 4% 0 0 !important;
    font-size: initial !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .hero.sectionBand .desktopChineseTitle img {
    display: block !important;
    flex: 0 0 auto !important;
    width: clamp(150px, 14.583vw, 280px) !important;
    max-width: none !important;
    height: auto !important;
  }

  .hero.sectionBand .desktopChineseTitle span {
    display: inline-block !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(70px, 7.292vw, 140px) !important;
    font-weight: 400 !important;
    line-height: 0.95 !important;
    letter-spacing: 0 !important;
    text-shadow: 0.055em 0.055em 0 #6c6c6c !important;
    transform: translateY(-0.01em) !important;
  }

  .hero.sectionBand .desktopEnglishTitle {
    display: block !important;
    margin: 6.8% 0 0 !important;
    font-family: "OpenSansLocal", "Open Sans", Arial, sans-serif !important;
    font-size: clamp(42px, 4.167vw, 80px) !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }

  .hero.sectionBand .desktopHeroCopy {
    display: block !important;
    width: 98% !important;
    max-width: none !important;
    margin: 4.9% auto 0 !important;
    font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
    font-size: clamp(16px, 1.458vw, 28px) !important;
    font-weight: 400 !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  .hero.sectionBand .desktopHeroCta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9% !important;
    width: 60.3% !important;
    aspect-ratio: 528 / 108 !important;
    margin: 9.2% auto 0 !important;
    border: clamp(4px, 0.42vw, 8px) solid #f40000 !important;
    border-radius: 999px !important;
    background: #fff !important;
  }

  .hero.sectionBand .desktopHeroCta span {
    display: inline-block !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(26px, 2.604vw, 50px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  .hero.sectionBand .desktopHeroCta b {
    display: inline-flex !important;
  }

  .hero.sectionBand .desktopCerts {
    display: block !important;
    width: 63.5% !important;
    margin: 7.7% auto 0 !important;
  }

  .hero.sectionBand .desktopHeroBox {
    right: 11.15% !important;
    top: 14.8% !important;
    width: 26.8% !important;
  }

  .hero.sectionBand .desktopHeroCandy {
    left: 1.25% !important;
    bottom: 3.6% !important;
    width: 14.1% !important;
    transform: rotate(-10deg) !important;
  }
}

@media (max-width: 760px) {
  .hero.sectionBand {
    aspect-ratio: auto !important;
    background: #fff !important;
  }

  .hero.sectionBand > .desktopHero,
  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .mobileHero {
    display: flex !important;
  }
}

.header,
.nav,
.menuButton {
  display: none !important;
}

/* Final spacing lock: must stay at EOF. */
@media (min-width: 761px) {
  .hero.sectionBand {
    aspect-ratio: 1920 / 1120 !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroContent {
    top: 9.1% !important;
  }

  .hero.sectionBand .desktopHero h1.desktopChineseTitle > span,
  .hero.sectionBand .desktopHero .desktopChineseTitle > span {
    font-size: clamp(70px, 7.292vw, 140px) !important;
  }

  .hero.sectionBand .desktopHero .desktopEnglishTitle {
    margin-top: 25px !important;
    font-size: clamp(42px, 4.167vw, 80px) !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroCopy {
    margin-top: 30px !important;
    font-size: clamp(16px, 1.458vw, 28px) !important;
    line-height: 1.42 !important;
  }

  .hero.sectionBand .desktopHero button.desktopHeroCta,
  .hero.sectionBand .desktopHero .desktopHeroCta {
    margin-top: 40px !important;
  }

  .hero.sectionBand .desktopHero .desktopCerts {
    margin-top: 30px !important;
  }

  .hero.sectionBand .desktopHero .desktopChineseTitle img {
    width: auto !important;
    height: clamp(70px, 6.94vw, 133px) !important;
    align-self: center !important;
  }
}

/* Responsive lock: tablet and narrow browser panes use the vertical hero. */
@media (max-width: 1100px) {
  .hero.sectionBand {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    padding: clamp(22px, 4vw, 42px) 0 clamp(34px, 6vw, 70px) !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .hero.sectionBand > .desktopHero,
  .hero.sectionBand > .heroText,
  .hero.sectionBand > .heroVisual,
  .hero.sectionBand > .heroActions {
    display: none !important;
  }

  .hero.sectionBand > .mobileHero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: min(100%, 760px) !important;
    margin: 0 auto !important;
    padding: 0 clamp(18px, 6vw, 48px) !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .hero.sectionBand .mobileHero * {
    box-sizing: border-box !important;
  }

  .hero.sectionBand .mobileHeroTop {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 0 clamp(34px, 7vw, 64px) !important;
  }

  .hero.sectionBand .mobileLsLogo {
    display: block !important;
    width: clamp(88px, 18vw, 146px) !important;
    height: auto !important;
  }

  .hero.sectionBand .mobileLang {
    display: inline-block !important;
    margin-top: clamp(8px, 2vw, 18px) !important;
    color: #000 !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(26px, 5vw, 40px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-decoration: none !important;
  }

  .hero.sectionBand .mobileTech {
    display: block !important;
    width: 100% !important;
    margin: 0 0 clamp(10px, 2.4vw, 20px) !important;
    color: #000 !important;
    font-family: "WixChineseTitle", "Noto Sans SC", Arial, sans-serif !important;
    font-size: clamp(24px, 5.3vw, 44px) !important;
    font-weight: 900 !important;
    line-height: 1.12 !important;
    letter-spacing: 0 !important;
    -webkit-text-stroke: 1px #000 !important;
  }

  .hero.sectionBand .mobileChineseTitle {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(44px, 10.8vw, 82px) !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
    text-shadow: 0.045em 0.045em 0 #6c6c6c !important;
  }

  .hero.sectionBand .mobileChineseTitle span {
    display: inline !important;
    color: #f40000 !important;
    font-family: Georgia, "Times New Roman", serif !important;
    font-size: 1.18em !important;
    text-shadow: 0.035em 0.035em 0 #8a8a8a !important;
  }

  .hero.sectionBand .mobileEnglishTitle {
    display: block !important;
    width: 100% !important;
    margin: clamp(18px, 4.5vw, 34px) 0 0 !important;
    color: #000 !important;
    font-family: "OpenSansLocal", "Open Sans", Arial, sans-serif !important;
    font-size: clamp(32px, 7.5vw, 56px) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0 !important;
  }

  .hero.sectionBand .mobileHeroCopy {
    display: block !important;
    width: 100% !important;
    max-width: 680px !important;
    margin: clamp(30px, 6vw, 48px) auto 0 !important;
    color: #000 !important;
    font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
    font-size: clamp(20px, 4.6vw, 32px) !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
    letter-spacing: 0 !important;
  }

  .hero.sectionBand .mobileHeroCta {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(18px, 5vw, 34px) !important;
    width: min(78%, 540px) !important;
    min-height: 0 !important;
    aspect-ratio: 4.25 / 1 !important;
    margin: clamp(40px, 8vw, 64px) auto clamp(24px, 5vw, 40px) !important;
    padding: 0 !important;
    border: clamp(5px, 1.2vw, 8px) solid #f40000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
  }

  .hero.sectionBand .mobileHeroCta span {
    display: inline-block !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(34px, 8vw, 54px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  .hero.sectionBand .mobileHeroCta b {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(46px, 11vw, 68px) !important;
    height: clamp(46px, 11vw, 68px) !important;
    border-radius: 999px !important;
    background: #f40000 !important;
    color: #fff !important;
    font-family: Arial, sans-serif !important;
    font-size: clamp(34px, 8vw, 56px) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }

  .hero.sectionBand .mobileCerts {
    display: block !important;
    width: min(88%, 620px) !important;
    height: auto !important;
    margin: 0 auto clamp(48px, 10vw, 90px) !important;
  }

  .hero.sectionBand .mobileProductStage {
    position: relative !important;
    display: block !important;
    width: min(88%, 660px) !important;
    min-height: clamp(430px, 105vw, 820px) !important;
    margin: 0 auto !important;
  }

  .hero.sectionBand .mobileBox {
    position: absolute !important;
    left: 4% !important;
    top: 0 !important;
    display: block !important;
    width: 74% !important;
    height: auto !important;
  }

  .hero.sectionBand .mobileCandy {
    position: absolute !important;
    right: 0 !important;
    bottom: 5% !important;
    display: block !important;
    width: 52% !important;
    height: auto !important;
  }
}

/* Center the desktop LS + Chinese title lockup as one row. */
@media (min-width: 1101px) {
  .hero.sectionBand .desktopHero h1.desktopChineseTitle,
  .hero.sectionBand .desktopHero .desktopChineseTitle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  .hero.sectionBand .desktopHero .desktopChineseTitle img {
    display: block !important;
    height: clamp(70px, 6.94vw, 133px) !important;
    width: auto !important;
    align-self: center !important;
    transform: none !important;
  }

  .hero.sectionBand .desktopHero .desktopChineseTitle span {
    display: inline-flex !important;
    align-items: center !important;
    height: clamp(70px, 6.94vw, 133px) !important;
    line-height: 1 !important;
    transform: translateY(-5px) !important;
  }

  .hero.sectionBand .desktopHero img.desktopTechImage {
    width: calc(81.7% - 51px) !important;
  }

  .hero.sectionBand .desktopHeroCta .ctaArrowIcon {
    display: block !important;
    width: clamp(26px, 2.604vw, 50px) !important;
    height: clamp(26px, 2.604vw, 50px) !important;
    flex: 0 0 auto !important;
  }
}

.hero.sectionBand .mobileHeroCta .ctaArrowIcon {
  display: block !important;
  width: clamp(34px, 8vw, 54px) !important;
  height: clamp(34px, 8vw, 54px) !important;
  flex: 0 0 auto !important;
}

/* CTA arrow position lock: text centered, arrow fixed on the right like the reference. */
.hero.sectionBand .desktopHeroCta,
.hero.sectionBand .mobileHeroCta {
  position: relative !important;
  justify-content: center !important;
  gap: 0 !important;
}

.hero.sectionBand .desktopHeroCta .ctaArrowIcon,
.hero.sectionBand .mobileHeroCta .ctaArrowIcon {
  position: absolute !important;
  top: 50% !important;
  display: block !important;
  flex: none !important;
  transform: translateY(-50%) !important;
}

.hero.sectionBand .desktopHeroCta .ctaArrowIcon {
  right: calc(17px - clamp(4px, 0.42vw, 8px)) !important;
  width: clamp(26px, 2.604vw, 50px) !important;
  height: clamp(26px, 2.604vw, 50px) !important;
}

.hero.sectionBand .mobileHeroCta .ctaArrowIcon {
  right: clamp(8px, 2.05vw, 13px) !important;
  width: clamp(34px, 8vw, 54px) !important;
  height: clamp(34px, 8vw, 54px) !important;
}

/* Desktop CTA width lock: 50px shorter than the current matched layout. */
@media (min-width: 1101px) {
  .hero.sectionBand .desktopHeroCta {
    width: calc(60.3% - 50px) !important;
    height: calc(clamp(26px, 2.604vw, 50px) + 34px) !important;
    aspect-ratio: auto !important;
  }
}

/* 1400px design canvas lock: desktop stays centered and stops stretching on wide/zoomed views. */
:root {
  --design-canvas-width: 1400px;
}

html,
body {
  overflow-x: hidden !important;
}

.site {
  width: min(100%, var(--design-canvas-width)) !important;
  max-width: var(--design-canvas-width) !important;
  margin-inline: auto !important;
  overflow: hidden !important;
}

.hero.sectionBand,
.intro,
.benefits,
.ingredients,
.usage,
.gallery,
.reviews,
.order {
  width: 100% !important;
  max-width: var(--design-canvas-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (min-width: 1401px) {
  body {
    background: #f8f6f3 !important;
  }
}

/* Full-width section backgrounds while keeping the 1400px content canvas locked. */
.site {
  overflow: visible !important;
}

.hero.sectionBand,
.intro,
.benefits,
.ingredients,
.usage,
.gallery,
.reviews,
.order {
  position: relative !important;
  isolation: isolate !important;
}

.hero.sectionBand::before,
.intro::before,
.benefits::before,
.ingredients::before,
.usage::before,
.gallery::before,
.reviews::before,
.order::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: inherit !important;
  pointer-events: none !important;
}

.hero.sectionBand::before,
.intro::before,
.gallery::before,
.order::before {
  background: #fff !important;
}

.benefits::before,
.usage::before,
.reviews::before {
  background: linear-gradient(180deg, #f8f6f3 0%, #e5f0fe 100%) !important;
}

.ingredients::before {
  background: #f8f6f3 !important;
}

.hero.sectionBand {
  overflow: visible !important;
}

/* Hero uses the uploaded full-browser background image; content remains inside 1400px. */
.hero.sectionBand::before {
  background: url("/assets/hero-full-background.png") center center / cover no-repeat !important;
}

@media (min-width: 1101px) {
  .hero.sectionBand .desktopHero,
  .hero.sectionBand .desktopHeroContent {
    background: transparent !important;
  }

  .hero.sectionBand .desktopHeroLeftShape,
  .hero.sectionBand .desktopHeroRightShape {
    display: none !important;
  }
}

@media (min-width: 1101px) {
  .hero.sectionBand .desktopHeroLang {
    font-size: clamp(16px, 1.667vw, 32px) !important;
  }
}

/* Desktop hero element size trim: all visible hero elements are 10px smaller; background stays full width. */
@media (min-width: 1101px) {
  .hero.sectionBand .desktopHeroLogoImage {
    width: calc(6.4% - 10px) !important;
  }

  .hero.sectionBand .desktopHeroLang {
    font-size: clamp(14px, 1.146vw, 22px) !important;
  }

  .hero.sectionBand .desktopHero img.desktopTechImage {
    width: calc(81.7% - 61px) !important;
  }

  .hero.sectionBand .desktopHero .desktopChineseTitle img {
    height: clamp(60px, 6.42vw, 123px) !important;
  }

  .hero.sectionBand .desktopHero .desktopChineseTitle span {
    height: clamp(60px, 6.42vw, 123px) !important;
    font-size: clamp(60px, 6.771vw, 130px) !important;
  }

  .hero.sectionBand .desktopEnglishTitle {
    font-size: clamp(32px, 3.646vw, 70px) !important;
  }

  .hero.sectionBand .desktopHeroCopy {
    font-size: clamp(14px, 0.938vw, 18px) !important;
  }

  .hero.sectionBand .desktopHeroCta {
    width: clamp(320px, 22.857vw, 324px) !important;
    height: calc(clamp(16px, 2.083vw, 40px) + 34px) !important;
  }

  .hero.sectionBand .desktopHeroCta span,
  .hero.sectionBand .desktopHeroCta .ctaArrowIcon {
    width: auto !important;
    height: clamp(16px, 2.083vw, 40px) !important;
    font-size: clamp(16px, 2.083vw, 40px) !important;
  }

  .hero.sectionBand .desktopHeroCta .ctaArrowIcon {
    width: clamp(16px, 2.083vw, 40px) !important;
  }

  .hero.sectionBand .desktopCerts {
    width: calc(63.5% - 10px) !important;
  }

  .hero.sectionBand .desktopHeroBox {
    width: calc(26.8% - 10px) !important;
  }

  .hero.sectionBand .desktopHeroCandy {
    width: calc(14.1% - 10px) !important;
  }
}

@media (min-width: 1101px) {
  .hero.sectionBand .desktopHero h1.desktopChineseTitle > span,
  .hero.sectionBand .desktopHero .desktopChineseTitle > span {
    font-size: clamp(60px, 6.771vw, 130px) !important;
  }

  .hero.sectionBand .desktopHero .desktopEnglishTitle {
    font-size: clamp(32px, 3.646vw, 70px) !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroCopy {
    font-size: clamp(14px, 0.938vw, 18px) !important;
  }
}

/* Benefits section redesign based on the supplied reference. */
.benefits {
  background: #fff !important;
  padding: clamp(42px, 4.8vw, 68px) clamp(24px, 5vw, 72px) clamp(28px, 3.5vw, 48px) !important;
}

.benefits::before {
  background: #fff !important;
}

.benefitsTitle {
  margin: 0 0 clamp(18px, 2.4vw, 34px) !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.benefits .benefitGrid {
  width: min(100%, 1260px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: clamp(28px, 4.2vw, 70px) !important;
  row-gap: clamp(18px, 2.5vw, 36px) !important;
  align-items: start !important;
}

.benefits .benefit {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-width: 0 !important;
  text-align: center !important;
}

.benefits .benefit img {
  width: clamp(126px, 11.6vw, 188px) !important;
  height: clamp(126px, 11.6vw, 188px) !important;
  object-fit: contain !important;
  margin: 0 auto clamp(10px, 1.15vw, 18px) !important;
}

.benefits .benefit strong {
  display: block !important;
  min-height: 0 !important;
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.24 !important;
  letter-spacing: 0 !important;
}

.benefitsNote {
  margin: clamp(26px, 3vw, 42px) auto 0 !important;
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.benefitsNote span {
  display: inline-block !important;
  margin: 0 clamp(10px, 1vw, 18px) !important;
  color: #f40000 !important;
}

@media (max-width: 900px) {
  .benefits {
    padding: 42px 18px 34px !important;
  }

  .benefits .benefitGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 18px !important;
    row-gap: 26px !important;
  }

  .benefits .benefit img {
    width: clamp(112px, 32vw, 170px) !important;
    height: clamp(112px, 32vw, 170px) !important;
  }

  .benefits .benefit strong {
    font-size: 20px !important;
  }

  .benefitsNote {
    font-size: 20px !important;
  }
}

/* Ingredients section redesign based on the supplied reference. */
.ingredients {
  position: relative !important;
  background: #fff !important;
  padding: clamp(50px, 5vw, 76px) clamp(46px, 5vw, 78px) clamp(52px, 5vw, 76px) !important;
  box-shadow: none !important;
}

.ingredients::before {
  background: #fff !important;
}

.ingredients::after {
  content: "" !important;
  position: absolute !important;
  left: clamp(20px, 3vw, 44px) !important;
  right: clamp(20px, 3vw, 44px) !important;
  bottom: 0 !important;
  height: 14px !important;
  z-index: 0 !important;
  background: #f40000 !important;
  pointer-events: none !important;
}

.ingredientsTitle::before {
  content: "" !important;
  position: absolute !important;
  left: clamp(20px, 3vw, 44px) !important;
  right: clamp(20px, 3vw, 44px) !important;
  top: 0 !important;
  height: 14px !important;
  background: #f40000 !important;
}

.ingredientsTitle {
  margin: 0 0 clamp(42px, 5vw, 74px) !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0.08em 0.08em 0 #6c6c6c !important;
}

.ingredients .ingredientGrid {
  width: min(100%, 1240px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: clamp(54px, 7vw, 116px) !important;
  row-gap: clamp(44px, 5vw, 74px) !important;
  align-items: start !important;
}

.ingredients .ingredient {
  display: grid !important;
  grid-template-columns: clamp(128px, 10.3vw, 166px) minmax(0, 1fr) !important;
  gap: clamp(24px, 2.2vw, 34px) !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  text-align: left !important;
}

.ingredients .ingredient:nth-child(1) {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.ingredients .ingredient:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.ingredients .ingredient:nth-child(3) {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

.ingredients .ingredient:nth-child(4) {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
}

.ingredients .ingredient:nth-child(5) {
  grid-column: 2 !important;
  grid-row: 3 !important;
  margin-top: -100px !important;
}

.ingredients .ingredient:last-child {
  max-width: none !important;
  justify-self: stretch !important;
}

.ingredients .ingredient img {
  width: clamp(128px, 10.3vw, 166px) !important;
  height: clamp(128px, 10.3vw, 166px) !important;
  object-fit: contain !important;
  margin: 0 !important;
}

.ingredients .ingredient h3 {
  margin: 0 0 12px !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: 0 !important;
  text-shadow:
    0.05em 0.05em 0 #f40000,
    0.085em 0.085em 0 #000 !important;
}

.ingredients .ingredient p {
  margin: 0 !important;
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 900px) {
  .ingredients {
    padding: 44px 20px 46px !important;
    box-shadow: none !important;
  }

  .ingredients::after,
  .ingredientsTitle::before {
    height: 10px !important;
    left: 16px !important;
    right: 16px !important;
  }

  .ingredientsTitle {
    font-size: 60px !important;
    margin-bottom: 34px !important;
  }

  .ingredients .ingredientGrid {
    grid-template-columns: 1fr !important;
    row-gap: 34px !important;
  }

  .ingredients .ingredient,
  .ingredients .ingredient:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    grid-template-columns: clamp(104px, 28vw, 136px) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-self: auto !important;
  }

  .ingredients .ingredient img {
    width: clamp(104px, 28vw, 136px) !important;
    height: clamp(104px, 28vw, 136px) !important;
  }

  .ingredients .ingredient h3 {
    font-size: 34px !important;
  }

  .ingredients .ingredient p {
    font-size: 18px !important;
    line-height: 1.42 !important;
  }
}

/* Usage section redesign based on the supplied reference. */
.usage {
  background: #fff !important;
  padding: clamp(48px, 4.8vw, 72px) clamp(42px, 5vw, 76px) clamp(36px, 3.8vw, 56px) !important;
}

.usage::before {
  background: #fff !important;
}

.usageTitle {
  margin: 0 0 clamp(36px, 4vw, 58px) !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0.08em 0.08em 0 #6c6c6c !important;
}

.usage .usageGrid {
  width: min(100%, 1120px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(48px, 6vw, 98px) !important;
  align-items: stretch !important;
}

.usage article {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 430px !important;
  padding: 32px 22px 26px !important;
  background: #f7b70b !important;
  border: 6px solid #000 !important;
  border-radius: 34px !important;
  text-align: center !important;
}

.usage img {
  width: 185px !important;
  height: 185px !important;
  object-fit: contain !important;
  margin: 0 auto 20px !important;
}

.usage h3 {
  margin: 0 0 22px !important;
  color: #f40000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

.usage p {
  margin: 0 !important;
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

.usageCta {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 420px !important;
  height: 74px !important;
  margin: clamp(38px, 4vw, 58px) auto clamp(28px, 3vw, 44px) !important;
  padding: 0 !important;
  border: 6px solid #f40000 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  cursor: pointer !important;
}

.usageCta span {
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.usageCta .ctaArrowIcon {
  position: absolute !important;
  top: 50% !important;
  right: 11px !important;
  width: 40px !important;
  height: 40px !important;
  transform: translateY(-50%) !important;
}

.usage .course {
  max-width: none !important;
  margin: 0 auto !important;
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  .usage {
    padding: 42px 20px 34px !important;
  }

  .usageTitle {
    font-size: 60px !important;
    margin-bottom: 32px !important;
  }

  .usage .usageGrid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    width: min(100%, 390px) !important;
  }

  .usage article {
    min-height: 0 !important;
    padding: 28px 20px 24px !important;
  }

  .usage img {
    width: 155px !important;
    height: 155px !important;
  }

  .usage h3 {
    font-size: 34px !important;
  }

  .usage p,
  .usage .course {
    font-size: 18px !important;
  }

  .usageCta {
    width: min(100%, 330px) !important;
    height: 66px !important;
  }
}

/* Final usage section polish: compact reference layout + hero-identical CTA. */
.usage {
  padding: clamp(34px, 3.2vw, 50px) clamp(42px, 5vw, 76px) clamp(22px, 2.6vw, 38px) !important;
}

.usageTitle {
  margin-bottom: clamp(36px, 4vw, 58px) !important;
  font-size: 60px !important;
}

.usage .usageGrid {
  width: min(100%, 780px) !important;
  gap: 26px !important;
}

.usage article {
  min-height: 360px !important;
  padding: 20px 14px 18px !important;
  border: 4px solid #000 !important;
  border-radius: 22px !important;
}

.usage img {
  width: 145px !important;
  height: 145px !important;
  margin-bottom: 18px !important;
}

.usage h3 {
  margin-bottom: 18px !important;
  font-size: 34px !important;
}

.usage p {
  font-size: 18px !important;
  line-height: 1.35 !important;
}

.usage small {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.usageCta {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: clamp(320px, 22.857vw, 324px) !important;
  height: calc(clamp(16px, 2.083vw, 40px) + 34px) !important;
  margin: clamp(34px, 3.6vw, 50px) auto clamp(18px, 2.2vw, 30px) !important;
  padding: 0 !important;
  border: clamp(4px, 0.42vw, 8px) solid #f40000 !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
}

.usageCta span {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: clamp(16px, 2.083vw, 40px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.usageCta .ctaArrowIcon {
  position: absolute !important;
  top: 50% !important;
  right: calc(17px - clamp(4px, 0.42vw, 8px)) !important;
  width: clamp(16px, 2.083vw, 40px) !important;
  height: clamp(16px, 2.083vw, 40px) !important;
  transform: translateY(-50%) !important;
}

.usage .course {
  font-size: 18px !important;
}

@media (max-width: 900px) {
  .usage {
    padding: 42px 20px 34px !important;
  }

  .usage .usageGrid {
    width: min(100%, 390px) !important;
    gap: 28px !important;
  }

  .usage article {
    min-height: 0 !important;
    padding: 26px 18px 22px !important;
  }

  .usage img {
    width: 145px !important;
    height: 145px !important;
  }

  .usageCta {
    width: min(100%, 324px) !important;
    height: 74px !important;
  }
}

/* Section 5: customer reviews, matched to the supplied reference image. */
.gallery {
  display: none !important;
}

.reviews {
  padding: clamp(34px, 3.2vw, 48px) 0 0 !important;
  background: #fff !important;
}

.reviews::before {
  background: #fff !important;
}

.reviews .sectionTitle {
  margin: 0 auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.reviews .sectionTitle span {
  display: block !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0.08em 0.08em 0 #6c6c6c !important;
}

.reviews .sectionTitle h2 {
  display: none !important;
}

.reviewRail {
  display: block !important;
  width: 100% !important;
  max-width: var(--design-canvas-width) !important;
  aspect-ratio: 1920 / 893 !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: url("/assets/customer-reviews-collage-crop.png") center top / contain no-repeat !important;
  scroll-snap-type: none !important;
}

.reviewRail img {
  display: none !important;
}

@media (max-width: 900px) {
  .reviews {
    padding: 42px 0 34px !important;
  }

  .reviews .sectionTitle span {
    font-size: 60px !important;
  }

  .reviewRail {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(240px, 76vw) !important;
    gap: 18px !important;
    overflow-x: auto !important;
    padding: 22px 20px 8px !important;
    background: none !important;
    scroll-snap-type: x mandatory !important;
  }

  .reviewRail img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
    background: #fff !important;
    scroll-snap-align: center !important;
  }
}

/* Section after customer screenshots: video reviews. */
.videoReviews {
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: var(--design-canvas-width) !important;
  margin: 0 auto !important;
  padding: clamp(34px, 3.2vw, 48px) clamp(36px, 4vw, 58px) clamp(54px, 5vw, 78px) !important;
  background: #fff !important;
}

.videoReviews::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: #fff !important;
}

.videoReviewsTitle {
  margin: 0 0 clamp(34px, 3.6vw, 52px) !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
  text-shadow: 0.08em 0.08em 0 #6c6c6c !important;
}

.videoReviewGrid {
  width: min(100%, 1150px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 280px 420px 280px !important;
  gap: 85px !important;
  align-items: start !important;
  justify-content: center !important;
}

.videoReview {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.videoReviewNarrow {
  aspect-ratio: 9 / 19 !important;
  height: clamp(430px, 42.4vw, 594px) !important;
  object-fit: cover !important;
}

.videoReviewWide {
  aspect-ratio: 3 / 4 !important;
  height: clamp(390px, 39.5vw, 553px) !important;
  object-fit: cover !important;
}

@media (max-width: 1100px) {
  .videoReviewGrid {
    width: min(100%, 940px) !important;
    grid-template-columns: minmax(210px, 0.86fr) minmax(300px, 1.28fr) minmax(210px, 0.86fr) !important;
    gap: 36px !important;
  }
}

@media (max-width: 760px) {
  .videoReviews {
    padding: 42px 20px 38px !important;
  }

  .videoReviewsTitle {
    font-size: 60px !important;
    margin-bottom: 28px !important;
  }

  .videoReviewGrid {
    width: 100% !important;
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(230px, 78vw) !important;
    grid-template-columns: none !important;
    gap: 18px !important;
    justify-content: start !important;
    overflow-x: auto !important;
    padding-bottom: 8px !important;
    scroll-snap-type: x mandatory !important;
  }

  .videoReview {
    scroll-snap-align: center !important;
    height: auto !important;
  }
}

/* Section 7: final order / COD layout. */
.order.sectionBand {
  width: 100% !important;
  max-width: var(--design-canvas-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  position: relative !important;
  isolation: isolate !important;
  display: block !important;
  overflow: hidden !important;
  background: #fff url("/assets/hero-full-background.png") center center / cover no-repeat !important;
}

.order.sectionBand::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background: #fff url("/assets/hero-full-background.png") center center / cover no-repeat !important;
}

.orderStage {
  position: relative !important;
  width: 100% !important;
  min-height: clamp(500px, 42.45vw, 594px) !important;
}

.orderPanel {
  position: absolute !important;
  z-index: 2 !important;
  left: 35.5% !important;
  top: 7.3% !important;
  width: 40.3% !important;
  max-width: 565px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #000 !important;
}

.orderTitle {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 16px !important;
  margin: 0 0 42px !important;
  color: #000 !important;
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-size: 80px !important;
  font-weight: 400 !important;
  line-height: 0.88 !important;
  letter-spacing: 0 !important;
  text-shadow: 0.055em 0.055em 0 #777 !important;
  white-space: nowrap !important;
}

.orderTitleLs {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 80px !important;
  font-weight: 700 !important;
  line-height: 0.8 !important;
  text-shadow: 0.035em 0.035em 0 #777 !important;
}

.orderTitleLs span:first-child {
  color: #8c8c8c !important;
}

.orderTitleLs span:last-child {
  color: #f40000 !important;
}

.orderCopy,
.orderBullets,
.orderBullets li {
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.48 !important;
  letter-spacing: 0 !important;
}

.orderCopy {
  width: 84% !important;
  margin: 0 0 26px !important;
}

.orderBullets {
  margin: 0 0 30px 24px !important;
  padding: 0 !important;
}

.orderCod {
  margin: 0 0 30px !important;
  color: #f40000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

.orderPrompt {
  margin: 0 0 14px !important;
  color: #f40000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.order .packageSelect {
  margin: 0 !important;
  display: block !important;
}

.order .packageSelect > span {
  display: block !important;
  margin: 0 0 18px !important;
  color: #000 !important;
  font-family: "MXiangheHei", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.packageOptions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 34px !important;
  width: 100% !important;
}

.packageOption {
  min-width: 0 !important;
}

.packageOption button {
  width: 100% !important;
  min-height: 38px !important;
  padding: 8px 10px !important;
  border: 1.5px solid #000 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #000 !important;
  cursor: pointer !important;
  text-align: center !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.packageOption button.selected,
.packageOption button:hover,
.packageOption button:focus-visible {
  background: #fff !important;
  color: #000 !important;
  outline: 2px solid #000 !important;
  outline-offset: 1px !important;
}

.packagePrice {
  display: flex !important;
  justify-content: center !important;
  align-items: baseline !important;
  gap: 4px !important;
  margin: 14px 0 0 !important;
  color: #000 !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.packagePrice span {
  text-decoration: line-through !important;
}

.packagePrice strong {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.order .price,
.order .primaryCta {
  display: none !important;
}

.orderCandy {
  position: absolute !important;
  z-index: 1 !important;
  left: 21.2% !important;
  bottom: 5.5% !important;
  width: 12.5% !important;
  min-width: 120px !important;
  max-width: 175px !important;
  height: auto !important;
  filter: drop-shadow(0 14px 12px rgba(0, 0, 0, 0.15)) !important;
}

.orderProduct {
  position: absolute !important;
  z-index: 1 !important;
  right: 13.2% !important;
  top: 5.7% !important;
  width: 18.4% !important;
  min-width: 210px !important;
  max-width: 258px !important;
  height: auto !important;
  filter: drop-shadow(26px 26px 0 rgba(0, 0, 0, 0.98)) !important;
}

@media (max-width: 1100px) {
  .orderPanel {
    left: 31% !important;
    width: 48% !important;
  }

  .orderTitle,
  .orderTitleLs {
    font-size: 80px !important;
  }

  .orderCod {
    font-size: clamp(28px, 3.2vw, 38px) !important;
  }

  .packageOptions {
    gap: 16px !important;
  }
}

@media (max-width: 760px) {
  .order.sectionBand {
    background-size: auto 100% !important;
  }

  .orderStage {
    min-height: 0 !important;
    padding: 44px 20px 34px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .orderPanel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: min(100%, 430px) !important;
    max-width: none !important;
    order: 1 !important;
    text-align: center !important;
  }

  .orderTitle {
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 26px !important;
  }

  .orderTitle,
  .orderTitleLs {
    font-size: clamp(56px, 18vw, 80px) !important;
  }

  .orderCopy {
    width: 100% !important;
  }

  .orderBullets {
    margin-left: 22px !important;
    text-align: left !important;
  }

  .orderCod {
    font-size: 38px !important;
    white-space: normal !important;
  }

  .packageOptions {
    grid-template-columns: 1fr !important;
    width: min(100%, 220px) !important;
    margin: 0 auto !important;
    gap: 14px !important;
  }

  .orderProduct {
    position: relative !important;
    right: auto !important;
    top: auto !important;
    width: min(68vw, 260px) !important;
    min-width: 0 !important;
    order: 2 !important;
    margin-top: 28px !important;
  }

  .orderCandy {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    width: min(46vw, 170px) !important;
    min-width: 0 !important;
    order: 3 !important;
    margin-top: 18px !important;
  }
}

/* Final override: keep the last section closest to the supplied desktop sample. */
@media (min-width: 761px) {
  .order.sectionBand,
  .order.sectionBand::before {
    background-size: 100% 100% !important;
    background-position: center center !important;
  }

  .orderStage {
    min-height: min(42.35vw, 593px) !important;
  }

  .orderPanel {
    left: 30.9% !important;
    top: 7.2% !important;
    width: 40.4% !important;
    max-width: 566px !important;
  }

  .orderTitle,
  .orderTitleLs {
    font-size: 80px !important;
  }

  .orderTitle {
    gap: 15px !important;
    margin-bottom: 40px !important;
  }

  .orderCopy {
    width: 86% !important;
    margin-bottom: 19px !important;
    line-height: 1.43 !important;
  }

  .orderBullets {
    margin-bottom: 24px !important;
  }

  .orderBullets,
  .orderBullets li {
    line-height: 1.42 !important;
  }

  .orderCod {
    margin-bottom: 30px !important;
    font-size: 38px !important;
  }

  .orderPrompt {
    margin-bottom: 14px !important;
  }

  .order .packageSelect > span {
    margin-bottom: 18px !important;
  }

  .packageOptions {
    gap: 34px !important;
  }

  .packageOption button {
    min-height: 39px !important;
    border: 1.5px solid #000 !important;
    outline: none !important;
  }

  .packageOption button.selected,
  .packageOption button:hover,
  .packageOption button:focus-visible {
    border-color: #000 !important;
    background: #fff !important;
    color: #000 !important;
    outline: none !important;
  }

  .packagePrice {
    margin-top: 13px !important;
  }

  .orderProduct {
    right: 18% !important;
    top: 6.2% !important;
    width: 18.45% !important;
    max-width: 258px !important;
    filter: drop-shadow(25px 25px 0 rgba(0, 0, 0, 0.98)) !important;
  }

  .orderCandy {
    left: 20.5% !important;
    bottom: 2% !important;
    width: 10.4% !important;
    max-width: 146px !important;
  }

  .order.sectionBand .packageOption button {
    min-height: 43px !important;
    padding: 8px 16px !important;
    border: 1.5px solid #000 !important;
    border-radius: 7px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    box-shadow: -4px 5px 0 #000 !important;
    transform: translate(0, 0) !important;
  }

  .order.sectionBand .packagePrice,
  .order.sectionBand .packagePrice strong {
    font-size: 18px !important;
  }

  .order.sectionBand .packagePrice {
    gap: 5px !important;
    margin-top: 13px !important;
  }

  .order.sectionBand .packageOption button.selected,
  .order.sectionBand .packageOption button:hover,
  .order.sectionBand .packageOption button:focus-visible {
    border-color: #000 !important;
    background: #fff !important;
    color: #000 !important;
    outline: none !important;
    box-shadow: -4px 5px 0 #000 !important;
  }
}

/* Final product image: show the supplied PNG cleanly, without any added shadow. */
.order.sectionBand .orderProduct {
  filter: none !important;
}

/* Final order product placement: move the product box away from the text. */
@media (min-width: 761px) {
  .order.sectionBand .orderProduct {
    transform: translateX(100px) !important;
  }

  .order.sectionBand .orderCandy {
    transform: translateX(-80px) !important;
    width: 196px !important;
    max-width: 196px !important;
  }
}

/* Final full-width background fixes: keep content centered, let backgrounds span the browser. */
.site {
  width: 100% !important;
  max-width: none !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.order.sectionBand {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  background: #fff url("/assets/hero-full-background.png") center center / cover no-repeat !important;
}

.order.sectionBand::before {
  display: none !important;
}

.order.sectionBand .orderStage {
  width: min(100%, var(--design-canvas-width)) !important;
  max-width: var(--design-canvas-width) !important;
  margin-inline: auto !important;
}

/* Final hero responsive layout: keep the full hero visible at every zoom level. */
@media (min-width: 761px) {
  .hero.sectionBand {
    width: 100% !important;
    max-width: none !important;
    height: calc(min(100vw, var(--design-canvas-width)) * 1018 / 1920) !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .hero.sectionBand > .desktopHero {
    position: absolute !important;
    inset: 0 auto auto 50% !important;
    width: min(100%, var(--design-canvas-width)) !important;
    max-width: var(--design-canvas-width) !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .hero.sectionBand .desktopHero .desktopHeroContent {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroBox {
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: calc(32.03% - 150px) !important;
  }

  .hero.sectionBand .desktopHero img.desktopHeroCandy {
    left: 9.6% !important;
    top: 72.7% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 196px !important;
    max-width: 196px !important;
  }

  .order.sectionBand .orderTitleLs {
    font-size: 95px !important;
  }
}

/* Final section 6 background image. */
.videoReviews,
.videoReviews::before {
  background: #fff url("/assets/section6-sparkle-bg.png") center center / cover no-repeat !important;
}

/* Absolute latest title/edge overrides - keep this at EOF. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 7px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    position: relative !important;
    top: 15px !important;
  }

  .order.sectionBand .orderTitle .orderTitleText {
    position: relative !important;
    top: -15px !important;
  }
}

@media (min-width: 761px) {
  .hero.sectionBand .desktopChineseTitle span {
    position: relative !important;
    top: -8px !important;
  }

  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: -3px !important;
  }
}

/* Absolute latest mobile/desktop title corrections - keep this at EOF. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 17px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    position: relative !important;
    top: 15px !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    text-shadow: 0.045em 0.045em 0 #6c6c6c !important;
  }

  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: -10px !important;
  }

  .order.sectionBand .orderCandy {
    left: -75px !important;
    width: min(calc(45.76vw + 20px), 363px) !important;
    max-width: 363px !important;
  }
}

@media (min-width: 761px) {
  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: 12px !important;
  }
}

/* English page final typography override - keep after all shared overrides. */
.en-page,
.en-page p,
.en-page li,
.en-page small,
.en-page .desktopHeroCopy,
.en-page .mobileHeroCopy,
.en-page .orderCopy,
.en-page .orderBullets,
.en-page .orderBullets li,
.en-page .orderCod,
.en-page .orderPrompt,
.en-page .packageSelect > span,
.en-page .packagePrice,
.en-page .course {
  font-family: Aptos, "Aptos Display", Arial, sans-serif !important;
}

.en-page h1,
.en-page h2,
.en-page h3,
.en-page .benefit strong,
.en-page .benefitsTitle,
.en-page .ingredientsTitle,
.en-page .usageTitle,
.en-page .reviews .sectionTitle span,
.en-page .videoReviewsTitle,
.en-page .hero.sectionBand .desktopChineseTitle,
.en-page .hero.sectionBand .desktopChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle,
.en-page .hero.sectionBand .mobileChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle .mobileChineseWords,
.en-page .order.sectionBand .orderTitle,
.en-page .order.sectionBand .orderTitleText,
.en-page .order.sectionBand .orderTitleLs {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

.en-page button,
.en-page .primaryCta,
.en-page .desktopHeroCta span,
.en-page .mobileHeroCta span,
.en-page .usageCta span,
.en-page .packageOption a {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

/* English page final typography override. */
.en-page,
.en-page p,
.en-page li,
.en-page small,
.en-page .desktopHeroCopy,
.en-page .mobileHeroCopy,
.en-page .orderCopy,
.en-page .orderBullets,
.en-page .orderBullets li,
.en-page .orderCod,
.en-page .orderPrompt,
.en-page .packageSelect > span,
.en-page .packagePrice,
.en-page .course {
  font-family: Aptos, "Aptos Display", Arial, sans-serif !important;
}

.en-page h1,
.en-page h2,
.en-page h3,
.en-page .benefit strong,
.en-page .benefitsTitle,
.en-page .ingredientsTitle,
.en-page .usageTitle,
.en-page .reviews .sectionTitle span,
.en-page .videoReviewsTitle,
.en-page .hero.sectionBand .desktopChineseTitle,
.en-page .hero.sectionBand .desktopChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle,
.en-page .hero.sectionBand .mobileChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle .mobileChineseWords,
.en-page .order.sectionBand .orderTitle,
.en-page .order.sectionBand .orderTitleText,
.en-page .order.sectionBand .orderTitleLs {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

.en-page button,
.en-page .primaryCta,
.en-page .desktopHeroCta span,
.en-page .mobileHeroCta span,
.en-page .usageCta span,
.en-page .packageOption a {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

/* English page typography only. Chinese page stays untouched. */
.en-page,
.en-page p,
.en-page li,
.en-page small,
.en-page .desktopHeroCopy,
.en-page .mobileHeroCopy,
.en-page .orderCopy,
.en-page .orderBullets,
.en-page .orderBullets li,
.en-page .orderCod,
.en-page .orderPrompt,
.en-page .packageSelect > span,
.en-page .packagePrice,
.en-page .course {
  font-family: Aptos, "Aptos Display", Arial, sans-serif !important;
}

.en-page h1,
.en-page h2,
.en-page h3,
.en-page .benefitsTitle,
.en-page .ingredientsTitle,
.en-page .usageTitle,
.en-page .reviews .sectionTitle span,
.en-page .videoReviewsTitle,
.en-page .desktopChineseTitle,
.en-page .mobileChineseTitle,
.en-page .orderTitle,
.en-page .orderTitleText,
.en-page .orderTitleLs {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

.en-page button,
.en-page .primaryCta,
.en-page .desktopHeroCta span,
.en-page .mobileHeroCta span,
.en-page .usageCta span,
.en-page .packageOption a {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

/* Absolute latest mobile-only tweaks - keep this block last. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(34px, 8.5vw, 58px) !important;
    padding-right: clamp(34px, 8.5vw, 58px) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .hero.sectionBand .mobileLsLogo {
    margin: 0 !important;
  }

  .hero.sectionBand .mobileLang {
    margin: 0 !important;
    align-self: center !important;
  }

  .hero.sectionBand .mobileChineseTitle {
    font-size: calc(clamp(44px, 10.8vw, 82px) + 18px) !important;
  }

  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 22px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    font-size: 1em !important;
  }

  .order.sectionBand .orderCandy {
    left: 105px !important;
  }

  .order.sectionBand .orderPrompt,
  .order.sectionBand .packageSelect > span {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }
}

/* Absolute latest mobile-only header/candy alignment - keep this block last. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(34px, 8.5vw, 58px) !important;
    padding-right: clamp(34px, 8.5vw, 58px) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .hero.sectionBand .mobileLsLogo {
    margin: 0 !important;
  }

  .hero.sectionBand .mobileLang {
    margin: 0 !important;
    align-self: center !important;
  }

  .order.sectionBand .orderCandy {
    left: 105px !important;
  }
}

/* Absolute latest mobile-only header/candy alignment - keep this block last. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(34px, 8.5vw, 58px) !important;
    padding-right: clamp(34px, 8.5vw, 58px) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .hero.sectionBand .mobileLsLogo {
    margin: 0 !important;
  }

  .hero.sectionBand .mobileLang {
    margin: 0 !important;
    align-self: center !important;
  }

  .order.sectionBand .orderCandy {
    left: 105px !important;
  }
}

/* Absolute latest mobile-only tweaks - keep this block last. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileChineseTitle {
    font-size: calc(clamp(44px, 10.8vw, 82px) + 18px) !important;
  }

  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 22px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    font-size: 1em !important;
  }

  .order.sectionBand .orderCandy {
    left: 25px !important;
  }

  .order.sectionBand .orderPrompt,
  .order.sectionBand .packageSelect > span {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }
}

/* Absolute latest title/edge overrides. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 7px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    position: relative !important;
    top: 15px !important;
  }

  .order.sectionBand .orderTitle .orderTitleText {
    position: relative !important;
    top: -15px !important;
  }
}

@media (min-width: 761px) {
  .hero.sectionBand .desktopChineseTitle span {
    position: relative !important;
    top: -8px !important;
  }

  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: -3px !important;
  }
}

/* Final mobile title and edge alignment tweaks. Desktop untouched. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hero.sectionBand .mobileLsLogo {
    margin-left: 0 !important;
  }

  .hero.sectionBand .mobileLang {
    margin-right: 0 !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    position: relative !important;
    top: 15px !important;
  }

  .order.sectionBand .orderTitle .orderTitleText {
    position: relative !important;
    top: -15px !important;
  }
}

/* Final desktop title tweaks. Mobile untouched. */
@media (min-width: 761px) {
  .hero.sectionBand .desktopChineseTitle span {
    position: relative !important;
    top: -8px !important;
  }

  .order.sectionBand .orderTitleLs {
    top: -3px !important;
  }
}

/* Mobile-only refinement: keep desktop untouched. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .hero.sectionBand .mobileChineseTitle span {
    top: 7px !important;
  }

  .order.sectionBand .orderStage {
    padding-bottom: 50px !important;
  }

  .order.sectionBand .orderCandy {
    left: -50px !important;
    width: min(45.76vw, 343px) !important;
    max-width: 343px !important;
  }
}

/* Desktop-only refinement: keep mobile untouched. */
@media (min-width: 761px) {
  .order.sectionBand .orderTitleLs {
    top: 12px !important;
  }

  .reviews {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: none !important;
  }

  .reviews::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 auto 0 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
  }

  .reviewRail {
    width: min(100%, var(--design-canvas-width)) !important;
    max-width: var(--design-canvas-width) !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  body:not(.en-page) .reviews {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  body:not(.en-page) .reviews::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 auto 0 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background: #fff url("/assets/section6-sparkle-bg.png") center center / cover no-repeat !important;
  }

  body:not(.en-page) .reviewRail {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 28px !important;
    width: min(100%, var(--design-canvas-width)) !important;
    max-width: var(--design-canvas-width) !important;
    aspect-ratio: auto !important;
    min-height: 520px !important;
    padding: 28px 34px 44px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  body:not(.en-page) .reviewRail img {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: min(18.6%, 260px) !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
  }

  body:not(.en-page) .reviewRail img:nth-child(1) {
    margin-top: 10px !important;
  }

  body:not(.en-page) .reviewRail img:nth-child(2) {
    margin-top: 210px !important;
  }

  body:not(.en-page) .reviewRail img:nth-child(3) {
    margin-top: 8px !important;
  }

  body:not(.en-page) .reviewRail img:nth-child(4) {
    margin-top: 240px !important;
  }

  body:not(.en-page) .reviewRail img:nth-child(5) {
    margin-top: 8px !important;
  }
}

/* Final section 4 order button hover: same red/white behavior as hero CTA. */
.usage.sectionBand .usageCta:hover,
.usage.sectionBand .usageCta:focus-visible {
  background: #f40000 !important;
  color: #fff !important;
  outline: none !important;
}

.usage.sectionBand .usageCta:hover span,
.usage.sectionBand .usageCta:focus-visible span {
  color: #fff !important;
}

/* Final mobile parity: keep every real desktop content section present on mobile. */
@media (max-width: 760px) {
  .benefits.sectionBand,
  .ingredients.sectionBand,
  .usage.sectionBand,
  .reviews.sectionBand,
  .videoReviews.sectionBand,
  .order.sectionBand {
    display: block !important;
    visibility: visible !important;
  }

  .hero.sectionBand > .mobileHero {
    display: flex !important;
    visibility: visible !important;
  }

  .hero.sectionBand .mobileProductStage,
  .hero.sectionBand .mobileBox,
  .hero.sectionBand .mobileCandy,
  .benefitGrid,
  .ingredientsGrid,
  .usageGrid,
  .reviewRail,
  .videoReviewGrid,
  .orderStage {
    visibility: visible !important;
  }
}

/* Mobile-only final tuning requested on 2026-07-05. Desktop layout stays untouched. */
.videoReviewsTitle {
  display: none !important;
}

@media (max-width: 760px) {
  .hero.sectionBand .mobileLsLogo {
    width: clamp(88px, 18vw, 146px) !important;
    height: auto !important;
  }

  .hero.sectionBand .mobileTech.mobileTechImage {
    display: block !important;
    width: min(78%, 450px) !important;
    height: auto !important;
    margin: 0 auto clamp(10px, 2.4vw, 20px) !important;
    -webkit-text-stroke: 0 !important;
    object-fit: contain !important;
  }

  .hero.sectionBand .mobileChineseTitle {
    position: relative !important;
    top: -10px !important;
  }

  .hero.sectionBand .mobileCandy {
    transform: translateY(-60px) !important;
  }

  .ingredients .ingredientGrid {
    grid-template-columns: 1fr !important;
    row-gap: 48px !important;
  }

  .ingredients .ingredient,
  .ingredients .ingredient:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    margin-top: 0 !important;
    align-items: start !important;
  }

  .ingredients .ingredient:nth-child(4),
  .ingredients .ingredient:nth-child(5) {
    margin-top: 0 !important;
  }

  .usage.sectionBand .usageCta {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: min(78%, 540px) !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 4.25 / 1 !important;
    margin: clamp(40px, 8vw, 64px) auto clamp(24px, 5vw, 40px) !important;
    padding: 0 !important;
    border: clamp(5px, 1.2vw, 8px) solid #f40000 !important;
    border-radius: 999px !important;
    background: #fff !important;
    color: #000 !important;
  }

  .usage.sectionBand .usageCta span {
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: clamp(34px, 8vw, 54px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
  }

  .usage.sectionBand .usageCta .ctaArrowIcon {
    position: absolute !important;
    top: 50% !important;
    right: clamp(8px, 2.05vw, 13px) !important;
    display: block !important;
    width: clamp(34px, 8vw, 54px) !important;
    height: clamp(34px, 8vw, 54px) !important;
    flex: none !important;
    transform: translateY(-50%) !important;
  }

  .reviewRail {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: none !important;
    gap: 22px !important;
    overflow: visible !important;
    padding: 22px 20px 8px !important;
    background: none !important;
    scroll-snap-type: none !important;
  }

  .reviewRail img {
    display: block !important;
    width: min(100%, 390px) !important;
    height: auto !important;
    scroll-snap-align: none !important;
  }

  .videoReviews {
    padding-top: 28px !important;
  }

  .videoReviewGrid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 24px !important;
    overflow: visible !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
  }

  .videoReview,
  .videoReviewNarrow,
  .videoReviewWide {
    width: min(100%, 360px) !important;
    height: auto !important;
    aspect-ratio: 9 / 16 !important;
    object-fit: cover !important;
    scroll-snap-align: none !important;
  }

  .order.sectionBand .orderCandy {
    position: relative !important;
    top: -100px !important;
    margin-bottom: -100px !important;
  }
}

/* Final order package links: same sample button shape, with black hover. */
.order.sectionBand .packageOption a {
  width: 100% !important;
  min-height: 43px !important;
  padding: 8px 16px !important;
  border: 1.5px solid #000 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: -4px 5px 0 #000 !important;
  box-sizing: border-box !important;
}

.order.sectionBand .packageOption a:hover,
.order.sectionBand .packageOption a:focus-visible {
  background: #000 !important;
  color: #fff !important;
  border-color: #000 !important;
  outline: none !important;
}

/* Final hero order button hover. */
.hero.sectionBand .desktopHeroCta:hover,
.hero.sectionBand .desktopHeroCta:focus-visible,
.hero.sectionBand .mobileHeroCta:hover,
.hero.sectionBand .mobileHeroCta:focus-visible {
  background: #f40000 !important;
  color: #fff !important;
}

.hero.sectionBand .desktopHeroCta:hover span,
.hero.sectionBand .desktopHeroCta:focus-visible span,
.hero.sectionBand .mobileHeroCta:hover span,
.hero.sectionBand .mobileHeroCta:focus-visible span {
  color: #fff !important;
}

/* Mobile-only final tuning: top row alignment, title LS offset, tighter hero gap, and order candy lift. */
@media (max-width: 760px) {
  .hero.sectionBand {
    margin-bottom: -100px !important;
  }

  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 clamp(14px, 4vw, 24px) !important;
    align-items: center !important;
  }

  .hero.sectionBand .mobileLsLogo {
    margin: 0 !important;
  }

  .hero.sectionBand .mobileLang {
    margin-top: 0 !important;
    align-self: center !important;
  }

  .hero.sectionBand .mobileChineseTitle span {
    position: relative !important;
    top: 15px !important;
  }

  .order.sectionBand .orderCandy {
    top: -250px !important;
    margin-bottom: -250px !important;
  }
}

/* Desktop-only final order section tuning. Mobile rules above stay untouched. */
@media (min-width: 761px) {
  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: 20px !important;
  }

  .order.sectionBand .orderStage {
    min-height: min(45.35vw, 635px) !important;
    padding-bottom: clamp(34px, 3vw, 42px) !important;
    box-sizing: border-box !important;
  }
}

/* Final section 6 background lock. */
.videoReviews {
  background: #fff url("/assets/section6-sparkle-bg.png") center center / cover no-repeat !important;
}

.videoReviews::before {
  background: #fff url("/assets/section6-sparkle-bg.png") center center / cover no-repeat !important;
}

/* Absolute latest title/edge overrides - keep this at EOF. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 7px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    position: relative !important;
    top: 15px !important;
  }

  .order.sectionBand .orderTitle .orderTitleText {
    position: relative !important;
    top: -15px !important;
  }
}

@media (min-width: 761px) {
  .hero.sectionBand .desktopChineseTitle span {
    position: relative !important;
    top: -8px !important;
  }

  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: -3px !important;
  }
}

/* Absolute latest final overrides - keep this block last. */
@media (max-width: 760px) {
  .hero.sectionBand .mobileHeroTop {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: clamp(34px, 8.5vw, 58px) !important;
    padding-right: clamp(34px, 8.5vw, 58px) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .hero.sectionBand .mobileLsLogo {
    margin: 0 !important;
  }

  .hero.sectionBand .mobileLang {
    margin: 0 !important;
    align-self: center !important;
  }

  .hero.sectionBand .mobileChineseTitle {
    font-size: calc(clamp(44px, 10.8vw, 82px) + 18px) !important;
  }

  .hero.sectionBand .mobileChineseTitle > span:first-child {
    position: relative !important;
    top: 22px !important;
  }

  .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
    position: relative !important;
    top: 15px !important;
    color: #000 !important;
    font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
    font-size: 1em !important;
    font-weight: 400 !important;
    line-height: 1.05 !important;
    text-shadow: 0.045em 0.045em 0 #6c6c6c !important;
  }

  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: -10px !important;
  }

  .order.sectionBand .orderCandy {
    left: 105px !important;
    width: min(calc(45.76vw + 20px), 363px) !important;
    max-width: 363px !important;
  }

  .order.sectionBand .orderPrompt,
  .order.sectionBand .packageSelect > span {
    font-size: 25px !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 761px) {
  .order.sectionBand .orderTitleLs {
    position: relative !important;
    top: 12px !important;
  }
}
/* English page final typography override - true EOF. */
.en-page,
.en-page p,
.en-page li,
.en-page small,
.en-page .desktopHeroCopy,
.en-page .mobileHeroCopy,
.en-page .orderCopy,
.en-page .orderBullets,
.en-page .orderBullets li,
.en-page .orderCod,
.en-page .orderPrompt,
.en-page .packageSelect > span,
.en-page .packagePrice,
.en-page .course {
  font-family: Aptos, "Aptos Display", Arial, sans-serif !important;
}

.en-page h1,
.en-page h2,
.en-page h3,
.en-page .benefit strong,
.en-page .benefitsTitle,
.en-page .ingredientsTitle,
.en-page .usageTitle,
.en-page .reviews .sectionTitle span,
.en-page .videoReviewsTitle,
.en-page .hero.sectionBand .desktopChineseTitle,
.en-page .hero.sectionBand .desktopChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle,
.en-page .hero.sectionBand .mobileChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle .mobileChineseWords,
.en-page .order.sectionBand .orderTitle,
.en-page .order.sectionBand .orderTitleText,
.en-page .order.sectionBand .orderTitleLs {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}

.en-page button,
.en-page .primaryCta,
.en-page .desktopHeroCta span,
.en-page .mobileHeroCta span,
.en-page .usageCta span,
.en-page .packageOption a {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
}
/* English page requested final refinements. Keep Chinese layout untouched. */
.en-page,
.en-page p,
.en-page li,
.en-page small,
.en-page .desktopHeroCopy,
.en-page .mobileHeroCopy,
.en-page .benefit strong,
.en-page .ingredient p,
.en-page .usageCard p,
.en-page .orderCopy,
.en-page .orderBullets,
.en-page .orderBullets li,
.en-page .orderCod,
.en-page .orderPrompt,
.en-page .packageSelect > span,
.en-page .packagePrice,
.en-page .course {
  font-family: Aptos, "Aptos Display", Arial, sans-serif !important;
}

.en-page h1,
.en-page h2,
.en-page h3,
.en-page .sectionTitle span,
.en-page .benefitsTitle,
.en-page .ingredientsTitle,
.en-page .usageTitle,
.en-page .videoReviewsTitle,
.en-page .ingredient h3,
.en-page .usageCard h3,
.en-page .hero.sectionBand .desktopChineseTitle,
.en-page .hero.sectionBand .desktopChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle,
.en-page .hero.sectionBand .mobileChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle .mobileChineseWords,
.en-page .order.sectionBand .orderTitle,
.en-page .order.sectionBand .orderTitleText,
.en-page .order.sectionBand .orderTitleLs {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
}

.en-page button,
.en-page .primaryCta,
.en-page .primaryCta span,
.en-page .desktopHeroCta span,
.en-page .mobileHeroCta span,
.en-page .usageCta span,
.en-page .packageOption button,
.en-page .packageOption a {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
  font-weight: 700 !important;
}

.en-page .hero.sectionBand .desktopEnglishTitle {
  font-size: 60px !important;
  line-height: 1 !important;
}

.en-page .order.sectionBand .orderTitle,
.en-page .order.sectionBand .orderTitleLs,
.en-page .order.sectionBand .orderTitleText {
  font-size: 50px !important;
  line-height: 0.95 !important;
}

.en-page .order.sectionBand .orderCod {
  font-size: 25px !important;
  line-height: 1.12 !important;
  white-space: normal !important;
}

.en-page .order.sectionBand .packageOption button:hover,
.en-page .order.sectionBand .packageOption button:focus-visible {
  background: #000 !important;
  color: #fff !important;
}

@media (min-width: 761px) {
  .en-page .reviews {
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .en-page .reviewRail {
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    background-size: cover !important;
    background-position: center top !important;
  }

  .en-page .order.sectionBand {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .en-page .order.sectionBand .orderStage {
    min-height: clamp(690px, 50vw, 780px) !important;
    padding-bottom: 82px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .en-page .order.sectionBand .orderPanel {
    top: clamp(38px, 4.2vw, 58px) !important;
    width: 39% !important;
    max-width: 546px !important;
  }

  .en-page .order.sectionBand .orderCopy {
    width: 82% !important;
    line-height: 1.42 !important;
    margin-bottom: 20px !important;
  }

  .en-page .order.sectionBand .orderBullets {
    margin-bottom: 24px !important;
  }

  .en-page .order.sectionBand .orderProduct {
    right: 17% !important;
    transform: translateX(150px) !important;
  }
}

@media (max-width: 760px) {
  .en-page .hero.sectionBand .mobileEnglishTitle {
    font-size: clamp(44px, 12vw, 60px) !important;
    line-height: 1 !important;
  }

  .en-page .order.sectionBand .orderTitle,
  .en-page .order.sectionBand .orderTitleLs,
  .en-page .order.sectionBand .orderTitleText {
    font-size: 50px !important;
  }

  .en-page .order.sectionBand .orderStage {
    padding-bottom: 96px !important;
    overflow: visible !important;
  }

  .en-page .order.sectionBand .orderCod {
    font-size: 25px !important;
  }
}
.en-page .order.sectionBand .packageOption a {
  font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

.en-page .order.sectionBand .packageOption a:hover,
.en-page .order.sectionBand .packageOption a:focus-visible {
  background: #000 !important;
  color: #fff !important;
}
.en-page h1,
.en-page h2,
.en-page h3,
.en-page .sectionTitle span,
.en-page .benefitsTitle,
.en-page .ingredientsTitle,
.en-page .usageTitle,
.en-page .videoReviewsTitle,
.en-page .ingredient h3,
.en-page .usageCard h3,
.en-page .benefit strong,
.en-page .desktopEnglishTitle,
.en-page .mobileEnglishTitle,
.en-page .orderTitle,
.en-page .orderTitleLs,
.en-page .orderTitleText,
.en-page .orderCod {
  text-shadow: none !important;
}

.en-page .hero.sectionBand .desktopChineseTitle,
.en-page .hero.sectionBand .desktopChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle,
.en-page .hero.sectionBand .mobileChineseTitle span,
.en-page .hero.sectionBand .mobileChineseTitle .mobileChineseWords {
  font-family: "CanvaShanhai", "WixChineseTitle", "Noto Sans TC", serif !important;
  font-weight: 400 !important;
  text-shadow: none !important;
}

.en-page .hero.sectionBand .desktopChineseTitle span {
  font-size: inherit !important;
}

.en-page .usage.sectionBand .usageCta,
.en-page .usage.sectionBand .usageCta span,
.en-page .hero.sectionBand .desktopHeroCta,
.en-page .hero.sectionBand .desktopHeroCta span,
.en-page .hero.sectionBand .mobileHeroCta,
.en-page .hero.sectionBand .mobileHeroCta span {
  text-decoration: none !important;
}

.en-page .order.sectionBand .orderTitle {
  align-items: center !important;
}

.en-page .order.sectionBand .orderTitleLs,
.en-page .order.sectionBand .orderTitleText {
  position: relative !important;
  top: 0 !important;
  line-height: 1 !important;
}

@media (min-width: 761px) {
  .en-page .hero.sectionBand .desktopHero img.desktopTechImage {
    width: calc(81.7% - 111px) !important;
    max-width: calc(100% - 50px) !important;
  }

  .en-page .reviews {
    position: relative !important;
    isolation: isolate !important;
    width: 100% !important;
    max-width: none !important;
    background: #fff !important;
  }

  .en-page .reviews::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 0 auto 0 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background: #fff url("/assets/section6-sparkle-bg.png") center center / cover no-repeat !important;
  }

  .en-page .reviewRail {
    width: min(100%, var(--design-canvas-width)) !important;
    max-width: var(--design-canvas-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 28px !important;
    aspect-ratio: auto !important;
    min-height: 520px !important;
    padding: 28px 34px 44px !important;
    overflow: visible !important;
    background: transparent !important;
  }

  .en-page .reviewRail img {
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
    width: min(18.6%, 260px) !important;
    height: auto !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
  }

  .en-page .reviewRail img:nth-child(1) {
    margin-top: 10px !important;
  }

  .en-page .reviewRail img:nth-child(2) {
    margin-top: 210px !important;
  }

  .en-page .reviewRail img:nth-child(3) {
    margin-top: 8px !important;
  }

  .en-page .reviewRail img:nth-child(4) {
    margin-top: 240px !important;
  }

  .en-page .reviewRail img:nth-child(5) {
    margin-top: 8px !important;
  }
}

@media (max-width: 760px) {
  .en-page .hero.sectionBand .mobileTech.mobileTechImage {
    width: min(calc(78% - 50px), 400px) !important;
    max-width: calc(100% - 50px) !important;
  }
}
.en-page .hero.sectionBand .desktopHeroCta,
.en-page .hero.sectionBand .mobileHeroCta,
.en-page .usage.sectionBand .usageCta {
  color: #000 !important;
}

.en-page .hero.sectionBand .desktopHeroCta:hover,
.en-page .hero.sectionBand .desktopHeroCta:focus-visible,
.en-page .hero.sectionBand .mobileHeroCta:hover,
.en-page .hero.sectionBand .mobileHeroCta:focus-visible,
.en-page .usage.sectionBand .usageCta:hover,
.en-page .usage.sectionBand .usageCta:focus-visible {
  color: #fff !important;
}

.en-page .hero.sectionBand .desktopHeroCta:hover span,
.en-page .hero.sectionBand .desktopHeroCta:focus-visible span,
.en-page .hero.sectionBand .mobileHeroCta:hover span,
.en-page .hero.sectionBand .mobileHeroCta:focus-visible span,
.en-page .usage.sectionBand .usageCta:hover span,
.en-page .usage.sectionBand .usageCta:focus-visible span {
  color: #fff !important;
}
/* English page final tuning: desktop/mobile requested adjustments. */
@media (min-width: 761px) {
  .en-page .hero.sectionBand .desktopHero img.desktopTechImage {
    width: calc(81.7% - 161px) !important;
    max-width: calc(100% - 100px) !important;
  }

  .en-page .hero.sectionBand .desktopHeroCta span {
    font-weight: 700 !important;
  }

  .en-page .order.sectionBand .orderProduct {
    transform: translateX(100px) !important;
  }
}

@media (max-width: 760px) {
  .en-page .hero.sectionBand .mobileTech.mobileTechImage {
    width: min(78%, 450px) !important;
    max-width: 100% !important;
  }

  .en-page .hero.sectionBand .mobileHeroCta,
  .en-page .usage.sectionBand .usageCta {
    position: relative !important;
  }

  .en-page .hero.sectionBand .mobileHeroCta span,
  .en-page .usage.sectionBand .usageCta span {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: max-content !important;
    margin: 0 !important;
    text-align: center !important;
    font-weight: 700 !important;
  }

  .en-page .order.sectionBand .orderTitle,
  .en-page .order.sectionBand .orderTitleLs,
  .en-page .order.sectionBand .orderTitleText {
    font-size: 35px !important;
  }
}
/* English page final micro-tuning. */
@media (min-width: 761px) {
  .en-page .hero.sectionBand .desktopHero img.desktopTechImage {
    transform: translateX(50px) !important;
  }
}

@media (max-width: 760px) {
  .en-page .hero.sectionBand .mobileEnglishTitle {
    font-family: "DM Serif Display", Georgia, "Times New Roman", serif !important;
    font-weight: 700 !important;
    text-shadow: none !important;
  }
}
/* Final language switch fix: keep EN/CN clickable above every hero layer. */
.hero.sectionBand .desktopHeroLang,
.hero.sectionBand .mobileLang {
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.hero.sectionBand .desktopHeroLang {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 64px !important;
  min-height: 44px !important;
}

.hero.sectionBand .mobileLang {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 56px !important;
  min-height: 44px !important;
}