/* * 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"] { /* Trigger geometry: 36px wide, right:.5em — park the stack one trigger-width plus a small gap to the left of it. */ right: calc(36px + 1.5em); } /* ===== 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 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 */