/* the card's own control — the storefront's buy-button shape, in its colours */
        .card-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 44px;
            color: var(--text-primary);
            text-decoration: none;
            font-size: 0.85rem;
            letter-spacing: 0.04em;
            padding: 0 1.4rem;
            background: linear-gradient(135deg, rgba(230, 57, 70, 0.22), rgba(212, 175, 55, 0.22));
            border-radius: 22px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, background 0.3s ease;
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(192, 192, 192, 0.25);
            -webkit-tap-highlight-color: transparent;
        }

        .card-link span {
            position: relative;
            z-index: 1;
        }

        @media (hover: hover) and (pointer: fine) {
            .card-link:hover {
                transform: translateX(4px);
                background: linear-gradient(135deg, rgba(230, 57, 70, 0.34), rgba(212, 175, 55, 0.34));
                border-color: var(--accent-gold);
                box-shadow: 0 4px 18px rgba(230, 57, 70, 0.3);
            }
        }

        .card-link:active {
            transform: translateX(2px) scale(0.98);
            background: linear-gradient(135deg, rgba(230, 57, 70, 0.34), rgba(212, 175, 55, 0.34));
        }