/* === Global wrapper ================================================= */

.affiliate-product {
    display: flex
;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    justify-content: center;
    align-content: center;
    border: 2px solid #215328;
    padding: 15px;
    max-height: 400px;
    overflow: hidden;
}
.affiliate-disclaimer {
    color: #606060;
    font-size: 9px;
    line-height: 1em !important;
    margin-top: 10px;
    padding: 0px !important;
    display: inline-block;
}

/* === left column (image) =========================================== */
.affiliate-product-image{

    width:100%;
    height:auto;
    display:block;
}

/* === right column =================================================== */
.affiliate-product-content{
    flex:1 1 280px;           /* grow but never smaller than 280 px */
}

/* product name */
.affiliate-product-name{
    margin:0 0 .5rem 0;
    font-size:1.3rem;
    line-height:1.25;
}

/* meta row: logo – stock – price */
.affiliate-product-meta{
    display:flex;

    flex-wrap:wrap;
    gap:0.75rem;
    margin-bottom:.75rem;
    flex-direction: column;
}

.affiliate-product-site-logo img{
    max-height:32px;
    width:auto;
}

.affiliate-product-stock{
    font-weight:600;
}
.in-stock{ color:#17803c; }            /* green */
.out-of-stock{ color:#c01616; }        /* red */

/* price + sale tag */
.affiliate-product-price{ margin:0; }
.affiliate-product-old-price{ margin:0 0 .75rem 0; }

.affiliate-product-sale{
    background:#c01616;
    color:#fff;
    padding:0 0.35em;
    border-radius:2px;
    font-size:.8em;
    margin-left:.4em;
}

/* buy button (inherits WP core button styles as well) */
.affiliate-product-button{
    display:inline-block;
    padding:.6em 1.6em;
    border-radius:4px;
    background-color: #215328 !important;
}

/* === responsive stacking =========================================== */
@media (max-width:640px){
    .affiliate-product{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }
    .affiliate-product-image{
        max-width:220px;
    }
    .affiliate-product-meta{
        justify-content:center;
    }
}
/* ------------------------------------------------------------------ */
/* 50 / 50 layout for image (left) and content (right) on wide screens */
/* ------------------------------------------------------------------ */
.affiliate-product-image,
.affiliate-product-content{
    /* Take exactly half of the flex-row */
    flex: 0 0 30%;

}

/* let the image fill its half without stretching */
.affiliate-product-image{
    width: 100%;
    height: auto;
    object-fit: contain;   /* keeps aspect-ratio, leaves blank space if needed */
}

/* ------------------------------------------------------------------ */
/* Mobile: keep your original stacking                               */
/* ------------------------------------------------------------------ */
@media (max-width:640px){
    .affiliate-product{
        flex-direction: column;
        align-items: center;
        text-align: center;
        max-height: none;
    }
    .affiliate-product-image,
    .affiliate-product-content{
        flex: 0 0 100%;
        max-width: 100%;
    }
}