/*
 * CarlFischer_DigitalLabels - server-side digital availability badges.
 *
 * Loaded EXPLICITLY through view/frontend/layout/default.xml (<css src=...>). Plain
 * CSS on purpose: it is served as-is with no LESS compilation.
 *
 * Placement is fully admin-driven: whatever cell a label is set to in Marketing >
 * Digital Product Labels > Position is where it renders. The overlay is bound to
 * the product image's own aspect box (the template passes the real ratio inline),
 * so a corner badge sits on the image corner, not down in the product text.
 *
 * Client direction (andy dowty, 01 Sep 2026): the top-row badges "peek out above
 * the product image". That is the --cf-label-overhang lift on the top-* cells,
 * expressed as a fraction of the badge's OWN height so it is independent of the
 * (theme-stretched) tile height.
 *
 * Multiple labels that land in the same cell STACK vertically and stay clamped to
 * the thumbnail width, so wide "pill" artwork cannot spill across the tile.
 *
 * Selectors are scoped under .cf-labels and carry !important on the box-model
 * essentials because the TPCF / Pearl theme has generic `.product-item-photo img`
 * rules that otherwise stretch the badge to the full tile width.
 */

/* Positioning context for the overlay. Let the top-row badges peek above the
   image on tiles that carry our labels, without changing every other tile. */
.product-item-photo,
a.product-item-photo {
    position: relative;
}
.product-item-photo:has(> .cf-labels),
a.product-item-photo:has(> .cf-labels) {
    overflow: visible;
}

.cf-labels {
    position: absolute !important;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    /* Match the IMAGE box, not the tile column. The TPCF grid centres a narrower
       image for "tall" covers (.product-item-photo is text-align:center, the
       image container is inline-block) - anchoring left:0/right:0 would leave a
       top-right badge stranded in the side gap. Deriving width from height x the
       real per-product ratio (passed inline as `aspect-ratio:...`; 350/527 is the
       fallback) keeps the overlay exactly over the image for tall and regular
       covers alike, and independent of the theme's tile-height juggling. */
    height: 100%;
    aspect-ratio: 350 / 527;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;         /* top-row badges peek above the image edge */
    pointer-events: none;
    z-index: 5;                /* below WeltPixel's promo badges (99) */

    --cf-label-size: 58px;     /* fallback width when a label has no "Display Width (px)" */
    --cf-label-inset: 0px;     /* base gap from the image edge - kept 0; per-label spacing is
                                  the admin "Custom CSS" field (e.g. `margin: 8px`) */
    --cf-label-gap: 4px;       /* spacing when two labels share one corner */
    --cf-label-overhang: 38%;  /* how far the top row lifts above the image, as a
                                  fraction of the badge's own height */
}

.cf-labels .cf-labels__cell {
    position: absolute;
    display: flex;
    flex-direction: column;    /* two labels in one corner stack; they never overflow sideways */
    gap: var(--cf-label-gap, 4px);
    max-width: calc(100% - (2 * var(--cf-label-inset, 0px)));
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.cf-labels .cf-labels__cell--top-left      { top: var(--cf-label-inset);    left: var(--cf-label-inset);   align-items: flex-start; transform: translateY(calc(-1 * var(--cf-label-overhang))); }
.cf-labels .cf-labels__cell--top-center    { top: var(--cf-label-inset);    left: 50%; align-items: center; transform: translate(-50%, calc(-1 * var(--cf-label-overhang))); }
.cf-labels .cf-labels__cell--top-right     { top: var(--cf-label-inset);    right: var(--cf-label-inset);  align-items: flex-end;   transform: translateY(calc(-1 * var(--cf-label-overhang))); }
.cf-labels .cf-labels__cell--middle-left   { top: 50%; left: var(--cf-label-inset);   transform: translateY(-50%);      align-items: flex-start; }
.cf-labels .cf-labels__cell--middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); align-items: center; }
.cf-labels .cf-labels__cell--middle-right  { top: 50%; right: var(--cf-label-inset);  transform: translateY(-50%);      align-items: flex-end; }
.cf-labels .cf-labels__cell--bottom-left   { bottom: var(--cf-label-inset); left: var(--cf-label-inset);   align-items: flex-start; }
.cf-labels .cf-labels__cell--bottom-center { bottom: var(--cf-label-inset); left: 50%; transform: translateX(-50%);      align-items: center; }
.cf-labels .cf-labels__cell--bottom-right  { bottom: var(--cf-label-inset); right: var(--cf-label-inset);  align-items: flex-end; }

.cf-labels .cf-label {
    display: inline-flex;
    max-width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
    background: none;
    border: 0;
    pointer-events: none;
}

/* !important everywhere the theme's generic image rules would otherwise win.
   width stays overridable so an admin-set "Display Width (px)" (emitted inline by
   the ViewModel) still takes effect; max-width clamps it to the thumbnail. */
.cf-labels .cf-label img {
    display: block !important;
    width: var(--cf-label-size, 58px);
    height: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: none !important;
}

/* Grid thumbnails at the mobile breakpoint are ~40% of desktop - shrink with them. */
@media (max-width: 767px) {
    .cf-labels {
        --cf-label-size: 40px;
    }
}