/* =========================================================
   Product Page - KAMUI
   Compact Edition
   Full replacement stylesheet
========================================================= */

.qm-product-page {
  --qm-product-text: #111b2c;
  background:
    radial-gradient(
      circle at 18% 8%,
      rgba(51, 132, 255, 0.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 88% 30%,
      rgba(0, 229, 255, 0.12),
      transparent 28%
    ),
    #050812;
  color: #ffffff;
  overflow: hidden;
}

.qm-product-page *,
.qm-product-page *::before,
.qm-product-page *::after {
  box-sizing: border-box;
}

.qm-product-page .container {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

/* =========================================================
   Hero
========================================================= */

/* Original PNGs include 12px of transparent padding on the wordmark's left. */
.qm-product-page .product-hero .qm-subpage-hero__title.qm-kamui-hero-brand {
  --qm-kamui-wordmark-width: 208px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin-inline-start: calc(var(--qm-kamui-wordmark-width) * -12 / 376);
}

.qm-product-page .qm-kamui-hero-brand__wordmark {
  display: block;
  flex: 0 1 auto;
  width: var(--qm-kamui-wordmark-width);
  min-width: 0;
  height: auto;
}

.qm-product-page .qm-kamui-hero-brand__symbol {
  display: block;
  flex: 0 0 auto;
  width: 38px;
  height: auto;
}

@media (max-width: 1024px) {
  .qm-product-page .product-hero .qm-subpage-hero__title.qm-kamui-hero-brand {
    --qm-kamui-wordmark-width: min(208px, 54vw);
    gap: 16px;
  }

  .qm-product-page .qm-kamui-hero-brand__symbol {
    width: 38px;
  }
}

.product-hero {
  position: relative;
  display: flex;
  min-height: 610px;
  align-items: center;
  overflow: hidden;
  background-image: url("../../images/Product/product-hero.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.product-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 48px;
  align-items: center;
  padding: 68px 0;
}

.product-hero-content {
  min-width: 0;
  align-self: start;
  margin-top: -24px;
}

.product-hero-label,
.section-label,
.product-lineup-label,
.product-technology-label {
  color: #62d9ff;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.product-hero-label {
  margin: 0 0 14px;
  font-size: 0.82rem;
}

.product-hero h1 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(3.6rem, 7vw, 6.6rem);
  line-height: 0.95;
  letter-spacing: 0.04em;
}

.product-hero-lead {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: clamp(1.35rem, 2.6vw, 2.05rem);
  font-weight: 700;
  line-height: 1.55;
}

.product-hero-text {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.85;
}

@media (max-width: 1024px) {
  /* Reuse Home's water-edge feathering, keeping this image's cabinet opaque. */
  .qm-product-page .product-hero .qm-kamui-mobile-visual {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 20%, #000 88%, transparent);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .product-hero-phrase {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
  }
}

.product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  margin-top: 28px;
}

.product-hero-button,
.product-cta-button {
  display: inline-flex;
  min-width: 184px;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #4fd8ff, #2f6bff);
  box-shadow: 0 20px 60px rgba(47, 107, 255, 0.35);
  color: #ffffff;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.product-hero-button:hover,
.product-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 72px rgba(47, 107, 255, 0.48);
  color: #ffffff;
  filter: brightness(1.06);
}

.product-hero-button:focus-visible,
.product-cta-button:focus-visible {
  outline: 3px solid rgba(98, 217, 255, 0.72);
  outline-offset: 4px;
}

.product-hero-note {
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}

.product-hero-card {
  position: relative;
  width: min(380px, 100%);
  min-height: 390px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(98, 217, 255, 0.26);
  border-radius: 30px;
  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(98, 217, 255, 0.18),
      transparent 36%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow:
    0 40px 120px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px);
}

.product-hero-card::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 22px;
  pointer-events: none;
}

.product-hero-card::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 50%;
  width: 184px;
  height: 184px;
  border-radius: 50%;
  background: rgba(98, 217, 255, 0.12);
  filter: blur(60px);
  transform: translateX(-50%);
  pointer-events: none;
}

.product-hero-card-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  color: #62d9ff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.product-hero-cube {
  position: relative;
  z-index: 1;
  width: 184px;
  height: 184px;
  margin: 54px auto 40px;
  border-radius: 30px;
  background:
    linear-gradient(
      135deg,
      rgba(79, 216, 255, 0.8),
      rgba(47, 107, 255, 0.35)
    ),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 80px rgba(98, 217, 255, 0.36),
    inset 0 0 42px rgba(255, 255, 255, 0.18);
  transform: rotate(45deg);
}

.product-hero-cube span {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 8, 18, 0.42);
}

.product-hero-cube span:nth-child(1) {
  inset: 24px 76px;
}

.product-hero-cube span:nth-child(2) {
  inset: 76px 24px;
}

.product-hero-cube span:nth-child(3) {
  top: 28px;
  left: 28px;
  width: 62px;
  height: 62px;
}

.product-hero-cube span:nth-child(4) {
  right: 28px;
  bottom: 28px;
  width: 62px;
  height: 62px;
}

.product-hero-card > p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.95rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  text-align: center;
}

/* =========================================================
   Common Sections
========================================================= */

.qm-product-page .section {
  position: relative;
  padding: 68px 0;
}

.section-label {
  margin: 0 0 10px;
  font-size: 0.78rem;
}

.section-heading {
  max-width: 780px;
  margin-bottom: 30px;
}

.section-heading h2,
.product-intro h2,
.product-cta h2 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.section-heading > p:not(.section-label),
.product-intro p,
.product-text-block p,
.product-feature-card p,
.product-lineup-card p,
.product-technology-box p,
.product-cta p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.85;
}

.product-intro .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  width: min(1200px, calc(100% - 64px));
  max-width: 1200px;
}

.product-intro {
  background: #f4f7fb;
  color: #102441;
}

.qm-product-page .product-intro {
  padding-top: 30px;
  padding-bottom: 30px;
}

.product-about-block {
  margin-top: 0;
}

.product-about-block .section-heading {
  margin-bottom: 0;
}

.product-intro .product-text-block {
  max-width: 1120px;
}

.product-intro .product-text-block p {
  margin-bottom: 2px;
  line-height: 1.65;
  word-break: auto-phrase;
}

.product-intro .product-text-block p:last-child {
  margin-bottom: 0;
}

.product-intro .qm-section-label.qm-section-label {
  margin-bottom: 18px;
}

.product-intro .product-challenge-block h2,
.product-intro .product-about-block h2 {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.35;
}

.product-text-block {
  max-width: 880px;
}

.product-text-block p {
  margin: 0 0 10px;
}

.product-text-block p:last-child {
  margin-bottom: 0;
}

.product-text-block--lead {
  margin-top: 30px;
  padding: 24px 28px;
  border: 1px solid rgba(98, 217, 255, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
}

.product-text-block--lead p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* =========================================================
   Feature and Lineup Cards
========================================================= */

.product-feature-grid,
.product-lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.product-feature-card,
.product-lineup-card,
.product-technology-box,
.product-cta-inner {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.105),
      rgba(255, 255, 255, 0.035)
    );
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.product-feature-card,
.product-lineup-card,
.product-technology-box {
  padding: 26px;
  border-radius: 24px;
}

.product-feature-card::before,
.product-lineup-card::before,
.product-technology-box::before,
.product-cta-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(98, 217, 255, 0.18),
      transparent 48%
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.product-feature-card:hover::before,
.product-lineup-card:hover::before,
.product-technology-box:hover::before,
.product-cta-inner:hover::before {
  opacity: 1;
}

.product-feature-card h3,
.product-lineup-card h3,
.product-technology-box h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 10px;
  color: #ffffff;
  font-size: 1.28rem;
  line-height: 1.5;
}

.product-feature-card p,
.product-lineup-card p,
.product-technology-box p {
  position: relative;
  z-index: 1;
  margin: 0;
}

.product-feature-card {
  min-height: 225px;
}

.product-lineup {
  background:
    radial-gradient(
      circle at 16% 20%,
      rgba(47, 107, 255, 0.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      transparent
    );
}

.product-lineup .container {
  width: min(1200px, calc(100% - 64px));
  max-width: 1200px;
}

.product-lineup-card {
  min-height: 255px;
}

.product-lineup-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 10px;
  border: 1px solid rgba(98, 217, 255, 0.25);
  border-radius: 999px;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* =========================================================
   Technology
========================================================= */

.product-technology {
	padding-top: 34px !important;
	padding-bottom: 30px !important;
  background: #f4f7fb;
  color: #102441;
}

.product-technology-content {
  display: grid;
  max-width: 920px;
  grid-template-columns: minmax(0, 1fr);
	gap: 16px;
  align-items: start;
}

.product-technology-primary h2 {
	margin: 0 0 14px;
  color: #102441;
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.product-technology-primary .product-text-block p {
	margin-bottom: 12px;
}

.product-technology-primary .product-text-block p:last-child {
	margin-bottom: 0;
}

.product-technology-box {
  border-color: rgba(98, 217, 255, 0.28);
}

.product-technology-label {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 0.78rem;
}

/* =========================================================
   Patent
========================================================= */

.product-patent {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 76% 18%,
      rgba(84, 183, 255, 0.24),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      #eef8ff 0%,
      #e6f4ff 48%,
      #f8fcff 100%
    );
  color: #14213a;
}

.product-patent::before {
  content: "";
  position: absolute;
  top: -160px;
  right: -100px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(92, 190, 255, 0.13);
  filter: blur(2px);
  pointer-events: none;
}

.product-patent::after {
  content: "";
  position: absolute;
  bottom: -220px;
  left: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(79, 170, 232, 0.08);
  pointer-events: none;
}

.product-patent-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  gap: 56px;
  align-items: center;
}

.product-patent-copy {
  max-width: 660px;
}

.product-patent-copy .section-label {
  margin-bottom: 16px;
  color: #17243d;
}

.product-patent-copy h2 {
  margin: 0 0 24px;
  color: #17243d;
  font-size: clamp(2rem, 4vw, 3.45rem);
  line-height: 1.35;
  letter-spacing: 0.015em;
}

.product-patent-copy > p {
  max-width: 650px;
  margin: 0 0 18px;
  color: var(--qm-product-text);
  font-size: 1.05rem;
  line-height: 1.95;
}

.product-patent-body {
  font-family: inherit;
  font-weight: 500;
  letter-spacing: normal;
}

.product-patent-certified {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 38px;
  color: #0784d8;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.product-patent-certified-line {
  display: block;
  width: 56px;
  height: 1px;
  flex: 0 0 auto;
  background: #36a9ee;
}

.product-patent-number-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 13px 24px;
  border: 1px solid rgba(26, 157, 234, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.38);
  color: #0784d8;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Patent information card */

.product-patent-card {
  position: relative;
  padding: 44px 32px 22px;
  overflow: hidden;
  border: 1px solid rgba(85, 167, 222, 0.34);
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow:
    0 38px 90px rgba(44, 125, 178, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.product-patent-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(90, 180, 238, 0.27);
  border-radius: 24px;
  pointer-events: none;
}

.product-patent-card-decoration {
  position: absolute;
  top: -68px;
  right: -68px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: rgba(99, 197, 255, 0.17);
  pointer-events: none;
}

.product-patent-card-header,
.product-patent-details {
  position: relative;
  z-index: 1;
}

.product-patent-card-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 16px 28px;
}

.product-patent-card-eyebrow {
  margin: 0 0 10px;
  color: #0387dc;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.product-patent-card-header h3 {
  margin: 0;
  color: #17243d;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.14;
  letter-spacing: 0.06em;
}

.product-patent-office {
  margin: 22px 0 0;
  color: var(--qm-product-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.product-patent-seal {
  display: flex;
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198, 144, 50, 0.55);
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 40%,
      #fffdf6,
      #fff5dd
    );
  box-shadow: 0 12px 30px rgba(160, 113, 39, 0.12);
  color: #a97728;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-align: center;
}

.product-patent-details {
  margin: 0 16px;
}

.product-patent-detail {
  padding: 20px 0;
  border-top: 1px solid rgba(76, 161, 218, 0.28);
}

.product-patent-detail dt {
  margin: 0 0 10px;
  color: #0784d8;
  font-size: 0.77rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.product-patent-detail dd {
  margin: 0;
  color: #18243a;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.product-patent-detail .product-patent-main-number {
  font-size: clamp(1.9rem, 3.5vw, 2.8rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.product-patent-main-number small {
  margin-left: 4px;
  font-size: 0.88rem;
}

/* =========================================================
   CTA
========================================================= */

.qm-product-page .qm-contact-cta {
  min-height: 0;
  height: auto;
  padding: 64px 24px;
  background: var(--qm-bg-standard, #f5f8fc);
}

@media (max-width: 760px) {
  .qm-product-page .qm-contact-cta { padding: 64px 16px; }
}

@media (min-width: 1101px) {
  .qm-product-page .qm-contact-cta {
    min-height: 0;
    height: auto;
    padding: 64px 24px;
  }
}

.product-cta {
	padding-top: 36px !important;
	padding-bottom: 32px !important;
	background: linear-gradient(180deg, #eaf5ff 0%, #f6fbff 100%);
}

.product-cta .container {
	width: min(1200px, calc(100% - 64px));
	max-width: 1200px;
}

.product-cta-inner {
	display: flex;
	min-height: 190px;
	padding: 16px 48px;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
}

.product-cta-inner::before {
	content: none;
}

.product-cta-inner h2,
.product-cta-inner p,
.product-cta-inner a {
  position: relative;
  z-index: 1;
}

.product-cta-inner h2 {
	max-width: none;
	margin: 0 0 12px;
	color: #102441;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.4;
}

.product-cta-inner p {
	max-width: none;
	margin: 0 0 22px;
	color: var(--qm-product-text);
	font-size: 17px;
	line-height: 1.7;
}

.product-cta .product-cta-button {
	width: 190px;
	height: 54px;
	min-width: 190px;
	padding: 0 28px;
	box-shadow: 0 12px 28px rgba(47, 107, 255, 0.22);
}

.product-cta .product-cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(47, 107, 255, 0.28);
}

/* =========================================================
   Animation
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-hero-button,
  .product-cta-button {
    transition: none;
  }
}

/* =========================================================
   Responsive - Tablet
========================================================= */

@media (max-width: 960px) {
  .product-hero-desktop-break {
    display: none;
  }

  .product-hero {
    min-height: auto;
  }

  .product-hero-inner,
  .product-technology-content,
  .product-patent-layout {
    grid-template-columns: 1fr;
  }

  .product-hero-inner {
    padding: 64px 0;
  }

  .product-feature-grid,
  .product-lineup-grid {
    grid-template-columns: 1fr;
  }

  .product-feature-card,
  .product-lineup-card {
    min-height: auto;
  }

  .qm-product-page .section {
    padding: 58px 0;
  }

  .product-patent-layout {
    gap: 48px;
  }

  .product-patent-copy {
    max-width: none;
  }

  .product-patent-card {
    width: min(100%, 580px);
    margin: 0 auto;
  }

  .product-cta-inner {
    padding: 40px 30px;
  }
}

/* =========================================================
   Responsive - Mobile
========================================================= */

@media (max-width: 640px) {
  .qm-product-page .container {
    width: min(100% - 28px, 1120px);
  }

  .product-hero-inner {
    gap: 36px;
    padding: 54px 0;
  }

  .product-hero h1 {
    font-size: 4rem;
  }

  .product-hero-lead {
    font-size: 1.45rem;
  }

  .product-hero-text {
    font-size: 0.96rem;
    line-height: 1.9;
  }

  .product-hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .product-hero-button,
  .product-cta-button {
    width: 100%;
    min-width: 0;
  }

  .product-hero-note {
    font-size: 0.76rem;
    line-height: 1.7;
  }

  .product-hero-card {
    min-height: 360px;
    padding: 26px;
    border-radius: 24px;
  }

  .product-hero-card::before {
    inset: 16px;
    border-radius: 22px;
  }

  .product-hero-cube {
    width: 160px;
    height: 160px;
    margin: 54px auto 42px;
  }

  .product-hero-cube span:nth-child(1) {
    inset: 22px 67px;
  }

  .product-hero-cube span:nth-child(2) {
    inset: 67px 22px;
  }

  .product-hero-cube span:nth-child(3) {
    top: 24px;
    left: 24px;
    width: 54px;
    height: 54px;
  }

  .product-hero-cube span:nth-child(4) {
    right: 24px;
    bottom: 24px;
    width: 54px;
    height: 54px;
  }

  .section-heading h2,
  .product-intro h2,
  .product-cta h2 {
    font-size: 1.9rem;
  }

  .product-intro .product-challenge-block h2,
  .product-intro .product-about-block h2 {
    font-size: var(--qm-mobile-section-title-size);
    line-height: var(--qm-mobile-section-title-leading);
    text-wrap: pretty;
    word-break: auto-phrase;
    overflow-wrap: normal;
  }

  .product-feature-card,
  .product-lineup-card,
  .product-technology-box,
  .product-text-block--lead {
    padding: 24px;
    border-radius: 22px;
  }

  .product-patent-copy h2 {
    font-size: 2rem;
  }

  .product-patent-copy > p {
    font-size: 0.96rem;
    line-height: 1.85;
  }

  .product-patent-certified {
    align-items: flex-start;
    margin-top: 30px;
    font-size: 0.72rem;
    line-height: 1.6;
  }

  .product-patent-certified-line {
    width: 36px;
    margin-top: 8px;
  }

  .product-patent-number-badge {
    padding: 14px 22px;
    font-size: 0.9rem;
  }

  .product-patent-card {
    padding: 42px 20px 18px;
    border-radius: 24px;
  }

  .product-patent-card::before {
    inset: 12px;
    border-radius: 22px;
  }

  .product-patent-card-header {
    flex-direction: column;
    margin: 6px 12px 28px;
  }

  .product-patent-card-header h3 {
    font-size: 2rem;
  }

  .product-patent-seal {
    width: 88px;
    height: 88px;
    flex-basis: 88px;
  }

  .product-patent-details {
    margin: 0 12px;
  }

  .product-patent-detail {
    padding: 24px 0;
  }

  .product-patent-detail dd {
    font-size: 0.96rem;
  }

  .product-cta-inner {
    padding: 40px 24px;
    border-radius: 24px;
  }
}

/* =========================================================
   Final Layout Fixes
   Header gap + compact patent section
========================================================= */

/* Remove Astra's default page spacing below the sticky header */
body.page-template-page-product .site-content,
body.page-template-page-product-php .site-content {
  padding-top: 0;
  background: #050812;
}

body.page-template-page-product .site-content > .ast-container,
body.page-template-page-product-php .site-content > .ast-container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

body.page-template-page-product #primary,
body.page-template-page-product-php #primary,
body.page-template-page-product .site-main,
body.page-template-page-product-php .site-main {
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Defensive fallback for Astra page-container spacing */
body.page-template-page-product.ast-plain-container.ast-no-sidebar #primary,
body.page-template-page-product-php.ast-plain-container.ast-no-sidebar #primary {
  margin-top: 0;
  margin-bottom: 0;
}

/* Compact patent presentation */
.product-patent {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.product-patent.product-patent {
  padding-top: 38px !important;
  padding-bottom: 38px !important;
}

.product-patent .container {
  width: min(1200px, calc(100% - 64px));
  max-width: 1200px;
}

.product-patent-layout {
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 24px;
	align-items: start;
}

.product-patent-copy {
	max-width: none;
	padding-top: 5px;
}

.product-patent-copy h2 {
  margin-bottom: 20px;
  font-size: clamp(1.9rem, 3.6vw, 3.15rem);
}

.product-patent-copy > p {
  max-width: none;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.85;
}

.product-patent-certified {
  margin-top: 28px;
}

.product-patent-number-badge {
  margin-top: 18px;
  padding: 11px 20px;
  font-size: 0.9rem;
}

.product-patent-card {
	width: 350px;
  padding: 22px 20px 12px;
  border-radius: 24px;
}

.product-patent-card::before {
  inset: 10px;
  border-radius: 17px;
}

.product-patent-card-header {
  margin: 2px 8px 12px;
}

.product-patent-card-eyebrow {
  margin-bottom: 7px;
  font-size: 0.66rem;
}

.product-patent-card-header h3 {
  font-size: 1.72rem;
  line-height: 1.08;
}

.product-patent-office {
  margin-top: 8px;
  font-size: 0.62rem;
}

.product-patent-seal {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  font-size: 0.5rem;
}

.product-patent-details {
  margin: 0 8px;
}

.product-patent-detail {
  padding: 9px 0;
}

.product-patent-detail dt {
  margin-bottom: 4px;
  font-size: 0.64rem;
}

.product-patent-detail dd {
  font-size: 0.86rem;
  line-height: 1.45;
}

.product-patent-detail .product-patent-main-number {
  font-size: 1.75rem;
}

@media (max-width: 960px) {
  .product-patent {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }

  .product-patent-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .product-patent-card {
    width: min(100%, 500px);
  }
}

@media (max-width: 640px) {
  .product-patent {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .product-patent-card {
    padding: 28px 18px 14px;
  }

  .product-patent-card-header {
    margin: 4px 10px 18px;
  }

  .product-patent-details {
    margin: 0 10px;
  }

  .product-patent-detail {
    padding: 14px 0;
  }
}

/* Patent certificate presentation */
body:has(.qm-product-page) {
  overflow: visible;
}

.qm-product-page {
  overflow: visible;
}

.product-patent::before {
  right: 0;
  width: 420px;
}

.product-patent::after {
  left: 0;
  width: 360px;
}

.product-patent.product-patent {
  min-height: 0;
  padding-top: 60px !important;
  padding-bottom: 60px !important;
  overflow: visible;
}

.product-patent-layout {
  grid-template-columns: minmax(0, 780px) 240px;
  column-gap: clamp(48px, 6vw, 88px);
  align-items: start;
  justify-content: start;
}

.product-patent-copy > :last-child {
  margin-bottom: 0;
}

.product-patent-certificate {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 240px;
  margin: 0;
  justify-self: start;
  cursor: zoom-in;
}

.product-patent-certificate-image {
  position: relative;
  transform-origin: right center;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.product-patent-certificate img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(38, 88, 124, 0.18);
}

.product-patent-certificate:focus-visible {
  outline: 3px solid #1474c9;
  outline-offset: 6px;
}

.product-patent-certificate-caption {
  display: none;
  width: 100%;
  margin-top: 9px;
  color: var(--qm-product-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .product-patent-certificate-caption {
    display: block;
  }

  .product-patent:has(.product-patent-certificate:hover),
  .product-patent:has(.product-patent-certificate:focus-visible) {
    z-index: 10000;
  }

  .product-patent-certificate:hover,
  .product-patent-certificate:focus-visible {
    z-index: 10001;
  }

  .product-patent-certificate:hover .product-patent-certificate-image,
  .product-patent-certificate:focus-visible .product-patent-certificate-image {
    transform: scale(1.7);
    box-shadow: 0 24px 54px rgba(25, 66, 98, 0.3);
  }

  .product-patent-certificate:hover .product-patent-certificate-caption,
  .product-patent-certificate:focus-visible .product-patent-certificate-caption {
    opacity: 0;
  }
}

@media (max-width: 960px) and (min-width: 681px) {
  .product-patent-layout {
    grid-template-columns: minmax(0, 590px) 230px;
    gap: 36px;
  }

  .product-patent-certificate {
    max-width: 230px;
  }
}

@media (max-width: 680px) {
  .product-patent.product-patent {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .product-patent-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .product-patent-certificate {
    max-width: 280px;
    margin-inline: auto;
    justify-self: center;
    cursor: default;
  }
}


/* =========================================================
   Astra Primary Margin Fix
   The Product template is rendered with page-template-default,
   so body-based page-template selectors do not apply.
========================================================= */

#primary.qm-product-page,
main#primary.qm-product-page,
.ast-plain-container #primary.qm-product-page,
.ast-plain-container.ast-no-sidebar #primary.qm-product-page {
  width: 100%;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

#primary.qm-product-page > .product-hero {
  margin-top: 0 !important;
}

/* =========================================================
   KAMUI Movie
========================================================= */

.product-movie {
	padding-top: 42px !important;
	padding-bottom: 32px !important;
	background: #1b3a5b;
}

.product-movie .section-heading {
	width: 100%;
	max-width: none;
	margin: 0 0 22px;
}

.product-movie .section-heading .product-movie-message {
	max-width: 1200px;
	margin: 0;
	color: #f4f7fb;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.015em;
}

.product-movie-caption {
	display: block;
	margin-top: 10px;
	margin-left: 0;
	color: rgba(255, 255, 255, 0.76);
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.product-movie-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(98, 217, 255, 0.24);
  border-radius: 26px;
  background: #02040a;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.42),
    0 0 70px rgba(47, 107, 255, 0.12);
}

.product-movie-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  pointer-events: none;
}

.product-movie-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000000;
  object-fit: contain;
}

.product-movie-note {
  width: min(960px, 100%);
  margin: 14px auto 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-align: right;
}

/* Shared chapter label system for the latter half of the Product page. */
.qm-product-page .product-chapter-label.product-chapter-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  color: #0867d7;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.qm-product-page .product-chapter-label.product-chapter-label::before {
  width: 40px;
  height: 1px;
  flex: 0 0 40px;
  content: "";
  background: #0867d7;
}

@media (min-width: 1025px) {
  .product-technology .product-chapter-label { left: clamp(-40px, calc((1160px - 100vw) / 2), 0px); }
}

.product-patent .product-chapter-label {
  left: 0;
}

.product-movie .product-chapter-label {
	left: 0;
	margin-bottom: 28px;
	color: #59d8ff;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.qm-product-page .product-movie .product-chapter-label {
	color: #59d8ff;
}

.qm-product-page .product-movie .product-chapter-label::before {
	background: #59d8ff;
}

/* =========================================================
   Product Page Tone Balance
========================================================= */

.product-intro h2,
.product-reason .section-heading h2,
.product-technology .section-heading h2 {
  color: #102441;
}

.product-intro p,
.product-reason .section-heading > p:not(.section-label),
.product-technology .product-text-block p {
  color: var(--qm-product-text);
}

.qm-product-page .product-intro .qm-section-label,
.qm-product-page .product-reason .qm-section-label,
.qm-product-page .product-technology .qm-section-label {
  color: #0867d7;
}

.qm-product-page .product-intro .qm-section-label::before,
.qm-product-page .product-reason .qm-section-label::before,
.qm-product-page .product-technology .qm-section-label::before {
  background: #0867d7;
}

.product-reason {
  background: #f4f7fb;
  color: #102441;
}

.qm-product-page .product-reason {
  padding-top: 38px;
}

.product-reason .container {
  width: min(1200px, calc(100% - 64px));
  max-width: 1200px;
}

.product-reason .product-feature-card {
  display: grid;
  min-height: 270px;
  grid-template-columns: minmax(0, 1fr) 68px;
  grid-template-rows: minmax(68px, auto) auto;
  align-content: start;
  column-gap: 18px;
  row-gap: 18px;
  padding: 32px;
  border-color: rgba(47, 125, 246, 0.28);
  border-radius: 20px;
  background: linear-gradient(145deg, #eef9ff, #d9effb);
  box-shadow: 0 14px 30px rgba(42, 91, 128, 0.1);
  backdrop-filter: none;
}

.product-reason .product-feature-card::before {
  content: none;
}

.product-reason .product-feature-card h3 {
  display: flex;
  min-height: 68px;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  margin: 0;
  color: #102b45;
  font-size: 1.28rem;
  line-height: 1.45;
}

.product-reason .product-feature-card h3::after {
  display: block;
  width: 42px;
  height: 3px;
  margin-top: auto;
  border-radius: 999px;
  content: "";
  background: #1679c8;
}

.product-reason .product-feature-card > p {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  color: var(--qm-product-text);
  font-size: 1rem;
  line-height: 1.75;
}

.product-feature-icon {
  display: grid;
  width: 68px;
  height: 68px;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  color: #1679c8;
}

.product-feature-icon svg {
  display: block;
  width: 64px;
  height: 64px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 960px) {
  .qm-product-page .product-reason {
    padding-top: 10px;
  }

  .product-reason .product-feature-card {
    min-height: 0;
  }

  .product-feature-copy-break {
    display: none;
  }
}

.product-reason .product-evidence-row {
  border-color: rgba(47, 125, 246, 0.24);
  background: linear-gradient(145deg, #eef9ff, #d9effb);
  box-shadow: 0 18px 42px rgba(42, 91, 128, 0.1);
}

.product-technology .product-technology-box {
  border-color: rgba(20, 57, 101, 0.16);
  background: linear-gradient(145deg, #102b50, #081a32);
  box-shadow: 0 20px 52px rgba(16, 36, 65, 0.14);
}

.product-movie .container {
	width: min(1200px, calc(100% - 64px));
	max-width: 1200px;
}

.product-movie-frame {
	width: min(960px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.product-movie-frame {
  border-color: rgba(98, 217, 255, 0.16);
  border-radius: 20px;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.28);
}

@media (max-width: 640px) {
  .product-movie-frame {
    border-radius: 18px;
  }

  .product-movie-note {
    font-size: 0.78rem;
    text-align: left;
  }
}

/* =========================================================
   Why Immersion Cooling - Evidence / Excel Graphs
========================================================= */

.product-reason-evidence {
  display: grid;
  gap: 24px;
  margin-top: 34px;
}

.product-evidence-row {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(98, 217, 255, 0.2);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025));
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.24);
}

.product-evidence-row--reverse /* QuantumMesh original infographic */
.product-evidence-visual {
  position: relative;
  display: flex;
  min-height: 430px;
  padding: 30px 28px 24px;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border-right: 1px solid rgba(47, 125, 246, 0.18);
  background: rgba(255, 255, 255, 0.58);
}

.product-evidence-row--reverse .product-evidence-visual {
  border-right: 0;
  border-left: 1px solid rgba(47, 125, 246, 0.18);
}

.product-evidence-visual::before {
  content: none;
}

.qm-infographic-heading,
.qm-chart-wrap,
.qm-infographic-insight,
.qm-cooling-legend {
  position: relative;
  z-index: 1;
}

.qm-infographic-heading {
  margin-bottom: 8px;
}

.qm-infographic-eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #0878e8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.qm-infographic-heading h3 {
  margin: 0 0 4px;
  color: var(--qm-product-text);
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
  line-height: 1.35;
}

.qm-infographic-heading p {
  margin: 0;
  color: var(--qm-product-text);
  font-size: 0.88rem;
  line-height: 1.6;
}

.qm-chart-wrap {
  width: 100%;
  margin: 4px auto 0;
}

.qm-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.qm-chart-grid line {
  stroke: rgba(45, 103, 148, 0.16);
  stroke-width: 1;
}

.qm-chart-axis-labels text,
.qm-chart-categories text {
  fill: #111b2c;
  font-size: 15px;
  text-anchor: middle;
}

.qm-chart-axis-labels text {
  text-anchor: end;
}

.qm-chart-axis-labels .qm-chart-unit,
.qm-chart-categories .qm-chart-x-label {
  fill: #111b2c;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.qm-chart-line {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qm-chart-points circle {
  fill: #ffffff;
  stroke: #62d9ff;
  stroke-width: 3;
}

#qmPowerLine stop:nth-child(1) { stop-color: #ffb347; }
#qmPowerLine stop:nth-child(2) { stop-color: #ff7a3d; }
#qmPowerLine stop:nth-child(3) { stop-color: #ff4d4f; }
#qmPowerArea stop:first-child { stop-color: #ff7a3d; stop-opacity: 0.16; }
#qmPowerArea stop:last-child { stop-color: #ff4d4f; stop-opacity: 0; }

.qm-chart--power .qm-chart-points circle:nth-child(-n + 2) { stroke: #ffb347; }
.qm-chart--power .qm-chart-points circle:nth-child(3) { stroke: #ff7a3d; }
.qm-chart--power .qm-chart-points circle:nth-child(n + 4) { stroke: #ff4d4f; }

.qm-chart-values text {
  fill: #111b2c;
  font-size: 16px;
  font-weight: 800;
  text-anchor: middle;
}

.qm-chart--power .qm-chart-categories text {
  fill: #111b2c;
  font-size: 17px;
  font-weight: 700;
}

.qm-chart--power .qm-chart-categories text:nth-child(even) {
  fill: #111b2c;
  font-size: 15px;
  font-weight: 600;
}

.qm-infographic-insight {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 4px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 173, 66, 0.28);
  border-radius: 14px;
  background: rgba(255, 173, 66, 0.08);
  color: var(--qm-product-text);
  font-size: 0.86rem;
  line-height: 1.45;
}

.qm-infographic-insight-value {
  flex: 0 0 auto;
  color: #ffad42;
  font-size: 1.25rem;
  font-weight: 800;
}

.qm-cooling-zones .qm-zone {
  stroke-width: 1.5;
}

.qm-zone--air {
  fill: rgba(77, 216, 245, 0.18);
  stroke: #4dd8f5;
}

.qm-zone--dlc {
  fill: rgba(255, 173, 66, 0.18);
  stroke: #ffad42;
}

.qm-zone--immersion {
  fill: rgba(255, 95, 104, 0.2);
  stroke: #ff5f68;
}

.qm-chart--cooling .qm-chart-points circle:nth-child(-n + 3) {
  stroke: #4dd8f5;
}

.qm-chart--cooling .qm-chart-points circle:nth-child(n + 4):nth-child(-n + 5) {
  stroke: #ffad42;
}

.qm-chart--cooling .qm-chart-points circle:nth-child(n + 6) {
  stroke: #ff5f68;
}

.qm-cooling-zones text {
  fill: #111b2c;
  font-size: 18px;
  font-weight: 800;
  text-anchor: middle;
}

.qm-chart-categories--pue text {
  fill: #111b2c;
  font-size: 16px;
  font-weight: 600;
}

.qm-cooling-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  color: var(--qm-product-text);
  font-size: 0.84rem;
  font-weight: 700;
}

.qm-cooling-legend span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.qm-legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.qm-legend-dot--air { background: #4dd8f5; }
.qm-legend-dot--dlc { background: #ffad42; }
.qm-legend-dot--immersion { background: #ff5f68; }

.product-evidence-copy {
  order: 1;
}

.product-evidence-visual {
  position: relative;
  display: flex;
  min-height: 360px;
  padding: 48px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  border-right: 1px solid rgba(47, 125, 246, 0.18);
  background: rgba(255, 255, 255, 0.58);
}

.product-evidence-row--reverse .product-evidence-visual {
  border-right: 0;
  border-left: 1px solid rgba(47, 125, 246, 0.18);
}

.product-evidence-visual::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px dashed rgba(47, 125, 246, 0.42);
  border-radius: 18px;
  pointer-events: none;
}

.product-evidence-source,
.product-evidence-visual strong,
.product-evidence-visual small {
  position: relative;
  z-index: 1;
}

.product-evidence-source {
  color: #0878e8;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.product-evidence-visual strong {
  color: var(--qm-product-text);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  line-height: 1.4;
}

.product-evidence-visual small {
  color: var(--qm-product-text);
  font-size: 0.88rem;
}

.product-evidence-copy {
  position: relative;
  display: flex;
  min-height: 360px;
  padding: 46px 44px;
  justify-content: center;
  flex-direction: column;
  background: transparent;
}

.product-evidence-kicker {
  margin: 0 0 12px;
  color: #0878e8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.product-evidence-copy h3 {
  position: relative;
  margin: 0 0 18px;
  color: var(--qm-product-text);
  font-size: clamp(1.45rem, 2vw, 2rem);
  line-height: 1.55;
}

.product-evidence-copy > p:last-child {
  position: relative;
  margin: 0;
  color: var(--qm-product-text);
  line-height: 2;
}

html[lang^="en"] .product-evidence-copy > p:last-child {
  font-size: 0.9rem;
}

@media (min-width: 901px) {
  .product-evidence-row--reverse .product-evidence-copy {
    padding-right: 28px;
    padding-left: 28px;
  }
}

@media (max-width: 900px) {
  .product-evidence-copy-break {
    display: none;
  }

  .product-evidence-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-evidence-row--reverse .product-evidence-visual,
  .product-evidence-row--reverse .product-evidence-copy {
    order: initial;
  }

  .product-evidence-visual,
  .product-evidence-row--reverse .product-evidence-visual {
    min-height: 300px;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .product-evidence-copy {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .product-reason-evidence {
    margin-top: 26px;
  }

  .product-evidence-row {
    border-radius: 22px;
  }

  .product-evidence-visual {
    min-height: 240px;
    padding: 34px 24px;
  }

  .product-evidence-visual::after {
    inset: 14px;
  }

  .product-evidence-copy {
    padding: 34px 24px 38px;
  }

}

/* =========================================================
   KAMUI Lineup Detail
   α / β / γ product specifications
========================================================= */
.product-lineup-grid--overview {
  margin-bottom: 54px;
}

.product-lineup-summary {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0 0;
}

.product-lineup-summary div {
  padding: 13px 14px;
  border: 1px solid rgba(98, 217, 255, 0.14);
  border-radius: 14px;
  background: rgba(5, 8, 18, 0.34);
}

.product-lineup-summary dt {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.product-lineup-summary dd {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
}

.product-model-list {
  display: grid;
  gap: 28px;
}

.product-model {
  position: relative;
  padding: 34px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background:
    radial-gradient(circle at 88% 10%, rgba(98, 217, 255, 0.11), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.3);
}

.product-model::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #62d9ff;
}

.product-model--beta::before {
  content: none;
}

.product-model--gamma::before {
  background: #a78bfa;
}

.product-model-group--beta {
  position: relative;
  display: grid;
  gap: 22px;
}

.product-model-group--beta::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 3px;
  pointer-events: none;
  background: #37f0d0;
}

.product-model-header {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}

.product-model-index {
  margin: 0 0 8px;
  color: #62d9ff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.product-model--beta .product-model-index {
  color: #5fe7d4;
}

.product-model--gamma .product-model-index {
  color: #b8a7ff;
}

.product-model-header h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.12;
}

.product-model-lead {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1rem;
  line-height: 1.8;
}

.product-model-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border: 1px solid rgba(98, 217, 255, 0.28);
  border-radius: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: rgba(98, 217, 255, 0.08);
  color: #d9f7ff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.product-model-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 28px;
  align-items: stretch;
}

.product-model-layout--reverse .product-model-visual {
  order: 2;
}

.product-model-layout--reverse .product-model-specs {
  order: 1;
}

.product-model-visual {
  position: relative;
  display: flex;
  min-height: 430px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px;
  overflow: hidden;
  border: 1px dashed rgba(98, 217, 255, 0.32);
  border-radius: 24px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    rgba(4, 9, 20, 0.52);
  background-size: 34px 34px;
  text-align: center;
}

.product-model-visual::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 18px;
  pointer-events: none;
}

.product-model-visual span,
.product-model-visual strong,
.product-model-visual small {
  position: relative;
  z-index: 1;
}

.product-model-visual span {
  margin-bottom: 14px;
  color: #62d9ff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.product-model-visual strong {
  color: #ffffff;
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  line-height: 1.6;
}

.product-model-visual small {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.46);
  font-size: 0.76rem;
  line-height: 1.7;
}

.product-model-specs {
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  background: rgba(5, 8, 18, 0.4);
}

.product-model-specs h4 {
  margin: 0 0 18px;
  color: #ffffff;
  font-size: 1.1rem;
}

.product-spec-table {
  margin: 0;
}

.product-spec-table > div {
  display: grid;
  grid-template-columns: minmax(170px, 0.9fr) minmax(0, 1.1fr);
  gap: 20px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.product-spec-table dt,
.product-spec-table dd {
  margin: 0;
}

.product-spec-table dt {
  color: rgba(255, 255, 255, 0.54);
  font-size: 0.82rem;
  line-height: 1.6;
}

.product-spec-table dd {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.product-spec-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: 0.75rem;
  font-weight: 700;
}

.product-spec-status--built-in {
  border: 1px solid rgba(83, 224, 190, 0.28);
  background: rgba(83, 224, 190, 0.1);
  color: #8ff4dc;
}

.product-spec-status--external {
  border: 1px solid rgba(255, 190, 89, 0.28);
  background: rgba(255, 190, 89, 0.09);
  color: #ffd38c;
}

.product-model-feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid rgba(98, 217, 255, 0.14);
  border-radius: 18px;
  background: rgba(98, 217, 255, 0.045);
}

.product-model-feature span {
  color: #62d9ff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.product-model-feature p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  line-height: 1.85;
}

@media (max-width: 960px) {
  .product-model-layout,
  .product-model-layout--reverse {
    grid-template-columns: 1fr;
  }

  .product-model-layout--reverse .product-model-visual,
  .product-model-layout--reverse .product-model-specs {
    order: initial;
  }

  .product-model-visual {
    min-height: 340px;
  }
}

@media (max-width: 640px) {
  .product-lineup-grid--overview {
    margin-bottom: 38px;
  }

  .product-lineup-summary {
    grid-template-columns: 1fr;
  }

  .product-model {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .product-model-header {
    flex-direction: column;
    margin-bottom: 22px;
  }

  .product-model-header h3 {
    font-size: 2.2rem;
  }

  .product-model-visual {
    min-height: 260px;
    padding: 28px 20px;
    border-radius: 20px;
  }

  .product-model-specs {
    padding: 20px;
    border-radius: 20px;
  }

  .product-spec-table > div {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 11px 0;
  }

  .product-model-feature {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 18px;
  }
}


/* =========================================================
   KAMUI Lineup - Natural Implementation / Compact Review
   Overview cards removed. Slides 6-11 integrated in context.
========================================================= */

.product-lineup-heading {
  max-width: 1120px;
  margin-bottom: 22px;
}

.product-lineup-heading > p:not(.section-label) {
  max-width: 1120px;
  word-break: auto-phrase;
}

.product-model-list {
  gap: 22px;
}

.product-model {
  min-height: 0;
  padding: 22px;
  border-radius: 24px;
}

.product-model-header {
  margin-bottom: 14px;
}

.product-model-header h3 {
  margin-bottom: 4px;
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
}

.product-model-index {
  margin-bottom: 5px;
  font-size: 0.68rem;
}

.product-model-lead {
  font-size: 0.9rem;
  line-height: 1.65;
}

.product-model-badge {
  padding: 8px 13px;
  font-size: 0.76rem;
}

.product-model-layout,
.product-model-layout--reverse {
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 14px;
}

.product-model-layout--reverse .product-model-visual {
  order: 2;
}

.product-model-layout--reverse .product-model-specs {
  order: 1;
}

.product-model-visual--image {
  display: flex;
  min-height: 0;
  aspect-ratio: 16 / 9;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
  background: rgba(3, 7, 17, 0.72);
}

.product-model-visual--image::after {
  display: none;
}

.product-model-visual--image img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 12px;
}

.product-model-visual--image figcaption {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.62rem;
  line-height: 1.4;
  text-align: right;
}

.product-model-specs {
  padding: 14px 16px;
  border-radius: 18px;
}

.product-model-specs h4 {
  margin-bottom: 8px;
  font-size: 0.9rem;
}

.product-spec-table > div {
  min-height: 0;
  padding: 5px 0;
}

.product-spec-table dt,
.product-spec-table dd {
  font-size: 0.72rem;
  line-height: 1.45;
}

.product-spec-status {
  padding: 3px 7px;
  font-size: 0.62rem;
}

.product-model-feature {
  gap: 12px;
  margin-top: 10px;
  padding: 10px 13px;
  border-radius: 14px;
}

.product-model-feature span {
  font-size: 0.62rem;
}

.product-model-feature p {
  font-size: 0.75rem;
  line-height: 1.6;
}

.product-container-details {
  padding: 26px 0 4px;
}

.product-container-details-heading {
  max-width: 760px;
  margin-bottom: 18px;
}

.product-container-details-heading h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.product-container-details-heading > p:not(.section-label) {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .9rem;
  line-height: 1.75;
}

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

.product-system-card {
  display: grid;
  grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(98,217,255,.18);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  box-shadow: 0 24px 70px rgba(0,0,0,.24);
}

.product-system-card--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
}

.product-system-copy span {
  color: #62d9ff;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
}

.product-system-copy h4 {
  margin: 5px 0 7px;
  color: #fff;
  font-size: 1.1rem;
}

.product-system-copy p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: .75rem;
  line-height: 1.65;
}

.product-system-card figure {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(3,7,17,.7);
}

.product-system-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* KAMUI α: readable CAD views, specifications and cooling system */
.product-alpha-product-visual {
  display: grid;
  min-height: 430px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 24px 22px 18px;
  overflow: hidden;
  border: 1px solid rgba(98, 217, 255, 0.18);
  border-radius: 18px;
  background: #f2f5f8;
}

.product-alpha-product-visual figure {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
}

.product-alpha-product-visual img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: contain;
}

.product-alpha-product-visual figcaption {
  margin-top: 8px;
  color: var(--qm-product-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.product-model--alpha .product-alpha-product-visual {
  grid-template-columns: 1fr;
  gap: 0;
}

.product-model--alpha .product-alpha-product-visual figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}

.product-model--alpha .product-alpha-product-visual img {
  margin: 0 auto;
}

.product-model--alpha .product-alpha-product-labels {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

.product-model--alpha .product-model-specs {
  padding: 20px 22px;
}

.product-model--alpha .product-model-specs h4 {
  margin-bottom: 12px;
  font-size: 21px;
}

.product-model--alpha .product-spec-table > div {
  padding: 8px 0;
}

.product-model--alpha .product-spec-table dt,
.product-model--alpha .product-spec-table dd {
  font-size: 15px;
  line-height: 1.55;
}

.product-model--alpha .product-spec-status {
  font-size: 13px;
}

.product-model--alpha .product-model-feature {
  align-items: center;
  padding: 14px 17px;
}

.product-model--alpha .product-model-feature span {
  font-size: 13px;
}

.product-model--alpha .product-model-feature p {
  font-size: 16px;
  line-height: 1.6;
}

/* Keep KAMUI beta / gamma specifications and feature copy aligned with alpha. */
.product-model--beta .product-model-specs,
.product-model--gamma .product-model-specs {
  padding: 20px 22px;
}

.product-model--beta .product-model-specs h4,
.product-model--gamma .product-model-specs h4 {
  margin-bottom: 12px;
  font-size: 21px;
}

.product-model--beta .product-spec-table > div,
.product-model--gamma .product-spec-table > div {
  padding: 8px 0;
}

.product-model--beta .product-spec-table dt,
.product-model--beta .product-spec-table dd,
.product-model--gamma .product-spec-table dt,
.product-model--gamma .product-spec-table dd {
  font-size: 15px;
  line-height: 1.55;
}

.product-model--beta .product-spec-status,
.product-model--gamma .product-spec-status {
  font-size: 13px;
}

.product-model--beta .product-model-feature,
.product-model--gamma .product-model-feature {
  align-items: center;
  padding: 14px 17px;
}

.product-model--beta .product-model-feature span,
.product-model--gamma .product-model-feature span {
  font-size: 13px;
}

.product-model--beta .product-model-feature p,
.product-model--gamma .product-model-feature p {
  font-size: 16px;
  line-height: 1.6;
}

.product-alpha-cooling {
  margin-top: 14px;
  padding: 20px;
  border: 1px solid rgba(98, 217, 255, 0.18);
  border-radius: 18px;
  background: rgba(5, 8, 18, 0.34);
}

.product-alpha-technical-heading {
  margin-bottom: 14px;
}

.product-alpha-technical-heading > p:first-child:not(.qm-section-label) {
  margin: 0 0 5px;
  color: #62d9ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.product-alpha-technical-heading h4 {
  margin: 0;
  color: #ffffff;
  font-size: 20px;
  line-height: 1.4;
}

.product-alpha-cooling-visual {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #f2f5f8;
}

.product-alpha-cooling-copy {
  max-width: none;
  margin-bottom: 8px;
}

.product-alpha-cooling-copy .qm-section-label {
  margin-bottom: 7px;
}

.product-alpha-cooling-copy > p:last-child {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.75;
  word-break: auto-phrase;
}

.product-alpha-cooling {
  padding: 16px;
}

.product-alpha-cooling-visual {
  width: min(100%, 930px);
  margin-inline: auto;
  padding: 10px 40px;
  background: #f2f5f8;
}

.product-alpha-cooling-visual img {
  display: block;
  width: min(100%, 850px);
  height: auto;
  max-height: 420px;
  margin: 0 auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.product-model--alpha .product-alpha-cooling-diagram {
  position: relative;
  width: 118%;
  margin-inline: -9%;
}

.product-model--alpha .product-alpha-cooling-label {
  position: absolute;
  z-index: 2;
  max-width: 34%;
  padding: 4px 8px;
  border: 1px solid #1474c9;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.94);
  color: #10213a;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  transform: translate(-50%, -50%);
}

.product-model--alpha .product-alpha-cooling-label--red {
  border-color: #dc3545;
}

.product-model--alpha .product-alpha-cooling-label--heat {
  border-color: transparent;
  background: rgba(185, 35, 40, 0.88);
  color: #fff;
}

.product-model--alpha .product-alpha-cooling-label--groundwater { top: 11%; left: 70%; }
.product-model--alpha .product-alpha-cooling-label--groundwater-pump { top: 37%; left: 59%; }
.product-model--alpha .product-alpha-cooling-label--circulation-cold { top: 69%; left: 43%; }
.product-model--alpha .product-alpha-cooling-label--circulation-warm { top: 91%; left: 56%; }
.product-model--alpha .product-alpha-cooling-label--mixer { top: 72%; left: 68%; }
.product-model--alpha .product-alpha-cooling-label--discharge {
  top: 85%;
  left: 84%;
  white-space: nowrap;
}
.product-model--alpha .product-alpha-cooling-label--heat-exchanger { top: 67%; left: 28%; }

html[lang^="en"] .product-model--alpha .product-alpha-cooling-label {
  font-size: 13px;
}

html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--discharge {
  left: 80%;
  width: max-content;
  max-width: 30%;
  white-space: normal;
}

html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--circulation-cold {
  top: 56%;
  white-space: nowrap;
}

html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--mixer {
  top: 72%;
  left: 60%;
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

.product-model--alpha .product-alpha-cooling-legend {
  display: none;
}

.product-model--gamma .product-alpha-product-visual,
.product-model--gamma .product-alpha-cooling-visual {
  background: #ffffff;
}

@media (max-width: 960px) {
  .product-model-layout,
  .product-model-layout--reverse {
    grid-template-columns: 1fr;
  }

  .product-model-layout--reverse .product-model-visual,
  .product-model-layout--reverse .product-model-specs {
    order: initial;
  }

  .product-system-grid {
    grid-template-columns: 1fr;
  }

  .product-system-card,
  .product-system-card--wide {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .product-model {
    padding: 18px;
  }

  .product-model-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }

  .product-model-visual--image {
    aspect-ratio: auto;
  }

  .product-model-visual--image img {
    aspect-ratio: 16 / 10;
  }

  .product-model-specs {
    padding: 12px 14px;
  }

  .product-spec-table > div {
    grid-template-columns: minmax(0, 1fr) minmax(110px, .8fr);
  }

  .product-system-card,
  .product-system-card--wide {
    grid-template-columns: 1fr;
  }
}

/* Only the diagram scrolls; its heading and explanation stay in the card. */
.qm-chart-scroll-hint { display: none; }

@media (max-width: 1024px) {
  .qm-product-page .product-hero { background-image: url("../../images/Product/hero.png"); }
  .qm-product-page .product-hero .qm-subpage-hero__text { max-width: 44em; }
}

/* QuantumMesh infographic responsive */
@media (max-width: 900px) {
  .product-evidence-visual { min-height: 420px; }
}

@media (max-width: 640px) {
  .product-evidence-visual { min-width: 0; min-height: auto; max-width: 100%; padding: 24px 16px 18px; }
  .qm-infographic-heading { width: 100%; min-width: 0; padding: 0 4px; }
  .qm-chart-wrap { min-width: 0; max-width: 100%; margin-top: 8px; padding-bottom: 12px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; }
  .qm-chart-wrap:focus-visible { outline: 2px solid #0878e8; outline-offset: 2px; }
  .qm-chart-scroll-hint { display: block; width: 100%; margin: 4px 0; color: #28466a; font-size: 13px; line-height: 1.6; text-align: start; }
  .qm-chart { min-width: 560px; }
  .qm-chart--power { min-width: 600px; }
  .qm-infographic-insight { margin: 8px 4px 0; }
  .qm-cooling-legend { justify-content: flex-start; padding: 0 4px; }
}


/* =========================================================
   KAMUI Lineup Images
========================================================= */
.product-lineup-image {
  position: relative;
  display: flex;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  padding: 28px;
  border: 1px dashed rgba(98, 217, 255, 0.48);
  border-radius: 18px;
  background:
    linear-gradient(rgba(98, 217, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 217, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(47, 107, 255, 0.18), transparent 42%),
    rgba(3, 7, 17, 0.76);
  background-size: 28px 28px, 28px 28px, auto, auto;
  box-shadow: inset 0 0 42px rgba(0, 0, 0, 0.22);
}

.product-lineup-image::before,
.product-lineup-image::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  pointer-events: none;
}

.product-lineup-image::before {
  top: 14px;
  left: 14px;
  border-top: 1px solid #62d9ff;
  border-left: 1px solid #62d9ff;
}

.product-lineup-image::after {
  right: 14px;
  bottom: 14px;
  border-right: 1px solid #62d9ff;
  border-bottom: 1px solid #62d9ff;
}

.product-lineup-image--model {
  min-height: 360px;
  max-height: 430px;
}

.product-lineup-image--system {
  min-height: 170px;
}

.product-lineup-image img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

.product-lineup-image--model img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 374px;
}

.product-model-layout > .product-lineup-image {
  align-self: center;
}

.product-system-card > .product-lineup-image {
  width: 100%;
  background:
    linear-gradient(rgba(98, 217, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 217, 255, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 50% 45%, rgba(47, 107, 255, 0.18), transparent 42%),
    rgba(3, 7, 17, 0.76);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

@media (max-width: 960px) {
  .product-lineup-image--model {
    min-height: 240px;
  }

  .product-lineup-image--system {
    min-height: 210px;
  }
}

@media (max-width: 640px) {
  .product-lineup-image {
    padding: 24px 18px;
    border-radius: 15px;
  }

  .product-lineup-image--model,
.product-lineup-image--system {
    min-height: 200px;
  }
}

/* KAMUI beta: single-column system configuration */
.product-model--beta .product-model-layout > .product-lineup-image {
  background: #f2f5f8;
  background-size: auto;
  border: 0;
  box-shadow: none;
}

.product-model--beta .product-model-layout > .product-lineup-image::before,
.product-model--beta .product-model-layout > .product-lineup-image::after {
  content: none;
}

.product-container-details .product-system-card > .product-lineup-image {
  background: #f2f5f8;
  background-size: auto;
  border: 0;
  box-shadow: none;
}

.product-container-details .product-lineup-image::before,
.product-container-details .product-lineup-image::after {
  content: none;
}

.product-container-details {
  padding: 20px 0 2px 24px;
}

.product-container-details-heading {
  margin-bottom: 14px;
}

.product-container-details .product-system-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}

.product-container-details .product-system-card {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 16px;
}

.product-container-details .product-system-card--wide {
  grid-column: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.product-container-details .product-lineup-image--system {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 12px;
}

.product-container-details .product-system-copy {
  margin-bottom: 0;
}

.product-container-details .product-system-copy span {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.2em;
}

.product-container-details .product-system-copy h4 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

.product-container-details .product-system-copy p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  line-height: 1.75;
  word-break: auto-phrase;
}

.product-container-details .product-system-card img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 580px;
  aspect-ratio: auto;
  object-fit: contain;
}

.product-container-details .product-system-card:not(.product-system-card--wide) > .product-lineup-image {
  margin-top: 10px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-radius: 0;
}

.product-container-details .product-system-card:not(.product-system-card--wide) .product-system-copy p {
  margin-top: 8px;
}

.product-container-details .product-system-card:not(.product-system-card--wide) img {
  max-height: 404px;
  border-radius: 18px;
  background: #f2f5f8;
}

.product-container-details .product-system-card--wide .product-lineup-image--system {
  width: min(100%, 930px);
  margin-inline: auto;
  padding: 10px 40px;
}

.product-container-details .product-system-card--wide img {
  width: min(100%, 850px);
  max-height: 420px;
}

/* Desktop section-label viewport alignment */
@media (min-width: 1025px) {

  .qm-product-page .product-hero-inner {
    align-self: stretch;
    padding-top: 66px;
    padding-bottom: 66px;
  }

  .qm-product-page .product-hero-content {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-content: start;
    width: calc(100% + 40px);
    margin-top: 0;
    margin-left: -40px;
  }

  .qm-product-page .product-hero-label {
    grid-column: 1 / -1;
    transform: none;
  }

  .qm-product-page .product-hero-content > h1,
  .qm-product-page .product-hero-content > .product-hero-lead,
  .qm-product-page .product-hero-content > .product-hero-text,
  .qm-product-page .product-hero-content > .product-hero-actions {
    grid-column: 2;
    transform: none;
  }

  .qm-product-page .product-hero-content > h1 {
    margin-bottom: 18px;
  }

  .qm-product-page .product-hero-label.qm-section-label,
  .qm-product-page .product-intro .qm-section-label.qm-section-label,
  .qm-product-page .product-reason .qm-section-label.qm-section-label,
  .qm-product-page .product-lineup .qm-section-label.qm-section-label,
  .qm-product-page .product-technology .product-chapter-label.qm-section-label,
  .qm-product-page .product-patent .product-chapter-label.qm-section-label,
  .qm-product-page .product-movie .product-chapter-label.qm-section-label {
    font-size: 14px;
    letter-spacing: 2.4px;
  }
}

/* =========================================================
   KAMUI Lineup - light comparison layout
   Scoped to the lineup so adjacent product sections retain their styles.
========================================================= */
.qm-product-page .product-lineup {
  --lineup-ink: var(--qm-product-text);
  --lineup-muted: var(--qm-product-text);
  --lineup-panel: #ffffff;
  padding-top: 0;
  color: var(--lineup-ink);
  background: #f4f7fb;
}

/* Display the wide KAMUI artwork edge-to-edge without an additional overlay. */
.qm-product-page .product-hero.qm-photo-hero {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (min-width: 1025px) {
  .qm-product-page .product-hero.qm-photo-hero.qm-photo-hero::after {
    background: none;
    content: none;
  }
}

@media (min-width: 1025px) {
  html[lang^="ja"] .qm-product-page .product-challenge-intro-line {
    display: block;
    white-space: nowrap;
  }
}

@media (max-width: 850px) {
  .qm-product-page .product-hero.qm-photo-hero {
    background-position: 80% center;
    background-size: cover;
  }
}

.qm-product-page .product-lineup .container {
  width: min(1180px, calc(100% - 48px));
}

.qm-product-page .product-lineup .product-model-index {
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup .qm-section-label {
  color: #0867d7;
}

.qm-product-page .product-lineup .qm-section-label::before {
  background: #0867d7;
}

.qm-product-page .product-lineup-heading {
  margin-bottom: 30px;
}

.qm-product-page .product-lineup-heading h2 {
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup-heading > p:not(.section-label) {
  max-width: 760px;
  color: var(--lineup-muted);
}

.product-lineup-quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 42px;
}

.product-lineup-quick-card {
  --model-color: #62d9ff;
  position: relative;
  min-width: 0;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #dceaf1;
  border-radius: 18px;
  background: var(--lineup-panel);
  box-shadow: 0 12px 30px rgba(34, 75, 105, .08);
}

.product-lineup-quick-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--model-color);
}

.product-lineup-quick-card--beta { --model-color: #37f0d0; }
.product-lineup-quick-card--gamma { --model-color: #a78bfa; }

.product-lineup-quick-card h3 {
  margin: 9px 0 8px;
  color: var(--lineup-ink);
  font-size: 24px;
}

.product-lineup-model-mark {
  display: inline-flex;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--model-color) 62%, #b8c8d4);
  border-radius: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--model-color) 16%, #fff);
  color: var(--lineup-ink);
  line-height: 1.15;
}

.product-lineup-quick-type,
.product-lineup-quick-feature {
  margin: 0;
  color: var(--lineup-muted);
  font-size: 13px;
  line-height: 1.7;
  word-break: auto-phrase;
}

.product-lineup-quick-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 12px;
}

.product-lineup-quick-specs span {
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--model-color) 62%, #b8c8d4);
  border-radius: 6px;
  max-width: 100%;
  overflow-wrap: anywhere;
  background: color-mix(in srgb, var(--model-color) 20%, #f4f8fa);
  color: var(--lineup-ink);
  font-size: 12px;
  font-weight: 700;
}

@media (min-width: 851px) {
  .product-lineup-quick-card {
    display: grid;
    grid-template-rows: 28px 52px 60px 62px auto;
    align-content: start;
  }

  .product-lineup-quick-card .product-model-index { font-size: 15px; line-height: 1.4; }
  .product-lineup-quick-type { font-size: 15px; line-height: 1.7; }
  .product-lineup-quick-specs span { font-size: 16px; line-height: 1.4; }
  .product-lineup-quick-feature { font-size: 15px; line-height: 1.7; }
}

.qm-product-page .product-lineup .product-model-list { gap: 28px; }

.qm-product-page .product-lineup .product-model,
.qm-product-page .product-lineup .product-model-group--beta {
  --model-color: #62d9ff;
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dbe9f0;
  border-radius: 22px;
  background: var(--lineup-panel);
  box-shadow: 0 16px 38px rgba(34, 75, 105, .09);
}

.qm-product-page .product-lineup .product-model::before,
.qm-product-page .product-lineup .product-model-group--beta::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--model-color);
}

.qm-product-page .product-lineup .product-model--beta,
.qm-product-page .product-lineup .product-model-group--beta { --model-color: #37f0d0; }
.qm-product-page .product-lineup .product-model--gamma { --model-color: #a78bfa; }

.qm-product-page .product-lineup .product-model-group--beta {
  display: block;
}

.qm-product-page .product-lineup .product-model-group--beta .product-model {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.qm-product-page .product-lineup .product-model-group--beta .product-model::before { content: none; }

.qm-product-page .product-lineup .product-model-header {
  margin: 0;
  padding: 22px 26px;
  background: color-mix(in srgb, var(--model-color) 13%, #f7fbfd);
}

.qm-product-page .product-lineup .product-model-header h3 {
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup .product-model-lead { color: var(--lineup-muted); }

.qm-product-page .product-lineup .product-model-badge {
  border-color: color-mix(in srgb, var(--model-color) 62%, #b8c8d4);
  background: #fff;
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup .product-model-layout {
  padding: 20px 22px 0;
}

.qm-product-page .product-lineup .product-alpha-product-visual,
.qm-product-page .product-lineup .product-lineup-image,
.qm-product-page .product-lineup .product-alpha-cooling-visual {
  border: 0;
  background: #edf6fa;
  box-shadow: none;
}

.qm-product-page .product-lineup .product-lineup-image::before,
.qm-product-page .product-lineup .product-lineup-image::after { content: none; }

.qm-product-page .product-lineup .product-alpha-product-visual { min-height: 360px; }
.qm-product-page .product-lineup .product-alpha-product-visual img { height: 290px; }
.qm-product-page .product-lineup .product-model--alpha .product-alpha-product-visual img { height: 340px; }

.qm-product-page .product-lineup .product-model-specs {
  border: 0;
  background: #f7fafc;
}

.qm-product-page .product-lineup .product-model-specs h4,
.qm-product-page .product-lineup .product-spec-table dt,
.qm-product-page .product-lineup .product-spec-table dd { color: var(--lineup-ink); }

.qm-product-page .product-lineup .product-spec-table > div { border-color: #dce7ed; }

.qm-product-page .product-lineup .product-spec-status {
  border-color: color-mix(in srgb, var(--model-color) 62%, #b8c8d4);
  background: color-mix(in srgb, var(--model-color) 14%, #fff);
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup .product-model-feature {
  margin: 14px 22px 0;
  border: 0;
  background: color-mix(in srgb, var(--model-color) 12%, #f6fafc);
}

.qm-product-page .product-lineup .product-model-feature span { color: var(--lineup-ink); }
.qm-product-page .product-lineup .product-model-feature p { color: var(--lineup-muted); }

.qm-product-page .product-lineup .product-alpha-cooling {
  display: grid;
  grid-template-columns: minmax(380px, .7fr) minmax(0, 1.3fr);
  gap: 22px;
  align-items: center;
  margin: 14px 22px 22px;
  padding: 16px;
  border: 0;
  background: #eef6fa;
}

.qm-product-page .product-lineup .product-alpha-technical-heading h4 { color: var(--lineup-ink); }
.qm-product-page .product-lineup .product-alpha-cooling-copy > p:last-child { color: var(--lineup-muted); }
.qm-product-page .product-lineup .product-alpha-cooling-visual { padding: 6px 10px; background: #fff; }
.qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-visual img { max-height: 470px; }

.qm-product-page .product-lineup .product-container-details {
  padding: 22px;
  border-top: 1px solid #dce9ef;
  background: #f4fafc;
}

.qm-product-page .product-lineup .product-container-details-heading { max-width: 820px; }
.qm-product-page .product-lineup .product-container-details-heading h3 { color: var(--lineup-ink); }
.qm-product-page .product-lineup .product-container-details-heading > p:not(.section-label) { color: var(--lineup-muted); }

.qm-product-page .product-lineup .product-container-details .product-system-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.qm-product-page .product-lineup .product-container-details .product-system-card,
.qm-product-page .product-lineup .product-container-details .product-system-card--wide {
  grid-column: auto;
  grid-template-columns: 1fr;
  grid-template-rows: auto 210px;
  align-content: space-between;
  padding: 16px;
  border: 1px solid #dce9ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(34, 75, 105, .06);
}

.qm-product-page .product-lineup .product-system-copy span { color: #148c7c; }
.qm-product-page .product-lineup .product-system-copy h4 { color: var(--lineup-ink); }
.qm-product-page .product-lineup .product-container-details .product-system-copy p { color: var(--lineup-muted); }

.qm-product-page .product-lineup .product-container-details .product-lineup-image--system,
.qm-product-page .product-lineup .product-container-details .product-system-card--wide .product-lineup-image--system,
.qm-product-page .product-lineup .product-container-details .product-system-card:not(.product-system-card--wide) > .product-lineup-image {
  width: 100%;
  height: 210px;
  min-height: 0;
  margin: 0;
  padding: 10px;
  overflow: hidden;
  border-radius: 12px;
  background: #edf6fa;
}

.qm-product-page .product-lineup .product-container-details .product-system-card img,
.qm-product-page .product-lineup .product-container-details .product-system-card:not(.product-system-card--wide) img,
.qm-product-page .product-lineup .product-container-details .product-system-card--wide img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}

@media (max-width: 850px) {
  .qm-product-page .product-lineup { padding-top: 0; }
  .product-lineup-intro-break { display: none; }
  .product-lineup-quick-type-break { display: none; }
  .product-lineup-quick-break { display: none; }
  .product-lineup-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qm-product-page .product-lineup .product-model-layout { grid-template-columns: 1fr; }
  .qm-product-page .product-lineup .product-alpha-cooling { grid-template-columns: 1fr; }
  .product-alpha-cooling-copy-break { display: none; }
  .product-model--alpha .product-alpha-cooling-diagram { width: 100%; margin-inline: 0; }
  .product-model--alpha .product-alpha-cooling-label { max-width: 27%; padding: 3px 6px; font-size: clamp(9px, 1.4vw, 12px); }
  .product-model--alpha .product-alpha-cooling-label--discharge { left: 86%; white-space: normal; }
  .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-visual img { max-height: 420px; }
  .qm-product-page .product-lineup .product-model--alpha .product-alpha-product-visual img { height: 300px; }
  .qm-product-page .product-lineup .product-container-details .product-system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 500px) {
  .qm-product-page .product-lineup .container { width: min(100% - 32px, 1180px); }
  .product-lineup-quick { grid-template-columns: 1fr; gap: 14px; }
  .qm-product-page .product-lineup .product-model-header { padding: 20px; }
  .qm-product-page .product-lineup .product-model-layout { padding: 16px 16px 0; }
  .qm-product-page .product-lineup .product-alpha-product-visual { min-height: 260px; padding: 16px 10px; }
  .qm-product-page .product-lineup .product-alpha-product-visual img { height: 210px; }
  .qm-product-page .product-lineup .product-model--alpha .product-alpha-product-visual img { height: 210px; }
  .qm-product-page .product-lineup .product-model-feature { margin-inline: 16px; }
  .qm-product-page .product-lineup .product-alpha-cooling { margin: 14px 16px 16px; }
  .qm-product-page .product-lineup .product-container-details { padding: 18px 16px; }
  .qm-product-page .product-lineup .product-container-details .product-system-grid { grid-template-columns: 1fr; }
  .qm-product-page .product-lineup .product-spec-table > div { grid-template-columns: minmax(0, 1fr) minmax(92px, .72fr); }
}

@media (max-width: 540px) {
  .product-model--alpha .product-alpha-cooling-labels { display: none; }
  .product-model--alpha .product-alpha-cooling-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin-top: 10px;
    color: var(--qm-product-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
  }
  .product-model--alpha .product-alpha-cooling-legend-item {
    min-width: 0;
    padding-left: 7px;
    border-left: 2px solid #1474c9;
  }
  .product-model--alpha .product-alpha-cooling-legend-item--red { border-left-color: #dc3545; }
  .product-model--alpha .product-alpha-cooling-legend-item--heat { border-left-color: #9f252b; }
}

/* KAMUI beta: product, container and cooling-system presentation */
.qm-product-page .product-lineup .product-model--beta .product-model-layout {
  align-items: stretch;
}

.qm-product-page .product-lineup .product-model--beta .product-beta-product-visual {
  display: flex;
  min-height: 430px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  overflow: hidden;
}

.qm-product-page .product-lineup .product-model--beta .product-beta-product-visual img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 450px;
  object-fit: contain;
}

.qm-product-page .product-lineup .product-container-details .product-system-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.qm-product-page .product-lineup .product-container-details .product-system-card {
  grid-template-rows: minmax(145px, auto) auto;
  height: 100%;
}

.qm-product-page .product-lineup .product-container-details .product-system-card > .product-lineup-image--system,
.qm-product-page .product-lineup .product-container-details .product-system-card:not(.product-system-card--wide) > .product-lineup-image {
  height: auto;
  aspect-ratio: 1586 / 992;
  padding: 0;
  background: #edf6fa;
}

.qm-product-page .product-lineup .product-container-details .product-system-card img,
.qm-product-page .product-lineup .product-container-details .product-system-card:not(.product-system-card--wide) img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
}

.qm-product-page .product-lineup .product-beta-cooling {
  display: grid;
  grid-template-columns: minmax(240px, 30fr) minmax(0, 70fr);
  gap: 20px;
  align-items: center;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dce9ef;
  border-radius: 18px;
  background: #eef6fa;
  box-shadow: 0 8px 20px rgba(34, 75, 105, .06);
}

.qm-product-page .product-lineup .product-beta-cooling-copy h4 {
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup .product-beta-cooling-copy p {
  color: var(--lineup-muted);
}

.product-beta-cooling-visual {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 8px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.product-beta-cooling-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1838 / 856;
}

.product-beta-cooling-diagram > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Cooling previews share one body-level dialog; normal figure sizes stay intact. */
.product-alpha-cooling,
.product-beta-cooling,
.product-gamma-cooling {
  position: relative;
}

.product-cooling-trigger { cursor: zoom-in; }
.product-cooling-trigger:focus-visible {
  outline: 3px solid #1474e8;
  outline-offset: 3px;
}

.product-lineup .product-cooling-hint {
  position: absolute;
  right: 18px;
  bottom: -16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 8px;
  border: 1px solid #c5dcf2;
  border-radius: 6px;
  background: #fff;
  color: var(--qm-color-primary-dark);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  cursor: zoom-in;
}

.product-cooling-hint svg { width: 18px; height: 18px; flex: 0 0 auto; }
.product-lineup .product-cooling-hint:hover,
.product-lineup .product-cooling-hint:focus { background: #fff; color: var(--qm-color-primary-dark); }
.product-lineup .product-cooling-hint:focus-visible { outline: 3px solid #1474e8; outline-offset: 2px; }

@media (max-width: 500px) {
  .product-lineup .product-cooling-hint {
    bottom: -14px;
    padding-block: 2px;
    font-size: 14px;
    line-height: 18px;
  }
}

.product-cooling-preview {
  position: fixed;
  inset: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  color: #10213a;
  z-index: 100000;
  pointer-events: auto;
}

.product-cooling-preview[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-cooling-preview::backdrop { background: rgba(8, 24, 40, .65); }

.product-cooling-preview__panel {
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 48px rgba(8, 24, 40, .3);
  pointer-events: auto;
}

.product-cooling-preview__toolbar {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 8px 4px 16px;
  background: #edf6fa;
  font-size: 14px;
  line-height: 1.4;
}

.product-cooling-preview__close {
  flex: 0 0 auto;
  min-width: 88px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #738da3;
  border-radius: 6px;
  background: #fff;
  color: #10213a;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
}

.product-cooling-preview__close:focus-visible {
  outline: 3px solid #1474e8;
  outline-offset: 1px;
}

.product-cooling-preview__viewport { position: relative; }
.product-cooling-preview__stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
}

.product-beta-cooling-label {
  position: absolute;
  z-index: 2;
  max-width: 25%;
  padding: 3px 6px;
  border: 1px solid #1a3858;
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 7px rgba(23, 50, 76, .16);
  color: #102a43;
  font-size: clamp(8px, .72vw, 11px);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  transform: translate(-50%, -50%);
}

.product-beta-cooling-label--blue { border-color: #1474c9; }
.product-beta-cooling-label--red { border-color: #dc3545; }
.product-beta-cooling-label--oil { border-color: #0ba8a0; }

.product-beta-cooling-label--facility-container { top: 8%; left: 39%; }
.product-beta-cooling-label--server-container { top: 48%; left: 43%; }
.product-beta-cooling-label--gpu-server { top: 63%; left: 42%; }
.product-beta-cooling-label--heat-exchanger { top: 31%; left: 31%; }
.product-beta-cooling-label--circulation-blue { top: 27%; left: 61%; }
.product-beta-cooling-label--circulation-red { top: 49%; left: 73%; }
.product-beta-cooling-label--mixer { top: 35%; left: 83%; }
.product-beta-cooling-label--discharge { top: 52%; left: 87%; }
.product-beta-cooling-label--groundwater-pump { top: 66%; left: 87%; }
.product-beta-cooling-label--groundwater { top: 87%; left: 78%; }

html[lang^="en"] .product-beta-cooling-label--circulation-blue,
html[lang^="en"] .product-beta-cooling-label--circulation-red {
  white-space: nowrap;
}

html[lang^="en"] .product-beta-cooling-label--circulation-red {
  top: 48%;
  left: 68%;
}

html[lang^="en"] .product-beta-cooling-label--groundwater-pump {
  top: 70%;
}

@media (max-width: 900px) {
  html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--circulation-cold {
    top: 52%;
    left: 25%;
  }

  html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--circulation-warm {
    top: 92%;
    left: 48%;
  }

  html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--mixer {
    top: 70%;
    left: 60%;
    width: max-content;
    max-width: none;
    white-space: nowrap;
  }

  html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--discharge {
    top: 100%;
    left: 87%;
    width: 25%;
    max-width: 25%;
  }

  html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--heat-exchanger {
    top: 72%;
    left: 2%;
  }

  html[lang^="en"] .product-model--alpha .product-alpha-cooling-label--groundwater-pump {
    top: 32%;
    left: 25%;
  }

  html[lang^="en"] .product-beta-cooling-label--circulation-red {
    top: 47%;
    left: 70%;
  }

  html[lang^="en"] .product-beta-cooling-label--mixer {
    top: 20%;
    left: 84%;
  }

  html[lang^="en"] .product-beta-cooling-label--discharge {
    top: 54%;
    left: 88%;
  }

  html[lang^="en"] .product-beta-cooling-label--groundwater-pump {
    top: 82%;
    left: 88%;
  }

  html[lang^="en"] .product-beta-cooling-label--groundwater {
    left: 68%;
  }
}

.product-beta-cooling-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 7px;
  padding: 0 4px 2px;
  color: var(--qm-product-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.product-beta-cooling-legend-item {
  min-width: 0;
  padding-left: 7px;
  border-left: 3px solid;
}

.product-beta-cooling-legend-item--warm-water { border-color: #e22d36; }
.product-beta-cooling-legend-item--cold-water { border-color: #1474e8; }
.product-beta-cooling-legend-item--warm-oil { border-color: #d91cd6; }
.product-beta-cooling-legend-item--cool-oil { border-color: #00cbd8; }

@media (max-width: 850px) {
  .qm-product-page .product-lineup .product-model--beta .product-beta-product-visual {
    min-height: 420px;
    order: 0;
  }

  .qm-product-page .product-lineup .product-model--beta .product-model-specs {
    order: 1;
  }

  .qm-product-page .product-lineup .product-container-details .product-system-grid {
    grid-template-columns: 1fr;
  }

  .qm-product-page .product-lineup .product-container-details .product-system-card {
    grid-template-rows: auto auto;
  }

  .qm-product-page .product-lineup .product-beta-cooling {
    grid-template-columns: 1fr;
  }

  .product-beta-cooling-label {
    max-width: 24%;
    padding: 2px 5px;
    font-size: clamp(7px, 1.25vw, 10px);
  }

  .product-beta-cooling-label--discharge {
    top: 54%;
    left: 91%;
    max-width: 18%;
  }
}

/* KAMUI gamma: integrated product image and cooling system */
.qm-product-page .product-lineup .product-model--gamma .product-gamma-product-visual {
  display: flex;
  min-width: 0;
  min-height: 410px;
  align-items: center;
  justify-content: center;
  padding: 14px 20px 12px;
  overflow: hidden;
  border-radius: 18px;
  background: #edf6fa;
}

.product-gamma-product-visual figure {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-rows: minmax(0, 1fr) auto;
  margin: 0;
}

.product-gamma-product-visual img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: contain;
}

.product-gamma-product-labels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
  color: var(--qm-product-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: center;
}

.qm-product-page .product-lineup .product-gamma-cooling {
  display: grid;
  grid-template-columns: minmax(240px, 30fr) minmax(0, 70fr);
  gap: 20px;
  align-items: center;
  margin: 14px 22px 22px;
  padding: 18px;
  border: 0;
  border-radius: 18px;
  background: #eef6fa;
}

.qm-product-page .product-lineup .product-gamma-cooling-copy h4 {
  color: var(--lineup-ink);
}

.qm-product-page .product-lineup .product-gamma-cooling-copy > p:last-child {
  color: var(--lineup-muted);
}

.product-gamma-cooling-visual {
  min-width: 0;
  margin: 0;
  padding: 8px;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}

.product-gamma-cooling-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 1792 / 878;
}

.product-gamma-cooling-diagram > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-gamma-cooling-label {
  position: absolute;
  z-index: 2;
  max-width: 26%;
  padding: 6px 10px;
  border: 1px solid #1a3858;
  border-radius: 5px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 7px rgba(23, 50, 76, .16);
  color: #102a43;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transform: translate(-50%, -50%);
}

.product-gamma-cooling-label--chiller { top: 22%; left: 31%; border-color: #d3a600; }
.product-gamma-cooling-label--immersion-tank { top: 22%; left: 64%; border-color: #8b5cf6; }
.product-gamma-cooling-label--heat-exchanger { top: 70%; left: 31%; border-color: #dc3545; }
.product-gamma-cooling-label--pump { top: 70%; left: 53%; border-color: #00aeca; }

.product-gamma-cooling-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 7px;
  padding: 0 4px 2px;
  color: var(--qm-product-text);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.product-gamma-cooling-legend-item {
  min-width: 0;
  padding-left: 7px;
  border-left: 3px solid;
}

.product-gamma-cooling-legend-item--equipment { display: none; }
.product-gamma-cooling-legend-item--chiller { border-color: #d3a600; }
.product-gamma-cooling-legend-item--immersion-tank { border-color: #8b5cf6; }
.product-gamma-cooling-legend-item--heat-exchanger { border-color: #dc3545; }
.product-gamma-cooling-legend-item--pump { border-color: #00aeca; }
.product-gamma-cooling-legend-item--warm-water { border-color: #e22d36; }
.product-gamma-cooling-legend-item--cold-water { border-color: #1474e8; }
.product-gamma-cooling-legend-item--warm-oil { border-color: #d91cd6; }
.product-gamma-cooling-legend-item--cool-oil { border-color: #00cbd8; }

@media (max-width: 850px) {
  .qm-product-page .product-lineup .product-model--gamma .product-gamma-product-visual {
    min-height: 420px;
  }

  .product-gamma-product-visual img {
    height: 370px;
  }

  .qm-product-page .product-lineup .product-gamma-cooling {
    grid-template-columns: 1fr;
  }

  .product-gamma-cooling-label {
    max-width: 27%;
    padding: 5px 8px;
    font-size: 12px;
  }
}

@media (max-width: 500px) {
  .qm-product-page .product-lineup .product-model--gamma .product-gamma-product-visual {
    min-height: 260px;
    padding: 10px 8px;
  }

  .product-gamma-product-visual img {
    height: 225px;
  }

  .product-gamma-product-labels {
    margin-top: 5px;
    font-size: 10px;
  }

  .qm-product-page .product-lineup .product-gamma-cooling {
    gap: 12px;
    margin: 14px 16px 16px;
    padding: 12px;
  }

  .product-gamma-cooling-visual {
    width: 100%;
    padding: 5px;
  }

  .product-gamma-cooling-labels {
    display: none;
  }

  .product-gamma-cooling-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    margin-top: 9px;
    font-size: 10px;
  }

  .product-gamma-cooling-legend-item--equipment {
    display: block;
  }
}

@media (max-width: 500px) {
  .qm-product-page .product-lineup .product-model--beta .product-beta-product-visual {
    min-height: 300px;
    padding: 10px 16px;
  }

  .qm-product-page .product-lineup .product-model--beta .product-beta-product-visual img {
    max-height: 330px;
  }

  .qm-product-page .product-lineup .product-beta-cooling {
    gap: 12px;
    padding: 12px;
  }

  .product-beta-cooling-visual {
    width: 100%;
    padding: 5px;
  }

  .product-beta-cooling-labels {
    display: none;
  }

  .product-beta-cooling-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 10px;
    margin-top: 9px;
    font-size: 10px;
  }
}

/* Keep alpha's labels inside its narrow desktop column without resizing it. */
@media (min-width: 851px) and (max-width: 960px) {
  .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label {
    padding: 2px 3px;
    font-size: 7.5px;
  }

  .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--discharge {
    left: 75%;
    top: 85%;
    width: max-content;
    max-width: 22%;
    white-space: normal;
  }

  html[lang^="en"] .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--heat-exchanger { left: 28%; top: 67%; }
  html[lang^="en"] .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--groundwater-pump { left: 59%; top: 37%; }
  html[lang^="en"] .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--circulation-cold { left: 43%; top: 56%; }
  html[lang^="en"] .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--circulation-warm { left: 56%; top: 91%; }
  html[lang^="en"] .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--discharge { top: 91%; max-width: 18%; }
  html[lang^="en"] .qm-product-page .product-lineup .product-model--alpha .product-alpha-cooling-label--mixer {
    left: 60%;
    top: 72%;
    width: max-content;
    max-width: 30%;
    white-space: normal;
  }
}