/* UN - Produit requis — a styled card: warning message on top, then a compact
   horizontal product card (image left, details right). Colors/typography are
   Elementor-tunable (Style tab); defaults are fallbacks from tokens.css. */

.un-req {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.un-req *,
.un-req *::before,
.un-req *::after {
	box-sizing: border-box;
}

/* The card frame. */
.un-req__box {
	--un-req-accent: var(--un-rose, #916F73);

	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 16px;
	background: var(--un-bg, #fff);
	border: 1px solid var(--un-border, #e5e5e5);
	border-left: 3px solid var(--un-req-accent);
	color: var(--un-text, #000000b3);
	font-family: var(--un-font-body, system-ui, sans-serif);
	line-height: var(--un-lh-body, 1.6);
}

.un-req__box[hidden] {
	display: none;
}

/* === Warning message (top, full width) ============================ */

.un-req__message {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding-right: 24px; /* room for the dismiss button */
}

.un-req__icon {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1.3;
	color: var(--un-req-accent);
}

.un-req__note {
	margin: 0;
	font-size: var(--un-fs-s, 14px);
	font-weight: 600;
}

/* === Horizontal product card (image left, details right) ========== */

.un-req__product {
	display: flex;
	align-items: center;
	gap: 14px;
}

.un-req__media {
	flex: 0 0 auto;
	display: block;
	width: 96px;
	height: 96px;
	background: var(--un-bg-soft, #f5f5f5);
	overflow: hidden;
}

.un-req__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.un-req__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.un-req__title {
	font-size: var(--un-fs-s, 14px);
	font-weight: 600;
	color: var(--un-black, #000);
	text-decoration: none;
	line-height: 1.3;
}

.un-req__title:hover {
	color: var(--un-rose, #916F73);
}

.un-req__see {
	font-size: var(--un-fs-xs, 13px);
	font-weight: 600;
	color: var(--un-rose, #916F73);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.un-req__see:hover {
	color: var(--un-rose-deep, #5e484b);
}

.un-req__price {
	font-size: var(--un-fs-xs, 13px);
	color: var(--un-text-2, #00000073);
}

.un-req__price del {
	opacity: 0.6;
	margin-right: 4px;
}

/* Add-to-cart — matches the product-card button aesthetic. */
.un-req__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 5px;
	padding: 7px 14px;
	border: 1px solid var(--un-req-accent);
	background: transparent;
	color: var(--un-req-accent);
	font-family: inherit;
	font-size: var(--un-fs-xs, 13px);
	line-height: 1.2;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.un-req__add:hover,
.un-req__add.un-reco__add--done {
	background: var(--un-req-accent);
	color: var(--un-white, #fff);
}

.un-req__add[hidden] {
	display: none;
}

.un-req__add svg {
	width: 15px;
	height: 15px;
}

/* === Dismiss ====================================================== */

.un-req__dismiss {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 4px;
	border: 0;
	background: transparent;
	color: var(--un-text-2, #00000073);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.un-req__dismiss:hover {
	color: var(--un-text, #000000b3);
}

/* === Responsive =================================================== */

@media (max-width: 480px) {
	.un-req__media {
		width: 76px;
		height: 76px;
	}
}