/* ============================================================
   BEINC — PDP Pre-Footer CTAs (Section CSS)

   Short white section with:
     • 20vh top + bottom padding
     • Full-width horizontal dashed line in vertical+horizontal
       center (no padding — extends edge-to-edge)
     • Two black2 buttons centered both axes (overlay the line)

   Same style across all breakpoints — only padding scales down.
   ============================================================ */


.pdp-cta {
    position: relative;
    background: var(--color-white);
    color: var(--color-black2);
    padding: 20vh 0;
    overflow: clip;
    isolation: isolate;
}

.pdp-cta__line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed var(--color-greyish);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.pdp-cta__buttons {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}

.pdp-cta__btn {
    position: relative;        /* anchor for the dashed-border pseudo */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-pad-y) var(--btn-pad-x);
    background: var(--color-black2);
    color: var(--color-white);
    border-radius: var(--radius);
    font-family: var(--font-btn);
    font-weight: var(--font-weight-btn);
    letter-spacing: var(--tracking-btn);
    font-size: var(--text-btn);
    line-height: 1;
    transition:
        background-color 200ms ease,
        color 200ms ease,
        transform 220ms var(--ease-primary);
    text-decoration: none;
}

/* Dashed border overlay — uses the global guide tokens (1px dashed)
   in the brand greyish colour. Sits in a pseudo-element so toggling
   it on hover doesn't shift layout (no real border = no box-size change). */
.pdp-cta__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border: var(--guide-width) var(--guide-style) var(--color-greyish);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
}

.pdp-cta__btn:hover {
    background: var(--color-white);
    color: var(--color-black2);
    transform: scale(1.04);
}

.pdp-cta__btn:hover::after {
    opacity: 1;
}


/* ============================================================
   RESPONSIVE — TABLET (768–1023px)
   ============================================================ */
@media (max-width: 1023px) {
    .pdp-cta {
        padding: 16vh 0;
    }
}


/* ============================================================
   RESPONSIVE — MOBILE (≤767px)
   ============================================================ */
@media (max-width: 767px) {
    .pdp-cta {
        padding: 12vh 0;
    }

    .pdp-cta__buttons {
        gap: var(--space-3);
        padding: 0 var(--pad-x);
        flex-wrap: wrap;
    }
}