/* Desktop (base) - apply to all unless overridden */
.btn-v2-primary {
    --original-btn-v2-bg: var(--wds-btn-v2-bg, #ffffff);
    --original-btn-v2-bg-hover: var(--wds-btn-v2-bg-hover, #1f2733);
    --original-btn-v2-text: var(--wds-btn-v2-text, #1f2733);
    --original-btn-v2-text-hover: var(--wds-btn-v2-text-hover, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 28px;
    min-height: 52px;
    border-radius: 16px 0;
    background-color: var(--original-btn-v2-bg);
    color: var(--original-btn-v2-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    line-height: 1.2;
    border: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.btn-v2-primary:hover,
.btn-v2-primary:focus {
    background-color: var(--original-btn-v2-bg-hover);
    color: var(--original-btn-v2-text-hover);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    outline: none;
    text-decoration: none;
}

.btn-v2-primary:active {
    background-color: var(--original-btn-v2-bg-hover);
    color: var(--original-btn-v2-text-hover);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.btn-v2-primary svg {
    width: 18px;
    height: 18px;
    color: inherit;
}

.btn-v2-secondary {
    --original-btn-v2-bg-hover: var(--wds-btn-v2-bg-hover, #1f2733);
    --original-btn-v2-text-hover: var(--wds-btn-v2-text-hover, #ffffff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 16px 28px;
    min-height: 52px;
    border-radius: 16px 0;
    background-color: var(--wds-btn-v2-border, #1f2733);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    line-height: 1.2;
    border: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

@supports (background-color: color-mix(in srgb, #000 50%, #fff)) {
    .btn-v2-secondary {
        background-color: color-mix(in srgb, var(--wds-btn-v2-border, #1f2733) 86%, #ffffff);
    }
}

.btn-v2-secondary:hover,
.btn-v2-secondary:focus {
    background-color: var(--original-btn-v2-bg-hover);
    color: var(--original-btn-v2-text-hover);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
    outline: none;
    text-decoration: none;
}

.btn-v2-secondary:active {
    background-color: var(--original-btn-v2-bg-hover);
    color: var(--original-btn-v2-text-hover);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}

.btn-v2-secondary svg {
    width: 18px;
    height: 18px;
    color: inherit;
}

.original-btn-style-2__button--primary {
    border-radius: 16px 0;
    border: none;
    background-color: var(--wds-btn-v2-bg, #1f2733);
    color: var(--wds-btn-v2-text, #ffffff);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

.original-btn-style-2__button--primary:hover,
.original-btn-style-2__button--primary:focus {
    background-color: var(--wds-btn-v2-bg-hover, var(--wds-btn-v2-bg, #1f2733));
    color: var(--wds-btn-v2-text-hover, #ffffff);
    transform: none;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

.original-btn-style-2__button--secondary {
    border-radius: 16px 0;
    border: none;
    background-color: var(--wds-btn-v2-border, #1f2733);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: background-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

@supports (background-color: color-mix(in srgb, #000 50%, #fff)) {
    .original-btn-style-2__button--secondary {
        background-color: color-mix(in srgb, var(--wds-btn-v2-border, #1f2733) 86%, #ffffff);
    }
}

.original-btn-style-2__button--secondary:hover,
.original-btn-style-2__button--secondary:focus {
    background-color: var(--wds-btn-v2-bg-hover, var(--wds-btn-v2-bg, #1f2733));
    color: var(--wds-btn-v2-text-hover, #ffffff);
    transform: none;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}

/* BREAKPOINTS Large screens cascade up */
@media (min-width: 1280px) {
    /* Placeholder for large screens */
}

@media (min-width: 1440px) {
    /* Placeholder for larger desktops */
}

@media (min-width: 1920px) {
    /* Placeholder for ultra-wide screens */
}

/* Small screens cascade down */
/* Tablet */
@media (max-width: 991px) {
    .btn-v2-primary {
        padding: 14px 24px;
        letter-spacing: 0.12em;
    }

    .btn-v2-secondary {
        padding: 14px 24px;
        letter-spacing: 0.12em;
    }
}

/* Mobile Landscape */
@media (max-width: 767px) {
    .btn-v2-primary {
        padding: 14px 20px;
    }

    .btn-v2-secondary {
        padding: 14px 20px;
    }
}

/* Mobile Portrait */
@media (max-width: 478px) {
    .btn-v2-primary {
        padding: 12px 18px;
        letter-spacing: 0.1em;
    }

    .btn-v2-secondary {
        padding: 12px 18px;
        letter-spacing: 0.1em;
    }
}