/* -------------------------------------------------------------------------
 * Free trial flash on a product card.
 *
 * Built as the mirror of the .sale flash the landing cards use: same corner
 * ribbon, same 8px offset from the top, same padding, shadow and 12px
 * extra-bold white Manrope, flipped to the opposite corner. Kept visually
 * identical to the theme's copy in assets/css/wpbay-product-card-trial.css so
 * a trial reads the same wherever a card is rendered.
 *
 * Green rather than the sale's amber, matching the #148a14 these cards already
 * use for price.
 *
 * Pinned over the artwork rather than added to the card body on purpose. This
 * card is laid out by eight different stylesheets and sits in grids that
 * stretch every card to the tallest in the row; measured on a live listing the
 * slack above the price row falls to 20px once a title wraps to three lines, so
 * an in-flow line would push that row down and grow every card beside it. Out
 * of the flow, the flash costs no height anywhere.
 * ---------------------------------------------------------------------- */

/* The flash's containing block. Everything that styles this card leaves the
   image link static, so claiming it here is safe. */
.wpbay-product-card__image {
    position: relative;
}

.wpbay-product-card__trial {
    position: absolute;
    top: 8px;
    left: 0;
    z-index: 2;
    display: inline-flex;
    box-sizing: border-box;
    max-width: calc(100% - 24px);
    align-items: center;
    justify-content: center;
    /* Mirrored: the sale flash is rounded on its left, this on its right. */
    border-radius: 0 8px 8px 0;
    background: linear-gradient(90deg, rgba(16, 112, 26, 1) 0%, rgba(20, 138, 20, 1) 100%);
    box-shadow: 0 1px 2px #0000004c;
    gap: 4px;
    padding: 4px 6px 4px 4px;
    color: #fff;
    font-family: var(--font-family-manrope, Manrope, Arial, sans-serif);
    font-size: 12px;
    font-weight: 800;
    line-height: normal;
    white-space: nowrap;
    text-decoration: none;
    /* Sits inside the image link; clicks belong to the link underneath. */
    pointer-events: none;
}

.wpbay-product-card__trial .trial-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

@media (max-width: 480px) {
    .wpbay-product-card__trial {
        top: 6px;
        padding: 3px 5px 3px 3px;
        font-size: 11px;
    }

    .wpbay-product-card__trial .trial-icon {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }
}