/* XERON Product Detail v9
   Fullscreen Hero + fullscreen detail navigation + fullscreen Overview.
   Visual system matches previous XERON list pages: dark cyan/magenta tech glass.
*/

:root {
  --xeron-bg: #05060d;
  --xeron-bg-2: #080716;
  --xeron-text: #f5f7ff;
  --xeron-muted: #9ca6c0;
  --xeron-blue: #28d9ff;
  --xeron-pink: #ff3ed1;
  --xeron-line: rgba(255,255,255,.14);
  --xeron-line-strong: rgba(255,255,255,.24);
  --xeron-header-h: 76px;
}

html,
body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 0% 8%, rgba(40,217,255,.12), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(255,62,209,.12), transparent 34%),
    linear-gradient(180deg, #03040b 0%, #060612 48%, #080716 100%);
}

body {
  color: var(--xeron-text);
   font-family: Inter, system-ui, "Segoe UI", Arial, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.xeron-pd-page,
.xeron-pd-page * {
  box-sizing: border-box;
}

.xeron-pd-page {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(circle at 0% 8%, rgba(40,217,255,.12), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(255,62,209,.12), transparent 34%),
    linear-gradient(180deg, #03040b 0%, #060612 48%, #080716 100%);
}

.xeron-pd-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: .045;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 64px 64px;
}

.xeron-pd-page > * {
  position: relative;
  z-index: 1;
}

.xeron-pd-container {
  width: min(1440px, calc(100% - 72px));
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.xeron-pd-kicker {
  color: var(--xeron-blue);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  font-weight: 950;
}

/* Header */
.xeron-pd-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  height: var(--xeron-header-h);
  background:
    linear-gradient(180deg, rgba(5,6,13,.88), rgba(5,6,13,.62));
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.xeron-pd-header.is-scrolled {
  background: rgba(5,6,13,.92);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.xeron-pd-header__inner {
  width: min(1440px, calc(100% - 72px));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 260px;
  align-items: center;
  gap: 22px;
}

.xeron-pd-header__logo {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.xeron-pd-header__logo img {
  width: 170px;
  height: auto;
  object-fit: contain;
}

.xeron-pd-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(22px, 3vw, 42px);
}

.xeron-pd-header__nav a {
  color: rgba(255,255,255,.66);
  font-size: 13px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .03em;
  transition: color .18s ease;
}

.xeron-pd-header__nav a:hover {
  color: #fff;
}

.xeron-pd-header__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.xeron-pd-header__buy {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 999px;
  background: #fff;
  color: #05060d;
  font-size: 13px;
  font-weight: 950;
}

.xeron-pd-header__menu {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  background: rgba(255,255,255,.055);
  padding: 0;
}

.xeron-pd-header__menu span {
  display: block;
  width: 16px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: #fff;
}

/* Hero fullscreen */
.xeron-pd-hero {
  min-height: 100svh;
  padding-top: var(--xeron-header-h);
  display: grid;
  place-items: stretch;
  overflow: hidden;
}

.xeron-pd-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 25% 34%, rgba(40,217,255,.18), transparent 36%),
    radial-gradient(circle at 85% 72%, rgba(255,62,209,.16), transparent 38%),
    linear-gradient(110deg, rgba(7,10,22,.96), rgba(7,6,17,.98));
}

.xeron-pd-hero__inner {
  width: 100%;
  min-height: calc(100svh - var(--xeron-header-h));
  display: grid;
  grid-template-columns: minmax(0, 58%) minmax(420px, 42%);
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255,255,255,.08);
}

.xeron-pd-gallery {
  min-width: 0;
  height: calc(100svh - var(--xeron-header-h));
  display: grid;
  grid-template-rows: minmax(0, 1fr) 104px;
  background:
    radial-gradient(circle at 50% 34%, rgba(40,217,255,.13), transparent 38%),
    radial-gradient(circle at 18% 96%, rgba(255,62,209,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.24));
  border-right: 1px solid rgba(255,255,255,.10);
}

.xeron-pd-gallery-main {
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.xeron-pd-main-swiper,
.xeron-pd-main-swiper .swiper-wrapper,
.xeron-pd-main-swiper .swiper-slide,
.xeron-pd-slide {
  width: 100%;
  height: 100%;
}

.xeron-pd-slide {
  display: grid;
  place-items: center;
  padding: clamp(42px, 5vw, 96px);
}

.xeron-pd-main-img {
  width: min(88%, 780px);
  height: min(88%, 780px);
  max-width: 780px;
  max-height: 780px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 34px 64px rgba(0,0,0,.24));
}

.xeron-lazy-switch {
  opacity: 0;
}

.xeron-lazy-switch.is-loaded {
  opacity: 1;
}

.xeron-pd-swiper-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(5,7,18,.72);
  color: #fff !important;
}

.xeron-pd-swiper-btn::after {
  font-size: 16px !important;
  font-weight: 950;
}

.xeron-pd-thumb-swiper {
  height: 104px;
  padding: 14px 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.024));
  border-top: 1px solid rgba(255,255,255,.10);
}

.xeron-pd-thumb-swiper ul,
.xeron-pd-thumb-swiper li,
.xeron-pd-main-swiper ul,
.xeron-pd-main-swiper li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.xeron-pd-thumb-swiper .swiper-wrapper {
  align-items: center;
}

.xeron-pd-thumb-swiper .swiper-slide,
.xeron-pd-thumb {
  width: 74px;
  height: 74px;
}

.xeron-pd-thumb {
  padding: 7px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 50% 0%, rgba(40,217,255,.08), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.030));
  overflow: hidden;
}

.xeron-pd-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.swiper-slide-thumb-active .xeron-pd-thumb,
.xeron-pd-thumb:hover {
  border-color: rgba(40,217,255,.62);
  box-shadow:
    0 0 0 1px rgba(40,217,255,.14),
    0 14px 34px rgba(0,0,0,.24);
}

/* Hero info */
.xeron-pd-info {
  min-width: 0;
  height: calc(100svh - var(--xeron-header-h));
  padding: clamp(54px, 7vh, 88px) clamp(40px, 5vw, 92px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  background:
    radial-gradient(circle at 16% 0%, rgba(40,217,255,.13), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(255,62,209,.18), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.070), rgba(255,255,255,.026));
}

.xeron-pd-breadcrumb {
  margin: 0 0 clamp(24px, 4vh, 52px);
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  font-weight: 850;
}

.xeron-pd-breadcrumb em {
  max-width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-style: normal;
  color: rgba(255,255,255,.62);
}

.xeron-pd-info h1 {
  margin: 14px 0 0;
  max-width: 680px;
  color: var(--xeron-text);
  font-size: clamp(58px, 5.8vw, 112px);
  line-height: .80;
  letter-spacing: -.08em;
  font-weight: 950;
}

.xeron-pd-info h1::after {
  content: "";
  display: block;
  width: 86px;
  height: 2px;
  margin-top: 20px;
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink), transparent);
}

.xeron-pd-info h2 {
  margin: 28px 0 0;
  max-width: 700px;
  color: rgba(255,255,255,.90);
  font-size: clamp(22px, 2.2vw, 38px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 950;
}

.xeron-pd-desc {
  margin: 22px 0 0;
  max-width: 720px;
  color: rgba(224,230,250,.78);
  font-size: 14px;
  line-height: 1.72;
}

.xeron-pd-colors-box {
  margin-top: clamp(28px, 5vh, 54px);
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.xeron-pd-colors-box span {
  display: block;
  color: rgba(255,255,255,.78);
  font-size: 13px;
  font-weight: 900;
}

.xeron-pd-colors-box strong {
  display: block;
  margin-top: 5px;
  color: var(--xeron-muted);
  font-size: 12px;
  font-weight: 750;
}

.xeron-pd-colors {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.xeron-pd-color {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.060);
}

.xeron-pd-color:hover,
.xeron-pd-color.is-active {
  border-color: rgba(40,217,255,.62);
  box-shadow: 0 0 0 4px rgba(40,217,255,.13), 0 12px 30px rgba(0,0,0,.28);
}

.xeron-color-dot {
  width: 15px;
  height: 15px;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10);
}

.xeron-color-dot--b,
.xeron-color-dot--black {
  background: #151515;
  border: 1px solid rgba(255,255,255,.26);
}

.xeron-color-dot--w,
.xeron-color-dot--white {
  background: #f8f9fb;
  border: 1px solid rgba(255,255,255,.58);
}

.xeron-pd-meta {
  margin-top: 24px;
  display: grid;
  gap: 10px;
}

.xeron-pd-meta div {
  min-height: 66px;
  padding: 15px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 88% 0%, rgba(40,217,255,.08), transparent 42%),
    rgba(0,0,0,.18);
}

.xeron-pd-meta span {
  display: block;
  color: var(--xeron-muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 10px;
  font-weight: 950;
}

.xeron-pd-meta strong {
  display: block;
  margin-top: 8px;
  color: var(--xeron-text);
  font-size: 15px;
  line-height: 1.28;
  font-weight: 900;
}

.xeron-pd-actions {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.xeron-pd-btn {
  min-height: 46px;
  min-width: 170px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.065);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.xeron-pd-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}

.xeron-pd-btn--primary {
  background: #fff;
  color: #05060d;
  border-color: transparent;
}

/* Fullscreen tabs */
.xeron-pd-tabs {
  position: sticky;
  top: var(--xeron-header-h);
  z-index: 900;
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(5,6,13,.94), rgba(5,6,13,.86));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.11);
  box-shadow: 0 14px 42px rgba(0,0,0,.28);
}

.xeron-pd-tabs__inner {
  width: min(1440px, calc(100% - 72px));
  height: 48px;
  margin: 0 auto;
  padding: 0 8px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.045);
}

.xeron-pd-tabs__inner a {
  position: relative;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255,255,255,.58);
  text-transform: uppercase;
  letter-spacing: .10em;
  font-size: 11px;
  font-weight: 950;
  white-space: nowrap;
}

.xeron-pd-tabs__inner a:hover,
.xeron-pd-tabs__inner a.is-active {
  color: #fff;
}

.xeron-pd-tabs__inner a.is-active {
  background: rgba(255,255,255,.08);
}

.xeron-pd-tabs__inner a::after {
  content: "";
  position: absolute;
  left: 32%;
  right: 32%;
  bottom: 7px;
  height: 2px;
  border-radius: 999px;
  background: transparent;
}

.xeron-pd-tabs__inner a.is-active::after {
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink));
}

/* Fullscreen overview */
.xeron-pd-section--overview {
  min-height: 100svh;
  padding: 0;
  background: #05060d;
  overflow: hidden;
}

.xeron-pd-showcase {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: #05060d;
}

.xeron-pd-showcase__media,
.xeron-pd-showcase__media video,
.xeron-pd-showcase__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xeron-pd-showcase__media video,
.xeron-pd-showcase__media img {
  object-fit: cover;
}

.xeron-pd-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 52%, rgba(40,217,255,.08), transparent 34%),
    radial-gradient(circle at 22% 88%, rgba(255,62,209,.08), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.06) 0%, rgba(0,0,0,.08) 52%, rgba(0,0,0,.22) 100%);
}

.xeron-pd-showcase__copy {
  position: absolute;
  left: 50%;
  bottom: 15%;
  z-index: 3;
  width: min(980px, calc(100% - 44px));
  transform: translateX(-50%);
  text-align: center;
}

.xeron-pd-showcase__copy h2 {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(58px, 7vw, 126px);
  line-height: .84;
  letter-spacing: -.07em;
  font-weight: 950;
  text-shadow: 0 12px 48px rgba(0,0,0,.36);
}

.xeron-pd-showcase__copy p {
  max-width: 760px;
  margin: 22px auto 0;
  color: rgba(232,238,255,.86);
  font-size: clamp(15px, 1.3vw, 20px);
  line-height: 1.55;
}

/* Common sections */
.xeron-pd-section {
  position: relative;
  padding: clamp(82px, 9vh, 122px) 0;
  background:
    radial-gradient(circle at 0% 8%, rgba(40,217,255,.12), transparent 30%),
    radial-gradient(circle at 100% 40%, rgba(255,62,209,.13), transparent 36%),
    linear-gradient(180deg, #05060d 0%, #080716 100%);
  overflow: hidden;
}

.xeron-pd-section::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .045;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 64px 64px;
}

.xeron-pd-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
}

.xeron-pd-section-head--center {
  display: block;
  text-align: center;
}

.xeron-pd-section-head h2 {
  margin: 10px 0 0;
  max-width: 880px;
  color: var(--xeron-text);
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: .88;
  letter-spacing: -.07em;
  font-weight: 950;
}

.xeron-pd-section-head p {
  margin: 0;
  max-width: 440px;
  color: var(--xeron-muted);
  font-size: 15px;
  line-height: 1.65;
  text-align: right;
}

/* Features */
.xeron-pd-feature-stack {
  display: grid;
  gap: 26px;
}

.xeron-pd-feature {
  min-height: 560px;
  padding: clamp(34px, 4.2vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 16% 0%, rgba(40,217,255,.12), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(255,62,209,.12), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  box-shadow: 0 34px 110px rgba(0,0,0,.34);
  overflow: hidden;
}

.xeron-pd-feature.is-reverse {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
}

.xeron-pd-feature.is-reverse .xeron-pd-feature__copy {
  order: 2;
}

.xeron-pd-feature__copy span {
  color: rgba(255,255,255,.15);
  font-size: clamp(70px, 8vw, 120px);
  line-height: .8;
  font-weight: 950;
  letter-spacing: -.08em;
}

.xeron-pd-feature__copy h3 {
  margin: 8px 0 0;
  color: var(--xeron-text);
  font-size: clamp(38px, 4.8vw, 64px);
  line-height: .90;
  letter-spacing: -.068em;
  font-weight: 950;
}

.xeron-pd-feature__copy p {
  margin: 18px 0 0;
  color: var(--xeron-muted);
  font-size: 15px;
  line-height: 1.72;
}

.xeron-pd-feature__subimg {
  margin-top: 28px;
  width: min(100%, 300px);
  height: auto;
  object-fit: contain;
}

.xeron-pd-feature__media {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.050), transparent 62%),
    rgba(0,0,0,.18);
  overflow: hidden;
}

.xeron-pd-feature__media img {
  width: min(100%, 600px);
  height: min(100%, 540px);
  object-fit: contain;
}

.xeron-pd-mini-carousel,
.xeron-pd-layered {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: grid;
  place-items: center;
}

.xeron-pd-mini-carousel__item {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity .45s ease, transform .45s ease;
}

.xeron-pd-mini-carousel__item.is-active {
  opacity: 1;
}

.xeron-pd-layered img {
  position: absolute;
}

.xeron-pd-layered__base {
  inset: 0;
  margin: auto;
}

.xeron-pd-layered__right {
  right: 5%;
  top: 12%;
  max-width: 46%;
}

.xeron-pd-layered__bottom {
  left: 12%;
  bottom: 6%;
  max-width: 52%;
}

/* Details */
.xeron-pd-detail-box,
.xeron-pd-compat,
.xeron-pd-spec {
  position: relative;
  padding: clamp(46px, 5vw, 76px);
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 16% 0%, rgba(40,217,255,.13), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(255,62,209,.13), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  box-shadow: 0 34px 110px rgba(0,0,0,.34);
  overflow: hidden;
}

.xeron-pd-detail-box::before {
  content: "DETAILS";
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  z-index: 0;
  color: rgba(255,255,255,.030);
  font-size: clamp(120px, 17vw, 280px);
  line-height: .8;
  letter-spacing: -.09em;
  font-weight: 950;
  pointer-events: none;
  white-space: nowrap;
}

.xeron-pd-detail-box .xeron-pd-section-head {
  position: relative;
  z-index: 2;
}

.xeron-pd-detail-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.xeron-pd-detail-card {
  position: relative;
  min-height: clamp(320px, 25vw, 430px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.20);
  box-shadow: 0 22px 68px rgba(0,0,0,.30);
  isolation: isolate;
}

.xeron-pd-detail-card h3 {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 3;
  margin: 0;
  max-width: 86%;
  color: #fff;
  font-size: clamp(22px, 2vw, 32px);
  line-height: .98;
  letter-spacing: -.055em;
  font-weight: 950;
  text-shadow: 0 12px 32px rgba(0,0,0,.48);
}

.xeron-pd-detail-card img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  transition: transform .38s ease, opacity .28s ease;
}

.xeron-pd-detail-card:hover img {
  transform: scale(1.06);
}

.xeron-pd-detail-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,6,19,.02) 0%, rgba(4,6,19,.20) 48%, rgba(4,6,19,.84) 100%),
    radial-gradient(circle at 20% 0%, rgba(40,217,255,.12), transparent 40%);
}

/* Compatibility */
.xeron-pd-compat {
  min-height: 560px;
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: 26px;
}

.xeron-pd-compat h2 {
  margin: 12px 0 0;
  color: var(--xeron-text);
  font-size: clamp(40px, 5vw, 70px);
  line-height: .88;
  letter-spacing: -.07em;
  font-weight: 950;
}

.xeron-pd-compat-list {
  margin-top: 26px;
  display: grid;
  gap: 10px;
}

.xeron-pd-compat-item {
  width: 100%;
  min-height: 74px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  text-align: left;
  color: #fff;
  cursor: pointer;
}

.xeron-pd-compat-item:hover,
.xeron-pd-compat-item.is-active {
  border-color: rgba(40,217,255,.48);
  background:
    radial-gradient(circle at 100% 0%, rgba(40,217,255,.12), transparent 42%),
    rgba(255,255,255,.055);
}

.xeron-pd-compat-item span {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 950;
}

.xeron-pd-compat-item em {
  display: block;
  margin-top: 6px;
  color: var(--xeron-muted);
  font-style: normal;
  font-size: 12px;
  line-height: 1.5;
}

.xeron-pd-compat__visual {
  min-height: 500px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.050), transparent 62%),
    rgba(0,0,0,.18);
  overflow: hidden;
}

.xeron-pd-compat__visual img {
  width: min(100%, 720px);
  height: min(100%, 540px);
  object-fit: contain;
  transition: opacity .22s ease;
}

/* Specs and docs */
.xeron-pd-spec-content {
  margin-top: 24px;
  color: rgba(224,230,250,.84);
  font-size: 15px;
  line-height: 1.8;
  overflow-x: auto;
}

.xeron-pd-spec-content table {
  width: 100%;
  border-collapse: collapse;
}

.xeron-pd-spec-content td,
.xeron-pd-spec-content th {
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.12);
}

.xeron-pd-doc-list {
  display: grid;
  gap: 10px;
}

.xeron-pd-doc {
  min-height: 76px;
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.13);
  background:
    radial-gradient(circle at 88% 0%, rgba(40,217,255,.08), transparent 42%),
    rgba(255,255,255,.045);
}

.xeron-pd-doc:hover {
  border-color: rgba(255,255,255,.24);
  background:
    radial-gradient(circle at 88% 0%, rgba(40,217,255,.14), transparent 42%),
    rgba(255,255,255,.070);
}

.xeron-pd-doc span {
  color: var(--xeron-blue);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  font-weight: 950;
}

.xeron-pd-doc strong {
  min-width: 0;
  color: var(--xeron-text);
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xeron-pd-doc em {
  font-style: normal;
  color: rgba(255,255,255,.62);
}

.xeron-pd-remind {
  margin-top: 26px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--xeron-muted);
  font-size: 12px;
  line-height: 1.65;
}

/* Lazy */
.xeron-lazy-img {
  opacity: 0;
  background: transparent;
  transition: opacity .28s ease, transform .22s ease;
}

.xeron-lazy-img.is-loaded,
.xeron-lazy-img:not([data-src]) {
  opacity: 1;
}

.xeron-pd-page .swiper-pagination,
.xeron-pd-page .swiper-pagination-bullet,
.xeron-pd-page .swiper-notification {
  display: none !important;
}

/* Responsive */
@media (max-width: 1180px) {
  :root {
    --xeron-header-h: 68px;
  }

  .xeron-pd-header__inner {
    width: min(100% - 44px, 980px);
    grid-template-columns: 190px minmax(0, 1fr) auto;
  }

  .xeron-pd-header__logo img {
    width: 142px;
  }

  .xeron-pd-header__nav {
    gap: 22px;
  }

  .xeron-pd-hero__inner {
    grid-template-columns: 1fr;
  }

  .xeron-pd-gallery {
    height: auto;
    min-height: 640px;
  }

  .xeron-pd-info {
    height: auto;
    min-height: 620px;
  }

  .xeron-pd-detail-grid,
  .xeron-pd-feature,
  .xeron-pd-feature.is-reverse,
  .xeron-pd-compat {
    grid-template-columns: 1fr;
  }

  .xeron-pd-feature.is-reverse .xeron-pd-feature__copy {
    order: 0;
  }

  .xeron-pd-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  :root {
    --xeron-header-h: 64px;
  }

  .xeron-pd-header__inner {
    width: calc(100% - 24px);
    grid-template-columns: auto 1fr auto;
  }

  .xeron-pd-header__logo img {
    width: 126px;
  }

  .xeron-pd-header__nav,
  .xeron-pd-header__buy {
    display: none;
  }

  .xeron-pd-header__menu {
    display: block;
  }

  .xeron-pd-container {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
  }

  .xeron-pd-gallery {
    min-height: 442px;
    grid-template-rows: 362px 80px;
  }

  .xeron-pd-slide {
    padding: 26px;
  }

  .xeron-pd-main-img {
    width: min(100%, 330px);
    height: min(100%, 330px);
  }

  .xeron-pd-thumb-swiper {
    height: 80px;
    padding: 10px 12px;
  }

  .xeron-pd-thumb-swiper .swiper-slide,
  .xeron-pd-thumb {
    width: 58px;
    height: 58px;
  }

  .xeron-pd-info {
    min-height: auto;
    padding: 34px 24px 42px;
  }

  .xeron-pd-info h1 {
    font-size: clamp(42px, 14vw, 64px);
  }

  .xeron-pd-info h2 {
    font-size: 22px;
  }

  .xeron-pd-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .xeron-pd-btn {
    width: 100%;
  }

  .xeron-pd-tabs {
    min-height: 58px;
    overflow: hidden;
  }

  .xeron-pd-tabs__inner {
    width: 100%;
    height: 58px;
    padding: 0 12px;
    display: flex;
    overflow-x: auto;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .xeron-pd-tabs__inner a {
    flex: 0 0 auto;
    min-width: 126px;
    min-height: 56px;
    font-size: 10px;
  }

  .xeron-pd-showcase__copy {
    bottom: 12%;
    width: calc(100% - 32px);
  }

  .xeron-pd-showcase__copy h2 {
    font-size: clamp(44px, 14vw, 72px);
  }

  .xeron-pd-showcase__copy p {
    font-size: 13px;
  }

  .xeron-pd-section {
    padding: 58px 0;
  }

  .xeron-pd-section-head {
    display: block;
  }

  .xeron-pd-section-head h2 {
    font-size: clamp(40px, 12vw, 62px);
  }

  .xeron-pd-section-head p {
    margin-top: 12px;
    text-align: left;
    font-size: 13px;
  }

  .xeron-pd-feature,
  .xeron-pd-detail-box,
  .xeron-pd-compat,
  .xeron-pd-spec {
    padding: 24px;
    border-radius: 26px;
  }

  .xeron-pd-feature__media,
  .xeron-pd-mini-carousel,
  .xeron-pd-layered,
  .xeron-pd-compat__visual {
    min-height: 320px;
  }

  .xeron-pd-detail-card {
    min-height: 320px;
    border-radius: 22px;
  }

  .xeron-pd-doc {
    grid-template-columns: 1fr auto;
  }

  .xeron-pd-doc span {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .xeron-pd-container {
    width: calc(100vw - 18px);
    max-width: calc(100vw - 18px);
  }

  .xeron-pd-gallery {
    grid-template-rows: 320px 74px;
  }

  .xeron-pd-main-img {
    width: min(100%, 300px);
    height: min(100%, 300px);
  }

  .xeron-pd-showcase {
    min-height: 560px;
  }
}

/* =========================================================
   XERON Product Detail v10 Fix
   1) Full-width product detail nav, not centered pill.
   2) Remove second scrollbar: hero info no longer uses overflow-y:auto.
   3) Remove meta cards from visual layout.
   4) Add full-screen footer matching list-page style.
   ========================================================= */

/* ---------- Prevent double scrollbar ---------- */
html,
body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.xeron-pd-info {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
}

/* If content is long, let the whole hero grow instead of creating inner scrollbar */
.xeron-pd-hero,
.xeron-pd-hero__inner {
  height: auto !important;
}

.xeron-pd-hero__inner {
  min-height: calc(100svh - var(--xeron-header-h)) !important;
  align-items: stretch !important;
}

.xeron-pd-gallery {
  height: auto !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
}

/* Remove possible leftover space from deleted meta block */
.xeron-pd-meta {
  display: none !important;
}

.xeron-pd-actions {
  margin-top: clamp(30px, 5vh, 56px) !important;
}

/* ---------- Full-screen product detail navigation ---------- */
.xeron-pd-tabs {
  position: sticky !important;
  top: var(--xeron-header-h) !important;
  z-index: 900 !important;
  width: 100vw !important;
  min-height: 76px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(40,217,255,.10), transparent 28%),
    radial-gradient(circle at 100% 50%, rgba(255,62,209,.10), transparent 32%),
    linear-gradient(180deg, rgba(5,6,13,.96), rgba(5,6,13,.90)) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  border-bottom: 1px solid rgba(255,255,255,.11) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.30) !important;
}

/* The inner becomes full-screen width */
.xeron-pd-tabs__inner {
  width: 100vw !important;
  max-width: none !important;
  height: 76px !important;
  margin: 0 !important;
  padding: 0 clamp(24px, 5vw, 96px) !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.xeron-pd-tabs__inner a {
  position: relative !important;
  min-height: 76px !important;
  border-radius: 0 !important;
  color: rgba(255,255,255,.56) !important;
  background: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  transition: color .18s ease, background .18s ease !important;
}

.xeron-pd-tabs__inner a:hover,
.xeron-pd-tabs__inner a.is-active {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.010)) !important;
}

.xeron-pd-tabs__inner a::after {
  content: "" !important;
  position: absolute !important;
  left: 30% !important;
  right: 30% !important;
  bottom: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: transparent !important;
}

.xeron-pd-tabs__inner a.is-active::after {
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink)) !important;
}

/* ---------- Hero refinement after removing meta ---------- */
.xeron-pd-info h1 {
  font-size: clamp(58px, 5.4vw, 104px) !important;
}

.xeron-pd-desc {
  max-width: 760px !important;
}

.xeron-pd-colors-box {
  margin-top: clamp(32px, 5vh, 58px) !important;
}

/* Make action buttons more balanced after removing meta block */
.xeron-pd-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 560px !important;
}

.xeron-pd-btn {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- Full-screen footer ---------- */
.xeron-pd-footer {
  position: relative;
  width: 100%;
  min-height: 520px;
  padding: clamp(72px, 9vh, 120px) 0 34px;
  overflow: hidden;
  color: var(--xeron-text);
  background:
    radial-gradient(circle at 0% 8%, rgba(40,217,255,.13), transparent 32%),
    radial-gradient(circle at 100% 38%, rgba(255,62,209,.13), transparent 38%),
    linear-gradient(180deg, #05060d 0%, #080716 100%);
  border-top: 1px solid rgba(255,255,255,.12);
}

.xeron-pd-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .045;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 64px 64px;
}

.xeron-pd-footer::after {
  content: "XERON";
  position: absolute;
  right: -0.08em;
  bottom: .08em;
  color: rgba(255,255,255,.030);
  font-size: clamp(110px, 18vw, 320px);
  line-height: .72;
  letter-spacing: -.08em;
  font-weight: 950;
  pointer-events: none;
}

.xeron-pd-footer__inner {
  position: relative;
  z-index: 2;
  width: min(1440px, calc(100% - 72px));
  margin: 0 auto;
  padding: clamp(34px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 7vw, 120px);
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 16% 0%, rgba(40,217,255,.13), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(255,62,209,.13), transparent 36%),
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.026));
  box-shadow: 0 34px 110px rgba(0,0,0,.34);
}

.xeron-pd-footer__logo {
  display: inline-flex;
  align-items: center;
}

.xeron-pd-footer__logo img {
  width: 188px;
  height: auto;
  object-fit: contain;
}

.xeron-pd-footer__brand p {
  max-width: 440px;
  margin: 28px 0 0;
  color: var(--xeron-muted);
  font-size: 15px;
  line-height: 1.72;
}

.xeron-pd-footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 56px);
}

.xeron-pd-footer__cols h3 {
  margin: 0 0 18px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px;
  font-weight: 950;
}

.xeron-pd-footer__cols a {
  display: block;
  width: fit-content;
  margin-top: 12px;
  color: var(--xeron-muted);
  font-size: 14px;
  font-weight: 750;
  transition: color .18s ease, transform .18s ease;
}

.xeron-pd-footer__cols a:hover {
  color: #fff;
  transform: translateX(4px);
}

.xeron-pd-footer__bottom {
  position: relative;
  z-index: 2;
  width: min(1440px, calc(100% - 72px));
  margin: 28px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: rgba(255,255,255,.46);
  font-size: 12px;
  font-weight: 750;
}

.xeron-pd-footer__bottom div {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.xeron-pd-footer__bottom a:hover {
  color: #fff;
}

/* ---------- Mobile adjustments ---------- */
@media (max-width: 1180px) {
  .xeron-pd-info {
    min-height: auto !important;
  }

  .xeron-pd-tabs__inner {
    padding: 0 22px !important;
  }

  .xeron-pd-footer__inner {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-tabs {
    top: var(--xeron-header-h) !important;
    min-height: 58px !important;
    overflow: hidden !important;
  }

  .xeron-pd-tabs__inner {
    width: 100vw !important;
    height: 58px !important;
    padding: 0 12px !important;
    display: flex !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
  }

  .xeron-pd-tabs__inner a {
    flex: 0 0 auto !important;
    min-width: 126px !important;
    min-height: 58px !important;
    font-size: 10px !important;
  }

  .xeron-pd-actions {
    grid-template-columns: 1fr !important;
    max-width: none !important;
  }

  .xeron-pd-footer {
    min-height: auto;
    padding: 58px 0 28px;
  }

  .xeron-pd-footer__inner,
  .xeron-pd-footer__bottom {
    width: calc(100vw - 24px);
  }

  .xeron-pd-footer__inner {
    padding: 24px;
    border-radius: 26px;
  }

  .xeron-pd-footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .xeron-pd-footer__bottom {
    display: grid;
    gap: 14px;
  }

  .xeron-pd-footer__bottom div {
    gap: 14px;
  }
}

@media (max-width: 420px) {
  .xeron-pd-footer__inner,
  .xeron-pd-footer__bottom {
    width: calc(100vw - 18px);
  }
}

/* =========================================================
   XERON Product Detail v11
   Right hero panel redesign:
   - Right side becomes layered product information panel.
   - Title, key features, colors and actions are visually grouped.
   - Better balance with left product visual.
   ========================================================= */

/* ---------- Hero proportions ---------- */
.xeron-pd-hero__inner {
  grid-template-columns: minmax(0, 57.5%) minmax(460px, 42.5%) !important;
}

.xeron-pd-gallery {
  border-right: 1px solid rgba(255,255,255,.12) !important;
}

.xeron-pd-info--carded {
  position: relative !important;
  padding: clamp(44px, 5.2vh, 72px) clamp(42px, 4.7vw, 86px) !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(40,217,255,.14), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255,62,209,.20), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.058), rgba(255,255,255,.018)) !important;
  overflow: hidden !important;
}

.xeron-pd-info--carded::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .06;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 58px 58px;
}

.xeron-pd-info--carded::after {
  content: "XERON";
  position: absolute;
  right: -.12em;
  bottom: .08em;
  z-index: 0;
  color: rgba(255,255,255,.030);
  font-size: clamp(86px, 12vw, 220px);
  line-height: .72;
  letter-spacing: -.09em;
  font-weight: 950;
  pointer-events: none;
}

.xeron-pd-info--carded > * {
  position: relative;
  z-index: 2;
}

/* Breadcrumb becomes compact and less intrusive */
.xeron-pd-info--carded .xeron-pd-breadcrumb {
  margin: 0 0 clamp(20px, 3.2vh, 34px) !important;
  color: rgba(255,255,255,.46) !important;
  font-size: 11px !important;
}

.xeron-pd-info__content {
  width: min(100%, 720px);
}

/* Title section */
.xeron-pd-title-card {
  max-width: 720px;
}

.xeron-pd-title-card .xeron-pd-kicker {
  font-size: 12px !important;
  color: var(--xeron-blue) !important;
}

.xeron-pd-title-card h1 {
  margin-top: 12px !important;
  max-width: 680px !important;
  font-size: clamp(54px, 5vw, 96px) !important;
  line-height: .82 !important;
  letter-spacing: -.082em !important;
}

.xeron-pd-title-card h1::after {
  width: 88px !important;
  height: 2px !important;
  margin-top: 18px !important;
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink), transparent) !important;
}

.xeron-pd-title-card h2 {
  margin-top: 24px !important;
  max-width: 680px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(22px, 2vw, 34px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
}

/* Description card instead of loose paragraph */
.xeron-pd-desc-card {
  margin-top: clamp(20px, 3vh, 30px);
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(40,217,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.064), rgba(255,255,255,.026));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.xeron-pd-desc-card__label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--xeron-blue);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 10px;
  font-weight: 950;
}

.xeron-pd-desc-card .xeron-pd-desc {
  margin: 0 !important;
  max-width: none !important;
  color: rgba(224,230,250,.82) !important;
  font-size: 13.5px !important;
  line-height: 1.72 !important;
}

/* Color + buttons become a bottom purchase card */
.xeron-pd-purchase-card {
  width: min(100%, 720px);
  margin-top: clamp(20px, 3.2vh, 34px);
  padding: clamp(18px, 2vw, 24px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(255,62,209,.09), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}

.xeron-pd-purchase-card .xeron-pd-colors-box {
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.xeron-pd-purchase-card .xeron-pd-actions {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap: 12px !important;
  max-width: none !important;
}

.xeron-pd-purchase-card .xeron-pd-btn {
  min-height: 48px !important;
  width: 100% !important;
  min-width: 0 !important;
  border-radius: 999px !important;
}

/* Make color dots visually clearer */
.xeron-pd-purchase-card .xeron-pd-color {
  width: 36px !important;
  height: 36px !important;
}

.xeron-pd-purchase-card .xeron-color-dot {
  width: 16px !important;
  height: 16px !important;
}

/* Keep old meta hidden */
.xeron-pd-meta {
  display: none !important;
}

/* Left product visual slight balance */
.xeron-pd-main-img {
  width: min(84%, 760px) !important;
  height: min(84%, 760px) !important;
}

/* ---------- Tablet / mobile ---------- */
@media (max-width: 1180px) {
  .xeron-pd-hero__inner {
    grid-template-columns: 1fr !important;
  }

  .xeron-pd-info--carded {
    padding: 42px 44px 52px !important;
  }

  .xeron-pd-info__content,
  .xeron-pd-purchase-card {
    width: 100%;
  }

  .xeron-pd-title-card h1 {
    font-size: clamp(46px, 9vw, 82px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-info--carded {
    padding: 30px 24px 38px !important;
  }

  .xeron-pd-desc-card,
  .xeron-pd-purchase-card {
    border-radius: 20px !important;
    padding: 18px !important;
  }

  .xeron-pd-title-card h1 {
    font-size: clamp(40px, 13vw, 64px) !important;
  }

  .xeron-pd-title-card h2 {
    font-size: 22px !important;
  }

  .xeron-pd-purchase-card .xeron-pd-colors-box {
    align-items: flex-start !important;
  }

  .xeron-pd-purchase-card .xeron-pd-actions {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   XERON Product Detail v12
   Hero redesign:
   - One unified full-screen product stage.
   - Left gallery no longer has a hard separated area.
   - Thumbnail strip becomes floating glass dock.
   - Right information becomes one complete product info panel.
   - Less fragmented, closer to the product-list visual language.
   ========================================================= */

/* ---------- Hero unified stage ---------- */

.xeron-pd-hero {
  background:
    radial-gradient(circle at 22% 34%, rgba(40,217,255,.18), transparent 36%),
    radial-gradient(circle at 88% 78%, rgba(255,62,209,.16), transparent 40%),
    linear-gradient(120deg, #040611 0%, #070716 58%, #110719 100%) !important;
}

.xeron-pd-hero__bg {
  background:
    radial-gradient(circle at 26% 38%, rgba(40,217,255,.16), transparent 36%),
    radial-gradient(circle at 88% 78%, rgba(255,62,209,.16), transparent 40%),
    linear-gradient(120deg, #040611 0%, #070716 58%, #110719 100%) !important;
}

.xeron-pd-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .055;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 64px 64px;
}

.xeron-pd-hero__inner {
  grid-template-columns: minmax(0, 59%) minmax(420px, 41%) !important;
  border-top: 0 !important;
  background: transparent !important;
  isolation: isolate;
}

.xeron-pd-hero__inner::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 2vw, 34px);
  top: clamp(18px, 2vw, 30px);
  bottom: clamp(18px, 2vw, 34px);
  z-index: -1;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 24% 18%, rgba(40,217,255,.12), transparent 36%),
    radial-gradient(circle at 86% 88%, rgba(255,62,209,.12), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.014));
  box-shadow: 0 34px 120px rgba(0,0,0,.36);
}

/* ---------- Left product stage ---------- */

.xeron-pd-gallery {
  position: relative !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
  height: auto !important;
  display: block !important;
  background: transparent !important;
  border-right: 0 !important;
}

.xeron-pd-gallery::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 4%;
  top: 10%;
  bottom: 12%;
  z-index: 0;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.075), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
  border: 1px solid rgba(255,255,255,.070);
}

.xeron-pd-gallery-main {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  background: transparent !important;
}

.xeron-pd-main-swiper,
.xeron-pd-main-swiper .swiper-wrapper,
.xeron-pd-main-swiper .swiper-slide,
.xeron-pd-slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.xeron-pd-slide {
  padding: clamp(74px, 8vw, 138px) clamp(56px, 7vw, 110px) clamp(128px, 12vh, 168px) !important;
}

.xeron-pd-main-img {
  width: min(86%, 780px) !important;
  height: min(86%, 780px) !important;
  max-width: 780px !important;
  max-height: 780px !important;
  filter: drop-shadow(0 42px 80px rgba(0,0,0,.28)) !important;
}

/* Thumbnail dock floats inside stage */
.xeron-pd-thumb-swiper {
  position: absolute !important;
  left: clamp(42px, 7vw, 120px) !important;
  right: clamp(42px, 7vw, 120px) !important;
  bottom: clamp(28px, 5vh, 54px) !important;
  z-index: 5 !important;
  width: auto !important;
  height: 86px !important;
  min-height: 86px !important;
  padding: 10px 14px !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(40,217,255,.10), transparent 34%),
    radial-gradient(circle at 88% 100%, rgba(255,62,209,.10), transparent 36%),
    rgba(5,7,18,.64) !important;
  box-shadow: 0 24px 68px rgba(0,0,0,.32) !important;
  overflow: hidden !important;
}

.xeron-pd-thumb-swiper .swiper-wrapper {
  align-items: center !important;
}

.xeron-pd-thumb-swiper .swiper-slide,
.xeron-pd-thumb {
  width: 64px !important;
  height: 64px !important;
}

.xeron-pd-thumb {
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(40,217,255,.08), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.092), rgba(255,255,255,.032)) !important;
}

/* Swiper arrow placement */
.xeron-pd-swiper-btn {
  z-index: 8 !important;
  background: rgba(5,7,18,.58) !important;
  border-color: rgba(255,255,255,.14) !important;
}

.xeron-pd-swiper-btn--prev {
  left: clamp(18px, 2vw, 34px) !important;
}

.xeron-pd-swiper-btn--next {
  right: clamp(18px, 2vw, 34px) !important;
}

/* ---------- Right info: one complete panel ---------- */

.xeron-pd-info--carded {
  position: relative !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
  height: auto !important;
  padding: clamp(44px, 6vh, 76px) clamp(34px, 4.4vw, 72px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  overflow: visible !important;
}

.xeron-pd-info--carded::before,
.xeron-pd-info--carded::after {
  display: none !important;
}

/* Main right card */
.xeron-pd-info__content {
  position: relative;
  width: min(100%, 680px) !important;
  padding: clamp(28px, 3vw, 44px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(40,217,255,.13), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(255,62,209,.16), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.028)) !important;
  box-shadow: 0 30px 96px rgba(0,0,0,.36) !important;
  overflow: hidden;
}

.xeron-pd-info__content::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .052;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 44px 44px;
}

.xeron-pd-info__content::after {
  content: "CASE";
  position: absolute;
  right: -.10em;
  bottom: -.04em;
  color: rgba(255,255,255,.035);
  font-size: clamp(76px, 10vw, 170px);
  line-height: .72;
  letter-spacing: -.09em;
  font-weight: 950;
  pointer-events: none;
}

/* Breadcrumb is inside the card visually */
.xeron-pd-info--carded .xeron-pd-breadcrumb {
  width: min(100%, 680px) !important;
  margin: 0 0 14px !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 11px !important;
}

/* Move breadcrumb visually into the same column but not too far away */
.xeron-pd-info--carded {
  flex-direction: column !important;
}

.xeron-pd-title-card,
.xeron-pd-desc-card {
  position: relative;
  z-index: 2;
}

.xeron-pd-title-card h1 {
  margin-top: 12px !important;
  font-size: clamp(48px, 4.6vw, 88px) !important;
  line-height: .82 !important;
  letter-spacing: -.082em !important;
}

.xeron-pd-title-card h2 {
  margin-top: 22px !important;
  font-size: clamp(21px, 1.75vw, 30px) !important;
  line-height: 1.04 !important;
}

/* Description becomes cleaner: less box-inside-box feel */
.xeron-pd-desc-card {
  margin-top: 24px !important;
  padding: 22px 0 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.11) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.xeron-pd-desc-card__label {
  color: var(--xeron-blue) !important;
  margin-bottom: 12px !important;
}

.xeron-pd-desc-card .xeron-pd-desc {
  color: rgba(224,230,250,.82) !important;
  font-size: 13.2px !important;
  line-height: 1.72 !important;
}

/* Purchase card attaches below the main card with same width */
.xeron-pd-purchase-card {
  width: min(100%, 680px) !important;
  margin-top: 14px !important;
  padding: 20px 22px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,62,209,.10), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.066), rgba(255,255,255,.026)) !important;
  box-shadow: 0 22px 68px rgba(0,0,0,.28) !important;
}

.xeron-pd-purchase-card .xeron-pd-colors-box {
  padding-bottom: 16px !important;
}

.xeron-pd-purchase-card .xeron-pd-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

.xeron-pd-purchase-card .xeron-pd-btn {
  min-height: 46px !important;
}

/* ---------- Better header balance for this new hero ---------- */

.xeron-pd-header {
  background:
    linear-gradient(180deg, rgba(5,6,13,.90), rgba(5,6,13,.72)) !important;
}

.xeron-pd-header__inner {
  width: min(1440px, calc(100% - 72px)) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .xeron-pd-hero__inner {
    grid-template-columns: 1fr !important;
  }

  .xeron-pd-gallery {
    min-height: 620px !important;
  }

  .xeron-pd-gallery-main {
    position: relative !important;
    min-height: 620px !important;
  }

  .xeron-pd-thumb-swiper {
    left: 44px !important;
    right: 44px !important;
  }

  .xeron-pd-info--carded {
    min-height: auto !important;
    padding: 44px !important;
  }

  .xeron-pd-info__content,
  .xeron-pd-purchase-card,
  .xeron-pd-info--carded .xeron-pd-breadcrumb {
    width: min(100%, 820px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-hero__inner::before {
    inset: 10px !important;
    border-radius: 26px !important;
  }

  .xeron-pd-gallery {
    min-height: 460px !important;
  }

  .xeron-pd-gallery::before {
    left: 18px !important;
    right: 18px !important;
    top: 22px !important;
    bottom: 88px !important;
    border-radius: 24px !important;
  }

  .xeron-pd-gallery-main {
    min-height: 460px !important;
  }

  .xeron-pd-slide {
    padding: 42px 24px 114px !important;
  }

  .xeron-pd-main-img {
    width: min(100%, 330px) !important;
    height: min(100%, 330px) !important;
  }

  .xeron-pd-thumb-swiper {
    left: 18px !important;
    right: 18px !important;
    bottom: 20px !important;
    height: 72px !important;
    min-height: 72px !important;
    border-radius: 18px !important;
  }

  .xeron-pd-thumb-swiper .swiper-slide,
  .xeron-pd-thumb {
    width: 54px !important;
    height: 54px !important;
  }

  .xeron-pd-info--carded {
    padding: 28px 18px 38px !important;
  }

  .xeron-pd-info__content {
    padding: 24px !important;
    border-radius: 24px !important;
  }

  .xeron-pd-title-card h1 {
    font-size: clamp(40px, 12vw, 62px) !important;
  }

  .xeron-pd-purchase-card {
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .xeron-pd-purchase-card .xeron-pd-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .xeron-pd-gallery {
    min-height: 420px !important;
  }

  .xeron-pd-gallery-main {
    min-height: 420px !important;
  }

  .xeron-pd-main-img {
    width: min(100%, 300px) !important;
    height: min(100%, 300px) !important;
  }
}

/* =========================================================
   XERON Product Detail v13
   Final hero direction:
   - No nested stage card.
   - No small floating info card on the right.
   - Clean full-screen split layout.
   - Left = product visual.
   - Right = integrated information column.
   - Same cyan / magenta XERON list-page visual system.
   ========================================================= */

/* ---------- Reset the v12 nested-card hero ---------- */

.xeron-pd-hero {
  min-height: 100svh !important;
  padding-top: var(--xeron-header-h) !important;
  background:
    radial-gradient(circle at 0% 14%, rgba(40,217,255,.13), transparent 32%),
    radial-gradient(circle at 100% 72%, rgba(255,62,209,.15), transparent 38%),
    linear-gradient(120deg, #03040b 0%, #060612 50%, #0d0615 100%) !important;
}

.xeron-pd-hero__bg {
  background:
    radial-gradient(circle at 20% 38%, rgba(40,217,255,.15), transparent 36%),
    radial-gradient(circle at 94% 80%, rgba(255,62,209,.16), transparent 40%),
    linear-gradient(120deg, #03040b 0%, #060612 50%, #0d0615 100%) !important;
}

.xeron-pd-hero__inner {
  width: 100% !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
  display: grid !important;
  grid-template-columns: minmax(0, 57.5%) minmax(460px, 42.5%) !important;
  align-items: stretch !important;
  border: 0 !important;
  background: transparent !important;
}

.xeron-pd-hero__inner::before {
  display: none !important;
}

/* ---------- Left: open product presentation, no giant card ---------- */

.xeron-pd-gallery {
  position: relative !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 112px !important;
  background:
    radial-gradient(circle at 48% 38%, rgba(40,217,255,.13), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.020), rgba(0,0,0,.22)) !important;
  border-right: 1px solid rgba(255,255,255,.11) !important;
  overflow: hidden !important;
}

.xeron-pd-gallery::before {
  display: none !important;
}

.xeron-pd-gallery::after {
  content: "";
  position: absolute;
  left: 9%;
  right: 8%;
  top: 11%;
  bottom: 17%;
  z-index: 0;
  border-radius: 36px;
  border: 1px solid rgba(255,255,255,.070);
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.052), transparent 55%),
    linear-gradient(145deg, rgba(255,255,255,.020), rgba(255,255,255,.006));
  pointer-events: none;
}

.xeron-pd-gallery-main {
  position: relative !important;
  inset: auto !important;
  z-index: 1 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}

.xeron-pd-main-swiper,
.xeron-pd-main-swiper .swiper-wrapper,
.xeron-pd-main-swiper .swiper-slide,
.xeron-pd-slide {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
}

.xeron-pd-slide {
  display: grid !important;
  place-items: center !important;
  padding: clamp(48px, 6vw, 106px) clamp(44px, 6vw, 96px) !important;
}

.xeron-pd-main-img {
  width: min(82%, 760px) !important;
  height: min(82%, 760px) !important;
  max-width: 760px !important;
  max-height: 760px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 42px 84px rgba(0,0,0,.30)) !important;
}

/* Thumbnail strip is integrated, not floating and not black */
.xeron-pd-thumb-swiper {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
  padding: 18px clamp(38px, 5vw, 96px) !important;
  border: 0 !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(40,217,255,.10), transparent 35%),
    radial-gradient(circle at 88% 100%, rgba(255,62,209,.09), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.024)) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.xeron-pd-thumb-swiper .swiper-wrapper {
  align-items: center !important;
}

.xeron-pd-thumb-swiper .swiper-slide,
.xeron-pd-thumb {
  width: 70px !important;
  height: 70px !important;
}

.xeron-pd-thumb {
  padding: 7px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(40,217,255,.08), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.030)) !important;
}

.swiper-slide-thumb-active .xeron-pd-thumb,
.xeron-pd-thumb:hover {
  border-color: rgba(40,217,255,.62) !important;
  box-shadow:
    0 0 0 1px rgba(40,217,255,.16),
    0 16px 34px rgba(0,0,0,.24) !important;
}

/* ---------- Right: integrated info column, no floating card ---------- */

.xeron-pd-info--carded {
  position: relative !important;
  min-height: calc(100svh - var(--xeron-header-h)) !important;
  height: auto !important;
  padding: clamp(54px, 7vh, 92px) clamp(46px, 5.4vw, 96px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(40,217,255,.11), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(255,62,209,.19), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.046), rgba(255,255,255,.018)) !important;
  overflow: hidden !important;
}

.xeron-pd-info--carded::before {
  content: "";
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .050;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 58px 58px;
}

.xeron-pd-info--carded::after {
  content: "XERON";
  display: block !important;
  position: absolute;
  right: -.10em;
  bottom: .08em;
  z-index: 0;
  color: rgba(255,255,255,.030);
  font-size: clamp(100px, 15vw, 250px);
  line-height: .72;
  letter-spacing: -.09em;
  font-weight: 950;
  pointer-events: none;
}

.xeron-pd-info--carded > * {
  position: relative;
  z-index: 2;
}

.xeron-pd-info--carded .xeron-pd-breadcrumb {
  width: min(100%, 760px) !important;
  margin: 0 0 clamp(20px, 3vh, 36px) !important;
  color: rgba(255,255,255,.48) !important;
  font-size: 11px !important;
}

/* Flatten v11/v12 wrapper cards */
.xeron-pd-info__content {
  width: min(100%, 760px) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.xeron-pd-info__content::before,
.xeron-pd-info__content::after {
  display: none !important;
}

.xeron-pd-title-card {
  max-width: 760px !important;
}

.xeron-pd-title-card .xeron-pd-kicker {
  color: var(--xeron-blue) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

.xeron-pd-title-card h1 {
  margin-top: 12px !important;
  max-width: 760px !important;
  font-size: clamp(58px, 5.35vw, 108px) !important;
  line-height: .80 !important;
  letter-spacing: -.085em !important;
  font-weight: 950 !important;
}

.xeron-pd-title-card h1::after {
  content: "";
  display: block;
  width: 90px !important;
  height: 2px !important;
  margin-top: 20px !important;
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink), transparent) !important;
}

.xeron-pd-title-card h2 {
  margin-top: 26px !important;
  max-width: 760px !important;
  color: rgba(255,255,255,.92) !important;
  font-size: clamp(24px, 2.05vw, 38px) !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
}

/* Feature description becomes clean horizontal rule section */
.xeron-pd-desc-card {
  width: min(100%, 760px) !important;
  margin-top: clamp(22px, 3.2vh, 34px) !important;
  padding: clamp(20px, 2.4vw, 28px) 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.xeron-pd-desc-card__label {
  color: var(--xeron-blue) !important;
  margin-bottom: 12px !important;
  letter-spacing: .16em !important;
}

.xeron-pd-desc-card .xeron-pd-desc {
  margin: 0 !important;
  max-width: 740px !important;
  color: rgba(224,230,250,.82) !important;
  font-size: 13.6px !important;
  line-height: 1.72 !important;
}

/* Purchase area becomes a refined bottom strip, not a separate card */
.xeron-pd-purchase-card {
  width: min(100%, 760px) !important;
  margin-top: clamp(26px, 4vh, 46px) !important;
  padding: clamp(18px, 2vw, 24px) !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(40,217,255,.08), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(255,62,209,.10), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.024)) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.24) !important;
}

.xeron-pd-purchase-card .xeron-pd-colors-box {
  margin: 0 !important;
  padding: 0 0 18px !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

.xeron-pd-purchase-card .xeron-pd-actions {
  margin-top: 18px !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  max-width: none !important;
}

.xeron-pd-purchase-card .xeron-pd-btn {
  min-height: 48px !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- Header and tabs stay consistent ---------- */

.xeron-pd-header {
  background:
    linear-gradient(180deg, rgba(5,6,13,.92), rgba(5,6,13,.78)) !important;
}

.xeron-pd-tabs {
  background:
    radial-gradient(circle at 0% 50%, rgba(40,217,255,.10), transparent 28%),
    radial-gradient(circle at 100% 50%, rgba(255,62,209,.10), transparent 32%),
    linear-gradient(180deg, rgba(5,6,13,.96), rgba(5,6,13,.90)) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .xeron-pd-hero__inner {
    grid-template-columns: 1fr !important;
  }

  .xeron-pd-gallery {
    min-height: 620px !important;
    grid-template-rows: minmax(0, 1fr) 102px !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }

  .xeron-pd-gallery-main {
    min-height: 518px !important;
  }

  .xeron-pd-info--carded {
    min-height: auto !important;
    padding: 50px 44px 64px !important;
  }

  .xeron-pd-info__content,
  .xeron-pd-purchase-card,
  .xeron-pd-info--carded .xeron-pd-breadcrumb {
    width: min(100%, 860px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-gallery {
    min-height: 450px !important;
    grid-template-rows: 368px 82px !important;
  }

  .xeron-pd-gallery-main {
    min-height: 368px !important;
  }

  .xeron-pd-gallery::after {
    left: 18px !important;
    right: 18px !important;
    top: 22px !important;
    bottom: 94px !important;
    border-radius: 24px !important;
  }

  .xeron-pd-slide {
    padding: 32px 24px !important;
  }

  .xeron-pd-main-img {
    width: min(100%, 330px) !important;
    height: min(100%, 330px) !important;
  }

  .xeron-pd-thumb-swiper {
    height: 82px !important;
    min-height: 82px !important;
    padding: 10px 12px !important;
  }

  .xeron-pd-thumb-swiper .swiper-slide,
  .xeron-pd-thumb {
    width: 58px !important;
    height: 58px !important;
  }

  .xeron-pd-info--carded {
    padding: 34px 24px 44px !important;
  }

  .xeron-pd-title-card h1 {
    font-size: clamp(42px, 13vw, 64px) !important;
  }

  .xeron-pd-title-card h2 {
    font-size: 22px !important;
  }

  .xeron-pd-purchase-card {
    border-radius: 22px !important;
    padding: 18px !important;
  }

  .xeron-pd-purchase-card .xeron-pd-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  .xeron-pd-gallery {
    min-height: 420px !important;
    grid-template-rows: 344px 76px !important;
  }

  .xeron-pd-gallery-main {
    min-height: 344px !important;
  }

  .xeron-pd-main-img {
    width: min(100%, 300px) !important;
    height: min(100%, 300px) !important;
  }
}

/* =========================================================
   XERON Product Detail v14
   Requested simplification:
   1) Remove duplicate action buttons from purchase area.
   2) Purchase card only keeps color options.
   3) Left gallery becomes cleaner and less decorated.
   ========================================================= */

/* ---------- Remove duplicate action area completely ---------- */
.xeron-pd-purchase-card .xeron-pd-actions,
.xeron-pd-actions {
  display: none !important;
}

/* ---------- Purchase card: only color selector ---------- */
.xeron-pd-purchase-card {
  width: min(100%, 760px) !important;
  margin-top: clamp(24px, 3.4vh, 40px) !important;
  padding: 18px 20px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(40,217,255,.075), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(255,62,209,.075), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.050), rgba(255,255,255,.020)) !important;
  box-shadow: none !important;
}

.xeron-pd-purchase-card .xeron-pd-colors-box {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.xeron-pd-purchase-card .xeron-pd-colors-box span {
  font-size: 13px !important;
  color: rgba(255,255,255,.82) !important;
}

.xeron-pd-purchase-card .xeron-pd-colors-box strong {
  margin-top: 4px !important;
  color: var(--xeron-muted) !important;
  font-size: 12px !important;
}

.xeron-pd-purchase-card .xeron-pd-colors {
  gap: 12px !important;
}

.xeron-pd-purchase-card .xeron-pd-color {
  width: 38px !important;
  height: 38px !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.060) !important;
}

.xeron-pd-purchase-card .xeron-pd-color:hover,
.xeron-pd-purchase-card .xeron-pd-color.is-active {
  border-color: rgba(40,217,255,.62) !important;
  box-shadow: 0 0 0 4px rgba(40,217,255,.13) !important;
}

.xeron-pd-purchase-card .xeron-color-dot {
  width: 17px !important;
  height: 17px !important;
}

/* ---------- Left gallery: cleaner product display ---------- */
.xeron-pd-gallery {
  background:
    radial-gradient(circle at 46% 38%, rgba(40,217,255,.12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.012), rgba(0,0,0,.18)) !important;
  border-right: 1px solid rgba(255,255,255,.09) !important;
}

/* Remove the extra large inner glass rectangle */
.xeron-pd-gallery::after,
.xeron-pd-gallery::before {
  display: none !important;
}

.xeron-pd-gallery-main {
  background: transparent !important;
}

.xeron-pd-slide {
  padding: clamp(46px, 6vw, 96px) clamp(40px, 5.8vw, 92px) !important;
}

.xeron-pd-main-img {
  width: min(84%, 800px) !important;
  height: min(84%, 800px) !important;
  max-width: 800px !important;
  max-height: 800px !important;
  filter: drop-shadow(0 36px 70px rgba(0,0,0,.26)) !important;
}

/* Thumbnails become a slim integrated strip */
.xeron-pd-thumb-swiper {
  height: 96px !important;
  min-height: 96px !important;
  padding: 14px clamp(34px, 5vw, 86px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,.014)) !important;
  border-top: 1px solid rgba(255,255,255,.085) !important;
}

.xeron-pd-thumb-swiper .swiper-slide,
.xeron-pd-thumb {
  width: 64px !important;
  height: 64px !important;
}

.xeron-pd-thumb {
  padding: 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.066), rgba(255,255,255,.024)) !important;
  box-shadow: none !important;
}

.swiper-slide-thumb-active .xeron-pd-thumb,
.xeron-pd-thumb:hover {
  border-color: rgba(40,217,255,.56) !important;
  box-shadow: 0 0 0 1px rgba(40,217,255,.14) !important;
}

/* Arrows quieter */
.xeron-pd-swiper-btn {
  width: 40px !important;
  height: 40px !important;
  background: rgba(5,7,18,.42) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.xeron-pd-swiper-btn:hover {
  border-color: rgba(40,217,255,.42) !important;
}

/* ---------- Right column: reduce vertical density after removing buttons ---------- */
.xeron-pd-info--carded {
  padding-top: clamp(54px, 7vh, 92px) !important;
  padding-bottom: clamp(54px, 7vh, 92px) !important;
}

.xeron-pd-desc-card {
  margin-top: clamp(20px, 3vh, 32px) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .xeron-pd-thumb-swiper {
    height: 92px !important;
    min-height: 92px !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-gallery {
    min-height: 430px !important;
    grid-template-rows: 350px 80px !important;
  }

  .xeron-pd-gallery-main {
    min-height: 350px !important;
  }

  .xeron-pd-slide {
    padding: 30px 24px !important;
  }

  .xeron-pd-main-img {
    width: min(100%, 330px) !important;
    height: min(100%, 330px) !important;
  }

  .xeron-pd-thumb-swiper {
    height: 80px !important;
    min-height: 80px !important;
    padding: 10px 12px !important;
  }

  .xeron-pd-thumb-swiper .swiper-slide,
  .xeron-pd-thumb {
    width: 56px !important;
    height: 56px !important;
  }

  .xeron-pd-purchase-card {
    padding: 16px !important;
    border-radius: 20px !important;
  }

  .xeron-pd-purchase-card .xeron-pd-colors-box {
    align-items: flex-start !important;
  }
}

/* =========================================================
   XERON Product Detail v15
   Requested adjustments:
   1) Brighter left product-gallery background, closer to previous v8 feel.
   2) Breadcrumb and product category kicker are now on the same row.
   ========================================================= */

/* ---------- Brighter left main image background ---------- */
.xeron-pd-gallery {
  background:
    radial-gradient(circle at 42% 34%, rgba(40,217,255,.24), transparent 40%),
    radial-gradient(circle at 48% 52%, rgba(255,255,255,.080), transparent 46%),
    radial-gradient(circle at 12% 92%, rgba(255,62,209,.075), transparent 34%),
    linear-gradient(135deg, #0b2531 0%, #111626 52%, #090914 100%) !important;
  border-right: 1px solid rgba(255,255,255,.11) !important;
}

.xeron-pd-gallery-main {
  background:
    radial-gradient(circle at 46% 45%, rgba(255,255,255,.040), transparent 54%),
    transparent !important;
}

.xeron-pd-slide {
  padding: clamp(48px, 6vw, 100px) clamp(42px, 5.8vw, 96px) !important;
}

.xeron-pd-main-img {
  filter:
    drop-shadow(0 40px 76px rgba(0,0,0,.26))
    drop-shadow(0 0 54px rgba(40,217,255,.055)) !important;
}

/* thumbnail strip keeps the same brightened language */
.xeron-pd-thumb-swiper {
  background:
    radial-gradient(circle at 28% 0%, rgba(40,217,255,.10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.xeron-pd-thumb {
  background:
    radial-gradient(circle at 50% 0%, rgba(40,217,255,.09), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.080), rgba(255,255,255,.030)) !important;
}

/* ---------- Kicker + breadcrumb same row ---------- */
.xeron-pd-info-topline {
  width: min(100%, 760px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 clamp(20px, 3vh, 36px);
}

.xeron-pd-info-topline .xeron-pd-kicker {
  flex: 0 0 auto;
  margin: 0 !important;
  color: var(--xeron-blue) !important;
  font-size: 12px !important;
  letter-spacing: .18em !important;
}

.xeron-pd-info-topline .xeron-pd-breadcrumb {
  width: auto !important;
  max-width: 64%;
  margin: 0 !important;
  display: flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.46) !important;
  font-size: 11px !important;
  font-weight: 850;
  min-width: 0;
}

.xeron-pd-info-topline .xeron-pd-breadcrumb em {
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Title no longer needs the top kicker inside the title block */
.xeron-pd-title-card h1 {
  margin-top: 0 !important;
}

/* Avoid older breadcrumb rules pushing it away */
.xeron-pd-info--carded .xeron-pd-breadcrumb {
  margin: 0 !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .xeron-pd-info-topline {
    width: min(100%, 860px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-gallery {
    background:
      radial-gradient(circle at 48% 34%, rgba(40,217,255,.20), transparent 42%),
      radial-gradient(circle at 12% 92%, rgba(255,62,209,.070), transparent 34%),
      linear-gradient(135deg, #0b2230 0%, #101421 56%, #090914 100%) !important;
  }

  .xeron-pd-info-topline {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .xeron-pd-info-topline .xeron-pd-breadcrumb {
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* =========================================================
   XERON Product Detail v16
   Product description becomes a clean feature-card list.
   It supports current backend output:
   <span>• </span>Feature text<br>...
   ========================================================= */

/* Feature list generated from p.xeron-pd-desc */
.xeron-pd-desc-card {
  padding-top: clamp(20px, 2.4vw, 28px) !important;
}

.xeron-pd-desc-card__label {
  margin-bottom: 16px !important;
}

.xeron-pd-desc.is-feature-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin: 0 !important;
  max-width: none !important;
  line-height: 1.45 !important;
}

.xeron-pd-desc__item {
  position: relative;
  min-height: 58px;
  padding: 13px 14px 13px 42px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 100% 0%, rgba(40,217,255,.08), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.060), rgba(255,255,255,.022));
  color: rgba(232,238,255,.86);
  font-size: 12.8px;
  line-height: 1.48;
  font-weight: 700;
  overflow: hidden;
}

.xeron-pd-desc__item::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--xeron-blue), var(--xeron-pink));
  box-shadow: 0 0 0 4px rgba(40,217,255,.10);
}

.xeron-pd-desc__item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .045;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 28px 28px;
}

.xeron-pd-desc__item span,
.xeron-pd-desc__item strong {
  position: relative;
  z-index: 1;
}

.xeron-pd-desc__item:hover {
  border-color: rgba(40,217,255,.30);
  background:
    radial-gradient(circle at 100% 0%, rgba(40,217,255,.12), transparent 42%),
    linear-gradient(145deg, rgba(255,255,255,.078), rgba(255,255,255,.028));
}

/* When a product has many feature lines, keep the hero balanced */
.xeron-pd-info--carded .xeron-pd-desc-card {
  max-width: 760px;
}

/* Compact mode if generated list is long */
.xeron-pd-desc.is-feature-list.has-many-features {
  grid-template-columns: 1fr 1fr;
}

.xeron-pd-desc.is-feature-list.has-many-features .xeron-pd-desc__item {
  min-height: 52px;
  padding-top: 11px;
  padding-bottom: 11px;
  font-size: 12.4px;
}

/* If JS is not loaded, make raw span/br output less ugly */
.xeron-pd-desc:not(.is-feature-list) span {
  color: var(--xeron-blue);
  font-weight: 950;
}

@media (max-width: 1420px) {
  .xeron-pd-desc.is-feature-list {
    grid-template-columns: 1fr !important;
  }

  .xeron-pd-desc__item {
    min-height: 48px;
  }
}

@media (max-width: 720px) {
  .xeron-pd-desc.is-feature-list {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .xeron-pd-desc__item {
    min-height: auto;
    padding: 12px 12px 12px 38px;
    border-radius: 14px;
    font-size: 12.2px;
  }

  .xeron-pd-desc__item::before {
    left: 14px;
    top: 17px;
    width: 8px;
    height: 8px;
  }
}

/* =========================================================
   XERON Product Detail v17
   Thumbnail strip refinement:
   - Less crowded.
   - Larger thumbnail cards.
   - Evenly centered when there is enough horizontal space.
   - Still horizontally scrollable on smaller screens.
   ========================================================= */

.xeron-pd-thumb-swiper {
  height: 112px !important;
  min-height: 112px !important;
  padding: 16px clamp(48px, 6vw, 110px) !important;
  background:
    radial-gradient(circle at 28% 0%, rgba(40,217,255,.105), transparent 36%),
    radial-gradient(circle at 92% 100%, rgba(255,62,209,.080), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.018)) !important;
  border-top: 1px solid rgba(255,255,255,.095) !important;
}

.xeron-pd-thumb-swiper .swiper-wrapper {
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(12px, 1vw, 10px);
}

.xeron-pd-thumb-swiper .swiper-slide {
  width: 78px !important;
  height: 78px !important;
  flex: 0 0 78px !important;
}

.xeron-pd-thumb {
  width: 78px !important;
  height: 78px !important;
  padding: 7px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(40,217,255,.09), transparent 48%),
    linear-gradient(145deg, rgba(255,255,255,.082), rgba(255,255,255,.030)) !important;
  box-shadow: none !important;
}

.swiper-slide-thumb-active .xeron-pd-thumb,
.xeron-pd-thumb:hover {
  border-color: rgba(40,217,255,.60) !important;
  box-shadow:
    0 0 0 1px rgba(40,217,255,.16),
    0 16px 34px rgba(0,0,0,.22) !important;
}

/* Make thumbnail images breathe inside the card */
.xeron-pd-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* If the thumbs overflow, align left so drag/swipe feels natural */
.xeron-pd-thumb-swiper.is-overflowing .swiper-wrapper {
  justify-content: flex-start !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .xeron-pd-thumb-swiper {
    height: 104px !important;
    min-height: 104px !important;
    padding: 14px 38px !important;
  }

  .xeron-pd-thumb-swiper .swiper-slide,
  .xeron-pd-thumb {
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-thumb-swiper {
    height: 84px !important;
    min-height: 84px !important;
    padding: 10px 14px !important;
  }

  .xeron-pd-thumb-swiper .swiper-wrapper {
    justify-content: flex-start !important;
  }

  .xeron-pd-thumb-swiper .swiper-slide,
  .xeron-pd-thumb {
    width: 58px !important;
    height: 58px !important;
    flex-basis: 58px !important;
  }
}

/* =========================================================
   XERON Product Detail v18
   Scroll behavior:
   - Main header hides after scrolling down.
   - Product section nav sticks to the very top when header is hidden.
   - Back-to-top button appears after scrolling.
   ========================================================= */

/* Header smoothly hides when page scrolls down */
.xeron-pd-header {
  transform: translateY(0);
  transition:
    transform .26s ease,
    background .22s ease,
    box-shadow .22s ease,
    border-color .22s ease !important;
  will-change: transform;
}

.xeron-pd-header.is-hidden,
body.xeron-header-hidden .xeron-pd-header {
  transform: translateY(-110%) !important;
  pointer-events: none;
}

/* Detail nav occupies the top after header is hidden */
.xeron-pd-tabs {
  top: var(--xeron-header-h) !important;
  transition:
    top .26s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}

body.xeron-header-hidden .xeron-pd-tabs {
  top: 0 !important;
}

/* When tabs are at the top, slightly strengthen the glass layer */
body.xeron-header-hidden .xeron-pd-tabs {
  background:
    radial-gradient(circle at 0% 50%, rgba(40,217,255,.12), transparent 28%),
    radial-gradient(circle at 100% 50%, rgba(255,62,209,.12), transparent 32%),
    linear-gradient(180deg, rgba(5,6,13,.98), rgba(5,6,13,.92)) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.36) !important;
}

/* Back to top */
.xeron-pd-backtop {
  position: fixed;
  right: clamp(18px, 2.2vw, 34px);
  bottom: clamp(18px, 2.2vw, 34px);
  z-index: 1100;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 30% 0%, rgba(40,217,255,.20), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(255,62,209,.18), transparent 48%),
    rgba(5,7,18,.78);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.96);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.xeron-pd-backtop span {
  display: block;
  font-size: 20px;
  line-height: 1;
  font-weight: 950;
  transform: translateY(-1px);
}

.xeron-pd-backtop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.xeron-pd-backtop:hover {
  border-color: rgba(40,217,255,.48);
  background:
    radial-gradient(circle at 30% 0%, rgba(40,217,255,.28), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(255,62,209,.24), transparent 48%),
    rgba(8,10,24,.90);
}

/* Mobile: detail nav also sticks to top when header hides */
@media (max-width: 720px) {
  body.xeron-header-hidden .xeron-pd-tabs {
    top: 0 !important;
  }

  .xeron-pd-backtop {
    width: 44px;
    height: 44px;
    right: 16px;
    bottom: 16px;
  }
}

/* =========================================================
   XERON Product Detail v19
   Product nav fixed-position fallback:
   Some browsers / CMS wrappers can break position: sticky when an ancestor
   has overflow, transform, or layout containment. This version uses JS to
   add .is-fixed after the nav reaches the top.
   ========================================================= */

/* Default state: still stays in normal document flow before it reaches top */
.xeron-pd-tabs {
  position: relative !important;
  top: auto !important;
  z-index: 900 !important;
}

/* JS fixed state: always visible at browser top after scroll */
.xeron-pd-tabs.is-fixed {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  z-index: 2200 !important;
  margin: 0 !important;
  transform: translateZ(0);
}

/* When the main header is still visible and nav is fixed, place tabs below it.
   When header hides, JS adds body.xeron-header-hidden and tabs move to top. */
body:not(.xeron-header-hidden) .xeron-pd-tabs.is-fixed {
  top: var(--xeron-header-h) !important;
}

body.xeron-header-hidden .xeron-pd-tabs.is-fixed {
  top: 0 !important;
}

/* Prevent content jump when tabs become fixed */
.xeron-pd-tabs-spacer {
  display: none;
  height: 0;
}

.xeron-pd-tabs-spacer.is-active {
  display: block;
  height: var(--xeron-tabs-h, 76px);
}

/* fixed state visual */
.xeron-pd-tabs.is-fixed {
  background:
    radial-gradient(circle at 0% 50%, rgba(40,217,255,.12), transparent 28%),
    radial-gradient(circle at 100% 50%, rgba(255,62,209,.12), transparent 32%),
    linear-gradient(180deg, rgba(5,6,13,.98), rgba(5,6,13,.92)) !important;
  border-top: 0 !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.38) !important;
}

/* The inner nav remains full-screen width */
.xeron-pd-tabs.is-fixed .xeron-pd-tabs__inner {
  width: 100vw !important;
  max-width: none !important;
}

/* Ensure no section can cover the fixed nav */
.xeron-pd-section,
.xeron-pd-showcase,
.xeron-pd-hero {
  z-index: 1;
}

.xeron-pd-tabs.is-fixed {
  z-index: 2200 !important;
}

/* Mobile */
@media (max-width: 720px) {
  .xeron-pd-tabs-spacer.is-active {
    height: var(--xeron-tabs-h-mobile, 58px);
  }

  .xeron-pd-tabs.is-fixed {
    top: 0 !important;
  }

  body:not(.xeron-header-hidden) .xeron-pd-tabs.is-fixed {
    top: var(--xeron-header-h) !important;
  }
}

/* =========================================================
   XERON Product Detail v23
   Airflow animation copied to match uploaded demo:
   - Image 2: right -> left reveal in 4s, then fixed.
   - Image 3: bottom -> top reveal in 4s, then fixed.
   - Uses clip-path, not mask-size.
   - Animation starts only after lazy-loaded image is ready.
   ========================================================= */

/* Layer container: same coordinate system for all three images */
.xeron-pd-feature__media .xeron-pd-airflow-layered {
  position: relative !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #000;
  border-radius: 24px;
}

.xeron-pd-feature__media .xeron-pd-airflow-layered img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Base image */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__base {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  clip-path: none;
  -webkit-clip-path: none;
  filter:
    drop-shadow(0 34px 68px rgba(0,0,0,.30))
    drop-shadow(0 0 36px rgba(40,217,255,.055));
}

/* Airflow images: hidden until JS starts animation */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__air {
  z-index: 2;
  pointer-events: none;
  visibility: visible;
  opacity: 0;
  mix-blend-mode: normal;
  filter:
    drop-shadow(0 0 20px rgba(40,217,255,.18))
    saturate(1.08);
  animation: none;
  will-change: clip-path, opacity;
}

/* 图二：右→左延伸（先右后左） */
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-right-to-left {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}

/* 图三：下→上延伸（先下后上） */
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-bottom-to-top {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
}

/* JS adds these classes after actual images are loaded */
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-right-to-left.animate-right-to-left {
  animation: xeronFadeRightToLeft 4s linear forwards;
}

.xeron-pd-feature__media .xeron-pd-airflow-layered .img-bottom-to-top.animate-bottom-to-top {
  animation: xeronFadeBottomToTop 4s linear forwards;
}

/* 图二关键帧：4秒内完成右→左显示，之后永久固定 */
@keyframes xeronFadeRightToLeft {
  0% { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); opacity: 0; }
  10% { clip-path: inset(0 0 0 95%); -webkit-clip-path: inset(0 0 0 95%); opacity: 0.1; }
  20% { clip-path: inset(0 0 0 90%); -webkit-clip-path: inset(0 0 0 90%); opacity: 0.2; }
  30% { clip-path: inset(0 0 0 80%); -webkit-clip-path: inset(0 0 0 80%); opacity: 0.3; }
  40% { clip-path: inset(0 0 0 60%); -webkit-clip-path: inset(0 0 0 60%); opacity: 0.5; }
  50% { clip-path: inset(0 0 0 40%); -webkit-clip-path: inset(0 0 0 40%); opacity: 0.7; }
  80% { clip-path: inset(0 0 0 20%); -webkit-clip-path: inset(0 0 0 20%); opacity: 0.9; }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
}

/* 图三关键帧：4秒内完成下→上显示，之后永久固定 */
@keyframes xeronFadeBottomToTop {
  0% { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); opacity: 0; }
  10% { clip-path: inset(95% 0 0 0); -webkit-clip-path: inset(95% 0 0 0); opacity: 0.1; }
  20% { clip-path: inset(90% 0 0 0); -webkit-clip-path: inset(90% 0 0 0); opacity: 0.2; }
  30% { clip-path: inset(80% 0 0 0); -webkit-clip-path: inset(80% 0 0 0); opacity: 0.3; }
  40% { clip-path: inset(60% 0 0 0); -webkit-clip-path: inset(60% 0 0 0); opacity: 0.5; }
  50% { clip-path: inset(40% 0 0 0); -webkit-clip-path: inset(40% 0 0 0); opacity: 0.7; }
  80% { clip-path: inset(20% 0 0 0); -webkit-clip-path: inset(20% 0 0 0); opacity: 0.9; }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
}

/* If a browser does not animate for any reason, loaded fallback shows final state */
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-right-to-left.loaded:not(.animate-right-to-left),
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-bottom-to-top.loaded:not(.animate-bottom-to-top) {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Responsive */
@media (max-width: 1180px) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered {
    width: min(100%, 620px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered {
    width: min(100%, 360px) !important;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__air {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
}

/* =========================================================
   XERON Product Detail v24
   Airflow + performance fix:
   1) Base product image loads first.
   2) Arrow images animate only after base image is visible.
   3) Arrow images use screen blend, so black/transparent artwork will not cover the main product.
   4) Broken image icon is avoided by resetting failed images to transparent placeholder.
   5) Below-the-fold overview banner is lazy-loaded.
   ========================================================= */

/* Avoid broken icon / alt text visual noise for lazy images before real src is loaded */
.xeron-pd-page img[src^="data:image/gif"] {
  color: transparent !important;
  font-size: 0 !important;
}

.xeron-pd-page img.is-load-error {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Coordinate system for airflow module */
.xeron-pd-feature__media .xeron-pd-airflow-layered {
  position: relative !important;
  width: min(100%, 700px) !important;
  max-width: 700px !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background: #000 !important;
  border-radius: 24px !important;
}

/* Same canvas for all images */
.xeron-pd-feature__media .xeron-pd-airflow-layered img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Main/base product image: visible first */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__base {
  z-index: 1 !important;
  opacity: 0 !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  transition: opacity .42s ease !important;
  filter:
    drop-shadow(0 34px 68px rgba(0,0,0,.30))
    drop-shadow(0 0 36px rgba(40,217,255,.055)) !important;
}

.xeron-pd-feature__media .xeron-pd-airflow-layered.is-base-ready .xeron-pd-layered__base {
  opacity: 1 !important;
}

/* Arrow airflow images */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__air {
  z-index: 3 !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 0;
  display: block !important;
  object-fit: contain !important;
  object-position: center !important;
  mix-blend-mode: screen !important;
  filter:
    drop-shadow(0 0 20px rgba(40,217,255,.18))
    saturate(1.08) !important;
  animation: none;
  will-change: clip-path, opacity;
}

/* Initial states: match the uploaded demo logic */
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-right-to-left {
  clip-path: inset(0 0 0 100%);
  -webkit-clip-path: inset(0 0 0 100%);
}

.xeron-pd-feature__media .xeron-pd-airflow-layered .img-bottom-to-top {
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
}

/* Animate after JS loads base first */
.xeron-pd-feature__media .xeron-pd-airflow-layered .img-right-to-left.animate-right-to-left {
  animation: xeronFadeRightToLeftV24 4s linear forwards;
}

.xeron-pd-feature__media .xeron-pd-airflow-layered .img-bottom-to-top.animate-bottom-to-top {
  animation: xeronFadeBottomToTopV24 4s linear forwards;
}

/* Right → Left */
@keyframes xeronFadeRightToLeftV24 {
  0% { clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); opacity: 0; }
  10% { clip-path: inset(0 0 0 95%); -webkit-clip-path: inset(0 0 0 95%); opacity: 0.1; }
  20% { clip-path: inset(0 0 0 90%); -webkit-clip-path: inset(0 0 0 90%); opacity: 0.2; }
  30% { clip-path: inset(0 0 0 80%); -webkit-clip-path: inset(0 0 0 80%); opacity: 0.3; }
  40% { clip-path: inset(0 0 0 60%); -webkit-clip-path: inset(0 0 0 60%); opacity: 0.5; }
  50% { clip-path: inset(0 0 0 40%); -webkit-clip-path: inset(0 0 0 40%); opacity: 0.7; }
  80% { clip-path: inset(0 0 0 20%); -webkit-clip-path: inset(0 0 0 20%); opacity: 0.9; }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Bottom → Top */
@keyframes xeronFadeBottomToTopV24 {
  0% { clip-path: inset(100% 0 0 0); -webkit-clip-path: inset(100% 0 0 0); opacity: 0; }
  10% { clip-path: inset(95% 0 0 0); -webkit-clip-path: inset(95% 0 0 0); opacity: 0.1; }
  20% { clip-path: inset(90% 0 0 0); -webkit-clip-path: inset(90% 0 0 0); opacity: 0.2; }
  30% { clip-path: inset(80% 0 0 0); -webkit-clip-path: inset(80% 0 0 0); opacity: 0.3; }
  40% { clip-path: inset(60% 0 0 0); -webkit-clip-path: inset(60% 0 0 0); opacity: 0.5; }
  50% { clip-path: inset(40% 0 0 0); -webkit-clip-path: inset(40% 0 0 0); opacity: 0.7; }
  80% { clip-path: inset(20% 0 0 0); -webkit-clip-path: inset(20% 0 0 0); opacity: 0.9; }
  100% { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; }
}

/* Loaded fallback: if animation is disabled or interrupted, keep final state */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__air.loaded:not(.animate-right-to-left):not(.animate-bottom-to-top) {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* Lazy overview image */
.xeron-pd-showcase__img.xeron-lazy-img {
  opacity: 0;
  transition: opacity .34s ease;
}

.xeron-pd-showcase__img.xeron-lazy-img.is-loaded {
  opacity: 1;
}

/* Responsive */
@media (max-width: 1180px) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered {
    width: min(100%, 620px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered {
    width: min(100%, 360px) !important;
    border-radius: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__base,
  .xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__air {
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
    -webkit-clip-path: inset(0 0 0 0) !important;
    animation: none !important;
  }
}

/* =========================================================
   XERON Product Detail v25
   Airflow module background unification:
   Fixes the "two background colors" issue.
   Cause:
   .xeron-pd-feature__media has a gradient background,
   while .xeron-pd-airflow-layered had background:#000.
   Solution:
   remove the inner black panel and let the airflow visual sit directly
   on the same glass gradient background.
   ========================================================= */

/* Outer media card becomes the only visual background */
.xeron-pd-feature:has(.xeron-pd-airflow-layered) .xeron-pd-feature__media,
.xeron-pd-feature__media:has(.xeron-pd-airflow-layered) {
  background:
    radial-gradient(circle at 28% 18%, rgba(40,217,255,.13), transparent 36%),
    radial-gradient(circle at 88% 88%, rgba(255,62,209,.11), transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* Remove inner black rounded rectangle */
.xeron-pd-feature__media .xeron-pd-airflow-layered {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* No extra inner plate */
.xeron-pd-feature__media .xeron-pd-airflow-layered::before,
.xeron-pd-feature__media .xeron-pd-airflow-layered::after {
  display: none !important;
}

/* Keep the product image visually grounded without adding a black panel */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__base {
  filter:
    drop-shadow(0 34px 68px rgba(0,0,0,.34))
    drop-shadow(0 0 44px rgba(40,217,255,.08)) !important;
}

/* Arrow images keep screen blend so black areas in the arrow artwork do not create a second background */
.xeron-pd-feature__media .xeron-pd-airflow-layered .xeron-pd-layered__air {
  mix-blend-mode: screen !important;
}

/* Give the media area a soft vignette directly on the parent instead of on the inner image box */
.xeron-pd-feature__media:has(.xeron-pd-airflow-layered)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 48% 48%, rgba(0,0,0,.10), transparent 56%),
    radial-gradient(circle at 50% 100%, rgba(40,217,255,.07), transparent 34%);
}

.xeron-pd-feature__media:has(.xeron-pd-airflow-layered) .xeron-pd-airflow-layered {
  z-index: 1;
}

/* Fallback for browsers without :has(): still remove the visible black block */
.xeron-pd-airflow-layered {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Optional: make the airflow product visual slightly larger now that black card is removed */
.xeron-pd-feature__media .xeron-pd-airflow-layered {
  width: min(100%, 740px) !important;
  max-width: 740px !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered {
    width: min(100%, 650px) !important;
  }
}

@media (max-width: 720px) {
  .xeron-pd-feature__media .xeron-pd-airflow-layered {
    width: min(100%, 370px) !important;
  }
}

/* =========================================================
   XERON Product Detail v26
   Mini carousel timing indicator:
   - 3 images auto switch.
   - Bottom progress bar shows the current slide duration.
   - Small bars show current index.
   - Pauses on hover.
   ========================================================= */

.xeron-pd-mini-carousel {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px;
}

.xeron-pd-mini-carousel__item {
  transition:
    opacity .48s ease,
    transform .48s ease,
    filter .48s ease !important;
  transform: scale(.985);
}

.xeron-pd-mini-carousel__item.is-active {
  opacity: 1 !important;
  transform: scale(1);
  z-index: 2;
}

.xeron-pd-mini-carousel__item:not(.is-active) {
  opacity: 0 !important;
  z-index: 1;
}

/* UI layer */
.xeron-pd-mini-carousel__ui {
  position: absolute;
  left: clamp(18px, 3vw, 30px);
  right: clamp(18px, 3vw, 30px);
  bottom: clamp(16px, 2.4vw, 24px);
  z-index: 9;
  pointer-events: none;
  display: grid;
  gap: 10px;
}

.xeron-pd-mini-carousel__bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.xeron-pd-mini-carousel__bars span {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: 0 1px 8px rgba(0,0,0,.22);
  transition:
    width .24s ease,
    background .24s ease,
    opacity .24s ease;
}

.xeron-pd-mini-carousel__bars span.is-active {
  width: 38px;
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink));
}

/* One continuous progress bar */
.xeron-pd-mini-carousel__progress {
  position: relative;
  width: min(280px, 100%);
  height: 4px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.24);
}

.xeron-pd-mini-carousel__progress i {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink));
  box-shadow: 0 0 18px rgba(40,217,255,.28);
}

/* JS adds .is-running on active carousel */
.xeron-pd-mini-carousel.is-running .xeron-pd-mini-carousel__progress i {
  animation: xeronMiniCarouselProgress var(--xeron-mini-carousel-duration, 4000ms) linear forwards;
}

.xeron-pd-mini-carousel.is-paused .xeron-pd-mini-carousel__progress i {
  animation-play-state: paused;
}

@keyframes xeronMiniCarouselProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* Subtle hint on hover */
.xeron-pd-mini-carousel:hover .xeron-pd-mini-carousel__ui {
  opacity: 1;
}

@media (max-width: 720px) {
  .xeron-pd-mini-carousel__ui {
    left: 16px;
    right: 16px;
    bottom: 14px;
    gap: 8px;
  }

  .xeron-pd-mini-carousel__bars span {
    width: 18px;
  }

  .xeron-pd-mini-carousel__bars span.is-active {
    width: 30px;
  }

  .xeron-pd-mini-carousel__progress {
    height: 3px;
  }
}

/* =========================================================
   XERON Product Detail v27
   Mini carousel fix:
   - Remove the three small indicator bars.
   - Keep only one long progress bar.
   - Prevent broken image icons from showing.
   - Only activate images after they load successfully.
   ========================================================= */

/* Hide any leftover three small bars from previous versions */
.xeron-pd-mini-carousel__bars {
  display: none !important;
}

/* Prevent broken image alt/icon from appearing while lazy images are unresolved */
.xeron-pd-mini-carousel img {
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px !important;
}

.xeron-pd-mini-carousel__item {
  opacity: 0 !important;
  visibility: hidden;
  transition:
    opacity .48s ease,
    transform .48s ease,
    filter .48s ease,
    visibility .48s ease !important;
}

.xeron-pd-mini-carousel__item.is-loaded {
  visibility: visible;
}

.xeron-pd-mini-carousel__item.is-active {
  opacity: 1 !important;
  visibility: visible;
  transform: scale(1);
  z-index: 2;
}

.xeron-pd-mini-carousel__item.is-hidden-broken,
.xeron-pd-mini-carousel__item.is-load-error {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Loading placeholder for the carousel area */
.xeron-pd-mini-carousel.is-loading::before,
.xeron-pd-mini-carousel.has-no-valid-images::before {
  content: "";
  position: absolute;
  inset: 18%;
  z-index: 0;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 45%, rgba(40,217,255,.10), transparent 44%),
    rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
}

/* UI: only one long progress bar */
.xeron-pd-mini-carousel__ui {
  position: absolute;
  left: clamp(24px, 4vw, 44px);
  right: clamp(24px, 4vw, 44px);
  bottom: clamp(18px, 2.6vw, 30px);
  z-index: 9;
  pointer-events: none;
  display: block;
}

.xeron-pd-mini-carousel__progress {
  position: relative;
  width: min(360px, 100%);
  height: 4px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 10px 24px rgba(0,0,0,.24);
}

.xeron-pd-mini-carousel__progress i {
  position: absolute;
  left: 0;
  top: 0;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--xeron-blue), var(--xeron-pink));
  box-shadow: 0 0 18px rgba(40,217,255,.28);
}

.xeron-pd-mini-carousel.is-running .xeron-pd-mini-carousel__progress i {
  animation: xeronMiniCarouselProgress var(--xeron-mini-carousel-duration, 4000ms) linear forwards;
}

.xeron-pd-mini-carousel.is-paused .xeron-pd-mini-carousel__progress i {
  animation-play-state: paused;
}

.xeron-pd-mini-carousel.has-no-valid-images .xeron-pd-mini-carousel__ui {
  display: none !important;
}

@keyframes xeronMiniCarouselProgress {
  from { width: 0%; }
  to { width: 100%; }
}

@media (max-width: 720px) {
  .xeron-pd-mini-carousel__ui {
    left: 16px;
    right: 16px;
    bottom: 14px;
  }

  .xeron-pd-mini-carousel__progress {
    height: 3px;
    width: min(280px, 100%);
  }
}