/**
 * Kadence Multi Badges – stacking styles
 *
 * When more than one badge is placed on a product image the original plugin's
 * absolute-positioning would stack them all at the same coordinates, causing
 * them to overlap.  These rules offset each badge by its index so all of them
 * remain visible.
 *
 * How it works
 * ------------
 * Each rendered badge gets an extra class: kt-woo-badge-stack-0, -stack-1, …
 * The CSS-custom-property --kmb-badge-size controls the step size (default 32px
 * for text badges, adjust to taste).  The offset direction matches the badge's
 * position corner so badges always grow inward.
 *
 * Text badges (the main use-case requested) are given display:flex + flex-wrap
 * inside a shared wrapper so they can also flow horizontally if you prefer.
 * You can switch between the stacking modes by toggling the body class
 * `kmb-stack-horizontal` (see the comment at the bottom of this file).
 */

/* ── Custom properties ─────────────────────────────────────────────────────── */
:root {
    --kmb-badge-gap:  3px;   /* gap between stacked text badges   */
    --kmb-badge-size: 28px;  /* fallback step for image/html badges */
}

/* ── Base: make sure all stack siblings are visible ─────────────────────────── */

/* stack-0 is already handled by the original plugin's position rules */
/* stack-1 through stack-4 are offset from stack-0 */

/* TOP-RIGHT stacking → badges grow downward */
.kt-woo-badge-position-top-right.kt-woo-badge-stack-1 { top: calc(var(--kmb-badge-size) * 1); }
.kt-woo-badge-position-top-right.kt-woo-badge-stack-2 { top: calc(var(--kmb-badge-size) * 2); }
.kt-woo-badge-position-top-right.kt-woo-badge-stack-3 { top: calc(var(--kmb-badge-size) * 3); }
.kt-woo-badge-position-top-right.kt-woo-badge-stack-4 { top: calc(var(--kmb-badge-size) * 4); }

/* TOP-LEFT stacking → badges grow downward */
.kt-woo-badge-position-top-left.kt-woo-badge-stack-1 { top: calc(var(--kmb-badge-size) * 1); }
.kt-woo-badge-position-top-left.kt-woo-badge-stack-2 { top: calc(var(--kmb-badge-size) * 2); }
.kt-woo-badge-position-top-left.kt-woo-badge-stack-3 { top: calc(var(--kmb-badge-size) * 3); }
.kt-woo-badge-position-top-left.kt-woo-badge-stack-4 { top: calc(var(--kmb-badge-size) * 4); }

/* BOTTOM-RIGHT stacking → badges grow upward */
.kt-woo-badge-position-bottom-right.kt-woo-badge-stack-1 { bottom: calc(var(--kmb-badge-size) * 1); }
.kt-woo-badge-position-bottom-right.kt-woo-badge-stack-2 { bottom: calc(var(--kmb-badge-size) * 2); }
.kt-woo-badge-position-bottom-right.kt-woo-badge-stack-3 { bottom: calc(var(--kmb-badge-size) * 3); }
.kt-woo-badge-position-bottom-right.kt-woo-badge-stack-4 { bottom: calc(var(--kmb-badge-size) * 4); }

/* BOTTOM-LEFT stacking → badges grow upward */
.kt-woo-badge-position-bottom-left.kt-woo-badge-stack-1 { bottom: calc(var(--kmb-badge-size) * 1); }
.kt-woo-badge-position-bottom-left.kt-woo-badge-stack-2 { bottom: calc(var(--kmb-badge-size) * 2); }
.kt-woo-badge-position-bottom-left.kt-woo-badge-stack-3 { bottom: calc(var(--kmb-badge-size) * 3); }
.kt-woo-badge-position-bottom-left.kt-woo-badge-stack-4 { bottom: calc(var(--kmb-badge-size) * 4); }

/* ── Text badges: smarter auto-sizing ───────────────────────────────────────── */
/*
 * Text badges are typically compact (pill/label shape).  We use a data-height
 * trick via CSS counters to auto-size the gap, but since we can't know each
 * badge's rendered height at compile time we provide a sensible default and
 * let the site owner override via --kmb-badge-size in their theme CSS.
 *
 * For purely text badges that all share the same position, a simpler approach
 * is to use flexbox on the image container.  See the "HORIZONTAL FLOW" section.
 */

.kt-woo-badge-type-text.kt-woo-badge-stack-1 { --kmb-badge-size: 28px; }
.kt-woo-badge-type-text.kt-woo-badge-stack-2 { --kmb-badge-size: 28px; }
.kt-woo-badge-type-text.kt-woo-badge-stack-3 { --kmb-badge-size: 28px; }
.kt-woo-badge-type-text.kt-woo-badge-stack-4 { --kmb-badge-size: 28px; }

/* ── Optional: horizontal flow mode ─────────────────────────────────────────── */
/*
 * If you prefer badges to flow horizontally (e.g. a row of pills across the
 * top of the image) rather than stacking vertically, add the class
 * "kmb-stack-horizontal" to <body> in your theme (or via a small snippet):
 *
 *   add_filter( 'body_class', function( $classes ) {
 *       $classes[] = 'kmb-stack-horizontal';
 *       return $classes;
 *   } );
 *
 * The rules below then take over and the vertical offset rules above are
 * effectively overridden by the flex layout.
 */

.kmb-stack-horizontal .woocommerce-loop-product__link,
.kmb-stack-horizontal .wc-block-grid__product-image > a,
.kmb-stack-horizontal .woocommerce-product-gallery__image,
.kmb-stack-horizontal .product_image {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kmb-badge-gap);
    /* badges sit along the top edge of the image */
    align-items: flex-start;
    align-content: flex-start;
}

/* In horizontal mode, badges revert to static positioning inside the flex row */
.kmb-stack-horizontal .kt-woo-badge {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}