/*
 * AIEO unified badge system — single CSS file owning every product-card
 * badge across archive / PDP / recos / side-cart surfaces.
 *
 * Architecture:
 *   .aieo-badge-stack  Grid container (positioning + ordering)
 *     ├ .aieo-badge--sale          colour tokens via inline style
 *     ├ .aieo-badge--monthly_offer  ↑
 *     ├ .aieo-badge--pro            ↑
 *     ├ .aieo-badge--new            ↑
 *     └ .aieo-badge--gift           ↑
 *
 * Per-surface body classes (emitted by AIEO_DMM_Badges::body_class_filter):
 *   body.aieo-bp-{surface}--{location}   → drives stack positioning
 *   body.aieo-bs-{surface}--{shape}      → drives badge visual shape
 *
 * Locations: top_left | top_right | below_favourite | inline
 * Shapes:    chip (rounded rectangle) | circle (round, icon-only friendly)
 *
 * Cascade hardening:
 *   .aieo-badge starts with `all: revert` so a missing or late-loading
 *   theme stylesheet can never inflate it via inherited font/padding.
 *   :where() keeps specificity at 0,0,0 so theme overrides can win
 *   without the !important arms race that produced the legacy
 *   role-pricing inline-style block.
 *
 * Responsive sizes:
 *   The renderer emits TWO custom properties on each stack —
 *   --aieo-badge-fs-d (desktop) and --aieo-badge-fs-m (mobile). The
 *   active --aieo-badge-fs is var(--aieo-badge-fs-d) by default;
 *   below 600px, the mobile rule swaps it to var(--aieo-badge-fs-m).
 *   Padding/border-radius scale with the active size via calc().
 */

@layer aieo-badges {

  /* Positioning context — the LI / product-card wrapper must be
     position:relative so the absolutely-positioned badge stack anchors
     correctly. NOT inside :where() because we want this to actually win
     against the theme default which treats LI as static. */
  ul.products li.product,
  .products .product,
  .wc-block-product-template > li,
  .wp-block-woocommerce-product-template > li,
  .wp-block-post.product,
  .wc-block-grid__product {
    position: relative;
  }

  /* Stack container — base styling that's placement-agnostic. The
     `position` value is set by the per-LOCATION rules below, NOT
     here, so adding a new location only requires its own selector
     block. The active font-size is wired through the
     `--aieo-badge-fs` variable; default = desktop, mobile media
     query swaps it to the merchant's mobile px below. */
  .aieo-badge-stack {
    z-index: 4;
    display: grid;
    gap: 4px;
    pointer-events: none; /* badges don't intercept clicks on the card */
    max-width: calc(100% - 16px);
    --aieo-badge-fs: var(--aieo-badge-fs-d, 11px);
  }

  /* ──────────────────────────────────────────────────────────────────
     LOCATION RULES — where each surface's stack sits.
     Body class = aieo-bp-{surface}--{location}.
     Each rule sets ONLY positioning + flow direction; visual
     styling (shape) lives in the SHAPE RULES section below.
     ────────────────────────────────────────────────────────────────── */

  /* ===== ARCHIVE — top_left / top_right ===== */
  body.aieo-bp-archive--top_left  .aieo-badge-stack[data-surface="archive"],
  body.aieo-bp-archive--top_right .aieo-badge-stack[data-surface="archive"] {
    position: absolute;
    top: 8px;
  }
  body.aieo-bp-archive--top_left  .aieo-badge-stack[data-surface="archive"] { left:  8px; }
  body.aieo-bp-archive--top_right .aieo-badge-stack[data-surface="archive"] { right: 8px; }

  /* ===== ARCHIVE — below_favourite =====
     The legacy `aieo-badges-below-fav` body class is kept as an alias
     for back-compat with any custom theme overrides that target it.
     The roosterx-ff theme overrides the heart to top:12px right:24px
     (brand.css ~line 1521), so we mirror those values here:
     right:25px (1px optical offset for the badge shadow), top:56px
     (heart bottom at 12+36=48 + 8px gap). */
  body.aieo-bp-archive--below_favourite .aieo-badge-stack[data-surface="archive"],
  body.aieo-badges-below-fav            .aieo-badge-stack[data-surface="archive"] {
    position: absolute;
    top: 56px;
    left: auto;
    right: 25px;        /* matches roosterx-ff theme heart override */
    gap: 8px;
    justify-items: end;
  }

  /* ===== ARCHIVE — inline (chip flows in normal flow) ===== */
  body.aieo-bp-archive--inline .aieo-badge-stack[data-surface="archive"] {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    margin: 4px 0;
  }

  /* ===== PDP — top_left / top_right =====
     PDP-specific z-index bump: WC's PhotoSwipe trigger
     (`.woocommerce-product-gallery__trigger` — the 🔍 icon) has
     `z-index: 99` and pins itself to `right: .5em; top: .5em`. The
     stack must sit ABOVE that to be visible at all, AND the
     `top_right` variant must be nudged left of the trigger (which is
     36px wide) so both stay clickable. */
  body.aieo-bp-pdp--top_left  .aieo-badge-stack[data-surface="pdp"],
  body.aieo-bp-pdp--top_right .aieo-badge-stack[data-surface="pdp"] {
    position: absolute;
    top: 8px;
    z-index: 100; /* > 99 (WC gallery trigger) */
  }
  body.aieo-bp-pdp--top_left  .aieo-badge-stack[data-surface="pdp"] { left:  8px; }
  body.aieo-bp-pdp--top_right .aieo-badge-stack[data-surface="pdp"] {
    /* The WC magnifier trigger is hidden by the plugin's gallery CSS, so the
       stack sits at the corner with an EQUAL top/right inset — nudged a little
       down and in from the very corner. */
    top: 16px;
    right: 16px;
  }

  /* ===== PDP — inline ===== */
  body.aieo-bp-pdp--inline .aieo-badge-stack[data-surface="pdp"] {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    margin: 0 0 8px 0;
  }

  /* ===== RECOS — inline (default) =====
     The JS card builder emits the stack INSIDE `.aieo-card-body` for
     this location; the rule below normalises positioning. */
  body.aieo-bp-recos--inline .aieo-badge-stack[data-surface="recos"] {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    margin: 0 0 4px 0;
  }
  /* ===== RECOS — top_left / top_right =====
     For these locations the JS card builder emits the stack INSIDE
     `.aieo-card-img-wrap` so absolute positioning anchors over the
     image, not the body. */
  body.aieo-bp-recos--top_left  .aieo-badge-stack[data-surface="recos"],
  body.aieo-bp-recos--top_right .aieo-badge-stack[data-surface="recos"] {
    position: absolute;
    top: 8px;
  }
  body.aieo-bp-recos--top_left  .aieo-badge-stack[data-surface="recos"] { left:  8px; }
  body.aieo-bp-recos--top_right .aieo-badge-stack[data-surface="recos"] { right: 8px; }

  /* ===== SIDE CART — inline (default) ===== */
  body.aieo-bp-side_cart--inline .aieo-badge-stack[data-surface="side_cart"] {
    position: static;
    grid-auto-flow: column;
    justify-content: start;
    margin: 0 0 4px 0;
  }
  /* ===== SIDE CART — top_left ===== */
  body.aieo-bp-side_cart--top_left .aieo-badge-stack[data-surface="side_cart"] {
    position: absolute;
    top: 4px;
    left: 4px;
  }

  /* ──────────────────────────────────────────────────────────────────
     SHAPE RULES — visual style of each badge in the stack.
     Body class = aieo-bs-{surface}--{shape}. Independent from the
     LOCATION RULES above so any (location, shape) combination is
     valid; e.g. `inline + circle` is a row of small round chips.
     ────────────────────────────────────────────────────────────────── */

  /* === SHAPE: chip — default rounded rectangle.
     Padding/border-radius scale with --aieo-badge-fs so a 13px PDP
     chip isn't cramped, a 9px side-cart chip isn't bloated. === */
  body.aieo-bs-archive--chip   .aieo-badge-stack[data-surface="archive"]   .aieo-badge,
  body.aieo-bs-pdp--chip       .aieo-badge-stack[data-surface="pdp"]       .aieo-badge,
  body.aieo-bs-recos--chip     .aieo-badge-stack[data-surface="recos"]     .aieo-badge,
  body.aieo-bs-side_cart--chip .aieo-badge-stack[data-surface="side_cart"] .aieo-badge {
    /* Chip shape inherits all the base .aieo-badge styling defined
       below — explicit width/height undone in case `circle` was
       previously applied via stale body class cache. */
    width: auto;
    height: auto;
    border-radius: calc(var(--aieo-badge-fs, 11px) * 0.36);
    padding: calc(var(--aieo-badge-fs, 11px) * 0.27) calc(var(--aieo-badge-fs, 11px) * 0.7);
  }

  /* === SHAPE: circle — round, icon-or-image friendly.
     Sized as 36×36 by default but scales with --aieo-badge-fs ×
     a multiplier so smaller surfaces (recos at 10px) get smaller
     circles. === */
  body.aieo-bs-archive--circle   .aieo-badge-stack[data-surface="archive"]   .aieo-badge,
  body.aieo-bs-pdp--circle       .aieo-badge-stack[data-surface="pdp"]       .aieo-badge,
  body.aieo-bs-recos--circle     .aieo-badge-stack[data-surface="recos"]     .aieo-badge,
  body.aieo-bs-side_cart--circle .aieo-badge-stack[data-surface="side_cart"] .aieo-badge {
    width:  calc(var(--aieo-badge-fs, 11px) * 3.27); /* 11px → 36px */
    height: calc(var(--aieo-badge-fs, 11px) * 3.27);
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    gap: 1px;
    font-size: calc(var(--aieo-badge-fs, 11px) * 0.82);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  }
  body.aieo-bs-archive--circle   .aieo-badge-stack[data-surface="archive"]   .aieo-badge__label,
  body.aieo-bs-archive--circle   .aieo-badge-stack[data-surface="archive"]   .aieo-badge__icon,
  body.aieo-bs-pdp--circle       .aieo-badge-stack[data-surface="pdp"]       .aieo-badge__label,
  body.aieo-bs-pdp--circle       .aieo-badge-stack[data-surface="pdp"]       .aieo-badge__icon,
  body.aieo-bs-recos--circle     .aieo-badge-stack[data-surface="recos"]     .aieo-badge__label,
  body.aieo-bs-recos--circle     .aieo-badge-stack[data-surface="recos"]     .aieo-badge__icon,
  body.aieo-bs-side_cart--circle .aieo-badge-stack[data-surface="side_cart"] .aieo-badge__label,
  body.aieo-bs-side_cart--circle .aieo-badge-stack[data-surface="side_cart"] .aieo-badge__icon {
    line-height: 1;
    display: block;
  }
  body.aieo-bs-archive--circle   .aieo-badge-stack[data-surface="archive"]   .aieo-badge__icon,
  body.aieo-bs-pdp--circle       .aieo-badge-stack[data-surface="pdp"]       .aieo-badge__icon,
  body.aieo-bs-recos--circle     .aieo-badge-stack[data-surface="recos"]     .aieo-badge__icon,
  body.aieo-bs-side_cart--circle .aieo-badge-stack[data-surface="side_cart"] .aieo-badge__icon {
    font-size: calc(var(--aieo-badge-fs, 11px) * 1.05);
  }

  /* ──────────────────────────────────────────────────────────────────
     BASE BADGE STYLE — colour tokens, typography, hover.
     ────────────────────────────────────────────────────────────────── */
  :where(.aieo-badge) {
    all: revert;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--aieo-badge-fs, 11px) * 0.3);
    padding: calc(var(--aieo-badge-fs, 11px) * 0.27) calc(var(--aieo-badge-fs, 11px) * 0.7);
    border-radius: calc(var(--aieo-badge-fs, 11px) * 0.36);
    font-size: var(--aieo-badge-fs, 11px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: auto;
    background: var(--aieo-badge-bg, #1a1a1a);
    color: var(--aieo-badge-fg, #fff);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  :where(.aieo-badge__icon) {
    font-size: calc(var(--aieo-badge-fs, 11px) * 1.1);
    line-height: 1;
  }

  :where(.aieo-badge__label) {
    line-height: 1.2;
  }

  /* Family-specific overrides for text-transform/case, since some labels
     (Greek "ΠΡΟΣΦΟΡΑ ΤΟΥ ΜΗΝΑ", "+ Free gift") look better mixed-case. */
  :where(.aieo-badge--gift, .aieo-badge--monthly_offer) {
    text-transform: none;
    letter-spacing: 0;
  }

  /* PDP gallery anchoring — the gallery wrapper needs position:relative
     so absolutely-positioned stacks resolve correctly. Same pattern the
     legacy role-pricing inline CSS used; keeping it scoped + at zero
     specificity so theme styles can override if needed. */
  :where(.wp-block-woocommerce-product-image-gallery,
         .woocommerce div.product div.images) {
    position: relative;
  }

  /* Hover slight lift to suggest interactivity for tooltipped badges. */
  :where(.aieo-badge[title]:hover) {
    filter: brightness(1.05);
  }

  /* ──────────────────────────────────────────────────────────────────
     IMAGE OVERRIDE — when a family has icon_image set, the renderer
     adds .has-icon-image to the badge and emits a single <img>
     instead of icon/label spans. The image fills the badge's box
     (whatever shape it is) via object-fit: cover; the bg/fg colour
     tokens become invisible (the image IS the badge).
     ────────────────────────────────────────────────────────────────── */
  .aieo-badge.has-icon-image {
    background: transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    padding: 0;
    overflow: hidden;
  }
  .aieo-badge.has-icon-image > .aieo-badge__image {
    display: block;
    width:  100%;
    height: 100%;
    object-fit: cover;
  }
  /* When a chip-shaped badge gets an image, lock its dimensions to a
     square so the image doesn't stretch to fit the previous text
     content's width. Same scaling formula the circle shape uses. */
  body.aieo-bs-archive--chip   .aieo-badge-stack[data-surface="archive"]   .aieo-badge.has-icon-image,
  body.aieo-bs-pdp--chip       .aieo-badge-stack[data-surface="pdp"]       .aieo-badge.has-icon-image,
  body.aieo-bs-recos--chip     .aieo-badge-stack[data-surface="recos"]     .aieo-badge.has-icon-image,
  body.aieo-bs-side_cart--chip .aieo-badge-stack[data-surface="side_cart"] .aieo-badge.has-icon-image {
    width:  calc(var(--aieo-badge-fs, 11px) * 3.27);
    height: calc(var(--aieo-badge-fs, 11px) * 3.27);
  }

  /* Suppress WC's native onsale flash when our SALE family is enabled —
     only when the badge stack is present, so other themes' badge usage
     isn't broken on pages without our renderer. */
  li.product:has(.aieo-badge-stack .aieo-badge--sale) > .onsale,
  li.product:has(.aieo-badge-stack .aieo-badge--sale) .onsale {
    display: none;
  }

  /* Mobile breakpoint — switches the active --aieo-badge-fs from the
     desktop variable to the mobile variable so the renderer's
     `--aieo-badge-fs-m` value drives padding / border-radius / font
     once below 600px. Falls back to desktop when no mobile value is
     set (so old saved options without a mobile column don't crash). */
  @media (max-width: 600px) {
    .aieo-badge-stack {
      --aieo-badge-fs: var(--aieo-badge-fs-m, var(--aieo-badge-fs-d, 11px));
      gap: 3px;
    }
  }

} /* @layer aieo-badges */

/* =========================================================================
   SIDE-CART RECOMMENDATION CARDS — force top-right circles over the thumbnail
   so they match the archive/PDP badges (the rest). The `side_cart` surface
   only exposes inline/top_left chips, and the reco card builder emits the
   stack inside `.aieo-card-body` (a sibling of the image wrap). These rules
   are deliberately UN-LAYERED so they beat the `@layer aieo-badges`
   `body.aieo-bp/bs-side_cart--*` rules without an !important / specificity
   arms race. The stack is anchored to the (now-relative) `.aieo-card`, whose
   image fills the top — so top:6/right:6 lands over the thumbnail's corner.
   ========================================================================= */
.aieo-sc-reco-item .aieo-card { position: relative; }
.aieo-sc-reco-item .aieo-card .aieo-badge-stack[data-surface="side_cart"] {
    position: absolute;
    inset: 6px 6px auto auto;   /* top right bottom left */
    margin: 0;
    z-index: 5;
    grid-auto-flow: row;        /* stack the badges one UNDER the other (was column) */
    justify-items: end;
    gap: 4px;
}
.aieo-sc-reco-item .aieo-card .aieo-badge-stack[data-surface="side_cart"] .aieo-badge {
    width:  calc(var(--aieo-badge-fs, 10px) * 2.4);
    height: calc(var(--aieo-badge-fs, 10px) * 2.4);
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    gap: 0;
    font-size: calc(var(--aieo-badge-fs, 10px) * 0.62);
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
.aieo-sc-reco-item .aieo-card .aieo-badge-stack[data-surface="side_cart"] .aieo-badge__label,
.aieo-sc-reco-item .aieo-card .aieo-badge-stack[data-surface="side_cart"] .aieo-badge__icon {
    line-height: 1;
    display: block;
}
.aieo-sc-reco-item .aieo-card .aieo-badge-stack[data-surface="side_cart"] .aieo-badge__icon {
    font-size: calc(var(--aieo-badge-fs, 10px) * 0.85);
}
