/* Out of Stock Display for WooCommerce, frontend styles.
   Colours come from the settings page as CSS variables on :root. */

/* Positioning context for the badge. */
.woocommerce ul.products li.product.outofstock,
.products .product.outofstock,
.woocommerce div.product.outofstock,
.fdos-block-wrap {
	position: relative;
}

/* Badge */
.fdos-badge {
	position: absolute;
	top: 10px;
	z-index: 10;
	display: inline-block;
	margin: 0;
	padding: 6px 10px;
	border-radius: 3px;
	background: var(--fdos-badge-bg, #111111);
	color: var(--fdos-badge-color, #ffffff);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.fdos-badge--left {
	left: 10px;
	right: auto;
}

.fdos-badge--right {
	right: 10px;
	left: auto;
}

.fdos-badge--single {
	top: 14px;
	padding: 8px 12px;
	font-size: 13px;
}

/* Faded images in grids */
.fdos-grey-out ul.products li.product.outofstock img,
.fdos-grey-out .products .product.outofstock img,
.fdos-grey-out .fdos-block-wrap--loop img {
	opacity: 0.55;
	transition: opacity 0.2s ease;
}

.fdos-grey-out ul.products li.product.outofstock:hover img,
.fdos-grey-out .products .product.outofstock:hover img,
.fdos-grey-out .fdos-block-wrap--loop:hover img {
	opacity: 0.9;
}

/* Shortcode empty state */
.fdos-empty {
	padding: 24px;
	text-align: center;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 4px;
}

@media (max-width: 480px) {
	.fdos-badge {
		top: 6px;
		padding: 4px 8px;
		font-size: 10px;
	}

	.fdos-badge--left {
		left: 6px;
	}

	.fdos-badge--right {
		right: 6px;
	}
}