/* Product category video background; the hero and card interactions remain independent. */
html[data-palette] .factory-home > section.popular-categories.yx-category-video-screen {
  --yx-glass-light: linear-gradient(145deg, #ffffff38, #f8fbf924);
  --yx-glass-light-hover: linear-gradient(145deg, #ffffff47, #f8fbf933);
  --yx-glass-dark: linear-gradient(115deg, #10221b80, #1526235c);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: calc(100% - 32px);
  margin: 48px 16px 0;
  padding: 48px 0 44px;
  border: 10px solid #222a2c;
  border-top-color: #313a3d;
  border-left-color: #293235;
  border-right-color: #151c1f;
  border-bottom: 28px solid #293235;
  border-radius: 9px;
  background: #172021;
  box-shadow: 0 1px 0 #6b7375 inset, 0 0 0 1px #111a1c, 0 20px 38px -28px #17202190;
}

/* The wider lower bezel carries only a quiet nameplate and status light. */
html[data-palette] .yx-category-video-screen::before {
  content: "";
  position: absolute;
  right: 25px;
  bottom: -17px;
  z-index: 4;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #49ed76;
  box-shadow: 0 0 4px #49ed76b3, 0 0 9px #49ed7640;
  pointer-events: none;
}

html[data-palette] .yx-category-video-screen::after {
  content: "YANXUN DISPLAY";
  position: absolute;
  left: 50%;
  bottom: -22px;
  z-index: 4;
  transform: translateX(-50%);
  color: #b1b9b9;
  font: 600 8px/12px "Segoe UI", sans-serif;
  letter-spacing: 2.3px;
  white-space: nowrap;
  pointer-events: none;
}

html[data-palette] .yx-category-video-screen .yx-category-video-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: 1px;
  background: #172021;
  pointer-events: none;
}

html[data-palette] .yx-category-video-screen .yx-category-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 1;
  filter: none;
}

html[data-palette] .factory-home .yx-category-video-screen > .container {
  position: relative;
  z-index: 1;
  width: min(1400px, calc(100% - 120px));
  margin-inline: auto;
}

html[data-palette] .factory-home .yx-category-video-screen h2 {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: min(1120px, calc(100% - 100px));
  margin: 0 0 30px;
  color: #fff;
  text-shadow: 0 1px 12px #08101065;
}

/* Frost only the backing surface; the heading itself remains sharp. */
html[data-palette] .factory-home .yx-category-video-screen h2::after {
  content: "";
  position: absolute;
  inset: -18px -35px -18px -26px;
  z-index: -1;
  border: 1px solid #ffffff35;
  border-radius: 9px;
  background: var(--yx-glass-dark);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 1px 0 #ffffff26, 0 8px 24px #06151312;
  pointer-events: none;
}

html[data-palette] .factory-home .yx-category-video-screen .category-card-grid {
  position: relative;
  gap: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

html[data-palette] .factory-home .yx-category-video-screen .category-card {
  min-height: 354px;
  gap: 20px;
  padding: 26px 22px 20px;
  border: 1px solid #ffffff70;
  border-radius: 7px;
  background: var(--yx-glass-light);
  -webkit-backdrop-filter: blur(8px) saturate(105%);
  backdrop-filter: blur(8px) saturate(105%);
  box-shadow: inset 0 1px 0 #ffffff70, 0 8px 24px #07101316;
}

html[data-palette] .factory-home .popular-categories.yx-category-video-screen .category-card:hover,
html[data-palette] .factory-home .popular-categories.yx-category-video-screen .category-card.yx-product-focused {
  background: var(--yx-glass-light-hover);
}

html[data-palette] .factory-home .yx-category-video-screen .category-card-media,
html[data-palette] .factory-home .yx-category-video-screen .category-product-photo {
  background: transparent;
  border-radius: 5px;
}

/* Preserve the opaque product colours while its cutout background stays transparent. */
html[data-palette] .factory-home .yx-category-video-screen .category-card-media img {
  mix-blend-mode: normal;
}

html[data-palette] .factory-home .yx-category-video-screen .category-name,
html[data-palette] .factory-home .yx-category-video-screen .category-cta {
  color: #fff;
  text-shadow: 0 1px 3px #07150ff2, 0 2px 12px #07150fcc;
}

html[data-palette] .factory-home .yx-category-video-screen .category-card::before {
  color: #f0f4f1;
  text-shadow: 0 1px 3px #07150f;
}

html[data-palette] .factory-home .yx-category-video-screen .category-cta {
  border-top-color: #ffffff40;
  color: #fff;
  background: transparent;
  text-shadow: 0 1px 3px #07150ff2, 0 2px 8px #07150fcc;
}

html[data-palette] .factory-home .yx-category-video-screen .category-cta svg {
  border-color: #ffffff70;
  background: #13251e66;
}

/* No transform overrides: the existing product lift and pointer motion are preserved. */
html[data-palette] .yx-category-video-screen .yx-category-video-toggle {
  position: absolute;
  z-index: 5;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 42px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #d3dfdf80;
  border-radius: 3px;
  color: #fff;
  background: var(--yx-glass-dark);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  backdrop-filter: blur(18px) saturate(115%);
  box-shadow: inset 0 1px 0 #ffffff26, 0 2px 7px #0002;
  font: 500 12px/1.4 "Segoe UI", sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: #ffffff35;
}

html[data-palette] .yx-category-video-screen .yx-category-video-toggle svg {
  display: block;
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-palette] .yx-category-video-screen .yx-category-video-toggle:hover {
  background: #173c2e94;
  border-color: #e1eeeb;
}

html[data-palette] .yx-category-video-screen .yx-category-video-toggle:active {
  background: #0c1518;
}

html[data-palette] .yx-category-video-screen .yx-category-video-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px #142023;
}

html[data-palette] .yx-category-video-screen .yx-category-video-toggle[hidden] {
  display: none;
}

@media (max-width: 1100px) {
  html[data-palette] .factory-home > section.popular-categories.yx-category-video-screen {
    padding: 38px 0 36px;
  }
  html[data-palette] .factory-home .yx-category-video-screen > .container {
    width: calc(100% - 64px);
  }
  html[data-palette] .factory-home .yx-category-video-screen h2 {
    max-width: calc(100% - 88px);
  }
  html[data-palette] .yx-category-video-screen .yx-category-video-toggle {
    top: 16px;
    right: 16px;
  }
}

@media (max-width: 767px) {
  html[data-palette] .factory-home > section.popular-categories.yx-category-video-screen {
    width: calc(100% - 16px);
    margin: 28px 8px 0;
    padding: 30px 0 28px;
    border-width: 6px;
    border-bottom-width: 24px;
    border-radius: 6px;
  }
  html[data-palette] .factory-home .yx-category-video-screen > .container {
    width: calc(100% - 32px);
  }
  html[data-palette] .factory-home .yx-category-video-screen h2 {
    max-width: 100%;
    margin-bottom: 25px;
    font-size: clamp(28px, 6.4vw, 38px);
  }
  html[data-palette] .factory-home .yx-category-video-screen h2::after {
    inset: -12px -14px -14px;
    background: var(--yx-glass-dark);
    border-radius: 7px;
  }
  html[data-palette] .factory-home .yx-category-video-screen .category-card-grid {
    gap: 16px;
  }
  html[data-palette] .factory-home .yx-category-video-screen .category-card {
    min-height: 0;
    padding: 22px 20px 18px;
    gap: 18px;
  }
  html[data-palette] .yx-category-video-screen .yx-category-video-toggle {
    display: none;
  }
  html[data-palette] .yx-category-video-screen::before {
    bottom: -15px;
    right: 16px;
    width: 3px;
    height: 3px;
  }
  html[data-palette] .yx-category-video-screen::after {
    bottom: -20px;
    font-size: 7px;
    letter-spacing: 1.7px;
  }
}

/* Opaque fallback keeps the labels legible where backdrop filtering is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-palette] .factory-home > section.popular-categories.yx-category-video-screen {
    --yx-glass-light: #34433f;
    --yx-glass-light-hover: #40524b;
    --yx-glass-dark: #182e29;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-palette] .yx-category-video-screen .yx-category-video-toggle {
    transition: none;
  }
}

/* A lazy decorative cover remains available when JavaScript is disabled. */
html[data-palette] .yx-category-video-screen .yx-category-video-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
}