@layer components {
    .add_to_card {
        display: inline-block;

        & .add_to_card__stepper {
            display: inline-flex;
            align-items: stretch;
            background: var(--color-bg-surface);
            border: 1px solid var(--color-border-glass);
            border-radius: var(--radius-md);
            backdrop-filter: blur(var(--glass-blur));
            -webkit-backdrop-filter: blur(var(--glass-blur));
            overflow: hidden;
        }

        & .add_to_card__count {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 2.5rem;
            font-family: var(--font-family-heading);
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--color-accent-red);
            line-height: 1;
            padding: 0 var(--space-sm);
        }

        & .add_to_card__controls {
            display: flex;
            flex-direction: column;
            border-left: 1px solid var(--color-border-glass);
        }

        & .add_to_card__btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            width: 1.75rem;
            border: none;
            background: transparent;
            color: var(--color-text-main);
            cursor: pointer;
            transition: background var(--transition-physical), color var(--transition-physical);
            padding: 1px;
            line-height: 1;

            &:not(:last-child) {
                border-bottom: 1px solid var(--color-border-glass);
            }

            &[data-variant="plus"]:hover:not(:disabled) {
                background: rgba(69, 123, 157, 0.2);
                color: var(--color-accent-blue);
            }

            &[data-variant="plus"]:disabled {
                opacity: 0.3;
                cursor: not-allowed;
            }

            &[data-variant="minus"]:hover {
                background: rgba(230, 57, 70, 0.15);
                color: var(--color-accent-red);
            }
        }
    }
}

.card-flyer {
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 0 20px var(--color-accent-red);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-flyer.is-back {
    box-shadow: 0 0 20px #457B9D;
}

.card-flyer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: translateX(-100%);
    animation: flyerShimmer 1.2s ease-in-out forwards;
}

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