/* Don Shop in de topbalk: een gouden knop met een fonkelend diamantje en af en toe een glans erover. */
.shop-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    overflow: hidden;
    padding: .3rem .75rem;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: #241904;
    background: linear-gradient(135deg, #f8e39a 0%, #dcae48 50%, #a87525 100%);
    box-shadow: 0 0 0 1px rgb(248 227 154 / .45), 0 0 14px rgb(220 174 72 / .35);
    transition: filter .15s, box-shadow .15s;
}
.shop-btn:hover,
.shop-btn[aria-current=page] {
    filter: brightness(1.08);
    box-shadow: 0 0 0 1px rgb(248 227 154 / .7), 0 0 20px rgb(220 174 72 / .55);
}
.shop-btn::after {
    content: "";
    position: absolute;
    inset: -50% auto -50% -60%;
    width: 40%;
    transform: rotate(20deg);
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / .65), transparent);
    animation: shop-shine 4.5s ease-in-out infinite;
    pointer-events: none;
}
.shop-btn .shop-gem {
    width: 20px;
    height: 20px;
    margin: -3px 0;
    flex-shrink: 0;
}
.shop-btn .shop-glinster {
    position: absolute;
    left: 13px;
    top: 3px;
    width: 8px;
    height: 8px;
    pointer-events: none;
    background: radial-gradient(circle, #fff 0 20%, rgb(255 255 255 / 0) 70%);
    opacity: 0;
    animation: nav-glinster 3s ease-in-out infinite;
}
/* Op de gsm alleen het diamantje, zonder gouden knop eromheen. */
.shop-btn.shop-btn-icon { background: none; box-shadow: none; border-radius: 6px; }
.shop-btn.shop-btn-icon::after { display: none; }
.shop-btn.shop-btn-icon:hover,
.shop-btn.shop-btn-icon[aria-current=page] { filter: none; box-shadow: none; background: rgb(201 164 92 / .14); }
.shop-btn-icon .shop-gem { margin: 0; width: 24px; height: 24px; }
.shop-btn-icon .shop-glinster { left: 8px; top: 3px; }
.shop-btn-icon {
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    padding: 0;
}
@keyframes shop-shine {
    0%, 70% { left: -60%; }
    100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
    .shop-btn::after, .shop-btn .shop-gem, .shop-btn .shop-glinster { animation: none; }
    .shop-btn::after { display: none; }
}