/* =========================================
   VOXELMARKET — REVIEWS SHOWCASE
========================================= */

.vm-reviews-showcase {
    --vm-reviews-red: #e30613;
    --vm-reviews-bg: #050404;
    --vm-reviews-white: #ffffff;
    --vm-reviews-muted: rgba(255, 255, 255, 0.58);
    --vm-reviews-line: rgba(255, 255, 255, 0.14);
    --vm-reviews-slider-bg: #090708;
    --vm-reviews-editorial-bg: #111010;
    --vm-reviews-gutter: clamp(38px, 5vw, 80px);

    position: relative;
    isolation: isolate;

    width: 100%;
    overflow: hidden;

    padding:
        clamp(90px, 9vw, 150px)
        var(--vm-reviews-gutter)
        clamp(100px, 10vw, 170px);

    background-color: var(--vm-reviews-bg);
    color: var(--vm-reviews-white);
}

.vm-reviews-showcase,
.vm-reviews-showcase * {
    box-sizing: border-box;
}

.vm-reviews-showcase::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.10) 0 0.75px,
            transparent 0.8px
        ),
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(227, 6, 19, 0.025) 48%,
            transparent 72%
        );
    background-size: 10px 10px, 100% 100%;

    opacity: 0.60;
    pointer-events: none;
}

.vm-reviews-showcase > * {
    position: relative;
    z-index: 1;
}


/* =========================================
   STATS
========================================= */

.vm-reviews-showcase__stats {
    margin-bottom: 110px;
}

.vm-reviews-showcase__stats-inner {
    display: grid;
    grid-template-columns:
        minmax(280px, 0.85fr)
        1px
        minmax(440px, 1.35fr);

    align-items: center;
    column-gap: clamp(38px, 5vw, 72px);

    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
}


/* =========================================
   SCORE — LEFT SIDE
========================================= */

.vm-reviews-showcase__score-panel {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

.vm-reviews-showcase__score {
    display: block;

    color: var(--vm-reviews-white);

    font-size: clamp(104px, 10vw, 158px);
    line-height: 0.78;
    font-weight: 550;
    letter-spacing: -0.075em;
    font-variant-numeric: tabular-nums;
}

.vm-reviews-showcase__main-stars {
    margin-top: 28px;

    color: var(--vm-reviews-red);

    font-size: clamp(25px, 2.25vw, 34px);
    line-height: 1;
    letter-spacing: 0.11em;
}

.vm-reviews-showcase__reviews-total {
    margin-top: 20px;

    color: var(--vm-reviews-muted);

    font-size: 16px;
    line-height: 1.4;
}


/* =========================================
   REVIEWS BUTTON
========================================= */

.vm-reviews-showcase__reviews-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;

    min-width: 350px;
    margin-top: 34px;
    padding: 18px 25px 18px 30px;

    border: 1px solid var(--vm-reviews-red);
    border-radius: 999px;

    color: var(--vm-reviews-white);
    background: transparent;

    font-size: 14px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.vm-reviews-showcase__reviews-arrow {
    color: var(--vm-reviews-red);

    font-size: 29px;
    line-height: 0.7;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.vm-reviews-showcase__reviews-link:hover {
    color: var(--vm-reviews-white);
    background: var(--vm-reviews-red);
    transform: translateY(-2px);
}

.vm-reviews-showcase__reviews-link:hover
.vm-reviews-showcase__reviews-arrow {
    color: var(--vm-reviews-white);
    transform: translateX(4px);
}


/* =========================================
   DIVIDER
========================================= */

.vm-reviews-showcase__stats-divider {
    align-self: stretch;

    width: 1px;
    min-height: 240px;

    background: var(--vm-reviews-line);
}


/* =========================================
   RATING DISTRIBUTION — RIGHT SIDE
========================================= */

.vm-reviews-showcase__rating-list {
    display: flex;
    flex-direction: column;
    gap: 26px;

    width: 100%;
}

.vm-reviews-showcase__rating-row {
    display: grid;
    grid-template-columns:
        22px
        24px
        minmax(180px, 1fr)
        44px;

    align-items: center;
    gap: 10px;

    color: var(--vm-reviews-white);
    font-variant-numeric: tabular-nums;
}

.vm-reviews-showcase__rating-number {
    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;
    line-height: 1;
    text-align: right;
}

.vm-reviews-showcase__rating-star {
    color: var(--vm-reviews-white);

    font-size: 20px;
    line-height: 1;
}

.vm-reviews-showcase__rating-track {
    position: relative;
    display: block;
    overflow: hidden;

    width: 100%;
    height: 10px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.vm-reviews-showcase__rating-fill {
    display: block;

    min-width: 7px;
    height: 100%;

    border-radius: inherit;
    background: var(--vm-reviews-red);

    transition: width 0.6s ease;
}

.vm-reviews-showcase__rating-fill.is-empty {
    min-width: 0;
}

.vm-reviews-showcase__rating-count {
    color: rgba(255, 255, 255, 0.82);

    font-size: 17px;
    line-height: 1;
    font-weight: 450;
    text-align: left;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .vm-reviews-showcase__stats-inner {
        grid-template-columns:
            minmax(220px, 0.82fr)
            1px
            minmax(300px, 1.18fr);

        column-gap: 28px;
    }

    .vm-reviews-showcase__reviews-link {
        min-width: 250px;
    }

    .vm-reviews-showcase__rating-row {
        grid-template-columns:
            20px
            22px
            minmax(130px, 1fr)
            38px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .vm-reviews-showcase__stats {
        margin-bottom: 24px;
    }

    .vm-reviews-showcase__stats-inner {
        display: grid;
        grid-template-columns:
            minmax(0, 0.92fr)
            1px
            minmax(0, 1.08fr);

        align-items: stretch;
        column-gap: clamp(10px, 3.6vw, 16px);
    }

    .vm-reviews-showcase__score-panel {
        justify-content: flex-start;
        min-width: 0;
    }

    .vm-reviews-showcase__score {
        font-size: clamp(50px, 14vw, 62px);
        line-height: 0.78;
    }

    .vm-reviews-showcase__main-stars {
        margin-top: 10px;

        font-size: clamp(10px, 3vw, 13px);
        letter-spacing: 0.08em;
    }

    .vm-reviews-showcase__reviews-total {
        margin-top: 6px;

        font-size: clamp(7px, 2vw, 8.5px);
        line-height: 1.25;

        white-space: nowrap;
    }

    .vm-reviews-showcase__reviews-link {
        width: 100%;
        min-width: 0;
        max-width: none;

        gap: 7px;

        margin-top: 12px;
        padding: 8px 8px 8px 10px;

        font-size: clamp(6px, 1.75vw, 7.5px);
        white-space: nowrap;
    }

    .vm-reviews-showcase__reviews-arrow {
        font-size: 13px;
    }

    .vm-reviews-showcase__stats-divider {
        align-self: stretch;

        width: 1px;
        height: auto;
        min-height: 118px;
        margin: 0;
    }

    .vm-reviews-showcase__rating-list {
        align-self: center;

        gap: clamp(7px, 2.2vw, 9px);
    }

    .vm-reviews-showcase__rating-row {
        grid-template-columns:
            10px
            11px
            minmax(0, 1fr)
            24px;

        gap: clamp(4px, 1.35vw, 6px);
    }

    .vm-reviews-showcase__rating-number,
    .vm-reviews-showcase__rating-count {
        font-size: clamp(9px, 2.55vw, 11px);
    }

    .vm-reviews-showcase__rating-star {
        font-size: clamp(9px, 2.7vw, 12px);
    }

    .vm-reviews-showcase__rating-track {
        height: 4px;
    }

    .vm-reviews-showcase__rating-fill {
        min-width: 4px;
    }
}


/* =========================================
   FEATURED STAGE
========================================= */

.vm-reviews-showcase__featured {
    position: relative;

    margin:
        0
        calc(var(--vm-reviews-gutter) * -1);

    padding:
        56px
        var(--vm-reviews-gutter)
        62px;

    background: var(--vm-reviews-slider-bg);
}

.vm-reviews-showcase .vm-reviews__stage {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 28%)
        minmax(0, 42%)
        minmax(0, 30%);

    align-items: stretch;
    min-height: 500px;
}


/* =========================================
   COLUMN 1 — HEADING
========================================= */

.vm-reviews-showcase .vm-reviews__heading {
    position: relative;
    padding: 18px 34px 70px 0;
}

.vm-reviews-showcase .vm-reviews__eyebrow {
    display: block;
    margin-bottom: 22px;

    color: var(--vm-reviews-red);

    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.16em;

    text-transform: uppercase;
}

.vm-reviews-showcase .vm-reviews__title {
    position: relative;
    z-index: 2;

    max-width: 290px;
    margin: 0;

    color: var(--vm-reviews-white);

    font-size: clamp(42px, 4vw, 68px);
    line-height: 0.94;
    font-weight: 500;
    letter-spacing: -0.045em;

    text-transform: uppercase;
}

.vm-reviews-showcase .vm-reviews__ghost-number {
    position: absolute;

    left: -8px;
    bottom: 72px;

    color: transparent;
    -webkit-text-stroke: 1px rgba(227, 6, 19, 0.22);

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 56%,
            rgba(0, 0, 0, 0.72) 74%,
            transparent 100%
        );
    mask-image:
        linear-gradient(
            to bottom,
            #000 0%,
            #000 56%,
            rgba(0, 0, 0, 0.72) 74%,
            transparent 100%
        );

    font-size: clamp(150px, 15vw, 250px);
    line-height: 0.75;
    font-weight: 500;
    letter-spacing: -0.08em;

    pointer-events: none;
    user-select: none;
}


/* =========================================
   PAGINATION
========================================= */

.vm-reviews-showcase .vm-reviews__dots {
    position: absolute;

    left: 0;
    bottom: 14px;

    display: flex;
    align-items: center;
    gap: 18px;
}

.vm-reviews-showcase .vm-reviews__dot {
    width: 10px;
    height: 10px;

    background: rgba(255, 255, 255, 0.42);

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.vm-reviews-showcase .vm-reviews__dot.is-active {
    background: var(--vm-reviews-red);
    transform: scale(1.1);
}


/* =========================================
   COLUMN 2 — INTERACTIVE MEDIA
========================================= */

.vm-reviews-showcase .vm-reviews__media {
    --vm-media-cut: 18%;
    --vm-media-control-zone: 27%;

    position: relative;

    grid-column: 2;
    min-width: 0;
    min-height: 500px;

    isolation: isolate;
    overflow: visible;
}

.vm-reviews-showcase .vm-reviews__media.is-expanded {
    --vm-media-cut: 0%;
}

.vm-reviews-showcase .vm-reviews__media-track {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}

.vm-reviews-showcase .vm-reviews__media-slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateX(80px) scale(0.95);

    transition:
        opacity 0.4s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.4s ease;
}

.vm-reviews-showcase
.vm-reviews[data-direction="prev"]
.vm-reviews__media-slide {
    transform: translateX(-80px) scale(0.95);
}

.vm-reviews-showcase .vm-reviews__media-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateX(0) scale(1);

    z-index: 2;
}

.vm-reviews-showcase .vm-reviews__media-slide.is-leaving {
    visibility: visible;
    transform: translateX(-75px) scale(0.86);

    z-index: 1;
}

.vm-reviews-showcase
.vm-reviews[data-direction="prev"]
.vm-reviews__media-slide.is-leaving {
    transform: translateX(75px) scale(0.86);
}


/* =========================================
   MEDIA FRAME / OUTLINE
========================================= */

.vm-reviews-showcase .vm-reviews__media-frame {
    position: absolute;
    inset: 0;

    isolation: isolate;
}

.vm-reviews-showcase .vm-reviews__media-frame::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(255, 255, 255, 0.20);

    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--vm-media-cut)) 100%,
        var(--vm-media-cut) 100%
    );

    transition:
        clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
    z-index: 0;
}

.vm-reviews-showcase .vm-reviews__media-outline {
    display: none;
}

.vm-reviews-showcase .vm-reviews__media-outline-shape {
    fill: none;

    stroke: rgba(255, 255, 255, 0.18);
    stroke-width: 1;

    vector-effect: non-scaling-stroke;

    transition: points 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================
   MEDIA MASK / IMAGE
========================================= */

.vm-reviews-showcase .vm-reviews__media-mask {
    position: absolute;
    inset: 1px;

    overflow: hidden;

    clip-path: polygon(
        0 0,
        100% 0,
        calc(100% - var(--vm-media-cut)) 100%,
        var(--vm-media-cut) 100%
    );

    transition:
        clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);

    z-index: 2;
}

.vm-reviews-showcase .vm-reviews__media-mask::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: var(--vm-media-control-zone);

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.02) 0%,
            rgba(255, 255, 255, 0.10) 38%,
            rgba(255, 255, 255, 0.20) 100%
        );

    pointer-events: none;
    z-index: 3;
}

.vm-reviews-showcase .vm-reviews__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================
   MEDIA ARROWS
========================================= */

.vm-reviews-showcase .vm-reviews__arrow {
    position: absolute;
    bottom: 0;

    width: var(--vm-media-cut);
    height: auto;
    aspect-ratio: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 0;
    background: transparent;

    cursor: pointer;

    z-index: 10;

    container-type: inline-size;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease,
        color 0.25s ease;
}

.vm-reviews-showcase .vm-reviews__arrow--prev {
    left: 0;
}

.vm-reviews-showcase .vm-reviews__arrow--next {
    right: 0;
}

.vm-reviews-showcase .vm-reviews__arrow span {
    width: 55cqi;
    aspect-ratio: 1;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;

    background-image: url("https://voxelmarket.pl/wp-content/uploads/2024/10/lnr-arrow-left.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 42%;

    filter: brightness(0) invert(1);

    font-size: 0;
}

.vm-reviews-showcase .vm-reviews__arrow--next span {
    transform: scaleX(-1);
}

/* =========================================
   MEDIA EXPAND / COLLAPSE TOGGLE
========================================= */

.vm-reviews-showcase .vm-reviews__media-toggle {
    position: absolute;

    left: var(--vm-media-cut);
    right: var(--vm-media-cut);
    bottom: 0;

    width: auto;
    height: var(--vm-media-control-zone);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    cursor: pointer;

    z-index: 11;
}

.vm-reviews-showcase .vm-reviews__media-toggle-icon {
    display: block;

    width: min(42%, 56px);
    aspect-ratio: 1;

    background-image: url("https://voxelmarket.pl/wp-content/uploads/2026/07/expand-horizontal-fill.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.78;

    transition:
        opacity 0.25s ease,
        transform 0.35s ease;
}

.vm-reviews-showcase .vm-reviews__media-toggle:hover
.vm-reviews__media-toggle-icon {
    opacity: 1;
}

.vm-reviews-showcase
.vm-reviews__media.is-expanded
.vm-reviews__media-toggle-icon {
    transform: rotate(180deg);
}


/* =========================================
   COLUMN 3 — CONTENT
========================================= */

.vm-reviews-showcase .vm-reviews__content-slider {
    position: relative;

    min-height: 500px;

    padding-left: 54px;
}

.vm-reviews-showcase .vm-reviews__content-track {
    height: 100%;
}

.vm-reviews-showcase .vm-reviews__content-slide {
    display: flex;
    flex-direction: column;
    justify-content: center;

    transform: translateX(70px);

    transition:
        opacity 0.36s ease,
        transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.36s ease;
}

.vm-reviews-showcase
.vm-reviews[data-direction="prev"]
.vm-reviews__content-slide {
    transform: translateX(-70px);
}

.vm-reviews-showcase .vm-reviews__content-slide.is-active {
    transform: translateX(0);
}

.vm-reviews-showcase .vm-reviews__content-slide.is-leaving {
    opacity: 0;
    transform: translateX(-60px);
}

.vm-reviews-showcase
.vm-reviews[data-direction="prev"]
.vm-reviews__content-slide.is-leaving {
    transform: translateX(60px);
}

.vm-reviews-showcase .vm-reviews__top {
    display: flex;
    align-items: center;
    gap: 34px;

    margin-bottom: 48px;
}

.vm-reviews-showcase .vm-reviews__number {
    position: relative;

    color: var(--vm-reviews-red);

    font-size: 52px;
    line-height: 0.8;
    font-weight: 500;
    letter-spacing: -0.06em;
}

.vm-reviews-showcase .vm-reviews__number::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -18px;

    width: 42px;
    height: 1px;

    background: var(--vm-reviews-red);
}

.vm-reviews-showcase .vm-reviews__stars {
    color: var(--vm-reviews-red);

    font-size: 13px;
    letter-spacing: 0.1em;
}

.vm-reviews-showcase .vm-reviews__quote {
    display: block;

    margin-bottom: 7px;

    color: var(--vm-reviews-red);

    font-family: Georgia, serif;
    font-size: 45px;
    line-height: 0.7;
}

.vm-reviews-showcase .vm-reviews__text {
    max-width: 330px;
    margin: 0;

    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    color: rgba(255, 255, 255, 0.76);

    font-size: 17px;
    line-height: 1.55;

    cursor: pointer;
}

.vm-reviews-showcase .vm-reviews__text-panel {
    position: relative;
    z-index: 4;

    max-width: 340px;

    transition:
        background-color 0.25s ease,
        box-shadow 0.25s ease;
}

.vm-reviews-showcase .vm-reviews__text-panel.is-expanded {
    z-index: 20;

    margin: -10px;
    padding: 10px;

    background: var(--vm-reviews-bg);
    box-shadow: 0 18px 0 var(--vm-reviews-bg);
}

.vm-reviews-showcase
.vm-reviews__text-panel.is-expanded
.vm-reviews__text {
    display: block;
    overflow: visible;

    -webkit-line-clamp: initial;
}

.vm-reviews-showcase
.vm-reviews__content-slide.is-text-expanded {
    overflow: visible;
    z-index: 30;
}

.vm-reviews-showcase .vm-reviews__text-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 10px;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--vm-reviews-red);

    font: inherit;
    font-size: 9px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.08em;

    text-transform: uppercase;
    cursor: pointer;
}

.vm-reviews-showcase .vm-reviews__text-more-icon {
    font-size: 14px;
    line-height: 0.8;
}

.vm-reviews-showcase .vm-reviews__text::after {
    content: "";

    display: block;

    width: 54px;
    height: 1px;

    margin-top: 30px;

    background: var(--vm-reviews-line);
}


/* =========================================
   AUTHOR
========================================= */

.vm-reviews-showcase .vm-reviews__author {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 28px;
}

.vm-reviews-showcase .vm-reviews__avatar {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    color: #fff;

    font-size: 13px;
}

.vm-reviews-showcase .vm-reviews__author-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vm-reviews-showcase .vm-reviews__author-copy strong {
    color: #fff;

    font-size: 14px;
    font-weight: 500;
}

.vm-reviews-showcase .vm-reviews__author-copy small {
    color: var(--vm-reviews-muted);
    font-size: 10px;
}


/* =========================================
   MORE BUTTON
========================================= */

.vm-reviews-showcase .vm-reviews__more {
    position: absolute;

    right: 0;
    bottom: 11px;

    display: inline-flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    width: auto;
    min-width: 0;

    padding: 0;

    border: 0;
    background: transparent;

    color: #fff;

    font-size: 5px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.12em;

    text-decoration: none;
    text-transform: uppercase;

    white-space: nowrap;

    z-index: 5;

    transition:
        color 0.25s ease,
        opacity 0.25s ease;
}

.vm-reviews-showcase .vm-reviews__more:hover {
    background-color: rgba(227, 6, 19, 0.08);
}

.vm-reviews-showcase .vm-reviews__more span:last-child {
    width: 8px;
    height: 8px;

    margin-left: 0;

    background-image: url("https://voxelmarket.pl/wp-content/uploads/2026/07/chevron-down-1.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;


    font-size: 0;

    transition: transform 0.35s ease;
}

.vm-reviews-showcase.is-editorial-open
.vm-reviews__more span:last-child {
    transform: rotate(180deg);
}


/* =========================================
   EDITORIAL REVEAL
========================================= */

.vm-reviews-showcase__editorial-reveal {
    margin-inline:
        calc(var(--vm-reviews-gutter) * -1);
    padding-inline: var(--vm-reviews-gutter);

    max-height: 0;
    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-28px);

    background-color: var(--vm-reviews-editorial-bg);
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.07) 0 0.7px,
            transparent 0.8px
        );
    background-size: 10px 10px;

    transition:
        max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.42s ease,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0.8s;
}

.vm-reviews-showcase.is-editorial-open
.vm-reviews-showcase__editorial-reveal {
    max-height: 900px;

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    transition:
        max-height 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.42s ease 0.08s,
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}


/* =========================================
   EDITORIAL STAGE
========================================= */

.vm-reviews-showcase__editorial {
    position: relative;

    min-height: 720px;
    padding: 40px 0 0;
}

.vm-reviews-showcase__rating-ghost {
    position: absolute;

    top: 0;
    left: -25px;

    color: transparent;
    -webkit-text-stroke: 1px rgba(227, 6, 19, 0.23);

    font-size: clamp(190px, 24vw, 390px);
    line-height: 0.75;
    font-weight: 500;
    letter-spacing: -0.1em;

    pointer-events: none;
    user-select: none;
}

.vm-reviews-showcase__rating-ghost > span {
    display: block;
}

.vm-reviews-showcase__editorial-grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 28px;

    z-index: 2;
}


/* =========================================
   EDITORIAL REVIEW 1
========================================= */

.vm-reviews-showcase__editorial-review--1 {
    grid-column: 3 / 11;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.25fr);

    align-items: stretch;

    min-height: 360px;
}

.vm-reviews-showcase__editorial-review--1
.vm-reviews-showcase__editorial-media {
    grid-column: 1;
}

.vm-reviews-showcase__editorial-review--1
.vm-reviews-showcase__editorial-copy {
    grid-column: 2;
    padding: 42px 50px;
}


/* =========================================
   EDITORIAL REVIEW 2
========================================= */

.vm-reviews-showcase__editorial-review--2 {
    grid-column: 2 / 12;

    display: grid;
    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(0, 0.8fr);

    min-height: 240px;

    border: 1px solid var(--vm-reviews-line);
}

.vm-reviews-showcase__editorial-review--2
.vm-reviews-showcase__editorial-copy {
    grid-column: 1;
    grid-row: 1;

    padding: 44px 56px;
}

.vm-reviews-showcase__editorial-review--2
.vm-reviews-showcase__editorial-media {
    grid-column: 2;
    grid-row: 1;
}


/* =========================================
   EDITORIAL COMMON
========================================= */

.vm-reviews-showcase__editorial-media {
    min-width: 0;
    overflow: hidden;
}

.vm-reviews-showcase__editorial-media img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.vm-reviews-showcase__editorial-copy {
    position: relative;

    background: transparent;
}

.vm-reviews-showcase__editorial-stars {
    display: block;

    margin-bottom: 30px;

    color: var(--vm-reviews-red);

    font-size: 15px;
    letter-spacing: 0.1em;
}

.vm-reviews-showcase__editorial-quote {
    position: absolute;

    top: 28px;
    right: 34px;

    color: transparent;
    -webkit-text-stroke: 1px rgba(227, 6, 19, 0.3);

    font-family: Georgia, serif;
    font-size: 96px;
    line-height: 1;

    pointer-events: none;
}

.vm-reviews-showcase__editorial-copy p {
    position: relative;
    z-index: 2;

    max-width: 480px;
    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: clamp(20px, 2vw, 31px);
    line-height: 1.38;
    letter-spacing: -0.025em;
}

.vm-reviews-showcase__editorial-review--2
.vm-reviews-showcase__editorial-text {
    display: -webkit-box;
    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.vm-reviews-showcase__editorial-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 13px;
    padding: 0;

    border: 0;
    background: transparent;

    color: var(--vm-reviews-red);

    font: inherit;
    font-size: 9px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.08em;

    text-transform: uppercase;
    cursor: pointer;
}

.vm-reviews-showcase__editorial-more span:last-child {
    font-size: 12px;
}

.vm-reviews-showcase__editorial-author {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 36px;
}

.vm-reviews-showcase__editorial-avatar {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;

    color: #fff;

    font-size: 13px;
}

.vm-reviews-showcase__editorial-author > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.vm-reviews-showcase__editorial-author strong {
    color: #fff;

    font-size: 14px;
    font-weight: 500;
}

.vm-reviews-showcase__editorial-author small {
    color: var(--vm-reviews-muted);
    font-size: 10px;
}


/* =========================================
   MOBILE — REFERENCE COMPOSITION
========================================= */

@media (max-width: 767px) {

    .vm-reviews-showcase {
        --vm-reviews-gutter: 22px;

        padding:
            0
            var(--vm-reviews-gutter)
            28px;
    }


    /* =====================================
       FEATURED STAGE — REFERENCE GEOMETRY
    ===================================== */

    .vm-reviews-showcase__featured {
        margin:
            0
            calc(var(--vm-reviews-gutter) * -1);

        padding:
            12px
            var(--vm-reviews-gutter)
            14px;

        border-top: 1px solid rgba(255, 255, 255, 0.055);
    }

    .vm-reviews-showcase.is-editorial-open
    .vm-reviews-showcase__editorial-reveal {
        max-height: 360px;
    }

    .vm-reviews-showcase .vm-reviews__stage {
        grid-template-columns:
            minmax(0, 29%)
            minmax(0, 36%)
            minmax(0, 35%);

        grid-template-rows: 148px;

        min-height: 148px;
    }


    /* =====================================
       COLUMN 1 — HEADING
    ===================================== */

    .vm-reviews-showcase .vm-reviews__heading {
        grid-column: 1;
        grid-row: 1;

        min-width: 0;

        margin: 0;
        padding: 5px 8px 0 0;
    }

    .vm-reviews-showcase .vm-reviews__eyebrow {
        margin: 0 0 8px;

        font-size: 4.5px;
        letter-spacing: 0.16em;

        white-space: nowrap;
    }

    .vm-reviews-showcase .vm-reviews__title {
        width: 128%;
        max-width: 112px;

        font-size: 14.5px;
        line-height: 0.93;

        letter-spacing: -0.04em;

        transform: scaleX(0.78);
        transform-origin: left top;
    }

    .vm-reviews-showcase .vm-reviews__ghost-number {
        top: 82px;
        left: -1px;
        bottom: auto;

        font-size: 78px;
        line-height: 0.72;

        -webkit-text-stroke: 1px rgba(227, 6, 19, 0.22);
    }


    /* =====================================
       PAGINATION
    ===================================== */

    .vm-reviews-showcase
    .vm-reviews__heading
    .vm-reviews__dots {
        left: 0;
        bottom: 8px;

        gap: 8px;
    }

    .vm-reviews-showcase .vm-reviews__dot {
        width: 5px;
        height: 5px;
    }

    .vm-reviews-showcase .vm-reviews__dot.is-active {
        transform: none;
    }


    /* =====================================
       COLUMN 2 — INTERACTIVE MEDIA
    ===================================== */

    .vm-reviews-showcase .vm-reviews__media {
        --vm-media-cut: 22%;
        --vm-media-control-zone: 28%;

        grid-column: 2;
        grid-row: 1;

        width: 100%;
        height: 140px;
        min-height: 140px;
    }

    .vm-reviews-showcase .vm-reviews__media.is-expanded {
        --vm-media-cut: 0%;
    }

    .vm-reviews-showcase .vm-reviews__media-slide {
        transform: translateX(28px) scale(0.94);

        transition:
            opacity 0.34s ease,
            transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.34s ease;
    }

    .vm-reviews-showcase
    .vm-reviews[data-direction="prev"]
    .vm-reviews__media-slide {
        transform: translateX(-28px) scale(0.94);
    }

    .vm-reviews-showcase .vm-reviews__media-slide.is-active {
        transform: translateX(0) scale(1);
    }

    .vm-reviews-showcase .vm-reviews__media-slide.is-leaving {
        transform: translateX(-24px) scale(0.86);
    }

    .vm-reviews-showcase
    .vm-reviews[data-direction="prev"]
    .vm-reviews__media-slide.is-leaving {
        transform: translateX(24px) scale(0.86);
    }


    /* FRAME / OUTLINE */

    .vm-reviews-showcase .vm-reviews__media-outline {
        inset: -3px;

        width: calc(100% + 6px);
        height: calc(100% + 6px);
    }

    .vm-reviews-showcase .vm-reviews__media-outline-shape {
        stroke: rgba(255, 255, 255, 0.18);
        stroke-width: 1;
    }


    /* MASK */

    .vm-reviews-showcase .vm-reviews__media-mask {
        clip-path: polygon(
            0 0,
            100% 0,
            calc(100% - var(--vm-media-cut)) 100%,
            var(--vm-media-cut) 100%
        );
    }


    /* ARROWS */

    .vm-reviews-showcase .vm-reviews__arrow {
        bottom: 0;

        width: var(--vm-media-cut);
        height: auto;
        aspect-ratio: 1;
        box-sizing: border-box;
    }

    .vm-reviews-showcase .vm-reviews__arrow--prev {
        left: 0;
    }

    .vm-reviews-showcase .vm-reviews__arrow--next {
        right: 0;
    }


    /* TOGGLE */

    .vm-reviews-showcase .vm-reviews__media-toggle {
        left: var(--vm-media-cut);
        right: var(--vm-media-cut);
        bottom: 0;

        width: auto;
        height: var(--vm-media-control-zone);
    }

    .vm-reviews-showcase .vm-reviews__media-toggle-icon {
        width: min(42%, 28px);
        height: auto;
        aspect-ratio: 1;
    }


    /* =====================================
       COLUMN 3 — REVIEW
    ===================================== */

    .vm-reviews-showcase .vm-reviews__content-slider {
        grid-column: 3;
        grid-row: 1;

        width: 100%;
        height: 148px;
        min-height: 148px;

        padding: 5px 0 30px 10px;

        overflow: visible;
        z-index: 4;
    }

    .vm-reviews-showcase .vm-reviews__content-track {
        overflow: visible;
    }

    .vm-reviews-showcase .vm-reviews__content-slide {
        justify-content: flex-start;

        transform: translateX(24px);

        transition:
            opacity 0.3s ease,
            transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.3s ease;
    }

    .vm-reviews-showcase
    .vm-reviews[data-direction="prev"]
    .vm-reviews__content-slide {
        transform: translateX(-24px);
    }

    .vm-reviews-showcase .vm-reviews__content-slide.is-active {
        transform: translateX(0);
    }

    .vm-reviews-showcase .vm-reviews__content-slide.is-leaving {
        transform: translateX(-20px);
    }

    .vm-reviews-showcase
    .vm-reviews[data-direction="prev"]
    .vm-reviews__content-slide.is-leaving {
        transform: translateX(20px);
    }

    .vm-reviews-showcase .vm-reviews__top {
        align-items: flex-start;

        gap: 9px;
        margin: 0 0 7px;
    }

    .vm-reviews-showcase .vm-reviews__number {
        flex: 0 0 auto;

        font-size: 21px;
        line-height: 0.8;
    }

    .vm-reviews-showcase .vm-reviews__number::after {
        bottom: -7px;

        width: 18px;
    }

    .vm-reviews-showcase .vm-reviews__stars {
        padding-top: 2px;

        font-size: 6px;
        line-height: 1;
        letter-spacing: 0.05em;

        white-space: nowrap;
    }

    .vm-reviews-showcase .vm-reviews__quote {
        display: block;

        width: auto;
        height: auto;

        margin: 0 0 1px;

        color: var(--vm-reviews-red);

        font-family: Georgia, serif;
        font-size: 15px;
        line-height: 0.7;
    }
    .vm-reviews-showcase .vm-reviews__text {
        width: 100%;
        max-width: 102px;

        font-size: clamp(6.8px, 1.85vw, 8px);
        line-height: 1.32;
    }

    .vm-reviews-showcase .vm-reviews__text-panel {
        width: 100%;
        max-width: 102px;
    }

    .vm-reviews-showcase
    .vm-reviews__text-panel.is-expanded {
        width: calc(100% + 14px);
        min-height: 124px;

        margin: -4px -9px 0 -6px;
        padding: 4px 9px 14px 6px;

        background: var(--vm-reviews-bg);
        box-shadow:
            0 14px 0 var(--vm-reviews-bg),
            -8px 0 0 var(--vm-reviews-bg);
    }

    .vm-reviews-showcase .vm-reviews__text-more {
        gap: 5px;

        margin-top: 6px;

        font-size: clamp(5.5px, 1.65vw, 7px);
        letter-spacing: 0.06em;
    }

    .vm-reviews-showcase .vm-reviews__text-more-icon {
        font-size: 10px;
    }

    .vm-reviews-showcase .vm-reviews__text::after {
        width: 32px;

        margin-top: 8px;
    }


    /* =====================================
       AUTHOR
    ===================================== */

    .vm-reviews-showcase .vm-reviews__author {
        gap: 6px;
        margin-top: 6px;
    }

    .vm-reviews-showcase .vm-reviews__avatar {
        width: 22px;
        height: 22px;

        font-size: 7px;
    }

    .vm-reviews-showcase .vm-reviews__author-copy {
        gap: 3px;
        min-width: 0;
    }

    .vm-reviews-showcase .vm-reviews__author-copy strong {
        font-size: 8px;
        line-height: 1;
    }

    .vm-reviews-showcase .vm-reviews__author-copy small {
        font-size: clamp(5.5px, 1.55vw, 6.5px);
        line-height: 1.2;
    }


    /* =====================================
       MORE
    ===================================== */

    .vm-reviews-showcase .vm-reviews__more {
        right: 0;
        bottom: 6px;

        width: calc(27% - 13px);
        min-width: 0;

        padding: 6px 6px;

        gap: 5px;

        font-size: clamp(5.5px, 1.55vw, 6.5px);
        letter-spacing: 0.12em;
    }

    .vm-reviews-showcase
    .vm-reviews__more span:last-child {
        width: 10px;
        height: 10px;

        font-size: 0;
    }


    /* =====================================
       EDITORIAL CANVAS
    ===================================== */

    .vm-reviews-showcase__editorial {
        width: 100%;
        height: auto;
        min-height: 0;

        padding: 14px 0 18px;

        overflow: visible;
    }

    .vm-reviews-showcase__rating-ghost {
        top: 12px;
        left: -5px;

        display: flex;
        flex-direction: column;
        gap: 2px;

        font-size: clamp(92px, 27vw, 112px);
        line-height: 0.7;

        -webkit-text-stroke: 1px rgba(227, 6, 19, 0.22);

        z-index: 0;
    }

    .vm-reviews-showcase__editorial-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;

        width: 100%;
        height: auto;

        z-index: 2;
    }


    /* =====================================
       REVIEW 02
    ===================================== */

    .vm-reviews-showcase__editorial-review--1 {
        position: relative;

        top: auto;
        left: auto;

        margin-left: 18%;
        width: 77%;
        height: clamp(126px, 34vw, 140px);
        min-height: 0;

        display: grid;
        grid-template-columns: 46% 54%;
    }

    .vm-reviews-showcase__editorial-review--1
    .vm-reviews-showcase__editorial-media {
        grid-column: 1;

        width: 100%;
        height: 100%;
    }

    .vm-reviews-showcase__editorial-review--1
    .vm-reviews-showcase__editorial-copy {
        grid-column: 2;

        padding:
            clamp(12px, 3.5vw, 16px)
            clamp(10px, 3.2vw, 14px);
    }


    /* =====================================
       REVIEW 03
    ===================================== */

    .vm-reviews-showcase__editorial-review--2 {
        position: relative;

        left: auto;
        bottom: auto;

        margin-left: 5%;
        width: 91%;
        height: clamp(116px, 31vw, 132px);
        min-height: 0;

        display: grid;
        grid-template-columns: 61% 39%;

        border: 1px solid var(--vm-reviews-line);
    }

    .vm-reviews-showcase__editorial-review--2
    .vm-reviews-showcase__editorial-copy {
        grid-column: 1;
        grid-row: 1;

        padding:
            clamp(9px, 2.7vw, 12px)
            clamp(14px, 4.5vw, 20px);
    }

    .vm-reviews-showcase__editorial-review--2
    .vm-reviews-showcase__editorial-media {
        grid-column: 2;
        grid-row: 1;

        width: 100%;
        height: 100%;
    }


    /* =====================================
       EDITORIAL COMMON
    ===================================== */

    .vm-reviews-showcase__editorial-copy {
        background: transparent;
    }

    .vm-reviews-showcase__editorial-stars {
        margin-bottom: 8px;

        font-size: 7px;
        letter-spacing: 0.06em;
    }

    .vm-reviews-showcase__editorial-copy p {
        max-width: 100%;

        font-size: clamp(8px, 2.35vw, 10px);
        line-height: 1.48;
    }

    .vm-reviews-showcase__editorial-quote {
        top: 11px;
        right: 10px;

        font-size: 45px;
    }

    .vm-reviews-showcase__editorial-author {
        gap: 7px;

        margin-top: 8px;
    }

    .vm-reviews-showcase__editorial-avatar {
        width: 22px;
        height: 22px;

        font-size: 7px;
    }

    .vm-reviews-showcase__editorial-author strong {
        font-size: 8px;
    }

    .vm-reviews-showcase__editorial-author small {
        font-size: 5px;
    }

    .vm-reviews-showcase__editorial-review--1
    .vm-reviews-showcase__editorial-text {
        display: -webkit-box;
        overflow: hidden;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .vm-reviews-showcase__editorial-review--2
    .vm-reviews-showcase__editorial-stars {
        margin-bottom: 4px;
    }

    .vm-reviews-showcase__editorial-review--2
    .vm-reviews-showcase__editorial-author {
        margin-top: 6px;
    }

    .vm-reviews-showcase__editorial-more {
        gap: 5px;

        margin-top: 6px;

        font-size: clamp(5.5px, 1.7vw, 7px);
        letter-spacing: 0.06em;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 360px) {

    .vm-reviews-showcase {
        --vm-reviews-gutter: 16px;

        padding-right: 16px;
        padding-left: 16px;
    }

    .vm-reviews-showcase__stats-inner {
        grid-template-columns:
            minmax(0, 1fr)
            1px
            minmax(0, 1fr);

        column-gap: 8px;
    }

    .vm-reviews-showcase__reviews-link {
        gap: 4px;
        padding-right: 8px;
        padding-left: 9px;
    }

    .vm-reviews-showcase .vm-reviews__heading {
        padding-right: 7px;
    }

    .vm-reviews-showcase .vm-reviews__content-slider {
        padding-left: 9px;
    }
}