/* Promotion overlay for unit photos (VDP main image and SRP cards).
   Everything is sized off --u, a fraction of the image box width, so it scales on every screen.
   .promo-media / .promo-card-media are only added to a photo box when it shows a promo,
   so none of these rules touch regular units. */
.promo-media,
.promo-card-media {
    container-type: inline-size;
}

/* VDP main photo fills the framed box instead of letterboxing */
.promo-media #main-image {
    width: 100%;
    object-fit: cover;
}

/* Card photo box, with a red frame matching the VDP main image border.
   The frame hugs the photo: feed photos are 800x600 (4:3), so the box is 4:3 at the
   card's usual 225px photo height (300px wide), shrinking on narrower cards. */
.promo-card-media {
    position: relative;
    box-sizing: content-box;
    /* !important beats the SRP's `.grid .inv-content a { width: 100% }` */
    width: min(100% - 10px, 300px) !important;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    border: 5px solid #A51336;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    overflow: hidden;
}

/* Single-column cards on small screens: fill the card's content width (still 4:3, so nothing is cropped) */
@media only screen and (max-width: 767px) {
    .promo-card-media {
        width: calc(100% - 10px) !important;
    }
}

.promo-card-media > a {
    display: block;
    height: 100%;
}

/* The frame carries the rounded corners; the whole photo fills it */
.promo-card-media > img,
.promo-card-media > a > img {
    border-radius: 0 !important;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    object-fit: cover !important;
}

/* List view photos are square-cornered */
.list .promo-card-media {
    border-radius: 0;
}

.promo-overlay {
    --u: 1cqw;
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    font-family: 'Open Sans', sans-serif;
    line-height: 1;
}

/* Cards are smaller, so scale the overlay up relative to the photo */
.promo-overlay--card {
    --u: 1.15cqw;
}

.promo-overlay sup {
    font-size: 0.5em;
    top: -0.8em;
}

.promo-headline {
    position: absolute;
    top: calc(3 * var(--u));
    left: calc(3 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transform: rotate(-6deg);
    transform-origin: top left;
    filter: drop-shadow(0 calc(0.4 * var(--u)) calc(0.8 * var(--u)) rgba(0, 0, 0, 0.45));
}

.promo-headline-top,
.promo-headline-main {
    background: #110805;
    color: #fff;
    font-weight: 900;
    padding: calc(0.6 * var(--u)) calc(2 * var(--u));
}

.promo-headline-top {
    font-size: calc(4.2 * var(--u));
}

.promo-headline-main {
    color: #EA223F;
    font-size: calc(8 * var(--u));
    letter-spacing: calc(-0.1 * var(--u));
}

.promo-headline-ribbon {
    background: #EA223F;
    color: #fff;
    font-size: calc(3.4 * var(--u));
    font-weight: 800;
    padding: var(--u) calc(2.5 * var(--u));
    margin-left: calc(4 * var(--u));
    margin-top: calc(-0.4 * var(--u));
}

.promo-weekly {
    position: absolute;
    top: calc(2.5 * var(--u));
    right: calc(2.5 * var(--u));
    /* floor keeps the badge wide enough for the minimum label sizes below */
    width: max(calc(20 * var(--u)), 72px);
    aspect-ratio: 1 / 1.1;
    background: #fff;
    border: calc(0.8 * var(--u)) solid #102A2C;
    border-radius: calc(3 * var(--u)) calc(3 * var(--u)) 50% 50% / calc(3 * var(--u)) calc(3 * var(--u)) 40% 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(0.4 * var(--u));
    color: #EA223F;
    font-weight: 900;
    box-shadow: 0 calc(0.4 * var(--u)) calc(1.2 * var(--u)) rgba(0, 0, 0, 0.35);
}

.promo-weekly-from {
    color: #102A2C;
    font-size: max(calc(1.7 * var(--u)), 7px);
    font-weight: 700;
}

.promo-weekly-amount {
    font-size: calc(7 * var(--u));
}

.promo-weekly-per {
    color: #110805;
    font-size: calc(3.2 * var(--u));
}

.promo-weekly-oac {
    color: #102A2C;
    font-size: max(calc(1.6 * var(--u)), 7px);
}

.promo-price {
    position: absolute;
    right: calc(3 * var(--u));
    bottom: calc(14 * var(--u));
    background: #fff;
    border-radius: calc(1.5 * var(--u));
    padding: calc(1.6 * var(--u)) calc(2.4 * var(--u));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(0.6 * var(--u));
    box-shadow: 0 calc(0.4 * var(--u)) calc(1.5 * var(--u)) rgba(0, 0, 0, 0.35);
}

/* Cards have no title bar, so the price card sits flush in the bottom-right corner,
   covering the small Power Garage logo some feed photos have there */
.promo-overlay--card .promo-price {
    bottom: 0;
    right: 0;
    border-radius: calc(1.5 * var(--u)) 0 0 0;
}

/* Frames too small to fit it legibly (2-up cards on tablets) skip the price card;
   the price still shows right under the photo */
@container (max-width: 240px) {
    .promo-overlay--card .promo-price {
        display: none;
    }
}

.promo-price-msrp {
    color: #5E6366;
    font-size: max(calc(2.6 * var(--u)), 9px);
    font-weight: 700;
}

.promo-price-amount {
    color: #110805;
    font-size: calc(6.4 * var(--u));
    font-weight: 900;
}

.promo-price-save {
    color: #B0192B;
    font-size: calc(3.4 * var(--u));
    font-weight: 800;
}

.promo-price-approved {
    background: #1E7A3C;
    color: #fff;
    border-radius: calc(3 * var(--u));
    padding: calc(0.8 * var(--u)) calc(2 * var(--u));
    font-size: max(calc(2.1 * var(--u)), 8px);
    font-weight: 800;
    white-space: nowrap;
}

.promo-title-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #102A2C;
    border-top: calc(0.6 * var(--u)) solid #EA223F;
    color: #fff;
    padding: calc(1.8 * var(--u)) calc(3 * var(--u));
    display: flex;
    flex-direction: column;
    gap: calc(0.5 * var(--u));
}

.promo-title-make {
    font-size: calc(3.2 * var(--u));
    font-weight: 600;
    text-transform: uppercase;
}

.promo-title-model {
    font-size: calc(5 * var(--u));
    font-weight: 900;
    text-transform: uppercase;
}