.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 {
	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 #b45309;
}

.pexp-notice__mark {
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: #b45309;
}

.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;
}

/*
 * Cart and Checkout blocks. They own their submit buttons and offer no hook to
 * remove one, so the block script flags the document and these take the button
 * out of the flow. The Store API refuses the order regardless of this rule.
 */
.pexp-blocks-hide-checkout .wc-block-cart__submit-button,
.pexp-blocks-hide-checkout .wc-block-components-checkout-place-order-button,
.pexp-blocks-hide-checkout .wc-block-mini-cart__footer-checkout {
	display: none !important;
}

/*
 * Express payment, which is a separate button from the submit one above and is
 * the shorter path to a paid order: one tap, no checkout form. Hiding the
 * submit button and leaving Apple Pay sitting under it would be the wrong half
 * to take away. The continue rule is the "or" divider between the two, which
 * has nothing left to divide.
 */
.pexp-blocks-hide-checkout .wc-block-components-express-payment,
.pexp-blocks-hide-checkout .wc-block-components-express-payment-continue-rule {
	display: none !important;
}

/*
 * 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 in the space the buy button left,
 * directly under the short description, and without this it reads as part of the
 * paragraph above it rather than as the shop's own answer.
 */
.pexp-product-notice {
	margin: 1.25em 0;
}

/*
 * Shown against one variation instead, where WooCommerce's own availability line
 * would have gone. That slot brings its own spacing, and the panel keeping its
 * own as well leaves a gap the size of the panel.
 */
.woocommerce-variation-availability .pexp-product-notice,
.woocommerce-variation .pexp-product-notice {
	margin: 0;
}

/*
 * 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;
}