@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&display=swap');

:root {
    --ink: hsl(242 25% 16%);
    --soft: hsl(244 18% 28%);
    --muted: hsl(243 12% 42%);
    --navy: hsl(238 97% 24%);
    --accent: hsl(258 92% 62%);
    --grad: linear-gradient(135deg, hsl(258 100% 69%), hsl(241 100% 40%) 42%, hsl(290 100% 26%));
    --grad-soft: linear-gradient(135deg, hsla(258 100% 69% / .9), hsla(241 100% 40% / .9) 42%, hsla(290 100% 26% / .9));
    --logo-grad: linear-gradient(90deg, hsl(238 97% 24%), hsl(258 100% 69%));
    --panel: linear-gradient(180deg, #fbfbff, #edeefb);
    --panel-soft: linear-gradient(180deg, #f6f6fe, #e8eaf6);
    --wallet: linear-gradient(135deg, #e9e2f7, #efeafb);
    --active: linear-gradient(135deg, rgba(156, 124, 255, .34), rgba(4, 0, 203, .22) 55%, rgba(134, 0, 113, .22)), #f4f3fe;
    --active-soft: linear-gradient(135deg, rgba(156, 124, 255, .16), rgba(4, 0, 203, .10) 55%, rgba(134, 0, 113, .10)), #f6f5fe;
    --shadow-glass: 0 26px 60px rgba(26, 20, 70, .12);
    --shadow-soft: 0 14px 30px rgba(26, 20, 70, .12);
    --line: hsl(244 20% 78% / .85);
}

* {
    font-family: "Cabinet Grotesk", "Manrope", sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
}

body {
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at top left, rgba(118, 132, 255, .18), transparent 32%),
        radial-gradient(circle at top right, rgba(217, 95, 192, .14), transparent 26%),
        linear-gradient(180deg, #f6f5ff 0%, #f3f2ff 48%, #eef0ff 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    min-height: 100dvh;
}

/*
 * While a checkout overlay is open, drop the sticky positioning on the checkout sidebar.
 * position:sticky promotes the sidebar to its own compositing layer; because the modal
 * markup is rendered inside that layer, a hard vertical seam appeared along the layer's
 * edge straight across the dialog. Making the sidebar static during the overlay removes
 * that separate layer, so the translucent backdrop paints uniformly. The checkout stays
 * visible (dimmed) behind the dialog — a normal popup — with no seam. The dialog has no
 * backdrop-filter, so the media badges / lock / buyer-auth panel no longer composite
 * over it either; they simply sit dimmed in the background where they belong.
 */
body.has-checkout-modal .main__checkout-sidebar__inner {
    position: static;
}

.container {
    max-width: 1320px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    box-sizing: border-box;
}

.header {
    box-shadow: 0 4px 4px 0 #00000008;
    display: flex;
}

.header__container {
    padding-top: 20px;
    padding-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    row-gap: 10px;
}

.header__logo {
    display: block;
    width: 168px;
    height: auto;
}

.header__logo-link {
    display: inline-flex;
    line-height: 0;
}

.header__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    margin-left: auto;
}

.header__buyer-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 14px 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel-soft);
    color: var(--soft);
    box-shadow: var(--shadow-soft);
}

.header__buyer-chip[hidden] {
    display: none !important;
}

.header__buyer-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--grad);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.header__buyer-email {
    max-width: 220px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header__explore-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 18px;
    background: var(--grad);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 32px rgba(94, 78, 255, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
}

.header__explore-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 36px rgba(94, 78, 255, 0.34);
}

.header__explore-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.92);
    outline-offset: 3px;
}

.main {
    padding-top: 56px;
    padding-bottom: 100px;
}

.main__checkout-shell {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.main__payment {
    display: flex;
    gap: clamp(24px, 4vw, 50px);
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
}

.main__checkout-gallery {
    flex: 1 1 0;
    min-width: min(100%, 340px);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.main__payment.expanded {
    align-items: start;
}

.main__payment.main__payment--view-only {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: min(60vh, 720px);
    -webkit-user-select: none;
    user-select: none;
}

.main__inline-view-only-actions {
    width: 100%;
    max-width: min(920px, 100%);
    margin: 10px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.main__inline-view-only-actions__button {
    /* Both buttons share the row in equal halves whatever their label says:
       without the basis the longer text simply claimed more (owner
       2026-09-08). 320px each: the pair stopped at 920px and dwarfed the
       tiles above it (owner 2026-09-17). */
    flex: 1 1 0;
    width: auto;
    max-width: 320px;
    text-align: center;
}

/* Two classes deep on purpose: .download-button (further down the file)
   sets margin-top: 14px and won a plain single-class reset here, so the
   vault pill sat 14px lower and 14px shorter than the message pill next to
   it (user 2026-09-22, "still taller"). Same line-height for both so the
   labels sit on one baseline. */
.main__inline-view-only-actions .main__inline-view-only-actions__button {
    margin-top: 0;
    margin-bottom: 0;
    /* Same story for the width: .download-button's max-width: 100% beat the
       320px cap, so the vault pill took the rest of the row while the
       message pill stopped at 320px (user 2026-09-22, "exactly as long"). */
    width: auto;
    max-width: 320px;
    min-height: 46px;
    line-height: 22px;
}

.main__payment.main__payment--view-only .media-container {
    width: 100%;
    max-width: min(920px, 100%);
    justify-content: center;
    align-items: stretch;
    align-content: flex-start;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    gap: 14px;
}

.main__payment.main__payment--view-only .media-item {
    flex: 1 1 calc(33.333% - 14px);
    max-width: calc(33.333% - 14px);
    min-width: min(180px, 100%);
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    position: relative;
    display: block;
    cursor: pointer;
}

.main__payment.main__payment--view-only .media-item.media-item--video {
    flex: 1 1 100%;
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    cursor: default;
}

.main__payment.main__payment--view-only .media-item.view-only-active {
    display: block;
}

/* Deters casual saving; does not block OS screenshots. */
.main__payment.main__payment--view-only .media-item::after {
    content: "View only";
    position: absolute;
    top: 14px;
    right: 14px;
    /* Pin all four edges so this label pseudo can never inherit the
       locked-preview shade's inset:0 (bottom/left) if that class is present on
       the same element — otherwise the two ::after rules merge into a box that
       greys everything except a 14px top/right strip over purchased content. */
    bottom: auto;
    left: auto;
    z-index: 2;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Full container width, natural aspect ratio (no square crop) in view-only mode. */
.main__payment.main__payment--view-only .media-item::before {
    display: none;
}

.main__payment.main__payment--view-only .media-preview {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 220px;
    object-fit: cover;
    aspect-ratio: auto;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.main__payment.main__payment--view-only .media-item.media-item--video .media-preview {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 200px;
    max-height: min(85vh, 960px);
    object-fit: contain;
}

.main__payment.main__payment--view-only video.media-preview {
    display: block;
    width: 100%;
    max-width: 100%;
    background: #111;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Clean fallback when a purchased view-only item cannot be resolved (backend 410). */
.main__payment.main__payment--view-only .media-item.view-only-item--unavailable {
    min-height: 200px;
    background: #14131c;
    border-radius: 12px;
    cursor: default;
}

.main__payment.main__payment--view-only .media-item.view-only-item--unavailable .media-preview {
    display: none;
}

.main__payment.main__payment--view-only .media-item.view-only-item--unavailable::after {
    content: "Content currently unavailable";
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    white-space: nowrap;
}

/* 429 from the view endpoint: same tile treatment, honest wording. */
.main__payment.main__payment--view-only .media-item.view-only-item--rate-limited::after {
    content: "Too many views - please try again shortly";
}

/* Web-safe encode still running: the file exists, it just is not the one we
   want to hand out yet. Reads as temporary, unlike "unavailable". */
.main__payment.main__payment--view-only .media-item.view-only-item--processing::after {
    content: "This video is being processed - please try again in a few minutes";
    white-space: normal;
    max-width: 80%;
    text-align: center;
}

.view-only-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.48);
    color: #fff;
    font-size: 32px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.view-only-nav:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.68);
}

.view-only-nav:disabled {
    opacity: 0.35;
    cursor: default;
}

.view-only-nav--prev {
    left: 16px;
}

.view-only-nav--next {
    right: 16px;
}

.view-only-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.92);
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.view-only-lightbox.is-open {
    display: flex;
}

.view-only-lightbox__content {
    width: min(92vw, 1240px);
    height: min(88vh, 900px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.view-only-lightbox__media {
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    -webkit-user-drag: none;
    user-select: none;
}

.view-only-lightbox__media--video {
    display: none;
    background: #111;
}

.view-only-lightbox__close {
    position: absolute;
    top: 18px;
    right: 22px;
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 28px;
    line-height: 42px;
    cursor: pointer;
}

.view-only-lightbox__nav {
    border: 0;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    font-size: 30px;
    line-height: 46px;
    cursor: pointer;
}

.view-only-lightbox__nav:disabled {
    opacity: 0.3;
    cursor: default;
}

.view-only-lightbox__nav--prev {
    margin-right: 16px;
}

.view-only-lightbox__nav--next {
    margin-left: 16px;
}

.media-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: start;
    position: relative;
    width: min(100%, 510px);
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.main__checkout-sidebar {
    /* Fixed column while the layout is two-column; the gallery's min-width
       forces a wrap below instead of crushing the preview image. */
    flex: 0 0 384px;
    width: 384px;
    max-width: min(100%, 384px);
    min-width: 0;
}

@media (max-width: 900px) {
    /* Stacked (user 2026-09-16): checkout card, tip, gallery, vault card - the
       checkout never moves when the grid expands. The sidebar boxes step aside
       (display: contents) so their cards can be ordered around the gallery;
       each card takes the sidebar's former width. */
    .main__payment .main__checkout-sidebar,
    .main__payment .main__checkout-sidebar__inner {
        display: contents;
    }

    /* The spacing moves from the row gap (40px in the authoritative block at
       the end of this file) onto the cards: 12px above and below the tip,
       40px before the vault card. A flex line cannot shrink below zero, so
       negative margins on the tip alone would leave 24px under it. */
    .main .main__payment:not(.main__payment--view-only) {
        row-gap: 0;
    }

    /* 560px: the sidebar's effective width here (the max-width: 1100px block
       further down overrides its 520px). */
    .main__payment .main__checkout-sidebar__inner > * {
        order: -2;
        flex: 1 1 100%;
        width: 100%;
        max-width: 560px;
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
    }

    .main__payment .main__checkout-sidebar__inner > .tip-add {
        order: -1;
        justify-content: center;
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .main__payment .main__checkout-sidebar__inner > .buyer-checkout-auth {
        order: 1;
        margin: 40px auto 0;
    }

    /* Center the single preview tile too, so preview + cards + vault all sit
       centered in the stacked mobile layout. Higher specificity than the base
       `.media-item.one-item { margin-left: 0 }` rule, which sits LATER in the
       file and would otherwise win at equal specificity. */
    .main__checkout-gallery .media-item.one-item {
        margin-left: auto;
        margin-right: auto;
    }
    .main__payment:not(.main__payment--view-only) {
        justify-content: center;
    }

    /* Stacked: the gallery (media-container) is centered, so cap the intro to the
       same 516px and center it too — otherwise the title/description sit at the
       container's left edge while the grid is centered, i.e. to the LEFT of it.
       `.main.container` (0,3,0) outranks the file-end authoritative
       `.main .product-details-card { max-width: 940 }` (0,2,0) which would
       otherwise win on source order. */
    .main.container .product-details-card {
        max-width: 516px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 1101px) {
    /* Center the intro on the exact same 940px max-width as the checkout block
       below, so their left edges line up and only the outer margins grow on wide
       screens (see the .main__payment cap rule further down). */
    .main .product-details-card {
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
    }
}

.main__checkout-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.media-container > a {
    height: 100%;
    pointer-events: none;
    width: 100%;
}

@media (max-width: 1060px) {
    .main__payment {
        justify-content: center;
    }
}

.media-item:before {
    content: "";
    display: block;
    padding-top: 100%;
}

.media-item {
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.media-item.hidden {
    display: none;
}

/* "+N more" tile: expands the grid to every file (user 2026-09-16). */
.media-item.media-btn {
    cursor: pointer;
}

.media-item.media-btn:focus-visible {
    outline: none;
}

.media-item.media-btn:focus-visible .media-price-text {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.media-item.media-btn .btn-inner {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
    height: 100%;
    /* Light translucent lilac, not the full brand gradient: the "+N more"
       count tile is a quiet affordance and the dark text stays legible. */
    background: rgba(93, 70, 255, 0.10);
    border: 1px solid rgba(93, 70, 255, 0.18);
    border-radius: 20px;
    color: var(--ink);
}

.media-item.media-btn .media-price-text-bottom {
    color: var(--accent);
}

.media-item.one-item {
    flex: 0 1 auto;
    width: min(100%, 440px);
    max-width: min(100%, 440px);
    margin-left: 0;
    margin-right: auto;
}

/* Single-media products render one portrait tile (mockup: ~440px wide, 4:5). */
.media-item.one-item::before {
    padding-top: 125%;
}

.media-type-icon {
    position: absolute;
    right: 5%;
    top: 5%;
    width: 33px;
    height: 33px;
    z-index: 2;
}

.media-item.one-item .media-type-icon {
    width: 54px;
    height: 54px;
}

.media-preview {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    border-radius: 20px;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.media-item--locked-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: rgba(20, 16, 48, 0.10);
    pointer-events: none;
    z-index: 1;
}

.media-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* Slimmer pill: same font size, just less vertical padding and a squarer
   corner than the old 53px-tall / 25px-radius bubble. */
.media-id {
    position: absolute;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.92);
    border-radius: 12px;
    /* 1px more top / less bottom: caps+digits have no descenders, so the font's
       descender space below the baseline reads as extra bottom gap — nudge the
       text down to the optical centre. */
    padding: 7px 12px 5px;
    color: var(--navy);
    font-weight: 81;
    line-height: 1;
    top: 5%;
    left: 5%;
    min-height: 0;
    min-width: 53px;
    box-shadow: var(--shadow-soft);
    z-index: 2;
}

.media-id span {
    margin: 0 auto;
}

.media-duration {
    position: absolute;
    left: 5%;
    bottom: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 53px;
    min-width: 53px;
    padding: 1px 12px;
    border-radius: 25px;
    background-color: rgba(20, 16, 48, 0.6);
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    z-index: 2;
    pointer-events: none;
}

.media-duration span {
    margin: 0 auto;
}

.media-item--video .media-duration,
.media-item.one-item .media-duration {
    left: 5%;
    bottom: 5%;
}

/* The badge the link previews carry (owner 2026-09-17, drawn in GD by
   LockedPreviewRenderer::badge): a light disc lit from the top, an opaque
   purple rim and, outermost, a fine darker purple ring. Disc and rings are one
   vector image, so the rings stay solid at every pixel density - a CSS border
   let the light disc show through at its edge and a half-pixel ring broke up.
   The purple glow and the drop shadow scale from the 99px badge (6px, 5/10px). */
.media-lock-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66px;
    height: 66px;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='dg' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23e5e5f1'/%3E%3C/linearGradient%3E%3ClinearGradient id='dl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.95'/%3E%3Cstop offset='.35' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='dh' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='.55' stop-color='%234834a0' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%234834a0' stop-opacity='.24'/%3E%3C/linearGradient%3E%3Cfilter id='df' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='1.6'/%3E%3C/filter%3E%3CclipPath id='dc'%3E%3Ccircle cx='50' cy='50' r='45.9'/%3E%3C/clipPath%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46.5' fill='url(%23dg)'/%3E%3Cg clip-path='url(%23dc)'%3E%3Ccircle cx='50' cy='50' r='45.6' fill='none' stroke='url(%23dl)' stroke-width='2.2' filter='url(%23df)'/%3E%3Ccircle cx='50' cy='50' r='44' fill='none' stroke='url(%23dh)' stroke-width='7' filter='url(%23df)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='47.3' fill='none' stroke='%239061ff' stroke-width='3.2'/%3E%3Ccircle cx='50' cy='50' r='49.35' fill='none' stroke='%235c26e6' stroke-width='1.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    box-shadow:
        0 0 4px rgba(124, 77, 255, .5),
        0 3px 7px rgba(30, 18, 80, .34);
    z-index: 3;
}

/* The padlock with depth (lit and bevelled body, keyhole, tube-shaded
   shackle, contact shadow) as one SVG - the same shapes and light as the GD
   badge. Its viewBox reaches .7 units above and below the 24-unit icon for
   the shadow, so the element is 25.4/24 as tall as wide and stays centred. */
.media-lock-indicator::before {
    display: none;
}

.media-lock-indicator::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 31.75px;
    transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.7 24 25.4'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='24' y2='24' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%239061ff'/%3E%3Cstop offset='.42' stop-color='%230300cc'/%3E%3Cstop offset='1' stop-color='%236e0085'/%3E%3C/linearGradient%3E%3ClinearGradient id='w' x1='0' y1='9.75' x2='0' y2='22.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='d' x1='0' y1='9.75' x2='0' y2='22.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-opacity='0'/%3E%3Cstop offset='1' stop-opacity='.24'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='9.1' y1='9.75' x2='14.9' y2='22.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23fff' stop-opacity='.5'/%3E%3Cstop offset='.45' stop-color='%23fff' stop-opacity='0'/%3E%3Cstop offset='.55' stop-opacity='0'/%3E%3Cstop offset='1' stop-opacity='.32'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Crect x='3.75' y='9.75' width='16.5' height='12.75' rx='3'/%3E%3C/clipPath%3E%3Cfilter id='f' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeGaussianBlur stdDeviation='.45'/%3E%3C/filter%3E%3CradialGradient id='s'%3E%3Cstop offset='0' stop-color='%2328146e' stop-opacity='.28'/%3E%3Cstop offset='.5' stop-color='%2328146e' stop-opacity='.1'/%3E%3Cstop offset='1' stop-color='%2328146e' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cellipse cx='12' cy='22.9' rx='8.8' ry='1.7' fill='url(%23s)'/%3E%3Cg fill='none'%3E%3Cpath d='M7.5 10.5V6.75a4.5 4.5 0 0 1 9 0V10.5' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M6.9 10.5V6.75a5.1 5.1 0 0 1 10.2 0V10.5M8.1 10.5V6.75a3.9 3.9 0 0 1 7.8 0V10.5' stroke='%23000' stroke-opacity='.22' stroke-width='.3'/%3E%3Cpath d='M7.73 10.5V6.75a4.27 4.27 0 0 1 8.54 0V10.5' stroke='%23fff' stroke-opacity='.55' stroke-width='.35'/%3E%3C/g%3E%3Crect x='3.75' y='9.75' width='16.5' height='12.75' rx='3' fill='url(%23g)'/%3E%3Crect x='3.75' y='9.75' width='16.5' height='12.75' rx='3' fill='url(%23w)'/%3E%3Crect x='3.75' y='9.75' width='16.5' height='12.75' rx='3' fill='url(%23d)'/%3E%3Cg clip-path='url(%23c)'%3E%3Crect x='4.1' y='10.1' width='15.8' height='12.05' rx='2.65' fill='none' stroke='url(%23b)' stroke-width='1.9' filter='url(%23f)'/%3E%3C/g%3E%3Cpath d='M10.4 15.4A1.65 1.65 0 0 0 13.6 15.4' fill='none' stroke='%23fff' stroke-opacity='.24' stroke-width='.4'/%3E%3Crect x='11' y='18.7' width='2' height='.4' fill='%23fff' fill-opacity='.28'/%3E%3Ccircle cx='12' cy='15' r='1.45' fill='%231a0a48'/%3E%3Crect x='11.38' y='15' width='1.24' height='3.7' fill='%231a0a48'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Single-media products get a 1.5x lock (owner 2026-09-13: 99px on the 440px
   tile). Multi-media tiles are ~250px wide on desktop and ~160px on phones and
   keep 66px: there the big lock would fill 40-60% of the tile and push the
   trailer button out at the bottom. The button moves down by the 16.5px the
   lock grew, so the gap between them stays as it was. */
.media-item.one-item .media-lock-indicator {
    width: 99px;
    height: 99px;
    box-shadow:
        0 0 6px rgba(124, 77, 255, .5),
        0 5px 10px rgba(30, 18, 80, .34);
}

.media-item.one-item .media-lock-indicator::after {
    width: 45px;
    height: 47.625px;
}

/* Unlock animation on the return from the payment page (user 2026-09-17,
   markup products/partials/unlock-fx). Four phases, each with its own length
   (owner 2026-09-17: 2s, then 2.8s overall, then a longer dissolve): the locked
   look stands (--fx-hold), the lock wiggles (--fx-wiggle), the shackle lifts and
   swings aside (--fx-open), then a soft-edged hole opens at the keyhole and
   grows to the rim, taking lock and blur with it (--fx-dissolve; the user
   turned down a shattering badge). Every phase is its own animation, delayed
   by the phases before it, so a length changes in one place and nothing else
   moves; the tiles start 150ms apart (--fx-delay). The hole is a second
   mask layer excluded from a full one and animated by its size - no
   registered custom property needed, so Firefox before 128 dissolves too;
   without mask-composite the layer simply stays whole until it hides.
   Everything is a CSS animation that ENDS hidden and the layer's resting state
   is hidden too: no script has to succeed for the purchase to be visible, and
   a browser without animation support never sees the layer. It takes no
   pointer events, so the tile stays clickable throughout. */
.media-unlock-fx {
    /* Beats the UA rule of the `hidden` attribute the markup carries. */
    display: block;
    position: absolute;
    inset: 0;
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
    /* Over the preview and the download disc, under id, type and duration (2). */
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    /* The keyhole sits 5.68% of the badge below the tile's centre. */
    --fx-key-y: 3.75px;
    /* 3.24s in all. */
    --fx-hold: 560ms;
    --fx-wiggle: 560ms;
    --fx-open: 620ms;
    --fx-dissolve: 1500ms;
    -webkit-mask-image: linear-gradient(#000, #000), radial-gradient(circle closest-side, #000 62%, transparent 100%);
    mask-image: linear-gradient(#000, #000), radial-gradient(circle closest-side, #000 62%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, 50% calc(50% + var(--fx-key-y));
    mask-position: 0 0, 50% calc(50% + var(--fx-key-y));
    -webkit-mask-size: 100% 100%, 0 0;
    mask-size: 100% 100%, 0 0;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation:
        fg-unlock-fx-stage calc(var(--fx-hold) + var(--fx-wiggle) + var(--fx-open) + var(--fx-dissolve)) linear var(--fx-delay, 0ms) both,
        fg-unlock-fx-dissolve var(--fx-dissolve) cubic-bezier(.5, 0, .4, 1) calc(var(--fx-delay, 0ms) + var(--fx-hold) + var(--fx-wiggle) + var(--fx-open)) both;
}

.media-item.one-item .media-unlock-fx {
    --fx-key-y: 5.62px;
}

.media-unlock-fx__cover {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ece9fb, #d9d3f5);
}

.media-unlock-fx__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* View-only shows a single photo and every video whole (contain, no crop):
   the blurred cover is framed the same way, or the clear picture would appear
   at another scale where the hole opens. The bars beside it stay what they are
   underneath. Several photos are cropped there like here (cover), no rule. */
.main__payment.main__payment--view-only .media-item.one-item .media-unlock-fx__cover,
.main__payment.main__payment--view-only .media-item.media-item--video .media-unlock-fx__cover {
    background: none;
}

.main__payment.main__payment--view-only .media-item.one-item .media-unlock-fx__cover img,
.main__payment.main__payment--view-only .media-item.media-item--video .media-unlock-fx__cover img {
    object-fit: contain;
}

/* The veil of .media-item--locked-preview. */
.media-unlock-fx__cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 48, 0.10);
}

.media-unlock-fx__badge,
.media-unlock-fx__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66px;
    height: 66px;
    transform: translate(-50%, -50%);
}

.media-unlock-fx__badge {
    overflow: visible;
}

.media-unlock-fx__glow {
    border-radius: 999px;
    box-shadow:
        0 0 4px rgba(124, 77, 255, .5),
        0 3px 7px rgba(30, 18, 80, .34);
}

.media-item.one-item .media-unlock-fx__badge,
.media-item.one-item .media-unlock-fx__glow {
    width: 99px;
    height: 99px;
}

.media-item.one-item .media-unlock-fx__glow {
    box-shadow:
        0 0 6px rgba(124, 77, 255, .5),
        0 5px 10px rgba(30, 18, 80, .34);
}

.media-unlock-fx__badge .fx-intact,
.media-unlock-fx__badge .fx-shackle {
    transform-box: fill-box;
    transform-origin: 50% 50%;
}

.media-unlock-fx__badge .fx-intact {
    animation: fg-unlock-fx-intact var(--fx-wiggle) linear calc(var(--fx-delay, 0ms) + var(--fx-hold)) both;
}

/* Pivot: the right leg where it enters the body (16.5 / 9.75 of the 24-unit
   icon), as a share of the shackle's own box (6.9-17.1 wide, 1.65-14 tall). */
.media-unlock-fx__badge .fx-shackle {
    transform-origin: 94.1% 65.6%;
    animation: fg-unlock-fx-shackle var(--fx-open) linear calc(var(--fx-delay, 0ms) + var(--fx-hold) + var(--fx-wiggle)) both;
}

@keyframes fg-unlock-fx-stage {
    0%, 99.9% { opacity: 1; visibility: visible; }
    100% { opacity: 1; visibility: hidden; }
}

/* 300% of the tile: the solid core of the hole (62% of its radius) then
   reaches past the farthest corner, also on the 4:5 single tile. */
@keyframes fg-unlock-fx-dissolve {
    0% { -webkit-mask-size: 100% 100%, 0 0; mask-size: 100% 100%, 0 0; }
    100% { -webkit-mask-size: 100% 100%, 300% 300%; mask-size: 100% 100%, 300% 300%; }
}

@keyframes fg-unlock-fx-intact {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-10deg); }
    35% { transform: rotate(9deg); }
    55% { transform: rotate(-7deg); }
    75% { transform: rotate(5deg); }
    90% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg); }
}

@keyframes fg-unlock-fx-shackle {
    0% { transform: translateY(0) rotate(0deg); animation-timing-function: cubic-bezier(.2, .8, .3, 1.25); }
    50% { transform: translateY(-2.6px) rotate(0deg); animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
    100% { transform: translateY(-2.6px) rotate(30deg); }
}

/* Seen before (reload) or no motion wanted: the clear previews at once. */
.fg-unlock-fx-seen .media-unlock-fx {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .media-unlock-fx {
        display: none;
    }
}

.media-item.one-item .media-trailer-cta,
.media-item.one-item .media-thumbnail-cta {
    transform: translate(-50%, calc(-50% + 90.5px));
}

.media-trailer-cta,
.media-thumbnail-cta {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 74px));
    z-index: 3;
    min-height: 46px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #ffffff;
    color: var(--navy);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.media-trailer-cta:hover,
.media-thumbnail-cta:hover {
    filter: brightness(1.06);
}

.media-trailer-cta:disabled,
.media-trailer-cta--loading,
.media-thumbnail-cta:disabled,
.media-thumbnail-cta--loading {
    opacity: 0.72;
    cursor: progress;
}

.trailer-preview-modal__content {
    width: min(92vw, 760px);
    height: auto;
    position: relative;
}

.trailer-preview-modal__toolbar {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
}

.trailer-preview-modal__video {
    display: block;
    width: 100%;
    max-width: min(92vw, 760px);
    max-height: 82vh;
    background: #111;
    border-radius: 18px;
}

.trailer-preview-modal__image {
    display: block;
    /* Height-driven so SMALL source thumbnails scale UP too (max-* never
       enlarges); width follows the aspect ratio, capped by the viewport.
       Halved from 82vh: the small derivatives go blurry when blown up. */
    height: min(41vh, 430px);
    width: auto;
    max-width: 92vw;
    margin: 0 auto;
    border-radius: 18px;
    object-fit: contain;
    background: #111;
}

.trailer-preview-menu {
    position: relative;
}

.trailer-preview-menu__trigger {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--line);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
}

.trailer-preview-menu__trigger span {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--navy);
}

.trailer-preview-menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 180px;
    padding: 8px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-glass);
}

.trailer-preview-menu__item {
    width: 100%;
    min-height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 12px;
    cursor: pointer;
}

.trailer-preview-menu__item:hover {
    background: rgba(188, 138, 255, 0.16);
}

.checkout-preview-notice-modal {
    /* Translucent, no blur (see .modal): avoids the sticky-sidebar blur seam. */
    background: rgba(20, 16, 40, 0.34);
    padding: 24px;
}

.checkout-preview-notice-modal__content {
    max-width: 820px;
    padding: 42px 36px 34px;
    border-radius: 28px;
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow-glass);
    color: var(--ink);
    text-align: center;
}

.checkout-preview-notice-modal__brand {
    margin: 0 0 18px;
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}

.checkout-preview-notice-modal__title {
    margin: 0;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.02em;
    text-transform: none;
}

.checkout-preview-notice-modal__body {
    max-width: 680px;
    margin: 22px auto 0;
    color: var(--muted);
    font-size: 20px;
    line-height: 1.5;
}

.checkout-preview-notice-modal__body a,
.checkout-preview-notice-modal__footnote a {
    color: var(--accent);
    text-decoration: none;
}

.checkout-preview-notice-modal__body a:hover,
.checkout-preview-notice-modal__footnote a:hover {
    text-decoration: underline;
}

.checkout-preview-notice-modal__footnote {
    margin: 24px auto 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.5;
}

.checkout-preview-notice-modal__actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 34px;
}

.checkout-preview-notice-modal__button {
    min-height: 58px;
    padding: 0 22px;
    border-radius: 14px;
    border: 1px solid var(--line);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: transform 0.18s ease, opacity 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.checkout-preview-notice-modal__button:hover {
    transform: translateY(-1px);
}

.checkout-preview-notice-modal__button--primary {
    background: var(--grad-soft);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(96, 73, 255, 0.28);
}

.checkout-preview-notice-modal__button--secondary {
    background: var(--wallet);
    color: var(--soft);
    box-shadow: var(--shadow-soft);
}

/* "+N" tile: count above its label in a raised disc with the tip button's
   surface, so the tile reads as a key you can press (user 2026-09-16). */
.media-price-text {
    color: var(--navy);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 140px;
    height: 140px;
    box-sizing: border-box;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, hsl(240 20% 93%));
    border: 3px solid hsl(258 100% 69%);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .95),
        inset 0 -4px 7px rgba(72, 52, 160, .14),
        0 6px 14px rgba(93, 70, 255, .2);
    transition: transform .15s ease, box-shadow .15s ease;
}

.media-item.media-btn:hover .media-price-text {
    background: linear-gradient(180deg, #fff, hsl(240 20% 95%));
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .95),
        inset 0 -4px 7px rgba(72, 52, 160, .12),
        0 10px 20px rgba(93, 70, 255, .24);
}

.media-item.media-btn:active .media-price-text {
    transform: translateY(2px);
    background: linear-gradient(180deg, hsl(240 20% 93%), #fff);
    box-shadow:
        inset 0 3px 6px rgba(72, 52, 160, .18),
        0 2px 6px rgba(93, 70, 255, .16);
}

.media-price-text-top {
    font-size: 16px;
    line-height: 1.2;
}

.media-item.one-item .media-price-text-top {
    font-size: 20px;
    line-height: 60px;
}

.media-price-text-bottom {
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.media-item.one-item .media-price-text-bottom {
    font-size: 64px;
    line-height: 84px;
}

.payment_services_logo_box {
    display: flex;
    min-height: 40px;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 0 2px 2px;
    flex-wrap: wrap;
}

.epoch-payment-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.epoch-payment-logos .payment_services_logo {
    height: 24px;
}

.payment_services_logo {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.payment_services_logo_visa {
    height: 30px;
    padding-top: 5px;
}

.payment_services_logo_gpay {
    height: 34px;
    padding-top: 3px;
}

.payment_services_logo_apay {
    height: 34px;
    padding-top: 3px;
}

.payment_services_logo_paypal {
    height: 40px;
    width: 100px;
}

.payment_services_logo_twint {
    height: 34px;
    padding-top: 3px;
}

.payment_services_logo_paypal_checkout {
    height: 24px;
    width: auto;
}

.payment_services_logo_crypto {
    height: 28px;
    width: auto;
}

.payment-buttons {
    margin-top: 22px;
    width: 100%;
    min-width: 0;
}

.buyer-checkout-auth {
    margin: 16px 0 0;
    padding: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--panel-soft);
    color: var(--soft);
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(8px);
    overflow: hidden;
}

/* As a sibling card in the sidebar column the inner gap provides spacing. */
.main__checkout-sidebar__inner > .buyer-checkout-auth {
    margin: 0;
}

.buyer-checkout-auth,
.buyer-checkout-auth *,
.buyer-checkout-auth *::before,
.buyer-checkout-auth *::after {
    box-sizing: border-box;
}

.buyer-checkout-auth__state[hidden] {
    display: none !important;
}

.buyer-checkout-auth__panel[hidden] {
    display: none !important;
}

.buyer-checkout-auth[hidden],
.buyer-checkout-auth__error[hidden],
.buyer-checkout-auth__message[hidden],
.buyer-checkout-auth__submit[hidden],
.download-button[hidden],
.buyer-vault-button[hidden] {
    display: none !important;
}

/* Success card: only "Download all" stays a gradient primary; vault/account
   CTAs step back to the wallet look (mockup hierarchy). */
.download-button.buyer-vault-button {
    background: var(--wallet);
    color: var(--navy);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

/* Success head (mockup): gradient check chip + product title + file meta. */
.success-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 2px;
}

.success-head__chk {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--grad-soft);
    color: #fff;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
}

.success-head__copy {
    min-width: 0;
}

.success-head__copy b {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.success-head__copy small {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Per-file backup-link rows inside the success card (mockup .dl-list). */
.dl-list {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dl-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 9px 12px;
    font-size: 12.5px;
    color: var(--soft);
}

.dl-item__ic {
    color: var(--navy);
    display: inline-flex;
    flex: 0 0 auto;
}

.dl-item__ic svg {
    width: 15px;
    height: 15px;
}

.dl-item__name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--ink);
    text-decoration: none;
}

.dl-item__copy {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
    font-family: inherit;
    flex: 0 0 auto;
}

.buyer-checkout-auth__state,
.buyer-checkout-auth__panel,
.buyer-checkout-auth__form,
.buyer-checkout-auth__field {
    width: 100%;
    min-width: 0;
}

.buyer-checkout-auth__panel {
    overflow: hidden;
}

/* Match the SECURE CHECKOUT / PAYMENT METHOD card eyebrows exactly
   (.checkout-eyebrow: .72rem / 700 / .24em / accent). */
.buyer-checkout-auth__eyebrow {
    margin: 0 0 8px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Quiet title: not bold, slightly smaller — the eyebrow carries the emphasis. */
.buyer-checkout-auth__title {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--ink);
}

.buyer-checkout-auth__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
}

.buyer-checkout-auth__field {
    display: grid;
    gap: 6px;
}

.buyer-checkout-auth__field label {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.buyer-checkout-auth__field input {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    padding: 0 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.buyer-checkout-auth__field input::placeholder {
    color: hsl(243 12% 55%);
}

.buyer-checkout-auth__field input:focus-visible {
    outline: none;
    border-color: rgba(168, 139, 255, 0.9);
    box-shadow: 0 0 0 3px rgba(123, 90, 255, 0.2);
}

.buyer-checkout-auth__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #ffffff;
    padding: 10px 11px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.buyer-checkout-auth__checkbox input {
    margin-top: 2px;
    flex: 0 0 auto;
}

.buyer-checkout-auth__checkbox span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.buyer-checkout-auth__legal-link {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
}

.buyer-checkout-auth__legal-link:hover {
    color: var(--navy);
}

.buyer-checkout-auth__legal-link:focus-visible {
    outline: 2px solid rgba(188, 138, 255, 0.45);
    outline-offset: 2px;
    border-radius: 4px;
}

.buyer-checkout-auth__submit {
    width: 100%;
    min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(93, 70, 255, 0.5);
    padding: 0 16px;
    color: var(--navy);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    background: var(--active);
    box-shadow: var(--shadow-soft);
    transition: transform 0.2s ease, filter 0.2s ease, opacity 0.2s ease;
}

.buyer-checkout-auth__submit:hover {
    filter: brightness(1.04);
}

.buyer-checkout-auth__submit:active {
    transform: translateY(1px);
}

.buyer-checkout-auth__submit:disabled {
    opacity: 0.68;
    cursor: not-allowed;
}

.buyer-checkout-auth__helper {
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.buyer-checkout-auth__error {
    margin: 10px 0 0;
    color: #c0392b;
    font-size: 13px;
    line-height: 1.45;
}

.buyer-checkout-auth__message {
    margin: 9px 0 0;
    color: var(--soft);
    font-size: 13px;
    line-height: 1.45;
    max-width: none;
}

/* Collapsed vault "Connect" step: breathing room between copy and button. */
#buyerCheckoutConnectStep .buyer-checkout-auth__submit {
    margin-top: 16px;
}

.buyer-checkout-auth__message--muted {
    color: var(--muted);
}

.buyer-checkout-auth__identity {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Indented under the "Your Vault" label (see sketch). */
    margin: 2px 0 4px 14px;
}

/* Small inline avatar sitting in the "Your Vault … is connected." line. */
.buyer-checkout-auth__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--grad);
    border: none;
    box-shadow: 0 1px 4px rgba(93, 70, 255, 0.25);
    color: #ffffff;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
}

/* "Your Vault" label line above the avatar+email row. */
.buyer-checkout-auth__vault-label {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--ink);
}

/* Quiet one-liner: regular weight, only the vault name is bold. */
.buyer-checkout-auth__title--vault {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--ink);
    /* long emails must wrap inside the 384px card */
    word-break: break-word;
    min-width: 0;
}

.buyer-checkout-auth__title--vault strong {
    font-weight: 700;
}

.buyer-checkout-auth__identity-copy {
    min-width: 0;
}

.buyer-checkout-auth__email {
    margin: 3px 0 0;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}

.buyer-checkout-auth__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 12px;
    width: 100%;
}

.buyer-checkout-auth__link {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.buyer-checkout-auth__link:hover {
    color: var(--navy);
}

.buyer-checkout-auth__link:focus-visible {
    outline: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.buyer-checkout-auth__link--button {
    font-family: inherit;
}

.buyer-checkout-auth__submit--secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    background: var(--wallet);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-soft);
}

/* Intro above the checkout shell (mockup): eyebrow + big title + description. */
.product-details-card {
    width: 100%;
    box-sizing: border-box;
    margin: 6px 0 20px;
}

.product-details-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    /* Header line: smaller than the title, half the usual eyebrow tracking to
       keep the fine look (user 2026-09-16). */
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.product-details-card__title {
    margin: .5rem 0 .55rem;
    color: var(--ink);
    font-size: clamp(2rem, 3.4vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: .98;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.product-details-card__description {
    margin-top: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 760px;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.checkout-email-field {
    margin-bottom: 14px;
}

.checkout-email-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    color: var(--soft);
}

.checkout-email-field input {
    width: 100%;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    font-size: 14px;
    line-height: 18px;
    padding: 10px 12px;
}

.checkout-email-field input::placeholder {
    color: hsl(243 12% 55%);
}

.checkout-email-field__hint {
    margin-top: 6px;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 16px;
}

.checkout-email-field__error {
    display: none;
    margin-top: 6px;
    margin-bottom: 0;
    color: #c0392b;
    font-size: 12px;
    line-height: 16px;
}

.checkout-email-field__input--invalid {
    border-color: #e07a7a !important;
}

.crypto-email-modal {
    /* Translucent, no blur (see .modal): avoids the sticky-sidebar blur seam. */
    background: rgba(20, 16, 40, 0.34);
}

.crypto-email-modal__content {
    position: relative;
    max-width: 460px;
    padding: 34px 30px 30px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: var(--panel);
    box-shadow: var(--shadow-glass);
    text-align: left;
}

.crypto-email-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: auto;
    height: auto;
    padding: 4px 6px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    transition: color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.crypto-email-modal__close:hover,
.crypto-email-modal__close:focus-visible {
    color: var(--navy);
    opacity: 1;
    transform: translateY(-1px);
    outline: none;
}

.crypto-email-modal__head {
    margin-top: 0;
    margin-right: 56px;
    margin-bottom: 10px;
    line-height: 1.2;
}

.crypto-email-modal__subhead {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 21px;
    max-width: 95%;
}

.crypto-email-modal__input-row {
    margin-top: 22px;
    gap: 8px;
}

.crypto-email-modal__input-row label {
    color: var(--soft);
    font-size: 14px;
    font-weight: 500;
}

.crypto-email-modal__field {
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    color: var(--ink);
    margin-top: 2px;
    padding: 15px 16px;
}

.crypto-email-modal__field:hover,
.crypto-email-modal__field:focus-visible {
    border-color: rgba(188, 138, 255, 0.58);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(188, 138, 255, 0.14);
}

.crypto-email-modal__field::placeholder {
    color: hsl(243 12% 55%);
}

.crypto-email-modal .checkout-email-field__hint {
    margin-top: 2px;
    color: var(--muted);
    font-size: 13px;
    line-height: 18px;
}

.crypto-email-modal .checkout-email-field__error {
    margin-top: 4px;
    color: #c0392b;
}

.crypto-email-modal__buttons {
    margin-top: 26px;
    gap: 14px;
    align-items: center;
}

.crypto-email-modal__buttons .avs__button {
    min-height: 52px;
    font-size: 18px;
    line-height: 1.2;
}

.crypto-email-modal__buttons .avs__cancel {
    border: 1px solid var(--line);
    background: var(--wallet);
    color: var(--soft);
    box-shadow: none;
}

.crypto-email-modal__buttons .avs__submit {
    background: var(--grad-soft);
    box-shadow: 0 8px 20px rgba(169, 127, 247, 0.24);
}

@media screen and (max-width: 767px) {
    .header__container {
        align-items: flex-start;
    }

    .header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .header__explore-link {
        min-height: 42px;
        padding: 0 16px;
        font-size: 13px;
    }

    .checkout-preview-notice-modal {
        padding: 14px;
    }

    .checkout-preview-notice-modal__content {
        width: calc(100% - 8px);
        max-width: none;
        padding: 28px 20px 22px;
        border-radius: 18px;
    }

    .checkout-preview-notice-modal__brand {
        font-size: 34px;
        margin-bottom: 14px;
    }

    .checkout-preview-notice-modal__title {
        font-size: 18px;
        line-height: 1.14;
    }

    .checkout-preview-notice-modal__body {
        font-size: 17px;
        line-height: 1.45;
    }

    .checkout-preview-notice-modal__actions {
        flex-direction: column;
        margin-top: 24px;
    }

    .checkout-preview-notice-modal__button {
        width: 100%;
        min-height: 54px;
        font-size: 18px;
    }

    .crypto-email-modal__content {
        width: calc(100% - 24px);
        max-width: none;
        border-radius: 18px;
        padding: 30px 20px 22px;
    }

    .crypto-email-modal__head {
        margin-right: 48px;
    }

    .crypto-email-modal__subhead {
        max-width: 100%;
    }

    .crypto-email-modal__buttons {
        flex-direction: column;
    }

    .crypto-email-modal__close {
        top: 10px;
        right: 10px;
    }
}

.payment-buttons .payment-button-container {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    min-width: 0;
}

.payment-button {
    display: block;
    width: 100%;
    border-radius: 30px;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.payment-button:not(.payment-button--paypal):not(.payment-button--crypto):not(.payment-button--card) {
    background: #BC8AFF;
    color: white;
    font-size: 20px;
    line-height: 45px;
    text-align: center;
}

.payment-button--loading {
    pointer-events: none;
}

.payment-button--paypal,
.payment-button--crypto,
.payment-button--card {
    width: min(100%, 520px);
    padding: 0;
    margin: 0 auto;
    border: 0;
    border-radius: 999px;
    background: transparent;
    line-height: 0;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    transition: filter 0.18s ease, transform 0.1s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.payment-button__image,
.payment-button--paypal__image,
.payment-button--crypto__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: inherit;
}

.payment-button--paypal:hover,
.payment-button--crypto:hover,
.payment-button--card:hover {
    filter: brightness(1.03);
}

.payment-button--paypal:active,
.payment-button--crypto:active,
.payment-button--card:active {
    transform: translateY(1px);
}

.payment-button--paypal:focus-visible,
.payment-button--crypto:focus-visible,
.payment-button--card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(188, 138, 255, 0.45);
}

.payment-button--paypal:disabled,
.payment-button--paypal.payment-button--loading,
.payment-button--crypto:disabled,
.payment-button--crypto.payment-button--loading,
.payment-button--card.payment-button--loading {
    opacity: 0.65;
    cursor: not-allowed;
}

@media screen and (max-width: 767px) {
    .payment-button--paypal,
    .payment-button--crypto,
    .payment-button--card {
        width: 100%;
    }

    .buyer-checkout-auth {
        padding: 14px;
    }

    .buyer-checkout-auth__state {
        overflow: hidden;
    }

    .buyer-checkout-auth__form {
        gap: 10px;
    }

    .buyer-checkout-auth__field input {
        height: 44px;
        font-size: 15px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .buyer-checkout-auth__submit {
        min-height: 46px;
        font-size: 17px;
    }

    .buyer-checkout-auth__helper {
        font-size: 13px;
    }

    .buyer-checkout-auth__link {
        font-size: 13px;
    }

    .buyer-checkout-auth__checkbox {
        padding: 9px 10px;
        font-size: 11px;
    }

    /* 20px from the top to the eyebrow, and 20px from a title without
       description to the checkout card (user 2026-09-17). */
    .main.container {
        padding-top: 20px;
    }

    .product-details-card {
        max-width: none;
        width: 100%;
        margin-top: 0;
        padding: 0 20px 24px;
        border-radius: 20px;
    }

    .product-details-card--no-description {
        padding-bottom: 0;
    }

    .product-details-card--no-description .product-details-card__title {
        margin-bottom: 0;
    }

    .product-details-card__eyebrow {
        font-size: 16px;
    }

    .product-details-card__title {
        font-size: 20px;
    }

    .product-details-card__description {
        font-size: 14px;
        line-height: 1.55;
    }
}

@media screen and (min-width: 1101px) {
    .main__payment:not(.main__payment--view-only) {
        display: grid;
        /* 384px, not the legacy 520px: must match the sidebar's own width
           below (and the flex-mode width just under this breakpoint), or
           the grid reserves far more for the sidebar column than it uses -
           starving the gallery right at the 1101px line and making tiles
           visibly jump larger crossing down into flex mode at 1100px. */
        grid-template-columns: minmax(0, 1fr) 384px;
        align-items: start;
        gap: 40px;
        /* Cap + center the whole checkout block on wide screens so preview tiles
           never grow past ~250px (gallery column = 940 - 384 - 40 = 516 → two
           250px tiles), the gallery→checkout gap stays a constant 40px, and only
           the OUTER side margins grow. Below 940px the block is full-width and the
           tiles shrink with the viewport. Single-tile keeps its 440px tile size
           (its own width rule below); only its margins recenter. */
        max-width: 940px;
        margin-left: auto;
        margin-right: auto;
    }

    /* No explicit width here: this item also carries margin-left (indent
       towards the checkout column, set above). An explicit width:100% does
       NOT get reduced by an item's own margin, so combining the two made the
       gallery overflow its grid track by exactly the margin amount, sliding
       the last tile column under the sticky sidebar. Default grid stretch
       sizing already accounts for the margin correctly. */
    .main__payment:not(.main__payment--view-only) .media-container {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        width: 100%;
        max-width: none;
        align-items: stretch;
    }

    .main__payment:not(.main__payment--view-only) .media-item {
        flex: none;
        max-width: none;
    }

    .main__payment:not(.main__payment--view-only) .media-item.one-item {
        grid-column: 1 / -1;
        width: min(100%, 440px);
        max-width: min(100%, 440px);
        justify-self: start;
    }

    .main__payment:not(.main__payment--view-only) .media-item::before {
        padding-top: 106%;
    }

    .main__payment:not(.main__payment--view-only) .media-item.one-item::before {
        padding-top: 125%;
    }

    .main__checkout-sidebar {
        flex: 0 0 384px;
        width: 384px;
        max-width: 384px;
        position: relative;
        min-width: 0;
    }

    .main__checkout-sidebar__inner {
        position: sticky;
        top: 28px;
    }

    .main__payment__price__payment__details {
        overflow: hidden;
    }

    /* Keep details section aligned with the lower promo banner width on desktop. */
    .product-details-card {
        width: 100%;
        max-width: none;
        align-self: stretch;
    }
}

.main__payment__product__title__text {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
}

.main__payment__price__payment {
    display: flex;
    flex-direction: column;
    gap: 25px;
    justify-content: center;
}

.main__payment__price__payment__details {
    padding: 20px 22px;
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 28px;
    background: var(--panel);
    color: var(--soft);
    border: 1px solid var(--line);
}

.success-card-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.success-card-actions > * {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.main__payment__price__payment__details__head {
    font-size: 16px;
    font-weight: 700;
    line-height: 21px;
    margin-bottom: 16px;
    color: var(--ink);
}

.main__payment__price__payment__details__list {
    display: flex;
    padding: 0;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    list-style: none;
    width: 100%;
    min-width: 0;
}

.main__payment__price__payment__details__list__item {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 16px;
    font-weight: 317;
    line-height: 22px;
    text-align: left;
    gap: 10px;
}

.main__payment__price__payment__details__list__item__price {
    font-weight: 317;
    color: var(--ink);
}

.download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 12px 18px;
    margin-top: 14px;
    border-radius: 100px;
    background: var(--grad-soft);
    color: white;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    border: none;
    box-sizing: border-box;
    box-shadow: 0 14px 30px rgba(59, 36, 171, 0.34);
    text-decoration: none;
}

.success-card-actions .download-button,
.success-card-actions .success-state-banner,
.success-card-actions .download-tip,
.success-card-actions .buyer-checkout-auth {
    margin-top: 0;
}

.success-state-banner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 18px;
    background: rgba(35, 160, 100, 0.12);
    border: 1px solid rgba(35, 160, 100, 0.32);
    margin-bottom: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

.success-state-banner__icon {
    width: auto;
    height: auto;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #1f9d5b;
    font-weight: 800;
    line-height: 1;
    font-size: 32px;
    flex: 0 0 auto;
}

.success-state-banner__title {
    margin: 0;
    min-width: 0;
    color: var(--ink);
    font-size: clamp(20px, 4.2vw, 34px);
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: -0.03em;
}

.report-button {
    width: 100%;
    padding: 13px 0 0 0;
    margin-top: 15px;
    border-radius: 100px;
    color: var(--accent);
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    border: none;
}

.tip {
    padding: 15px;
    border-radius: 25px;
    margin-top: 15px;
    max-width: 100%;
    text-align: center;
    box-sizing: border-box;
}

.download-tip {
    background: var(--panel-soft);
    border: 1px solid var(--line);
    color: var(--muted);
    display: block;
    width: 100%;
    max-width: 100% !important;
    margin-top: 22px;
    min-width: 0;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 15px 18px;
    line-height: 1.35;
}

.download-tip a {
    color: var(--accent);
}

.error-tip {
    display: none;
    color: #991b1b;
    text-align: center;
    margin: 0;
    background: #fbe3e3;
    border: 1px solid rgba(153, 27, 27, 0.28);
}

.footer {
    padding-bottom: 28px;
}

.footer__top {
    background: none;
    padding: 0 0 18px;
    display: flex;
    gap: 50px;
    align-items: center;
    border-radius: 0;
    border-bottom: 1px solid hsl(244 20% 78% / .7);
    margin-bottom: 18px;
    flex-direction: row;
}

.footer__top__text {
    font-size: 24px;
    font-weight: 500;
    line-height: 42px;
    text-align: left;
    color: var(--soft);
    flex: 1;
}

.footer__top__buttons {
    display: flex;
    gap: 10px;
}

/* Brand line (user 2026-09-16): the former page header sits in the footer's
   first line - logo before the tagline, buyer chip and Explore button
   right-aligned. The tagline starts from its own width and gives way first;
   chip and button wrap under each other before it gets too narrow. */
.footer__top--brand {
    gap: 20px;
}

.footer__top--brand .header__logo-link {
    flex-shrink: 0;
}

.footer__top--brand .footer__top__text {
    flex: 1 1 auto;
}

.footer__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 768px) {
    .footer__top {
        flex-direction: column;
        align-items: center;
    }

    /* Stacked + centered like the links below. */
    .footer__top--brand .footer__top__text {
        margin-bottom: 0;
        text-align: center;
    }

    .footer__actions {
        justify-content: center;
    }

    .footer__top__text {
        margin-bottom: 20px;
    }

    .footer__top__buttons {
        flex-direction: column;
    }
}

.footer__bottom {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px 22px;
    margin: 0;
}

.footer__bottom__link {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    color: var(--muted);
}

@media screen and (max-width: 1000px) {
    .main__payment__price__payment__details__list {
        min-width: 0;
    }

    .container {
        padding: 0 20px;
    }

    .header__container {
        padding-top: 15px;
        padding-bottom: 15px;
        flex-wrap: wrap;
    }

    .main {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .footer {
        padding-bottom: 40px;
    }

    .footer__top {
        padding-left: 20px;
        padding-right: 20px;
        max-width: 100%;
    }

    .payment_services_logo_box {
        display: flex;
        height: auto;
        min-height: 0;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
        padding-bottom: 6px;
    }

    .payment_services_logo {
        height: auto;
        max-height: 34px;
        width: auto;
        padding-left: 0;
        padding-right: 0;
        flex: 0 1 auto;
    }

    .payment_services_logo_visa {
        height: auto;
        max-height: 24px;
        padding-top: 0;
    }

    .payment_services_logo_gpay {
        height: auto;
        max-height: 28px;
        padding-top: 0;
    }

    .payment_services_logo_apay {
        height: auto;
        max-height: 28px;
        padding-top: 0;
    }

    .payment_services_logo_paypal {
        height: auto;
        max-height: 34px;
        width: auto;
    }

    .payment_services_logo_paypal_checkout {
        height: auto;
        max-height: 22px;
        width: auto;
    }

    .payment_services_logo_crypto {
        height: auto;
        max-height: 24px;
        width: auto;
    }

    .payment_services_logo_twint {
        height: auto;
        max-height: 28px;
        padding-top: 0;
    }

    .payment-button:not(.payment-button--paypal):not(.payment-button--crypto):not(.payment-button--card) {
        font-size: 18px;
        line-height: 35px;
    }
}

@media screen and (max-width: 790px) {
    .main__payment__price__payment__details {
        padding: 22px 16px 18px;
        border-radius: 24px;
    }

    .success-card-actions {
        gap: 14px;
    }

    .success-state-banner {
        gap: 9px;
        padding: 10px 12px;
    }

    .success-state-banner__title {
        font-size: clamp(18px, 5vw, 26px);
        line-height: 1.1;
    }

    .success-state-banner__icon {
        font-size: clamp(18px, 4.6vw, 26px);
    }

    .download-button {
        min-height: 48px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: clamp(16px, 4.2vw, 20px);
        line-height: 1.2;
    }

    .download-tip {
        padding: 14px 16px;
        font-size: 13px;
        line-height: 1.32;
    }

    .footer__bottom {
        flex-direction: column;
    }

    /* Stacked + centered on mobile: a long link (the 2257 statement) that wraps
       must keep its wrapped lines centered, not fall back to the base left-align. */
    .footer__bottom__link {
        text-align: center;
    }

    .footer__top {
        margin-bottom: 30px;
    }

    .header__container {
        align-items: center;
        justify-content: space-between;
    }

    .header__actions {
        gap: 10px;
    }

    .header__buyer-email {
        max-width: 150px;
    }

    .header__explore-link {
        min-height: 46px;
        padding: 0 18px;
        border-radius: 16px;
        font-size: 14px;
    }

    .media-container {
        width: 100%;
        max-width: 100%;
    }

    .main__payment.main__payment--view-only .media-container {
        max-width: 100%;
    }

    .main__payment.main__payment--view-only .media-item {
        flex: 1 1 calc(50% - 12px);
        max-width: calc(50% - 12px);
    }

    .media-type-icon {
        width: 24px;
        height: 24px;
    }

    .media-id {
        min-height: 24px;
        min-width: 24px;
    }

    .media-duration {
        min-height: 30px;
        min-width: 58px;
        padding: 0 10px;
        font-size: 12px;
    }

    .media-trailer-cta,
    .media-thumbnail-cta {
        min-height: 40px;
        padding: 0 14px;
        font-size: 13px;
        transform: translate(-50%, calc(-50% + 58px));
    }

    .media-item.one-item .media-trailer-cta,
    .media-item.one-item .media-thumbnail-cta {
        transform: translate(-50%, calc(-50% + 74.5px));
    }

    .media-price-text {
        width: 110px;
        height: 110px;
    }

    .media-price-text-top {
        font-size: 14px;
        line-height: 16px;
    }

    .media-price-text-bottom {
        font-size: 32px;
        line-height: 32px;
    }

    .payment_services_logo_box {
        display: flex;
        flex-wrap: nowrap;
        height: auto;
        min-height: 0;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        padding-bottom: 8px;
    }

    .payment_services_logo {
        height: auto;
        max-height: 26px;
        width: auto;
        padding-left: 0;
        padding-right: 0;
        flex: 0 1 auto;
    }

    .payment_services_logo_visa {
        height: auto;
        max-height: 18px;
        padding-top: 0;
    }

    .payment_services_logo_gpay {
        height: auto;
        max-height: 24px;
        padding-top: 0;
    }

    .payment_services_logo_apay {
        height: auto;
        max-height: 24px;
        padding-top: 0;
    }

    .payment_services_logo_paypal {
        height: auto;
        max-height: 24px;
        width: auto;
    }

    .payment_services_logo_paypal_checkout {
        height: auto;
        max-height: 20px;
        width: auto;
    }

    .payment_services_logo_crypto {
        height: auto;
        max-height: 21px;
        width: auto;
    }

    .payment_services_logo_twint {
        height: auto;
        max-height: 24px;
    }
}

@media screen and (max-width: 670px) {
    .header__container {
        justify-content: space-between;
        flex-direction: row;
    }

    .header__actions {
        width: auto;
        align-items: flex-end;
    }
}

@media screen and (max-width: 550px) {
    .header__logo {
        max-width: 123px;
    }

    .header__container {
        gap: 12px;
    }

    .header__actions {
        gap: 9px;
    }

    .header__buyer-chip {
        min-height: 38px;
        padding: 0 10px 0 8px;
    }

    .header__buyer-avatar {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .header__buyer-email {
        max-width: 110px;
        font-size: 12px;
    }

    .header__explore-link {
        min-height: 42px;
        padding: 0 16px;
        border-radius: 14px;
        font-size: 13px;
        box-shadow: 0 14px 28px rgba(94, 78, 255, 0.24);
    }

    .footer__top__text {
        font-size: 24px;
        font-weight: 900;
        line-height: 31px;
    }

    .main__payment__price__payment__details__list {
        min-width: 0;
    }

    .media-container {
        width: 100%;
        max-width: 100%;
    }

    .main__payment.main__payment--view-only .media-container {
        max-width: 100%;
    }

    .main__payment.main__payment--view-only .media-item {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .main__payment.main__payment--view-only .media-item:not(.media-item--video) .media-preview {
        height: 200px;
    }

    .view-only-lightbox {
        padding: 12px;
    }

    .view-only-lightbox__nav {
        width: 38px;
        height: 38px;
        line-height: 38px;
        font-size: 24px;
    }
}

@media screen and (max-width: 360px) {
    .media-type-icon {
        width: 24px;
        height: 24px;
    }

    .media-price-text {
        width: 90px;
        height: 90px;
    }

    .media-price-text-top {
        font-size: 12px;
        line-height: 14px;
    }

    .media-price-text-bottom {
        font-size: 24px;
        line-height: 24px;
    }
}


.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    /*
     * Translucent (NOT blurred) backdrop: the checkout stays visible behind the dialog,
     * dimmed. No backdrop-filter on purpose — a blurred overlay cannot uniformly blur
     * the position:sticky sidebar (its own compositing layer), which produced a hard
     * vertical seam through the dialog. Overlap of badges / lock / buyer-auth is handled
     * by hiding those elements while a modal is open (body.has-checkout-modal).
     */
    background: rgba(20, 16, 40, 0.34);
    z-index: 10020;
}

.modal__head {
    font-size: 24px;
}

.modal__subhead {
    font-size: 18px;
    margin-top: 10px;
}

/* Close badge for the report modal: generous 40px tap target (mobile). */
.modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    color: var(--soft);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(34, 22, 88, .08);
}

.modal__close:hover {
    color: var(--ink);
    border-color: rgba(93, 70, 255, .5);
}

.modal-content {
    position: relative;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--line);
    padding: 30px;
    border-radius: 28px;
    box-shadow: var(--shadow-glass);
    text-align: center;
    max-width: 450px;
    width: 100%;
    box-sizing: border-box;
}

.modal__fields-container {
    flex-direction: column;
    display: flex;
    margin: 30px 0;
    gap: 12px;
}

.modal__input-row {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: 3px;
}

.modal__input-row label {
    font-size: 14px;
    font-weight: 500;
}

.modal__input-row p {
    font-size: 14px;
    font-weight: 500;
}

.modal__data-field {
    padding: 14px 15px;
    font-size: 16px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background-color: #fff;
    color: var(--ink);
}

.modal__data-field__text-area {
    resize: vertical;
}

.modal__data-field:disabled {
    background: var(--wallet);
    color: var(--muted);
}

.modal__data-field:hover,
.modal__data-field:focus-visible {
    outline: none;
}

.modal__select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 0.65rem auto;
    background-color: #fff;
    color: var(--ink);
}

.modal__submit-button {
    width: 100%;
    padding: 13px 0;
    border-radius: 100px;
    background: var(--grad-soft);
    color: white;
    font-size: 20px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    border: none;
}

.custom-multiselect {
    position: relative;
    width: 100%;
}

.multiselect-btn {
    cursor: pointer;
    text-align: left;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23131313%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: 0.65rem auto;
}

.dropdown {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    width: 100%;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
    border-radius: 14px;
    background-color: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}

.dropdown-item {
    display: flex;
    align-items: center;
    padding: 7px 15px;
    font-size: 16px;
    cursor: pointer;
    justify-content: space-between;
}

.dropdown-item input[type="checkbox"] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 18px;
    width: 18px;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #ccc;
    cursor: pointer;
    position: relative;
}

.dropdown-item input[type="checkbox"]:checked {
    background-color: var(--accent);
    border: none;
}

.dropdown-item input[type="checkbox"]:checked::after {
    content: '\2713';
    color: white;
}


.dropdown-item:not(:last-child) {
    border-bottom: 1px solid #ccc;
    border-bottom: none;
}


.dropdown-item:hover {
    background-color: rgba(188, 138, 255, 0.16);
}

.multiselect__item-desc {
    display: flex;
    gap: 8px;
    align-items: center;
}

.multiselect__item-desc img {
    display: block;
    border-radius: 30px;
    height: 32px;
    width: 32px;
}

.copy-button {
    border: none;
    background: none;
    cursor: pointer;
    flex: 0 0 auto;
    align-self: flex-start;
}

.list-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.list-details__container {
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    padding: 28px 30px 0 30px;
    box-shadow: var(--shadow-glass);
    display: flex;
    flex-direction: column;
    color: var(--ink);
    border-radius: 28px;
    max-height: 300px;
    min-height: 300px;
    overflow: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    box-sizing: border-box;
    align-self: stretch;
}

.list-details__head {
    font-size: 14px;
    padding-bottom: 20px;
}

.list-details__item {
    padding: 16px 12px;
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8px;
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
}

.list-details__item__content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.list-details__item__content a {
    color: var(--ink);
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal__text {
    font-size: 14px;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 5px;
}

.modal__text .modal__checkbox_wrap {
    display: flex;
}

/* Freestanding note paragraphs (not checkbox labels) need a visible gap
   between them - the global `* { margin: 0 }` reset otherwise runs them
   into one solid block of text. */
.modal__text--note {
    display: block;
    margin-top: 12px;
}

.modal__text a {
    color: var(--accent);
    text-decoration: none;
}

.modal__text input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 1px solid #ccc;
    background-color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 3px;
    transition: all 0.2s ease;
}

.modal__text input[type="checkbox"]:checked::after {
    content: '\2713';
    color: white;
    font-size: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.modal__text input[type="checkbox"]:hover {
    border-color: var(--accent);
}

.modal__text input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}

.modal__checkbox_wrap > div {
    margin-right: 24px;
}

.avs__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 30px 0;
    text-align: left;
}

.avs__buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin-top: 30px;
}

.avs__button {
    padding: 13px 0;
    border-radius: 100px;
    color: white;
    font-size: 20px;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border: none;
}

.avs__submit {
    background: var(--grad-soft);
}

.avs__cancel {
    background: var(--wallet);
    color: var(--soft);
    border: 1px solid var(--line);
}

.paypal-button-tagline {
    color: var(--muted) !important;
}

@media screen and (max-width: 767px) {
    .main__payment__price__payment {
        width: 100%;
    }
}

/* ==========================================================================
   Light checkout — payment method tiles + unified Pay button (select → Pay).
   The real .payment-button elements stay in the DOM with their handlers
   intact but are hidden; a tile proxies a click to the selected provider
   button, so the entire consent / Yoti / processPayment chain is unchanged.
   The native PayPal SDK mount (#paypal-button-container) is intentionally
   NOT hidden.
   ========================================================================== */
.payment-buttons .payment-button,
.payment-buttons .payment-button-container:not(#paypal-button-container) {
    display: none !important;
}

.payment-buttons .methods {
    display: grid;
    gap: 10px;
    margin-top: 4px;
}

/* The discount badge peeks ~14px above the crypto tile, so the tile row needs
   a little clearance to keep it off the "Payment method" eyebrow. */
.payment-buttons .methods--has-badge {
    margin-top: 16px;
}

.method {
    position: relative;
    background: var(--wallet);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 8px 9px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 6px 14px rgba(34, 22, 88, .07), inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: transform .16s ease, box-shadow .16s ease, background .18s ease, border-color .18s ease;
}

.method__badge {
    position: absolute;
    /* Sits BEHIND the tile content (z-index 0 vs the face/label at 1): the
       banner peeks out above the tile's top edge with the discount label, then
       fades straight down and disappears behind the raised icon card, which
       stays fully in the foreground. */
    z-index: 0;
    top: -14px;
    left: -1px;
    right: -1px;
    background: linear-gradient(180deg, hsla(258 100% 69% / .95) 0%, hsla(252 100% 50% / .9) 42%, hsla(266 100% 45% / 0) 100%);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    text-align: center;
    padding: 5px 8px 24px;
    border-radius: 16px 16px 0 0;
    pointer-events: none;
}

.method:hover { transform: translateY(-2px); }

.method .face {
    position: relative;
    z-index: 1;
    background: #fff;
    border: 1px solid hsl(244 20% 86% / .9);
    border-radius: 11px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.method .lbl {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: var(--soft);
}

.method__info-wrap {
    display: inline-block;
    margin-left: 4px;
    vertical-align: middle;
}

.method__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--line);
    color: var(--navy);
    font-size: 9px;
    font-weight: 800;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    cursor: pointer;
    user-select: none;
}

.method__info:hover,
.method__info:focus-visible {
    background: var(--accent);
    color: #fff;
    outline: none;
}

.method__info-pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 200px;
    max-width: calc(100vw - 48px);
    transform: translateY(-4px);
    background: #fff;
    color: var(--soft);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    box-shadow: 0 12px 28px rgba(34, 22, 88, .2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 6;
}

.method__info-pop.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.method.sel {
    background: var(--active);
    border-color: rgba(93, 70, 255, .5);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(34, 22, 88, .18), 0 0 18px -6px rgba(109, 86, 255, .5);
}

.method.sel .lbl { color: var(--navy); }

.method .pp { font-style: italic; font-weight: 800; font-size: 15px; letter-spacing: -.03em; }
.method .pp .a { color: #253b80; }
.method .pp .b { color: #179bd7; }

.method .btc {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f7931a;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 16px;
    font-family: Arial, sans-serif;
}

.method .card-ic { width: 26px; height: 26px; color: var(--navy); }

.method__facetext { font-size: 12px; font-weight: 800; color: var(--navy); padding: 0 6px; }

.btn-pay {
    margin-top: 12px;
    width: 100%;
    cursor: pointer;
    font-family: inherit;
    background: transparent;
    color: var(--navy);
    border: 1.5px solid rgba(93, 70, 255, .4);
    font-weight: 700;
    font-size: 15px;
    padding: 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.btn-pay__ic { display: inline-flex; }
.btn-pay__ic svg { width: 18px; height: 18px; }

.btn-pay:hover { transform: translateY(-2px); background: rgba(156, 124, 255, .10); }

.btn-pay.active {
    background: linear-gradient(135deg, hsla(258 100% 69% / .8), hsla(241 100% 40% / .8) 42%, hsla(290 100% 26% / .8)), #f4f3fe;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px rgba(59, 36, 171, .3), 0 0 18px -6px rgba(109, 86, 255, .5);
}

.btn-pay.active:hover,
.btn-pay.processing {
    background: var(--grad-soft);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(59, 36, 171, .4), 0 0 22px -6px rgba(109, 86, 255, .6);
}

.btn-pay.shake { animation: fg-shake .4s ease; }
.btn-pay.pop { animation: fg-pop .35s ease; }

.btn-pay.processing .btn-pay__ic svg { display: none; }
.btn-pay.processing .btn-pay__ic::before {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .55);
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: fg-spin .7s linear infinite;
}

@keyframes fg-spin { to { transform: rotate(360deg); } }
@keyframes fg-shake { 10%, 90% { transform: translateX(-2px); } 30%, 70% { transform: translateX(3px); } 50% { transform: translateX(-4px); } }
@keyframes fg-pop { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* Centered trust line: the two promises with the support links between them,
   one line (user 2026-09-16; Instant access sits in the eyebrow). Separators
   5px apart so the line fits the 340px desktop card and most phones; a
   narrower card wraps it. */
.reassure {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 5px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
}
.reassure__item { display: inline-flex; align-items: center; gap: 4px; }
.reassure__link { color: inherit; }

.msg-add {
    position: relative;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid hsl(244 20% 78% / .7);
}

/* The pill is centred on the card by itself; the (i) hangs off its right
   side without shifting it (user 2026-09-16). */
.msg-add__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 6px;
}

.msg-add__row > .msg-add__open {
    grid-column: 2;
}

.msg-add__row > .method__info-wrap {
    grid-column: 3;
    justify-self: start;
}

/* Explore-profile button look (purple gradient pill, sparkle) at .65
   opacity so it sits softly on the light checkout card. */
.msg-add__open {
    background: linear-gradient(135deg, hsla(258 100% 69% / .65), hsla(241 100% 40% / .65) 42%, hsla(290 100% 26% / .65));
    border: none;
    border-radius: 999px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(93, 70, 255, .25);
    transition: transform .16s ease, box-shadow .16s ease, filter .18s ease;
}

.msg-add__open:hover {
    transform: translateY(-2px);
    filter: saturate(1.15);
    box-shadow: 0 10px 22px rgba(93, 70, 255, .32);
}

.msg-add__textarea-wrap {
    position: relative;
}

.msg-add__counter {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 11px;
    color: var(--muted);
    pointer-events: none;
}

.msg-add__from--locked,
.msg-add__from:disabled {
    opacity: .5;
    background: #f2f1f8;
    cursor: not-allowed;
}

.msg-add__from-note {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.5;
}

/* "Only available with Premium & VIP" above the sender field - same
   readable tone as the tier explainer under the tiles. */
.msg-add__from-note--lock {
    margin: 8px 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--soft);
}

.msg-add__panel {
    margin-top: 10px;
}

.msg-add__textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 11px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    resize: vertical;
    background: #fff;
}

.msg-add__textarea:focus {
    outline: none;
    border-color: rgba(93, 70, 255, .5);
}

.msg-add__textarea.shake { animation: fg-shake .4s ease; }

.msg-add__from {
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 8px 11px;
    font-family: inherit;
    font-size: 13px;
    color: var(--ink);
    background: #fff;
}

.msg-add__from:focus {
    outline: none;
    border-color: rgba(93, 70, 255, .5);
}

/* Fan-pictures entry (Premium/VIP perk): styled like the sender field,
   grayed out on Standard exactly like the locked from-field. */
.msg-add__photo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--navy);
    background: var(--wallet);
    cursor: pointer;
    text-align: left;
    box-shadow: 0 4px 10px rgba(34, 22, 88, .06), inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: border-color .16s ease, transform .16s ease;
}

.msg-add__photo-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.msg-add__photo-chip {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.msg-add__photo-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msg-add__photo-chip-x {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 16px;
    height: 16px;
    border: none;
    border-radius: 50%;
    background: rgba(24, 16, 60, .72);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.msg-add__photo-btn:hover:not(:disabled) {
    border-color: rgba(93, 70, 255, .5);
}

.msg-add__photo-btn:disabled {
    opacity: .5;
    background: #f2f1f8;
    cursor: not-allowed;
}

.msg-add__photo-price {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
}

.msg-photo-modal {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(24, 16, 60, .95);
    backdrop-filter: blur(3px);
}

.msg-photo-modal__card {
    position: relative;
    width: 100%;
    max-width: 360px;
    /* Fully opaque: on the .95 backdrop even 5% translucency shows through. */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(34, 22, 88, .22);
    padding: 22px 20px 18px;
    text-align: center;
}

.msg-photo-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

.msg-photo-modal__title {
    margin: 0 0 4px;
    font-size: 16px;
    color: var(--ink);
}

.msg-photo-modal__sub {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--soft);
}

.msg-photo-modal__slots {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.msg-photo-modal__slot {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.msg-photo-modal__slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msg-photo-modal__slot-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(24, 16, 60, .72);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.msg-photo-modal__pick {
    border: 1px dashed var(--line);
    background: var(--wallet);
    border-radius: 12px;
    padding: 9px 16px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--navy);
    cursor: pointer;
}

.msg-photo-modal__note {
    margin: 12px 0 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--soft);
}

.msg-photo-modal__note a {
    color: var(--accent);
    font-weight: 700;
}

.msg-photo-modal__note--footer {
    margin: 10px 0 0;
    color: var(--muted);
}

.msg-photo-modal__rights {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    color: var(--soft);
    cursor: pointer;
}

.msg-photo-modal__rights input {
    margin-top: 2px;
    flex-shrink: 0;
}

.msg-photo-modal__rights a {
    color: var(--accent);
    font-weight: 700;
}

.msg-photo-modal__error {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: #b3261e;
}

.msg-photo-modal__cta {
    margin-top: 0;
}

.msg-photo-modal__cta:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.msg-add__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 10px 0 6px;
}

.msg-add__label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--soft);
    margin: 0;
}

.msg-add__info {
    display: grid;
    gap: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--soft);
    text-align: left;
}

.msg-add__info-item strong {
    color: var(--ink);
}

.msg-add__tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.msg-add__tier {
    background: var(--wallet);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 4px 4px 5px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .16s ease, background .16s ease;
}

.msg-add__tier-name {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
}

.msg-add__tier-amt {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 2px;
}

.msg-add__tier.sel {
    background: var(--active);
    border-color: rgba(93, 70, 255, .5);
}

.msg-add__tier.sel .msg-add__tier-name { color: var(--navy); }

.msg-add__tier { position: relative; }

.msg-add__tier-banner {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, hsla(258 100% 69% / .95), hsla(241 100% 40% / .95));
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.msg-add__premium-text {
    color: var(--accent);
    font-weight: 700;
}

.msg-add__vip-badge {
    color: #c9962a;
    font-weight: 800;
    letter-spacing: .04em;
}

.msg-add__tier-info {
    margin: 6px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--soft);
}

/* The msg-add block sits at the card's bottom edge - open its info tooltip
   upward so it can't get clipped/overlapped by the next card. */
.msg-add .method__info-pop {
    top: auto;
    bottom: calc(100% + 8px);
}

.msg-add__tiers-hint {
    margin: 6px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

.msg-add__submit {
    width: 100%;
    margin-top: 10px;
    /* Same .8 gradient weight as the selected pay button, incl. its light underlay. */
    background: linear-gradient(135deg, hsla(258 100% 69% / .8), hsla(241 100% 40% / .8) 42%, hsla(290 100% 26% / .8)), #f4f3fe;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 11px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
}

.msg-add__confirmed {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-top: 10px;
    text-align: center;
    font-size: 12.5px;
    color: var(--soft);
}

.msg-add__confirmed-text {
    color: var(--ink);
    font-weight: 700;
}

.msg-add__confirmed-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.msg-add__confirmed-sep { color: var(--muted); }

.msg-add__link {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--accent);
    cursor: pointer;
}

/* Card section eyebrows (mockup): Secure checkout / Payment method. */
.checkout-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
}

.checkout-eyebrow--pm {
    margin: 10px 0 8px;
}

/* Single-line price (mockup): product label + fee note, total on the right. */
.price-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid hsl(244 20% 78% / .7);
}
.price-line__lbl { font-size: 14px; color: var(--soft); font-weight: 500; }

.price-line--discount {
    padding-top: 10px;
    padding-bottom: 0;
    border-bottom: none;
}
.price-line--discount .price-line__lbl,
.price-line--discount .price-line__amt { color: var(--accent); font-weight: 700; }
.price-line--message {
    padding-top: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

/* Breakdown of the total above, NOT an addition to it — quieter than the
   discount/message lines on purpose, so it can't be misread as an extra charge. */
.price-line--age-fee {
    padding-top: 8px;
    padding-bottom: 0;
    border-bottom: none;
}
.price-line--age-fee .price-line__lbl { font-size: 12px; color: var(--muted); }
.price-line--age-fee .price-line__amt { font-size: 12px; font-weight: 600; color: var(--muted); }

/* Eyebrow row: label left, info trigger pinned right. The wrap needs its own
   positioning context — .method__info-wrap has none, and the pop is absolute. */
.checkout-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}
/* The eyebrow carries its own bottom margin for the PM block; inside this row it
   would push the icon off-centre, so the row owns the spacing instead. */
.checkout-head .checkout-eyebrow {
    margin-bottom: 0;
}
.checkout-head__info {
    position: relative;
    margin-left: 0;
    line-height: 0;
}
.price-line__lbl small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.price-line__amt { font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; }

@media screen and (max-width: 1100px) {
    .main {
        padding-top: 40px;
    }

    .main__checkout-shell {
        gap: 26px;
    }

    .main__payment {
        justify-content: center;
        width: 100%;
    }

    .main__checkout-sidebar {
        max-width: min(100%, 560px);
    }

    .main__checkout-gallery {
        width: 100%;
    }

    .media-container {
        width: 100%;
        max-width: 100%;
    }
}

/* === Checkout preview sizing — authoritative override ======================
   Consolidates the older per-breakpoint gallery rules so behaviour is uniform
   across the grid (>=1101px), flex (901-1100px) and stacked (<=900px) modes:
   - preview tiles never exceed ~250px (media-container capped at 516px -> two
     250px tiles with the 16px inner gap);
   - the gallery -> checkout gap is a constant 40px;
   - on wide screens the whole block (intro + gallery + checkout) centres on a
     940px max-width so only the OUTER margins grow; below that it is full-width
     and the tiles shrink with the viewport.
   Single-tile pages keep their own 440px tile width rule. Placed last so it
   wins on source order over the scattered rules above. ==================== */
.main .product-details-card,
.main .main__payment:not(.main__payment--view-only) {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
}

.main__payment:not(.main__payment--view-only) {
    gap: 40px;
    justify-content: center;
}

.main__payment:not(.main__payment--view-only) .media-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 516px;
    margin-left: auto;
    margin-right: auto;
}

/* Uniform tile box in every mode (neutralises the flex-mode calc sizing), so the
   gallery height no longer jumps between grid/flex. Two rows of ~103% tiles + the
   16px gap ~= 530px, which lines the gallery bottom up with the checkout+vault
   column. */
.main__payment:not(.main__payment--view-only) .media-item {
    flex: none;
    width: auto;
    max-width: none;
}
.main__payment:not(.main__payment--view-only) .media-item::before {
    padding-top: 103%;
}

/* Single tile still spans the row and keeps its 440px width + portrait ratio. */
.main__payment:not(.main__payment--view-only) .media-item.one-item {
    grid-column: 1 / -1;
    width: min(100%, 440px);
    max-width: min(100%, 440px);
    justify-self: start;
}
.main__payment:not(.main__payment--view-only) .media-item.one-item::before {
    padding-top: 125%;
}

/* === Two-row gallery bottom-alignment (3+ tiles) =========================
   The syncGalleryTiles script (in the product layout) measures the COLLAPSED
   checkout column and sets an explicit tile height, so a 2+ row gallery ends
   level with the vault card at ANY width and does NOT grow when the vault is
   expanded. The `is-height-synced` class is only present once the script has
   sized the tiles, so without JS they keep their natural aspect (graceful
   fallback). 1-2 tiles (single row) and single-tile are left untouched. */
.media-container.is-height-synced .media-item::before {
    content: none;
}

/* --- Purchased view-only media: show the picture, not a thumbnail ---------
   The buyer has paid, so the point of this area is looking at the content.
   Two rules fought over that: `.media-item.one-item` sizes a single medium at
   440px, but the view-only three-column rule is more specific (0,3,1 vs 0,2,0)
   and won, leaving a paid photo as a cropped 220px tile. Videos escaped only
   because they have their own view-only override at 100%.
   Photos now get the same treatment: a single one fills the width and keeps
   its whole frame (contain, not cover - a crop hides what was bought), several
   share two columns instead of three and are taller. Click-to-enlarge is
   untouched, this only changes the resting size. */
.main__payment.main__payment--view-only .media-item.one-item {
    flex: 1 1 100%;
    max-width: 100%;
    min-width: 0;
}

.main__payment.main__payment--view-only .media-item.one-item .media-preview {
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

.main__payment.main__payment--view-only .media-item:not(.one-item):not(.media-item--video) {
    flex: 1 1 calc(50% - 14px);
    max-width: calc(50% - 14px);
}

.main__payment.main__payment--view-only .media-item:not(.one-item):not(.media-item--video) .media-preview {
    height: 320px;
}

@media (max-width: 640px) {
    .main__payment.main__payment--view-only .media-item:not(.media-item--video) {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .main__payment.main__payment--view-only .media-item:not(.one-item):not(.media-item--video) .media-preview {
        height: 260px;
    }
}

/* Standalone personal-message popup (success/view-only pages).
   LIGHT design (the pages' own theme); content mirrors the Explore popup. */
.smsg-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 100px;
    /* Same box as .download-button so the pill lines up 1:1 with its
       siblings (Open in Vault under the player, CTAs in the success card).
       The border-box belongs to that promise: without it the padding was
       added to the min-height and the pill stood 70px tall next to a 46px
       one (owner 2026-09-17). */
    box-sizing: border-box;
    min-height: 46px;
    padding: 12px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, hsla(258 100% 69% / .95), hsla(241 100% 40% / .95) 58%, hsla(290 100% 26% / .95));
    cursor: pointer;
    /* The collapsed buyer-auth block next to this button overlaps it
       transparently on the success card and swallowed every click ("button
       not clickable"). Lift the pill above unpositioned siblings and force
       pointer events even under a pointer-events:none parent. */
    position: relative;
    z-index: 30;
    pointer-events: auto;
}
.smsg-card {
    max-width: 480px;
    width: min(480px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
}
.smsg-card *, .smsg-card *::before, .smsg-card *::after { box-sizing: border-box; }
.smsg-eyebrow {
    margin: 0 0 4px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    text-align: left;
}
.smsg-title {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    font-size: 17px;
}
.smsg-info-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: none;
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.smsg-info { margin-top: 8px; }
.smsg-tiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}
.smsg-tier {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 6px 10px;
    text-align: center;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.smsg-tier.sel {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.smsg-tier__name { display: block; font-size: 12px; color: var(--muted); }
.smsg-tier__amt { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--ink); }
.smsg-tier__banner {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, hsla(258 100% 69% / .95), hsla(241 100% 40% / .95));
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.smsg-hint {
    margin: 8px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--soft);
}
.smsg-hint--left { text-align: left; }
.smsg-field { position: relative; margin-top: 10px; }
.smsg-textarea, .smsg-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
    font-size: 13px;
    background: var(--wallet);
    color: var(--ink);
}
.smsg-input { margin-top: 10px; }
.smsg-textarea { min-height: 104px; resize: vertical; display: block; }
.smsg-textarea:focus, .smsg-input:focus { outline: none; border-color: var(--accent); background: #fff; }
.smsg-counter {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 11px;
    color: var(--muted);
    pointer-events: none;
}
.smsg-photo-row {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 16px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.smsg-photo-row__price { color: var(--soft); font-weight: 600; }
.smsg-chips { justify-content: flex-start; margin-top: 8px; margin-bottom: 0; }
.smsg-chip { width: auto; height: auto; padding: 4px 26px 4px 10px; font-size: 12px; color: var(--ink); background: var(--wallet); overflow: visible; }
.smsg-providers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.smsg-provider {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    /* Softly tinted, not plain white (user 2026-08-04 second round). */
    background: var(--wallet);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px 8px 12px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.smsg-provider.sel {
    background: var(--active);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.smsg-provider__badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, hsla(258 100% 69% / .95), hsla(241 100% 40% / .95));
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.smsg-provider__icon { font-size: 18px; line-height: 1; }
.smsg-provider__name { font-size: 13px; font-weight: 700; color: var(--ink); }
.smsg-provider__amt { font-size: 13px; font-weight: 700; color: var(--ink); }
.smsg-submit {
    width: 100%;
    margin-top: 14px;
    border: none;
    border-radius: 999px;
    padding: 13px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, hsla(258 100% 69% / .95), hsla(241 100% 40% / .95) 58%, hsla(290 100% 26% / .95));
    cursor: pointer;
}
.smsg-submit:disabled { opacity: .6; cursor: wait; }
.smsg-note {
    margin: 8px 0 0;
    text-align: center;
    font-size: 11px;
    color: var(--muted);
}

/* Tip on the sales page: the same purple pill as the message button, and a
   dialog that borrows the picture modal's card. */
.tip-add {
    display: flex;
    justify-content: flex-start;
    /* The column sets an 18px gap between its cards; the tip belongs to the
       card below it, so most of that is pulled back. */
    margin: 0 0 -12px;
}

/* Not a second purple pill: light grey with our purple outline, so it reads
   as an offer beside the checkout rather than competing with the buy button.
   Raised on a purple edge so it looks like a key you can press - it sinks
   when you do. */
.tip-add__open {
    opacity: 1;
    background: linear-gradient(180deg, #fff, hsl(240 20% 93%));
    border: 3px solid hsl(258 100% 69%);
    color: hsl(240 12% 14%);
    font-weight: 800;
    /* The depth comes from the surface, not from a second ring underneath:
       a light edge at the top, a soft shadow inside the lower rim, and one
       diffuse shadow on the page. */
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .95),
        inset 0 -4px 7px rgba(72, 52, 160, .14),
        0 6px 14px rgba(93, 70, 255, .2);
}

/* Phones, checkout only (user 2026-09-16): the tip takes the place of the
   personal-message button inside the card, under the same divider. The
   message button and the tip beside the card are hidden there, and the
   gallery sits 20px under the card. */
.tip-add.tip-add--in-card {
    display: none;
}

@media (max-width: 900px) {
    .tip-add.tip-add--in-card {
        display: flex;
        justify-content: center;
        margin: 14px 0 0;
        padding-top: 12px;
        border-top: 1px solid hsl(244 20% 78% / .7);
    }

    .msg-add {
        display: none;
    }

    .main__payment--checkout .main__checkout-sidebar__inner > .tip-add {
        display: none;
    }

    .main__payment--checkout .main__checkout-gallery {
        margin-top: 20px;
    }
}

.tip-add__open:hover {
    background: linear-gradient(180deg, #fff, hsl(240 20% 95%));
    filter: none;
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .95),
        inset 0 -4px 7px rgba(72, 52, 160, .12),
        0 10px 20px rgba(93, 70, 255, .24);
}

.tip-add__open:active {
    transform: translateY(2px);
    background: linear-gradient(180deg, hsl(240 20% 93%), #fff);
    box-shadow:
        inset 0 3px 6px rgba(72, 52, 160, .18),
        0 2px 6px rgba(93, 70, 255, .16);
}

/* Above everything on the page, including the media tiles. */
#tipModal { z-index: 9998; }

/* The paid moment: the whole card goes green over the form. */
.tip-success {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    background: linear-gradient(160deg, #21b35f 0%, #0e8c46 100%);
    animation: tip-success-in .26s ease-out both;
}

.tip-success[hidden] { display: none; }

.tip-success__badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    animation: tip-success-pop .5s cubic-bezier(.18, 1.25, .4, 1) both;
}

/* The ring that flies off: a reward, not just a confirmation. */
.tip-success__badge::after {
    content: '';
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .6);
    animation: tip-success-ring .85s .18s ease-out both;
}

.tip-success__check {
    width: 52px;
    height: 52px;
    fill: none;
    stroke: #fff;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: tip-success-draw .42s .24s ease-out forwards;
}

.tip-success__text {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    animation: tip-success-in .3s .3s ease-out both;
}

@keyframes tip-success-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes tip-success-pop {
    0% { opacity: 0; transform: scale(.4); }
    70% { transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes tip-success-ring {
    from { opacity: .85; transform: scale(.8); }
    to { opacity: 0; transform: scale(1.55); }
}

@keyframes tip-success-draw {
    to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tip-success,
    .tip-success__text,
    .tip-success__badge,
    .tip-success__badge::after,
    .tip-success__check { animation: none; }
    .tip-success__check { stroke-dashoffset: 0; }
    .tip-success__badge::after { opacity: 0; }
}

/* A named way out, not a bare cross in the corner. */
.tip-close {
    position: absolute;
    top: 10px;
    right: 12px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1.5px solid #d9d9e6;
    background: #fff;
    color: var(--soft, #5a5a6b);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.tip-close:hover {
    border-color: hsl(258 100% 69%);
    color: var(--ink, #1b1b24);
}

/* The dialog sits on the WHITE card of the checkout page, not on the dark
   cam page: everything here is dark-on-light, or it is invisible. */
.tip-amounts {
    display: flex;
    gap: 8px;
    margin: 14px 0 10px;
}

.tip-amount {
    flex: 1;
    min-height: 44px;
    border-radius: 12px;
    border: 1.5px solid #d9d9e6;
    background: #f4f4fa;
    color: var(--ink, #1b1b24);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.tip-amount:hover { background: #ececf6; }

.tip-amount[aria-pressed="true"] {
    border-color: hsl(258 100% 69%);
    background: hsl(258 100% 96%);
    color: hsl(258 60% 30%);
}

.tip-label {
    display: block;
    margin-top: 12px;
    margin-bottom: 4px;
    text-align: left;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--soft, #5a5a6b);
}

.tip-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1.5px solid #d9d9e6;
    background: #fff;
    color: var(--ink, #1b1b24);
    font: inherit;
}

.tip-input:focus {
    outline: none;
    border-color: hsl(258 100% 69%);
}

.tip-textarea {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 4px;
}

.tip-add--center {
    justify-content: center;
    margin: 0 0 14px;
}

/* Row above the view-only media: the tip stays centred, and on a delivery
   page the browser or Telegram remembered, "Return to checkout" sits at the
   right edge on the same line - phones included (user 2026-09-22). A thin
   purple link, not a button: it undoes nothing, it only opens the checkout
   for this visit. */
.view-only-topbar {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: min(920px, 100%);
    min-height: 24px;
    margin: 0 auto 14px;
}

.view-only-topbar .tip-add--center {
    margin: 0;
}

.return-to-checkout {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.return-to-checkout:hover {
    text-decoration: underline;
}

.view-only-topbar .return-to-checkout {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Downloadable delivery page: the link goes above the success card, right
   aligned; order keeps it first when the phone layout reorders the column. */
.return-to-checkout-row {
    display: flex;
    justify-content: flex-end;
    order: -2;
    margin: 0 0 6px;
}

/* AI disclosure under the media tiles: small and quiet, not a call-out (owner 2026-09-30). */
.ai-origin-note {
    display: inline-flex;
    width: fit-content;
    align-self: flex-start;
    align-items: center;
    gap: .35rem;
    margin: .6rem 0 0;
    padding: .18rem .6rem;
    border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .85;
}