.srv-hero--shop {
    position: relative;
    padding: 6rem 0 5rem;
    background-image: url("../../img/shop/shop-hero-bg.png"); /* <-- your file path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff !important;
}

    /* Dark overlay so text stays readable */
    .srv-hero--shop::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 120deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35) );
    }

    /* Keep content above the overlay */
    .srv-hero--shop .container-xxl,
    .srv-hero--shop .container {
        position: relative;
        z-index: 1;
    }

/* Small-screen padding tweak */
@media (max-width: 767.98px) {
    .srv-hero--shop {
        padding: 4.5rem 0 4rem;
    }
}

@media (min-width: 992px) {
    .srv-hero--shop {
        padding: 6rem 0 5rem;
    }
}

.srv-hero--shop .eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
}

.srv-hero-media {
    position: relative;
}

.srv-hero-card {
    border: none;
    border-radius: 1.5rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
    padding: 1.75rem;
    background: #ffffff;
}

.srv-hero-badge {
    position: absolute;
    right: -0.75rem;
    bottom: -0.75rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: #00a2a5; /* brand accent */
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(0, 162, 165, 0.4);
}

@media (max-width: 767.98px) {
    .srv-hero-badge {
        right: 0.5rem;
        bottom: -1.2rem;
    }
}

/* Product image wrapper: no tinted background, just a clean frame */
.awc-card--product .product-img-wrap {
    position: relative;
    height: 220px; /* tweak as needed */
    padding: 0.75rem; /* small inner padding around the image */
    background: transparent; /* was #f3f5f6 – remove the gray */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    
}

/* Show the entire image, keep it nicely framed */
.awc-card--product .product-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* full image visible */
    display: block;
    background: #ffffff; /* image “tile” stays white */
    border-radius: 0.75rem; /* optional: rounded image corners */
    /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); subtle modern lift */
}


/* Modern card styling */
.awc-card--product {
    border: none;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
    background-color: #ffffff;
    transition: transform 160ms ease-out, box-shadow 160ms ease-out;
    border: solid 1px #83b3ee;
}

    .awc-card--product:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 55px rgba(0, 0, 0, 0.09);
    }

    /* Typography + spacing tweaks for a clean, modern feel */
    .awc-card--product .awc-eyebrow {
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.78rem;
        opacity: 0.85;
    }

    .awc-card--product .awc-title {
        font-weight: 600;
    }

    .awc-card--product .awc-lead {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Make the button span the width nicely on mobile, stay neat on desktop */
    .awc-card--product .btn {
        align-self: flex-start;
        padding-inline: 1.6rem;
    }

/* Disabled button state */
.btn.is-disabled,
.btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
    cursor: default;
}

/* Image badge */
.product-img-wrap {
    position: relative;
}

.product-badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.product-badge--soon {
    background: rgba(255, 145, 0, 0.9); /* tweak to your brand */
}

.product-text-section {
    background-color: #e6eef8;
    
}