.btn-merch {
    --bg: #e5e7eb; /*primary background (customize) */
    --fg: #7b797e; /* primary text color */
    --ring: 0 4px 18px rgba(107,114,128,0.25);
    --hover-bg: #000;
    --hover-fg: #fff;
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    color: var(--fg);
    background: var(--bg);
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    box-shadow: 0 6px 18px rgba(18, 26, 40, 0.06);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    height: 30px;
    width: 28px;
}

    /* Icon slot example (optional) */
    .btn-merch svg {
        width: 1em;
        height: 1em;
        display: inline-block;
        vertical-align: middle;
    }

    /* Hover / active */
    .btn-merch:hover {
        /*transform: translateY(-3px);*/
        box-shadow: var(--ring);
        background: var(--hover-bg);
        color: var(--hover-fg);
    }

    .btn-merch:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 10px rgba(18,26,40,0.08);
    }

    /* Keyboard focus (accessible) */
    .btn-merch:focus {
        outline: none;
        z-index: 1000;
    }

    .btn-merch:focus-visible {
        box-shadow: var(--ring);
        transform: translateY(-3px);
        border: 1px solid rgba(59,130,246,0.12);
    }

    /* Disabled state */
    .btn-merch:disabled,
    .btn-merch[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* Ghost / secondary variant */
.btn-ghost {
    --bg: transparent;
    --fg: #0f172a;
    background: linear-gradient(180deg, rgba(15,23,42,0.02), rgba(15,23,42,0.00));
    border: 1px solid rgba(15,23,42,0.06);
    color: var(--fg);
    box-shadow: none;
    border-radius: 10px;
}

    .btn-ghost:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(2,6,23,0.04);
    }

/* Small / large helpers */
.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

.btn-lg {
    padding: 0.8rem 1.25rem;
    font-size: 1.05rem;
    border-radius: 14px;
}