/* OnlyTicket (2026-11-05): product card images whose shape does not suit the card (square / very wide logos) are shown
   whole on a soft blurred copy of themselves, instead of being zoomed and cut off. js/img-fit.js adds .ot-img-fit and the
   --ot-fit-img variable; photos that fit keep the normal full-bleed look. */

/* card with a background image (.ot-pcard .p-img: home sliders, brand pages, state pages) */
.ot-pcard .p-img.ot-img-fit {
    overflow: hidden;
    background-image: none !important;
    background-color: #fff;
}
.ot-pcard .p-img.ot-img-fit::before,
.ot-pcard .p-img.ot-img-fit::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-image: var(--ot-fit-img);
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}
/* blurred copy filling the frame */
.ot-pcard .p-img.ot-img-fit::before {
    inset: -24px;
    background-size: cover;
    filter: blur(22px) saturate(1.15);
    opacity: .45;
    transform: scale(1.1);
}
/* the whole image, centred */
.ot-pcard .p-img.ot-img-fit::after {
    inset: 10px 14px;
    background-size: contain;
    filter: drop-shadow(0 4px 10px rgba(30, 33, 48, .12));
}
/* the HOT DEAL flag and the favourites heart (both already absolutely positioned) stay on top */
.ot-pcard .p-img.ot-img-fit > .p-flag,
.ot-pcard .p-img.ot-img-fit > .ot-fav { z-index: 2; }

/* card with an <img> (.product-grid-card: hot deals, deals, combo deals, /promo) */
.product-grid-card .ot-img-fit-host {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 1rem 1rem 0 0;
    background: #fff;
}
.product-grid-card .ot-img-fit-host::before {
    content: "";
    position: absolute;
    inset: -24px;
    background-image: var(--ot-fit-img);
    background-size: cover;
    background-position: center;
    filter: blur(22px) saturate(1.15);
    opacity: .45;
    transform: scale(1.1);
    pointer-events: none;
}
.product-grid-card img.ot-img-fit {
    position: relative;
    object-fit: contain;
    padding: 10px 14px;
    background: transparent;
    filter: drop-shadow(0 4px 10px rgba(30, 33, 48, .12));
}