.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: 15px 36px;
    border: 1px solid transparent;
    font-family: var(--font-ui);
    font-size: var(--t1);
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    transition: all var(--dur-2) var(--ease-out);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

/* Primary — gold fill */
.btn--primary {
    background: var(--gold);
    color: var(--void);
    border-color: var(--gold);
}
.btn--primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    box-shadow: 0 0 32px rgba(184,150,62,.3);
}

/* Outline */
.btn--outline {
    background: transparent;
    color: var(--cream);
    border-color: rgba(242,234,216,.25);
}
.btn--outline:hover {
    border-color: var(--gold);
    color: var(--gold);
}

/* Ghost — on dark photos */
.btn--ghost {
    background: rgba(6,6,6,.4);
    color: var(--parchment);
    border-color: rgba(242,234,216,.2);
    backdrop-filter: blur(12px);
}
.btn--ghost:hover {
    background: rgba(6,6,6,.7);
    border-color: rgba(242,234,216,.45);
}

.btn--lg { padding: 18px 52px; font-size: var(--t2); }
.btn--sm { padding: 10px 22px; font-size: 10px; letter-spacing: .22em; }
.btn--full { width: 100%; }
.btn:disabled { opacity: .3; pointer-events: none; }

.cart-plus-icon {
    width: 15px;
    height: 15px;
    min-width: 15px;
    transition: transform var(--dur-2);
}
.btn:hover .cart-plus-icon {
    transform: translateX(-1px) scale(1.06);
}

.btn-spinner {
    width: 14px; height: 14px;
    border: 1.5px solid rgba(6,6,6,.2);
    border-top-color: var(--void);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }