/**
 * Fat Boy's — "Have it marinated" block on the product page.
 *
 * Built on the tokens in mockup.css and shaped to match the "How much, and how long"
 * panel below it, so the product page reads as two cards rather than two designs.
 *
 * NO COLOURED SIDE BAR. The allergen line is the most important line in the block and
 * the obvious move is a thick red stripe down the left of a notice box. That pattern is
 * flagged on this site and it is not used here. The nut line is set in the same weight
 * as the safety rows in product-facts.css — marked, not shouted — and the warning is
 * carried a second time in the satay option's own text, where a stripe could never
 * reach.
 */

.fb-marinade {
	margin: 1.5rem 0;
	padding: 1rem 1.1rem 1.15rem;
	border: 2px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	background: #fff;
}

.fb-marinade__title {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
	line-height: 1.2;
	text-transform: none;
}

.fb-marinade__lede {
	margin: 0 0 0.7rem;
	font-size: 0.95rem;
	overflow-wrap: anywhere;
}

/*
 * His sentence, and his declaration. Both are his to make, so both are set plainly and
 * at the same weight — hedging one of them would make his own claim look doubtful, and
 * shouting the other would make it look like the only thing worth reading.
 */
.fb-marinade__claim,
.fb-marinade__nuts {
	margin: 0 0 0.25rem;
	font-size: 0.95rem;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.fb-marinade__nuts {
	margin-bottom: 0.9rem;
}

.fb-marinade__label {
	display: block;
	margin: 0 0 0.35rem;
	font-size: 0.9rem;
	font-weight: 700;
	opacity: 0.75;
}

/*
 * Full width on a phone, capped on a desktop so a ten-item list does not stretch to the
 * width of the column. woo.css already styles `.woocommerce select`; this only sizes it.
 */
.fb-marinade__select {
	width: 100%;
	max-width: 22rem;
}

/*
 * Shown only while satay is selected. It is a second copy of the warning, never the
 * only one: the option itself reads "Satay — contains nuts", which is what a customer
 * with JavaScript off, or a screen reader walking the option list, will hear.
 */
.fb-marinade__alert {
	margin: 0.55rem 0 0;
	font-size: 0.95rem;
	font-weight: 700;
}

.fb-marinade__alert[hidden] {
	display: none;
}

.fb-marinade__cost {
	margin: 0.6rem 0 0;
	font-size: 0.86rem;
	opacity: 0.75;
}