/* ==========================================================================
   iBreathe Product Card Badges
   Ribbon and two circular badges overlaid on WooCommerce product cards.
   Ported from the Shopify snippets ibr-product-ribbon.liquid,
   ibr-product-badge-left.liquid and ibr-product-badge-right.liquid.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Anchor

   `li.product > figure` wraps the product image and nothing else, so it is
   what the overlays position against. Blocksy leaves it static, so it is set
   relative here.

   `li.product` already carries position: relative, overflow: hidden and a
   10px radius from Blocksy. None of that is overridden — nothing here needs
   to escape the card, and the radius clipping the ribbon's top-left corner is
   expected.
   -------------------------------------------------------------------------- */

.woocommerce ul.products li.product > figure {
	position: relative;
}

/* --------------------------------------------------------------------------
   Ribbon

   One or two bars stacked in the top-left corner. The stack does the
   positioning; each bar sizes itself to its own text, which is what stops a
   short first line sitting in a bar as wide as a long second one.

   align-items: flex-start is what makes that happen — without it the bars
   would stretch to match each other.
   -------------------------------------------------------------------------- */

.ibr-ribbon-stack {
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	pointer-events: none;
}

.ibr-ribbon {
	display: inline-block;
	padding: 5px 30px 5px 10px;
	background-color: var( --ibr-ribbon-bg, #1a1a1a );
	color: var( --ibr-ribbon-fg, #ffffff );
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

/* The second bar carries the qualifier — a code, a condition — so it is set
   in regular weight to sit beneath the claim rather than compete with it.
   Size matches the first line by decision. */

.ibr-ribbon-line-2 {
	font-weight: 400;
}

/* Shape definitions. One shape applies to both bars. The 15px offset is
   fixed, so the notch, angle or point keeps its proportions whatever the text
   length — and therefore looks the same on both bars despite their differing
   widths. */

.ibr-ribbon-standard {
	clip-path: polygon( 0 0, 100% 0, calc( 100% - 15px ) 50%, 100% 100%, 0 100% );
	padding-right: 25px;
}

.ibr-ribbon-straight {
	clip-path: none;
	padding: 5px 12px 5px 10px;
}

.ibr-ribbon-triangle {
	clip-path: polygon( 0 0, 100% 0, calc( 100% - 15px ) 100%, 0 100% );
	padding-right: 20px;
}

.ibr-ribbon-arrow {
	clip-path: polygon( 0 0, calc( 100% - 15px ) 0, 100% 50%, calc( 100% - 15px ) 100%, 0 100% );
	padding-right: 18px;
}

/* --------------------------------------------------------------------------
   Badges

   Inset 10px from the foot and both sides of the image. space-between puts
   one in each corner. The container ignores pointer events so it cannot block
   the card link across the full width of the image; the badges themselves
   take them back.
   -------------------------------------------------------------------------- */

.ibr-badge-container {
	position: absolute;
	right: 10px;
	bottom: 10px;
	left: 10px;
	z-index: 5;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	pointer-events: none;
}

/* Reserves the left slot when only the right badge is set, so the right badge
   stays in its corner rather than sliding across. */

.ibr-badge-placeholder {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
}

.ibr-badge {
	display: flex;
	flex: 0 0 40px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 2px;
	border: 1px solid var( --ibr-badge-border-color, #ffffff );
	border-radius: 50%;
	background-color: var( --ibr-badge-bg, #1a1a1a );
	color: var( --ibr-badge-fg, #ffffff );
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	pointer-events: auto;
}

/* Font sizes are per side, carried over from the Shopify original. */

.ibr-badge-left .ibr-badge__top {
	font-size: 17px;
	line-height: 16px;
}

.ibr-badge-left .ibr-badge__bottom {
	font-size: 10px;
	line-height: 10px;
}

.ibr-badge-right .ibr-badge__top {
	font-size: 15px;
	line-height: 14px;
}

.ibr-badge-right .ibr-badge__bottom {
	font-size: 10px;
	line-height: 10px;
}

/* Text is not clipped to the circle, matching the Shopify original. An
   overlong value spills onto the image rather than disappearing, which makes
   the problem visible to whoever typed it. */

.ibr-badge__top,
.ibr-badge__bottom {
	display: block;
	white-space: nowrap;
}