.product-showcase-element {
    --product-ink: var(--text-primary);
    --product-muted: color-mix(in srgb, var(--text-sec) 78%, var(--color-hover-text));
    --product-accent: var(--color-primary);
    --product-surface: color-mix(in srgb, var(--color-primary) 6%, var(--color-hover-text));
    --product-border: color-mix(in srgb, var(--text-primary) 18%, transparent);
    color: var(--product-ink);
    background: var(--product-surface);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-family: inherit;
}

.product-showcase-element *,
.product-showcase-element *::before,
.product-showcase-element *::after {
    box-sizing: border-box;
}

.product-showcase-shell {
    position: relative;
    z-index: 2;
    max-width: 1920px;
    margin: 0 auto;
}

.product-showcase-floating-image {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: min(28vw, 26rem);
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.product-showcase-grid {
    display: grid;
    min-height: 42rem;
    align-items: stretch;
    grid-template-columns: minmax(0, 34%) minmax(0, 38%) minmax(18rem, 28%);
}

.product-showcase-gallery,
.product-showcase-content,
.product-showcase-cta {
    height: 100%;
    min-height: 100%;
}

.product-showcase-gallery,
.product-showcase-content {
    padding: 1rem clamp(1.25rem, 3.2vw, 4.2rem);
}

.product-showcase-gallery {
    position: relative;
}

.product-showcase-stage {
    position: relative;
    display: grid;
    min-height: 31rem;
    place-items: center;
}

.product-showcase-slide {
    position: absolute;
    inset: 0;
    display: grid;
    margin: 0;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(.75rem);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
}

.product-showcase-slide.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
}

.product-showcase-slide img {
    width: 100%;
    height: 31rem;
    object-fit: contain;
    filter: drop-shadow(0 1.1rem 1.4rem color-mix(in srgb, var(--color-secondary) 8%, transparent));
}

.product-showcase-arrow,
.product-showcase-expand {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--product-ink);
    background: transparent;
    transition: color .2s ease, background .2s ease;
}

.product-showcase-arrow:hover,
.product-showcase-expand:hover {
    color: var(--product-accent);
    background: color-mix(in srgb, var(--product-surface) 75%, transparent);
}

.product-showcase-arrow {
    top: 48%;
}

.product-showcase-arrow.is-prev {
    right: -.75rem;
}

.product-showcase-arrow.is-next {
    left: -.75rem;
}

.product-showcase-expand {
    top: .5rem;
    left: .5rem;
}

.product-showcase-thumbs {
    display: flex;
    min-height: 5rem;
    gap: .85rem;
    overflow-x: auto;
}

.product-showcase-thumb {
    width: 4.6rem;
    height: 4.6rem;
    flex: 0 0 auto;
    padding: .25rem;
    border: 0;
    border-bottom: 3px solid var(--product-border);
    background: transparent;
}

.product-showcase-thumb.is-active {
    border-color: var(--product-ink);
}

.product-showcase-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-showcase-counter {
    margin-top: .75rem;
    text-align: center;
    direction: ltr;
    font-size: 1.05rem;
}

.product-showcase-counter strong {
    font-size: 1.35rem;
}

.product-showcase-image-placeholder {
    display: grid;
    min-height: 24rem;
    place-items: center;
    align-content: center;
    gap: 1rem;
    color: var(--product-muted);
    text-align: center;
}

.product-showcase-image-placeholder i {
    font-size: 4rem;
    opacity: .35;
}

.product-showcase-content {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.product-showcase-eyebrow {
    margin: 0 0 .45rem;
    color: var(--product-accent);
    font-size: clamp(1rem, 1.3vw, 1.35rem);
    font-weight: 800;
}

.product-showcase-content h1 {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: clamp(2rem, 3vw, 3.55rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -.03em;
    overflow-wrap: break-word;
    font-size: 2rem !important;
}

.product-showcase-code {
    display: inline-flex;
    margin-top: .8rem;
    color: var(--product-muted);
    font-size: .82rem;
}

.product-showcase-description {
    max-width: 45rem;
    margin-top: 1.6rem;
    font-size: clamp(1rem, 1.25vw, 1.24rem);
    line-height: 1.55;
}

.product-showcase-description > :last-child {
    margin-bottom: 0;
}

.product-showcase-features {
    display: grid;
    margin: 1.25rem 0 1.5rem;
    padding: 0;
    gap: .55rem;
    list-style: none;
}

.product-showcase-features li {
    display: grid;
    grid-template-columns: 1.6rem minmax(0, 1fr);
    align-items: start;
    gap: .5rem;
    font-size: clamp(.95rem, 1.15vw, 1.15rem);
}

.product-showcase-feature-text > :first-child {
    margin-top: 0;
}

.product-showcase-feature-text > :last-child {
    margin-bottom: 0;
}

.product-showcase-features i {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .12rem;
    place-items: center;
    border: 2px solid var(--product-accent);
    border-radius: 50%;
    color: var(--product-accent);
    font-size: .62rem;
}

.product-showcase-documents {
    border: 1px solid var(--product-border);
    border-radius: .55rem;
    background: color-mix(in srgb, var(--product-surface) 55%, transparent);
}

.product-showcase-documents summary {
    display: flex;
    padding: 1rem 1.15rem;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 1.05rem;
    font-weight: 800;
    list-style: none;
}

.product-showcase-documents summary::-webkit-details-marker {
    display: none;
}

.product-showcase-documents summary i {
    transition: transform .2s ease;
}

.product-showcase-documents[open] summary i {
    transform: rotate(180deg);
}

.product-showcase-document-body {
    padding: .25rem 1.15rem 1.1rem;
}

.product-showcase-document-group + .product-showcase-document-group {
    margin-top: 1rem;
}

.product-showcase-document-group h2 {
    margin: 0 0 .55rem;
    font-size: .93rem;
    font-weight: 500;
}

.product-showcase-document-group h2 span {
    color: var(--product-muted);
}

.product-showcase-document {
    display: grid;
    padding: .55rem .25rem;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    align-items: start;
    gap: .75rem;
    color: inherit;
    text-decoration: none;
}

.product-showcase-document:hover {
    color: var(--product-accent);
}

.product-showcase-document > i {
    margin-top: .25rem;
}

.product-showcase-document strong,
.product-showcase-document small {
    display: block;
}

.product-showcase-document strong {
    font-size: .9rem;
    font-weight: 500;
}

.product-showcase-document-description {
    display: block;
    margin-top: .15rem;
    color: var(--product-muted);
    font-size: .78rem;
    line-height: 1.55;
}

.product-showcase-document small {
    margin-top: .15rem;
    color: var(--product-muted);
    font-size: .72rem;
}

.product-showcase-document small span + span::before {
    content: " | ";
    margin: 0 .25rem;
}

.product-showcase-document-empty {
    margin: .5rem 0;
    color: var(--product-muted);
    font-size: .85rem;
}

.product-showcase-cta {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    color: var(--product-cta-text);
    background: var(--product-cta-fallback);
}

.product-showcase-cta-background,
.product-showcase-cta-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.product-showcase-cta-background {
    object-fit: cover;
}

.product-showcase-cta-overlay {
    background: linear-gradient(180deg, color-mix(in srgb, var(--color-secondary) 16%, transparent), color-mix(in srgb, var(--color-secondary) 3%, transparent) 55%, color-mix(in srgb, var(--color-secondary) 14%, transparent));
}

.product-showcase-cta-content {
    position: relative;
    z-index: 1;
    padding: clamp(3rem, 7vw, 8rem) clamp(1.5rem, 3.2vw, 3.8rem);
}

.product-showcase-cta h2 {
    max-width: 13ch;
    margin: 0;
    color: inherit;
    font-size: clamp(1.7rem, 2.4vw, 2.75rem);
    font-weight: 900;
    line-height: 1.16;
}

.product-showcase-cta-description {
    margin-top: 1rem;
    color: inherit;
}

.product-showcase-cta-button {
    display: flex;
    min-height: 3.7rem;
    margin-top: 2rem;
    padding: .85rem 1.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    color: var(--product-cta-button-text);
    background: var(--product-cta-button-bg);
    text-align: center;
    text-decoration: none;
    transition: transform .2s ease, filter .2s ease;
}

.product-showcase-cta-button:hover {
    color: var(--product-cta-button-text);
    filter: brightness(.92);
    transform: translateY(-2px);
}

.product-showcase-lightbox {
    width: min(94vw, 80rem);
    height: min(92vh, 60rem);
    padding: 2.5rem;
    border: 0;
    border-radius: .75rem;
    background: var(--product-surface);
}

.product-showcase-lightbox::backdrop {
    background: color-mix(in srgb, var(--color-secondary) 80%, transparent);
}

.product-showcase-lightbox img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-showcase-lightbox button {
    position: absolute;
    top: .75rem;
    left: .75rem;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: var(--product-ink);
    background: var(--product-surface);
}

@media (max-width: 1199.98px) {
    .product-showcase-grid {
        grid-template-columns: 45% 55%;
    }

    .product-showcase-cta {
        min-height: 25rem;
        grid-column: 1 / -1;
    }

    .product-showcase-cta-content {
        max-width: 36rem;
    }
}

@media (max-width: 767.98px) {
    .product-showcase-grid {
        display: flex;
        flex-direction: column;
    }

    .product-showcase-gallery,
    .product-showcase-content {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .product-showcase-stage {
        min-height: 22rem;
    }

    .product-showcase-slide img {
        height: 22rem;
    }

    .product-showcase-content h1 {
        max-width: none;
    }

    .product-showcase-cta {
        min-height: 23rem;
    }

    .product-showcase-cta-content {
        padding: 3rem 1.25rem;
    }

    .product-showcase-arrow.is-prev {
        right: 0;
    }

    .product-showcase-arrow.is-next {
        left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-showcase-element *,
    .product-showcase-element *::before,
    .product-showcase-element *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}