.pexp-notice-host {
	margin: 0 0 1.25em;
}

/*
 * One panel for everything this plugin says to a customer, on the product page
 * and in the basket alike: a band down the leading edge, the clock, and the
 * sentence at whatever size the theme sets its own text in. Fixed sizes and a
 * fixed cream background were the old version, and they made the panel a
 * stranger on any shop whose type was larger or whose pages are dark. The tint
 * and the rules are mixed from the text colour instead, so the panel takes on
 * the shop it is sitting in.
 */
.pexp-notice,
.pexp-product-notice {
	/*
	 * The band and the mark are drawn in one colour, held in one place so
	 * anything with a view about it -- a theme, a child theme, an add-on with a
	 * styling screen -- can change both by naming this panel and setting one
	 * property.
	 */
	--pexp-notice-accent: #b45309;

	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	padding: 0.9em 1.1em;
	border: 1px solid rgba(125, 125, 125, 0.28);
	border-radius: 4px;
	background: rgba(125, 125, 125, 0.08);
	background: color-mix(in srgb, currentColor 6%, transparent);
	color: inherit;
	line-height: 1.5;
}

/*
 * Leading edge rather than left: a right-to-left shop puts the band on the side
 * the sentence starts from, which is the side that reads as an accent.
 */
.pexp-notice,
.pexp-product-notice {
	border-inline-start: 3px solid var(--pexp-notice-accent);
}

.pexp-notice__mark {
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: var(--pexp-notice-accent);
}

/* The blocks cart draws its own banner, and the mark arrives inside a span. */
.pexp-notice__mark-host {
	display: flex;
	flex: 0 0 auto;
}

.pexp-notice__text {
	margin: 0;
}

.pexp-notice__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pexp-notice__list li {
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

/*
 * A basket can hold more than one thing that has to come out. The rule between
 * them is the only thing saying where one sentence ends and the next begins.
 */
.pexp-notice__list li + li {
	margin-top: 0.55em;
	padding-top: 0.55em;
	border-top: 1px solid rgba(125, 125, 125, 0.28);
}

.widget_shopping_cart .pexp-notice,
.wc-block-mini-cart .pexp-notice {
	margin: 0.75em 0;
	font-size: 0.9em;
}

/*
 * The product page, where the buy button would have been. WooCommerce renders
 * nothing at all in its place, so without this the page reads as broken rather
 * than as a decision the shop has made. Room above as well as below: the panel
 * lands directly under the short description, and without it the sentence reads
 * as part of the paragraph above rather than as the shop's own answer.
 */
.pexp-product-notice {
	margin: 1.25em 0;
}

/*
 * A form drawn by something other than WooCommerce, on a product whose date has
 * passed. The plugin takes WooCommerce's own add-to-cart template away, but a
 * page builder or an add-ons plugin that writes its own form never asked and
 * cannot be unhooked, and the button it leaves behind sits next to the sentence
 * saying the product is no longer for sale. Pressing it is refused whatever
 * happens here, so this is about what the page says, not about what it can do.
 *
 * !important because the rule it is overruling belongs to the theme, and the
 * plugin has no way to be more specific than a stranger's stylesheet.
 */
.pexp-refused form.cart,
.pexp-refused .single_add_to_cart_button {
	display: none !important;
}

/*
 * The cart row the customer is being asked to take out. The basket message
 * names it, but a long cart makes them hunt for it, so the row is marked to put
 * the sentence and the thing it is about in the same place. A border rather than
 * a background, because a theme's own row shading is unknown and a colour on its
 * own is not something everybody can see.
 */
.pexp-cart-item--expired > td,
.pexp-cart-item--expired > th {
	background: #fcf0f1;
}

.pexp-cart-item--expired > td:first-child,
.pexp-cart-item--expired > th:first-child {
	box-shadow: inset 3px 0 0 #b32d2e;
}

/*
 * What the shortcode, and the block and widget built on it, draw about one
 * product: the date it stops being available, or the notice that stands in for
 * the buy button once it has. The box around them only exists to carry an
 * alignment, so it adds no space of its own. start and end are the logical
 * sides, which is what makes a right-to-left shop put "start" on the right.
 */
.pexp-display {
	margin: 0;
}

.pexp-display .pexp-product-notice,
.pexp-display .pexp-notice-host {
	margin-top: 0;
}

.pexp-expiry-date {
	margin: 0 0 1em;
	line-height: 1.5;
}

.pexp-expiry-date__value {
	font-weight: 600;
}

.pexp-display--align-start {
	text-align: start;
}

.pexp-display--align-center {
	text-align: center;
}

.pexp-display--align-end {
	text-align: end;
}

.pexp-display--align-start .pexp-notice,
.pexp-display--align-start .pexp-product-notice {
	justify-content: flex-start;
}

.pexp-display--align-center .pexp-notice,
.pexp-display--align-center .pexp-product-notice {
	justify-content: center;
}

.pexp-display--align-end .pexp-notice,
.pexp-display--align-end .pexp-product-notice {
	justify-content: flex-end;
}