.product-showcase {
  --ps-transition: 0.4s ease;

  overflow: hidden;
  border-radius: var(--dxp-style-radius-md, 8px);
  background: var(--dxp-color-background-primary, #EBECEF);
}

  .product-showcase__grid {
    display: grid !important;
    grid-template-rows: auto 3rem auto;
    grid-template-columns: 1fr;
    max-width: none;
  }

  /* Image area — stacked images with fade transition */

  .product-showcase__media {
    position: relative;
    overflow: hidden;
    grid-row: 1 / 3;
    grid-column: 1 / -1;
    border-radius: var(--dxp-style-radius-md, 8px);
    aspect-ratio: 4 / 3;
  }

  .product-showcase__image {
    position: absolute;
    transition: opacity var(--ps-transition);
    pointer-events: none;
    opacity: 0;
    inset: 0;
  }

  .product-showcase__image.active {
      opacity: 1;
    }

  .product-showcase__image img {
      display: block;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
    }

  .product-showcase__image picture {
      display: block;
      height: 100%;
    }

  /* Surface — right side */

  .product-showcase__surface {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    grid-row: 2 / 4;
    grid-column: 1 / -1;
    padding: 1.5rem;
    border-radius: var(--dxp-style-radius-md, 8px);
    background: #fff;
    margin-inline: 1rem;
  }

  .product-showcase .badge {
    align-self: flex-start;
    margin-bottom: var(--dxp-spacing-4);
  }

  .product-showcase__description {
    font: var(--abb-body-l);
    letter-spacing: 0;

    margin: 0 0 var(--dxp-spacing-6);
    color: var(--dxp-color-foreground-secondary, #262626);
  }

  /* Accordion items */

  .product-showcase__items {
    display: flex;
    flex-direction: column;
  }

  .product-showcase__item {
    display: block;
    width: 100%;
    padding: 1rem 0;
    cursor: pointer;
    transition: padding var(--ps-transition);
    text-align: left;
    border: none;
    background: none;
  }

  .product-showcase__item-title {
    display: block;
    transition: color var(--ps-transition);
    letter-spacing: -0.035rem;
    color: var(--abb-color-foreground-quaternary, #B4B4B4);
    font: normal normal 700 1.75rem/1 var(--dxp-font-family-primary);
  }

  .product-showcase__item-body {
    display: none;
    flex-direction: row;
    align-items: flex-end;
    gap: var(--dxp-spacing-4);
    padding-top: var(--dxp-spacing-3);
  }

  .product-showcase__item-body > *:last-child {
      flex-shrink: 0;
    }

  .product-showcase__item-text {
    font: var(--abb-body-m);

    flex: 1;
    margin: 0;
    color: var(--dxp-color-foreground-tertiary, #898989);
  }

  /* Active accordion item */

  .product-showcase__item.active {
    padding: 1rem 0;
  }

  .product-showcase__item.active .product-showcase__item-title {
      color: var(--dxp-color-foreground-primary, #000);
    }

  .product-showcase__item.active .product-showcase__item-body {
      display: flex;
    }

/* Desktop layout */

@media all and (width >= 1024px) {
    .product-showcase__grid {
      display: grid !important;
      grid-template-rows: 2rem auto 2rem;
      grid-template-columns: repeat(12, 1fr);
      max-width: none;
      min-height: 35rem;
    }

    .product-showcase__media {
      grid-row: 1 / 4;
      grid-column: 1 / 9;
      border-radius: var(--dxp-style-radius-md, 8px);
      aspect-ratio: auto;
    }

    .product-showcase__surface {
      position: relative;
      z-index: 1;
      grid-row: 2 / 3;
      grid-column: 8 / -1;
      padding: 3.5rem;
      margin-inline: 0;
    }

    .product-showcase__description {
      font: var(--abb-body-xl);
      letter-spacing: var(--abb-body-xl--letter-spacing);
    }

    .product-showcase__item-title {
      font-size: 2.25rem;
    }
}