/* Per-product quantity-limit message.
   The outer .occr-qty-msg takes its own line; the inner pill (.occr-qty-msg__text)
   is capped so it is never full-width. Archive floats it (overlay, centered) above
   the product image; product/cart place it in-flow above the controls, aligned to
   the start (right in RTL). */
.occr-qty-msg {
	display: none;
	width: 100%;
	box-sizing: border-box;
}

.occr-qty-msg.is-visible {
	display: block;
}

.occr-qty-msg__text {
	display: inline-block;
	max-width: 320px;
	box-sizing: border-box;
	padding: 6px 10px;
	border: 1px solid #f5c6c2;
	border-radius: 6px;
	background: #fdecea;
	color: #a61b1b;
	font-size: .8em;
	line-height: 1.35;
	text-align: center;
}

.occr-qty-msg--archive {
	text-align: center;
	z-index: 5;
}

.occr-qty-msg--product,
.occr-qty-msg--cart {
	flex-basis: 100%; /* take a full line if the controls sit in a flex row */
	text-align: start; /* align the pill to the start (right in RTL) */
	margin: 8px 0;
}

/* Cart edit form: keep the message + quantity + update together as one column
   beside the image; the message sits on its own line above the qty + update. */
.occr-qty-col {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

@media (max-width: 767px) {
	.occr-qty-msg {
		margin-top: 8px;
	}
}