/* B pattern: a store work scene stays at full opacity under a separate veil. */
html body .fv4ref--supplied-art .fv4ref-main {
  background: #edf6ff !important;
}

html body .fv4ref--supplied-art .fv4ref-main::before,
html body .fv4ref--supplied-art .fv4ref-main::after,
html body .fv4ref--supplied-art .fv4ref-navy {
  display: none !important;
}

html body .fv4ref--supplied-art .fv4ref-main > picture {
  display: block !important;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
}

html body .fv4ref--supplied-art .fv4ref-main > picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .97) 0%,
    rgba(255, 255, 255, .94) 33%,
    rgba(255, 255, 255, .84) 46%,
    rgba(255, 255, 255, .42) 61%,
    rgba(255, 255, 255, .24) 78%,
    rgba(255, 255, 255, .20) 100%);
}

html body .fv4ref--supplied-art .fv4ref-tablet {
  position: static !important;
  display: block !important;
  inset: auto !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  transform: scale(1.06) !important;
  transform-origin: 85% 100%;
  filter: none !important;
  opacity: 1 !important;
  object-fit: cover;
  object-position: center 45%;
}

/* Shared content rows keep each heading, value + unit, and caption in its circle. */
html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge {
  --badge-title-height: 40px;
  --badge-number-height: 70px;
  --badge-foot-height: 20px;
  display: grid !important;
  grid-template-rows: var(--badge-title-height) var(--badge-number-height) var(--badge-foot-height);
  align-content: center;
  align-items: center;
  justify-items: center;
  padding: 0 8px !important;
}

html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t1,
html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t2,
html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t3,
html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge.is-subsidy > img {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t1 {
  grid-row: 1;
  width: 100%;
  height: 100%;
  line-height: 1.2 !important;
  text-align: center;
}

html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t2 {
  grid-row: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  font-size: 62px;
  line-height: 1;
  white-space: nowrap;
}

html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t2 small {
  position: static;
  inset: auto;
  margin: 0;
  font-size: 18px;
  line-height: 1;
}

html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t3 {
  grid-row: 3;
  line-height: 1;
}

html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge.is-subsidy > img {
  grid-row: 2 / 4;
  width: 100px;
  height: auto;
  max-height: calc(var(--badge-number-height) + var(--badge-foot-height));
  object-fit: contain;
}

/* Keep the reading directly under the official product logo. */
html body .fv4ref--supplied-art .fv4ref-product-row {
  width: max-content;
  max-width: 100%;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

html body .fv4ref--supplied-art .fv4ref-product-ruby {
  width: 100%;
  margin: 0;
  text-align: center;
  line-height: 1.2;
}

@media (min-width: 769px) {
  html body .fv4ref--supplied-art .fv4ref-badges {
    left: calc(var(--fv-guide-right-stage) - 628px);
    gap: 20px;
  }

  html body .fv4ref--supplied-art .fv4ref-badge {
    width: 196px;
    height: 196px;
  }

  /* Keep the artwork within the visible viewport of the fixed 1920px canvas. */
  html body .fv4ref--supplied-art .fv4ref-main > picture {
    position: absolute !important;
    inset: 0 auto auto 50% !important;
    width: min(100vw, 1920px) !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 768px) {
  html body .fv4ref--supplied-art .fv4ref-main {
    background: linear-gradient(#fff 0%, #f3f9ff 48%, #dcedfc 100%) !important;
  }

  html body .fv4ref--supplied-art .fv4ref-main > picture {
    grid-area: device;
    position: relative !important;
    inset: auto auto auto 50% !important;
    width: 100vw !important;
    max-width: none !important;
    height: clamp(280px, 80vw, 420px) !important;
    margin: 6px 0 0 !important;
    transform: translateX(-50%) !important;
    mask-image: linear-gradient(transparent, #000 7%, #000 91%, transparent);
  }

  html body .fv4ref--supplied-art .fv4ref-tablet {
    object-position: right center;
    transform-origin: 75% 70%;
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badges {
    width: min(calc(100vw - 24px), 444px);
    max-width: none;
    margin-inline: 0;
    justify-self: center;
    gap: 6px;
    justify-content: center;
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge {
    --badge-title-height: clamp(24px, 6.5vw, 30px);
    --badge-number-height: clamp(46px, 12vw, 56px);
    --badge-foot-height: clamp(12px, 3.1vw, 16px);
    width: min(calc((100vw - 36px) / 3), 144px);
    height: min(calc((100vw - 36px) / 3), 144px);
    padding: 0 4px !important;
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t1 {
    font-size: clamp(9.5px, 2.6vw, 12px);
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge.is-subsidy > .t1 {
    font-size: clamp(8.5px, 2.3vw, 11px);
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t2 {
    font-size: clamp(34px, 9.6vw, 46px);
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge > .t2 small {
    font-size: clamp(10px, 2.8vw, 13px);
  }

  html body section.fv4ref.fv4ref--supplied-art .fv4ref-badge.is-subsidy > img {
    width: clamp(62px, 17vw, 78px);
  }

  html body .fv4ref--supplied-art .fv4ref-product-row {
    margin-inline: auto !important;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
  }

  html body .fv4ref--supplied-art .fv4ref-product-ruby {
    width: auto;
    margin: 0;
    font-size: clamp(10px, 2.8vw, 12px);
  }

  html body .fv4ref--supplied-art .fv4ref-main > picture::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, .34),
      rgba(255, 255, 255, .12) 35%,
      rgba(255, 255, 255, .12) 72%,
      rgba(255, 255, 255, .34));
  }
}