@layer components {

    .sticky-atc {
        position: fixed;
        inset: auto 0 0;
        z-index: var(--z-sticky);
        padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
        border-top: 1px solid var(--c-line);
        background: var(--c-page);
        box-shadow: 0 -12px 32px -20px rgba(20, 18, 15, .3);
        visibility: hidden;
        transform: translateY(100%);
        transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
    }

    .sticky-atc.is-visible {
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .sticky-atc__inner {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--s-4);
        max-width: calc(var(--w-page) - 2 * var(--gutter));
        margin-inline: auto;
    }

    .sticky-atc__thumb {
        width: 48px;
        height: 48px;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tint, var(--c-tile));
    }

    .sticky-atc__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .sticky-atc__name {
        display: grid;
        font-size: var(--t-sm);
        line-height: 1.35;
    }

    .sticky-atc__name strong {
        overflow: hidden;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .sticky-atc__meta {
        color: var(--c-muted);
        font-variant-numeric: tabular-nums;
    }

    .sticky-atc__btn {
        min-width: 200px;
    }

    @media (max-width: 599px) {
        .sticky-atc__inner {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .sticky-atc__thumb {
            display: none;
        }

        .sticky-atc__btn {
            min-width: 0;
            padding-inline: var(--s-5);
        }
    }

}