/* Iteration overlay: hero product stack composition. Do not require a Vite rebuild. */
.sp-hero-stack {
    max-width: 100%;
    overflow: visible;
}
.sp-hero-stack__list,
.sp-hero-stack__item,
.sp-hero-stack__card {
    max-width: 100%;
}
.sp-hero-stack--count-1 .sp-hero-stack__item--0 {
    width: 92%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.sp-hero-stack--count-2 .sp-hero-stack__item--0 {
    width: 66%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.sp-hero-stack--count-2 .sp-hero-stack__item--1 {
    width: 64%;
    position: absolute;
    top: 34%;
    right: 0;
    z-index: 2;
}
.sp-hero-stack--count-3 .sp-hero-stack__item--0 {
    width: 62%;
    position: absolute;
    top: 22%;
    left: 19%;
    z-index: 3;
}
.sp-hero-stack--count-3 .sp-hero-stack__item--1 {
    width: 46%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.sp-hero-stack--count-3 .sp-hero-stack__item--2 {
    width: 46%;
    position: absolute;
    top: 6%;
    right: 0;
    z-index: 2;
    display: block;
}
.sp-hero-stack--count-2 .sp-hero-stack__item--0 .sp-hero-stack__card {
    transform: rotate(-2deg) translate(-10px, -8px);
}
.sp-hero-stack--count-2 .sp-hero-stack__item--1 .sp-hero-stack__card {
    transform: rotate(1.5deg) translate(10px, 10px);
}
.sp-hero-stack--count-3 .sp-hero-stack__item--1 .sp-hero-stack__card {
    transform: rotate(-2.2deg) translate(-8px, 4px);
}
.sp-hero-stack--count-3 .sp-hero-stack__item--2 .sp-hero-stack__card {
    transform: rotate(2deg) translate(8px, 6px);
}
.sp-hero-stack--count-3 .sp-hero-stack__item--0 .sp-hero-stack__card {
    transform: rotate(-0.4deg);
}

@media (max-width: 1024px) {
    .sp-hero-stack__list {
        display: grid;
        gap: 0.85rem;
        min-height: 0 !important;
    }
    .sp-hero-stack--count-1 .sp-hero-stack__item--0,
    .sp-hero-stack--count-2 .sp-hero-stack__item--0,
    .sp-hero-stack--count-3 .sp-hero-stack__item--0,
    .sp-hero-stack--count-2 .sp-hero-stack__item--1,
    .sp-hero-stack--count-3 .sp-hero-stack__item--1,
    .sp-hero-stack--count-3 .sp-hero-stack__item--2 {
        width: 100%;
        margin: 0;
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        display: block;
        z-index: 1;
    }
    .sp-hero-stack--count-2 .sp-hero-stack__item--0 .sp-hero-stack__card,
    .sp-hero-stack--count-3 .sp-hero-stack__item--0 .sp-hero-stack__card,
    .sp-hero-stack--count-2 .sp-hero-stack__item--1 .sp-hero-stack__card,
    .sp-hero-stack--count-3 .sp-hero-stack__item--1 .sp-hero-stack__card,
    .sp-hero-stack--count-3 .sp-hero-stack__item--2 .sp-hero-stack__card {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .sp-hero-stack,
    .sp-hero-stack__list,
    .sp-hero-stack__item,
    .sp-hero-stack__card {
        max-width: 100%;
    }
}