/* AIO Sales – badges, cart notes. Popup styles live in popup.css (loaded only when a popup is live). */

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

.aio-badges {
	position: absolute;
	z-index: 9;
	display: flex;
	flex-direction: column;
	gap: 6px;
	pointer-events: none;
	max-width: calc(100% - 20px);
}
.aio-pos-top-right { top: 10px; right: 10px; align-items: flex-end; }
.aio-pos-top-left { top: 10px; left: 10px; align-items: flex-start; }
.aio-pos-bottom-right { bottom: 10px; right: 10px; align-items: flex-end; }
.aio-pos-bottom-left { bottom: 10px; left: 10px; align-items: flex-start; }

.aio-badge {
	--aio-bg: #e11d48;
	--aio-fg: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--aio-bg);
	color: var(--aio-fg);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	white-space: nowrap;
	box-sizing: border-box;
	direction: rtl;
	unicode-bidi: plaintext;
	text-align: center;
}
.aio-size-sm { font-size: 11px; padding: 4px 8px; }
.aio-size-md { font-size: 13px; padding: 6px 11px; }
.aio-size-lg { font-size: 16px; padding: 8px 14px; }

/* Shapes */
.aio-style-pill { border-radius: 999px; }
.aio-style-rounded { border-radius: 6px; }
.aio-style-square { border-radius: 0; }
.aio-style-outline { background: #fff; color: var(--aio-bg); border: 2px solid var(--aio-bg); border-radius: 6px; }

.aio-style-circle {
	border-radius: 50%;
	white-space: normal;
	width: 4.6em;
	height: 4.6em;
	padding: .4em;
}

.aio-style-burst {
	white-space: normal;
	width: 5.2em;
	height: 5.2em;
	padding: .8em;
	clip-path: polygon(50% 0%, 61% 13%, 79% 9%, 81% 27%, 98% 35%, 88% 50%, 98% 65%, 81% 73%, 79% 91%, 61% 87%, 50% 100%, 39% 87%, 21% 91%, 19% 73%, 2% 65%, 12% 50%, 2% 35%, 19% 27%, 21% 9%, 39% 13%);
}

.aio-style-tag {
	border-radius: 4px;
	padding-inline-start: 1.4em;
	clip-path: polygon(0 50%, .9em 0, 100% 0, 100% 100%, .9em 100%);
}
.aio-pos-top-left .aio-style-tag,
.aio-pos-bottom-left .aio-style-tag {
	padding-inline-start: 11px;
	padding-inline-end: 1.4em;
	clip-path: polygon(0 0, calc(100% - .9em) 0, 100% 50%, calc(100% - .9em) 100%, 0 100%);
}

.aio-style-flag {
	padding-inline-end: 1.4em;
	clip-path: polygon(0 0, 100% 0, calc(100% - .8em) 50%, 100% 100%, 0 100%);
}

.aio-style-ribbon {
	position: relative;
	border-radius: 3px 3px 0 3px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.aio-style-corner {
	border-radius: 0 0 0 14px;
}
.aio-pos-top-right .aio-style-corner { border-radius: 0 0 0 14px; }
.aio-pos-top-left .aio-style-corner { border-radius: 0 0 14px 0; }
.aio-pos-bottom-right .aio-style-corner { border-radius: 14px 0 0 0; }
.aio-pos-bottom-left .aio-style-corner { border-radius: 0 14px 0 0; }

/* Single product gallery: a bit larger by default. */
.aio-badges--single .aio-size-md { font-size: 15px; padding: 7px 13px; }

/* Cart */
.aio-next-deal { margin-bottom: 1em; }
.aio-savings td strong { color: #15803d; }

@media (max-width: 600px) {
	.aio-badges { top: 6px; gap: 4px; }
	.aio-pos-top-right, .aio-pos-bottom-right { right: 6px; }
	.aio-pos-top-left, .aio-pos-bottom-left { left: 6px; }
	.aio-size-md { font-size: 12px; padding: 5px 9px; }
	.aio-size-lg { font-size: 14px; padding: 6px 11px; }
}

/* Badges waiting for the mover script (see BadgeRenderer::mover_script) stay hidden so they don't flash in the wrong spot. */
.aio-js .aio-badges--pending { visibility: hidden; }