/* ==========================================================================
   Product page — final orange CTA box
   Mirrors the ".op-cta" card from our-products.css, but self-contained so it
   can be dropped into the product-item template without the .op-page wrapper.
   ========================================================================== */

.product-cta {
    padding: 40px 0 90px;
}

.product-cta-card {
    position: relative;
    /* .product-grid above is 1250px wide but its .left cell has 50px of inner
       padding, so the visible copy column starts 50px in. Inset the box by the
       same 50px each side (1250 - 100) so its edges line up with that copy. */
    max-width: 1150px;
    margin: 0 auto;
    border: 2px solid #ff6600;
    border-radius: 40px;
    overflow: hidden;
    padding: 90px 40px;
    text-align: center;
    background: radial-gradient(
        ellipse at center,
        #571a00 0%,
        #341000 51%,
        #1a0800 75%,
        #0d0400 88%,
        #000000 100%
    );
}

.product-cta-card h2 {
    color: #fff;
    font-weight: 900;
    letter-spacing: -0.03em;
    font-size: clamp(2.2rem, 4.9vw, 4.375rem);
    line-height: 0.95;
    margin: 0 auto 20px;
    max-width: 900px;
}

.product-cta-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto 36px;
}

.product-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: "Noto Sans", sans-serif;
    font-weight: 800;
    font-size: 16px;
    padding: 1.1rem 2rem;
    border-radius: 12px;
    min-height: 56px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
    border: 2px solid transparent;
    background:
        linear-gradient(105deg, #ffaf3f 4%, #e64600 118%) padding-box,
        linear-gradient(105deg, #ffd699 4%, #e64600 118%) border-box;
    color: #fff;
    transition: all 0.25s ease-in-out;
}

.product-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(255, 149, 0, 0.45);
    color: #fff;
}

@media (max-width: 767px) {
    .product-cta {
        padding: 30px 0 60px;
    }
    .product-cta-card {
        padding: 60px 24px;
        border-radius: 24px;
    }
    .product-cta-btn {
        width: 100%;
    }
}