/* ════════════════════════════════════════════════════════════════════
   Inspira Woo Add-ons — Brand Badge (frontend)
   ════════════════════════════════════════════════════════════════════ */

/* Base badge — position:absolute so it lives as an image overlay by
   default. Inline-flow contexts (mini-cart item info column) override
   with position:static. */
.iwa-brand-badge {
    position: absolute;
    z-index: 150;
    display: inline-block;
    padding: 5px 10px;
    background: var(--iwa-bb-bg, #14130F);
    color: var(--iwa-bb-text, #FFFFFF);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.4;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(20, 19, 15, .15);
    pointer-events: none;
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Corner container ─────────────────────────────────────────────
   Wraps badges that share a corner in overlay contexts (loop, single,
   QV). Position-absolute + flex-column so multiple badges stack
   vertically without overlapping. Inside the container, badges revert
   to position:static so they participate in the flex flow. */
.iwa-brand-badges-corner {
    position: absolute;
    z-index: 150;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
    max-width: calc(100% - 24px);
}
.iwa-brand-badges-corner > .iwa-brand-badge {
    position: static;       /* inside corner container = flex item */
    pointer-events: none;   /* visual label only — let clicks pass through */
    max-width: 100%;        /* corner already constrains; don't double-shrink */
}

/* Corner positioning uses calc() + shift variables so cross-feature
   stacking (QV / wishlist icons in the same corner, Recently Viewed
   inline banner at the bottom) can push the badge away from
   conflicting occupants without each scenario needing its own rule.
   Body classes emitted by Inspira_Woo_Addons_Corner_State set the
   shift values; defaults of 0px keep behavior unchanged when no
   conflict exists. */
.iwa-brand-badges-corner--top-left     { top:    calc(12px + var(--iwa-bb-shift-tl, 0px));                                          left:   12px;  align-items: flex-start; }
.iwa-brand-badges-corner--top-right    { top:    calc(12px + var(--iwa-bb-shift-tr, 0px));                                          right:  12px;  align-items: flex-end;   }
.iwa-brand-badges-corner--bottom-left  { bottom: calc(12px + var(--iwa-bb-shift-bl, 0px) + var(--iwa-bb-shift-bl-banner, 0px));      left:   12px;  align-items: flex-start; }
.iwa-brand-badges-corner--bottom-right { bottom: calc(12px + var(--iwa-bb-shift-br, 0px) + var(--iwa-bb-shift-br-banner, 0px));      right:  12px;  align-items: flex-end;   }

/* Cross-feature shift variables.
   - {tl,tr,bl,br}-occupants-N body classes set the icon-clearance
     shift for that corner. 1 occupant = ~44px (icon height + small
     gap), 2 occupants = ~88px (two stacked icons).
   - The banner-shift variable for bottom corners is set per-wrap via
     :has() further down (not by a body class) because the inline
     Recently Viewed banner renders per-product based on the
     recently-viewed cookie, not globally. Composes additively with
     icon clearance via the calc() above — e.g. 2 icons + banner at
     bottom-right = 12 + 88 + 20 = 120px. */
body.iwa-corner-tl-occupants-1 { --iwa-bb-shift-tl: 44px; }
body.iwa-corner-tl-occupants-2 { --iwa-bb-shift-tl: 88px; }
body.iwa-corner-tr-occupants-1 { --iwa-bb-shift-tr: 44px; }
body.iwa-corner-tr-occupants-2 { --iwa-bb-shift-tr: 88px; }
body.iwa-corner-bl-occupants-1 { --iwa-bb-shift-bl: 44px; }
body.iwa-corner-bl-occupants-2 { --iwa-bb-shift-bl: 88px; }
body.iwa-corner-br-occupants-1 { --iwa-bb-shift-br: 44px; }
body.iwa-corner-br-occupants-2 { --iwa-bb-shift-br: 88px; }

/* Inline Recently Viewed banner clearance — PER-WRAP via :has().
   The banner only renders on cards whose product is in the user's
   recently-viewed cookie, so a body-level class would bump badges
   on every card unnecessarily. :has() targets only the wraps (or
   relocated frames) that actually contain the banner; CSS variables
   set here inherit down to the brand-badges corner containers
   inside, applying the shift only to the right cards. */
.iwa-qv-image-wrap:has(.iwa-recently-viewed-card-tag--inline),
.iwa-brand-badge-image-wrap:has(.iwa-recently-viewed-card-tag--inline),
.iwa-wishlist-image-wrap:has(.iwa-recently-viewed-card-tag--inline),
.iwa-recently-viewed-image-wrap:has(.iwa-recently-viewed-card-tag--inline),
.iwa-relocated-frame:has(.iwa-recently-viewed-card-tag--inline) {
    --iwa-bb-shift-bl-banner: 20px;
    --iwa-bb-shift-br-banner: 20px;
}

/* Positioned ancestors so corner containers anchor to the card/gallery. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    position: relative;
}

/* ─── Relocated frame stacking ──────────────────────────────────────
   The relocated frame (created by card-opacity-escape.js) holds
   on-card overlays after JS lifts them out of the theme's
   opacity-faded image element. The frame is a sibling of the theme
   card wrapper inside li.product. Many themes elevate the card
   wrapper on hover via transform or explicit z-index, which puts the
   wrapper visually above our frame even though the frame is later in
   DOM. The very high z-index + !important defeats theme `!important`
   hover elevations. `isolation: isolate` creates a stacking context
   for the frame's children so the per-overlay z-index values
   (QV / wishlist / brand badge = 150 each) are contained locally
   rather than competing against theme elements. */
.iwa-relocated-frame {
    /* Static frame styling moved here from card-opacity-escape.js
       inline styles. Only per-card geometry (top/left/width/height)
       stays inline since it's measured per card via JS. */
    position: absolute;
    pointer-events: none;
    z-index: 999999 !important;
    isolation: isolate;
}

/* ─── Loop fallback wrap (QV-off path) ──────────────────────────────
   When QV is enabled, brand badges are injected INSIDE `.iwa-qv-image-wrap`
   (created by QV's wrap_loop_thumbnail filter) — that wrap is already
   positioned + image-sized.

   When QV is OFF, Brand Badge's loop filter wraps the thumbnail in its
   own `.iwa-brand-badge-image-wrap` span instead, mirroring the shape
   of the QV wrap so the brand badge overlay anchors to the image
   regardless of theme. */
.iwa-brand-badge-image-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
/* When QV is enabled, the QV wrap is the positioned anchor. We rely on
   QV's CSS to set position:relative on .iwa-qv-image-wrap — that rule
   lives in quick-view.css. */

/* ─── Single-product gallery overlay ────────────────────────────────
   Badges live in a JS-mounted overlay inside `.woocommerce-product-gallery`
   (sibling of the flexslider figure, so Flexslider can't touch them).
   JS sizes the overlay to match the active <img>'s bounding rect — so
   badges anchor to the actual image dimensions, not the gallery wrap
   which on some themes is bigger than the image due to padding /
   column extras / object-fit:contain letterboxing. */
.woocommerce div.product .woocommerce-product-gallery {
    position: relative;
}

/* ─── Overlay container (single + QV use this same class) ───────────
   Default sizing: fill the positioned ancestor (`inset: 0`). For single
   product, JS replaces these with explicit top/left/width/height that
   match the active <img>. For QV, the parent `.iwa-qv-gallery` already
   has `aspect-ratio` matching the first image, so `inset: 0` naturally
   anchors to image bounds — no JS sync needed. */
.iwa-brand-badges-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 150;
}
.iwa-brand-badges-overlay .iwa-brand-badges-corner {
    z-index: 150;
}

@media (max-width: 640px) {
    .iwa-brand-badge {
        font-size: 9px;
        padding: 4px 8px;
        letter-spacing: .06em;
    }
    .iwa-brand-badges-corner--top-left     { top:    calc(8px + var(--iwa-bb-shift-tl, 0px)); }
    .iwa-brand-badges-corner--top-right    { top:    calc(8px + var(--iwa-bb-shift-tr, 0px)); }
    .iwa-brand-badges-corner--bottom-left  { bottom: calc(8px + var(--iwa-bb-shift-bl, 0px) + var(--iwa-bb-shift-bl-banner, 0px)); }
    .iwa-brand-badges-corner--bottom-right { bottom: calc(8px + var(--iwa-bb-shift-br, 0px) + var(--iwa-bb-shift-br-banner, 0px)); }
    .iwa-brand-badges-corner--top-left,
    .iwa-brand-badges-corner--bottom-left  { left: 8px; }
    .iwa-brand-badges-corner--top-right,
    .iwa-brand-badges-corner--bottom-right { right: 8px; }
    .iwa-brand-badges-corner {
        gap: 4px;
        max-width: calc(100% - 16px);
    }
}

/* ─── Image-mode badge ──────────────────────────────────────────────
   When the source is "image" or "taxonomy_image", the badge renders an
   <img> instead of text. Logos stand alone — no colored chip behind,
   no padding, no border-radius, no shadow. The base .iwa-brand-badge
   styles (background, box-shadow, overflow:hidden, padding, max-width)
   all get explicitly overridden here so the logo displays at its
   natural appearance without the chip styling. The PHP renderer also
   skips emitting the bg/text CSS vars for image sources, so DevTools
   stays clean. Fixed sizing — width caps the container, height caps
   the logo, aspect ratio preserved via object-fit. */
.iwa-brand-badge--image {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    line-height: 0;
    max-width: 140px;
    text-overflow: clip;
    white-space: normal;
}
.iwa-brand-badge__logo {
    display: block;
    max-height: 48px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}