@layer components {
    .card-placeholder {
        background: var(--color-bg-surface-glass);
        border: 1px solid var(--color-border-glass);
        border-radius: var(--radius-lg);
        backdrop-filter: blur(var(--glass-blur));
        -webkit-backdrop-filter: blur(var(--glass-blur));
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;

        &[data-orientation="horizontal"] {
            @media (min-width: 640px) {
                grid-column: span 2;
            }

            & .card-placeholder__image-wrapper {
                aspect-ratio: 1.57;
            }
        }

        & .card-placeholder__image-wrapper {
            position: relative;
            aspect-ratio: 3/4;
            width: 100%;
            overflow: hidden;
            background: color-mix(in srgb, var(--color-text-heading) 8%, transparent);
        }

        & .card-placeholder__content {
            padding: var(--space-md);
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            gap: var(--space-sm);
        }

        & .card-placeholder__title {
            height: 1.125rem;
            width: 70%;
            background: color-mix(in srgb, var(--color-text-heading) 8%, transparent);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        & .card-placeholder__details {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-xs);
            margin-bottom: auto;
        }

        & .card-placeholder__detail {
            height: 1.25rem;
            width: 60px;
            background: color-mix(in srgb, var(--color-text-heading) 5%, transparent);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        & .card-placeholder__footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: var(--space-sm);
            padding-top: var(--space-sm);
            border-top: 1px solid var(--color-border-glass);
        }

        & .card-placeholder__price {
            height: 1.75rem;
            width: 80px;
            background: color-mix(in srgb, var(--color-text-heading) 8%, transparent);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        & .card-placeholder__button {
            height: 2rem;
            width: 3rem;
            background: color-mix(in srgb, var(--color-text-heading) 8%, transparent);
            border-radius: var(--radius-sm);
            overflow: hidden;
        }

        & .card-placeholder__image-wrapper,
        & .card-placeholder__title,
        & .card-placeholder__detail,
        & .card-placeholder__price,
        & .card-placeholder__button {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    90deg,
                    transparent 0%,
                    color-mix(in srgb, var(--color-text-heading) 14%, transparent) 50%,
                    transparent 100%
                );
                transform: translateX(-100%);
                animation: card-shimmer 1.8s ease-in-out infinite;
            }
        }

        & .card-placeholder__title::after {
            animation-delay: 0.05s;
        }

        & .card-placeholder__detail:nth-child(2)::after {
            animation-delay: 0.1s;
        }

        & .card-placeholder__price::after {
            animation-delay: 0.15s;
        }

        & .card-placeholder__button::after {
            animation-delay: 0.2s;
        }
    }

    @keyframes card-shimmer {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
}