/* =============================================================
   HotZeg — Blurred Background Fill image wrapper
   ============================================================= */
/* Usage: <div class="img-bg-fill">
            <div class="img-bg-fill__bg" style="background-image: url('…');"></div>
            <img class="img-bg-fill__main" src="…" alt="…"/>
          </div>
   Guarantees every product/pack image displays uncropped on any aspect ratio.
   Background uses the same image, blurred + darkened, slightly scaled. */
.img-bg-fill {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-accent, #1B1816);
    isolation: isolate;
}
.img-bg-fill__bg {
    position: absolute;
    inset: -24px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* Natural colour extension — keep brightness close to source so the
       blurred halo reads as a continuation of the image, not a vignette.
       Slight saturation boost compensates for the blur's softening. */
    filter: blur(22px) saturate(1.15);
    transform: scale(1.15);
    z-index: 0;
    transition: filter 360ms cubic-bezier(.22,1,.36,1), transform 600ms cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.img-bg-fill__main {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    /* Premium hover lift */
    transition: transform 480ms cubic-bezier(.22,1,.36,1), filter 240ms ease;
}
/* Spécificité boost — neutralise les `.cat-card-figure img { object-fit: cover }`
   et toute règle descendante similaire dans les feuilles externes. */
.img-bg-fill > .img-bg-fill__main,
.cat-card-figure .img-bg-fill .img-bg-fill__main,
.cat-detail-figure .img-bg-fill .img-bg-fill__main,
.cart-line-img .img-bg-fill .img-bg-fill__main {
    object-fit: contain;
    object-position: center center;
    width: 100%;
    height: 100%;
}
.img-bg-fill__placeholder {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: var(--bg-accent, #1B1816);
}
/* Subtle hover interaction (cards) — wrapper-driven */
.img-bg-fill[data-hoverable]:hover .img-bg-fill__main,
.cat-card:hover .img-bg-fill__main,
.cat-detail-image:hover .img-bg-fill__main {
    transform: scale(1.04);
}
/* For smaller thumbnails (cart line items) — softer blur, neutral brightness */
.img-bg-fill--sm .img-bg-fill__bg {
    filter: blur(12px) saturate(1.10);
    inset: -12px;
    transform: scale(1.10);
}

/* Fallback state: when a product photo is missing or 404s, the macro swaps
   the source to the HotZeg badge logo and adds this class. We center it,
   constrain its size, and slightly dim it so the brand presence is visible
   without pretending to be the actual product shot. */
.img-bg-fill__main--fallback {
    object-fit: contain !important;
    width: 55% !important;
    height: 55% !important;
    margin: auto;
    opacity: 0.55;
    filter: saturate(0.7);
}