.gloss-gold {
    background: linear-gradient(
        145deg,
        #fef7d3 0%,
        #f5d36f 25%,
        #e5aa32 50%,
        #d49824 60%,
        #f8e7a8 100%
    );
    color: #3a2800;
    padding: 12px 22px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    border: none;
    cursor: pointer;

    display: inline-block !important;
    width: auto !important;
    white-space: nowrap;

    /* centre */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    overflow: hidden;

    box-shadow:
        0 7px 0 #c18c21,
        0 14px 24px rgba(0,0,0,0.25);

    transition: all 0.25s ease;
}

/* Shine overlay (starts off-screen) */
.gloss-gold::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
    opacity: 0;
    transition: all 0.5s ease;
    pointer-events: none;
}

/* Hover — lift + shine sweep */
.gloss-gold:hover {
    transform: translate(-50%, -4px); /* keep centred + move up */
    box-shadow:
        0 10px 0 #a67617,
        0 18px 26px rgba(0,0,0,0.35);
}

.gloss-gold:hover::after {
    left: 140%;       /* sweep across */
    opacity: 1;       /* become visible */
    transition: all 0.7s ease; 
}

/* Pressed */
.gloss-gold:active {
    transform: translate(-50%, 3px);
    box-shadow:
        0 3px 0 #6f5213,
        0 8px 14px rgba(0,0,0,0.25);
}