.commerce-showroom-page #page-header,
.commerce-showroom-page .secondary-navigation {
    display: none;
}

.commerce-showroom-page #page,
.commerce-showroom-page #page-content,
.commerce-showroom-page #region-main,
.commerce-showroom-page [role="main"] {
    max-width: none;
    padding: 0;
    margin: 0;
}

.commerce-showroom-page #region-main {
    border: 0;
    background: transparent;
}

.commerce-showroom {
    --showroom-pink: #f61f82;
    --showroom-pink-dark: #d8116c;
    --showroom-purple: #34225f;
    --showroom-ink: #1f1735;
    --showroom-muted: #9d94a8;
    --showroom-line: rgba(52, 34, 95, .12);
    --showroom-surface: #fff7fb;
    --showroom-green: #168d5d;
    position: relative;
    overflow: clip;
    color: var(--showroom-ink);
    background: #fff;
}

.commerce-showroom *,
.commerce-showroom *::before,
.commerce-showroom *::after {
    box-sizing: border-box;
}

.commerce-showroom-container {
    width: min(1180px, calc(100% - 2rem));
    margin-inline: auto;
}

.commerce-showroom-container--narrow {
    width: min(860px, calc(100% - 2rem));
}

.commerce-showroom h1,
.commerce-showroom h2,
.commerce-showroom h3 {
    color: var(--showroom-purple);
    letter-spacing: -.025em;
}

.commerce-showroom h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
}

.commerce-showroom p {
    color: var(--showroom-muted);
}

.commerce-showroom-link,
.commerce-showroom-cart {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: var(--showroom-purple);
    font-weight: 700;
    text-decoration: none;
}

.commerce-showroom-hero {
    position: relative;
    padding: 1.25rem 0 clamp(4rem, 8vw, 7.5rem);
    background:
        radial-gradient(circle at 78% 18%, rgba(246, 31, 130, .13), transparent 25%),
        radial-gradient(circle at 12% 85%, rgba(116, 202, 255, .2), transparent 26%),
        linear-gradient(140deg, #fff 0%, #fff8fb 54%, #f4efff 100%);
}

.commerce-showroom-hero::after,
.commerce-showroom-section--mountains::after {
    content: "";
    position: absolute;
    right: -5%;
    bottom: -2px;
    left: -5%;
    height: 120px;
    opacity: .32;
    background: linear-gradient(135deg, transparent 48%, #dfeaff 49% 55%, transparent 56%) 0 0 / 210px 120px repeat-x;
    pointer-events: none;
}

.commerce-showroom-hero__topline,
.commerce-showroom-toolbar,
.commerce-showroom-hero__actions,
.commerce-showroom-offer__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.commerce-showroom-hero__topline {
    justify-content: space-between;
    margin-bottom: clamp(2.5rem, 5vw, 5rem);
}

.commerce-showroom-toolbar {
    justify-content: flex-end;
}

.commerce-showroom-currency {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .38rem .48rem .38rem .75rem;
    border: 1px solid rgba(246, 31, 130, .25);
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 8px 24px rgba(52, 34, 95, .06);
}

.commerce-showroom-currency label {
    margin: 0;
    color: var(--showroom-purple);
    font-size: .82rem;
    font-weight: 700;
}

.commerce-showroom-currency select {
    min-width: 82px;
    padding: .38rem 1.9rem .38rem .65rem;
    border: 0;
    border-radius: 999px;
    background-color: #fff;
    color: var(--showroom-purple);
    font-weight: 800;
}

.commerce-showroom-cart {
    padding: .7rem 1rem;
    border: 1px solid var(--showroom-line);
    border-radius: 999px;
    background: #fff;
}

.commerce-showroom-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(380px, .98fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 6rem);
}

.commerce-showroom-eyebrow,
.commerce-showroom-offer__role {
    margin: 0 0 .7rem;
    color: var(--showroom-pink);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.commerce-showroom h1 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(2.7rem, 6.5vw, 5.7rem);
    line-height: .98;
}

.commerce-showroom-hero__lead {
    max-width: 720px;
    margin: 1.5rem 0 0;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.65;
}

.commerce-showroom-hero__actions {
    margin-top: 2rem;
}

.commerce-showroom-btn {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .78rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.commerce-showroom-btn:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.commerce-showroom-btn--primary {
    border-color: var(--showroom-pink);
    background: var(--showroom-pink);
    color: #fff;
    box-shadow: 0 14px 30px rgba(246, 31, 130, .23);
}

.commerce-showroom-btn--primary:hover {
    background: var(--showroom-pink-dark);
    color: #fff;
}

.commerce-showroom-btn--ghost {
    border-color: rgba(52, 34, 95, .16);
    background: #fff;
    color: var(--showroom-purple);
}

.commerce-showroom-btn--success {
    background: var(--showroom-green);
    color: #fff;
}

.commerce-showroom-hero__proof {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.25rem;
    font-size: .88rem;
}

.commerce-showroom-hero__proof i {
    color: var(--showroom-green);
}

.commerce-showroom-hero__visual {
    position: relative;
    min-height: 470px;
}

.commerce-showroom-device {
    position: absolute;
    border: 8px solid #251a42;
    background: #fff;
    box-shadow: 0 28px 70px rgba(35, 20, 64, .22);
}

.commerce-showroom-device--desktop {
    top: 20px;
    right: 18px;
    width: min(100%, 500px);
    height: 330px;
    overflow: hidden;
    border-radius: 22px;
    transform: rotate(1.5deg);
}

.commerce-showroom-device--mobile {
    right: -5px;
    bottom: 8px;
    z-index: 3;
    display: grid;
    width: 132px;
    height: 235px;
    place-items: center;
    align-content: center;
    border-width: 7px;
    border-radius: 24px;
    color: var(--showroom-purple);
    transform: rotate(4deg);
}

.commerce-showroom-device--mobile i {
    color: var(--showroom-pink);
    font-size: 2.25rem;
}

.commerce-showroom-device--mobile strong {
    font-size: 2rem;
}

.commerce-showroom-device__bar {
    height: 22px;
    background: #251a42;
}

.commerce-showroom-device__screen {
    position: relative;
    height: calc(100% - 22px);
    padding: 1.25rem;
    background: linear-gradient(#a8dcff 0 42%, #dbeee3 42% 100%);
}

.commerce-showroom-device__stage {
    display: inline-block;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--showroom-purple);
    font-weight: 800;
}

.commerce-showroom-device__mountains {
    position: absolute;
    right: 0;
    bottom: 42%;
    left: 0;
    height: 46%;
    background: linear-gradient(135deg, transparent 47%, #f5f8ff 48% 56%, transparent 57%) 0 0 / 150px 100% repeat-x;
}

.commerce-showroom-device__progress {
    position: absolute;
    right: 1.25rem;
    bottom: 34%;
    left: 1.25rem;
    height: 9px;
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .8);
}

.commerce-showroom-device__progress span {
    display: block;
    width: 62%;
    height: 100%;
    background: var(--showroom-pink);
}

.commerce-showroom-device__quiz {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    display: grid;
    gap: .55rem;
}

.commerce-showroom-device__quiz span {
    display: block;
    height: 22px;
    border: 1px solid rgba(52, 34, 95, .12);
    border-radius: 7px;
    background: #fff;
}

.commerce-showroom-gustave {
    position: absolute;
    bottom: 18px;
    left: 10px;
    z-index: 4;
    display: grid;
    width: 112px;
    height: 112px;
    place-items: center;
    border: 7px solid #fff;
    border-radius: 50%;
    background: #ffd978;
    color: var(--showroom-purple);
    box-shadow: 0 18px 45px rgba(35, 20, 64, .18);
    font-size: 3rem;
}

.commerce-showroom-section,
.commerce-showroom-offers,
.commerce-showroom-video,
.commerce-showroom-faq {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.commerce-showroom-section--soft {
    background: var(--showroom-surface);
}

.commerce-showroom-section--mountains {
    overflow: hidden;
    padding-bottom: clamp(7rem, 12vw, 10rem);
    background: linear-gradient(180deg, #fff, #f4f8ff);
}

.commerce-showroom-section__heading {
    max-width: 820px;
    margin-bottom: 2.4rem;
}

.commerce-showroom-section__heading--center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.commerce-showroom-section__heading p {
    margin: 1rem auto 0;
    font-size: 1.08rem;
    line-height: 1.7;
}

.commerce-showroom-problem-grid,
.commerce-showroom-method-grid,
.commerce-showroom-stats-grid,
.commerce-showroom-exercises-grid {
    display: grid;
    gap: 1rem;
}

.commerce-showroom-problem-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.commerce-showroom-method-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commerce-showroom-stats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.commerce-showroom-exercises-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.commerce-showroom-mini-card,
.commerce-showroom-method-card,
.commerce-showroom-stat,
.commerce-showroom-exercise {
    position: relative;
    padding: 1.35rem;
    border: 1px solid var(--showroom-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(52, 34, 95, .06);
}

.commerce-showroom-mini-card h3,
.commerce-showroom-method-card h3,
.commerce-showroom-stat h3,
.commerce-showroom-exercise h3 {
    margin: 1rem 0 .5rem;
    font-size: 1rem;
}

.commerce-showroom-mini-card p,
.commerce-showroom-method-card p,
.commerce-showroom-stat p,
.commerce-showroom-exercise p {
    margin: 0;
    font-size: .9rem;
    line-height: 1.55;
}

.commerce-showroom-icon {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 13px;
    background: #fff0f7;
    color: var(--showroom-pink);
}

.commerce-showroom-method-card__number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(52, 34, 95, .18);
    font-size: 2.5rem;
    font-weight: 900;
}

.commerce-showroom-video {
    background: #21163d;
}

.commerce-showroom-video h2,
.commerce-showroom-video p {
    color: #fff;
}

.commerce-showroom-video__frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at 70% 30%, rgba(246, 31, 130, .35), transparent 26%),
        linear-gradient(145deg, #38245f, #151025);
    box-shadow: 0 25px 70px rgba(0, 0, 0, .25);
}

.commerce-showroom-video__placeholder {
    display: grid;
    height: 100%;
    place-items: center;
    align-content: center;
    gap: 1rem;
    color: #fff;
}

.commerce-showroom-video__play {
    display: grid;
    width: 74px;
    height: 74px;
    place-items: center;
    border-radius: 50%;
    background: var(--showroom-pink);
    box-shadow: 0 0 0 14px rgba(246, 31, 130, .14);
}

.commerce-showroom-journey {
    display: grid;
    gap: 1rem;
}

.commerce-showroom-journey__step {
    position: relative;
    display: grid;
    grid-template-columns: 46px 48px 1fr;
    align-items: start;
    gap: 1rem;
    padding: 1rem 0;
}

.commerce-showroom-journey__marker {
    z-index: 2;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--showroom-purple);
    color: #fff;
    font-weight: 900;
}

.commerce-showroom-journey__line {
    position: absolute;
    top: 50px;
    bottom: -25px;
    left: 20px;
    width: 2px;
    background: linear-gradient(var(--showroom-pink), rgba(246, 31, 130, .15));
}

.commerce-showroom-journey__step:last-child .commerce-showroom-journey__line {
    display: none;
}

.commerce-showroom-journey h3 {
    margin: 0 0 .3rem;
}

.commerce-showroom-journey p {
    margin: 0;
}

.commerce-showroom-offers {
    background: linear-gradient(180deg, #fff, #fff7fb);
}

.commerce-showroom-offers__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.25rem;
    margin-top: 2rem;
}

.commerce-showroom-offer {
    position: relative;
    display: flex;
    overflow: hidden;
    min-width: 0;
    flex-direction: column;
    border: 1px solid var(--showroom-line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(40, 26, 50, .09);
}

.commerce-showroom-offer.is-featured {
    border: 2px solid var(--showroom-pink);
    transform: translateY(-10px);
    box-shadow: 0 28px 70px rgba(246, 31, 130, .17);
}

.commerce-showroom-offer__featured {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 4;
    padding: .5rem .9rem;
    border-radius: 999px;
    background: var(--showroom-pink);
    color: #fff;
    box-shadow: 0 8px 22px rgba(246, 31, 130, .25);
    font-size: .84rem;
    font-weight: 850;
    line-height: 1.15;
}

.commerce-showroom-offer__visual {
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, #ffe6f0, #eee5ff);
}

.commerce-showroom-offer__visual img,
.commerce-showroom-offer__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commerce-showroom-offer__placeholder {
    display: grid;
    place-items: center;
    color: var(--showroom-pink);
    font-size: 3.25rem;
}

.commerce-showroom-offer__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.5rem;
}

.commerce-showroom-offer__body h3 {
    margin: 0;
    font-size: 1.45rem;
}

.commerce-showroom-offer__description {
    margin-top: .75rem;
    color: var(--showroom-muted);
}

.commerce-showroom-offer__features {
    display: grid;
    gap: .55rem;
    margin: 1.1rem 0;
    padding: 0;
    list-style: none;
}

.commerce-showroom-offer__features li {
    display: flex;
    gap: .55rem;
    align-items: flex-start;
    color: var(--showroom-purple);
    font-size: .9rem;
}

.commerce-showroom-offer__features i {
    margin-top: .18rem;
    color: var(--showroom-green);
}

.commerce-showroom-offer__pricing {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .65rem;
    margin-top: auto;
    padding-top: 1rem;
}

.commerce-showroom-offer__pricing strong {
    color: var(--showroom-purple);
    font-size: 1.8rem;
}

.commerce-showroom-offer__pricing del {
    color: var(--showroom-muted);
}

.commerce-showroom-offer__discount {
    padding: .3rem .5rem;
    border-radius: 8px;
    background: #e9f8f1;
    color: var(--showroom-green);
    font-size: .78rem;
    font-weight: 800;
}

.commerce-showroom-offer__validity {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    max-width: 100%;
    margin: .4rem .55rem 0;
    color: var(--showroom-muted);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

.commerce-showroom-offer__validity-icon {
    flex: 0 0 auto;
    font-size: .9rem;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .commerce-showroom-offer__validity {
        margin-right: .25rem;
        margin-left: .25rem;
        white-space: normal;
    }
}

.commerce-showroom-offer__actions {
    align-items: stretch;
    flex-direction: column;
    margin-top: 1rem;
}

.commerce-showroom-offer__actions form,
.commerce-showroom-offer__actions .commerce-showroom-btn {
    width: 100%;
}

.commerce-showroom-offer__details {
    color: var(--showroom-purple);
    font-weight: 700;
    text-align: center;
}

.commerce-showroom-offer__owned,
.commerce-showroom-offer__pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: #f3eff5;
    color: var(--showroom-muted);
    font-weight: 700;
}

.commerce-showroom-bonus {
    padding: clamp(3rem, 6vw, 5rem) 0;
    background: #21163d;
}

.commerce-showroom-bonus__inner {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 24px;
    background: rgba(255, 255, 255, .06);
}

.commerce-showroom-bonus h2,
.commerce-showroom-bonus p {
    color: #fff;
}

.commerce-showroom-bonus__visual {
    display: grid;
    width: 150px;
    height: 150px;
    place-items: center;
    border-radius: 26px;
    background: linear-gradient(145deg, #ff5ba5, #8057cf);
    color: #fff;
    font-size: 3.8rem;
    transform: rotate(-4deg);
}

.commerce-showroom-faq__list {
    display: grid;
    gap: .7rem;
}

.commerce-showroom-faq__item {
    overflow: hidden;
    border: 1px solid var(--showroom-line);
    border-radius: 14px;
    background: #fff;
}

.commerce-showroom-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    color: var(--showroom-purple);
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.commerce-showroom-faq__item summary::-webkit-details-marker {
    display: none;
}

.commerce-showroom-faq__item[open] summary i {
    transform: rotate(45deg);
}

.commerce-showroom-faq__item summary i {
    color: var(--showroom-pink);
    transition: transform .18s ease;
}

.commerce-showroom-faq__answer {
    padding: 0 1.25rem 1.2rem;
}

.commerce-showroom-faq__answer p {
    margin: 0;
    line-height: 1.7;
}

.commerce-showroom-final {
    padding: clamp(4rem, 10vw, 8rem) 0;
    background:
        radial-gradient(circle at 70% 20%, rgba(246, 31, 130, .3), transparent 30%),
        linear-gradient(145deg, #291b4e, #171024);
}

.commerce-showroom-final__inner {
    max-width: 800px;
    text-align: center;
}

.commerce-showroom-final h2 {
    color: #fff;
    font-size: clamp(2.3rem, 5vw, 4.5rem);
}

.commerce-showroom-final p {
    margin: 1rem auto 1.7rem;
    color: rgba(255, 255, 255, .82);
    font-size: 1.08rem;
}

.commerce-showroom-sticky-cta {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1040;
    display: none;
    align-items: center;
    gap: .55rem;
    padding: .82rem 1rem;
    border-radius: 999px;
    background: var(--showroom-pink);
    color: #fff;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 16px 35px rgba(246, 31, 130, .28);
}

@media (max-width: 1050px) {
    .commerce-showroom-hero__grid {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-hero__visual {
        width: min(620px, 100%);
        margin-inline: auto;
    }

    .commerce-showroom-problem-grid,
    .commerce-showroom-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-showroom-exercises-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .commerce-showroom-offers__grid {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-offer.is-featured {
        transform: none;
    }

    .commerce-showroom-method-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .commerce-showroom-hero__topline,
    .commerce-showroom-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .commerce-showroom-currency,
    .commerce-showroom-cart {
        width: 100%;
        justify-content: space-between;
    }

    .commerce-showroom-hero__visual {
        min-height: 330px;
    }

    .commerce-showroom-device--desktop {
        right: 0;
        left: 0;
        width: 92%;
        height: 250px;
        margin-inline: auto;
    }

    .commerce-showroom-device--mobile {
        width: 100px;
        height: 175px;
    }

    .commerce-showroom-gustave {
        width: 84px;
        height: 84px;
        font-size: 2.2rem;
    }

    .commerce-showroom-problem-grid,
    .commerce-showroom-stats-grid,
    .commerce-showroom-exercises-grid {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-video__frame {
        aspect-ratio: 16 / 9;
    }

    .commerce-showroom-bonus__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .commerce-showroom-bonus__visual {
        margin-inline: auto;
    }

    .commerce-showroom-sticky-cta {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom *,
    .commerce-showroom *::before,
    .commerce-showroom *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}


/* J13E1 — reactive offer cards and featured bundle hierarchy. */
.commerce-showroom-page .storefront-shell__main,
.commerce-showroom-page #page-content,
.commerce-showroom-page .commerce-showroom {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.commerce-showroom-offer--course {
    order: 1;
}

.commerce-showroom-offer--bundle {
    order: 2;
}

.commerce-showroom-offer--pdf {
    order: 3;
}

.commerce-showroom-offer {
    isolation: isolate;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.commerce-showroom-offer:hover,
.commerce-showroom-offer:focus-within {
    z-index: 3;
    border-color: rgba(246, 31, 130, .55);
    transform: translateY(-8px);
    box-shadow: 0 30px 74px rgba(40, 26, 50, .16);
}

.commerce-showroom-offer:hover .commerce-showroom-offer__visual img,
.commerce-showroom-offer:focus-within .commerce-showroom-offer__visual img {
    transform: none;
}

.commerce-showroom-offer__visual {
    overflow: hidden;
}

.commerce-showroom-offer__visual img {
    transition: transform .32s ease;
}

.commerce-showroom-offer .commerce-showroom-btn {
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.commerce-showroom-offer .commerce-showroom-btn:hover,
.commerce-showroom-offer .commerce-showroom-btn:focus-visible {
    transform: translateY(-2px);
}

.commerce-showroom-offer.is-featured {
    z-index: 2;
    min-height: calc(100% + 2.5rem);
    margin-top: -1.25rem;
    margin-bottom: -1.25rem;
    border: 2px solid rgba(246, 31, 130, .88);
    transform: scale(1.065);
    box-shadow:
        0 38px 92px rgba(246, 31, 130, .24),
        0 0 0 5px rgba(246, 31, 130, .075);
}

.commerce-showroom-offer.is-featured:hover,
.commerce-showroom-offer.is-featured:focus-within {
    transform: scale(1.075) translateY(-7px);
    box-shadow:
        0 44px 104px rgba(246, 31, 130, .3),
        0 0 0 6px rgba(246, 31, 130, .1);
}

.commerce-showroom-offer.is-featured .commerce-showroom-offer__body {
    padding: 1.75rem;
}

.commerce-showroom-offer.is-featured .commerce-showroom-offer__pricing strong {
    font-size: 2.1rem;
}

@media (max-width: 991.98px) {
    .commerce-showroom-offers__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .commerce-showroom-offer--bundle {
        order: 1;
    }

    .commerce-showroom-offer--course {
        order: 2;
    }

    .commerce-showroom-offer--pdf {
        order: 3;
    }

    .commerce-showroom-offer.is-featured,
    .commerce-showroom-offer.is-featured:hover,
    .commerce-showroom-offer.is-featured:focus-within {
        min-height: 0;
        margin: 0;
        transform: none;
    }
}

@media (hover: none) {
    .commerce-showroom-offer:hover {
        transform: none;
    }

    .commerce-showroom-offer:active {
        transform: scale(.995);
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-offer,
    .commerce-showroom-offer__visual img,
    .commerce-showroom-offer .commerce-showroom-btn {
        transition: none !important;
    }
}

/* J13F1 — premium immersive Hero. */
.commerce-showroom-hero {
    min-height: min(920px, calc(100vh - 64px));
    isolation: isolate;
    overflow: hidden;
    padding-bottom: clamp(2rem, 4vw, 4.5rem);
    background:
        radial-gradient(circle at 76% 16%, rgba(246, 31, 130, .18), transparent 22%),
        radial-gradient(circle at 14% 72%, rgba(116, 202, 255, .24), transparent 28%),
        linear-gradient(145deg, #ffffff 0%, #fff7fb 43%, #eef3ff 100%);
}

.commerce-showroom-hero::after {
    display: none;
}

.commerce-showroom-hero__inner {
    position: relative;
    z-index: 4;
}

.commerce-showroom-hero__sky,
.commerce-showroom-hero__mountain,
.commerce-showroom-orbit {
    position: absolute;
    pointer-events: none;
}

.commerce-showroom-hero__sky {
    inset: 0;
    z-index: -4;
    opacity: .68;
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .9) 0 5%, transparent 5.4%),
        radial-gradient(circle at 83% 19%, rgba(255, 255, 255, .5) 0 10%, transparent 10.5%),
        linear-gradient(180deg, rgba(180, 223, 255, .28), transparent 64%);
}

.commerce-showroom-hero__mountain {
    right: -8%;
    bottom: -4rem;
    left: 28%;
    z-index: -3;
    height: 56%;
    transform-origin: bottom center;
    clip-path: polygon(0 100%, 11% 72%, 21% 82%, 34% 46%, 43% 61%, 57% 18%, 68% 49%, 79% 34%, 100% 76%, 100% 100%);
}

.commerce-showroom-hero__mountain--back {
    opacity: .54;
    background: linear-gradient(150deg, #d5e4f7 0 46%, #f9fbff 46% 59%, #bdcce1 59% 100%);
    transform: translateY(1.5rem) scale(1.08);
}

.commerce-showroom-hero__mountain--front {
    bottom: -8rem;
    opacity: .86;
    background: linear-gradient(145deg, #c4d8ea 0 47%, #ffffff 47% 58%, #9eb7ca 58% 100%);
    filter: drop-shadow(0 -18px 34px rgba(45, 66, 103, .12));
}

.commerce-showroom-hero__topline {
    position: relative;
    z-index: 6;
    margin-bottom: clamp(2rem, 4vw, 4rem);
}

.commerce-showroom-hero__grid {
    grid-template-columns: minmax(0, .98fr) minmax(420px, 1.02fr);
    min-height: 560px;
}

.commerce-showroom-hero__copy {
    position: relative;
    z-index: 3;
    padding: 1.5rem 0 2rem;
}

.commerce-showroom-hero__expedition {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
    color: var(--showroom-purple);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.commerce-showroom-hero__expedition span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .72rem;
    border: 1px solid rgba(52, 34, 95, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    box-shadow: 0 10px 26px rgba(52, 34, 95, .07);
    backdrop-filter: blur(12px);
}

.commerce-showroom-hero__expedition span:last-child {
    color: var(--showroom-pink-dark);
}

.commerce-showroom-hero h1 {
    max-width: 740px;
    text-wrap: balance;
    font-size: clamp(3.3rem, 7vw, 6.5rem);
    line-height: .91;
    text-shadow: 0 18px 42px rgba(52, 34, 95, .08);
}

.commerce-showroom-hero__lead {
    max-width: 650px;
    font-size: clamp(1.1rem, 1.75vw, 1.38rem);
}

.commerce-showroom-btn--hero {
    min-height: 58px;
    padding: 1rem 1.55rem;
    border-radius: 15px;
    font-size: 1rem;
    box-shadow: 0 20px 48px rgba(246, 31, 130, .31);
}

.commerce-showroom-btn--hero:hover,
.commerce-showroom-btn--hero:focus-visible {
    transform: translateY(-3px) scale(1.012);
    box-shadow: 0 25px 58px rgba(246, 31, 130, .37);
}

.commerce-showroom-btn--glass {
    min-height: 58px;
    border-color: rgba(52, 34, 95, .13);
    background: rgba(255, 255, 255, .75);
    color: var(--showroom-purple);
    box-shadow: 0 14px 36px rgba(52, 34, 95, .09);
    backdrop-filter: blur(14px);
    cursor: pointer;
}

.commerce-showroom-btn--glass:hover,
.commerce-showroom-btn--glass:focus-visible {
    border-color: rgba(246, 31, 130, .34);
    color: var(--showroom-pink-dark);
}

.commerce-showroom-hero__visual {
    min-height: 545px;
    perspective: 1200px;
}

.commerce-showroom-device--desktop {
    top: 48px;
    right: 8px;
    width: min(100%, 548px);
    height: 362px;
    border-width: 9px;
    border-radius: 26px;
    transform: rotateY(-5deg) rotateZ(1deg);
    animation: showroom-float 6.5s ease-in-out infinite;
}

.commerce-showroom-device--desktop::after {
    content: "";
    position: absolute;
    right: 10%;
    bottom: -24px;
    left: 10%;
    height: 22px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(180deg, #aeb3c2, #e9ebf1);
    box-shadow: 0 14px 20px rgba(35, 20, 64, .18);
}

.commerce-showroom-device__bar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding-left: .7rem;
}

.commerce-showroom-device__bar span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .46);
}

.commerce-showroom-device--mobile {
    right: -8px;
    bottom: 12px;
    width: 145px;
    height: 265px;
    overflow: hidden;
    border-radius: 30px;
    transform: rotate(4deg);
    animation: showroom-float-mobile 6s ease-in-out infinite .6s;
}

.commerce-showroom-device__notch {
    position: absolute;
    top: 0;
    left: 50%;
    width: 58px;
    height: 16px;
    border-radius: 0 0 12px 12px;
    background: #251a42;
    transform: translateX(-50%);
}

.commerce-showroom-gustave {
    right: auto;
    bottom: -4px;
    left: 2%;
    z-index: 4;
    display: flex;
    align-items: flex-end;
    gap: .15rem;
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    transform: rotate(-4deg);
    animation: showroom-guide 5.8s ease-in-out infinite .9s;
}

.commerce-showroom-gustave__head {
    display: block;
    font-size: clamp(4.2rem, 8vw, 7.2rem);
    line-height: 1;
    filter: drop-shadow(0 18px 22px rgba(52, 34, 95, .22));
}

.commerce-showroom-gustave__pack {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    margin: 0 0 1.35rem -1.05rem;
    border-radius: 14px;
    background: var(--showroom-pink);
    color: #fff;
    box-shadow: 0 12px 25px rgba(246, 31, 130, .28);
}

.commerce-showroom-orbit {
    z-index: 0;
    border: 1px solid rgba(246, 31, 130, .15);
    border-radius: 50%;
}

.commerce-showroom-orbit--one {
    top: 2%;
    right: -8%;
    width: 470px;
    height: 470px;
}

.commerce-showroom-orbit--two {
    right: 6%;
    bottom: 3%;
    width: 280px;
    height: 280px;
    border-color: rgba(88, 151, 216, .2);
}

.commerce-showroom-hero__stats {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.25rem;
    border: 1px solid rgba(52, 34, 95, .1);
    border-radius: 22px;
    background: rgba(255, 255, 255, .77);
    box-shadow: 0 22px 55px rgba(52, 34, 95, .09);
    backdrop-filter: blur(16px);
}

.commerce-showroom-hero__stats div {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    text-align: center;
}

.commerce-showroom-hero__stats div + div {
    border-left: 1px solid rgba(52, 34, 95, .09);
}

.commerce-showroom-hero__stats strong {
    color: var(--showroom-purple);
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    line-height: 1;
}

.commerce-showroom-hero__stats span {
    margin-top: .4rem;
    color: var(--showroom-muted);
    font-size: .86rem;
    font-weight: 700;
}

.commerce-showroom-hero__summary {
    position: relative;
    z-index: 5;
    max-width: 940px;
    margin: 1.35rem auto 0;
    color: var(--showroom-purple);
    font-weight: 700;
    text-align: center;
}

.commerce-showroom-video__frame {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background: #1f1735;
    box-shadow: 0 34px 85px rgba(35, 20, 64, .22);
    cursor: pointer;
    isolation: isolate;
}

.commerce-showroom-video__poster {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    background:
        linear-gradient(0deg, rgba(31, 23, 53, .48), rgba(31, 23, 53, .04)),
        radial-gradient(circle at 67% 28%, rgba(246, 31, 130, .33), transparent 20%),
        linear-gradient(145deg, #94c9ea 0 42%, #f5f9ff 42% 52%, #7197a8 52% 100%);
    transition: transform .5s ease, filter .5s ease;
}

.commerce-showroom-video__frame:hover .commerce-showroom-video__poster,
.commerce-showroom-video__frame:focus-visible .commerce-showroom-video__poster {
    transform: scale(1.025);
    filter: saturate(1.08);
}

.commerce-showroom-video__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1rem;
    color: #fff;
}

.commerce-showroom-video__placeholder strong {
    color: #fff;
    font-size: clamp(1.1rem, 2vw, 1.45rem);
}

.commerce-showroom-video__play {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--showroom-pink);
    box-shadow: 0 18px 45px rgba(31, 23, 53, .25);
    transition: transform .22s ease;
}

.commerce-showroom-video__frame:hover .commerce-showroom-video__play,
.commerce-showroom-video__frame:focus-visible .commerce-showroom-video__play {
    transform: scale(1.08);
}

.commerce-showroom-video__frame--empty {
    cursor: default;
}

.commerce-showroom-video__player,
.commerce-showroom-video-dialog__player {
    display: block;
    width: 100%;
    background: #0f0b18;
}

.commerce-showroom-video__player {
    max-height: min(78vh, 760px);
    border-radius: 30px;
    box-shadow: 0 34px 85px rgba(35, 20, 64, .22);
}

.commerce-showroom-video-dialog__player {
    max-height: min(78vh, 760px);
    object-fit: contain;
}

.commerce-showroom-video-dialog {
    width: min(1080px, calc(100% - 2rem));
    max-width: none;
    padding: 0;
    border: 0;
    border-radius: 28px;
    background: transparent;
    color: #fff;
    box-shadow: 0 45px 120px rgba(14, 9, 27, .55);
}

.commerce-showroom-video-dialog::backdrop {
    background: rgba(17, 10, 31, .78);
    backdrop-filter: blur(9px);
}

.commerce-showroom-video-dialog__panel {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    background: #171124;
}

.commerce-showroom-video-dialog__stage {
    display: grid;
    min-height: min(68vh, 680px);
    place-items: center;
    padding: 2rem;
    background:
        radial-gradient(circle at 70% 25%, rgba(246, 31, 130, .28), transparent 25%),
        linear-gradient(150deg, #211738, #111827);
}

.commerce-showroom-video-dialog__placeholder {
    max-width: 670px;
    text-align: center;
}

.commerce-showroom-video-dialog__placeholder i {
    margin-bottom: 1.25rem;
    color: var(--showroom-pink);
    font-size: 4rem;
}

.commerce-showroom-video-dialog__placeholder h2,
.commerce-showroom-video-dialog__placeholder p {
    color: #fff;
}

.commerce-showroom-video-dialog__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    background: rgba(255, 255, 255, .13);
    color: #fff;
    cursor: pointer;
}

@keyframes showroom-float {
    0%, 100% { transform: rotateY(-5deg) rotateZ(1deg) translateY(0); }
    50% { transform: rotateY(-4deg) rotateZ(.5deg) translateY(-10px); }
}

@keyframes showroom-float-mobile {
    0%, 100% { transform: rotate(4deg) translateY(0); }
    50% { transform: rotate(3deg) translateY(-8px); }
}

@keyframes showroom-guide {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50% { transform: rotate(-2deg) translateY(-5px); }
}

@media (max-width: 991.98px) {
    .commerce-showroom-hero {
        min-height: auto;
    }

    .commerce-showroom-hero__grid {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .commerce-showroom-hero__copy {
        text-align: center;
    }

    .commerce-showroom-hero__expedition,
    .commerce-showroom-hero__actions,
    .commerce-showroom-hero__proof {
        justify-content: center;
    }

    .commerce-showroom-hero__lead {
        margin-inline: auto;
    }

    .commerce-showroom-hero__visual {
        width: min(100%, 620px);
        min-height: 500px;
        margin-inline: auto;
    }

    .commerce-showroom-hero__mountain {
        left: 8%;
    }
}

@media (max-width: 767.98px) {
    .commerce-showroom-hero {
        padding-top: .8rem;
    }

    .commerce-showroom-hero__topline {
        align-items: stretch;
    }

    .commerce-showroom-toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .commerce-showroom h1 {
        font-size: clamp(3rem, 15vw, 4.6rem);
    }

    .commerce-showroom-hero__actions > * {
        width: 100%;
    }

    .commerce-showroom-hero__visual {
        min-height: 390px;
    }

    .commerce-showroom-device--desktop {
        top: 34px;
        right: 4%;
        width: 92%;
        height: 260px;
    }

    .commerce-showroom-device--mobile {
        right: 1%;
        width: 108px;
        height: 205px;
    }

    .commerce-showroom-gustave__head {
        font-size: 4.4rem;
    }

    .commerce-showroom-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-showroom-hero__stats div:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(52, 34, 95, .09);
    }

    .commerce-showroom-hero__stats div:nth-child(4) {
        border-top: 1px solid rgba(52, 34, 95, .09);
    }

    .commerce-showroom-video__poster {
        aspect-ratio: 4 / 3;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-device--desktop,
    .commerce-showroom-device--mobile,
    .commerce-showroom-gustave {
        animation: none !important;
    }

    .commerce-showroom-video__poster,
    .commerce-showroom-video__play {
        transition: none !important;
    }
}

/* J13F2 — immersive ascent route and interactive exercise explorer. */
.commerce-showroom-ascent {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 8vw, 8rem) 0;
    background:
        radial-gradient(circle at 82% 12%, rgba(255, 105, 180, .18), transparent 30%),
        linear-gradient(180deg, #f7fbff 0%, #eef5fb 45%, #fff 100%);
}

.commerce-showroom-ascent::before,
.commerce-showroom-ascent::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 42%;
    pointer-events: none;
}

.commerce-showroom-ascent::before {
    background: linear-gradient(150deg, transparent 35%, rgba(108, 132, 151, .12) 35.2% 58%, transparent 58.2%);
}

.commerce-showroom-ascent::after {
    background: linear-gradient(205deg, transparent 45%, rgba(255, 255, 255, .9) 45.2% 68%, transparent 68.2%);
}

.commerce-showroom-ascent__route {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: clamp(.8rem, 2vw, 1.6rem);
    margin-top: 4rem;
    padding: 0 1rem 2rem;
}

.commerce-showroom-ascent__track {
    position: absolute;
    top: 4.15rem;
    right: 4%;
    left: 4%;
    height: .35rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(81, 105, 123, .16);
    transform: rotate(-7deg);
    transform-origin: left center;
}

.commerce-showroom-ascent__track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f35f9a, #d93079, #7757d8);
    box-shadow: 0 0 1.2rem rgba(217, 48, 121, .35);
    transition: width 1.2s cubic-bezier(.2, .8, .2, 1);
}

.commerce-showroom-ascent.is-visible .commerce-showroom-ascent__track > span {
    width: 100%;
}

.commerce-showroom-ascent__checkpoint {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity .55s ease, transform .55s ease;
}

.commerce-showroom-ascent__checkpoint:nth-of-type(2) { padding-bottom: 1rem; transition-delay: .08s; }
.commerce-showroom-ascent__checkpoint:nth-of-type(3) { padding-bottom: 2rem; transition-delay: .16s; }
.commerce-showroom-ascent__checkpoint:nth-of-type(4) { padding-bottom: 3rem; transition-delay: .24s; }
.commerce-showroom-ascent__checkpoint:nth-of-type(5) { padding-bottom: 4rem; transition-delay: .32s; }
.commerce-showroom-ascent__checkpoint:nth-of-type(6) { padding-bottom: 5rem; transition-delay: .4s; }

.commerce-showroom-ascent.is-visible .commerce-showroom-ascent__checkpoint {
    opacity: 1;
    transform: none;
}

.commerce-showroom-ascent__altitude {
    margin-bottom: .55rem;
    color: #586b7c;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.commerce-showroom-ascent__marker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: 3.2rem;
    height: 3.2rem;
    align-items: center;
    justify-content: center;
    border: .35rem solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, #ef6aa3, #d93079);
    box-shadow: 0 .65rem 1.5rem rgba(52, 65, 78, .18);
}

.commerce-showroom-ascent__checkpoint--summit .commerce-showroom-ascent__marker {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #f7b84b, #d93079 55%, #7757d8);
    box-shadow: 0 .85rem 2rem rgba(217, 48, 121, .3);
}

.commerce-showroom-ascent__card {
    width: 100%;
    min-height: 13.5rem;
    margin-top: 1rem;
    padding: 1.3rem;
    border: 1px solid rgba(52, 65, 78, .1);
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 1rem 2.6rem rgba(52, 65, 78, .1);
    backdrop-filter: blur(12px);
}

.commerce-showroom-ascent__checkpoint--summit .commerce-showroom-ascent__card {
    border-color: rgba(217, 48, 121, .3);
    background: linear-gradient(160deg, #fff, #fff4f8);
}

.commerce-showroom-ascent__stages {
    display: inline-flex;
    margin-bottom: .8rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    color: #b12162;
    background: #fff0f6;
    font-size: .75rem;
    font-weight: 800;
}

.commerce-showroom-ascent__card h3 {
    margin: 0 0 .55rem;
    font-size: 1.1rem;
}

.commerce-showroom-ascent__card p {
    margin: 0;
    color: #647586;
    font-size: .92rem;
    line-height: 1.6;
}

.commerce-showroom-ascent__legend {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 2rem;
    margin-top: 1.5rem;
    color: #586b7c;
    font-weight: 700;
}

.commerce-showroom-ascent__legend span {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.commerce-showroom-ascent__legend i { color: #d93079; }

.commerce-showroom-explorer {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
}

.commerce-showroom-explorer .commerce-showroom-exercises-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .85rem;
}

.commerce-showroom-exercise {
    display: flex;
    width: 100%;
    min-height: 6.2rem;
    align-items: center;
    gap: .9rem;
    padding: 1rem;
    border: 1px solid rgba(52, 65, 78, .11);
    border-radius: 1.1rem;
    text-align: left;
    color: inherit;
    background: #fff;
    box-shadow: 0 .6rem 1.5rem rgba(52, 65, 78, .06);
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.commerce-showroom-exercise:hover,
.commerce-showroom-exercise:focus-visible,
.commerce-showroom-exercise.is-active {
    border-color: rgba(217, 48, 121, .48);
    background: linear-gradient(135deg, #fff, #fff5f9);
    box-shadow: 0 1rem 2rem rgba(217, 48, 121, .12);
    transform: translateY(-2px);
    outline: none;
}

.commerce-showroom-exercise .commerce-showroom-icon {
    flex: 0 0 auto;
}

.commerce-showroom-exercise strong,
.commerce-showroom-exercise small {
    display: block;
}

.commerce-showroom-exercise strong {
    margin-bottom: .22rem;
    font-size: .95rem;
}

.commerce-showroom-exercise small {
    color: #718191;
    font-size: .78rem;
    line-height: 1.35;
}

.commerce-showroom-exercise-preview {
    position: sticky;
    top: 6rem;
}

.commerce-showroom-exercise-preview__screen {
    overflow: hidden;
    border: .65rem solid #27313b;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 2rem 4rem rgba(31, 42, 54, .2);
}

.commerce-showroom-exercise-preview__toolbar {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.6rem;
    padding: 0 1rem;
    color: #8a98a5;
    background: #f3f5f7;
    font-size: .72rem;
}

.commerce-showroom-exercise-preview__toolbar span {
    width: .58rem;
    height: .58rem;
    border-radius: 50%;
    background: #d4d9de;
}

.commerce-showroom-exercise-preview__toolbar strong {
    margin-left: auto;
    font-size: .72rem;
}

.commerce-showroom-exercise-preview__body {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: 0;
    background: #f9f2ef;
}

.commerce-showroom-exercise-preview__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    background: #f9f2ef;
    opacity: 1;
    transition: opacity .16s ease;
}

.commerce-showroom-exercise-preview__body.is-switching .commerce-showroom-exercise-preview__image {
    opacity: .22;
}

.commerce-showroom-exercise-preview__empty {
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 0;
    place-items: center;
    align-content: center;
    gap: .75rem;
    padding: 2rem;
    color: #89919d;
    text-align: center;
    background: #f9f2ef;
}

.commerce-showroom-exercise-preview__empty i {
    color: #c2c7cf;
    font-size: 2.4rem;
}


.commerce-showroom-exercise-preview__loading {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: rgba(249, 242, 239, .28);
    opacity: 0;
    transition: opacity .12s ease;
}

.commerce-showroom-exercise-preview__body.is-loading .commerce-showroom-exercise-preview__loading {
    opacity: 1;
}

.commerce-showroom-exercise-preview__loading span {
    width: 1.65rem;
    height: 1.65rem;
    border: 2px solid rgba(195, 58, 122, .16);
    border-top-color: #d33e7f;
    border-radius: 50%;
    animation: commerce-showroom-exercise-spin .7s linear infinite;
}

@keyframes commerce-showroom-exercise-spin {
    to {
        transform: rotate(360deg);
    }
}


.commerce-showroom-exercise-mobile-strip,
.commerce-showroom-exercise-mobile-meta {
    display: none;
}


[data-showroom-reveal] {
    transition: opacity .55s ease, transform .55s ease;
}

[data-showroom-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

@media (max-width: 991.98px) {
    .commerce-showroom-ascent__route {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding-left: 3.6rem;
    }

    .commerce-showroom-ascent__track {
        top: 0;
        bottom: 0;
        left: 1.45rem;
        width: .35rem;
        height: auto;
        transform: none;
    }

    .commerce-showroom-ascent__track > span {
        width: 100%;
        height: 0;
        transition-property: height;
    }

    .commerce-showroom-ascent.is-visible .commerce-showroom-ascent__track > span {
        width: 100%;
        height: 100%;
    }

    .commerce-showroom-ascent__checkpoint,
    .commerce-showroom-ascent__checkpoint:nth-of-type(n) {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 1rem;
        padding-bottom: 0;
    }

    .commerce-showroom-ascent__altitude {
        grid-column: 2;
        margin: 0;
    }

    .commerce-showroom-ascent__marker {
        grid-row: 1 / span 2;
        margin-left: -3.55rem;
    }

    .commerce-showroom-ascent__card {
        grid-column: 2;
        min-height: 0;
        margin-top: 0;
    }

    .commerce-showroom-explorer {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-exercise-preview {
        position: static;
        order: -1;
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-explorer .commerce-showroom-exercises-grid {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-exercise-preview__body {
        min-height: 0;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-ascent__track > span,
    .commerce-showroom-ascent__checkpoint,
    .commerce-showroom-exercise,
    [data-showroom-reveal] {
        transition: none !important;
    }
}


/* J16D.1 — comparison heading badge and editorial cell values. */
.commerce-showroom-comparison__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    margin: 0 auto .55rem !important;
    padding: .38rem .82rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .45rem 1.2rem rgba(246, 31, 130, .08);
    font-size: .78rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-comparison__badge i {
    font-size: .95rem;
}

.commerce-showroom-comparison__heading > p:last-child {
    max-width: 52rem;
    margin: .6rem auto 0;
}

.commerce-showroom-comparison__value {
    display: block;
    max-width: 13rem;
    color: #52606d;
    font-size: .84rem;
    font-weight: 650;
    line-height: 1.35;
    text-align: center;
}

.commerce-showroom-comparison__cell--featured .commerce-showroom-comparison__value {
    color: #52606d;
}

@media (max-width: 767.98px) {
    .commerce-showroom-comparison__badge {
        font-size: .72rem !important;
    }
}

/* J13F3 — premium offer comparison. */
.commerce-showroom-comparison {
    padding: clamp(4.5rem, 8vw, 8rem) 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0, rgba(230, 57, 126, .12), transparent 38rem),
        linear-gradient(180deg, #fff 0%, #fff8fb 100%);
}

.commerce-showroom-comparison__scroller {
    overflow-x: auto;
    padding: 1rem .25rem 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(217, 48, 121, .35) transparent;
}

.commerce-showroom-comparison__table {
    min-width: 760px;
    overflow: hidden;
    border: 1px solid rgba(52, 65, 78, .1);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 .8rem 2rem rgba(42, 49, 59, .045);
}

.commerce-showroom-comparison__row {
    display: grid;
    grid-template-columns: minmax(250px, 1.35fr) repeat(3, minmax(150px, 1fr));
    border-top: 1px solid rgba(52, 65, 78, .08);
}

.commerce-showroom-comparison__row--head {
    border-top: 0;
    background: #f1eef4;
}

.commerce-showroom-comparison__feature,
.commerce-showroom-comparison__cell,
.commerce-showroom-comparison__offer {
    min-width: 0;
    padding: 1.15rem 1rem;
    border-left: 1px solid rgba(52, 65, 78, .08);
}

.commerce-showroom-comparison__feature {
    display: flex;
    align-items: center;
    border-left: 0;
    color: #34414e;
    font-weight: 750;
}

.commerce-showroom-comparison__offer {
    display: flex;
    min-height: 8.2rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: transparent;
    color: #25303b;
    text-align: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.commerce-showroom-comparison__offer > span {
    padding: .28rem .6rem;
    border-radius: 999px;
    background: #d93079;
    color: #fff;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.commerce-showroom-comparison__offer strong { font-size: 1.05rem; }
.commerce-showroom-comparison__offer small { color: #d93079; font-size: .92rem; font-weight: 800; }
.commerce-showroom-comparison__offer:hover,
.commerce-showroom-comparison__offer:focus-visible { background: #fff5f9; outline: 0; }
.commerce-showroom-comparison__offer.is-featured,
.commerce-showroom-comparison__cell--featured { background: linear-gradient(180deg, #fff0f6, #fff8fb); }

.commerce-showroom-comparison__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #25a56a;
    font-size: 1.1rem;
}

.commerce-showroom-comparison__cell .fa-minus { color: #aab3bc; }
.commerce-showroom-comparison__cell.is-highlighted,
.commerce-showroom-comparison__offer.is-highlighted { box-shadow: inset 0 0 0 2px rgba(217, 48, 121, .28); }

.commerce-showroom-comparison__cta {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.commerce-showroom-offer.is-comparison-highlighted {
    transform: translateY(-.8rem) scale(1.015);
    border-color: rgba(217, 48, 121, .55);
    box-shadow: 0 2rem 5rem rgba(217, 48, 121, .18);
}

@media (max-width: 767.98px) {
    .commerce-showroom-comparison__scroller {
        margin-right: -1rem;
        padding-right: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-comparison__offer,
    .commerce-showroom-offer { transition: none !important; }
}

/* J13F4 — reassurance, support and conversion. */
.commerce-showroom-why { padding: clamp(4.5rem, 8vw, 8rem) 0; background: #fff; }
.commerce-showroom-why__flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; position: relative; }
.commerce-showroom-why__flow::before { content: ""; position: absolute; top: 2rem; right: 8%; left: 8%; height: 2px; background: linear-gradient(90deg, transparent, rgba(217, 48, 121, .32), transparent); }
.commerce-showroom-why__item { position: relative; z-index: 1; padding: 1.5rem 1rem; border: 1px solid rgba(52, 65, 78, .09); border-radius: 1.25rem; background: rgba(255,255,255,.96); text-align: center; box-shadow: 0 1rem 2.5rem rgba(42,49,59,.06); }
.commerce-showroom-why__item h3 { margin: 1rem 0 .55rem; font-size: 1.05rem; }
.commerce-showroom-why__item p { margin: 0; color: #647586; font-size: .9rem; line-height: 1.6; }
.commerce-showroom-trust { padding: 1.5rem 0; border-top: 1px solid rgba(217,48,121,.1); border-bottom: 1px solid rgba(217,48,121,.1); background: linear-gradient(90deg,#fff8fb,#fff,#fff8fb); }
.commerce-showroom-trust__grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.commerce-showroom-trust__item { display: flex; align-items: center; gap: .85rem; min-width: 0; padding: .65rem; }
.commerce-showroom-trust__item > span { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #fff0f6; color: #d93079; }
.commerce-showroom-trust__item div { display: flex; min-width: 0; flex-direction: column; }
.commerce-showroom-trust__item strong { color: #25303b; font-size: .92rem; }
.commerce-showroom-trust__item small { overflow: hidden; color: #73808d; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.commerce-showroom-faq__item { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.commerce-showroom-faq__item[open] { transform: translateY(-2px); border-color: rgba(217,48,121,.3); box-shadow: 0 1.15rem 2.8rem rgba(42,49,59,.08); }
.commerce-showroom-faq__item summary i { transition: transform .2s ease; }
.commerce-showroom-faq__item[open] summary i { transform: rotate(45deg); }
.commerce-showroom-final__inner { position: relative; }
.commerce-showroom-expedition-card { display: inline-flex; align-items: center; gap: .9rem; margin-top: 2rem; padding: .85rem 1rem; border: 1px solid rgba(255,255,255,.24); border-radius: 1.1rem; background: rgba(255,255,255,.1); color: #fff; text-align: left; backdrop-filter: blur(10px); }
.commerce-showroom-expedition-card__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: 50%; background: rgba(255,255,255,.16); }
.commerce-showroom-expedition-card div { display: flex; flex-direction: column; }
.commerce-showroom-expedition-card strong { font-size: .92rem; }
.commerce-showroom-expedition-card span,.commerce-showroom-expedition-card small { color: rgba(255,255,255,.78); font-size: .76rem; }
.commerce-showroom-desktop-sticky { position: fixed; z-index: 1045; right: 0; bottom: 1.25rem; left: 0; pointer-events: none; }
.commerce-showroom-desktop-sticky[hidden] { display: none !important; }
.commerce-showroom-desktop-sticky__inner { display: flex; width: min(680px,calc(100vw - 3rem)); align-items: center; justify-content: space-between; gap: 1rem; margin: 0 auto; padding: .75rem .8rem .75rem 1.25rem; border: 1px solid rgba(217,48,121,.18); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 1.2rem 3.5rem rgba(42,49,59,.18); pointer-events: auto; backdrop-filter: blur(16px); }
.commerce-showroom-desktop-sticky__inner > div { display: flex; align-items: baseline; gap: .75rem; }
.commerce-showroom-desktop-sticky__inner small { color: #647586; font-weight: 700; }
.commerce-showroom-desktop-sticky__inner strong { color: #d93079; font-size: 1.2rem; }
.commerce-showroom-desktop-sticky .commerce-showroom-btn { min-height: 3rem; padding: .75rem 1.25rem; }
@media (max-width: 991.98px) { .commerce-showroom-why__flow { grid-template-columns: repeat(2,minmax(0,1fr)); } .commerce-showroom-why__flow::before { display: none; } .commerce-showroom-trust__grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .commerce-showroom-desktop-sticky { display: none !important; } }
@media (max-width: 575.98px) { .commerce-showroom-why__flow,.commerce-showroom-trust__grid { grid-template-columns: 1fr; } .commerce-showroom-trust__item small { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .commerce-showroom-faq__item,.commerce-showroom-faq__item summary i { transition: none !important; } }

/* J13F5 — production readiness, accessibility and print polish. */
.commerce-showroom-skip-link {
    position: fixed;
    z-index: 1200;
    top: .75rem;
    left: .75rem;
    padding: .75rem 1rem;
    transform: translateY(-180%);
    border-radius: .75rem;
    background: #25303b;
    color: #fff;
    font-weight: 800;
    transition: transform .18s ease;
}
.commerce-showroom-skip-link:focus {
    transform: translateY(0);
    color: #fff;
}
.commerce-showroom :where(a, button, select, summary, [tabindex]):focus-visible {
    outline: 3px solid rgba(217, 48, 121, .55);
    outline-offset: 4px;
}
.commerce-showroom img { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
    .commerce-showroom *,
    .commerce-showroom *::before,
    .commerce-showroom *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
@media print {
    .commerce-showroom-hero,
    .commerce-showroom-video,
    .commerce-showroom-desktop-sticky,
    [data-showroom-sticky-cta],
    .commerce-showroom-support,
    .commerce-showroom-toolbar {
        display: none !important;
    }
    .commerce-showroom,
    .commerce-showroom-section,
    .commerce-showroom-offers,
    .commerce-showroom-comparison,
    .commerce-showroom-why,
    .commerce-showroom-trust,
    .commerce-showroom-faq {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
    }
    .commerce-showroom-container {
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
    }
    .commerce-showroom-offer,
    .commerce-showroom-faq__item,
    .commerce-showroom-comparison__table {
        break-inside: avoid;
        box-shadow: none !important;
    }
}


/* J13F6 — cinematic experience. */
.commerce-showroom-hero {
    --showroom-parallax: 0px;
    --showroom-parallax-soft: 0px;
    isolation: isolate;
}

.commerce-showroom-hero__sky,
.commerce-showroom-hero__mountain--back,
.commerce-showroom-hero__mountain--front {
    will-change: transform;
}

.commerce-showroom-hero__sky {
    transform: translate3d(0, calc(var(--showroom-parallax-soft) * -1), 0);
}

.commerce-showroom-hero__mountain--back {
    transform: translate3d(0, var(--showroom-parallax-soft), 0);
}

.commerce-showroom-hero__mountain--front {
    transform: translate3d(0, var(--showroom-parallax), 0);
}

.commerce-showroom-hero__cloud,
.commerce-showroom-hero__light {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.commerce-showroom-hero__cloud {
    width: clamp(240px, 28vw, 520px);
    height: clamp(70px, 9vw, 150px);
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .72), rgba(255, 255, 255, 0) 70%);
    filter: blur(10px);
    opacity: .55;
    animation: commerce-showroom-cloud-drift 32s ease-in-out infinite alternate;
}

.commerce-showroom-hero__cloud--one {
    top: 12%;
    left: -8%;
}

.commerce-showroom-hero__cloud--two {
    top: 28%;
    right: -10%;
    animation-duration: 41s;
    animation-direction: alternate-reverse;
}

.commerce-showroom-hero__light {
    top: -12%;
    right: 12%;
    width: min(52vw, 760px);
    height: min(52vw, 760px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 247, 213, .55), rgba(255, 221, 239, .17) 38%, transparent 70%);
    filter: blur(12px);
    animation: commerce-showroom-light-breathe 9s ease-in-out infinite;
}

.commerce-showroom-gustave {
    animation: commerce-showroom-guide-breathe 5.5s ease-in-out infinite;
    transform-origin: 50% 100%;
}

.commerce-showroom-video__play {
    animation: commerce-showroom-play-pulse 5s ease-in-out infinite;
}

.commerce-showroom-offer__visual {
    --showroom-tilt-x: 0deg;
    --showroom-tilt-y: 0deg;
    isolation: isolate;
    perspective: 900px;
    transform: rotateX(var(--showroom-tilt-x)) rotateY(var(--showroom-tilt-y));
    transform-style: preserve-3d;
    transition: transform .22s ease;
}

.commerce-showroom-offer__visual img,
.commerce-showroom-offer__placeholder {
    position: relative;
    z-index: 2;
    transform: translateZ(18px) scale(.92);
    border-radius: 18px;
    box-shadow: 0 22px 38px rgba(39, 25, 64, .2);
}

.commerce-showroom-offer__packaging {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.commerce-showroom-offer__packaging span {
    position: absolute;
    display: block;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 14px;
    background: rgba(255, 255, 255, .45);
    box-shadow: 0 14px 28px rgba(55, 35, 79, .14);
    backdrop-filter: blur(8px);
}

.commerce-showroom-offer--pdf .commerce-showroom-offer__packaging span:first-child {
    right: 10%;
    bottom: 8%;
    width: 30%;
    height: 58%;
    transform: rotate(7deg);
}

.commerce-showroom-offer--course .commerce-showroom-offer__packaging span:first-child,
.commerce-showroom-offer--bundle .commerce-showroom-offer__packaging span:first-child {
    right: 7%;
    bottom: 9%;
    width: 28%;
    height: 54%;
    border-radius: 18px;
}

.commerce-showroom-offer--course .commerce-showroom-offer__packaging span:nth-child(2),
.commerce-showroom-offer--bundle .commerce-showroom-offer__packaging span:nth-child(2) {
    left: 8%;
    bottom: 10%;
    width: 57%;
    height: 42%;
}

.commerce-showroom-offer--bundle .commerce-showroom-offer__packaging span:nth-child(3) {
    right: 24%;
    bottom: 4%;
    width: 22%;
    height: 48%;
    transform: rotate(5deg);
}

.commerce-showroom-ascent {
    --showroom-ascent-progress: 0%;
}

.commerce-showroom-ascent__track > span {
    width: var(--showroom-ascent-progress) !important;
    transition: width .15s linear;
}

@keyframes commerce-showroom-cloud-drift {
    from { transform: translate3d(-2vw, 0, 0) scale(.95); }
    to { transform: translate3d(12vw, 12px, 0) scale(1.08); }
}

@keyframes commerce-showroom-light-breathe {
    0%, 100% { opacity: .65; transform: scale(.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes commerce-showroom-guide-breathe {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
    50% { transform: translate3d(0, -6px, 0) rotate(1deg); }
}

@keyframes commerce-showroom-play-pulse {
    0%, 84%, 100% { transform: scale(1); box-shadow: 0 12px 30px rgba(246, 31, 130, .24); }
    90% { transform: scale(1.07); box-shadow: 0 15px 40px rgba(246, 31, 130, .38); }
}

@media (max-width: 767.98px) {
    .commerce-showroom-offers__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-auto-flow: row;
        gap: 1.5rem;
        overflow: visible;
        padding: 1rem 0 0;
        scroll-snap-type: none;
    }

    .commerce-showroom-offer {
        width: 100%;
        max-width: none;
        scroll-snap-align: none;
    }

    .commerce-showroom-offer--bundle {
        order: 1;
    }

    .commerce-showroom-offer--course {
        order: 2;
    }

    .commerce-showroom-offer--pdf {
        order: 3;
    }

    .commerce-showroom-offer.is-featured,
    .commerce-showroom-offer.is-featured:hover,
    .commerce-showroom-offer.is-featured:focus-within {
        margin: 0;
        transform: none;
        box-shadow:
            0 26px 64px rgba(246, 31, 130, .2),
            0 0 0 4px rgba(246, 31, 130, .07);
    }

    .commerce-showroom-offer__featured {
        top: .75rem;
        right: .75rem;
        padding: .52rem .92rem;
        font-size: .86rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-hero__cloud,
    .commerce-showroom-hero__light,
    .commerce-showroom-gustave,
    .commerce-showroom-video__play {
        animation: none !important;
    }

    .commerce-showroom-offer__visual {
        transform: none !important;
        transition: none !important;
    }

    .commerce-showroom-ascent__track > span {
        transition: none !important;
    }
}


/* J13H1 — certification polish. */
.commerce-showroom-hero__inner { padding-top: 1rem; }
.commerce-showroom-hero__expedition--top { margin: 0 0 1.5rem; }
.commerce-showroom-device--mobile-spaced span { display: block; padding: 0 .8rem .75rem; line-height: 1.35; text-align: center; }
.commerce-showroom-gustave__head { display: grid; width: 3.5rem; height: 4.4rem; place-items: center; border-radius: 1.4rem 1.4rem 1.1rem 1.1rem; background: linear-gradient(145deg,#d69a4a,#8a5426); color: #fff2d3; font-size: 2rem; box-shadow: 0 .8rem 2rem rgba(56,31,15,.2); }
.commerce-showroom-offers__toolbar { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-bottom: 1.5rem; }
.commerce-showroom-offers__toolbar label { margin: 0; color: var(--showroom-muted); font-weight: 800; }
.commerce-showroom-offers__toolbar select,
.commerce-showroom-sticky-currency select { min-height: 2.75rem; padding: .55rem 2.25rem .55rem .85rem; border: 1px solid rgba(246,31,130,.25); border-radius: 999px; background: #fff; color: var(--showroom-purple); font-weight: 800; }
.commerce-showroom-offers__currency-status { min-width: 2.5rem; color: var(--showroom-pink); font-weight: 800; }
.commerce-showroom-offer:hover .commerce-showroom-offer__visual img,
.commerce-showroom-offer:focus-within .commerce-showroom-offer__visual img { transform: none !important; }
.commerce-showroom-offer__visual img { transition: none !important; }
.commerce-showroom-desktop-sticky__inner { width: min(820px,calc(100vw - 3rem)); }
.commerce-showroom-sticky-currency { margin: 0; }
.commerce-showroom-sticky-cta { align-items: center; justify-content: space-between; gap: .75rem; }
.commerce-showroom-sticky-cta > a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex: 1; color: inherit; text-decoration: none; }
@media (max-width: 991.98px) {
  .commerce-showroom-hero { min-height: auto; }
  .commerce-showroom-hero__inner { padding-top: .75rem; }
}

/* CampusFR J13H2 — UX/UI certification polish. */
.commerce-showroom {
    --showroom-radius-sm: .9rem;
    --showroom-radius-md: 1.35rem;
    --showroom-radius-lg: 2rem;
    --showroom-shadow-soft: 0 1rem 3rem rgba(48, 32, 86, .08);
    --showroom-shadow-raised: 0 1.4rem 3.8rem rgba(48, 32, 86, .15);
    --showroom-focus: 0 0 0 .24rem rgba(246, 31, 130, .22);
}

.commerce-showroom-hero__inner {
    padding-top: clamp(1rem, 2.4vw, 2rem);
    padding-bottom: clamp(3.5rem, 7vw, 6.5rem);
}

.commerce-showroom-hero__grid {
    align-items: center;
    column-gap: clamp(2rem, 6vw, 6rem);
}

.commerce-showroom-hero__copy {
    max-width: 43rem;
}

.commerce-showroom-hero h1 {
    max-width: 10.5ch;
    margin-bottom: clamp(1rem, 2vw, 1.5rem);
    line-height: .98;
    text-wrap: balance;
}

.commerce-showroom-hero__lead {
    max-width: 42rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    line-height: 1.65;
}

.commerce-showroom-hero__visual {
    filter: drop-shadow(0 2rem 3.5rem rgba(48, 32, 86, .14));
}

.commerce-showroom-btn,
.commerce-showroom-offer__actions form,
.commerce-showroom-offer__actions .commerce-showroom-btn {
    min-height: 3.25rem;
}

.commerce-showroom-btn:focus-visible,
.commerce-showroom-offer:focus-visible,
.commerce-showroom-faq summary:focus-visible,
.commerce-showroom select:focus-visible {
    outline: 0;
    box-shadow: var(--showroom-focus);
}

.commerce-showroom-offers__grid {
    align-items: stretch;
}

.commerce-showroom-offer {
    height: 100%;
    border-radius: var(--showroom-radius-lg);
    box-shadow: var(--showroom-shadow-soft);
    transform: translateY(0);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.commerce-showroom-offer:hover,
.commerce-showroom-offer:focus-within {
    transform: translateY(-4px);
    border-color: rgba(246, 31, 130, .3);
    box-shadow: var(--showroom-shadow-raised);
}

.commerce-showroom-offer.is-featured {
    transform: translateY(-12px);
}

.commerce-showroom-offer.is-featured:hover,
.commerce-showroom-offer.is-featured:focus-within {
    transform: translateY(-16px);
}

.commerce-showroom-offer__visual,
.commerce-showroom-offer__visual img,
.commerce-showroom-offer:hover .commerce-showroom-offer__visual img,
.commerce-showroom-offer:focus-within .commerce-showroom-offer__visual img {
    transform: none !important;
}

.commerce-showroom-offer__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.commerce-showroom-offer__features {
    flex: 1 1 auto;
}

.commerce-showroom-offer__actions {
    margin-top: auto;
}

.commerce-showroom-offer__actions form,
.commerce-showroom-offer__actions .commerce-showroom-btn {
    width: 100%;
}

.commerce-showroom-offer__featured {
    top: 0;
    transform: translate(-50%, -50%);
    box-shadow: 0 .6rem 1.5rem rgba(246, 31, 130, .2);
}

.commerce-showroom-desktop-sticky {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
}

.commerce-showroom-desktop-sticky[hidden] {
    display: block !important;
    visibility: hidden;
    opacity: 0;
    transform: translateY(1rem);
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .commerce-showroom-hero__copy {
        max-width: 48rem;
        margin-inline: auto;
    }

    .commerce-showroom-offer.is-featured,
    .commerce-showroom-offer.is-featured:hover,
    .commerce-showroom-offer.is-featured:focus-within {
        transform: none;
    }
}

@media (max-width: 767.98px) {
    .commerce-showroom-hero__inner {
        padding-bottom: 3.5rem;
    }

    .commerce-showroom-hero h1 {
        max-width: none;
        font-size: clamp(2.7rem, 14vw, 4.25rem);
    }

    .commerce-showroom-offers__grid {
        display: grid;
        grid-auto-columns: minmax(84vw, 1fr);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 1rem;
        margin-inline: calc(var(--showroom-page-gutter, 1rem) * -1);
        padding: 1.25rem var(--showroom-page-gutter, 1rem) 2rem;
        overflow-x: auto;
        scroll-padding-inline: var(--showroom-page-gutter, 1rem);
        scroll-snap-type: x mandatory;
        scrollbar-width: thin;
    }

    .commerce-showroom-offer {
        scroll-snap-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-offer,
    .commerce-showroom-desktop-sticky {
        transition: none !important;
    }
}

/* J13H2.1 — stabilisation: offer header, live currency and deterministic anchors. */
.commerce-showroom-offers__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(1.25rem, 4vw, 3rem);
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.commerce-showroom-offers__heading {
    max-width: 44rem;
    margin: 0;
    text-align: left;
}

.commerce-showroom-offers__heading h2,
.commerce-showroom-offers__heading p {
    margin-inline: 0;
}

.commerce-showroom-offers__toolbar {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
    margin: 0;
    padding: .55rem .65rem .55rem .9rem;
    border: 1px solid rgba(246, 31, 130, .16);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 .8rem 2rem rgba(48, 32, 86, .07);
}

.commerce-showroom-offers__toolbar.is-loading {
    opacity: .72;
}

.commerce-showroom-offers__toolbar label {
    white-space: nowrap;
}

.commerce-showroom-offers__toolbar select {
    min-width: 6.5rem;
}

.commerce-showroom-offers__currency-status {
    max-width: 15rem;
    min-width: 2.25rem;
    font-size: .78rem;
    line-height: 1.25;
}

.commerce-showroom-offer__visual,
.commerce-showroom-offer__visual img,
.commerce-showroom-offer__placeholder,
.commerce-showroom-offer:hover .commerce-showroom-offer__visual,
.commerce-showroom-offer:focus-within .commerce-showroom-offer__visual,
.commerce-showroom-offer:hover .commerce-showroom-offer__visual img,
.commerce-showroom-offer:focus-within .commerce-showroom-offer__visual img {
    transform: none !important;
}

@media (max-width: 767.98px) {
    .commerce-showroom-offers__header {
        align-items: stretch;
        flex-direction: column;
    }

    .commerce-showroom-offers__toolbar {
        align-self: flex-start;
        max-width: 100%;
    }
}


/* J13H2.2 — compact intelligent offers and shared CampusFR currency control. */
.commerce-showroom-offers {
    min-height: calc(100svh - 4.5rem);
    display: flex;
    align-items: center;
    padding-block: clamp(1.25rem, 3vh, 2.5rem);
}
.commerce-showroom-offers > .commerce-showroom-container { width: 100%; }
.commerce-showroom-offers__header { margin-bottom: clamp(.8rem, 1.5vh, 1.35rem); }
.commerce-showroom-currency-card {
    display: grid;
    grid-template-columns: auto auto minmax(7.5rem, auto) auto;
    align-items: center;
    gap: .55rem .7rem;
    min-height: 3.4rem;
    padding: .45rem .55rem .45rem .7rem;
    border: 1px solid rgba(246,31,130,.28);
    border-radius: 1rem;
    background: rgba(255,255,255,.96);
    box-shadow: 0 .55rem 1.5rem rgba(56,35,93,.07);
}
.commerce-showroom-currency-card__icon {
    display: grid; width: 2rem; height: 2rem; place-items: center;
    border-radius: .65rem; background: rgba(246,31,130,.12); color: var(--showroom-pink);
}
.commerce-showroom-currency-card__copy { display: flex; flex-direction: column; line-height: 1.05; }
.commerce-showroom-currency-card__copy strong { color: var(--showroom-purple); font-size: .72rem; }
.commerce-showroom-currency-card__copy small { color: var(--showroom-pink); font-size: .68rem; font-weight: 800; }
.commerce-showroom-currency-card select {
    min-height: 2.45rem; padding: .42rem 2.1rem .42rem .7rem;
    border: 1px solid rgba(246,31,130,.28); border-radius: .8rem;
    background-color: #fff; color: var(--showroom-purple); font-weight: 800;
}
.commerce-showroom-offer { position: relative; }
.commerce-showroom-offer.is-owned {
    border-color: rgba(29,157,104,.45);
    background: linear-gradient(180deg,rgba(234,250,243,.72),#fff 34%);
}
.commerce-showroom-offer.is-preferred {
    border-color: rgba(246,31,130,.55);
    box-shadow: 0 1.4rem 3.4rem rgba(246,31,130,.14);
}
.commerce-showroom-offer__owned-badge {
    position: absolute; z-index: 3; top: .75rem; right: .75rem;
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .55rem; border-radius: 999px;
    background: #eaf8f1; color: #167c55; font-size: .72rem; font-weight: 800;
}
.commerce-showroom-offer__bundle-note {
    display: flex; align-items: flex-start; gap: .45rem;
    margin: .25rem 0 0; color: #74556b; font-size: .78rem; line-height: 1.35;
}
.commerce-showroom-offer.is-bundle-blocked {
    border-style: dashed; opacity: .92;
}
.commerce-showroom-offer.is-bundle-blocked .commerce-showroom-offer__featured { display: none; }
.commerce-showroom-offer.is-featured { animation: commerce-showroom-bundle-breathe 12s ease-in-out infinite; }
@keyframes commerce-showroom-bundle-breathe {
    0%, 88%, 100% { transform: translateY(0); box-shadow: 0 1.6rem 4rem rgba(49,31,79,.14); }
    92% { transform: translateY(-2px); box-shadow: 0 1.8rem 4.3rem rgba(246,31,130,.18); }
    96% { transform: translateY(0); box-shadow: 0 1.6rem 4rem rgba(49,31,79,.14); }
}
@media (min-width: 992px) and (max-height: 900px) {
    .commerce-showroom-offer__visual { min-height: 8.5rem; max-height: 10.5rem; }
    .commerce-showroom-offer__body { padding-top: .85rem; padding-bottom: .85rem; }
    .commerce-showroom-offer__description { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .commerce-showroom-offer__features { gap: .28rem; margin-block: .65rem; font-size: .82rem; }
}
@media (max-width: 767.98px) {
    .commerce-showroom-offers { min-height: auto; align-items: stretch; }
    .commerce-showroom-currency-card { width: 100%; grid-template-columns: auto 1fr minmax(7rem, auto); }
    .commerce-showroom-currency-card__copy { min-width: 0; }
    .commerce-showroom-offers__currency-status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-offer.is-featured { animation: none !important; }
}


/* J13H2.3 — compact offer stage and consistent currency labels. */
.commerce-showroom-offers {
    min-height: auto;
    display: block;
    padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.commerce-showroom-offers > .commerce-showroom-container {
    width: min(100% - 2rem, 74rem);
    max-width: 74rem;
    margin-inline: auto;
}
.commerce-showroom-offers__grid {
    grid-template-columns: repeat(3, minmax(0, 21.5rem));
    justify-content: center;
    gap: clamp(.9rem, 1.7vw, 1.35rem);
    margin-top: clamp(.8rem, 1.5vh, 1.25rem);
}
.commerce-showroom-offer__visual {
    min-height: 7.5rem;
    max-height: 9.25rem;
    aspect-ratio: 16 / 7;
}
.commerce-showroom-offer__body {
    padding: .9rem 1rem 1rem;
}
.commerce-showroom-offer__body h3 {
    margin-bottom: .35rem;
}
.commerce-showroom-offer__description {
    margin-bottom: .55rem;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.commerce-showroom-offer__features {
    gap: .25rem;
    margin-block: .55rem;
    font-size: .8rem;
}
.commerce-showroom-offer__actions {
    margin-top: auto;
}
@media (min-width: 992px) {
    .commerce-showroom-offer.is-featured {
        transform: translateY(-6px);
    }
    .commerce-showroom-offer.is-featured:hover,
    .commerce-showroom-offer.is-featured:focus-within {
        transform: translateY(-9px);
    }
}
@media (max-width: 991.98px) {
    .commerce-showroom-offers > .commerce-showroom-container {
        width: min(100% - 1.25rem, 46rem);
    }
}

/* J13H2.3 — Showroom CMS builder rendered inside the autonomous CRM shell. */
.local-subscriptions-showroom-builder-page .commerce-showroom-admin--crm {
    width: 100%;
    max-width: none;
    padding: 0;
    background: transparent;
}
.local-subscriptions-showroom-builder-page .commerce-showroom-admin--crm > .d-flex:first-child {
    padding: 1.1rem 1.25rem;
    border: 1px solid rgba(55, 38, 91, .1);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 .5rem 1.6rem rgba(42, 28, 68, .06);
}
.local-subscriptions-showroom-builder-page .commerce-showroom-builder,
.local-subscriptions-showroom-builder-page .commerce-showroom-admin--crm > form.card {
    border: 1px solid rgba(55, 38, 91, .1);
    background: #fff;
    box-shadow: 0 .7rem 2rem rgba(42, 28, 68, .06);
}
.local-subscriptions-showroom-builder-page .commerce-showroom-admin--crm h2,
.local-subscriptions-showroom-builder-page .commerce-showroom-admin--crm h3 {
    color: #38235d;
}


/* J13H2.4 — final offer-card geometry and aligned currency control. */
.commerce-showroom-offers__header {
    align-items: flex-end;
}
.commerce-showroom-offers__toolbar.commerce-showroom-currency-card {
    position: relative;
    width: max-content;
    min-width: 0;
    margin-left: auto;
    padding-right: .55rem;
    grid-template-columns: auto auto minmax(8.25rem, auto);
}
.commerce-showroom-offers__currency-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.commerce-showroom-offer__visual {
    min-height: 8.75rem;
    max-height: 10.25rem;
    aspect-ratio: 16 / 7.6;
    border-radius: 1.35rem 1.35rem 0 0;
}
.commerce-showroom-offer__visual img,
.commerce-showroom-offer__placeholder,
.commerce-showroom-offer__packaging {
    border-radius: 1.35rem 1.35rem 0 0;
}
.commerce-showroom-offer__pricing {
    display: grid;
    align-content: end;
    gap: .18rem;
    min-height: 4.15rem;
    margin-top: auto;
}
.commerce-showroom-offer__pricing-promotion {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 1.35rem;
    line-height: 1.2;
}
.commerce-showroom-offer__pricing-promotion.is-empty {
    visibility: hidden;
}
.commerce-showroom-offer__pricing-promotion del {
    margin: 0;
}
.commerce-showroom-offer__pricing > strong {
    display: block;
    line-height: 1.05;
}
@media (max-width: 767.98px) {
    .commerce-showroom-offers__toolbar.commerce-showroom-currency-card {
        width: 100%;
        margin-left: 0;
        grid-template-columns: auto 1fr minmax(8rem, auto);
    }
}
/* CampusFR J13H2.5 — final offer-card pricing polish. */
.commerce-showroom-offer {
    overflow: visible;
}

.commerce-showroom-offer__visual,
.commerce-showroom-offer__body {
    overflow: hidden;
}

.commerce-showroom-offer__visual {
    border-radius: calc(var(--showroom-radius-lg) - 2px) calc(var(--showroom-radius-lg) - 2px) 0 0;
}

.commerce-showroom-offer__featured {
    top: 0;
    right: 50%;
    z-index: 5;
    min-width: 8.75rem;
    padding: .42rem .9rem;
    transform: translate(50%, -50%);
    box-shadow: 0 .7rem 1.8rem rgba(246, 31, 130, .22);
    text-align: center;
    white-space: nowrap;
}

.commerce-showroom-offer__pricing {
    display: grid;
    align-items: end;
    gap: .18rem;
    min-height: 5.35rem;
    padding-top: 1.15rem;
}

.commerce-showroom-offer__pricing-promotion {
    display: flex;
    min-height: 1.65rem;
    align-items: center;
    gap: .65rem;
}

.commerce-showroom-offer__pricing-promotion.is-empty {
    visibility: hidden;
}

.commerce-showroom-offer__pricing strong {
    display: block;
    line-height: 1.12;
}

.commerce-showroom-offer__actions {
    margin-top: 1.35rem;
}

@media (max-width: 767.98px) {
    .commerce-showroom-offer__featured {
        min-width: 7.75rem;
        font-size: .72rem;
    }
}


/* J15A4 — deterministic offer merchandising order on every viewport. */
.commerce-showroom-offer--pdf {
    order: 1;
}

.commerce-showroom-offer--bundle {
    order: 2;
}

.commerce-showroom-offer--course {
    order: 3;
}


/* J15B — CMS-configured public content. */
.commerce-showroom-hero.has-cms-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(19, 32, 59, .86), rgba(19, 32, 59, .35)), var(--showroom-hero-background) center / cover no-repeat;
    pointer-events: none;
}

.commerce-showroom-hero.has-cms-background > * {
    position: relative;
}


/* J15C — restore the featured Bundle hierarchy after CMS customisation. */
.commerce-showroom-offer--bundle.is-featured {
    z-index: 2;
    border-width: 2px;
    border-color: var(--showroom-pink);
    box-shadow: 0 2rem 4.5rem rgba(246, 31, 130, .18);
    transform: translateY(-.75rem);
}

.commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured {
    display: inline-flex;
    min-width: 9.5rem;
    justify-content: center;
}

@media (min-width: 992px) {
    .commerce-showroom-offer--bundle.is-featured {
        min-height: calc(100% + 1.5rem);
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        transform: translateY(-1rem);
    }
}

@media (max-width: 991.98px) {
    .commerce-showroom-offer--bundle.is-featured {
        min-height: 0;
        transform: none;
    }
}


/* J15D — multilingual block editor. */
.commerce-showroom-language-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .25rem 0 1rem;
    padding-bottom: .7rem;
    border-bottom: 1px solid rgba(152, 162, 179, .25);
}

.commerce-showroom-language-tab {
    border: 1px solid rgba(152, 162, 179, .35);
    border-radius: 999px;
    background: #fff;
    color: #475467;
    padding: .42rem .9rem;
    font-weight: 700;
}

.commerce-showroom-language-tab.is-active {
    border-color: #f72585;
    background: #fff1f7;
    color: #c81569;
}

.commerce-showroom-language-panel {
    display: none;
}

.commerce-showroom-language-panel.is-active {
    display: block;
}

/* J15E5.2 - Inline video player states and lightweight central control. */
.commerce-showroom-video__inline {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: #0f0b18;
    box-shadow: 0 34px 85px rgba(35, 20, 64, .22);
    isolation: isolate;
}

.commerce-showroom-video__inline .commerce-showroom-video__player {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.commerce-showroom-video__overlay-control {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: grid;
    width: clamp(64px, 7vw, 92px);
    height: clamp(64px, 7vw, 92px);
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 50%;
    background: rgba(25, 18, 42, .22);
    color: #fff;
    box-shadow: 0 16px 48px rgba(15, 11, 24, .2);
    opacity: .72;
    transform: translate(-50%, -50%);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease, border-color .2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.commerce-showroom-video__overlay-control:hover,
.commerce-showroom-video__overlay-control:focus-visible,
.commerce-showroom-video__inline:hover .commerce-showroom-video__overlay-control,
.commerce-showroom-video__inline:focus-within .commerce-showroom-video__overlay-control {
    opacity: .94;
    transform: translate(-50%, -50%) scale(1.045);
    background: rgba(25, 18, 42, .34);
    border-color: rgba(255, 255, 255, .62);
}

.commerce-showroom-video__inline.is-playing .commerce-showroom-video__overlay-control {
    pointer-events: none;
    opacity: 0;
}

.commerce-showroom-video__overlay-icon {
    display: none;
    align-items: center;
    justify-content: center;
    font-size: clamp(1.3rem, 2.5vw, 2rem);
    line-height: 1;
}

.commerce-showroom-video__overlay-control[data-state="play"] .commerce-showroom-video__overlay-icon--play,
.commerce-showroom-video__overlay-control[data-state="replay"] .commerce-showroom-video__overlay-icon--replay {
    display: flex;
}

.commerce-showroom-video__overlay-control[data-state="play"] .commerce-showroom-video__overlay-icon--play {
    padding-left: .14em;
}

.commerce-showroom-video__inline.is-ended::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(15, 11, 24, .16);
    content: "";
    pointer-events: none;
}

@media (hover: none) {
    .commerce-showroom-video__inline.is-playing .commerce-showroom-video__overlay-control {
        pointer-events: none;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-video__overlay-control {
        transition: none;
    }
}


/* J15E6 - One readable offer per mobile viewport with native horizontal snapping. */
@media (max-width: 767.98px) {
    .commerce-showroom-offers > .commerce-showroom-container {
        width: 100%;
        max-width: none;
        padding-inline: 0;
    }

    .commerce-showroom-offers__header {
        padding-inline: 1rem;
    }

    .commerce-showroom-offers__grid {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc(100vw - 2rem);
        grid-template-columns: none;
        justify-content: start;
        gap: 1rem;
        width: 100%;
        margin-inline: 0;
        padding: .45rem 1rem 1.25rem;
        overflow-x: auto;
        overflow-y: visible;
        scroll-padding-inline: 1rem;
        scroll-snap-type: x mandatory;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .commerce-showroom-offers__grid::-webkit-scrollbar {
        display: none;
    }

    .commerce-showroom-offers__grid > .commerce-showroom-offer {
        width: 100%;
        min-width: 0;
        max-width: none;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .commerce-showroom-offer.is-featured {
        transform: none;
    }
}


/* J15F — reusable showroom layout engine. */
.commerce-showroom .commerce-showroom-layout--wide > .commerce-showroom-container,
.commerce-showroom .commerce-showroom-layout--wide .commerce-showroom-container { max-width: 1440px; }
.commerce-showroom .commerce-showroom-layout--full > .commerce-showroom-container,
.commerce-showroom .commerce-showroom-layout--full .commerce-showroom-container { max-width: none; width: 100%; }
.commerce-showroom .commerce-showroom-background--white { background: #fff; }
.commerce-showroom .commerce-showroom-background--light { background: #fff; }
.commerce-showroom .commerce-showroom-background--soft { background: #faf7ff; }
.commerce-showroom .commerce-showroom-background--dark { background: #21143d; color: #fff; }
.commerce-showroom .commerce-showroom-background--gradient { background: linear-gradient(135deg, #261443 0%, #6b3aa6 52%, #ff1682 130%); color: #fff; }
.commerce-showroom .commerce-showroom-spacing--compact { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.commerce-showroom .commerce-showroom-spacing--normal { padding-top: 6rem; padding-bottom: 6rem; }
.commerce-showroom .commerce-showroom-spacing--large { padding-top: 9rem; padding-bottom: 9rem; }
.commerce-showroom .commerce-showroom-animation--fade,
.commerce-showroom .commerce-showroom-animation--rise { animation: commerce-showroom-fade .55s ease both; }
.commerce-showroom .commerce-showroom-animation--rise { animation-name: commerce-showroom-rise; }
@keyframes commerce-showroom-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes commerce-showroom-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.commerce-showroom-hero.commerce-showroom-media--left .commerce-showroom-hero__copy { order: 2; }
.commerce-showroom-hero.commerce-showroom-media--left .commerce-showroom-hero__visual { order: 1; }
.commerce-showroom-hero--minimal .commerce-showroom-hero__visual,
.commerce-showroom-hero--minimal .commerce-showroom-hero__sky,
.commerce-showroom-hero--minimal .commerce-showroom-hero__cloud,
.commerce-showroom-hero--minimal .commerce-showroom-hero__mountain { display: none; }
.commerce-showroom-hero--minimal .commerce-showroom-hero__grid { grid-template-columns: minmax(0, 820px); justify-content: center; text-align: center; }
.commerce-showroom-hero--minimal .commerce-showroom-hero__actions { justify-content: center; }
.commerce-showroom-hero--cover.has-cms-background { min-height: min(820px, 88vh); background-image: linear-gradient(90deg, rgba(22, 10, 49, .82), rgba(22, 10, 49, .22)), var(--showroom-hero-background); background-size: cover; background-position: center; }
.commerce-showroom-hero--cover .commerce-showroom-hero__visual { opacity: .18; }
.commerce-showroom-hero--split .commerce-showroom-hero__grid { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); }
.commerce-showroom-offers--columns-2 .commerce-showroom-offers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commerce-showroom-offers--columns-4 .commerce-showroom-offers__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.commerce-showroom-offers--premium .commerce-showroom-offer { box-shadow: 0 24px 70px rgba(38, 20, 67, .15); border-color: rgba(255, 22, 130, .22); }
.commerce-showroom-offers--minimal .commerce-showroom-offer { box-shadow: none; background: transparent; }
.commerce-showroom-offers--horizontal .commerce-showroom-offer { display: grid; grid-template-columns: minmax(180px, .75fr) minmax(0, 1.25fr); }
@media (max-width: 767.98px) {
  .commerce-showroom .commerce-showroom-spacing--compact { padding-top: 3rem; padding-bottom: 3rem; }
  .commerce-showroom .commerce-showroom-spacing--large { padding-top: 5.25rem; padding-bottom: 5.25rem; }
  .commerce-showroom .commerce-showroom-spacing--normal { padding-top: 4.25rem; padding-bottom: 4.25rem; }
  .commerce-showroom-hero.commerce-showroom-media--left .commerce-showroom-hero__copy,
  .commerce-showroom-hero.commerce-showroom-media--left .commerce-showroom-hero__visual { order: initial; }
  .commerce-showroom-offers--columns-2 .commerce-showroom-offers__grid,
  .commerce-showroom-offers--columns-4 .commerce-showroom-offers__grid { display: flex; grid-template-columns: none; }
  .commerce-showroom-offers--horizontal .commerce-showroom-offer { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .commerce-showroom .commerce-showroom-animation--fade,
  .commerce-showroom .commerce-showroom-animation--rise { animation: none; }
}


/* J15H.1A — iPhone offer carousel edge and featured badge stabilization. */
@media (max-width: 767.98px) {
    .commerce-showroom-offers__grid {
        grid-auto-columns: calc(100vw - 2.5rem);
        padding-top: 1.15rem;
        padding-right: 1.25rem;
        padding-left: 1.25rem;
        scroll-padding-inline: 1.25rem;
    }

    .commerce-showroom-offers__grid > .commerce-showroom-offer {
        box-sizing: border-box;
        max-width: 100%;
        overflow: visible;
    }

    .commerce-showroom-offer__visual,
    .commerce-showroom-offer__body {
        overflow: hidden;
    }

    .commerce-showroom-offer__visual {
        border-radius: 22px 22px 0 0;
    }

    .commerce-showroom-offer__featured {
        top: -.8rem;
        right: 50%;
        min-width: min(13rem, calc(100% - 2rem));
        transform: translateX(50%);
        text-align: center;
    }
}


/* J15H.1B — exact mobile offer geometry. */
@media (max-width: 767.98px) {
    .commerce-showroom-offers__grid {
        grid-auto-columns: calc(100vw - 2.75rem);
        gap: .875rem;
        padding-inline: 1.375rem;
        scroll-padding-inline: 1.375rem;
    }
    .commerce-showroom-offers__grid > .commerce-showroom-offer {
        border-radius: 24px;
        clip-path: inset(0 round 24px);
    }
    .commerce-showroom-offer__visual {
        border-radius: 22px 22px 0 0;
    }
    .commerce-showroom-offer__visual img {
        border-radius: inherit;
    }
}

/* J15H.1C — preserve the featured badge outside the mobile card while keeping clean radii. */
@media (max-width: 767.98px) {
    .commerce-showroom-offers__grid {
        padding-top: 1.6rem;
    }

    .commerce-showroom-offers__grid > .commerce-showroom-offer {
        clip-path: none;
        overflow: visible;
    }

    .commerce-showroom-offer__visual,
    .commerce-showroom-offer__body {
        clip-path: none;
    }
}

/* Keep high-resolution showroom masters crisp after browser downscaling. */
.commerce-showroom-offer__visual img {
    image-rendering: auto;
    image-rendering: -webkit-optimize-contrast;
    backface-visibility: hidden;
}


/* CampusFR J15H.1E — native 16:9 Showroom visuals and responsive derivatives. */
.commerce-showroom-offer__visual {
    min-height: 0;
    max-height: none;
    aspect-ratio: 16 / 9;
}
.commerce-showroom-offer__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* J15H.1H — configurable mobile offers and stronger Bundle merchandising. */
.commerce-showroom-offers__swipe-hint {
    display: none;
}

@media (min-width: 992px) {
    .commerce-showroom-offer--bundle.is-featured {
        z-index: 4;
        border: 3px solid rgba(246, 31, 130, .88);
        background:
            linear-gradient(#fff, #fff) padding-box,
            linear-gradient(145deg, rgba(246, 31, 130, .95), rgba(151, 71, 255, .5)) border-box;
        box-shadow:
            0 2.25rem 5.5rem rgba(246, 31, 130, .27),
            0 0 0 .42rem rgba(246, 31, 130, .10),
            inset 0 0 0 1px rgba(255, 255, 255, .8);
        transform: translateY(-1rem) scale(1.055);
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        box-shadow:
            0 2.8rem 6.5rem rgba(246, 31, 130, .34),
            0 0 0 .55rem rgba(246, 31, 130, .13),
            inset 0 0 0 1px rgba(255, 255, 255, .9);
        transform: translateY(-1.3rem) scale(1.07);
    }

    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured {
        min-width: 11rem;
        padding: .62rem 1.25rem;
        border: 1px solid rgba(255, 255, 255, .55);
        font-size: .92rem;
        letter-spacing: .015em;
        box-shadow:
            0 .85rem 2.25rem rgba(246, 31, 130, .32),
            0 0 0 .28rem rgba(246, 31, 130, .09);
    }
}

@media (max-width: 767.98px) {
    /* Mobile commercial order is always Bundle > Course > PDF. */
    .commerce-showroom-offer--bundle { order: 1 !important; }
    .commerce-showroom-offer--course { order: 2 !important; }
    .commerce-showroom-offer--pdf { order: 3 !important; }

    .commerce-showroom-offers--mobile-stack .commerce-showroom-offers__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: auto !important;
        grid-auto-flow: row !important;
        gap: 1.65rem !important;
        margin-inline: 0 !important;
        padding: 1.35rem 0 .5rem !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scrollbar-width: auto !important;
    }

    .commerce-showroom-offers--mobile-stack .commerce-showroom-offer {
        width: 100% !important;
        max-width: none !important;
        scroll-snap-align: none !important;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__grid {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-columns: minmax(calc(100vw - 3rem), 1fr) !important;
        grid-auto-flow: column !important;
        gap: 1rem !important;
        margin-inline: calc(var(--showroom-page-gutter, 1rem) * -1) !important;
        padding: 1.35rem var(--showroom-page-gutter, 1rem) 2rem !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: var(--showroom-page-gutter, 1rem);
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__grid::-webkit-scrollbar {
        display: none;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offer {
        width: auto !important;
        max-width: none !important;
        scroll-snap-align: center !important;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__swipe-hint {
        display: flex;
        width: fit-content;
        align-items: center;
        gap: .55rem;
        margin: -.15rem auto .15rem;
        padding: .52rem .85rem;
        border: 1px solid rgba(246, 31, 130, .18);
        border-radius: 999px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 .55rem 1.4rem rgba(48, 32, 86, .08);
        color: var(--showroom-purple);
        font-size: .78rem;
        font-weight: 800;
        backdrop-filter: blur(10px);
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__swipe-hint .fa-hand-pointer {
        color: var(--showroom-pink);
        animation: commerce-showroom-swipe-finger 1.8s ease-in-out infinite;
    }

    .commerce-showroom-offer--bundle.is-featured,
    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        border: 3px solid rgba(246, 31, 130, .82);
        box-shadow:
            0 1.8rem 4.25rem rgba(246, 31, 130, .24),
            0 0 0 .34rem rgba(246, 31, 130, .09);
        transform: none !important;
    }

    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured {
        min-width: 9.6rem;
        padding: .58rem 1rem;
        font-size: .82rem;
        box-shadow:
            0 .8rem 2rem rgba(246, 31, 130, .3),
            0 0 0 .24rem rgba(246, 31, 130, .08);
    }
}

@keyframes commerce-showroom-swipe-finger {
    0%, 100% { transform: translateX(-.18rem) rotate(-10deg); }
    50% { transform: translateX(.45rem) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-offers__swipe-hint .fa-hand-pointer {
        animation: none !important;
    }
}

/* J15H.1H.1 — final Bundle emphasis and mobile card breathing room. */
.commerce-showroom-offer--bundle.is-featured {
    background: #fffafa;
}

@media (min-width: 992px) {
    .commerce-showroom-offer--bundle.is-featured {
        z-index: 5;
        border-color: rgba(246, 31, 130, .96);
        box-shadow:
            0 2.65rem 6.4rem rgba(246, 31, 130, .31),
            0 0 0 .48rem rgba(246, 31, 130, .13),
            0 0 2.4rem rgba(246, 31, 130, .18),
            inset 0 0 0 1px rgba(255, 255, 255, .92);
        transform: translateY(-1.2rem) scale(1.085);
        transition:
            transform .24s ease,
            border-color .24s ease,
            box-shadow .24s ease,
            background-color .24s ease;
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        border-color: #f61f82;
        box-shadow:
            0 3.15rem 7.2rem rgba(246, 31, 130, .40),
            0 0 0 .62rem rgba(246, 31, 130, .17),
            0 0 3.1rem rgba(246, 31, 130, .25),
            inset 0 0 0 1px rgba(255, 255, 255, .96);
        transform: translateY(-1.65rem) scale(1.095) rotate(-.18deg);
    }
}

@media (max-width: 767.98px) {
    .commerce-showroom-offers--mobile-stack .commerce-showroom-offers__grid {
        padding-right: .8rem !important;
        padding-left: .8rem !important;
    }

    .commerce-showroom-offers--mobile-stack .commerce-showroom-offer {
        width: calc(100% - .2rem) !important;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .commerce-showroom-offer--bundle.is-featured {
        background: #fffafa;
        box-shadow:
            0 1.9rem 4.5rem rgba(246, 31, 130, .25),
            0 0 0 .38rem rgba(246, 31, 130, .10),
            0 0 1.55rem rgba(246, 31, 130, .14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-offer--bundle.is-featured,
    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        transition: none !important;
    }
}

/* J15H.1H.4 — centred tariff heading, compact cards and exact Bundle radii. */
.commerce-showroom-offers__swipe-hint {
    display: none;
}

.commerce-showroom-offers__header {
    position: relative;
    display: block;
    margin-bottom: .7rem;
}

.commerce-showroom-offers__heading {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    text-align: center;
}

.commerce-showroom-offers__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    margin: 0 auto .55rem !important;
    padding: .38rem .82rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .45rem 1.2rem rgba(246, 31, 130, .08);
    font-size: .78rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-offers__heading h2 {
    display: flex;
    max-width: none;
    align-items: baseline;
    justify-content: center;
    gap: .22em;
    margin-inline: auto;
    font-size: clamp(2.35rem, 4.2vw, 4rem);
    line-height: 1.02;
    text-align: center;
    text-wrap: nowrap;
    white-space: nowrap;
}

.commerce-showroom-offers__title-highlight {
    color: var(--showroom-pink);
}

.commerce-showroom-offers__title-suffix {
    color: var(--showroom-purple);
}

.commerce-showroom-offers__heading > p:last-child {
    max-width: 64rem;
    margin: .6rem auto 0;
    font-size: 1.02rem;
    line-height: 1.5;
    text-align: center;
}

.commerce-showroom-offers__toolbar.commerce-showroom-currency-card {
    position: absolute;
    top: 0;
    right: 0;
}

/* Prices and actions share one visual axis. */
.commerce-showroom-offer__pricing {
    justify-items: center;
    text-align: center;
}

.commerce-showroom-offer__pricing-promotion {
    width: 100%;
    justify-content: center;
}

.commerce-showroom-offer__actions {
    text-align: center;
}

.commerce-showroom-offer--bundle.is-featured {
    animation: none !important;
    background: #fff5f8;
}

@media (min-width: 992px) {
    .commerce-showroom-offers {
        padding-block: 1.35rem 2rem;
    }

    .commerce-showroom-offers--columns-3 .commerce-showroom-offers__grid,
    .commerce-showroom-offers__grid:has(> .commerce-showroom-offer:nth-child(3):last-child) {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: stretch;
        gap: clamp(1rem, 1.55vw, 1.35rem);
        margin-top: 1.65rem;
    }

    .commerce-showroom-offer__body {
        padding: .78rem .9rem .9rem;
    }

    .commerce-showroom-offer__body h3 {
        font-size: 1.28rem;
    }

    .commerce-showroom-offer__description {
        margin-top: .48rem;
        margin-bottom: .35rem;
        line-height: 1.45;
    }

    .commerce-showroom-offer__features {
        gap: .2rem;
        margin-block: .42rem;
    }

    .commerce-showroom-offer__pricing {
        min-height: 4.35rem;
        padding-top: .72rem;
    }

    .commerce-showroom-offer__actions {
        margin-top: .78rem;
    }

    .commerce-showroom-offer--bundle.is-featured {
        position: relative;
        z-index: 5;
        isolation: isolate;
        overflow: visible;
        min-height: 0;
        margin: 0;
        border: 3px solid var(--showroom-pink);
        border-radius: 26px;
        box-shadow:
            0 1.35rem 3.2rem rgba(246, 31, 130, .22),
            0 0 0 .22rem rgba(246, 31, 130, .13),
            0 0 1.55rem rgba(246, 31, 130, .2);
        transform: translateY(-.22rem) scale(1.025);
        transition:
            transform .24s cubic-bezier(.2, .8, .2, 1),
            border-color .24s ease,
            box-shadow .24s ease,
            background-color .24s ease;
        will-change: transform, box-shadow;
    }

    .commerce-showroom-offer--bundle.is-featured::after {
        position: absolute;
        z-index: -1;
        inset: -.4rem;
        border: 2px solid rgba(246, 31, 130, .24);
        border-radius: 32px;
        box-shadow: 0 0 1.3rem rgba(246, 31, 130, .18);
        content: "";
        pointer-events: none;
        transition: inset .24s ease, border-color .24s ease, box-shadow .24s ease;
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        z-index: 8;
        border-color: #ff1682;
        background: #fff2f7;
        box-shadow:
            0 1.9rem 4.4rem rgba(246, 31, 130, .34),
            0 0 0 .32rem rgba(246, 31, 130, .2),
            0 0 2.4rem rgba(246, 31, 130, .34);
        transform: translateY(-.55rem) scale(1.04);
    }

    .commerce-showroom-offer--bundle.is-featured:hover::after,
    .commerce-showroom-offer--bundle.is-featured:focus-within::after {
        inset: -.58rem;
        border-color: rgba(255, 22, 130, .42);
        box-shadow: 0 0 2.2rem rgba(246, 31, 130, .32);
    }

    /* Match the inner media curve exactly to the 26px card radius minus the 3px border. */
    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__visual,
    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__visual img,
    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__placeholder,
    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__packaging {
        border-radius: 23px 23px 0 0 !important;
    }

    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__visual {
        overflow: hidden;
    }

    @media (max-height: 900px) {
        .commerce-showroom-offers {
            padding-block: 1rem 1.55rem;
        }

        .commerce-showroom-offers__heading h2 {
            font-size: clamp(2.15rem, 3.6vw, 3.25rem);
        }

        .commerce-showroom-offers__heading > p:last-child {
            margin-top: .4rem;
            font-size: .96rem;
            line-height: 1.4;
        }

        .commerce-showroom-offers__grid {
            margin-top: 1.3rem !important;
        }

        .commerce-showroom-offer__visual {
            aspect-ratio: 16 / 8.5;
        }

        .commerce-showroom-offer__body {
            padding: .68rem .85rem .78rem;
        }

        .commerce-showroom-offer__features {
            gap: .16rem;
            margin-block: .34rem;
        }
    }
}

/* Existing commercial badge: larger, decorative, and centred on the top border. */
.commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured {
    top: 0;
    right: auto;
    left: 50%;
    display: inline-flex;
    min-width: 12.25rem;
    align-items: center;
    justify-content: center;
    gap: .52rem;
    padding: .7rem 1.35rem;
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 999px;
    font-size: 1rem;
    letter-spacing: .016em;
    line-height: 1.05;
    transform: translate(-50%, -50%);
    box-shadow:
        0 .85rem 2.1rem rgba(246, 31, 130, .32),
        0 0 0 .25rem rgba(246, 31, 130, .1);
}

.commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured::before,
.commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured::after {
    color: #fff4ad;
    content: "✦";
    font-size: .9em;
    filter: drop-shadow(0 2px 3px rgba(115, 35, 88, .28));
}

@media (max-width: 1199.98px) {
    .commerce-showroom-offers__heading h2 {
        font-size: clamp(2.1rem, 4vw, 3.2rem);
    }

    .commerce-showroom-offers__toolbar.commerce-showroom-currency-card {
        position: static;
        width: max-content;
        margin: .8rem auto 0;
    }
}

@media (max-width: 767.98px) {
    .commerce-showroom-offers__heading h2 {
        flex-wrap: wrap;
        gap: .08em .22em;
        white-space: normal;
        text-wrap: balance;
    }

    .commerce-showroom-offers__heading > p:last-child {
        font-size: .96rem;
    }

    .commerce-showroom-offer--bundle { order: 1 !important; }
    .commerce-showroom-offer--course { order: 2 !important; }
    .commerce-showroom-offer--pdf { order: 3 !important; }

    .commerce-showroom-offers--mobile-stack .commerce-showroom-offers__grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-columns: auto !important;
        grid-auto-flow: row !important;
        gap: 1.75rem !important;
        margin-inline: 0 !important;
        padding: 1.85rem .9rem .8rem !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }

    .commerce-showroom-offers--mobile-stack .commerce-showroom-offer {
        width: 100% !important;
        max-width: none !important;
        margin-inline: auto !important;
        scroll-snap-align: none !important;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__grid {
        display: grid !important;
        grid-template-columns: none !important;
        grid-auto-columns: minmax(calc(100vw - 3rem), 1fr) !important;
        grid-auto-flow: column !important;
        gap: 1rem !important;
        margin-inline: calc(var(--showroom-page-gutter, 1rem) * -1) !important;
        padding: 1.7rem var(--showroom-page-gutter, 1rem) 2rem !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__grid::-webkit-scrollbar {
        display: none;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offer {
        width: auto !important;
        max-width: none !important;
        scroll-snap-align: center !important;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__swipe-hint {
        display: flex;
        width: fit-content;
        align-items: center;
        gap: .55rem;
        margin: 0 auto .2rem;
        padding: .52rem .85rem;
        border: 1px solid rgba(246, 31, 130, .18);
        border-radius: 999px;
        background: rgba(255, 255, 255, .88);
        color: var(--showroom-purple);
        box-shadow: 0 .55rem 1.4rem rgba(48, 32, 86, .08);
        font-size: .78rem;
        font-weight: 800;
    }

    .commerce-showroom-offers--mobile-slider .commerce-showroom-offers__swipe-hint .fa-hand-pointer {
        color: var(--showroom-pink);
        animation: commerce-showroom-swipe-finger 1.8s ease-in-out infinite;
    }

    .commerce-showroom-offer--bundle.is-featured,
    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        isolation: isolate;
        overflow: visible;
        margin: 0;
        border: 3px solid rgba(246, 31, 130, .92);
        background: #fff5f8;
        animation: none !important;
        box-shadow:
            0 1.45rem 3.5rem rgba(246, 31, 130, .22),
            0 0 0 .25rem rgba(246, 31, 130, .12),
            0 0 1.5rem rgba(246, 31, 130, .18);
        transform: none !important;
    }

    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__featured {
        top: 0;
        min-width: min(12rem, calc(100% - 2rem));
        padding: .61rem 1rem;
        font-size: .88rem;
        line-height: 1.08;
        transform: translate(-50%, -50%);
    }
}

@keyframes commerce-showroom-swipe-finger {
    0%, 100% { transform: translateX(-.18rem) rotate(-10deg); }
    50% { transform: translateX(.45rem) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-offer--bundle.is-featured,
    .commerce-showroom-offer--bundle.is-featured::after,
    .commerce-showroom-offers__swipe-hint .fa-hand-pointer {
        animation: none !important;
        transition: none !important;
    }
}

/* J15H.1H.5 — compact currency control and balanced offer header. */
@media (min-width: 1200px) {
    .commerce-showroom-offers__header {
        min-height: 3.15rem;
    }

    .commerce-showroom-offers__badge {
        min-height: 2.45rem;
        gap: .58rem;
        margin-bottom: .65rem !important;
        padding: .52rem 1.08rem;
        font-size: .86rem !important;
        box-shadow:
            0 .55rem 1.45rem rgba(48, 32, 86, .06),
            0 0 0 .12rem rgba(246, 31, 130, .05);
    }

    .commerce-showroom-offers__badge i {
        font-size: 1rem;
    }

    .commerce-showroom-offers__toolbar.commerce-showroom-currency-card {
        top: 0;
        right: 0;
        display: grid;
        width: auto;
        min-width: 0;
        min-height: 2.45rem;
        grid-template-columns: auto auto minmax(7.6rem, auto);
        gap: .42rem .55rem;
        padding: .3rem .38rem .3rem .55rem;
        border-radius: .9rem;
        box-shadow:
            0 .55rem 1.45rem rgba(48, 32, 86, .055),
            0 0 0 .08rem rgba(246, 31, 130, .035);
    }

    .commerce-showroom-currency-card__icon {
        width: 1.85rem;
        height: 1.85rem;
        border-radius: .58rem;
        font-size: .82rem;
    }

    .commerce-showroom-currency-card__copy {
        display: flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .commerce-showroom-currency-card__copy strong {
        font-size: .8rem;
        line-height: 1;
        white-space: nowrap;
    }

    .commerce-showroom-currency-card select {
        min-width: 7.6rem;
        min-height: 2rem;
        padding: .3rem 1.55rem .3rem .58rem;
        border-radius: .68rem;
        font-size: .92rem;
        line-height: 1.1;
    }

    .commerce-showroom-offers--columns-3 .commerce-showroom-offers__grid,
    .commerce-showroom-offers__grid:has(> .commerce-showroom-offer:nth-child(3):last-child) {
        margin-top: 2.25rem;
    }
}

@media (min-width: 1200px) and (max-height: 900px) {
    .commerce-showroom-offers--columns-3 .commerce-showroom-offers__grid,
    .commerce-showroom-offers__grid:has(> .commerce-showroom-offer:nth-child(3):last-child) {
        margin-top: 1.9rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .commerce-showroom-offers__badge {
        padding: .46rem .95rem;
        font-size: .82rem !important;
    }

    .commerce-showroom-offers__toolbar.commerce-showroom-currency-card {
        min-height: 2.45rem;
        padding: .3rem .4rem .3rem .55rem;
    }

    .commerce-showroom-currency-card__copy strong {
        font-size: .8rem;
    }

    .commerce-showroom-currency-card select {
        min-height: 2rem;
        padding-top: .3rem;
        padding-right: 1.55rem;
        padding-bottom: .3rem;
    }
}

/* J15H.1J — adaptive spacing for very large and high-density displays. */
@media
    (min-width: 2200px) and (min-height: 1500px),
    (min-width: 1900px) and (min-height: 1100px) and (min-resolution: 1.5dppx),
    (min-width: 1900px) and (min-height: 1100px) and (-webkit-min-device-pixel-ratio: 1.5) {
    .commerce-showroom {
        --showroom-large-screen-topbar: 5.5rem;
        --showroom-large-screen-min-section-height: calc(100svh - var(--showroom-large-screen-topbar));
        --showroom-large-screen-padding-top: clamp(5.5rem, 7vh, 8.5rem);
        --showroom-large-screen-padding-bottom: clamp(8.75rem, 11vh, 13rem);
    }

    /* Wider canvases prevent content from looking lost in the centre of a 4K/5K display. */
    .commerce-showroom-container {
        width: min(1440px, calc(100% - 8rem));
    }

    .commerce-showroom-container--narrow {
        width: min(980px, calc(100% - 8rem));
    }

    /* Main CMS blocks become viewport-height scenes while remaining free to grow with their content. */
    .commerce-showroom > section:not(.commerce-showroom-hero):not(.commerce-showroom-trust):not(.commerce-showroom-faq):not(.commerce-showroom-support) {
        min-height: var(--showroom-large-screen-min-section-height);
        padding-top: var(--showroom-large-screen-padding-top);
        padding-bottom: var(--showroom-large-screen-padding-bottom);
    }

    .commerce-showroom > section:not(.commerce-showroom-hero):not(.commerce-showroom-trust) > .commerce-showroom-container {
        align-self: center;
    }

    .commerce-showroom > .commerce-showroom-section:not(.commerce-showroom-faq),
    .commerce-showroom > .commerce-showroom-video,
    .commerce-showroom > .commerce-showroom-ascent,
    .commerce-showroom > .commerce-showroom-offers,
    .commerce-showroom > .commerce-showroom-comparison,
    .commerce-showroom > .commerce-showroom-why,
    .commerce-showroom > .commerce-showroom-bonus,
    .commerce-showroom > .commerce-showroom-final {
        display: flex;
        align-items: center;
    }

    /* Preserve the Builder's spacing intent, but give every preset more breathing room on 5K screens. */
    .commerce-showroom > .commerce-showroom-spacing--compact:not(.commerce-showroom-faq):not(.commerce-showroom-support) {
        padding-top: clamp(5rem, 6.5vh, 7.5rem);
        padding-bottom: clamp(8rem, 10vh, 11.5rem);
    }

    .commerce-showroom > .commerce-showroom-spacing--normal:not(.commerce-showroom-faq):not(.commerce-showroom-support) {
        padding-top: clamp(6.5rem, 8vh, 9.5rem);
        padding-bottom: clamp(9.5rem, 12vh, 14rem);
    }

    .commerce-showroom > .commerce-showroom-spacing--large:not(.commerce-showroom-faq):not(.commerce-showroom-support) {
        padding-top: clamp(8rem, 10vh, 12rem);
        padding-bottom: clamp(11rem, 14vh, 17rem);
    }

    /*
     * FAQ + Support are intentionally one compact visual sequence.
     * Never promote them to full-viewport scenes, even on 4K/5K displays.
     */
    .commerce-showroom > .commerce-showroom-faq,
    .commerce-showroom > .commerce-showroom-support {
        display: block;
        min-height: 0 !important;
    }

    .commerce-showroom > .commerce-showroom-faq {
        padding-top: var(--showroom-large-screen-padding-top);
        padding-bottom: 1rem !important;
    }

    .commerce-showroom > .commerce-showroom-support {
        padding-top: .55rem !important;
        padding-bottom: clamp(4rem, 6vh, 5.5rem) !important;
    }

    /* The Hero already has its own cinematic composition; only extend its available stage. */
    .commerce-showroom > .commerce-showroom-hero {
        min-height: var(--showroom-large-screen-min-section-height);
    }

    /* Thin reassurance strips must remain compact and should not become full-screen sections. */
    .commerce-showroom > .commerce-showroom-trust {
        min-height: 0;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* Keep the tariff cards balanced even when the section receives extra vertical room. */
    .commerce-showroom-offers__header {
        margin-bottom: clamp(1.5rem, 2.2vh, 2.5rem);
    }

    .commerce-showroom-offers__grid {
        margin-top: clamp(2.5rem, 3.5vh, 3.75rem);
    }
}


/* CampusFR J15H.3 — initial rendering and below-the-fold performance. */
@supports (content-visibility: auto) {
    .commerce-showroom > section:not(.commerce-showroom-hero):not(.commerce-showroom-offers) {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
    }

    .commerce-showroom > .commerce-showroom-support,
    .commerce-showroom > .commerce-showroom-final {
        content-visibility: auto;
        contain-intrinsic-size: auto 720px;
    }
}

.commerce-showroom img {
    height: auto;
}


/* J16A — offer editorial content and Builder media guidance. */
.commerce-showroom-offer__subtitle {
    margin: -.2rem 0 .65rem;
    color: #6b4a5a;
    font-size: .94rem;
    font-weight: 800;
    line-height: 1.35;
}

.commerce-showroom-media-help {
    margin: -.15rem 0 .65rem;
    color: #667085;
    line-height: 1.45;
}


/* J16B — Builder-controlled spacing between the offer subtitle and cards. */
.commerce-showroom-offers {
    --showroom-offers-cards-top-spacing: 3.25rem;
}

.commerce-showroom-offers--cards-spacing-compact {
    --showroom-offers-cards-top-spacing: 1.25rem;
}

.commerce-showroom-offers--cards-spacing-normal {
    --showroom-offers-cards-top-spacing: 2rem;
}

.commerce-showroom-offers--cards-spacing-airy {
    --showroom-offers-cards-top-spacing: 3.25rem;
}

.commerce-showroom-offers--cards-spacing-veryairy {
    --showroom-offers-cards-top-spacing: 4.5rem;
}

.commerce-showroom-offers .commerce-showroom-offers__grid,
.commerce-showroom-offers--columns-3 .commerce-showroom-offers__grid,
.commerce-showroom-offers .commerce-showroom-offers__grid:has(> .commerce-showroom-offer:nth-child(3):last-child) {
    margin-top: var(--showroom-offers-cards-top-spacing) !important;
}

@media (max-width: 767.98px) {
    .commerce-showroom-offers--cards-spacing-compact {
        --showroom-offers-cards-top-spacing: .85rem;
    }

    .commerce-showroom-offers--cards-spacing-normal {
        --showroom-offers-cards-top-spacing: 1.25rem;
    }

    .commerce-showroom-offers--cards-spacing-airy {
        --showroom-offers-cards-top-spacing: 1.75rem;
    }

    .commerce-showroom-offers--cards-spacing-veryairy {
        --showroom-offers-cards-top-spacing: 2.5rem;
    }
}


/* J16A.1 — exact Bundle editorial hierarchy and non-truncated offer text. */
.commerce-showroom-offer__title,
.commerce-showroom-offer__subtitle {
    overflow: visible;
    text-overflow: clip;
}

.commerce-showroom-offer__title {
    max-width: 100%;
    white-space: nowrap;
    line-height: 1.16;
}

.commerce-showroom-offer__subtitle {
    display: block;
    max-width: 100%;
    min-height: 0;
    margin-top: .18rem;
    margin-bottom: .65rem;
    white-space: normal;
    line-height: 1.35;
    -webkit-line-clamp: unset;
    -webkit-box-orient: initial;
}

/* J16A.3 — canonical offer-card geometry after the J13–J16 merchandising passes. */
/*
 * The featured Bundle used to be scaled by several historical rules. Scaling the
 * entire card rasterises its text on some browsers, moves its badge towards the
 * section subtitle and makes its internal spacing look different from its siblings.
 * Keep emphasis in the border/shadow instead; card typography stays pixel-crisp.
 */
@media (min-width: 992px) {
    .commerce-showroom-offer--bundle.is-featured {
        margin: 0 !important;
        transform: none !important;
        will-change: auto;
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        transform: translateY(-4px) !important;
    }
}

/* Editorial role labels use the casing entered in the Builder for every offer. */
.commerce-showroom-offer__role,
.commerce-showroom-offer--bundle .commerce-showroom-offer__role {
    margin: 0 0 .55rem;
    font-family: inherit;
    font-size: .62rem;
    font-weight: 750;
    letter-spacing: .09em;
    line-height: 1.1;
    text-transform: none;
}

/* One inner rhythm for PDF, Bundle and Course. */
.commerce-showroom-offer__body,
.commerce-showroom-offer.is-featured .commerce-showroom-offer__body,
.commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__body {
    padding: 1.05rem 1.25rem 1.15rem;
}

.commerce-showroom-offer__body h3,
.commerce-showroom-offer.is-featured .commerce-showroom-offer__body h3 {
    margin: 0;
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1.16;
}

.commerce-showroom-offer__subtitle,
.commerce-showroom-offer__description {
    min-height: 0;
    margin: .5rem 0 0;
    font-size: .92rem;
    font-weight: 400;
    line-height: 1.45;
}

.commerce-showroom-offer__features,
.commerce-showroom-offer.is-featured .commerce-showroom-offer__features {
    flex: 0 0 auto;
    gap: .32rem;
    margin: .75rem 0 .8rem;
}

/* Safety for legacy/published payloads created before hasdescription existed. */
.commerce-showroom-offer__description:empty {
    display: none;
    min-height: 0;
    margin: 0;
}

@media (max-width: 767.98px) {
    .commerce-showroom-offer__body,
    .commerce-showroom-offer.is-featured .commerce-showroom-offer__body,
    .commerce-showroom-offer--bundle.is-featured .commerce-showroom-offer__body {
        padding: 1.05rem 1.15rem 1.15rem;
    }
}

/* J16A.4 — uppercase offer roles and structurally larger featured Bundle. */
/*
 * Role labels are merchandising categories: render them consistently in uppercase
 * regardless of the casing stored in the Builder. The underlying editorial value
 * remains untouched in JSON and continues to be reusable elsewhere.
 */
.commerce-showroom-offer__role,
.commerce-showroom-offer--bundle .commerce-showroom-offer__role {
    text-transform: uppercase;
}

/*
 * Make the featured Bundle slightly wider through the grid itself, never through
 * transform: scale(). This keeps text and icons pixel-crisp and prevents the card
 * from moving upwards into the section subtitle. The Bundle's 16:9 media therefore
 * becomes naturally a little larger as well.
 */
@media (min-width: 992px) {
    .commerce-showroom-offers--columns-3 .commerce-showroom-offers__grid,
    .commerce-showroom-offers .commerce-showroom-offers__grid:has(> .commerce-showroom-offer:nth-child(3):last-child) {
        grid-template-columns: minmax(0, .975fr) minmax(0, 1.05fr) minmax(0, .975fr) !important;
    }

    .commerce-showroom-offer--bundle.is-featured,
    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        margin: 0 !important;
        transform: none !important;
        will-change: auto;
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        /* Preserve the premium hover only through border/shadow, not geometry. */
        transform: none !important;
    }
}

/* J16A.5 — taller featured Bundle, restored hover lift and safer offer spacing. */
/*
 * The Bundle remains wider through the grid (J16A.4), but it also needs a little
 * more vertical presence. Increase its box height directly instead of scaling the
 * rendered card: fonts and icons remain pixel-crisp and the 16:9 image keeps its
 * native geometry. The extra section-to-grid spacing compensates for the Bundle's
 * small upward extension so the featured badge never crowds the section subtitle.
 */
@media (min-width: 992px) {
    .commerce-showroom-offers .commerce-showroom-offers__grid,
    .commerce-showroom-offers--columns-3 .commerce-showroom-offers__grid,
    .commerce-showroom-offers .commerce-showroom-offers__grid:has(> .commerce-showroom-offer:nth-child(3):last-child) {
        margin-top: calc(var(--showroom-offers-cards-top-spacing) + 2rem) !important;
    }

    .commerce-showroom-offer--bundle.is-featured {
        height: calc(100% + 1.5rem);
        margin-top: -.75rem !important;
        margin-bottom: -.75rem !important;
        transform: none !important;
        will-change: transform;
    }

    .commerce-showroom-offer--bundle.is-featured:hover,
    .commerce-showroom-offer--bundle.is-featured:focus-within {
        transform: translateY(-16px) !important;
    }
}

/* Mobile cards stay naturally stacked: only keep a little extra breathing room. */
@media (max-width: 767.98px) {
    .commerce-showroom-offers .commerce-showroom-offers__grid {
        margin-top: calc(var(--showroom-offers-cards-top-spacing) + .75rem) !important;
    }
}




/* J16C.6.5 — Exercise Explorer badge aligned with Offers badge. */
.commerce-showroom-exercises__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .58rem;
    min-height: 2.45rem;
    margin: 0 auto .65rem !important;
    padding: .52rem 1.08rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .55rem 1.45rem rgba(48, 32, 86, .06), 0 0 0 .12rem rgba(246, 31, 130, .05);
    font-size: .86rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}
.commerce-showroom-exercises__badge i { font-size: 1rem; }
.commerce-showroom-exercises__description { white-space: pre-line; }

/* J16C.6.6 — structural Exercise Explorer layout cleanup. */
.commerce-showroom-exercises__heading {
    margin-bottom: 1.35rem;
}

.commerce-showroom-explorer {
    display: grid;
    grid-template-columns: minmax(34rem, 1.16fr) minmax(26rem, .94fr);
    gap: clamp(1.3rem, 2.4vw, 2.15rem);
    align-items: start;
}

.commerce-showroom-explorer__left,
.commerce-showroom-explorer__right {
    min-width: 0;
}

.commerce-showroom-explorer__left {
    display: flex;
    flex-direction: column;
    align-self: start;
    margin-top: 0;
}

.commerce-showroom-explorer__right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    margin-top: 0;
}

.commerce-showroom-explorer .commerce-showroom-exercises-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: .68rem;
}

.commerce-showroom-exercise {
    display: flex;
    width: 100%;
    min-height: 4.45rem;
    align-items: center;
    gap: .72rem;
    padding: calc(.62rem + 2px) calc(.78rem + 2px);
    margin-block: 1px;
    border: 1px solid rgba(217, 48, 121, .14);
    border-radius: 1rem;
    color: inherit;
    background: #fff;
    box-shadow: 0 4px 14px rgba(50, 39, 73, .035);
    text-align: left;
    cursor: pointer;
    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease,
        background-color .16s ease;
}

.commerce-showroom-exercise:hover,
.commerce-showroom-exercise:focus-visible,
.commerce-showroom-exercise.is-active {
    border-color: rgba(217, 48, 121, .48);
    background: linear-gradient(135deg, #fff, #fff5f9);
    box-shadow: 0 .75rem 1.65rem rgba(217, 48, 121, .10);
    transform: translateY(-1px);
    outline: none;
}

.commerce-showroom-exercise .commerce-showroom-icon {
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 2.55rem;
    border-radius: .78rem;
}

.commerce-showroom-exercise strong,
.commerce-showroom-exercise small {
    display: block;
}

.commerce-showroom-exercise strong {
    margin-bottom: .14rem;
    font-size: .9rem;
    line-height: 1.18;
}

.commerce-showroom-exercise small {
    display: -webkit-box;
    overflow: hidden;
    color: #7e8795;
    font-size: .74rem;
    line-height: 1.25;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.commerce-showroom-exercises__desktop-hint {
    display: flex;
    align-items: center;
    gap: .5rem;
    justify-content: center;
    margin: .82rem 0 0;
    padding-inline: .4rem;
    color: #786f84;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.35;
}

.commerce-showroom-exercises__desktop-hint i {
    color: var(--showroom-pink);
}

.commerce-showroom-exercise-preview {
    position: relative;
    top: 0;
    width: 90%;
    margin: 0 auto;
    transform: none;
}

.commerce-showroom-exercise-preview__screen {
    margin: 0;
}

.commerce-showroom-exercise-navigation {
    display: grid;
    gap: .42rem;
    margin-top: .58rem;
}

.commerce-showroom-exercise-navigation__hint {
    display: none;
}

.commerce-showroom-exercise-navigation__controls {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
}

.commerce-showroom-exercise-navigation__arrow {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(232, 74, 143, .34);
    border-radius: 50%;
    color: #dd3f82;
    background: #fff;
    box-shadow: 0 4px 12px rgba(196, 54, 116, .07);
}

.commerce-showroom-exercise-navigation__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-width: 0;
}

.commerce-showroom-exercise-navigation__dot {
    display: grid;
    width: .95rem;
    height: 1.35rem;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
}

.commerce-showroom-exercise-navigation__dot span {
    width: .46rem;
    height: .46rem;
    border-radius: 50%;
    background: #bcc2ca;
}

.commerce-showroom-exercise-navigation__dot.is-active span {
    width: .68rem;
    height: .68rem;
    background: #ec3f88;
}

.commerce-showroom-exercise-navigation__counter {
    margin-top: 0;
    color: #51445f;
    font-size: .8rem;
    font-weight: 800;
    text-align: center;
}

.commerce-showroom-exercise-mobile-meta {
    display: none;
}

@media (min-width: 992px) {
    .commerce-showroom-exercises__description {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    .commerce-showroom-exercises__badge {
        min-height: 2.15rem;
        gap: .45rem;
        margin-bottom: .55rem !important;
        padding: .42rem .78rem;
        font-size: .72rem !important;
    }

    .commerce-showroom-exercises__heading {
        margin-bottom: .35rem;
    }

    .commerce-showroom-explorer {
        display: block;
        margin-top: 0;
        padding-top: 0;
    }

    .commerce-showroom-explorer__left {
        display: none;
    }

    .commerce-showroom-explorer__right {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 0;
        margin-top: 0;
        padding-top: 0;
    }

    .commerce-showroom-exercise-preview {
        order: 1;
        position: relative;
        top: 0;
        width: 90%;
        margin: 0 auto;
        transform: none;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-select: none;
    }

    .commerce-showroom-exercise-preview__screen {
        overflow: hidden;
        margin: 0;
        border-radius: 1rem;
        box-shadow: 0 12px 28px rgba(45, 35, 66, .13);
    }

    .commerce-showroom-exercise-preview__toolbar {
        min-height: 2.2rem;
        padding: .55rem .7rem;
    }

    .commerce-showroom-exercise-preview__toolbar strong {
        margin-left: auto;
        font-size: .68rem;
    }

    .commerce-showroom-exercise-navigation {
        order: 3;
        display: flex;
        flex-direction: column;
        gap: .4rem;
        margin: .46rem 0 0;
    }

    .commerce-showroom-exercise-navigation__hint {
        order: 3;
        display: flex;
        align-items: center;
        gap: .65rem;
        margin: .08rem 0 0;
        padding: .58rem .72rem;
        border: 1px solid rgba(233, 76, 145, .16);
        border-radius: .82rem;
        color: #bd3973;
        background: rgba(255, 248, 251, .96);
        box-shadow: 0 4px 13px rgba(195, 58, 119, .045);
        font-size: .71rem;
        font-weight: 600;
        line-height: 1.32;
    }

    .commerce-showroom-exercise-navigation__hand {
        position: relative;
        display: grid;
        flex: 0 0 2.35rem;
        width: 2.35rem;
        height: 2.35rem;
        place-items: center;
        border-radius: .72rem;
        color: #fff;
        background: linear-gradient(135deg, #f1609f, #d53d7f);
        box-shadow: 0 5px 12px rgba(215, 62, 128, .18);
    }

    .commerce-showroom-exercise-navigation__hand > .fa-hand-pointer {
        font-size: 1.05rem;
        transform: translate(-.2rem, .13rem);
    }

    .commerce-showroom-exercise-navigation__arrows {
        position: absolute;
        top: .34rem;
        right: .25rem;
        color: #fff;
        font-size: .55rem;
        opacity: .95;
        animation: commerce-showroom-exercise-swipe-hint 1.35s ease-in-out infinite;
    }

    .commerce-showroom-exercise-navigation__controls {
        order: 1;
        gap: .48rem;
    }

    .commerce-showroom-exercise-navigation__arrow {
        width: 2.15rem;
        height: 2.15rem;
    }

    .commerce-showroom-exercise-navigation__dots {
        gap: .25rem;
    }

    .commerce-showroom-exercise-navigation__dot {
        width: .78rem;
        height: 1.08rem;
    }

    .commerce-showroom-exercise-navigation__dot span {
        width: .36rem;
        height: .36rem;
    }

    .commerce-showroom-exercise-navigation__dot.is-active span {
        width: .56rem;
        height: .56rem;
    }

    .commerce-showroom-exercise-navigation__counter {
        order: 2;
        font-size: .76rem;
    }

    .commerce-showroom-exercise-mobile-meta {
        order: 2;
        display: flex;
        width: 100%;
        align-items: center;
        gap: .72rem;
        margin: .34rem 0 0;
        padding: calc(.62rem + 2px) calc(.78rem + 2px);
        border: 1px solid rgba(217, 48, 121, .14);
        border-radius: 1rem;
        color: inherit;
        background: #fff;
        box-shadow: 0 4px 14px rgba(50, 39, 73, .035);
    }

    .commerce-showroom-exercise-mobile-meta__icon {
        width: 2.55rem;
        height: 2.55rem;
        flex: 0 0 2.55rem;
        border-radius: .78rem;
    }

    .commerce-showroom-exercise-mobile-meta__copy {
        min-width: 0;
    }

    .commerce-showroom-exercise-mobile-meta strong,
    .commerce-showroom-exercise-mobile-meta small {
        display: block;
    }

    .commerce-showroom-exercise-mobile-meta strong {
        margin: 0 0 .14rem;
        color: #30283f;
        font-size: .9rem;
        line-height: 1.18;
    }

    .commerce-showroom-exercise-mobile-meta small {
        color: #7e8795;
        font-size: .74rem;
        line-height: 1.25;
    }
}

@keyframes commerce-showroom-exercise-swipe-hint {
    0%,
    100% {
        transform: translateX(-1px);
    }

    50% {
        transform: translateX(2px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-exercise-navigation__arrows {
        animation: none !important;
    }
}

/* J16C.6.6.1 — alignment micro-fix: preview/card top + mobile subtitle spacing + desktop hint offset. */

/* J16C.6.6.2 — +2px exercise-card padding, +1px vertical margin, preview at 90%. */

/* J16C.6.6.3 — white Exercise Explorer background + centered hint + soft pink card borders. */

/* J16C.6.6.4 — mobile active exercise rendered as a desktop-style premium card. */

/* J16C.6.6.5 — mobile order: preview > active card > navigation > swipe hint. */

/* J16D.2 — fixed criteria + swipeable offer columns on mobile. */
.commerce-showroom-comparison-mobile{display:none}
@media(max-width:767.98px){
.commerce-showroom-comparison__scroller{display:none}.commerce-showroom-comparison-mobile{display:block;margin-top:1rem}
.commerce-showroom-comparison-mobile__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;margin-bottom:.55rem}
.commerce-showroom-comparison-mobile__tab{min-width:0;padding:.5rem .2rem;border:1px solid rgba(217,48,121,.14);border-radius:.75rem;background:#fff;color:#747b86;font-size:.7rem;font-weight:750;line-height:1.15}
.commerce-showroom-comparison-mobile__tab.is-active{border-color:rgba(246,31,130,.4);background:#fff4f9;color:var(--showroom-pink);box-shadow:0 .3rem .8rem rgba(246,31,130,.07)}
.commerce-showroom-comparison-mobile__viewport{display:grid;grid-template-columns:42% 58%;overflow:hidden;border:1px solid var(--showroom-line);border-radius:1rem;background:#fff;box-shadow:0 .7rem 1.8rem rgba(52,34,95,.05)}
.commerce-showroom-comparison-mobile__criteria{z-index:2;border-right:1px solid var(--showroom-line);background:#fff}
.commerce-showroom-comparison-mobile__rail{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}.commerce-showroom-comparison-mobile__rail::-webkit-scrollbar{display:none}
.commerce-showroom-comparison-mobile__offer{flex:0 0 100%;min-width:100%;scroll-snap-align:start;scroll-snap-stop:always;background:#fff}.commerce-showroom-comparison-mobile__offer.is-featured{background:#fffafd}
.commerce-showroom-comparison-mobile__head,.commerce-showroom-comparison-mobile__criterion,.commerce-showroom-comparison-mobile__value{display:flex;min-height:3.65rem;align-items:center;padding:.55rem .58rem;border-bottom:1px solid var(--showroom-line)}
.commerce-showroom-comparison-mobile__head{min-height:3.8rem;justify-content:center;background:#fbfafc;color:#382f45;font-size:.76rem;font-weight:850;text-align:center}
.commerce-showroom-comparison-mobile__criterion{color:#535d69;font-size:.7rem;font-weight:700;line-height:1.25}.commerce-showroom-comparison-mobile__value{justify-content:center;color:#5d6874;font-size:.73rem;font-weight:650;line-height:1.3;text-align:center}
.commerce-showroom-comparison-mobile__value .fa-circle-check{color:var(--showroom-pink);font-size:1rem}.commerce-showroom-comparison-mobile__value .fa-minus{color:#aeb2b9}
.commerce-showroom-comparison-mobile__navigation{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.65rem}.commerce-showroom-comparison-mobile__navigation>button{display:flex;width:2rem;height:2rem;align-items:center;justify-content:center;border:1px solid rgba(217,48,121,.16);border-radius:50%;background:#fff;color:var(--showroom-pink)}.commerce-showroom-comparison-mobile__navigation>button:disabled{opacity:.35}
.commerce-showroom-comparison-mobile__dots{display:flex;gap:.3rem}.commerce-showroom-comparison-mobile__dots button{width:.42rem;height:.42rem;padding:0;border:0;border-radius:1rem;background:#d8dae0}.commerce-showroom-comparison-mobile__dots button.is-active{width:1rem;background:var(--showroom-pink)}
.commerce-showroom-comparison-mobile__navigation span{min-width:2.4rem;color:#818792;font-size:.69rem;font-weight:700;text-align:center}.commerce-showroom-comparison-mobile__hint{display:flex;align-items:center;justify-content:center;gap:.35rem;margin:.45rem 0 0;color:#89818f;font-size:.69rem;text-align:center}.commerce-showroom-comparison-mobile__hint i{color:var(--showroom-pink)}
}


/* J16D.3 — mobile comparison polish/fixes. */
@media(max-width:767.98px){
    .commerce-showroom-comparison > .commerce-showroom-container > .commerce-showroom-comparison__cta{
        display:none;
    }

    .commerce-showroom-comparison-mobile{
        margin-top:.7rem;
    }

    .commerce-showroom-comparison-mobile__tabs{
        gap:.25rem;
        margin-bottom:.4rem;
    }

    .commerce-showroom-comparison-mobile__tab{
        display:flex;
        min-height:3.15rem;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:.12rem;
        padding:.34rem .18rem;
        font-size:.64rem;
        line-height:1.08;
    }

    .commerce-showroom-comparison-mobile__tab span{
        display:-webkit-box;
        overflow:hidden;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
    }

    .commerce-showroom-comparison-mobile__tab small{
        color:#d93079;
        font-size:.64rem;
        font-weight:850;
        white-space:nowrap;
    }

    .commerce-showroom-comparison-mobile__viewport{
        grid-template-columns:40% 60%;
        border-radius:.85rem;
    }

    .commerce-showroom-comparison-mobile__head,
    .commerce-showroom-comparison-mobile__criterion,
    .commerce-showroom-comparison-mobile__value{
        min-height:2.72rem;
        padding:.32rem .42rem;
    }

    .commerce-showroom-comparison-mobile__head{
        min-height:3.05rem;
        flex-direction:column;
        gap:.12rem;
        font-size:.67rem;
        line-height:1.1;
    }

    .commerce-showroom-comparison-mobile__head strong{
        font-size:.68rem;
        line-height:1.08;
    }

    .commerce-showroom-comparison-mobile__head small{
        color:#d93079;
        font-size:.66rem;
        font-weight:850;
    }

    .commerce-showroom-comparison-mobile__criterion{
        font-size:.64rem;
        line-height:1.12;
    }

    .commerce-showroom-comparison-mobile__value{
        font-size:.66rem;
        line-height:1.14;
    }

    .commerce-showroom-comparison-mobile__value .fa-circle-check{
        font-size:.88rem;
    }

    .commerce-showroom-comparison-mobile__navigation{
        gap:.48rem;
        margin-top:.42rem;
    }

    .commerce-showroom-comparison-mobile__navigation>button{
        width:1.8rem;
        height:1.8rem;
    }

    .commerce-showroom-comparison-mobile__hint{
        margin:.3rem 0 0;
        font-size:.65rem;
    }

    .commerce-showroom-comparison-mobile__cta{
        display:flex;
        justify-content:center;
        margin-top:.55rem;
    }

    .commerce-showroom-comparison-mobile__cta .commerce-showroom-btn{
        width:100%;
        min-height:2.8rem;
        padding:.62rem 1rem;
    }
}








/* J16D.6.1 — single rounded frame + stronger desktop grid + aligned mobile badge. */
:root {
    --showroom-comparison-head-bg: #f1eef4;
    --showroom-comparison-featured-bg: #fff0f5;
    --showroom-comparison-featured-head-bg: #f7d6e3;
    --showroom-comparison-frame: rgba(52, 65, 78, .16);
    --showroom-comparison-grid: rgba(52, 65, 78, .14);
    --showroom-comparison-check: #1f9d65;
}

/* Functional wrapper only: never draw a second frame. */
.commerce-showroom-comparison__scroller {
    overflow-x: auto;
    padding: 1.4rem .25rem .2rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* One and only visible outer frame. */
.commerce-showroom-comparison__table {
    position: relative;
    min-width: 760px;
    overflow: visible;
    margin: 0;
    border: 1px solid var(--showroom-comparison-frame);
    border-radius: 1rem;
    background: #fff;
    box-shadow: none;
}

/* Internal grid. */
.commerce-showroom-comparison__row {
    border-top: 1px solid var(--showroom-comparison-grid);
}

.commerce-showroom-comparison__row:first-child {
    border-top: 0;
}

.commerce-showroom-comparison__feature,
.commerce-showroom-comparison__cell,
.commerce-showroom-comparison__offer {
    border-left: 1px solid var(--showroom-comparison-grid);
    background-clip: padding-box;
}

.commerce-showroom-comparison__feature:first-child,
.commerce-showroom-comparison__row > :first-child {
    border-left: 0;
}

.commerce-showroom-comparison__row:last-child > * {
    border-bottom: 0;
}

/* Let the outer table frame own the rounded corners cleanly. */
.commerce-showroom-comparison__row:first-child .commerce-showroom-comparison__feature {
    border-radius: calc(1rem - 1px) 0 0 0;
}

.commerce-showroom-comparison__row:first-child .commerce-showroom-comparison__offer:last-child {
    border-radius: 0 calc(1rem - 1px) 0 0;
}

.commerce-showroom-comparison__row:last-child .commerce-showroom-comparison__feature {
    border-radius: 0 0 0 calc(1rem - 1px);
}

.commerce-showroom-comparison__row:last-child .commerce-showroom-comparison__cell:last-child {
    border-radius: 0 0 calc(1rem - 1px) 0;
}

.commerce-showroom-comparison__row--head,
.commerce-showroom-comparison__row--head .commerce-showroom-comparison__feature,
.commerce-showroom-comparison__row--head .commerce-showroom-comparison__offer {
    background: var(--showroom-comparison-head-bg);
}

.commerce-showroom-comparison__cell,
.commerce-showroom-comparison__feature {
    background-color: #fff;
}

.commerce-showroom-comparison__cell--featured,
.commerce-showroom-comparison__offer.is-featured {
    background: var(--showroom-comparison-featured-bg);
    color: inherit;
}

.commerce-showroom-comparison__row--head .commerce-showroom-comparison__offer.is-featured {
    position: relative;
    overflow: visible;
    background: var(--showroom-comparison-featured-head-bg);
    color: #25303b;
}

.commerce-showroom-comparison__cell--featured .commerce-showroom-comparison__value {
    color: #52606d;
}

.commerce-showroom-comparison__cell .fa-circle-check,
.commerce-showroom-comparison__cell--featured .fa-circle-check,
.commerce-showroom-comparison-mobile__value .fa-circle-check {
    color: var(--showroom-comparison-check);
}

.commerce-showroom-comparison__recommended,
.commerce-showroom-comparison-mobile__recommended {
    display: inline-flex;
    position: absolute;
    z-index: 20;
    align-items: center;
    justify-content: center;
    padding: .2rem .62rem;
    border-radius: 999px;
    color: #fff;
    background: var(--showroom-pink);
    box-shadow: 0 .35rem .85rem rgba(246, 31, 130, .2);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .035em;
    line-height: 1.05;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Desktop: centered over the Bundle column top border. */
.commerce-showroom-comparison__recommended {
    top: -.72rem;
    left: 50%;
    transform: translateX(-50%);
}

@media (min-width: 768px) {
    /* Slightly darker grid on desktop only, as requested. */
    .commerce-showroom-comparison__row {
        border-top-color: rgba(52, 65, 78, .17);
    }

    .commerce-showroom-comparison__feature,
    .commerce-showroom-comparison__cell,
    .commerce-showroom-comparison__offer {
        border-left-color: rgba(52, 65, 78, .17);
    }
}

@media (max-width: 767.98px) {
    /*
     * The mobile badge belongs to the whole viewport, not to the swipe rail.
     * The Bundle column occupies the right 60% of the viewport, so its
     * horizontal centre is 40% + 30% = 70% of the viewport.
     */
    .commerce-showroom-comparison-mobile__viewport {
        position: relative;
        overflow: visible;
        margin-top: 1.15rem;
        border: 1px solid var(--showroom-comparison-frame);
        border-radius: 1rem;
        background: #fff;
        box-shadow: none;
    }

    .commerce-showroom-comparison-mobile__criteria {
        overflow: hidden;
        border-right: 1px solid var(--showroom-comparison-grid);
        border-radius: calc(1rem - 1px) 0 0 calc(1rem - 1px);
        background: #fff;
    }

    .commerce-showroom-comparison-mobile__rail {
        overflow-x: auto;
        overflow-y: hidden;
        border-radius: 0 calc(1rem - 1px) calc(1rem - 1px) 0;
    }

    .commerce-showroom-comparison-mobile__head,
    .commerce-showroom-comparison-mobile__criterion,
    .commerce-showroom-comparison-mobile__value {
        border-bottom-color: var(--showroom-comparison-grid);
    }

    .commerce-showroom-comparison-mobile__head {
        background: var(--showroom-comparison-head-bg);
    }

    .commerce-showroom-comparison-mobile__offer {
        background: #fff;
    }

    .commerce-showroom-comparison-mobile__offer.is-featured {
        background: var(--showroom-comparison-featured-bg);
    }

    .commerce-showroom-comparison-mobile__offer.is-featured .commerce-showroom-comparison-mobile__head {
        background: var(--showroom-comparison-featured-head-bg);
    }

    .commerce-showroom-comparison-mobile__recommended {
        top: -.62rem;
        left: 70%;
        transform: translateX(-50%);
    }

    .commerce-showroom-comparison-mobile__recommended[hidden] {
        display: none !important;
    }
}


/* J16E.1 — FAQ heading badge aligned with the other showroom badges. */
.commerce-showroom-faq__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    margin: 0 auto .55rem !important;
    padding: .38rem .82rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .45rem 1.2rem rgba(246, 31, 130, .08);
    font-size: .78rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-faq__badge i {
    font-size: .95rem;
}

.commerce-showroom-faq__heading > p:last-child {
    max-width: 52rem;
    margin: .6rem auto 0;
}

@media (max-width: 767.98px) {
    .commerce-showroom-faq__badge {
        font-size: .72rem !important;
    }
}









/* J16F3.1 — unified FAQ/Support continuity and centered vertical Support layout. */

/*
 * Important: these rules intentionally override the generic section-spacing
 * utilities for FAQ and Support, including on very wide screens.
 */
.commerce-showroom-section.commerce-showroom-faq,
.commerce-showroom-faq.commerce-showroom-spacing--compact,
.commerce-showroom-faq.commerce-showroom-spacing--normal,
.commerce-showroom-faq.commerce-showroom-spacing--large {
    padding-bottom: 1.1rem !important;
}

.commerce-showroom-support,
.commerce-showroom-support.commerce-showroom-spacing--compact,
.commerce-showroom-support.commerce-showroom-spacing--normal,
.commerce-showroom-support.commerce-showroom-spacing--large {
    padding-top: .65rem !important;
    padding-bottom: clamp(4rem, 6vw, 5.5rem) !important;
    background: transparent;
}

.commerce-showroom-support__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.85rem;
    padding: clamp(1.7rem, 2.8vw, 2.6rem);
    border: 1px solid rgba(52, 65, 78, .11);
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 1rem 2.5rem rgba(42, 49, 59, .055);
    text-align: center;
}

.commerce-showroom-support__copy {
    width: min(100%, 52rem);
    min-width: 0;
}

.commerce-showroom-support__copy h2 {
    margin: 0 0 .7rem;
    color: #2f2450;
    font-size: clamp(1.65rem, 2.5vw, 2.35rem);
    line-height: 1.12;
    text-align: center;
}

.commerce-showroom-support__copy p {
    max-width: 46rem;
    margin: 0 auto;
    color: #657284;
    font-size: .98rem;
    line-height: 1.72;
    white-space: pre-line;
    text-align: center;
}

.commerce-showroom-support__actions {
    display: flex;
    width: min(100%, 42rem);
    flex-direction: column;
    align-items: center;
    gap: .85rem;
}

.commerce-showroom-support__actions .commerce-showroom-btn {
    min-height: 3rem;
    justify-content: center;
    white-space: nowrap;
}

.commerce-showroom-support__channels {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

.commerce-showroom-support__channel {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: .48rem;
    padding: .3rem .72rem .3rem .3rem;
    border: 1px solid rgba(246, 31, 130, .16);
    border-radius: 999px;
    color: #51455f;
    background: #fff;
    box-shadow: 0 .35rem .9rem rgba(42, 49, 59, .045);
    font-size: .8rem;
    font-weight: 750;
    line-height: 1.1;
    text-decoration: none;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease,
        background-color .16s ease;
}

.commerce-showroom-support__channel-icon {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--showroom-pink);
    font-size: .9rem;
}

.commerce-showroom-support__channel-label {
    overflow-wrap: anywhere;
}

.commerce-showroom-support__channel:hover,
.commerce-showroom-support__channel:focus-visible {
    border-color: rgba(246, 31, 130, .34);
    color: #352746;
    background: #fff7fb;
    box-shadow: 0 .6rem 1.3rem rgba(246, 31, 130, .09);
    transform: translateY(-2px);
}

/* Explicit wide-screen protection against generic showroom spacing rules. */
@media (min-width: 1400px) {
    .commerce-showroom-section.commerce-showroom-faq,
    .commerce-showroom-faq.commerce-showroom-spacing--compact,
    .commerce-showroom-faq.commerce-showroom-spacing--normal,
    .commerce-showroom-faq.commerce-showroom-spacing--large {
        padding-bottom: 1rem !important;
    }

    .commerce-showroom-support,
    .commerce-showroom-support.commerce-showroom-spacing--compact,
    .commerce-showroom-support.commerce-showroom-spacing--normal,
    .commerce-showroom-support.commerce-showroom-spacing--large {
        padding-top: .55rem !important;
    }
}

@media (max-width: 991.98px) {
    .commerce-showroom-section.commerce-showroom-faq,
    .commerce-showroom-faq.commerce-showroom-spacing--compact,
    .commerce-showroom-faq.commerce-showroom-spacing--normal,
    .commerce-showroom-faq.commerce-showroom-spacing--large {
        padding-bottom: .95rem !important;
    }

    .commerce-showroom-support,
    .commerce-showroom-support.commerce-showroom-spacing--compact,
    .commerce-showroom-support.commerce-showroom-spacing--normal,
    .commerce-showroom-support.commerce-showroom-spacing--large {
        padding-top: .45rem !important;
    }

    .commerce-showroom-support__card {
        gap: 1.55rem;
        padding: 1.4rem;
    }

    .commerce-showroom-support__actions {
        width: 100%;
    }

    .commerce-showroom-support__channels {
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-section.commerce-showroom-faq,
    .commerce-showroom-faq.commerce-showroom-spacing--compact,
    .commerce-showroom-faq.commerce-showroom-spacing--normal,
    .commerce-showroom-faq.commerce-showroom-spacing--large {
        padding-bottom: .7rem !important;
    }

    .commerce-showroom-support,
    .commerce-showroom-support.commerce-showroom-spacing--compact,
    .commerce-showroom-support.commerce-showroom-spacing--normal,
    .commerce-showroom-support.commerce-showroom-spacing--large {
        padding-top: .3rem !important;
    }

    .commerce-showroom-support__card {
        gap: 1.35rem;
        padding: 1.15rem;
        border-radius: 1.25rem;
    }

    .commerce-showroom-support__copy h2 {
        margin-bottom: .5rem;
        font-size: 1.4rem;
    }

    .commerce-showroom-support__copy p {
        font-size: .86rem;
        line-height: 1.62;
    }

    .commerce-showroom-support__actions .commerce-showroom-btn {
        width: 100%;
        min-height: 2.8rem;
        padding: .65rem .85rem;
        font-size: .84rem;
    }

    .commerce-showroom-support__channels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: .45rem;
    }

    .commerce-showroom-support__channel {
        min-width: 0;
        width: 100%;
        min-height: 2.65rem;
        padding: .26rem .52rem .26rem .26rem;
        font-size: .74rem;
    }

    .commerce-showroom-support__channel--email {
        grid-column: 1 / -1;
    }

    .commerce-showroom-support__channel-icon {
        width: 1.95rem;
        height: 1.95rem;
        flex-basis: 1.95rem;
        font-size: .86rem;
    }
}

/* Preserve the compact single-line mobile sticky introduced in J16F2.1. */
@media (max-width: 767.98px) {
    .commerce-showroom-mobile-sticky {
        padding: .45rem .55rem calc(.45rem + env(safe-area-inset-bottom));
    }

    .commerce-showroom-mobile-sticky__inner {
        min-height: 3.55rem;
        gap: .5rem;
        padding: .38rem .45rem;
        border-radius: 999px;
    }

    .commerce-showroom-mobile-sticky__currency {
        min-height: 2.75rem;
        padding: .35rem .65rem;
        border-radius: 999px;
        font-size: .82rem;
        line-height: 1;
        white-space: nowrap;
    }

    .commerce-showroom-mobile-sticky__cta {
        min-width: 0;
        min-height: 2.75rem;
        padding: .35rem .55rem;
        font-size: .84rem;
        line-height: 1;
        white-space: nowrap;
    }

    .commerce-showroom-mobile-sticky__cta span,
    .commerce-showroom-mobile-sticky__cta strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .commerce-showroom-mobile-sticky__cta i {
        flex: 0 0 auto;
    }
}

@media (max-width: 389.98px) {
    .commerce-showroom-mobile-sticky__currency {
        padding-inline: .52rem;
        font-size: .78rem;
    }

    .commerce-showroom-mobile-sticky__cta {
        font-size: .79rem;
    }
}


/* J16F3.3 — FAQ/Support must not reserve viewport-sized intrinsic space. */
@supports (content-visibility: auto) {
    .commerce-showroom > .commerce-showroom-faq,
    .commerce-showroom > .commerce-showroom-support {
        content-visibility: visible;
        contain-intrinsic-size: none;
    }
}

/* Interactive hesitation block. */
.commerce-showroom-interactive-problem__heading { max-width: 980px; margin-bottom: 28px; }
.commerce-showroom-interactive-problem__badge {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    margin: 0 auto .8rem !important;
    padding: .38rem .82rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .45rem 1.2rem rgba(246, 31, 130, .08);
    font-size: .78rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-interactive-problem__badge i {
    font-size: .95rem;
}
.commerce-showroom-interactive-problem__heading h2 { max-width:900px; margin:0 0 10px; color:#28175f; font-size:clamp(2rem,3.2vw,3.4rem); line-height:1.12; }
.commerce-showroom-interactive-problem__heading h2 span { color:#f51b75; }
.commerce-showroom-interactive-problem__heading > p:last-child { margin:0; color:#6e6589; font-size:1.12rem; }
.commerce-showroom-interactive-problem__stage {
    position: relative;
    display: grid;
    grid-template-columns: 26% 28% 46%;
    overflow: hidden;
    border: 1px solid #eadfe5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(42,24,80,.05);
}
.commerce-showroom-interactive-problem__stage > div { padding:32px 34px; min-width:0; }
.commerce-showroom-interactive-problem__stage > div + div { border-left:1px solid #f0dfe6; }
.commerce-showroom-interactive-problem__stage > div {
    position: relative;
    z-index: 2;
}

.commerce-showroom-interactive-problem__arrows {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.commerce-showroom-interactive-problem__arrows path {
    fill: none;
    stroke: rgba(245, 27, 117, .72);
    stroke-width: 2.35;
    stroke-dasharray: 7 7;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.commerce-showroom-interactive-problem__arrows polyline,
.commerce-showroom-interactive-problem__arrows line {
    vector-effect: non-scaling-stroke;
}

.commerce-showroom-interactive-problem__stage h3 { margin:0 0 22px; color:#28175f; font-size:1.05rem; }
.commerce-showroom-interactive-problem__choice-list { display:grid; gap:10px; }
.commerce-showroom-interactive-problem__choice { display:flex; align-items:center; gap:12px; width:100%; padding:10px 14px; border:1px solid #f0e7eb; border-radius:13px; background:#fff; color:#24155c; text-align:left; box-shadow:0 6px 18px rgba(42,24,80,.07); cursor:grab; transition:.18s ease; }
.commerce-showroom-interactive-problem__choice:hover,.commerce-showroom-interactive-problem__choice:focus-visible { border-color:#ff8dbb; transform:translateY(-2px); box-shadow:0 9px 24px rgba(244,31,119,.12); }
.commerce-showroom-interactive-problem__choice-status {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    place-items: center;
    border: 1px solid #ff9dc2;
    border-radius: 50%;
    color: #f51b75;
    font-weight: 900;
}
.commerce-showroom-interactive-problem__target-column {
    position: relative;
    z-index: 3 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.commerce-showroom-interactive-problem__target {
    position: relative;
    z-index: 5;
    width: 180px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff4f7, #f9e7eb);
    color: #f20f6b;
    transition: .2s ease;
    box-shadow:
        0 0 0 10px rgba(255, 255, 255, .96),
        inset 0 0 0 1px rgba(245,27,117,.04);
}
.commerce-showroom-interactive-problem__target.is-dragover { transform:scale(1.06); box-shadow:0 0 0 8px rgba(245,27,117,.08); }
.commerce-showroom-interactive-problem__target.is-correct { background:#eaf9f0; color:#19a463; }
.commerce-showroom-interactive-problem__target.is-error { background:#fff0f2; color:#e94252; }
.commerce-showroom-interactive-problem__target-icon { font-size:5.4rem; line-height:1; font-weight:900; }
.commerce-showroom-interactive-problem__selected { min-height:24px; margin-top:12px; color:#28175f; font-size:1.15rem; }
.commerce-showroom-interactive-problem__feedback { min-height:22px; margin-top:3px; font-size:.9rem; font-weight:800; color:#746b87; }
.commerce-showroom-interactive-problem__consequences {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    min-height: 100%;
}
.commerce-showroom-interactive-problem__consequence {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 0;
    padding: 1rem 1.8rem;
    border-bottom: 1px solid #f0dfe6;
}
.commerce-showroom-interactive-problem__consequence + .commerce-showroom-interactive-problem__consequence { border-top:1px solid #f0dfe6; }
.commerce-showroom-interactive-problem__consequence::before {
    display: none;
}
.commerce-showroom-interactive-problem__consequence span { display:grid; place-items:center; width:32px; height:32px; border:2px solid #f51b75; border-radius:50%; color:#f51b75; font-size:1.35rem; line-height:1; }
.commerce-showroom-interactive-problem__consequence p { margin:0; line-height:1.55; }
.commerce-showroom-interactive-problem__solution { display:flex; align-items:center; gap:22px; margin-top:24px; padding:24px 30px; border:1px solid #bfe8cf; border-radius:20px; background:linear-gradient(90deg,#f1fbf5,#f8fdf9); color:#185d3c; }
.commerce-showroom-interactive-problem__solution-icon { display:grid; place-items:center; width:58px; height:58px; flex:0 0 58px; border-radius:50%; background:#21aa69; color:#fff; font-size:1.55rem; }
.commerce-showroom-interactive-problem__solution strong { display:block; margin-bottom:5px; font-size:1.08rem; }
.commerce-showroom-interactive-problem__solution p { margin:0; line-height:1.55; }
@media (max-width: 767.98px) {
 .commerce-showroom-interactive-problem__heading { margin-bottom:20px; }
 .commerce-showroom-interactive-problem__heading h2 { font-size:2rem; }
 .commerce-showroom-interactive-problem__stage { display:flex; flex-direction:column; overflow:visible; border-radius:18px; }
 .commerce-showroom-interactive-problem__stage > div { padding:22px 20px; }
 .commerce-showroom-interactive-problem__stage > div + div { border-left:0; border-top:1px solid #f0dfe6; }
 .commerce-showroom-interactive-problem__choice-list { grid-template-columns:1fr 1fr; }
 .commerce-showroom-interactive-problem__choice { padding:10px; gap:8px; }
 .commerce-showroom-interactive-problem__arrows { display:none; }
 .commerce-showroom-interactive-problem__target { width:142px; box-shadow:inset 0 0 0 1px rgba(245,27,117,.04); }
 .commerce-showroom-interactive-problem__target-icon { font-size:4.3rem; }
 .commerce-showroom-interactive-problem__consequence::before { display:none; }
 .commerce-showroom-interactive-problem__solution { align-items:flex-start; padding:20px; gap:14px; }
 .commerce-showroom-interactive-problem__solution-icon { width:44px; height:44px; flex-basis:44px; }
}
@media (prefers-reduced-motion: reduce) {
 .commerce-showroom-interactive-problem__choice,.commerce-showroom-interactive-problem__target { transition:none; }
}

.commerce-showroom-interactive-problem__consequence:last-child {
    border-bottom: 0;
}

.commerce-showroom-interactive-problem__consequence-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    align-self: center;
    border: 2px solid var(--showroom-pink);
    border-radius: 50%;
    color: var(--showroom-pink);
    background: #fff;
    line-height: 1;
}


/* J16H5 — explicit drag affordance + resilient dynamic arrows. */
.commerce-showroom-interactive-problem__choice strong {
    min-width: 0;
    flex: 1 1 auto;
}

.commerce-showroom-interactive-problem__drag-handle {
    display: grid;
    grid-template-columns: repeat(2, 3px);
    grid-template-rows: repeat(3, 3px);
    gap: 3px;
    margin-left: auto;
    padding: .3rem .15rem .3rem .45rem;
    flex: 0 0 auto;
    opacity: .52;
    transition: opacity .16s ease, transform .16s ease;
}

.commerce-showroom-interactive-problem__drag-handle i {
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8f879d;
}

.commerce-showroom-interactive-problem__choice:hover .commerce-showroom-interactive-problem__drag-handle,
.commerce-showroom-interactive-problem__choice:focus-visible .commerce-showroom-interactive-problem__drag-handle {
    opacity: .9;
    transform: translateX(1px);
}

.commerce-showroom-interactive-problem__drag-hint {
    display: flex;
    align-items: flex-start;
    gap: .45rem;
    margin: .75rem 0 0;
    color: #92899e;
    font-size: .72rem;
    line-height: 1.35;
}

.commerce-showroom-interactive-problem__drag-hint i {
    margin-top: .08rem;
    color: var(--showroom-pink);
    font-size: .82rem;
}

.commerce-showroom-interactive-problem__arrow-head {
    fill: none;
    stroke: rgba(245, 27, 117, .72);
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

@media (max-width: 767.98px) {
    .commerce-showroom-interactive-problem__drag-hint {
        justify-content: center;
        text-align: center;
    }

    .commerce-showroom-interactive-problem__drag-handle {
        opacity: .4;
    }
}


/* J16H6 — passive continuation row under the draggable answers. */
.commerce-showroom-interactive-problem__choice--passive {
    cursor: default;
    pointer-events: none;
    user-select: none;
}

.commerce-showroom-interactive-problem__choice--passive strong {
    color: #554767;
    letter-spacing: .08em;
}

.commerce-showroom-interactive-problem__choice--passive:hover,
.commerce-showroom-interactive-problem__choice--passive:focus {
    transform: none;
    border-color: #eadfe5;
    background: #fff;
    box-shadow: 0 .4rem 1rem rgba(42, 24, 80, .04);
}


/* J16H7 — mobile tap-only interaction + one vertical guidance arrow. */
.commerce-showroom-interactive-problem__drag-hint--mobile,
.commerce-showroom-interactive-problem__mobile-arrow {
    display: none;
}

@media (max-width: 767.98px) {
    .commerce-showroom-interactive-problem__drag-hint--desktop {
        display: none;
    }

    .commerce-showroom-interactive-problem__drag-hint--mobile {
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .commerce-showroom-interactive-problem__drag-handle {
        display: none !important;
    }

    .commerce-showroom-interactive-problem__choice {
        cursor: pointer;
        touch-action: manipulation;
    }

    .commerce-showroom-interactive-problem__mobile-arrow {
        display: flex;
        width: 100%;
        height: 3.25rem;
        align-items: flex-start;
        justify-content: center;
        margin-top: .45rem;
        pointer-events: none;
    }

    .commerce-showroom-interactive-problem__mobile-arrow span {
        position: relative;
        display: block;
        width: 2px;
        height: 2.2rem;
        background: repeating-linear-gradient(
            to bottom,
            rgba(245, 27, 117, .72) 0 6px,
            transparent 6px 11px
        );
    }

    .commerce-showroom-interactive-problem__mobile-arrow span::after {
        position: absolute;
        left: 50%;
        bottom: -.08rem;
        width: .72rem;
        height: .72rem;
        border-right: 2px solid rgba(245, 27, 117, .72);
        border-bottom: 2px solid rgba(245, 27, 117, .72);
        content: "";
        transform: translateX(-50%) rotate(45deg);
        transform-origin: center;
    }
}


/* J16H8 — final visual polish. */
.commerce-showroom-interactive-problem__consequence p {
    color: #493f55;
}

@media (max-width: 767.98px) {
    .commerce-showroom-interactive-problem__mobile-arrow {
        height: 3.85rem;
        margin-top: .7rem;
    }

    .commerce-showroom-interactive-problem__mobile-arrow span {
        height: 2.75rem;
    }
}


/* J16H9 — Nata polish: centered heading + cleaner solution card. */
.commerce-showroom-interactive-problem__heading {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    text-align: center;
}

.commerce-showroom-interactive-problem__heading h2 {
    max-width: 1120px;
    margin-inline: auto;
}

.commerce-showroom-interactive-problem__heading > p:last-child {
    max-width: 1120px;
    margin-inline: auto;
}

.commerce-showroom-interactive-problem__solution {
    border-color: #48b77c;
    background: #fff;
    color: #28175f;
}

.commerce-showroom-interactive-problem__solution strong,
.commerce-showroom-interactive-problem__solution p {
    color: #28175f;
}

.commerce-showroom-interactive-problem__solution-accent {
    color: var(--showroom-pink);
}



/* J16J1 — "Pourquoi est-ce si difficile ?" premium problem block. */
.commerce-showroom-problem__heading {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 2.4rem;
    text-align: center;
}

.commerce-showroom-problem__badge {
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    margin: 0 auto .8rem !important;
    padding: .38rem .82rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .45rem 1.2rem rgba(246, 31, 130, .08);
    font-size: .78rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-problem__badge i {
    font-size: .95rem;
}

.commerce-showroom-problem__heading h2 {
    max-width: 1050px;
    margin: 0 auto;
    color: var(--showroom-purple);
}

.commerce-showroom-problem__heading h2 span {
    color: var(--showroom-pink);
}

.commerce-showroom-problem__heading > p:last-child {
    max-width: 980px;
    margin: 1rem auto 0;
    color: var(--showroom-muted);
    font-size: 1.06rem;
    line-height: 1.65;
}

.commerce-showroom-problem-card {
    display: flex;
    min-height: 100%;
    align-items: center;
    flex-direction: column;
    padding: 1.6rem 1.35rem;
    text-align: center;
}

.commerce-showroom-problem-card__icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 1.35rem;
}

.commerce-showroom-problem-card h3 {
    margin: 1rem 0 .55rem;
    color: var(--showroom-purple);
    font-size: 1.02rem;
    line-height: 1.3;
}

.commerce-showroom-problem-card p {
    max-width: 17rem;
    margin: 0 auto;
    color: var(--showroom-muted);
    font-size: .92rem;
    line-height: 1.55;
}

.commerce-showroom-problem__solution {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    margin-top: 1.35rem;
    padding: 1.15rem 1.4rem;
    border: 1.5px solid #48b77c;
    border-radius: 18px;
    background: #fff;
    color: var(--showroom-purple);
}

.commerce-showroom-problem__solution-icon {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    place-items: center;
    border-radius: 50%;
    background: var(--showroom-green);
    color: #fff;
    font-size: 1.15rem;
}

.commerce-showroom-problem__solution strong {
    display: block;
    color: var(--showroom-purple);
    font-size: 1rem;
    line-height: 1.45;
}

.commerce-showroom-problem__solution p {
    margin: .3rem 0 0;
    color: var(--showroom-purple);
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .commerce-showroom-problem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-problem-grid {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-problem-card {
        padding: 1.35rem 1.15rem;
    }

    .commerce-showroom-problem__solution {
        align-items: flex-start;
        padding: 1rem;
    }

    .commerce-showroom-problem__solution-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }
}


/* J16J3 — explicit multiline subtitle and highlighted solution phrases. */
.commerce-showroom-problem__heading > p:last-child span {
    display: block;
}

.commerce-showroom-problem__solution-accent {
    color: var(--showroom-pink);
    font-weight: 800;
}

.commerce-showroom-interactive-problem__solution-accent {
    font-weight: 800;
}

/* J16K — premium driving-method infographic. */
.commerce-showroom-driving-method{background:#fff}
.commerce-showroom-driving-method__heading{width:100%;max-width:1120px;margin:0 auto 2.5rem;text-align:center}
.commerce-showroom-driving-method__badge{display:inline-flex;width:fit-content;align-items:center;justify-content:center;gap:.5rem;margin:0 auto .9rem;padding:.38rem .82rem;border:1px solid rgba(246,31,130,.35);border-radius:999px;background:rgba(255,255,255,.9);color:var(--showroom-pink);box-shadow:0 .45rem 1.2rem rgba(246,31,130,.08);font-size:.78rem;font-weight:850;letter-spacing:.07em;line-height:1;text-transform:uppercase}
.commerce-showroom-driving-method__badge-wheel{position:relative;display:block;width:18px;height:18px;border:2px solid currentColor;border-radius:50%}
.commerce-showroom-driving-method__badge-wheel:after{position:absolute;top:50%;left:50%;width:5px;height:5px;border-radius:50%;background:currentColor;content:"";transform:translate(-50%,-50%)}
.commerce-showroom-driving-method__badge-wheel i{position:absolute;top:8px;left:8px;width:1.5px;height:7px;border-radius:99px;background:currentColor;transform-origin:50% 0}
.commerce-showroom-driving-method__badge-wheel i:nth-child(1){transform:rotate(0)}.commerce-showroom-driving-method__badge-wheel i:nth-child(2){transform:rotate(120deg)}.commerce-showroom-driving-method__badge-wheel i:nth-child(3){transform:rotate(240deg)}
.commerce-showroom-driving-method__heading h2{max-width:1000px;margin:0 auto;color:var(--showroom-purple);font-size:clamp(2rem,4vw,3.25rem);line-height:1.08}
.commerce-showroom-driving-method__subtitle{margin-top:1.25rem}.commerce-showroom-driving-method__subtitle p,.commerce-showroom-driving-method__intro p{margin:0}
.commerce-showroom-driving-method__subtitle p{color:var(--showroom-purple);font-size:1.1rem;line-height:1.55}.commerce-showroom-driving-method__subtitle-accent{color:var(--showroom-pink)!important;font-weight:800}
.commerce-showroom-driving-method__intro{margin-top:1rem;color:var(--showroom-purple);line-height:1.5}
.commerce-showroom-driving-method__stages{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:clamp(1rem,2.5vw,2rem);isolation:isolate}
.commerce-showroom-driving-method__route{position:absolute;top:34%;right:-2%;left:-2%;z-index:-1;width:104%;height:42%;overflow:visible;pointer-events:none}
.commerce-showroom-driving-method__route path:first-child{fill:none;stroke:rgba(246,31,130,.58);stroke-width:2.25;stroke-dasharray:8 9;vector-effect:non-scaling-stroke}.commerce-showroom-driving-method__route circle{fill:#fff;stroke:var(--showroom-pink);stroke-width:3;vector-effect:non-scaling-stroke}.commerce-showroom-driving-method__route-flag{fill:rgba(246,31,130,.15);stroke:var(--showroom-pink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.commerce-showroom-driving-method__stage{position:relative;display:flex;min-width:0;min-height:455px;flex-direction:column;padding:1.35rem;border:1px solid rgba(52,34,95,.12);border-radius:22px;background:rgba(255,249,252,.96);box-shadow:0 14px 38px rgba(52,34,95,.045)}
.commerce-showroom-driving-method__stage-head{display:flex;align-items:center;gap:.85rem}.commerce-showroom-driving-method__stage-head h3{margin:0;color:var(--showroom-purple);font-size:1.03rem;font-weight:850;text-transform:uppercase}
.commerce-showroom-driving-method__number{display:grid;width:46px;height:46px;flex:0 0 46px;place-items:center;border-radius:50%;background:linear-gradient(145deg,#ff5ca8,#dc2679);color:#fff;box-shadow:0 8px 18px rgba(246,31,130,.18);font-size:1.1rem;font-weight:900}
.commerce-showroom-driving-method__wheel-scene{position:relative;min-height:270px;margin:.6rem 0 0}.commerce-showroom-driving-method__wheel{position:absolute;top:54%;left:50%;width:150px;height:150px;transform:translate(-50%,-50%)}
.commerce-showroom-driving-method__wheel-rim{position:absolute;inset:0;border:15px solid #2d2d32;border-radius:50%;box-shadow:inset 0 0 0 4px #4c4c52,0 8px 18px rgba(35,20,64,.12)}
.commerce-showroom-driving-method__wheel-hub{position:absolute;top:50%;left:50%;z-index:3;width:48px;height:48px;border:7px solid #35353a;border-radius:50%;background:#53535a;box-shadow:inset 0 0 0 6px #29292d;transform:translate(-50%,-50%)}
.commerce-showroom-driving-method__wheel-spoke{position:absolute;top:calc(50% - 7px);left:50%;width:64px;height:14px;border-radius:10px;background:#35353a;transform-origin:0 50%}.commerce-showroom-driving-method__wheel-spoke--left{transform:rotate(155deg)}.commerce-showroom-driving-method__wheel-spoke--right{transform:rotate(25deg)}.commerce-showroom-driving-method__wheel-spoke--bottom{transform:rotate(90deg)}
.commerce-showroom-driving-method__thought{position:absolute;z-index:4;max-width:132px;padding:.55rem .7rem;border:1px solid rgba(246,31,130,.4);border-radius:11px;background:rgba(255,255,255,.97);color:var(--showroom-purple);box-shadow:0 6px 18px rgba(52,34,95,.05);font-size:.75rem;font-weight:700;line-height:1.25;text-align:center}
.commerce-showroom-driving-method__thought:nth-child(1){top:5px;left:50%;transform:translateX(-50%)}.commerce-showroom-driving-method__thought:nth-child(2){top:54px;right:-2px}.commerce-showroom-driving-method__thought:nth-child(3){top:72px;left:-5px}.commerce-showroom-driving-method__thought:nth-child(4){bottom:2px;left:7px}.commerce-showroom-driving-method__thought:nth-child(5){right:2px;bottom:0}
.commerce-showroom-driving-method__rows{display:grid;gap:.7rem;margin-top:2rem}.commerce-showroom-driving-method__row{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:.75rem;min-height:52px;padding:.65rem .8rem;border:1px solid rgba(52,34,95,.06);border-radius:12px;background:rgba(255,255,255,.9)}
.commerce-showroom-driving-method__row>span{display:grid;width:30px;height:30px;place-items:center;border:1.5px solid var(--showroom-pink);border-radius:50%;color:var(--showroom-pink)}.commerce-showroom-driving-method__row p{margin:0;color:var(--showroom-purple);font-size:.84rem;line-height:1.35}
.commerce-showroom-driving-method__stage-footer{max-width:270px;margin:auto auto 0;padding-top:1.15rem;color:var(--showroom-purple);font-size:.9rem;font-weight:750;line-height:1.45;text-align:center}.commerce-showroom-driving-method__stage-footer--accent{color:var(--showroom-pink);font-weight:850}
.commerce-showroom-driving-method__summary{margin-top:1.5rem;padding:1.5rem 1.6rem 1.65rem;border:1px solid rgba(246,31,130,.25);border-radius:22px;background:linear-gradient(135deg,#fff7fb,#fff1f6)}
.commerce-showroom-driving-method__summary h3{max-width:800px;margin:0 auto 1.3rem;color:var(--showroom-purple);font-size:1.25rem;text-align:center}.commerce-showroom-driving-method__summary-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:1rem}
.commerce-showroom-driving-method__summary-step{text-align:center}.commerce-showroom-driving-method__summary-icon{display:grid;width:76px;height:76px;margin:0 auto .8rem;place-items:center;border:1px solid rgba(52,34,95,.08);border-radius:50%;background:#fff;color:var(--showroom-pink);box-shadow:0 10px 25px rgba(52,34,95,.08);font-size:1.8rem}.commerce-showroom-driving-method__summary-step p{max-width:240px;margin:0 auto;color:var(--showroom-purple);font-size:.9rem;line-height:1.45}.commerce-showroom-driving-method__summary-arrow{align-self:center;margin-top:1.6rem;color:var(--showroom-pink);font-size:1.65rem}
@media(max-width:991.98px){.commerce-showroom-driving-method__stages{grid-template-columns:1fr;max-width:650px;margin-inline:auto}.commerce-showroom-driving-method__route{display:none}.commerce-showroom-driving-method__stage{min-height:0}.commerce-showroom-driving-method__wheel-scene{min-height:300px}.commerce-showroom-driving-method__summary-flow{grid-template-columns:1fr;gap:.8rem}.commerce-showroom-driving-method__summary-arrow{margin:0;transform:rotate(90deg)}}
@media(max-width:575.98px){.commerce-showroom-driving-method__heading{margin-bottom:1.7rem}.commerce-showroom-driving-method__heading h2{font-size:1.9rem}.commerce-showroom-driving-method__subtitle p{font-size:1rem}.commerce-showroom-driving-method__stage{padding:1rem;border-radius:18px}.commerce-showroom-driving-method__wheel-scene{min-height:285px}.commerce-showroom-driving-method__wheel{width:130px;height:130px}.commerce-showroom-driving-method__thought{max-width:116px;padding:.45rem .55rem;font-size:.69rem}.commerce-showroom-driving-method__summary{padding:1.2rem 1rem}}


/* J16K2 — badge parity, visible route, speech bubbles and arrow alignment. */

/* Exact premium badge proportions used by the Exercise/Showroom badges. */
.commerce-showroom-driving-method__badge {
    display: inline-flex;
    width: fit-content;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: .58rem;
    margin: 0 auto .65rem !important;
    padding: .52rem 1.08rem;
    border: 1px solid rgba(246, 31, 130, .35);
    border-radius: 999px;
    background: rgba(255, 255, 255, .86);
    color: var(--showroom-pink) !important;
    box-shadow:
        0 .55rem 1.45rem rgba(48, 32, 86, .06),
        0 0 0 .12rem rgba(246, 31, 130, .05);
    font-size: .86rem !important;
    font-weight: 850;
    letter-spacing: .07em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-driving-method__badge-wheel {
    width: 20px;
    height: 20px;
}

/*
 * Route must live behind the cards, but inside the component stacking context.
 * J16K used z-index:-1, which put it behind the section background.
 */
.commerce-showroom-driving-method__stages {
    isolation: isolate;
}

.commerce-showroom-driving-method__route {
    z-index: 0;
}

.commerce-showroom-driving-method__stage {
    z-index: 1;
    background: rgba(255, 249, 252, .80);
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

/* Slightly stronger path so it remains readable through the translucent cards. */
.commerce-showroom-driving-method__route path:first-child {
    stroke: rgba(246, 31, 130, .72);
    stroke-width: 2.5;
}

.commerce-showroom-driving-method__route circle {
    fill: rgba(255, 255, 255, .92);
    stroke-width: 3.25;
}

/* Speech-bubble tails pointing toward the steering wheel. */
.commerce-showroom-driving-method__thought::after {
    position: absolute;
    z-index: -1;
    width: 14px;
    height: 14px;
    border-right: 1px solid rgba(246, 31, 130, .42);
    border-bottom: 1px solid rgba(246, 31, 130, .42);
    background: #fff;
    content: "";
}

.commerce-showroom-driving-method__thought:nth-child(1)::after {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

.commerce-showroom-driving-method__thought:nth-child(2)::after {
    bottom: 7px;
    left: 16px;
    transform: rotate(55deg);
}

.commerce-showroom-driving-method__thought:nth-child(3)::after {
    right: -8px;
    bottom: 12px;
    transform: rotate(-45deg);
}

.commerce-showroom-driving-method__thought:nth-child(4)::after {
    top: -8px;
    right: 22px;
    transform: rotate(225deg);
}

.commerce-showroom-driving-method__thought:nth-child(5)::after {
    top: -8px;
    left: 22px;
    transform: rotate(225deg);
}

/* Desktop summary arrows: larger and centred on the icon circles. */
.commerce-showroom-driving-method__summary-arrow {
    display: grid;
    width: 3.4rem;
    height: 76px;
    align-self: start;
    place-items: center;
    margin-top: 0;
    color: var(--showroom-pink);
    font-size: 2.15rem;
    line-height: 1;
}

/* Mobile: arrow sits between the end of one text and the next icon. */
@media (max-width: 991.98px) {
    .commerce-showroom-driving-method__summary-flow {
        gap: 0;
    }

    .commerce-showroom-driving-method__summary-step {
        padding-bottom: .25rem;
    }

    .commerce-showroom-driving-method__summary-arrow {
        position: relative;
        display: block;
        width: 2px;
        height: 3.2rem;
        margin: .45rem auto .55rem;
        background: linear-gradient(
            to bottom,
            rgba(246, 31, 130, .35),
            var(--showroom-pink)
        );
        color: transparent;
        font-size: 0;
        transform: none;
    }

    .commerce-showroom-driving-method__summary-arrow i {
        display: none;
    }

    .commerce-showroom-driving-method__summary-arrow::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: .72rem;
        height: .72rem;
        border-right: 2.5px solid var(--showroom-pink);
        border-bottom: 2.5px solid var(--showroom-pink);
        content: "";
        transform: translate(-50%, 1px) rotate(45deg);
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-driving-method__badge {
        min-height: 2.25rem;
        padding: .46rem .88rem;
        font-size: .74rem !important;
    }

    .commerce-showroom-driving-method__thought::after {
        width: 12px;
        height: 12px;
    }
}


/* J16K3 — bubble tails, stronger translucency and route outside cards. */

/* Push translucency further so the route remains visible through the cards. */
.commerce-showroom-driving-method__stage {
    background: rgba(255, 249, 252, .64);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

/* Let the route breathe outside the card grid on both sides. */
.commerce-showroom-driving-method__route {
    left: -7.5%;
    right: -7.5%;
    width: 115%;
    overflow: visible;
}

/* Make outer route markers clearly sit beyond card edges. */
.commerce-showroom-driving-method__stages {
    overflow: visible;
}

.commerce-showroom-driving-method__route circle {
    r: 5;
}

/*
 * Bubble tails must visibly protrude from the card.
 * The tail is now a small rotated square attached outside the bubble edge.
 */
.commerce-showroom-driving-method__thought {
    overflow: visible;
}

.commerce-showroom-driving-method__thought::after {
    z-index: 0;
    width: 15px;
    height: 15px;
    background: #fff;
}

/* Top bubble: tail clearly exits downward toward wheel. */
.commerce-showroom-driving-method__thought:nth-child(1)::after {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

/* Upper-right bubble: tail exits bottom-left. */
.commerce-showroom-driving-method__thought:nth-child(2)::after {
    bottom: -8px;
    left: 20px;
    transform: rotate(45deg);
}

/* Left-middle bubble: tail exits right edge. */
.commerce-showroom-driving-method__thought:nth-child(3)::after {
    right: -8px;
    bottom: 16px;
    transform: rotate(-45deg);
}

/* Bottom-left bubble: tail exits upward-right. */
.commerce-showroom-driving-method__thought:nth-child(4)::after {
    top: -8px;
    right: 23px;
    transform: rotate(225deg);
}

/* Bottom-right bubble: tail exits upward-left. */
.commerce-showroom-driving-method__thought:nth-child(5)::after {
    top: -8px;
    left: 23px;
    transform: rotate(225deg);
}

/* Slightly stronger route/flag for readability outside the cards. */
.commerce-showroom-driving-method__route path:first-child {
    stroke: rgba(246, 31, 130, .78);
    stroke-width: 2.6;
}

.commerce-showroom-driving-method__route-flag {
    stroke-width: 3.4;
}

@media (max-width: 991.98px) {
    /* Route remains a desktop-only visual device. */
    .commerce-showroom-driving-method__route {
        display: none;
    }
}

/* J16L3 — sticky footer stabilisation.
 * Desktop is intentionally frozen; mobile is rebuilt from one authoritative rule set.
 */

/* Desktop: keep the validated pill CTA. */
@media (min-width: 992px) {
    .commerce-showroom-desktop-sticky__inner > .commerce-showroom-btn,
    .commerce-showroom-desktop-sticky__inner > .commerce-showroom-btn.commerce-showroom-btn--primary {
        border-radius: 999px !important;
        overflow: hidden;
    }
}

/*
 * Mobile real component.
 *
 * Important:
 * - safe-area affects the footer POSITION, never its internal padding;
 * - fixed left/right values are symmetrical, so browser chrome changes cannot
 *   visually push the capsule to one side;
 * - one stable height model is used while scrolling up or down.
 */
@media (max-width: 680px) {
    .commerce-showroom-sticky-cta {
        position: fixed;
        right: max(.3rem, env(safe-area-inset-right)) !important;
        bottom: max(.3rem, env(safe-area-inset-bottom)) !important;
        left: max(.3rem, env(safe-area-inset-left)) !important;
        z-index: 1040;

        display: inline-flex;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;

        align-items: center !important;
        justify-content: space-between !important;
        gap: .36rem !important;

        box-sizing: border-box;
        padding: .26rem .3rem !important;

        border-radius: 999px !important;
        background: var(--showroom-pink);
        color: #fff;
        box-shadow: 0 12px 28px rgba(246, 31, 130, .24);
    }

    .commerce-showroom-sticky-cta[hidden] {
        display: none !important;
    }

    .commerce-showroom-sticky-cta .commerce-showroom-sticky-currency {
        display: flex !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 2.45rem !important;
        flex: 0 0 auto !important;

        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
        padding: 0 !important;

        border-radius: 999px !important;
        background: #fff;
        line-height: 1 !important;
    }

    .commerce-showroom-sticky-cta .commerce-showroom-sticky-currency select {
        display: block;
        width: auto !important;
        min-width: 0 !important;
        max-width: 7.9rem !important;
        height: 2.45rem !important;
        min-height: 2.45rem !important;

        margin: 0 !important;
        padding: .28rem 1.6rem .28rem .58rem !important;

        border: 0 !important;
        border-radius: 999px !important;
        background-color: transparent;
        color: var(--showroom-purple);

        font-size: .82rem !important;
        font-weight: 800;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .commerce-showroom-sticky-cta > a {
        display: inline-flex;
        min-width: 0 !important;
        min-height: 2.45rem !important;
        height: 2.45rem !important;
        flex: 1 1 auto !important;

        align-items: center !important;
        justify-content: center !important;
        gap: .38rem;

        margin: 0 !important;
        padding: .3rem .48rem !important;

        border-radius: 999px;
        color: inherit;
        text-decoration: none;

        font-size: .82rem !important;
        font-weight: 800;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .commerce-showroom-sticky-cta > a i {
        flex: 0 0 auto;
        margin: 0;
    }
}

/* Standard phones: hug the screen a little more closely. */
@media (max-width: 430px) {
    .commerce-showroom-sticky-cta {
        right: max(.18rem, env(safe-area-inset-right)) !important;
        left: max(.18rem, env(safe-area-inset-left)) !important;
        gap: .28rem !important;
        padding: .2rem .22rem !important;
    }

    .commerce-showroom-sticky-cta .commerce-showroom-sticky-currency,
    .commerce-showroom-sticky-cta .commerce-showroom-sticky-currency select {
        height: 2.34rem !important;
        min-height: 2.34rem !important;
    }

    .commerce-showroom-sticky-cta .commerce-showroom-sticky-currency select {
        max-width: 7.45rem !important;
        padding: .24rem 1.45rem .24rem .48rem !important;
        font-size: .78rem !important;
    }

    .commerce-showroom-sticky-cta > a {
        height: 2.34rem !important;
        min-height: 2.34rem !important;
        padding: .26rem .42rem !important;
        font-size: .78rem !important;
    }
}

/* J16M4 — consolidated premium ascent. No stacked J16M1/M2/M3 overrides. */

.commerce-showroom-ascent--premium {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 7vw, 6.5rem) 0 clamp(3rem, 5vw, 4.5rem);
    background:
        radial-gradient(circle at 88% 26%, rgba(111, 45, 189, .055), transparent 25%),
        linear-gradient(180deg, #fff 0%, #fffafd 100%);
}

/* -------------------------------------------------------------------------
   Mountain background
   ------------------------------------------------------------------------- */

.commerce-showroom-ascent__mountains {
    position: absolute;
    right: -3%;
    bottom: 1.5rem;
    left: -3%;
    z-index: 0;
    width: 106%;
    height: min(66vw, 820px);
    opacity: .96;
    pointer-events: none;
}

.commerce-showroom-ascent__mountains svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.commerce-showroom-ascent--premium .commerce-showroom-container {
    position: relative;
    z-index: 2;
}

/* -------------------------------------------------------------------------
   Heading / badge
   ------------------------------------------------------------------------- */

.commerce-showroom-ascent__heading {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto 2.8rem;
    text-align: center;
}

.commerce-showroom-ascent__badge {
    display: inline-flex;
    width: fit-content;
    min-height: 2.35rem;
    align-items: center;
    justify-content: center;
    gap: .52rem;
    margin: 0 auto .8rem !important;
    padding: .46rem .92rem;
    border: 1px solid rgba(246, 31, 130, .46);
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: var(--showroom-pink) !important;
    box-shadow: 0 .45rem 1.25rem rgba(48, 32, 86, .055);
    font-size: .8rem !important;
    font-weight: 850;
    letter-spacing: .065em;
    line-height: 1;
    text-transform: uppercase;
}

.commerce-showroom-ascent__badge i {
    display: grid;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    font-size: .95rem;
}

.commerce-showroom-ascent__heading h2 {
    max-width: 1060px;
    margin: 0 auto;
    color: var(--showroom-purple);
    font-size: clamp(2.2rem, 4.4vw, 3.7rem);
    line-height: 1.06;
    text-wrap: balance;
}

.commerce-showroom-ascent__heading > p:last-child {
    max-width: 880px;
    margin: 1.15rem auto 0;
    color: var(--showroom-muted);
    font-size: 1.05rem;
    line-height: 1.55;
    text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Desktop mountain route
   ------------------------------------------------------------------------- */

.commerce-showroom-ascent__journey {
    position: relative;
    padding-top: 10.25rem;
}

.commerce-showroom-ascent__profile {
    position: absolute;
    top: 0;
    left: -1.5%;
    z-index: 3;
    width: 103%;
    height: 12.25rem;
    overflow: visible;
    pointer-events: none;
}

.commerce-showroom-ascent__gradient-start {
    stop-color: var(--showroom-ascent-gradient-start, #ff8ac6);
}

.commerce-showroom-ascent__gradient-mid {
    stop-color: #ed2e96;
}

.commerce-showroom-ascent__gradient-end {
    stop-color: var(--showroom-ascent-gradient-end, #6226ad);
}

.commerce-showroom-ascent__profile-base,
.commerce-showroom-ascent__profile-progress {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.commerce-showroom-ascent__profile-base {
    stroke: rgba(52, 34, 95, .12);
    stroke-width: 3.2;
}

.commerce-showroom-ascent__profile-progress {
    clip-path: inset(0 calc(100% - var(--showroom-ascent-progress, 0%)) 0 0);
    stroke: url(#showroom-ascent-route-gradient);
    stroke-width: 4;
    filter: drop-shadow(0 0 5px rgba(111, 45, 189, .16));
    transition: clip-path .06s linear;
}

/* There must be no SVG point circles: with preserveAspectRatio="none" they stretch. */
.commerce-showroom-ascent__profile circle {
    display: none !important;
}

/* -------------------------------------------------------------------------
   Desktop altitude markers
   ------------------------------------------------------------------------- */

.commerce-showroom-ascent__markers {
    position: absolute;
    top: 0;
    left: -1.5%;
    z-index: 5;
    width: 103%;
    height: 12.25rem;
    pointer-events: none;
}

.commerce-showroom-ascent__marker {
    position: absolute;
    display: flex;
    width: 4.8rem;
    align-items: center;
    flex-direction: column;
    gap: .32rem;
    transform: translate(-50%, -100%);
}

/* Altitude always lives ABOVE the icon circle. */
.commerce-showroom-ascent__marker small {
    display: block;
    order: 0;
    margin: 0 0 .08rem;
    color: var(--showroom-purple);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}

/* Forced square geometry prevents old global span rules from creating ellipses. */
.commerce-showroom-ascent__marker > span {
    position: relative;
    display: inline-grid !important;
    width: 2.72rem !important;
    min-width: 2.72rem !important;
    max-width: 2.72rem !important;
    height: 2.72rem !important;
    min-height: 2.72rem !important;
    max-height: 2.72rem !important;
    flex: 0 0 2.72rem !important;
    place-items: center;
    box-sizing: border-box;
    order: 1;
    margin: 0 !important;
    padding: 0 !important;
    border: 3px solid rgba(255, 255, 255, .98);
    border-radius: 50% !important;
    background: var(--showroom-ascent-icon-color, var(--showroom-ascent-gradient-start, #ff8ac6));
    color: #fff;
    box-shadow:
        0 .45rem 1.2rem rgba(52, 34, 95, .10),
        0 0 0 1px rgba(246, 31, 130, .12);
    font-size: .9rem;
    line-height: 1;
    transform: none !important;
    aspect-ratio: 1 / 1;
}

/* Small vertical connector to the TRUE point located on the route. */
.commerce-showroom-ascent__marker > span::before {
    position: absolute;
    top: calc(100% + 1px);
    left: 50%;
    width: 1px;
    height: .68rem;
    background: rgba(246, 31, 130, .34);
    content: "";
    transform: translateX(-50%);
}

.commerce-showroom-ascent__marker > span::after {
    position: absolute;
    top: calc(100% + .66rem);
    left: 50%;
    width: .68rem;
    height: .68rem;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--showroom-ascent-icon-color, var(--showroom-ascent-gradient-start, #ff8ac6));
    box-shadow: 0 0 0 1px rgba(246, 31, 130, .22);
    content: "";
    transform: translate(-50%, -50%);
}

/*
 * Exact route-point coordinates:
 * SVG viewBox = 1000 x 190
 * profile width = marker layer width = 103%, so x percentages remain aligned.
 */
.commerce-showroom-ascent__marker--1 { left: 1%; top: 80%; }
.commerce-showroom-ascent__marker--2 { left: 24.2%; top: 62.1%; }
.commerce-showroom-ascent__marker--3 { left: 49.6%; top: 56.3%; }
.commerce-showroom-ascent__marker--4 { left: 73.5%; top: 30.5%; }
.commerce-showroom-ascent__marker--5 { left: 99%; top: 9.5%; }

/* -------------------------------------------------------------------------
   Five cards — translucent so mountain relief remains visible
   ------------------------------------------------------------------------- */

.commerce-showroom-ascent__cards {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(.75rem, 1.4vw, 1.2rem);
}

.commerce-showroom-ascent-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 390px;
    flex-direction: column;
    padding: 1.15rem 1rem 1.25rem;
    border: 1px solid rgba(52, 34, 95, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .58);
    box-shadow: 0 14px 34px rgba(52, 34, 95, .055);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.commerce-showroom-ascent-card--summit {
    border-color: rgba(111, 45, 189, .28);
    background: rgba(255, 248, 252, .62);
    box-shadow: 0 18px 42px rgba(111, 45, 189, .09);
}

.commerce-showroom-ascent-card__number {
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    place-items: center;
    border-radius: 50%;
    background: var(--showroom-ascent-icon-color, var(--showroom-ascent-gradient-start, #ff8ac6));
    color: #fff;
    box-shadow: 0 7px 16px rgba(246, 31, 130, .14);
    font-size: .82rem;
    font-weight: 900;
    transition: background-color .08s linear;
}

.commerce-showroom-ascent-card__visual {
    display: grid;
    min-height: 8.6rem;
    place-items: center;
    color: var(--showroom-ascent-icon-color, var(--showroom-ascent-gradient-start, #ff8ac6));
    font-size: clamp(4rem, 6vw, 6.3rem);
    transition: color .08s linear;
}

.commerce-showroom-ascent-card__visual i {
    color: inherit !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    filter: drop-shadow(0 .45rem .7rem rgba(52, 34, 95, .09));
}

.commerce-showroom-ascent-card h3 {
    margin: .35rem 0 .65rem;
    color: var(--showroom-purple);
    font-size: 1.03rem;
    line-height: 1.25;
}

.commerce-showroom-ascent-card__copy p {
    margin: 0;
    color: var(--showroom-purple);
    font-size: .84rem;
    line-height: 1.52;
}

.commerce-showroom-ascent-card__copy p + p {
    margin-top: .55rem;
}

/* -------------------------------------------------------------------------
   Summary
   ------------------------------------------------------------------------- */

.commerce-showroom-ascent__summary {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 1.4rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(52, 34, 95, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 12px 30px rgba(52, 34, 95, .05);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.commerce-showroom-ascent__summary-item {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    min-width: 0;
    padding: .35rem 1rem;
}

.commerce-showroom-ascent__summary-item + .commerce-showroom-ascent__summary-item {
    border-left: 1px solid rgba(52, 34, 95, .11);
}

.commerce-showroom-ascent__summary-item > span {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    color: var(--showroom-pink);
    font-size: 1.65rem;
}

.commerce-showroom-ascent__summary-item strong {
    display: block;
    color: var(--showroom-purple);
    font-size: .95rem;
    line-height: 1.2;
}

.commerce-showroom-ascent__summary-item small {
    display: block;
    margin-top: .18rem;
    color: var(--showroom-muted);
    font-size: .73rem;
    line-height: 1.3;
}

/* -------------------------------------------------------------------------
   Desktop tightening
   ------------------------------------------------------------------------- */

@media (min-width: 1101px) and (max-width: 1320px) {
    .commerce-showroom-ascent-card {
        padding-inline: .85rem;
    }

    .commerce-showroom-ascent-card h3 {
        font-size: .95rem;
    }

    .commerce-showroom-ascent-card__copy p {
        font-size: .78rem;
    }
}

/* -------------------------------------------------------------------------
   Mobile / tablet — one vertical ascent, dynamic gradient fill
   ------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .commerce-showroom-ascent--premium {
        padding-top: 3rem;
    }

    .commerce-showroom-ascent__heading {
        margin-bottom: 1.8rem;
        padding-inline: .8rem;
    }

    .commerce-showroom-ascent__heading h2 {
        font-size: 2rem;
    }

    .commerce-showroom-ascent__heading > p:last-child {
        font-size: .94rem;
    }

    .commerce-showroom-ascent__profile,
    .commerce-showroom-ascent__markers {
        display: none !important;
    }

    .commerce-showroom-ascent__journey {
        padding-top: 0;
    }

    .commerce-showroom-ascent__cards {
        position: relative;
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 680px;
        margin: 0 auto;
        padding: 0 0 0 3.6rem;
        overflow: visible;
    }

    /* Neutral rail. */
    .commerce-showroom-ascent__cards::before {
        position: absolute;
        top: 1.35rem;
        bottom: 1.35rem;
        left: 1.35rem;
        width: 4px;
        border-radius: 99px;
        background: rgba(52, 34, 95, .11);
        content: "";
    }

    /*
     * Dynamic colored rail.
     * ScaleY receives a unitless 0..1 variable from JS, unlike the old invalid
     * length × percentage calculation.
     */
    .commerce-showroom-ascent__cards::after {
        position: absolute;
        top: 1.35rem;
        bottom: 1.35rem;
        left: 1.35rem;
        width: 4px;
        border-radius: 99px;
        background:
            linear-gradient(
                180deg,
                var(--showroom-ascent-gradient-start, #ff8ac6) 0%,
                #ed2e96 48%,
                var(--showroom-ascent-gradient-end, #6226ad) 100%
            );
        box-shadow: 0 0 .85rem rgba(111, 45, 189, .14);
        content: "";
        transform: scaleY(var(--showroom-ascent-progress-ratio, 0));
        transform-origin: 50% 0;
        transition: transform .06s linear;
    }

    .commerce-showroom-ascent-card {
        width: 100%;
        min-width: 0;
        min-height: 0;
        padding: 1rem 1.05rem;
        background: rgba(255, 255, 255, .64);
    }

    .commerce-showroom-ascent-card::before {
        position: absolute;
        top: 1.5rem;
        left: -2.48rem;
        z-index: 6;
        width: .9rem;
        height: .9rem;
        box-sizing: border-box;
        border: 3px solid #fff;
        border-radius: 50%;
        background: var(--showroom-ascent-icon-color, var(--showroom-ascent-gradient-start, #ff8ac6));
        box-shadow: 0 0 0 2px rgba(246, 31, 130, .19);
        content: "";
    }

    .commerce-showroom-ascent-card__visual {
        min-height: 6rem;
        font-size: 4rem;
    }

    .commerce-showroom-ascent__mountains {
        right: -22%;
        bottom: 3rem;
        left: -22%;
        width: 144%;
        height: 145vw;
        opacity: .72;
    }

    .commerce-showroom-ascent__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .35rem;
        padding: .7rem;
    }

    .commerce-showroom-ascent__summary-item {
        padding: .55rem;
    }

    .commerce-showroom-ascent__summary-item + .commerce-showroom-ascent__summary-item {
        border-left: 0;
    }

    .commerce-showroom-ascent__summary-item:nth-child(even) {
        border-left: 1px solid rgba(52, 34, 95, .1);
    }

    .commerce-showroom-ascent__summary-item:nth-child(n+3) {
        border-top: 1px solid rgba(52, 34, 95, .1);
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-ascent__cards {
        padding-left: 3rem;
    }

    .commerce-showroom-ascent__cards::before,
    .commerce-showroom-ascent__cards::after {
        left: 1rem;
    }

    .commerce-showroom-ascent-card::before {
        left: -2.43rem;
    }

    .commerce-showroom-ascent-card__visual {
        min-height: 5rem;
        font-size: 3.4rem;
    }
}


/* J16M5 — exact card-centred markers, no halo ellipse, lighter cards. */

/*
 * Route and markers share the same 1000x190 coordinate system.
 * Five route nodes are centred on the five equal card columns:
 * 10%, 30%, 50%, 70%, 90%.
 */
.commerce-showroom-ascent__markers {
    left: -1.5%;
    width: 103%;
    height: 12.25rem;
}

/*
 * The marker's top/left IS the route node.
 * No vertical translate is used: the small dot sits exactly on the path.
 */
.commerce-showroom-ascent__marker {
    width: 5.2rem;
    height: 0;
    gap: 0;
    transform: translateX(-50%);
}

/* Route point itself. */
.commerce-showroom-ascent__marker::after {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 4;
    width: .68rem;
    height: .68rem;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(
        --showroom-ascent-icon-color,
        var(--showroom-ascent-gradient-start, #ff8ac6)
    );
    box-shadow: 0 0 0 1px rgba(246, 31, 130, .22);
    content: "";
    transform: translate(-50%, -50%);
}

/* Connector from circle to exact route point. */
.commerce-showroom-ascent__marker::before {
    position: absolute;
    bottom: .32rem;
    left: 50%;
    width: 1px;
    height: .72rem;
    background: rgba(246, 31, 130, .34);
    content: "";
    transform: translateX(-50%);
}

/*
 * Icon circle is absolutely positioned ABOVE the route anchor.
 * Explicit overflow/pseudo reset prevents any legacy decorative oval/halo.
 */
.commerce-showroom-ascent__marker > span {
    position: absolute !important;
    bottom: 1.03rem !important;
    left: 50% !important;
    display: grid !important;
    width: 2.72rem !important;
    min-width: 2.72rem !important;
    max-width: 2.72rem !important;
    height: 2.72rem !important;
    min-height: 2.72rem !important;
    max-height: 2.72rem !important;
    flex: none !important;
    place-items: center !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background: var(
        --showroom-ascent-icon-color,
        var(--showroom-ascent-gradient-start, #ff8ac6)
    ) !important;
    background-image: none !important;
    box-shadow: 0 .42rem 1.05rem rgba(52, 34, 95, .11) !important;
    color: #fff !important;
    transform: translateX(-50%) !important;
    aspect-ratio: 1 / 1 !important;
}

/* Critical: old decorative pseudo-elements are not allowed on the icon circle. */
.commerce-showroom-ascent__marker > span::before,
.commerce-showroom-ascent__marker > span::after {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    content: none !important;
}

/* Altitude is independently positioned above the circle. */
.commerce-showroom-ascent__marker > small {
    position: absolute;
    bottom: 4.08rem;
    left: 50%;
    display: block;
    width: max-content;
    margin: 0;
    color: var(--showroom-purple);
    font-size: .72rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* Card-centred route nodes and exact route y coordinates. */
.commerce-showroom-ascent__marker--1 { left: 10%; top: 80%; }
.commerce-showroom-ascent__marker--2 { left: 30%; top: 63.16%; }
.commerce-showroom-ascent__marker--3 { left: 50%; top: 56.84%; }
.commerce-showroom-ascent__marker--4 { left: 70%; top: 32.63%; }
.commerce-showroom-ascent__marker--5 { left: 90%; top: 10.53%; }

/* Reveal substantially more of the mountain through the cards. */
.commerce-showroom-ascent-card {
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.commerce-showroom-ascent-card--summit {
    background: rgba(255, 248, 252, .46);
}

@media (max-width: 1100px) {
    .commerce-showroom-ascent-card {
        background: rgba(255, 255, 255, .50);
    }

    /*
     * Force the dynamic rail over the neutral rail and keep it visible on iOS.
     */
    .commerce-showroom-ascent__cards::before {
        z-index: 0;
    }

    .commerce-showroom-ascent__cards::after {
        z-index: 1;
        will-change: transform;
        opacity: 1;
    }

    .commerce-showroom-ascent-card {
        z-index: 2;
    }
}


/* J16M6 — route point cleanup + optical 4px alignment. */

/*
 * The small route node must be a plain dot.
 * Kill every possible inherited halo/filter/pseudo decoration explicitly.
 */
.commerce-showroom-ascent__marker::after {
    top: -4px !important;
    width: .58rem !important;
    height: .58rem !important;
    border: 0 !important;
    border-radius: 50% !important;
    background:
        var(
            --showroom-ascent-icon-color,
            var(--showroom-ascent-gradient-start, #ff8ac6)
        ) !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
}

/* Connector follows the optically raised point. */
.commerce-showroom-ascent__marker::before {
    bottom: .56rem !important;
    height: .58rem !important;
}

/* Ensure no white/frosted decoration can be painted behind the anchor. */
.commerce-showroom-ascent__marker {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* J16M7 — remove legacy ascent-marker ellipse.
 *
 * Root cause:
 * the historical `.commerce-showroom-ascent__marker` rule still applies
 * `border: .35rem solid #fff` + `border-radius: 50%`.
 * The new route anchor reuses that class with height:0, so this old border
 * collapses into the white horizontal ellipse visible around each route point.
 */
.commerce-showroom-ascent--premium .commerce-showroom-ascent__markers
    .commerce-showroom-ascent__marker {
    display: block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Keep only the intentional plain route dot. */
.commerce-showroom-ascent--premium .commerce-showroom-ascent__marker::after {
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
}


/* J16N1 — Mont-Blanc campaign Hero with three CMS images. */

.commerce-showroom-hero {
    min-height: min(880px, calc(100svh - 70px));
    overflow: hidden;
    padding: 2rem 0 2.25rem;
    isolation: isolate;
}

/*
 * Background photo:
 * keep the mountain visible while protecting dark text on the left.
 */
.commerce-showroom-hero.has-cms-background::before {
    z-index: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.96) 0%,
            rgba(255,255,255,.88) 32%,
            rgba(255,255,255,.43) 55%,
            rgba(255,255,255,.08) 78%,
            rgba(255,255,255,.02) 100%
        ),
        var(--showroom-hero-background) center / cover no-repeat;
    filter: saturate(.94) contrast(.98);
}

.commerce-showroom-hero.has-cms-background::after {
    display: none;
}

.commerce-showroom-hero.has-cms-background .commerce-showroom-hero__sky,
.commerce-showroom-hero.has-cms-background .commerce-showroom-hero__cloud,
.commerce-showroom-hero.has-cms-background .commerce-showroom-hero__light,
.commerce-showroom-hero.has-cms-background .commerce-showroom-hero__mountain {
    display: none;
}

.commerce-showroom-hero__inner {
    position: relative;
    z-index: 2;
}

.commerce-showroom-hero__expedition--top {
    justify-content: flex-start;
    gap: .75rem;
    margin-bottom: clamp(2.2rem, 5vw, 4.5rem);
}

.commerce-showroom-hero__expedition--top span {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    gap: .5rem;
    padding: .52rem .9rem;
    border: 1px solid rgba(52,34,95,.10);
    border-radius: 999px;
    background: rgba(255,255,255,.88);
    color: var(--showroom-purple);
    box-shadow: 0 .5rem 1.4rem rgba(52,34,95,.07);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .045em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.commerce-showroom-hero__expedition--top span + span {
    border-color: rgba(246,31,130,.32);
    color: var(--showroom-pink);
}

.commerce-showroom-hero__grid {
    grid-template-columns: minmax(0, .92fr) minmax(470px, 1.08fr);
    gap: clamp(2rem, 4vw, 4rem);
}

.commerce-showroom-hero__copy {
    position: relative;
    z-index: 3;
}

.commerce-showroom-hero .commerce-showroom-eyebrow {
    margin-bottom: .85rem;
    color: var(--showroom-purple);
    font-size: .78rem;
    letter-spacing: .08em;
}

.commerce-showroom-hero h1 {
    display: flex;
    max-width: 700px;
    flex-direction: column;
    gap: .06em;
    color: var(--showroom-purple);
    font-size: clamp(3rem, 5.7vw, 5.55rem);
    line-height: .98;
}

.commerce-showroom-hero__title-accent {
    white-space: normal;
}

.commerce-showroom-hero__lead {
    margin-top: 1.5rem;
}

.commerce-showroom-hero__lead p {
    max-width: 640px;
    margin: 0;
    color: var(--showroom-purple);
    font-size: clamp(1.12rem, 1.65vw, 1.42rem);
    font-weight: 700;
    line-height: 1.35;
}

.commerce-showroom-hero__lead p + p {
    margin-top: .1rem;
}

.commerce-showroom-hero__visual {
    min-height: 500px;
    transform: translateY(var(--showroom-parallax-soft, 0));
}

.commerce-showroom-device--desktop {
    top: 1.5rem;
    right: 1.5rem;
    width: min(100%, 590px);
    height: 365px;
    border-width: 9px;
    border-radius: 18px;
    transform: rotate(-1deg);
    box-shadow: 0 2.2rem 5rem rgba(18,18,32,.28);
}

.commerce-showroom-device__screen {
    overflow: hidden;
    padding: 0;
}

.commerce-showroom-device__cms-image {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}

.commerce-showroom-device__cms-image--desktop {
    object-fit: cover;
    object-position: center;
}

.commerce-showroom-device--mobile {
    right: -.2rem;
    bottom: 1.25rem;
    width: 144px;
    height: 274px;
    overflow: hidden;
    background: #fff;
    transform: rotate(1.5deg);
    box-shadow: 0 1.8rem 3.8rem rgba(18,18,32,.24);
}

.commerce-showroom-device--mobile.has-cms-image {
    display: block;
}

.commerce-showroom-device--mobile.has-cms-image .commerce-showroom-device__notch {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 3;
    width: 52%;
    height: 13px;
    border-radius: 0 0 10px 10px;
    background: #251a42;
    transform: translateX(-50%);
}

.commerce-showroom-device__cms-image--mobile {
    object-fit: cover;
    object-position: 50% 35%;
}

.commerce-showroom-hero .commerce-showroom-orbit {
    opacity: .35;
}

.commerce-showroom-hero__stats {
    margin-top: 1.5rem;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(14px);
}

.commerce-showroom-hero__stats div {
    min-height: 100px;
}

.commerce-showroom-hero__summary {
    margin-top: 1rem;
    text-shadow: 0 1px 1px rgba(255,255,255,.7);
}

@media (max-width: 991.98px) {
    .commerce-showroom-hero {
        min-height: 0;
        padding-top: 1.25rem;
    }

    .commerce-showroom-hero.has-cms-background::before {
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.95) 0%,
                rgba(255,255,255,.88) 40%,
                rgba(255,255,255,.48) 72%,
                rgba(255,255,255,.16) 100%
            ),
            var(--showroom-hero-background) center / cover no-repeat;
    }

    .commerce-showroom-hero__grid {
        grid-template-columns: 1fr;
    }

    .commerce-showroom-hero__copy {
        text-align: center;
    }

    .commerce-showroom-hero h1,
    .commerce-showroom-hero__lead p {
        margin-right: auto;
        margin-left: auto;
    }

    .commerce-showroom-hero__actions,
    .commerce-showroom-hero__expedition--top {
        justify-content: center;
    }

    .commerce-showroom-hero__visual {
        width: min(650px, 100%);
        min-height: 430px;
        margin-inline: auto;
    }

    .commerce-showroom-device--desktop {
        right: 7%;
        width: 86%;
        height: 315px;
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-hero__expedition--top {
        gap: .45rem;
        margin-bottom: 1.7rem;
    }

    .commerce-showroom-hero__expedition--top span {
        min-height: 2rem;
        padding: .42rem .65rem;
        font-size: .64rem;
    }

    .commerce-showroom-hero h1 {
        font-size: clamp(2.45rem, 12vw, 3.4rem);
    }

    .commerce-showroom-hero__lead p {
        font-size: 1rem;
    }

    .commerce-showroom-hero__visual {
        min-height: 330px;
    }

    .commerce-showroom-device--desktop {
        top: 1rem;
        right: 4%;
        width: 92%;
        height: 225px;
        border-width: 6px;
        border-radius: 14px;
    }

    .commerce-showroom-device__bar {
        height: 15px;
    }

    .commerce-showroom-device__screen {
        height: calc(100% - 15px);
    }

    .commerce-showroom-device--mobile {
        right: 1%;
        bottom: 1rem;
        width: 95px;
        height: 184px;
        border-width: 5px;
        border-radius: 18px;
    }

    .commerce-showroom-hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .commerce-showroom-hero__stats div {
        min-height: 82px;
        padding: .8rem .6rem;
    }

    .commerce-showroom-hero__stats strong {
        font-size: 1.55rem;
    }

    .commerce-showroom-hero__stats span {
        font-size: .72rem;
    }
}


/* J16N2 — exact device image fit + lighter Hero typography. */

/* Slightly smaller headline than J16N1 for better balance with the device scene. */
.commerce-showroom-hero h1 {
    max-width: 620px;
    font-size: clamp(2.8rem, 5vw, 4.85rem);
    line-height: 1.01;
}

/*
 * Desktop/tablet frame:
 * image must occupy the complete usable screen with no gaps and respect the
 * inner radius independently from the outer laptop frame.
 */
.commerce-showroom-device--desktop .commerce-showroom-device__screen {
    position: relative;
    height: calc(100% - 18px);
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 0 0 9px 9px;
    background: #fff;
}

.commerce-showroom-device--desktop .commerce-showroom-device__cms-image--desktop {
    position: absolute;
    inset: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 0 9px 9px;
    object-fit: cover !important;
    object-position: center center;
}

/*
 * Phone:
 * remove historical inner padding and make the CMS image the actual screen
 * surface. Parent clipping guarantees the same rounded silhouette as the phone.
 */
.commerce-showroom-device--mobile.has-cms-image {
    position: absolute;
    overflow: hidden !important;
    padding: 0 !important;
    background: #fff;
    border-radius: 24px;
}

.commerce-showroom-device--mobile.has-cms-image .commerce-showroom-device__cms-image--mobile {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 18px;
    object-fit: cover !important;
    object-position: center center;
}

.commerce-showroom-device--mobile.has-cms-image .commerce-showroom-device__notch {
    z-index: 3;
}

/* Ensure no generic image rule can introduce inline baseline gaps. */
.commerce-showroom-device__cms-image {
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .commerce-showroom-hero h1 {
        max-width: 100%;
        font-size: clamp(2.25rem, 10.7vw, 3.05rem);
    }

    .commerce-showroom-device--desktop .commerce-showroom-device__screen {
        height: calc(100% - 15px);
        border-radius: 0 0 7px 7px;
    }

    .commerce-showroom-device--desktop .commerce-showroom-device__cms-image--desktop {
        border-radius: 0 0 7px 7px;
    }

    .commerce-showroom-device--mobile.has-cms-image {
        border-radius: 18px;
    }

    .commerce-showroom-device--mobile.has-cms-image .commerce-showroom-device__cms-image--mobile {
        border-radius: 13px;
    }
}


/* J16N3 — compact Hero header and final desktop headline proportions. */
.commerce-showroom-hero__inner {
    padding-top: clamp(.35rem, .8vw, .7rem);
}

.commerce-showroom-hero__expedition--top {
    margin-top: 0;
    margin-bottom: clamp(.55rem, 1vw, .9rem);
}

.commerce-showroom-hero h1 {
    max-width: 610px;
    font-size: clamp(2.15rem, 3.25vw, 3.2rem);
    line-height: 1.02;
    text-wrap: initial;
}

.commerce-showroom-hero__title-accent {
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .commerce-showroom-hero__inner {
        padding-top: .4rem;
    }

    .commerce-showroom-hero__expedition--top {
        margin-bottom: .7rem;
    }
}

@media (max-width: 575.98px) {
    .commerce-showroom-hero h1 {
        max-width: 100%;
        font-size: clamp(2.15rem, 10vw, 2.85rem);
        line-height: 1.03;
    }

    .commerce-showroom-hero__title-accent {
        white-space: normal;
    }
}


/* J16N4 — natural title wrapping across violet/pink text. */
.commerce-showroom-hero h1 {
    max-width: 610px;
    font-size: clamp(2.15rem, 3.25vw, 3.2rem);
    line-height: 1.02;
    text-wrap: initial;
}

.commerce-showroom-hero h1 > span {
    display: inline;
}

.commerce-showroom-hero__title-accent {
    white-space: normal;
}

/* J16N5 — authoritative Hero title flow.
 *
 * Fixes two accumulated J16N conflicts:
 * 1) old `display:flex; flex-direction:column` forced title/titleaccent apart;
 * 2) the accent color was lost by a later white-space-only override.
 */
.commerce-showroom-hero h1 {
    display: block !important;
    max-width: 610px;
    margin-right: 0;
    font-size: clamp(2.25rem, 3.45vw, 3.4rem);
    line-height: 1.02;
    text-wrap: initial;
}

.commerce-showroom-hero h1 > span {
    display: inline !important;
}

.commerce-showroom-hero__title-accent {
    display: inline !important;
    color: var(--showroom-pink) !important;
    white-space: normal !important;
}

/* Preserve the compact responsive title without reintroducing a forced split. */
@media (max-width: 575.98px) {
    .commerce-showroom-hero h1 {
        max-width: 100%;
        font-size: clamp(2.15rem, 10vw, 2.85rem);
        line-height: 1.03;
    }

    .commerce-showroom-hero h1 > span,
    .commerce-showroom-hero__title-accent {
        display: inline !important;
        white-space: normal !important;
    }
}

/* J16O8 — Journey runtime/content fix + clean full-image background. */

.commerce-showroom-stage-method {
    position: relative;
    display: grid;
    overflow: hidden;
    isolation: isolate;
}

/*
 * Background is a real full-width image, not a coloured fallback.
 * Keeping the image in the grid (instead of absolute cover) lets its intrinsic
 * 16:9-ish height participate in the section height, so the goat stays visible.
 */
.commerce-showroom-stage-method__background,
.commerce-showroom-stage-method > .commerce-showroom-container {
    grid-area: 1 / 1;
}

.commerce-showroom-stage-method__background {
    position: relative;
    z-index: 0;
    width: 100%;
    align-self: stretch;
    overflow: hidden;
    pointer-events: none;
}

.commerce-showroom-stage-method__background img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100%;
    object-fit: cover;
    object-position: right center;
    opacity: var(--journey-bg-opacity, 100%);
    filter: blur(var(--journey-bg-blur, 0px));
}

/* At normal desktop widths this gives a 16:9 canvas, preventing vertical crop. */
@media (min-width: 768px) {
    .commerce-showroom-stage-method__background {
        min-height: min(56.25vw, 1080px);
    }
}

.commerce-showroom-stage-method > .commerce-showroom-container {
    position: relative;
    z-index: 2;
    align-self: center;
}

/* Left aligned heading, same 70% column as cards. */
.commerce-showroom-stage-method__heading {
    width: 70%;
    max-width: 70%;
    margin: 0 auto 1.65rem 0;
    text-align: left !important;
}

/* Reuse the exact ascent badge theme; only change its alignment. */
.commerce-showroom-stage-method__badge {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: .8rem !important;
}

.commerce-showroom-stage-method__heading h2 {
    margin: 0;
    color: var(--showroom-purple);
    text-align: left;
}

.commerce-showroom-stage-method__title-highlight {
    color: var(--showroom-pink);
}

.commerce-showroom-stage-method__heading > p:last-child {
    max-width: 820px;
    margin: .8rem 0 0;
    color: var(--showroom-purple);
    line-height: 1.55;
    text-align: left;
}

.commerce-showroom-stage-method .commerce-showroom-journey {
    position: relative;
    display: grid;
    width: 70%;
    max-width: 70%;
    gap: .55rem;
    margin: 0 auto 0 0;
}

.commerce-showroom-stage-method .commerce-showroom-journey__step {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 80px;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(52, 34, 95, .09);
    border-radius: 18px;
    background: rgba(255, 255, 255, .74);
    box-shadow: 0 12px 28px rgba(52, 34, 95, .045);
    backdrop-filter: blur(2px);
}

.commerce-showroom-stage-method .commerce-showroom-journey__marker {
    position: relative;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #ff5ca8, #e52b7f);
    color: #fff;
    box-shadow: 0 8px 18px rgba(246, 31, 130, .16);
    font-weight: 900;
}

.commerce-showroom-journey__copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    align-self: center;
}

.commerce-showroom-stage-method .commerce-showroom-journey h3 {
    margin: 0 0 .28rem;
    color: var(--showroom-purple);
    font-size: 1.05rem;
}

.commerce-showroom-stage-method .commerce-showroom-journey p {
    margin: 0;
    color: var(--showroom-purple);
    font-size: .9rem;
    line-height: 1.5;
}

.commerce-showroom-stage-method .commerce-showroom-journey__line {
    position: absolute;
    top: calc(-.55rem / 2);
    bottom: calc(-.55rem / 2);
    left: calc(1.1rem + 22px);
    z-index: 1;
    width: 2px;
    background: rgba(246, 31, 130, .55);
    transform: translateX(-50%);
}

.commerce-showroom-stage-method .commerce-showroom-journey__step:first-child .commerce-showroom-journey__line {
    top: 50%;
}

.commerce-showroom-stage-method .commerce-showroom-journey__step:last-child .commerce-showroom-journey__line {
    bottom: 50%;
}

/* 06 — explicit 3-column rest-stop card. */
.commerce-showroom-stage-method .commerce-showroom-journey__step--rest {
    grid-template-columns: 48px minmax(0, 1fr) 68px;
    padding-right: .7rem;
    border: 1px solid rgba(246, 31, 130, .34);
    background: rgba(255, 238, 247, .90);
}

.commerce-showroom-stage-method .commerce-showroom-journey__step--rest h3 {
    color: var(--showroom-pink) !important;
}

.commerce-showroom-journey__rest-icon {
    position: relative;
    z-index: 3;
    display: grid;
    width: 58px;
    height: 58px;
    grid-column: 3;
    align-self: stretch;
    justify-self: end;
    place-items: center;
    border-left: 1px solid rgba(246, 31, 130, .20);
    color: var(--showroom-pink);
    font-size: 1.6rem;
}

@media (max-width: 767.98px) {
    .commerce-showroom-stage-method__background img {
        width: 100%;
        min-height: 100%;
        object-fit: cover;
        object-position: right center;
    }

    .commerce-showroom-stage-method__heading,
    .commerce-showroom-stage-method .commerce-showroom-journey {
        width: 100%;
        max-width: 100%;
    }

    .commerce-showroom-stage-method .commerce-showroom-journey__step {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: .9rem;
    }

    .commerce-showroom-stage-method .commerce-showroom-journey__marker {
        width: 40px;
        height: 40px;
    }

    .commerce-showroom-stage-method .commerce-showroom-journey__line {
        left: calc(.9rem + 20px);
    }

    .commerce-showroom-stage-method .commerce-showroom-journey__step--rest {
        grid-template-columns: 42px minmax(0, 1fr) 48px;
        padding-right: .5rem;
    }

    .commerce-showroom-journey__rest-icon {
        width: 44px;
        height: auto;
        font-size: 1.3rem;
    }
}

/* J16O13 — local Journey segments: no parent rail, no cross-context z-index fight. */

/*
 * Core idea:
 * every card paints its own route segments.
 *
 * ::before = from previous card bottom/gap to THIS marker centre
 * ::after  = from THIS marker centre to next card top/gap
 *
 * The marker, copy and line are therefore all inside the SAME stacking context.
 * This makes it impossible for the line to appear over the numbered pill.
 */
.commerce-showroom-stage-method .commerce-showroom-journey {
    --journey-gap: .55rem;
    --journey-marker-size: 44px;
    --journey-card-padding-x: 1.1rem;
    --journey-line-x: calc(
        var(--journey-card-padding-x) + (var(--journey-marker-size) / 2)
    );

    position: relative;
    display: grid;
    gap: var(--journey-gap);
}

/* Kill every historical global/parent route. */
.commerce-showroom-stage-method .commerce-showroom-journey::before,
.commerce-showroom-stage-method .commerce-showroom-journey::after,
.commerce-showroom-stage-method .commerce-showroom-journey__line {
    display: none !important;
}

/*
 * Each step owns its stacking context.
 * Card background/backdrop is painted first, then route, then copy, then marker.
 */
.commerce-showroom-stage-method .commerce-showroom-journey__step {
    position: relative;
    z-index: auto !important;
    overflow: visible;
    isolation: isolate;
}

/* Local route segments. */
.commerce-showroom-stage-method .commerce-showroom-journey__step::before,
.commerce-showroom-stage-method .commerce-showroom-journey__step::after {
    position: absolute;
    left: var(--journey-line-x);
    z-index: 1;
    width: 2px;
    background: rgba(246, 31, 130, .58);
    content: "";
    pointer-events: none;
    transform: translateX(-50%);
}

/* Segment arriving at the current marker centre. */
.commerce-showroom-stage-method .commerce-showroom-journey__step::before {
    top: calc(-1 * var(--journey-gap));
    bottom: 50%;
}

/* Segment leaving the current marker centre. */
.commerce-showroom-stage-method .commerce-showroom-journey__step::after {
    top: 50%;
    bottom: calc(-1 * var(--journey-gap));
}

/* Exact centre-to-centre endpoints: nothing above 01, nothing below 06. */
.commerce-showroom-stage-method .commerce-showroom-journey__step:first-child::before,
.commerce-showroom-stage-method .commerce-showroom-journey__step:last-child::after {
    display: none;
}

/* Text is above route. */
.commerce-showroom-stage-method .commerce-showroom-journey__copy,
.commerce-showroom-stage-method .commerce-showroom-journey__rest-icon {
    position: relative;
    z-index: 2;
}

/*
 * Marker is the top layer of its own card.
 * Its opaque gradient physically hides the route underneath.
 */
.commerce-showroom-stage-method .commerce-showroom-journey__marker {
    position: relative;
    z-index: 3 !important;
    isolation: isolate;
    background: linear-gradient(145deg, #ff5ca8, #e52b7f);
}

/* Do not let an inherited/pseudo marker layer interfere with the local route. */
.commerce-showroom-stage-method .commerce-showroom-journey__marker::before,
.commerce-showroom-stage-method .commerce-showroom-journey__marker::after {
    display: none !important;
}

/* ------------------------------------------------------------------
 * Preserve the approved desktop background: source x = 0..90%.
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
    .commerce-showroom-stage-method__background {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .commerce-showroom-stage-method__background img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 111.1112% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: left center !important;
    }

    .commerce-showroom-stage-method {
        min-height: 0 !important;
    }
}

/* Breathing room above badge. */
.commerce-showroom-stage-method__heading {
    padding-top: clamp(1.25rem, 2.2vw, 2rem);
}

/* Mobile-only goat panel hidden on desktop. */
.commerce-showroom-stage-method__mobile-goat {
    display: none;
}

/* ------------------------------------------------------------------
 * Mobile: exact 50/50 source split + local route geometry.
 * ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .commerce-showroom-stage-method .commerce-showroom-journey {
        --journey-gap: .7rem;
        --journey-marker-size: 40px;
        --journey-card-padding-x: .9rem;
    }

    .commerce-showroom-stage-method {
        display: grid !important;
        grid-template-rows: auto auto !important;
    }

    .commerce-showroom-stage-method__background,
    .commerce-showroom-stage-method > .commerce-showroom-container {
        grid-row: 1 !important;
        grid-column: 1 !important;
    }

    .commerce-showroom-stage-method__background {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        align-self: stretch !important;
        overflow: hidden !important;
    }

    /* Left 50% of source behind title/cards. */
    .commerce-showroom-stage-method__background img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 200% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
        object-position: left center !important;
    }

    /*
     * Extra space after card 06 remains part of the LEFT image,
     * so the transition to the goat photo happens lower.
     */
    .commerce-showroom-stage-method > .commerce-showroom-container {
        position: relative !important;
        z-index: 2 !important;
        padding-bottom: 2rem;
    }

    /* Right 50% below Journey. */
    .commerce-showroom-stage-method__mobile-goat {
        position: relative !important;
        z-index: 3 !important;
        display: block !important;
        grid-row: 2 !important;
        grid-column: 1 !important;
        width: 100% !important;
        aspect-ratio: 1 / 1 !important;
        overflow: hidden !important;
        margin: 0 !important;
        background: transparent !important;
    }

    .commerce-showroom-stage-method__mobile-goat img {
        position: absolute !important;
        top: 0 !important;
        left: -100% !important;
        width: 200% !important;
        max-width: none !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .commerce-showroom-stage-method__heading {
        padding-top: 1.35rem;
    }
}


/* J16O16 — mobile Journey: keep centered heading + micro crossfade at image seam. */
@media (max-width: 767.98px) {
    /* Keep the validated J16O15 heading centering. */
    .commerce-showroom-stage-method__heading {
        width: 100% !important;
        max-width: 100% !important;
        margin-right: auto !important;
        margin-left: auto !important;
        align-items: center !important;
        text-align: center !important;
    }

    .commerce-showroom-stage-method__badge {
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .commerce-showroom-stage-method__heading h2 {
        width: 100%;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    .commerce-showroom-stage-method__heading > p:last-child {
        width: min(100%, 34rem);
        max-width: 34rem;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: center !important;
    }

    /*
     * Micro-crossfade only at the seam.
     * The goat half overlaps the upper half by 14px. Its first 14px fade from
     * transparent to opaque; everything below that is fully untouched.
     */
    .commerce-showroom-stage-method {
        --journey-mobile-seam-blend: 18px;
    }

    .commerce-showroom-stage-method__mobile-goat {
        margin-top: calc(-1 * var(--journey-mobile-seam-blend)) !important;
        padding-top: 0 !important;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--journey-mobile-seam-blend),
            #000 100%
        );
        mask-image: linear-gradient(
            to bottom,
            transparent 0,
            #000 var(--journey-mobile-seam-blend),
            #000 100%
        );
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /*
     * Cancel the previous large-fade image offsets. The crop stays exactly as
     * before; only the 14px overlap is blended.
     */
    .commerce-showroom-stage-method__mobile-goat img {
        top: 0 !important;
        height: 100% !important;
    }
}
/* J16M8 — configurable ascent background + per-card images. */
.commerce-showroom-ascent__background {
    position: absolute;
    inset: calc(-1 * var(--showroom-ascent-bg-blur, 0px));
    z-index: 0;
    display: none;
    overflow: hidden;
    pointer-events: none;
}

.commerce-showroom-ascent__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: var(--showroom-ascent-bg-opacity, 100%);
    filter: blur(var(--showroom-ascent-bg-blur, 0px));
    transform: scale(1.015);
}

/* Desktop chooses the uploaded image only when its dedicated switch is on. */
@media (min-width: 1101px) {
    .commerce-showroom-ascent--premium.has-background-desktop .commerce-showroom-ascent__background {
        display: block;
    }

    .commerce-showroom-ascent--premium.has-background-desktop .commerce-showroom-ascent__mountains {
        display: none;
    }
}

/* Mobile/tablet has its own independent switch. */
@media (max-width: 1100px) {
    .commerce-showroom-ascent--premium.has-background-mobile .commerce-showroom-ascent__background {
        display: block;
    }

    .commerce-showroom-ascent--premium.has-background-mobile .commerce-showroom-ascent__mountains {
        display: none;
    }
}

/* Optional image replaces the icon; icon remains the automatic fallback. */
.commerce-showroom-ascent-card__visual.has-image {
    padding: .45rem 0 .2rem;
}

.commerce-showroom-ascent-card__visual.has-image img {
    display: block;
    width: min(100%, 9.25rem);
    height: 7.7rem;
    margin: auto;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 .5rem .8rem rgba(52, 34, 95, .08));
}

/* Give the route a little more breathing room above the five desktop cards. */
@media (min-width: 1101px) {
    .commerce-showroom-ascent__journey {
        padding-top: 10.875rem;
    }
}

@media (max-width: 1100px) {
    .commerce-showroom-ascent-card__visual.has-image img {
        width: min(100%, 8rem);
        height: 5.7rem;
    }
}


/* J16M9 — Ascent path geometry polish. */

/*
 * Give the broken ascent route a little more vertical amplitude without
 * changing horizontal stage positions or scroll-progress logic.
 *
 * The path wrapper is stretched vertically around its own centre, so the
 * existing SVG/polyline coordinates remain the source of truth.
 */
@media (min-width: 768px) {
    .commerce-showroom-ascent__route,
    .commerce-showroom-ascent__path,
    .commerce-showroom-ascent__track {
        transform-origin: center center;
    }

    .commerce-showroom-ascent__route svg,
    .commerce-showroom-ascent__path svg,
    .commerce-showroom-ascent__track svg {
        transform: scaleY(1.10);
        transform-origin: center center;
    }

    /*
     * The little route dots need to visually sit on the broken line.
     * Move only the dot itself; icon, altitude and stage card stay untouched.
     */
    .commerce-showroom-ascent__route-dot,
    .commerce-showroom-ascent__point,
    .commerce-showroom-ascent__marker-dot {
        transform: translateY(2px);
    }
}

/* J16M10 — taller Ascent route + seamless hand-off to Journey. */

/*
 * Desktop route:
 * 18rem gives ~200px of actual vertical rise between the first and summit
 * route points (69.47% of the SVG/marker canvas), while preserving all X
 * positions and the existing scroll-progress calculation.
 *
 * We deliberately replace the J16M9 scaleY trick here: profile and markers
 * share exactly the same geometry again.
 */
@media (min-width: 1101px) {
    .commerce-showroom-ascent__journey {
        padding-top: 16.625rem;
    }

    .commerce-showroom-ascent__profile,
    .commerce-showroom-ascent__markers {
        height: 15rem;
    }

    .commerce-showroom-ascent__profile {
        transform: none !important;
    }

    .commerce-showroom-ascent__profile svg,
    .commerce-showroom-ascent__route svg,
    .commerce-showroom-ascent__path svg,
    .commerce-showroom-ascent__track svg {
        transform: none !important;
    }

    /*
     * The real route point is the marker pseudo-element used by the current
     * Ascent implementation. Keep the requested +2px optical adjustment.
     */
    .commerce-showroom-ascent--premium .commerce-showroom-ascent__marker::after {
        margin-top: 2px;
    }
}

/*
 * Journey used to inherit the generic showroom section top padding.
 * That padding sits OUTSIDE its image grid, hence the white strip visible
 * between Ascent and Journey. Remove it from the section itself and put the
 * breathing room inside the content container instead, so the background
 * starts flush against the preceding block.
 */
@media (min-width: 768px) {
    .commerce-showroom-stage-method.commerce-showroom-section {
        padding-top: 0 !important;
    }

    .commerce-showroom-stage-method > .commerce-showroom-container {
        padding-top: 6rem;
    }
}

/* J16M14 — J16M10 baseline + Journey seam fixes only. */

/*
 * IMPORTANT:
 * No Ascent background/image geometry is changed here.
 * J16M12 and J16M13 are deliberately removed; J16M10 remains authoritative.
 */

/* Mobile: Journey background must start immediately after Ascent. */
@media (max-width: 767.98px) {
    .commerce-showroom-stage-method.commerce-showroom-section,
    .commerce-showroom-stage-method.commerce-showroom-spacing--compact,
    .commerce-showroom-stage-method.commerce-showroom-spacing--normal,
    .commerce-showroom-stage-method.commerce-showroom-spacing--large {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /*
     * Keep the visual breathing room INSIDE the image-backed Journey area,
     * rather than as white section padding outside it.
     */
    .commerce-showroom-stage-method > .commerce-showroom-container {
        padding-top: 0 !important;
    }

    .commerce-showroom-stage-method__heading {
        padding-top: 1.35rem !important;
    }
}

/*
 * Very large / HiDPI screens:
 * J15H.1J turns ordinary showroom sections into flex viewport scenes and adds
 * large top padding. Stage Method is image/grid based, so restore its grid
 * model and move the top breathing room inside the image-backed container.
 */
@media
    (min-width: 2200px) and (min-height: 1500px),
    (min-width: 1900px) and (min-height: 1100px) and (min-resolution: 1.5dppx),
    (min-width: 1900px) and (min-height: 1100px) and (-webkit-min-device-pixel-ratio: 1.5) {

    .commerce-showroom > .commerce-showroom-stage-method.commerce-showroom-section {
        display: grid !important;
        align-items: initial !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .commerce-showroom-stage-method > .commerce-showroom-container {
        padding-top: 5rem !important;
    }
}


/* J16M15 — clean photo background mode + larger Ascent card images. */

/*
 * Historical `.commerce-showroom-ascent::before/::after` layers still draw
 * geometric mountain facets. They are useful for the generated background,
 * but must disappear when an uploaded photo is selected; otherwise they show
 * through whenever the Builder image opacity is below 100%.
 */
@media (min-width: 1101px) {
    .commerce-showroom-ascent--premium.has-background-desktop {
        background: #fff;
    }

    .commerce-showroom-ascent--premium.has-background-desktop::before,
    .commerce-showroom-ascent--premium.has-background-desktop::after {
        display: none !important;
        content: none !important;
    }
}

@media (max-width: 1100px) {
    .commerce-showroom-ascent--premium.has-background-mobile {
        background: #fff;
    }

    .commerce-showroom-ascent--premium.has-background-mobile::before,
    .commerce-showroom-ascent--premium.has-background-mobile::after {
        display: none !important;
        content: none !important;
    }
}

/*
 * Uploaded card illustrations are merchandising visuals, so give them more
 * presence than the Font Awesome fallback while preserving their aspect ratio.
 */
@media (min-width: 1101px) {
    .commerce-showroom-ascent-card__visual.has-image {
        min-height: 9.5rem;
        padding: .2rem 0 .35rem;
    }

    .commerce-showroom-ascent-card__visual.has-image img {
        width: min(100%, 11.25rem);
        height: 9rem;
    }
}

@media (max-width: 1100px) {
    .commerce-showroom-ascent-card__visual.has-image {
        min-height: 7rem;
        padding: .2rem 0 .3rem;
    }

    .commerce-showroom-ascent-card__visual.has-image img {
        width: min(100%, 9.25rem);
        height: 6.75rem;
    }
}

@media (min-width: 1101px) {
    .commerce-showroom-ascent--premium.has-background-desktop
    .commerce-showroom-ascent__photo-bg {
        background-size: 117.647% 117.647%;
        background-position: left top;
        background-repeat: no-repeat;
    }
}

/* J16P1 — Final CTA editorial refresh + Builder-controlled photo background. */
.commerce-showroom-final {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.commerce-showroom-final__background {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.commerce-showroom-final__background img {
    position: absolute;
    inset: calc(-1 * var(--showroom-final-bg-blur, 0px));
    display: block;
    width: calc(100% + (2 * var(--showroom-final-bg-blur, 0px)));
    max-width: none;
    height: calc(100% + (2 * var(--showroom-final-bg-blur, 0px)));
    object-fit: cover;
    object-position: center;
    opacity: var(--showroom-final-bg-opacity, 100%);
    filter: blur(var(--showroom-final-bg-blur, 0px));
}

.commerce-showroom-final__inner {
    position: relative;
    z-index: 2;
}

.commerce-showroom-final__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin: 0 auto 1.15rem;
    padding: .62rem 1rem;
    border: 1px solid rgba(246, 31, 130, .52);
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: var(--showroom-pink);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .075em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(42, 31, 82, .06);
}

.commerce-showroom-final__badge i {
    color: var(--showroom-pink);
    font-size: .95rem;
}

.commerce-showroom-final__subtitle {
    margin: 1rem auto 1.7rem;
}

/* Give the CTA button and expedition briefing more breathing room. */
.commerce-showroom-final .commerce-showroom-expedition-card {
    display: flex;
    width: fit-content;
    margin: 3.25rem auto 0;
}

@media (max-width: 767.98px) {
    .commerce-showroom-final .commerce-showroom-expedition-card {
        margin-top: 2.5rem;
    }

    .commerce-showroom-final__badge {
        max-width: calc(100vw - 2rem);
        white-space: normal;
        text-align: center;
    }
}

/* J16P3 — Final CTA polish, split desktop sticky and legal footer. */

/* -------------------------------------------------------------
 * Final CTA editorial presentation.
 * ------------------------------------------------------------- */
.commerce-showroom-final__inner {
    display: grid;
    min-height: clamp(42rem, 72vh, 58rem);
    align-content: center;
    padding-bottom: 10rem;
}

.commerce-showroom-final__content {
    position: relative;
    z-index: 3;
    display: flex;
    max-width: 58rem;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

.commerce-showroom-final__badge {
    margin-top: clamp(-3rem, -4vh, -1.25rem);
    margin-bottom: clamp(1.7rem, 3vh, 2.5rem);
    color: var(--showroom-pink) !important;
}

.commerce-showroom-final__badge span,
.commerce-showroom-final__badge i {
    color: var(--showroom-pink) !important;
}

.commerce-showroom-final h2 {
    max-width: 13ch;
    margin: 0 auto;
    color: #fff;
    font-size: clamp(3rem, 5.2vw, 5.4rem);
    line-height: .98;
    text-wrap: balance;
    text-shadow:
        0 2px 2px rgba(19, 11, 39, .28),
        0 8px 30px rgba(19, 11, 39, .34);
}

.commerce-showroom-final__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    margin: clamp(1.55rem, 3vh, 2.25rem) auto 1.6rem !important;
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(19, 11, 39, .58);
}

.commerce-showroom-final__subtitle strong {
    color: #fff;
    font-size: clamp(1.15rem, 1.55vw, 1.4rem);
    font-weight: 700;
}

.commerce-showroom-final__subtitle > span {
    width: clamp(2rem, 4vw, 3.2rem);
    height: 2px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: var(--showroom-pink);
}

.commerce-showroom-final__content > .commerce-showroom-btn {
    min-height: 3.5rem;
    padding-inline: 1.65rem;
    box-shadow: 0 12px 30px rgba(246, 31, 130, .28);
}

/* -------------------------------------------------------------
 * Desktop sticky:
 * normal sticky stays EXACTLY the historical pill.
 * Final CTA adds an independent Liquid Glass piece to its left.
 * ------------------------------------------------------------- */
.commerce-showroom-desktop-sticky__layout {
    display: flex;
    width: fit-content;
    align-items: stretch;
    justify-content: center;
    gap: 1rem;
    margin: 0 auto;
    pointer-events: none;
}

.commerce-showroom-desktop-sticky__layout > * {
    pointer-events: auto;
}

/* Restore the historical compact sticky dimensions/structure. */
.commerce-showroom-desktop-sticky__inner {
    display: flex;
    width: min(820px, calc(100vw - 3rem));
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: .75rem .8rem .75rem 1.25rem;
    border: 1px solid rgba(217, 48, 121, .18);
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 1.2rem 3.5rem rgba(42,49,59,.18);
    backdrop-filter: blur(16px);
}

.commerce-showroom-desktop-sticky__inner > div {
    display: flex;
    align-items: baseline;
    gap: .75rem;
}

.commerce-showroom-desktop-sticky__expedition-glass[hidden] {
    display: none !important;
}

.commerce-showroom-desktop-sticky__expedition-glass {
    display: flex;
    min-width: 285px;
    align-items: center;
    gap: .85rem;
    padding: .7rem 1.2rem .7rem .8rem;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 1.35rem;
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.08)),
        rgba(36, 25, 52, .32);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.24),
        0 14px 40px rgba(18, 12, 31, .22);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
}

.commerce-showroom-desktop-sticky__expedition-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.44), transparent 42%),
        rgba(246,31,130,.32);
    color: #fff;
    box-shadow: 0 7px 20px rgba(246,31,130,.22);
}

.commerce-showroom-desktop-sticky__expedition-glass > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .08rem;
}

.commerce-showroom-desktop-sticky__expedition-glass strong {
    color: #fff;
    font-size: .9rem;
    line-height: 1.2;
    white-space: nowrap;
}

.commerce-showroom-desktop-sticky__expedition-glass span,
.commerce-showroom-desktop-sticky__expedition-glass small {
    color: rgba(255,255,255,.78);
    font-size: .72rem;
    line-height: 1.25;
    white-space: nowrap;
}

@media (min-width: 992px) {
    .commerce-showroom-final__expedition {
        display: none !important;
    }

    .commerce-showroom-desktop-sticky {
        bottom: clamp(1.5rem, 2.2vh, 2rem);
    }
}

/* -------------------------------------------------------------
 * Legal company/footer area.
 * ------------------------------------------------------------- */
.commerce-showroom-final__legal {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.15rem 0 calc(1rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(to top, rgba(18,12,31,.58), rgba(18,12,31,.18));
    color: rgba(255,255,255,.75);
    backdrop-filter: blur(8px);
}

.commerce-showroom-final__legal-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.commerce-showroom-final__company {
    display: flex;
    max-width: 55%;
    flex-wrap: wrap;
    gap: .2rem .7rem;
    font-size: .7rem;
    line-height: 1.4;
}

.commerce-showroom-final__company span:not(:last-child)::after {
    margin-left: .7rem;
    color: rgba(255,255,255,.35);
    content: "·";
}

.commerce-showroom-final__legal-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem 1rem;
}

.commerce-showroom-final__legal-links a {
    color: rgba(255,255,255,.82);
    font-size: .72rem;
    text-decoration: none;
}

.commerce-showroom-final__legal-links a:hover,
.commerce-showroom-final__legal-links a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

/* -------------------------------------------------------------
 * Mobile:
 * background focal shift is deliberately a single editable variable.
 * Change 60px here if Nata wants more/less horizontal shift.
 * ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .commerce-showroom-final {
        --showroom-final-mobile-bg-offset-x: 150px;
    }

    .commerce-showroom-final__background img {
        object-position:
            calc(50% + var(--showroom-final-mobile-bg-offset-x))
            center;
    }

    .commerce-showroom-final__inner {
        min-height: auto;
        padding-bottom: 11rem;
    }

    .commerce-showroom-final__badge {
        margin-top: 0;
        margin-bottom: 1.4rem;
    }

    .commerce-showroom-final h2 {
        max-width: 14ch;
        font-size: clamp(2.4rem, 10vw, 3.8rem);
    }

    .commerce-showroom-final__subtitle {
        gap: .55rem;
    }

    .commerce-showroom-final__subtitle > span {
        width: 1.6rem;
    }

    .commerce-showroom-final__expedition {
        display: inline-flex;
        margin-top: 2.5rem;
    }

    .commerce-showroom-final__legal-inner {
        align-items: center;
        flex-direction: column;
        gap: .65rem;
        text-align: center;
    }

    .commerce-showroom-final__company {
        max-width: 100%;
        justify-content: center;
        font-size: .65rem;
    }

    .commerce-showroom-final__legal-links {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .commerce-showroom-desktop-sticky__inner,
    .commerce-showroom-desktop-sticky__expedition-glass {
        transition: none !important;
    }
}

/* J16P6 — dynamic legal clearance + configurable legal fields. */

/*
 * Sticky positioning on Final CTA is calculated in JS from the ACTUAL Legal
 * footer top edge. No fixed legal height lives in CSS anymore.
 * Outside Final CTA the historical sticky positions remain untouched.
 */

/* Preserve explicit line breaks from invoice settings/config values. */
.commerce-showroom-final__company-detail,
.commerce-showroom-final__company-note,
.commerce-showroom-final__company-name {
    white-space: pre-line;
}

/* Hidden fields may become visible after an AJAX currency switch. */
.commerce-showroom-final__company [hidden] {
    display: none !important;
}

/* Legal identity stays readable but compact on desktop. */
.commerce-showroom-final__company {
    display: flex;
    max-width: 58%;
    flex-direction: column;
    align-items: flex-start;
    gap: .14rem;
}

.commerce-showroom-final__company-name {
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    line-height: 1.3;
}

.commerce-showroom-final__company-detail {
    color: rgba(255,255,255,.78);
    font-size: .67rem;
    line-height: 1.35;
}

.commerce-showroom-final__company-note {
    color: rgba(255,255,255,.64);
    font-size: .64rem;
    line-height: 1.35;
}

/* Nata's validated mobile background focal offset. */
@media (max-width: 991.98px) {
    .commerce-showroom-final {
        --showroom-final-mobile-bg-offset-x: 150px;
    }
}

@media (max-width: 767.98px) {
    .commerce-showroom-final__company {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    /*
     * Content room is independent from sticky clearance. The sticky itself is
     * dynamically placed 10px above the actual Legal footer by JS.
     */
    .commerce-showroom-final__inner {
        padding-bottom: 13rem;
    }
}

/* J16P8 — mobile CTA becomes an inline block inside Final CTA. */

/* Desktop never shows the inline mobile CTA. */
.commerce-showroom-final__inline-mobile-cta {
    display: none;
}

/*
 * Mobile:
 * - global fixed sticky disappears only while Final CTA is in the viewport;
 * - a visually identical CTA sits in normal document flow between Expedition
 *   and the Legal footer;
 * - no fixed positioning / no legal-footer geometry calculations.
 */
@media (max-width: 680px) {
    html.commerce-showroom-final-cta-active
        .commerce-showroom-sticky-cta[data-showroom-sticky-cta] {
        display: none !important;
    }

    .commerce-showroom-final__inline-mobile-cta {
        display: inline-flex;
        width: calc(100% - 1rem);
        max-width: 36rem;
        min-height: 0;
        align-items: center;
        justify-content: space-between;
        gap: .36rem;
        margin: 2rem auto 1.25rem;
        padding: .26rem .3rem;

        border-radius: 999px;
        background: var(--showroom-pink);
        color: #fff;
        box-shadow: 0 12px 28px rgba(246, 31, 130, .24);
    }

    .commerce-showroom-final__inline-mobile-cta
        .commerce-showroom-sticky-currency {
        display: flex !important;
        width: auto !important;
        min-width: 0 !important;
        height: 2.45rem !important;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        background: #fff;
    }

    .commerce-showroom-final__inline-mobile-cta
        .commerce-showroom-sticky-currency select {
        display: block;
        width: auto !important;
        max-width: 7.9rem !important;
        min-width: 0 !important;
        height: 2.45rem !important;
        min-height: 2.45rem !important;
        margin: 0 !important;
        padding: .28rem 1.6rem .28rem .58rem !important;
        border: 0 !important;
        border-radius: 999px !important;
        background-color: transparent;
        color: var(--showroom-purple);
        font-size: .82rem !important;
        font-weight: 800;
        line-height: 1 !important;
        white-space: nowrap;
    }

    .commerce-showroom-final__inline-mobile-cta > a {
        display: inline-flex;
        min-width: 0;
        min-height: 2.45rem;
        height: 2.45rem;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        gap: .38rem;
        margin: 0;
        padding: .3rem .48rem;
        border-radius: 999px;
        color: inherit;
        font-size: .82rem;
        font-weight: 800;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }

    .commerce-showroom-final__inline-mobile-cta > a i {
        flex: 0 0 auto;
    }

    /*
     * The Final CTA content no longer needs a huge artificial bottom reserve:
     * the CTA and Legal footer are both normal-flow content now.
     */
    .commerce-showroom-final__inner {
        padding-bottom: 1.5rem !important;
    }

    .commerce-showroom-final__legal {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin-top: 0;
    }
}

@media (max-width: 430px) {
    .commerce-showroom-final__inline-mobile-cta {
        width: calc(100% - .5rem);
        gap: .28rem;
        padding: .2rem .22rem;
    }

    .commerce-showroom-final__inline-mobile-cta
        .commerce-showroom-sticky-currency,
    .commerce-showroom-final__inline-mobile-cta
        .commerce-showroom-sticky-currency select {
        height: 2.34rem !important;
        min-height: 2.34rem !important;
    }

    .commerce-showroom-final__inline-mobile-cta
        .commerce-showroom-sticky-currency select {
        max-width: 7.45rem !important;
        padding: .24rem 1.45rem .24rem .48rem !important;
        font-size: .78rem !important;
    }

    .commerce-showroom-final__inline-mobile-cta > a {
        height: 2.34rem;
        min-height: 2.34rem;
        padding: .26rem .42rem;
        font-size: .78rem;
    }
}


/* J16Q1 — Verbs Cards merchandising block. */
.commerce-showroom-verbs-cards {
    background: #fff;
}

.commerce-showroom-verbs-cards__panel {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(2rem, 4vw, 4.75rem);
    align-items: stretch;
    padding: clamp(.75rem, 1.5vw, 1.1rem);
    border: 1px solid rgba(52, 34, 95, .08);
    border-radius: 2rem;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 48px rgba(42,31,82,.08);
}

.commerce-showroom-verbs-cards__media {
    overflow: hidden;
    border-radius: 1.55rem;
    background: #f7f7fb;
    aspect-ratio: 1 / 1;
}

.commerce-showroom-verbs-cards__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.commerce-showroom-verbs-cards__content {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.25rem, 2.5vw, 2.25rem) clamp(.4rem, 1vw, 1rem);
}

.commerce-showroom-verbs-cards__badge {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1.35rem;
    padding: .62rem 1rem;
    border: 1px solid rgba(246,31,130,.48);
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: var(--showroom-pink);
    font-size: .79rem;
    font-weight: 850;
    letter-spacing: .065em;
    line-height: 1;
    text-transform: uppercase;
    box-shadow: 0 8px 24px rgba(42,31,82,.05);
}

.commerce-showroom-verbs-cards__badge i,
.commerce-showroom-verbs-cards__badge span {
    color: var(--showroom-pink);
}

.commerce-showroom-verbs-cards h2 {
    max-width: 11ch;
    margin: 0;
    color: var(--showroom-purple);
    font-size: clamp(2.6rem, 4.1vw, 4.7rem);
    line-height: .98;
    text-wrap: balance;
}

.commerce-showroom-verbs-cards h2 > span {
    color: var(--showroom-pink);
}

.commerce-showroom-verbs-cards__text {
    max-width: 42rem;
    margin: 1.35rem 0 1.7rem;
    color: var(--showroom-purple);
    font-size: clamp(1rem, 1.35vw, 1.22rem);
    line-height: 1.55;
    white-space: pre-line;
}

.commerce-showroom-verbs-cards__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: .45rem 0 1.8rem;
}

.commerce-showroom-verbs-cards__feature {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: .85rem;
    padding: .5rem 1rem;
    text-align: center;
}

.commerce-showroom-verbs-cards__feature + .commerce-showroom-verbs-cards__feature {
    border-left: 1px dashed rgba(246,31,130,.24);
}

.commerce-showroom-verbs-cards__feature-icon {
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    border: 2px solid var(--showroom-pink);
    border-radius: .8rem;
    color: var(--showroom-pink);
    font-size: 1.35rem;
}

.commerce-showroom-verbs-cards__feature strong {
    display: block;
    color: var(--showroom-purple);
    font-size: .92rem;
    font-weight: 850;
    line-height: 1.3;
}

.commerce-showroom-verbs-cards__feature p {
    margin: .25rem 0 0;
    color: var(--showroom-purple);
    font-size: .78rem;
    line-height: 1.42;
    white-space: pre-line;
}

.commerce-showroom-verbs-cards__cta {
    align-self: stretch;
    justify-content: center;
    min-height: 3.5rem;
    margin-top: .2rem;
    border-radius: .9rem;
    font-size: 1rem;
    box-shadow: 0 10px 28px rgba(246,31,130,.20);
}

@media (max-width: 991.98px) {
    .commerce-showroom-verbs-cards__panel {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }

    .commerce-showroom-verbs-cards__content {
        padding: .5rem .25rem 1rem;
    }

    .commerce-showroom-verbs-cards h2 {
        max-width: 100%;
        font-size: clamp(2.25rem, 8.5vw, 3.4rem);
    }
}

@media (max-width: 680px) {
    .commerce-showroom-verbs-cards__panel {
        padding: .55rem;
        border-radius: 1.35rem;
    }

    .commerce-showroom-verbs-cards__media {
        border-radius: 1rem;
    }

    .commerce-showroom-verbs-cards__content {
        align-items: center;
        text-align: center;
    }

    .commerce-showroom-verbs-cards__badge {
        margin-right: auto;
        margin-left: auto;
    }

    .commerce-showroom-verbs-cards__features {
        width: 100%;
        grid-template-columns: 1fr;
        gap: .8rem;
    }

    .commerce-showroom-verbs-cards__feature {
        display: grid;
        grid-template-columns: 3.2rem minmax(0,1fr);
        align-items: center;
        text-align: left;
    }

    .commerce-showroom-verbs-cards__feature + .commerce-showroom-verbs-cards__feature {
        padding-top: 1rem;
        border-top: 1px dashed rgba(246,31,130,.24);
        border-left: 0;
    }

    .commerce-showroom-verbs-cards__feature-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.2rem;
    }
}


/* J16Q2 — preserve explicit \n line breaks inside Verbs Cards benefits. */
.commerce-showroom-verbs-cards__feature strong,
.commerce-showroom-verbs-cards__feature p {
    white-space: pre-line;
}


/* J16Q3 — Verbs Cards desktop layout: strict 55/45 split and contained media. */
@media (min-width: 992px) {
    .commerce-showroom-verbs-cards__panel {
        grid-template-columns: minmax(0, 55%) minmax(0, 45%);
        gap: 0;
        align-items: stretch;
        overflow: hidden;
    }

    /*
     * Keep the left media strictly inside its own column.
     * The square ratio remains the source of truth; the image can no longer
     * visually bleed into the text column.
     */
    .commerce-showroom-verbs-cards__media {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: 1.55rem;
    }

    .commerce-showroom-verbs-cards__media img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
        object-position: center;
    }

    .commerce-showroom-verbs-cards__content {
        min-width: 0;
        max-width: 100%;
        justify-content: center;
        padding:
            clamp(1.2rem, 2vw, 2rem)
            clamp(1.35rem, 2.4vw, 2.5rem);
        overflow: hidden;
    }

    /*
     * Slightly more compact typography so the right column remains visually
     * balanced against the square image.
     */
    .commerce-showroom-verbs-cards__badge {
        margin-bottom: 1rem;
        padding: .55rem .9rem;
        font-size: .72rem;
    }

    .commerce-showroom-verbs-cards h2 {
        max-width: 10.5ch;
        font-size: clamp(2.35rem, 3.45vw, 4rem);
        line-height: 1;
    }

    .commerce-showroom-verbs-cards__text {
        margin: 1rem 0 1.35rem;
        font-size: clamp(.92rem, 1.05vw, 1.08rem);
        line-height: 1.48;
    }

    .commerce-showroom-verbs-cards__features {
        margin: .25rem 0 1.35rem;
    }

    .commerce-showroom-verbs-cards__feature {
        gap: .65rem;
        padding: .4rem .65rem;
    }

    .commerce-showroom-verbs-cards__feature-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.15rem;
    }

    .commerce-showroom-verbs-cards__feature strong {
        font-size: .84rem;
        line-height: 1.25;
    }

    .commerce-showroom-verbs-cards__feature p {
        margin-top: .18rem;
        font-size: .72rem;
        line-height: 1.35;
    }

    .commerce-showroom-verbs-cards__cta {
        min-height: 3.25rem;
        margin-top: 0;
        font-size: .94rem;
    }
}

/* J16R1 — mobile spacing polish: Journey → Offers + Final legal bottom edge. */
@media (max-width: 767.98px) {
    /*
     * Journey already neutralises its inherited top spacing, but the generic
     * `.commerce-showroom-spacing--normal` still leaves 4.25rem underneath.
     * Remove that inherited outside spacing; Offers keeps its own internal
     * top padding, so the blocks remain visually separated without a dead zone.
     */
    .commerce-showroom-stage-method.commerce-showroom-section,
    .commerce-showroom-stage-method.commerce-showroom-spacing--compact,
    .commerce-showroom-stage-method.commerce-showroom-spacing--normal,
    .commerce-showroom-stage-method.commerce-showroom-spacing--large {
        padding-bottom: 0 !important;
    }

    /*
     * Since J16P8 the Legal footer is normal-flow content. The historical
     * Final CTA section padding must therefore no longer sit AFTER the footer.
     * Keep the top breathing room but finish the section exactly at Legal.
     */
    .commerce-showroom-final {
        padding-bottom: 0 !important;
    }

    .commerce-showroom-final__legal {
        margin-bottom: 0 !important;
    }
}


/* J16R3 — shared background controls and final showroom polish. */
.commerce-showroom .commerce-showroom-background--campuspink {
    background: #fff0f7 !important;
}

.commerce-showroom .commerce-showroom-background--custom {
    background: var(--showroom-section-custom-background, #fff0f7) !important;
}

.commerce-showroom .commerce-showroom-background--image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #fff !important;
}

.commerce-showroom-common-background {
    position: absolute !important;
    z-index: 0 !important;
    inset: 0;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.commerce-showroom-common-background img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    opacity: var(--showroom-common-bg-opacity, 100%);
    filter: blur(var(--showroom-common-bg-blur, 0px));
    transform: scale(1.035);
}

/* Keep every real block child above the optional shared image layer. */
.commerce-showroom-background--image > :not(.commerce-showroom-common-background) {
    position: relative;
    z-index: 1;
}

/* When an image is explicitly selected, generated CSS/SVG decorations must not cover it. */
.commerce-showroom-background--image::before,
.commerce-showroom-background--image::after {
    visibility: hidden;
}

.commerce-showroom-ascent.commerce-showroom-background--image
    > .commerce-showroom-ascent__mountains {
    display: none;
}

/* Verbs Cards: let the title use the full 45% editorial column. */
@media (min-width: 992px) {
    .commerce-showroom-verbs-cards h2 {
        width: 100%;
        max-width: none;
        font-size: clamp(2.2rem, 3vw, 3.55rem);
        text-wrap: balance;
    }
}

/* Final CTA: subtle pink glow behind the white heading. */
.commerce-showroom-final h2 {
    text-shadow:
        0 0 .55rem rgba(246, 31, 130, .48),
        0 0 1.15rem rgba(246, 31, 130, .38),
        0 0 2.1rem rgba(246, 31, 130, .28),
        0 .15rem .55rem rgba(31, 23, 53, .22);
}

/* One Liquid Glass mountain icon treatment on mobile and desktop Expedition variants. */
.commerce-showroom-expedition-card__icon,
.commerce-showroom-desktop-sticky__expedition-icon {
    display: grid;
    width: 3rem;
    height: 3rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .38);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 22%, rgba(255,255,255,.58), transparent 40%),
        linear-gradient(145deg, rgba(255,255,255,.24), rgba(246,31,130,.22)),
        rgba(255,255,255,.10);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.35),
        0 .45rem 1.25rem rgba(246,31,130,.20);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
}


/* J16R3 — Hero reuses its specialised image while common opacity/blur controls it. */
.commerce-showroom-hero.has-cms-background::before {
    opacity: var(--showroom-hero-bg-opacity, 100%);
    filter: blur(var(--showroom-hero-bg-blur, 0px));
    transform: scale(1.025);
}


/* M3H.14 — self-contained Personal Offer badge for public Showroom.
   Do not depend on storefront.css: showroom.php only loads showroom.css. */
.commerce-showroom-offer__personal-badge {
    display: inline-flex !important;
    position: relative;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: .34rem;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: .36rem .72rem;
    overflow: hidden;
    border: 1px solid rgba(181, 128, 21, .42);
    border-radius: 999px;
    color: #6e4810 !important;
    background:
        linear-gradient(115deg, #fff8d7 0%, #f7d979 30%, #fff4bf 52%, #dcae3f 78%, #fff7d0 100%) !important;
    background-size: 180% 100% !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 .35rem .9rem rgba(173,116,13,.15);
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .01em;
    text-shadow: 0 1px 0 rgba(255,255,255,.62);
    white-space: nowrap;
    isolation: isolate;
}

.commerce-showroom-offer__personal-badge::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,.58) 42%,
        rgba(255,255,255,.08) 56%,
        transparent 72%
    );
    content: "";
    transform: translateX(-110%);
    animation: commerce-showroom-personal-offer-shine 4.8s ease-in-out infinite;
}

.commerce-showroom-offer__personal-badge > span,
.commerce-showroom-offer__personal-badge .commerce-personal-offer-badge__star {
    position: relative;
    z-index: 1;
}

.commerce-showroom-offer__personal-badge > span {
    color: #6e4810 !important;
}

.commerce-showroom-offer__personal-badge .commerce-personal-offer-badge__star {
    color: #a66b07 !important;
    font-size: .56rem;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.8));
}

.commerce-showroom-offer__personal-badge .commerce-personal-offer-badge__star--right {
    font-size: .45rem;
    opacity: .8;
}

@keyframes commerce-showroom-personal-offer-shine {
    0%, 72%, 100% { transform: translateX(-110%); }
    84% { transform: translateX(110%); }
}