/*
 * Product caption chips. Every look reads a custom property first, so Site Settings → Caption
 * chips (set on the kit) styles every chip on the site and a widget can still change its own.
 * Defaults: a dark translucent chip with light text.
 */
.ndet-cap {
	display: inline-flex;
	align-items: center;
	gap: var(--ndet-cap-gap, 8px);
	box-sizing: border-box;
	max-width: 100%;
	margin: 0;
	padding: var(--ndet-cap-pad, 7px 12px);
	border-radius: var(--ndet-cap-radius, 8px);
	background: var(--ndet-cap-bg, rgba(26, 22, 23, .8));
	color: var(--ndet-cap-color, #f7f4ee);
	/* Until Site Settings → Caption Chips sets a font: the kit's Text font (Global Fonts), not the
	 * theme's. */
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: 1.2;
	text-align: left;
	overflow-wrap: break-word;
}

/* The mark: one CSS image per mark (the inline rules after this file set --ndet-mark-img). */
.ndet-mark {
	display: inline-block;
	flex: none;
	width: auto;
	height: var(--ndet-cap-mark, 17px);
	aspect-ratio: var(--ndet-mark-ratio, 1);
	background: var(--ndet-mark-img) center / contain no-repeat;
	color: var(--ndet-cap-icon, currentColor);
}

/* On an image, or with "In a corner": pinned to a corner, set per device by the widget. */
.ndet-capfig {
	position: relative;
	display: block;
	margin: 0;
}

.ndet-capfig--fill,
.ndet-capfig--fill > a {
	display: block;
	width: 100%;
	height: 100%;
}

/* The widget's own box around the figure takes the full height too. */
.elementor-widget-container:has(> .ndet-capfig--fill) {
	height: 100%;
}

.ndet-capfig--fit {
	display: inline-block;
	max-width: 100%;
	vertical-align: top;
}

.ndet-capfig > .ndet-cap {
	position: absolute;
	right: auto;
	bottom: var(--ndet-cap-y, 16px);
	left: var(--ndet-cap-x, 16px);
	top: auto;
	z-index: 2;
	max-width: calc(100% - 2 * var(--ndet-cap-x, 16px));
}

@media (max-width: 767px) {
	.ndet-cap {
		padding: var(--ndet-cap-pad, 5px 10px);
		font-size: 13px;
	}

	.ndet-mark {
		height: var(--ndet-cap-mark, 16px);
	}
}