/* Catalog visuals extracted directly from KARON金属画册.pdf. */
.catalog-phead {
  position: relative;
  min-height: clamp(460px, 62vh, 680px);
  isolation: isolate;
  background: #191a2e;
}

.catalog-phead .phead-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -2;
}

.catalog-phead .phead-bg picture,
.catalog-phead .phead-bg img {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-phead .phead-bg img {
  object-fit: cover;
  object-position: var(--catalog-position, center);
}

.catalog-phead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(15, 16, 30, .94) 0%, rgba(15, 16, 30, .72) 38%, rgba(15, 16, 30, .18) 76%, rgba(15, 16, 30, .08) 100%);
}

.catalog-phead .phead-in {
  padding-top: clamp(110px, 16vh, 170px);
  padding-bottom: 64px;
}

.catalog-phead .phead-in > p {
  max-width: 620px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .32);
}

.catalog-phead--split .phead-bg {
  left: auto;
  width: 58%;
}

.catalog-phead--split::before {
  background: linear-gradient(90deg, #17182d 0%, #17182d 39%, rgba(23, 24, 45, .96) 47%, rgba(23, 24, 45, .18) 77%, rgba(23, 24, 45, .06) 100%);
}

.catalog-phead--product .phead-bg img {
  object-fit: contain;
  object-position: right center;
}

.catalog-phead--product .phead-bg {
  background: #0b0b0d;
}

.catalog-phead--accessories .phead-bg {
  left: auto;
  width: 58%;
  background: #f8f5ef;
}

.catalog-phead--accessories .phead-bg img {
  object-fit: contain;
  padding: 32px;
}

.catalog-card--wide {
  grid-column: span 2;
}

.catalog-card--wide .col-img {
  aspect-ratio: 16 / 9;
}

.catalog-card--portrait .col-img {
  aspect-ratio: 4 / 5;
}

.catalog-card--product .col-img {
  aspect-ratio: 4 / 3;
  background: #f8f5ef;
}

.catalog-card--product .col-img img {
  object-fit: contain;
}

.catalog-card--portrait.catalog-card--product .col-img {
  aspect-ratio: 4 / 5;
  background: #0b0b0d;
}

.catalog-secondary {
  margin: 0;
  background: #191a2e;
  overflow: hidden;
}

.catalog-secondary picture,
.catalog-secondary img {
  display: block;
  width: 100%;
}

.catalog-secondary img {
  max-height: 560px;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 760px) {
  .catalog-phead {
    min-height: 560px;
  }

  .catalog-phead .phead-bg,
  .catalog-phead--split .phead-bg,
  .catalog-phead--accessories .phead-bg {
    inset: 0;
    width: 100%;
  }

  .catalog-phead::before,
  .catalog-phead--split::before {
    background: linear-gradient(180deg, rgba(15, 16, 30, .26) 0%, rgba(15, 16, 30, .56) 48%, rgba(15, 16, 30, .95) 100%);
  }

  .catalog-phead--accessories::before {
    background: linear-gradient(180deg, rgba(15, 16, 30, .08), rgba(15, 16, 30, .90) 72%);
  }

  .catalog-phead .phead-in {
    padding-top: 310px;
    padding-bottom: 48px;
  }

  .catalog-phead--product .phead-bg img {
    object-position: center top;
  }
}

@media (max-width: 560px) {
  .col-grid .catalog-card--wide,
  .col-grid .catalog-card--portrait,
  .col-grid .catalog-card--product {
    grid-column: 1 / -1;
  }

  .col-grid .catalog-card--wide .col-img,
  .col-grid .catalog-card--portrait .col-img,
  .col-grid .catalog-card--product .col-img {
    aspect-ratio: 16 / 10;
  }

  .col-grid .col-body {
    min-height: 126px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catalog-phead .phead-bg img {
    transform: none !important;
  }
}