/* ==========================================================================
   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, and can be
   overridden per product from the admin.

   Line height reads the same custom property as font size, so an overridden
   line sets both at a 1:1 ratio and two lines still fit inside the 40px
   circle. There is deliberately no separate line-height field — at this size
   it is a fitting constraint rather than a design choice, and a wrong value
   breaks the layout silently.

   Where no override is set the two fall back independently, preserving the
   slightly tighter original defaults. */

.ibr-badge-left .ibr-badge__top {
	font-size: var( --ibr-badge-top-size, 17px );
	line-height: var( --ibr-badge-top-size, 16px );
}

.ibr-badge-left .ibr-badge__bottom {
	font-size: var( --ibr-badge-bottom-size, 10px );
	line-height: var( --ibr-badge-bottom-size, 10px );
}

.ibr-badge-right .ibr-badge__top {
	font-size: var( --ibr-badge-top-size, 15px );
	line-height: var( --ibr-badge-top-size, 14px );
}

.ibr-badge-right .ibr-badge__bottom {
	font-size: var( --ibr-badge-bottom-size, 10px );
	line-height: var( --ibr-badge-bottom-size, 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;
}