/*  THE PRODUCT PAGE'S PHOTO VIEWER (pdp-viewer.js): «تصاویر رسمی» and «تصاویر خریداران».
    Phone: the whole screen in white - the close button and the count, the tabs, the photos to swipe,
    the review under a buyer's photo, a row of tiles at the bottom.
    Desktop: a window over the page - the head with the title, the tabs and the count; the photo with
    its arrows on the right, a 340px column on the left with the review and the tiles.  */

.tc-pv {
    --pv-ink: #0C0C0C;
    --pv-text: #3F4064;
    --pv-muted: #81858B;
    --pv-line: #EDEDEF;
    --pv-soft: #F5F5F6;
    --pv-accent: #EF4056;
    --pv-star: #F9BC00;
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: none;
    direction: rtl;
    font-family: inherit;
    color: var(--pv-text);
    -webkit-tap-highlight-color: transparent;
}

.tc-pv.is-open { display: block; }
.tc-pv *, .tc-pv *::before, .tc-pv *::after { box-sizing: border-box; }
.tc-pv button { font: inherit; color: inherit; cursor: pointer; }
.tc-pv [hidden] { display: none !important; }

.tc-pv__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #FFF;
}

/* ---- head --------------------------------------------------------------- */
.tc-pv__head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "close titles count" "tabs tabs tabs";
    align-items: center;
    gap: 8px 12px;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--pv-line);
}

.tc-pv__close {
    grid-area: close;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pv-soft);
    color: var(--pv-ink);
}

.tc-pv__titles { grid-area: titles; min-width: 0; }

.tc-pv .tc-pv__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color: var(--pv-ink);
}

/* the product's name: Latin digits, as everywhere a name is shown ("X7", not "X۷") */
.tc-pv__sub {
    margin: 0;
    overflow: hidden;
    font-family: yekanbakhen, yekanbakh, tahoma, sans-serif;
    font-size: 12px;
    line-height: 20px;
    color: var(--pv-muted);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-pv__count {
    grid-area: count;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--pv-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 20px;
    color: var(--pv-text);
    white-space: nowrap;
}

/* the tabs: two words with a red bar under the open one */
.tc-pv__tabs {
    grid-area: tabs;
    display: flex;
    gap: 20px;
    margin-top: 2px;
}

.tc-pv .tc-pv__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px 12px;
    border: 0;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--pv-muted);
}

.tc-pv .tc-pv__tab.is-on {
    font-weight: 700;
    color: var(--pv-ink);
}

.tc-pv__tab.is-on::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pv-accent);
}

.tc-pv__tab-n {
    min-width: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--pv-soft);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--pv-text);
}

.tc-pv__tab.is-on .tc-pv__tab-n {
    background: var(--pv-ink);
    color: #FFF;
}

/* ---- body: the photos, the review, the tiles ------------------------------ */
.tc-pv__body {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.tc-pv__stage {
    position: relative;
    flex: 1;
    min-height: 0;
}

.tc-pv__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.tc-pv__track::-webkit-scrollbar { display: none; }

/* a zoomed photo holds the track still: the finger pans the photo instead */
.tc-pv.is-zoomed .tc-pv__track {
    overflow: hidden;
    touch-action: none;
}

.tc-pv__slide {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.tc-pv__zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tc-pv__img,
.tc-pv__video {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform .2s ease;
}

.tc-pv.is-zoomed .tc-pv__img { transition: none; }

/* a photo on its way: a square skeleton where it will be (the slide loses is-wait once it has loaded) */
.tc-pv__slide.is-wait .tc-pv__zoom {
    position: relative;
}

.tc-pv__slide.is-wait .tc-pv__zoom::before {
    content: "";
    height: min(100%, calc(100vw - 24px));
    max-width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--pv-soft) 0%, #FBFBFC 50%, var(--pv-soft) 100%);
    background-size: 200% 100%;
    animation: tc-pv-shimmer 1.2s linear infinite;
}

.tc-pv__slide.is-wait .tc-pv__img {
    position: absolute;
    opacity: 0;
}

@keyframes tc-pv-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* sized by pdp-viewer.js (fitVideo) to the video's own proportions; unseen until then, so the
   default wide player never shows and nothing jumps when it plays */
.tc-pv__video {
    background: #000;
    opacity: 0;
    transition: opacity .25s ease;
}

.tc-pv__video.is-ready {
    opacity: 1;
}

/* while the size is on its way: a quiet ring where the video will be */
.tc-pv__slide:has(> .tc-pv__video:not(.is-ready)) {
    position: relative;
}

.tc-pv__slide:has(> .tc-pv__video:not(.is-ready))::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 2px solid rgba(12, 12, 12, .12);
    border-top-color: rgba(12, 12, 12, .55);
    border-radius: 50%;
    animation: tc-pv-spin .8s linear infinite;
}

@keyframes tc-pv-spin {
    to {
        transform: rotate(360deg);
    }
}

/* the arrows: white rounds on the photo's sides (desktop) */
.tc-pv__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    padding: 0;
    border: 1px solid var(--pv-line);
    border-radius: 50%;
    background: rgba(255, 255, 255, .94);
    color: var(--pv-ink);
    box-shadow: 0 4px 14px rgba(12, 12, 12, .08);
    transition: opacity .15s ease, background-color .15s ease;
}

.tc-pv__nav:hover { background: #FFF; }
.tc-pv__nav:disabled { opacity: 0; pointer-events: none; }
.tc-pv__nav--prev { right: 16px; }
.tc-pv__nav--next { left: 16px; }

.tc-pv__side {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ---- the review that came with a buyer's photo ---------------------------- */
.tc-pv__review {
    margin: 0 12px 10px;
    padding: 12px 14px;
    border: 1px solid var(--pv-line);
    border-radius: 14px;
    background: #FFF;
}

.tc-pv__who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-pv__avatar {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #F0F0F1;
    font-size: 15px;
    font-weight: 700;
    color: var(--pv-text);
}

.tc-pv__who-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tc-pv__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: var(--pv-ink);
    white-space: nowrap;
}

.tc-pv__buyer {
    padding: 0 8px;
    border-radius: 999px;
    background: #E8F6EE;
    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    color: #00875A;
}

.tc-pv__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tc-pv__stars { display: inline-flex; gap: 1px; }
.tc-pv__star svg { display: block; fill: #E0E0E2; }
.tc-pv__star.is-on svg { fill: var(--pv-star); }

.tc-pv__date {
    font-size: 11px;
    line-height: 18px;
    color: var(--pv-muted);
}

.tc-pv__text {
    display: -webkit-box;
    margin: 10px 0 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 24px;
    color: var(--pv-text);
    white-space: pre-line;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.tc-pv__review.is-open .tc-pv__text {
    display: block;
    max-height: 30vh;
    overflow-y: auto;
}

.tc-pv .tc-pv__more {
    margin: 4px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 12px;
    font-weight: 700;
    color: #1672DD;
}

/* ---- the tiles ----------------------------------------------------------- */
.tc-pv__thumbs {
    display: flex;
    gap: 8px;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    border-top: 1px solid var(--pv-line);
    scrollbar-width: none;
}

.tc-pv__thumbs::-webkit-scrollbar { display: none; }

.tc-pv .tc-pv__thumb {
    position: relative;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    padding: 3px;
    overflow: hidden;
    border: 1px solid var(--pv-line);
    border-radius: 10px;
    background: #FFF;
    transition: border-color .15s ease;
}

.tc-pv .tc-pv__thumb.is-on {
    border: 2px solid var(--pv-ink);
    padding: 2px;
}

.tc-pv__thumb img,
.tc-pv__thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
    pointer-events: none;
}

.tc-pv__thumb video { background: #1F1F23; }

.tc-pv__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    background: rgba(12, 12, 12, .22);
    border-radius: 7px;
}

/* ---- desktop: a window ------------------------------------------------------ */
@media (min-width: 960px) {
    .tc-pv {
        background: rgba(17, 17, 20, .5);
    }

    .tc-pv.is-open {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px;
    }

    .tc-pv__panel {
        width: min(1320px, 100%);
        height: min(880px, 100%);
        overflow: hidden;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(17, 17, 20, .24);
        animation: tc-pv-in .18s ease-out;
    }

    .tc-pv__head {
        grid-template-columns: 1fr auto auto auto;
        grid-template-areas: "titles tabs count close";
        gap: 16px;
        padding: 16px 24px 0;
    }

    .tc-pv__titles { padding-bottom: 14px; }
    .tc-pv .tc-pv__title { font-size: 17px; line-height: 28px; }
    .tc-pv__sub { font-size: 13px; }
    .tc-pv__tabs { align-self: end; gap: 24px; margin: 0; }
    .tc-pv .tc-pv__tab { padding: 8px 2px 14px; font-size: 14px; }
    .tc-pv__count { margin-bottom: 14px; }
    .tc-pv__close { margin-bottom: 14px; }

    .tc-pv__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    .tc-pv__slide { padding: 24px 72px; }
    .tc-pv__nav { display: inline-flex; }

    .tc-pv__img { cursor: zoom-in; }
    .tc-pv.is-zoomed .tc-pv__img { cursor: zoom-out; }

    /* the column: the review on top, then every tile of the tab in three columns */
    .tc-pv__side {
        padding: 20px 20px 0;
        overflow-y: auto;
        border-right: 1px solid var(--pv-line);
    }

    .tc-pv__review {
        margin: 0 0 16px;
        padding: 16px;
        background: #FAFAFB;
    }

    /* the column scrolls: the whole text, no "بیشتر" */
    .tc-pv__text {
        display: block;
        -webkit-line-clamp: unset;
    }

    .tc-pv .tc-pv__more { display: none; }

    .tc-pv__thumbs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-content: start;
        gap: 10px;
        padding: 0 0 20px;
        overflow: visible;
        border-top: 0;
    }

    .tc-pv .tc-pv__thumb {
        width: auto;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .tc-pv .tc-pv__thumb:hover { border-color: #C2C3C7; }
    .tc-pv .tc-pv__thumb.is-on { border-color: var(--pv-ink); }
}

@keyframes tc-pv-in {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

/* phone: the whole screen slides up */
@media (max-width: 959px) {
    .tc-pv.is-open .tc-pv__panel { animation: tc-pv-up .22s ease-out; }
}

@keyframes tc-pv-up {
    from { opacity: .6; transform: translateY(24px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-pv__panel { animation: none !important; }
    .tc-pv__img { transition: none; }
    .tc-pv__slide.is-wait .tc-pv__zoom::before { animation: none; }
}

/* a product video on a host's player (Aparat, YouTube): the slide's whole box, 16:9 at most */
.tc-pv__frame {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border: 0;
    border-radius: 8px;
    background: #17191c;
}

/* ==========================================================================
   The colour switcher (pdp-viewer.js), in the viewer only: noon's "View cart" pill - the first
   colours' photos in a stack and how many there are - over the foot of the photo. It opens one short
   row of every colour (its photo, its name, how many photos), «همه تصاویر» first, scrolling sideways
   with soft edges where more is hidden and an arrow at either end, and a close button. A photo is a
   skeleton until it has loaded.
   ========================================================================== */
.tc-pv__vs {
    position: absolute;
    inset: auto 0 0;
    z-index: 3;
    display: flex;
    justify-content: center;
    padding: 0 12px 20px;
    pointer-events: none;
}

.tc-pv__vs > * { pointer-events: auto; }

/* ---- the pill ---- */
.tc-pv .tc-pv__vpill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: 0;
    padding: 5px;
    padding-inline-end: 8px;
    border: 0;
    border-radius: 999px;
    background: var(--pv-accent);
    color: #FFF;
    font-family: yekanbakh, tahoma, sans-serif;
    text-align: right;
    box-shadow: 0 10px 26px rgba(239, 64, 86, .32), 0 2px 6px rgba(17, 17, 20, .12);
    transition: transform .15s ease, box-shadow .15s ease;
}

.tc-pv .tc-pv__vpill:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(239, 64, 86, .38), 0 2px 6px rgba(17, 17, 20, .12); }
.tc-pv .tc-pv__vpill:active { transform: scale(.98); }

.tc-pv__vfaces {
    display: inline-flex;
    flex: none;
    align-items: center;
}

.tc-pv__vface {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    overflow: hidden;
    border: 2px solid #FFF;
    border-radius: 50%;
    background: #F5F5F6;
}

.tc-pv__vface + .tc-pv__vface { margin-inline-start: -16px; }

/* the first colour on top of the stack */
.tc-pv__vface:nth-child(1) { z-index: 3; }
.tc-pv__vface:nth-child(2) { z-index: 2; }
.tc-pv__vface:nth-child(3) { z-index: 1; }

.tc-pv__vface img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease;
}

.tc-pv__vtext {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-inline-end: 4px;
}

.tc-pv__vline {
    overflow: hidden;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-pv__vsub {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    color: rgba(255, 255, 255, .86);
    white-space: nowrap;
}

/* a drawn dot: a "·" beside a Persian digit reads as a zero */
.tc-pv__vsep {
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 6px;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

.tc-pv__vchev {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

/* ---- the row: [arrow] colours [arrow] [close] ---- */
.tc-pv__vpanel {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    max-width: min(760px, 100%); /* as wide as its colours, up to this */
    padding: 6px;
    border: 1px solid var(--pv-line);
    border-radius: 999px;
    background: #FFF;
    box-shadow: 0 14px 36px rgba(17, 17, 20, .16);
    animation: tc-pv-vs-in .2s ease-out;
}

.tc-pv__vpanel[hidden] { display: none; }

@keyframes tc-pv-vs-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.tc-pv .tc-pv__vstep,
.tc-pv .tc-pv__vclose {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--pv-line);
    border-radius: 50%;
    background: #FFF;
    color: var(--pv-ink);
    transition: opacity .15s ease, background-color .15s ease;
}

.tc-pv .tc-pv__vstep:hover:not(:disabled),
.tc-pv .tc-pv__vclose:hover { background: var(--pv-soft); }
.tc-pv .tc-pv__vstep:disabled { opacity: .35; cursor: default; }
.tc-pv__vstep svg, .tc-pv__vclose svg { width: 18px; height: 18px; }

/* the close button set apart from the arrows */
.tc-pv .tc-pv__vclose {
    margin-inline-start: 2px;
    border-color: transparent;
    background: var(--pv-soft);
}

/* every colour fits: no arrows */
.tc-pv__vpanel.is-fit .tc-pv__vstep { display: none; }

.tc-pv__vwrap {
    position: relative;
    flex: 1;
    min-width: 0;
}

.tc-pv__vrow {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tc-pv__vrow::-webkit-scrollbar { display: none; }

/* soft edges where more of the row is hidden: the row starts on the right */
.tc-pv__vwrap::before,
.tc-pv__vwrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.tc-pv__vwrap::before { right: 0; background: linear-gradient(to left, #FFF 10%, rgba(255, 255, 255, 0)); }
.tc-pv__vwrap::after { left: 0; background: linear-gradient(to right, #FFF 10%, rgba(255, 255, 255, 0)); }
.tc-pv__vwrap.has-before::before,
.tc-pv__vwrap.has-after::after { opacity: 1; }

/* ---- a colour: its photo, its name and how many photos, side by side ---- */
.tc-pv .tc-pv__vchip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 3px;
    padding-inline-end: 14px;
    border: 1px solid var(--pv-line);
    border-radius: 999px;
    background: #FFF;
    text-align: right;
    scroll-snap-align: start;
    transition: border-color .15s ease, background-color .15s ease;
}

.tc-pv .tc-pv__vchip:hover { border-color: #D9DADD; }

.tc-pv .tc-pv__vchip.is-on {
    border-color: var(--pv-ink);
    box-shadow: inset 0 0 0 1px var(--pv-ink);
}

.tc-pv__vimg {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border-radius: 50%;
    background: var(--pv-soft);
}

.tc-pv__vimg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .2s ease;
}

.tc-pv__vimg--all { color: var(--pv-ink); }
.tc-pv__vimg--all svg { width: 20px; height: 20px; }

.tc-pv__vdot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 13px;
    height: 13px;
    border: 2px solid #FFF;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(12, 12, 12, .25);
}

.tc-pv__vtext2 {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-pv__vname {
    max-width: 120px;
    overflow: hidden;
    font-size: 13px;
    font-weight: 600;
    line-height: 19px;
    color: var(--pv-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tc-pv .tc-pv__vchip.is-on .tc-pv__vname { font-weight: 700; }

.tc-pv__vmeta {
    font-size: 11px;
    line-height: 15px;
    color: var(--pv-muted);
    white-space: nowrap;
}

/* a colour out of stock: still there to look at, its photo dimmed */
.tc-pv__vchip.is-out .tc-pv__vimg img { opacity: .55; filter: grayscale(.4); }
.tc-pv__vchip.is-out .tc-pv__vmeta { color: var(--pv-accent); }

/* ---- the skeleton of a photo still on its way ---- */
.tc-pv__vface.is-wait::after,
.tc-pv__vimg.is-wait::after,
.tc-pv .tc-pv__thumb.is-wait::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #EFEFF1 0%, #FAFAFB 50%, #EFEFF1 100%);
    background-size: 200% 100%;
    animation: tc-pv-shimmer 1.2s linear infinite;
}

/* the viewer's own tiles too */
.tc-pv .tc-pv__thumb.is-wait::after { inset: 3px; border-radius: 7px; }
.tc-pv__thumb.is-wait .tc-pv__play { z-index: 1; }

.tc-pv__vface.is-wait img,
.tc-pv__vimg.is-wait img,
.tc-pv__thumb.is-wait img { opacity: 0; }

/* the photo stays clear of the pill, and of the row while it is open */
.tc-pv.has-vs .tc-pv__slide { padding-bottom: 96px; }
.tc-pv.is-vs-open .tc-pv__slide { padding-bottom: 100px; }

@media (max-width: 959px) {
    .tc-pv.has-vs .tc-pv__slide { padding-bottom: 72px; }
    .tc-pv.is-vs-open .tc-pv__slide { padding-bottom: 80px; }
    .tc-pv__vs { padding: 0 8px 12px; }
    .tc-pv .tc-pv__vpill { gap: 8px; padding: 4px; padding-inline-end: 6px; }
    .tc-pv__vface { width: 38px; height: 38px; }
    .tc-pv__vline { font-size: 14px; line-height: 20px; }
    .tc-pv__vsub { font-size: 11px; line-height: 16px; }
    .tc-pv__vchev { width: 26px; height: 26px; }
    .tc-pv__vpanel { gap: 4px; padding: 5px; }
    .tc-pv .tc-pv__vstep, .tc-pv .tc-pv__vclose { width: 30px; height: 30px; }
    .tc-pv .tc-pv__vchip { height: 42px; gap: 6px; padding-inline-end: 12px; }
    .tc-pv__vimg { width: 34px; height: 34px; }
    .tc-pv__vname { max-width: 96px; font-size: 12px; line-height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .tc-pv__vpanel { animation: none; }
    .tc-pv__vface.is-wait::after, .tc-pv__vimg.is-wait::after, .tc-pv .tc-pv__thumb.is-wait::after { animation: none; }
}