/* Category Badges for WooCommerce */

/* ---- Containers the badges are positioned against ---- */

.cbw-thumb {
	display: block;
	position: relative;
}

.woocommerce ul.products li.product,
.woocommerce-product-gallery,
.wc-block-grid__product-image,
.wc-block-components-product-image,
.wc-block-product-gallery-large-image {
	position: relative;
}

.box-image,
.cbw-anchor {
	position: relative;
}

/* Badges waiting to be moved onto their product image by badges.js. They
   stay hidden for a moment so they do not flash in the wrong place, and
   reveal themselves anyway if the script never runs. */

.cbw-float {
	display: contents;
}

.cbw-js .cbw-float:not(.cbw-float--near) .cbw-badges {
	visibility: hidden;
	animation: cbw-reveal 0s linear 3s forwards;
}

.cbw-float.cbw-float--shown .cbw-badges {
	visibility: visible;
	animation: none;
}

@keyframes cbw-reveal {
	to {
		visibility: visible;
	}
}

/* ---- A stack of badges in one corner ---- */

.cbw-badges {
	position: absolute;
	z-index: 9;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	max-width: calc(100% - 16px);
	pointer-events: none;
	line-height: 1;
}

.cbw-pos-top-left {
	top: 8px;
	left: 8px;
	align-items: flex-start;
}

.cbw-pos-top-right {
	top: 8px;
	right: 8px;
	align-items: flex-end;
}

.cbw-pos-bottom-left {
	bottom: 8px;
	left: 8px;
	align-items: flex-start;
	flex-direction: column-reverse;
}

.cbw-pos-bottom-right {
	right: 8px;
	bottom: 8px;
	align-items: flex-end;
	flex-direction: column-reverse;
}

.cbw-badges--single {
	z-index: 20;
	gap: 8px;
}

.cbw-badges--single.cbw-pos-top-left,
.cbw-badges--single.cbw-pos-top-right {
	top: 12px;
}

.cbw-badges--single.cbw-pos-bottom-left,
.cbw-badges--single.cbw-pos-bottom-right {
	bottom: 12px;
}

.cbw-badges--single.cbw-pos-top-left,
.cbw-badges--single.cbw-pos-bottom-left {
	left: 12px;
}

.cbw-badges--single.cbw-pos-top-right,
.cbw-badges--single.cbw-pos-bottom-right {
	right: 12px;
}

/* ---- A badge ---- */

.cbw-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	text-align: center;
	text-decoration: none;
}

.cbw-badge--text {
	padding: 0.4em 0.75em;
	background: var(--cbw-bg, #d63638);
	color: var(--cbw-fg, #fff);
	font-size: 13px;
	font-weight: 700;
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	word-break: break-word;
}

.cbw-size-small {
	font-size: 11px;
}

.cbw-size-medium {
	font-size: 13px;
}

.cbw-size-large {
	font-size: 16px;
}

.cbw-badges--single .cbw-size-small {
	font-size: 13px;
}

.cbw-badges--single .cbw-size-medium {
	font-size: 15px;
}

.cbw-badges--single .cbw-size-large {
	font-size: 19px;
}

/* Shapes */

.cbw-shape-rectangle {
	border-radius: 0;
}

.cbw-shape-rounded {
	border-radius: 4px;
}

.cbw-shape-pill {
	padding-right: 1em;
	padding-left: 1em;
	border-radius: 999px;
}

.cbw-shape-circle {
	width: 4.6em;
	height: 4.6em;
	padding: 0.35em;
	border-radius: 50%;
	line-height: 1.1;
}

/* Ribbon: flush against the edge of the image with a notched tail. */

.cbw-shape-ribbon {
	/* The ribbon is pulled out to the image edge, so let it be that much wider than its stack. */
	max-width: calc(100% + 8px);
	padding: 0.45em 1.5em 0.45em 0.9em;
	clip-path: polygon(0 0, 100% 0, calc(100% - 0.7em) 50%, 100% 100%, 0 100%);
}

.cbw-pos-top-left .cbw-shape-ribbon,
.cbw-pos-bottom-left .cbw-shape-ribbon {
	margin-left: -8px;
}

.cbw-pos-top-right .cbw-shape-ribbon,
.cbw-pos-bottom-right .cbw-shape-ribbon {
	margin-right: -8px;
	padding: 0.45em 0.9em 0.45em 1.5em;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0.7em 50%);
}

.cbw-badges--single.cbw-pos-top-left .cbw-shape-ribbon,
.cbw-badges--single.cbw-pos-bottom-left .cbw-shape-ribbon {
	margin-left: -12px;
}

.cbw-badges--single.cbw-pos-top-right .cbw-shape-ribbon,
.cbw-badges--single.cbw-pos-bottom-right .cbw-shape-ribbon {
	margin-right: -12px;
}

.cbw-badges--single .cbw-shape-ribbon {
	max-width: calc(100% + 12px);
}

/* Keep clear of WooCommerce's zoom button in the top right of the gallery. */
.woocommerce-product-gallery:has(.woocommerce-product-gallery__trigger) .cbw-badges--single.cbw-pos-top-right {
	top: 60px;
}

/* Image badges. Themes style every image inside a product card, so these
   rules are deliberately forceful. */

.cbw-badge--image {
	width: var(--cbw-w, 64px);
	max-width: 100%;
}

.cbw-badge--image img.cbw-badge__img {
	position: static !important;
	inset: auto !important;
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	max-height: none !important;
	object-fit: contain !important;
	opacity: 1 !important;
	filter: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	transform: none !important;
}

.cbw-badges--single .cbw-badge--image {
	width: calc(var(--cbw-w, 64px) * 1.4);
}