/* XERON Case List Page for PbootCMS
   - Current category banner: {sort:pic}
   - Current category list: {pboot:list}
   - Lazy image placeholders for product cards
*/

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

.xeron-case-page {
  --xeron-text: #f5f7ff;
  --xeron-muted: #9ca6c0;
  --xeron-blue: #28d9ff;
  --xeron-pink: #ff3ed1;
  --xeron-gold: #d8b76a;
  --xeron-line: rgba(255,255,255,.14);
  --xeron-line-strong: rgba(255,255,255,.24);
  --xeron-shadow: 0 34px 100px rgba(0,0,0,.42);

  position: relative;
  z-index: 1;
  min-height: 100vh;
  color: var(--xeron-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.xeron-case-page a {
  color: inherit;
  text-decoration: none;
}

.xeron-case-page img {
  display: block;
  max-width: 100%;
}

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

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

/* Banner hero */
.xeron-case-banner {
  padding: 92px 0 52px;
}

.xeron-case-banner__inner {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border-radius: 36px;
  border: 1px solid var(--xeron-line);
  background:
    radial-gradient(circle at 72% 42%, rgba(40,217,255,.16), transparent 34%),
    radial-gradient(circle at 20% 92%, rgba(255,62,209,.13), transparent 38%),
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow: var(--xeron-shadow);
  isolation: isolate;
}

.xeron-case-banner__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .12;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 72% 48%, #000, transparent 72%);
}

.xeron-case-banner__media,
.xeron-case-banner__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.xeron-case-banner__media img {
  object-fit: cover;
  object-position: center;
}

.xeron-case-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(4,6,19,.92) 0%, rgba(4,6,19,.56) 42%, rgba(4,6,19,.18) 100%),
    linear-gradient(180deg, rgba(4,6,19,.18), rgba(4,6,19,.72));
}

.xeron-case-banner__content {
  position: relative;
  z-index: 4;
  max-width: 620px;
  padding: clamp(34px, 5vw, 58px);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.xeron-case-banner__content h1 {
  margin: 12px 0 0;
  color: var(--xeron-text);
  font-size: clamp(56px, 7vw, 104px);
  line-height: .84;
  letter-spacing: -.08em;
  font-weight: 950;
}

.xeron-case-banner__content p {
  margin: 22px 0 0;
  max-width: 520px;
  color: rgba(224,230,250,.76);
  font-size: 15px;
  line-height: 1.72;
}

.xeron-case-banner__watermark {
  position: absolute;
  right: 26px;
  bottom: 16px;
  z-index: 3;
  color: rgba(255,255,255,.050);
  font-size: clamp(90px, 12vw, 180px);
  line-height: .75;
  letter-spacing: -.08em;
  font-weight: 950;
  pointer-events: none;
}

/* Section */
.xeron-case-section {
  padding: 42px 0 56px;
}

.xeron-case-section--models {
  padding-bottom: 110px;
}

.xeron-case-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 30px;
}

.xeron-case-section__head h2 {
  margin: 10px 0 0;
  color: var(--xeron-text);
  font-size: clamp(46px, 6vw, 82px);
  line-height: .86;
  letter-spacing: -.075em;
  font-weight: 950;
}

.xeron-case-section__head p {
  margin: 0;
  max-width: 430px;
  color: var(--xeron-muted);
  font-size: 15px;
  line-height: 1.65;
  text-align: right;
}

/* Shared card background */
.xeron-flagship-card,
.xeron-model-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--xeron-line);
  background:
    radial-gradient(circle at 74% 22%, rgba(40,217,255,.14), transparent 34%),
    radial-gradient(circle at 20% 94%, rgba(255,62,209,.11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.030));
  box-shadow: 0 24px 70px rgba(0,0,0,.30);
  transition:
    transform .26s ease,
    border-color .26s ease,
    background .26s ease,
    box-shadow .26s ease;
}

.xeron-flagship-card:hover,
.xeron-model-card:hover {
  transform: translateY(-6px);
  border-color: var(--xeron-line-strong);
  background:
    radial-gradient(circle at 74% 22%, rgba(40,217,255,.22), transparent 34%),
    radial-gradient(circle at 20% 94%, rgba(255,62,209,.18), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.044));
  box-shadow: 0 34px 100px rgba(0,0,0,.42);
}

.xeron-flagship-card::before,
.xeron-model-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.24) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 66% 46%, #000, transparent 72%);
}

.xeron-flagship-card::after,
.xeron-model-card::after {
  content: "";
  position: absolute;
  right: -22%;
  bottom: -34%;
  z-index: -1;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.11);
}

/* Featured cards */
.xeron-flagship-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.xeron-flagship-card {
  min-height: 620px;
  padding: 30px;
  border-radius: 30px;
}

.xeron-flagship-card__num {
  position: absolute;
  right: 28px;
  top: 26px;
  z-index: -1;
  color: rgba(255,255,255,.055);
  font-size: clamp(90px, 9vw, 150px);
  line-height: .8;
  letter-spacing: -.08em;
  font-weight: 950;
  pointer-events: none;
}

.xeron-flagship-card__top {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-start;
}

.xeron-flagship-card__top span,
.xeron-model-card__top span {
  display: block;
  color: var(--xeron-muted);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 950;
}

.xeron-flagship-card__top b {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 950;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  transition: .22s ease;
}

.xeron-flagship-card:hover .xeron-flagship-card__top b {
  color: #05060d;
  border-color: transparent;
  background: #fff;
}

.xeron-flagship-card h3 {
  position: relative;
  z-index: 4;
  margin: 14px 0 0;
  color: var(--xeron-text);
  font-size: clamp(52px, 6.2vw, 86px);
  line-height: .82;
  letter-spacing: -.075em;
  font-weight: 950;
}

.xeron-flagship-card p {
  position: relative;
  z-index: 4;
  margin: 16px 0 0;
  max-width: 460px;
  color: var(--xeron-muted);
  font-size: 14px;
  line-height: 1.62;
}

.xeron-flagship-card__image {
  position: absolute;
  right: -2%;
  bottom: 12%;
  z-index: 3;
  width: 74%;
  max-height: 66%;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}

.xeron-flagship-card__image img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 38px 42px rgba(0,0,0,.58));
  transition: opacity .3s ease, transform .35s ease, filter .35s ease;
}

.xeron-flagship-card:hover .xeron-flagship-card__image img {
  transform: translateY(-10px) scale(1.035);
  filter: drop-shadow(0 48px 58px rgba(0,0,0,.66));
}

.xeron-flagship-card__chips {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 28px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

/* Model grid */
.xeron-model-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.xeron-model-card {
  min-height: 430px;
  display: grid;
  grid-template-rows: auto 170px 1fr auto;
  padding: 24px;
  border-radius: 28px;
}

.xeron-model-card__top {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.xeron-model-card__top b {
  color: rgba(255,255,255,.16);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.05em;
  font-weight: 950;
}

.xeron-model-card__visual {
  position: relative;
  z-index: 3;
  margin-top: 12px;
  min-height: 170px;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
}

.xeron-model-card__visual img {
  width: 100%;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 28px 28px rgba(0,0,0,.50));
  transition: opacity .3s ease, transform .32s ease, filter .32s ease;
}

.xeron-model-card:hover .xeron-model-card__visual img {
  transform: translateY(-8px) scale(1.04);
  filter: drop-shadow(0 36px 38px rgba(0,0,0,.60));
}

.xeron-model-card__body {
  position: relative;
  z-index: 4;
}

.xeron-model-card__body h3 {
  margin: 14px 0 0;
  color: var(--xeron-text);
  font-size: 31px;
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 950;
}

.xeron-model-card__body p {
  margin: 12px 0 0;
  color: var(--xeron-muted);
  font-size: 13px;
  line-height: 1.58;
}

.xeron-model-card__footer {
  position: relative;
  z-index: 4;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,.88);
  font-size: 13px;
  font-weight: 950;
}

.xeron-model-card__footer em {
  font-style: normal;
  color: rgba(255,255,255,.62);
  transition: .22s ease;
}

.xeron-model-card:hover .xeron-model-card__footer em {
  color: var(--xeron-blue);
  transform: translateX(4px);
}

/* Chips */
.xeron-flagship-card__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 33px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

/* Transparent placeholder and lazy image state */
.xeron-lazy-img {
  opacity: 0;
  background: transparent;
}

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

.xeron-image-placeholder {
  width: min(160px, 70%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.30);
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -.06em;
}

/* Pagination */
.xeron-case-pagination {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}

.xeron-case-pagination .page-num,
.xeron-case-pagination .page-index,
.xeron-case-pagination .page-pre,
.xeron-case-pagination .page-next,
.xeron-case-pagination .page-last {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.76);
  font-size: 12px;
  font-weight: 900;
}

.xeron-case-pagination .page-num-current {
  background: #fff;
  color: #05060d;
  border-color: transparent;
}

/* Responsive */
@media (max-width: 1080px) {
  .xeron-flagship-grid,
  .xeron-model-grid {
    grid-template-columns: 1fr;
  }

  .xeron-case-section__head {
    display: block;
  }

  .xeron-case-section__head p {
    margin-top: 14px;
    text-align: left;
  }

  .xeron-model-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .xeron-case-container {
    width: min(100% - 28px, 1440px);
  }

  .xeron-case-banner {
    padding-top: 72px;
  }

  .xeron-case-banner__inner {
    min-height: 420px;
    border-radius: 28px;
  }

  .xeron-case-banner__content {
    min-height: 420px;
    padding: 28px;
  }

  .xeron-case-banner__content h1 {
    font-size: clamp(46px, 14vw, 66px);
  }

  .xeron-case-section__head h2 {
    font-size: clamp(42px, 13vw, 60px);
  }

  .xeron-flagship-card {
    min-height: 580px;
    padding: 24px;
    border-radius: 28px;
  }

  .xeron-flagship-card__top {
    display: block;
  }

  .xeron-flagship-card__top b {
    margin-top: 16px;
  }

  .xeron-flagship-card__image {
    width: 86%;
    right: -10%;
    bottom: 15%;
  }

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

  .xeron-model-card {
    min-height: 420px;
  }
}

/* =========================================================
   XERON Case List Pboot v3 Layout Fix
   Based on xeron-case-list-pboot.zip.
   Fixes:
   1) Featured and model product images centered.
   2) Description fixed to one line height with overflow hidden.
   3) Card layout cleaner and more stable.
   ========================================================= */

/* --- Featured card: convert product image from absolute overlay to centered block --- */
.xeron-flagship-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(260px, 1fr) 22px auto !important;
  gap: 16px !important;
  min-height: 560px !important;
  padding: 30px !important;
}

.xeron-flagship-card__top {
  grid-row: 1 !important;
}

.xeron-flagship-card h3 {
  grid-row: 2 !important;
  margin: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.xeron-flagship-card__image {
  grid-row: 3 !important;
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: none !important;
  height: 300px !important;
  max-height: none !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

.xeron-flagship-card__image img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 520px !important;
  max-height: 300px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
}

.xeron-flagship-card:hover .xeron-flagship-card__image img {
  transform: translateY(-6px) scale(1.02) !important;
  filter: none !important;
}

/* Featured description: exactly one line, fixed height */
.xeron-flagship-card > p {
  grid-row: 4 !important;
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  color: #9ca6c0 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.xeron-flagship-card__chips {
  grid-row: 5 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  min-height: 33px !important;
}

/* --- All Models: normal flow centered product image --- */
.xeron-model-card {
  display: grid !important;
  grid-template-rows: auto 185px auto 22px auto !important;
  gap: 14px !important;
  min-height: 430px !important;
  padding: 24px !important;
}

.xeron-model-card__top {
  grid-row: 1 !important;
}

.xeron-model-card__visual {
  grid-row: 2 !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 185px !important;
  min-height: 185px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

.xeron-model-card__visual img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 320px !important;
  max-height: 185px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
}

.xeron-model-card:hover .xeron-model-card__visual img {
  transform: translateY(-5px) scale(1.02) !important;
  filter: none !important;
}

.xeron-model-card__body {
  display: contents !important;
}

.xeron-model-card__body h3 {
  grid-row: 3 !important;
  position: relative !important;
  z-index: 4 !important;
  margin: 0 !important;
  min-height: 34px !important;
  color: #f5f7ff !important;
  font-size: 31px !important;
  line-height: 1.05 !important;
  letter-spacing: -.055em !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
}

/* Model description: exactly one line, fixed height */
.xeron-model-card__body p {
  grid-row: 4 !important;
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  color: #9ca6c0 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.xeron-model-card__footer {
  grid-row: 5 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 4 !important;
  margin-top: 8px !important;
}

/* Placeholder should also center */
.xeron-image-placeholder {
  position: static !important;
  width: min(160px, 70%) !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(255,255,255,.30) !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  letter-spacing: -.06em !important;
}

/* Lazy image state: no blue overlay, no large repaint */
.xeron-lazy-img {
  background: transparent !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.xeron-lazy-img:not(.is-loaded)[data-src] {
  opacity: 0 !important;
}

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

/* Keep cards visually clean */
.xeron-flagship-card::before,
.xeron-flagship-card::after,
.xeron-model-card::before,
.xeron-model-card::after {
  opacity: .06 !important;
}

/* Reduce scroll jank without losing the style */
body {
  background-attachment: scroll !important;
}

.xeron-flagship-card,
.xeron-model-card {
  box-shadow: 0 18px 48px rgba(0,0,0,.30) !important;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

/* Responsive adjustments */
@media (max-width: 720px) {
  .xeron-flagship-card {
    grid-template-rows: auto auto 260px 22px auto !important;
    min-height: 520px !important;
    padding: 24px !important;
  }

  .xeron-flagship-card__image {
    height: 260px !important;
  }

  .xeron-model-card {
    grid-template-rows: auto 175px auto 22px auto !important;
    min-height: 410px !important;
  }

  .xeron-model-card__visual {
    height: 175px !important;
    min-height: 175px !important;
  }
}

/* =========================================================
   XERON Case List Pboot v4
   Based on v3.
   Fixes:
   1) Remove View Details button visual space; whole card is clickable.
   2) Reduce product title size.
   3) Enlarge product image area and keep images centered.
   4) Keep description to one line with fixed height.
   ========================================================= */

/* Whole card clickable affordance */
.xeron-flagship-card,
.xeron-model-card {
  cursor: pointer !important;
}

/* Remove any remaining top CTA pill spacing if old HTML still outputs it */
.xeron-flagship-card__top b,
.xeron-card-top b {
  display: none !important;
}

/* Featured card layout: smaller title, bigger image */
.xeron-flagship-card {
  display: grid !important;
  grid-template-rows: auto auto minmax(360px, 1fr) 22px auto !important;
  gap: 14px !important;
  min-height: 620px !important;
  padding: 30px !important;
}

.xeron-flagship-card__top,
.xeron-card-top {
  min-height: 16px !important;
  align-items: center !important;
}

.xeron-flagship-card h3 {
  margin: 0 !important;
  max-width: 92% !important;
  min-height: auto !important;
  font-size: clamp(40px, 4.35vw, 62px) !important;
  line-height: .90 !important;
  letter-spacing: -.065em !important;
  -webkit-line-clamp: 2 !important;
}

/* Featured image bigger and centered */
.xeron-flagship-card__image {
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  width: 100% !important;
  max-width: none !important;
  height: 360px !important;
  max-height: none !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

.xeron-flagship-card__image img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 620px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
}

/* Use hover only as a subtle card movement, not button-like UI */
.xeron-flagship-card:hover .xeron-flagship-card__image img {
  transform: translateY(-4px) scale(1.025) !important;
}

/* Featured description: fixed one line */
.xeron-flagship-card > p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  color: #9ca6c0 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Featured chips remain at bottom in normal flow */
.xeron-flagship-card__chips {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  min-height: 33px !important;
}

/* Remove visual button-like impression; tags are secondary */
.xeron-flagship-card__chips span {
  background: rgba(0,0,0,.20) !important;
}

/* Model cards: image larger, no footer button, cleaner layout */
.xeron-model-card {
  display: grid !important;
  grid-template-rows: auto 220px auto 22px !important;
  gap: 14px !important;
  min-height: 410px !important;
  padding: 24px !important;
}

.xeron-model-card__visual {
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 220px !important;
  min-height: 220px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.xeron-model-card__visual img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 360px !important;
  max-height: 220px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
}

.xeron-model-card:hover .xeron-model-card__visual img {
  transform: translateY(-4px) scale(1.02) !important;
}

.xeron-model-card__body {
  display: contents !important;
}

.xeron-model-card__body h3 {
  margin: 0 !important;
  min-height: 31px !important;
  font-size: clamp(24px, 2.2vw, 30px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.05em !important;
  -webkit-line-clamp: 1 !important;
}

/* Model description: fixed one line */
.xeron-model-card__body p {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  color: #9ca6c0 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Remove old footer if old HTML still has it */
.xeron-model-card__footer {
  display: none !important;
}

/* Strengthen whole-card click feedback */
.xeron-flagship-card::after,
.xeron-model-card::after {
  pointer-events: none !important;
}

.xeron-flagship-card:hover,
.xeron-model-card:hover {
  border-color: rgba(255,255,255,.28) !important;
}

/* Mobile: title smaller, image still prominent */
@media (max-width: 720px) {
  .xeron-flagship-card {
    grid-template-rows: auto auto 300px 22px auto !important;
    min-height: 560px !important;
    padding: 24px !important;
  }

  .xeron-flagship-card h3 {
    font-size: clamp(34px, 10vw, 48px) !important;
    line-height: .92 !important;
  }

  .xeron-flagship-card__image {
    height: 300px !important;
  }

  .xeron-flagship-card__image img {
    max-height: 300px !important;
  }

  .xeron-model-card {
    grid-template-rows: auto 210px auto 22px !important;
    min-height: 390px !important;
  }

  .xeron-model-card__visual {
    height: 210px !important;
    min-height: 210px !important;
  }

  .xeron-model-card__body h3 {
    font-size: 26px !important;
  }
}

/* =========================================================
   XERON Case List Pboot v6
   Keep original dark tech background/card color.
   Only restructure product cards:
   - Top: title left, category tag right
   - Middle: centered large product image
   - Bottom: black / white color dots
   - Whole card is clickable
   ========================================================= */

/* Remove any button-like CTA still inherited from older versions */
.xeron-flagship-card__top b,
.xeron-card-top b,
.xeron-model-card__footer {
  display: none !important;
}

/* Whole card click behavior */
.xeron-flagship-card,
.xeron-model-card {
  cursor: pointer !important;
}

/* Keep original dark card visual, undo any white-card overrides if loaded previously */
.xeron-model-card {
  color: #f5f7ff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background:
    radial-gradient(circle at 74% 22%, rgba(40,217,255,.14), transparent 34%),
    radial-gradient(circle at 20% 94%, rgba(255,62,209,.11), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.030)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.30) !important;
}

.xeron-model-card:hover {
  border-color: rgba(255,255,255,.24) !important;
  background:
    radial-gradient(circle at 74% 22%, rgba(40,217,255,.20), transparent 34%),
    radial-gradient(circle at 20% 94%, rgba(255,62,209,.16), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.040)) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.40) !important;
}

/* =========================
   Featured cards structure
   ========================= */
.xeron-flagship-card {
  display: grid !important;
  grid-template-rows: auto 22px minmax(360px, 1fr) auto auto !important;
  gap: 14px !important;
  min-height: 620px !important;
  padding: 30px !important;
}

.xeron-flagship-card__top {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 16px !important;
  min-height: auto !important;
}

/* Top right category tag */
.xeron-flagship-card__top span {
  grid-column: 2 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 10px !important;
  letter-spacing: .10em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

/* Product title sits visually top-left */
.xeron-flagship-card h3 {
  grid-row: 1 !important;
  grid-column: 1 !important;
  align-self: start !important;
  margin: 0 !important;
  padding-right: 8px !important;
  max-width: 100% !important;
  min-height: auto !important;
  color: #f5f7ff !important;
  font-size: clamp(34px, 3.6vw, 54px) !important;
  line-height: .92 !important;
  letter-spacing: -.06em !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  z-index: 5 !important;
}

/* One-line description under the top row */
.xeron-flagship-card > p {
  grid-row: 2 !important;
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  color: #9ca6c0 !important;
  font-size: 14px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Product image in the middle */
.xeron-flagship-card__image {
  grid-row: 3 !important;
  position: relative !important;
  inset: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 360px !important;
  max-height: none !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.xeron-flagship-card__image img {
  position: static !important;
  display: block !important;
  width: min(100%, 620px) !important;
  height: min(100%, 360px) !important;
  max-width: 620px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
}

.xeron-flagship-card:hover .xeron-flagship-card__image img {
  transform: translateY(-4px) scale(1.02) !important;
}

/* Color icons at the bottom */
.xeron-flagship-card > .xeron-card-colors {
  grid-row: 4 !important;
}

.xeron-flagship-card__chips {
  grid-row: 5 !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;
  margin-top: 0 !important;
  min-height: 33px !important;
}

/* =========================
   Model cards structure
   ========================= */
.xeron-model-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.xeron-model-card {
  display: grid !important;
  grid-template-rows: auto 22px minmax(320px, 1fr) auto !important;
  gap: 14px !important;
  min-height: 500px !important;
  padding: 24px !important;
  border-radius: 28px !important;
}

/* Top row: title left + tag right */
.xeron-model-card__top {
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 14px !important;
  min-height: auto !important;
  z-index: 5 !important;
}

.xeron-model-card__top b {
  display: none !important;
}

.xeron-model-card__top span {
  grid-column: 2 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.065) !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 10px !important;
  letter-spacing: .10em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
}

/* Put h3 into top-left while preserving existing HTML */
.xeron-model-card__body {
  display: contents !important;
}

.xeron-model-card__body h3 {
  grid-row: 1 !important;
  grid-column: 1 / 2 !important;
  align-self: start !important;
  position: relative !important;
  z-index: 6 !important;
  margin: 0 !important;
  padding-right: 8px !important;
  min-height: 30px !important;
  color: #f5f7ff !important;
  font-size: clamp(24px, 2.25vw, 31px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.05em !important;
  font-weight: 950 !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
}

/* One-line description below top */
.xeron-model-card__body p {
  grid-row: 2 !important;
  grid-column: 1 / -1 !important;
  position: relative !important;
  z-index: 4 !important;
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  max-height: 22px !important;
  margin: 0 !important;
  color: #9ca6c0 !important;
  font-size: 13px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Product image centered in the middle, square-friendly */
.xeron-model-card__visual {
  grid-row: 3 !important;
  position: relative !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 320px !important;
  min-height: 320px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  background: transparent !important;
}

.xeron-model-card__visual img {
  position: static !important;
  display: block !important;
  width: min(100%, 360px) !important;
  height: min(100%, 360px) !important;
  min-width: 320px !important;
  min-height: 320px !important;
  max-width: 380px !important;
  max-height: 380px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  filter: none !important;
  opacity: 1;
}

.xeron-model-card:hover .xeron-model-card__visual img {
  transform: translateY(-4px) scale(1.025) !important;
}

/* Bottom color dots */
.xeron-card-colors {
  grid-row: 4 !important;
  position: relative !important;
  z-index: 5 !important;
  min-height: 22px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  pointer-events: none !important;
}

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

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

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

/* Hide footer/button layout inherited from previous versions */
.xeron-model-card__footer {
  display: none !important;
}

/* Placeholder centered */
.xeron-image-placeholder {
  position: static !important;
  width: min(160px, 70%) !important;
  aspect-ratio: 1 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.035) !important;
  color: rgba(255,255,255,.30) !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  letter-spacing: -.06em !important;
}

/* Lazy image state */
.xeron-lazy-img {
  background: transparent !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.xeron-lazy-img:not(.is-loaded)[data-src] {
  opacity: 0 !important;
}

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

/* Responsive */
@media (max-width: 1180px) {
  .xeron-model-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 720px) {
  .xeron-flagship-card {
    grid-template-rows: auto 22px 310px auto auto !important;
    min-height: 550px !important;
    padding: 24px !important;
  }

  .xeron-flagship-card h3 {
    font-size: clamp(30px, 8vw, 42px) !important;
  }

  .xeron-flagship-card__image {
    height: 310px !important;
  }

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

  .xeron-model-card {
    grid-template-rows: auto 22px 320px auto !important;
    min-height: 500px !important;
    padding: 22px !important;
  }

  .xeron-model-card__visual {
    height: 320px !important;
    min-height: 320px !important;
  }

  .xeron-model-card__visual img {
    min-width: 300px !important;
    min-height: 300px !important;
    max-width: 360px !important;
    max-height: 360px !important;
  }
}

/* =========================================================
   XERON Case List Pboot v7
   Fix All Models tag clipping:
   - Category tag is absolutely placed in the card's top-right corner.
   - Product title reserves right-side space.
   - Tag stays visible and does not overlap/crop.
   ========================================================= */

/* Ensure card can hold absolute-positioned tag safely */
.xeron-model-card {
  position: relative !important;
  overflow: hidden !important;
  padding-top: 24px !important;
}

/* Top wrapper only provides category text; no grid conflict with h3 */
.xeron-model-card__top {
  position: static !important;
  display: block !important;
  min-height: 0 !important;
  height: 0 !important;
  z-index: 8 !important;
}

.xeron-model-card__top b {
  display: none !important;
}

/* Category tag fixed at top-right and fully visible */
.xeron-model-card__top span {
  position: absolute !important;
  top: 24px !important;
  right: 24px !important;
  z-index: 9 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  max-width: 120px !important;
  min-width: 68px !important;
  min-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.075) !important;
  color: rgba(255,255,255,.86) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
  font-weight: 950 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  pointer-events: none !important;
}

/* Product title becomes top-left with enough space for tag */
.xeron-model-card__body h3 {
  grid-row: 1 !important;
  grid-column: 1 / -1 !important;
  padding-right: 132px !important;
  min-height: 32px !important;
  line-height: 1.05 !important;
  overflow: hidden !important;
  white-space: normal !important;
  text-overflow: clip !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
}

/* Description remains one line */
.xeron-model-card__body p {
  padding-right: 0 !important;
  height: 22px !important;
  max-height: 22px !important;
  line-height: 22px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Featured cards can keep the inline tag layout; just make it safe */
.xeron-flagship-card__top {
  overflow: visible !important;
}

.xeron-flagship-card__top span {
  max-width: 126px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Mobile: slightly smaller tag and more title room */
@media (max-width: 720px) {
  .xeron-model-card__top span {
    top: 22px !important;
    right: 22px !important;
    min-width: 62px !important;
    max-width: 102px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
  }

  .xeron-model-card__body h3 {
    padding-right: 112px !important;
  }
}

/* =========================================================
   XERON Case List Pboot v8 Lazy Image UX
   - Product images use transparent placeholder before loading.
   - Real image is loaded from data-src when close to viewport.
   - Image containers keep fixed dimensions, preventing layout jump.
   ========================================================= */

/* Product image containers reserve stable space */
.xeron-flagship-card__image,
.xeron-model-card__visual {
  background: transparent !important;
  overflow: visible !important;
}

/* Transparent placeholder state */
.xeron-lazy-img {
  background: transparent !important;
  opacity: 0 !important;
  transition: opacity .28s ease, transform .22s ease !important;
  will-change: opacity;
}

/* Loaded state */
.xeron-lazy-img.is-loaded,
.xeron-lazy-img:not([data-src]) {
  opacity: 1 !important;
  will-change: auto;
}

/* Avoid browser broken-image icon before JS swaps data-src */
.xeron-lazy-img[src^="data:image/gif"] {
  color: transparent !important;
  font-size: 0 !important;
}

/* Keep product image size stable even while transparent placeholder is active */
.xeron-flagship-card__image .xeron-lazy-img {
  width: min(100%, 620px) !important;
  height: min(100%, 360px) !important;
  max-width: 620px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  object-position: center !important;
}

.xeron-model-card__visual .xeron-lazy-img {
  width: min(100%, 360px) !important;
  height: min(100%, 360px) !important;
  min-width: 320px !important;
  min-height: 320px !important;
  max-width: 380px !important;
  max-height: 380px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* Optional subtle skeleton that stays transparent enough for your dark-card style */
.xeron-flagship-card__image::before,
.xeron-model-card__visual::before {
  content: "";
  position: absolute;
  inset: 12%;
  z-index: -1;
  border-radius: 28px;
  background: radial-gradient(circle, rgba(255,255,255,.035), transparent 62%);
  opacity: .65;
  pointer-events: none;
}

/* Once loaded, image sits above placeholder glow */
.xeron-flagship-card__image img,
.xeron-model-card__visual img {
  position: relative !important;
  z-index: 2 !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .xeron-lazy-img {
    transition: none !important;
  }
}

/* =========================================================
   XERON Case List Pboot v9 Pagination Fix
   - This template uses page=0 on Pboot list tags.
   - Pagination is intentionally removed to avoid duplicate pages/content.
   ========================================================= */

.xeron-case-pagination {
  display: none !important;
}

/* =========================================================
   XERON Case List Pboot v10 Dynamic Color Dots
   Color data comes from:
   {pboot:relation filter=id|[list:ext_xgcp]}
   [relation:source] outputs:
   b = black
   w = white
   ========================================================= */

/* Base dot */
.xeron-color-dot {
  width: 14px !important;
  height: 14px !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.10) !important;
}

/* Dynamic PbootCMS source value: b */
.xeron-color-dot--b,
.xeron-color-dot--black {
  background: #151515 !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}

/* Dynamic PbootCMS source value: w */
.xeron-color-dot--w,
.xeron-color-dot--white {
  background: #f8f9fb !important;
  border: 1px solid rgba(255,255,255,.55) !important;
}

/* Optional graceful fallback if relation outputs unknown source */
.xeron-card-colors .xeron-color-dot:not(.xeron-color-dot--b):not(.xeron-color-dot--w):not(.xeron-color-dot--black):not(.xeron-color-dot--white) {
  background: linear-gradient(135deg, #151515 0 50%, #f8f9fb 50% 100%) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
}

/* If a product has no relation colors, keep space stable but hide the empty row */
.xeron-card-colors:empty {
  visibility: hidden !important;
}