/*
 * Flair Companion: the Purchase note on a product page, the notes at checkout
 * and the Service terms. They look right under any theme: this file uses only
 * this plugin's Brand Kit properties (--flair-companion-*) and WordPress's own
 * layout properties. A theme can refine them with its own CSS.
 *
 * Sizes are in rem, and the ones that should follow the screen use clamp().
 */

/* These blocks are printed straight in the page's constrained layout. Without a
   width they would take the narrow content width, or the full width with no
   margin, and sit out of line with the product above. They get the wide width,
   the same as the product and its tabs, centered the same way. */
.is-layout-constrained > .flair-woo-purchase-note,
.is-layout-constrained > .flair-woo-purchase-notes,
.is-layout-constrained > .flair-woo-service-terms{
	box-sizing:border-box;
	max-width:var(--wp--style--global--wide-size,72.5rem);
	margin-left:auto;
	margin-right:auto;
}

/* ---- Purchase note on the product page ---- */
.flair-woo-purchase-note,
.flair-woo-purchase-notes{
	box-sizing:border-box;
	margin-top:var(--flair-companion-space-xl);
	padding:clamp(1rem,.8rem + .8vw,1.5rem);
	border:0.0625rem solid var(--flair-companion-color-border);
	border-radius:var(--flair-companion-radius-card,1rem);
	background:var(--flair-companion-color-background);
	box-shadow:var(--flair-companion-shadow-sm);
	color:var(--flair-companion-color-foreground);
	font-family:var(--flair-companion-font-body);
}
.flair-woo-purchase-note > :first-child,
.flair-woo-purchase-notes > :first-child{margin-top:0}
.flair-woo-purchase-note > :last-child,
.flair-woo-purchase-notes > :last-child{margin-bottom:0}
.flair-woo-purchase-note p:first-child,
.flair-woo-purchase-notes p:first-child{
	font-family:var(--flair-companion-font-headings);
	font-weight:700;
	font-size:clamp(1.0625rem,1rem + .25vw,1.25rem);
}
.flair-woo-purchase-note ul,
.flair-woo-purchase-notes ul{margin:.5em 0 0;padding-left:1.2em}

/* ---- Notes at checkout: quieter, the buyer is about to pay ---- */
.flair-woo-purchase-notes{
	margin-top:var(--flair-companion-space-md);
	padding:var(--flair-companion-space-md);
	box-shadow:none;
	font-size:var(--flair-companion-font-size-small);
	line-height:1.5;
}
.flair-woo-purchase-notes p:first-child,
.flair-woo-purchase-notes li{
	font-size:var(--flair-companion-font-size-small);
}
.flair-woo-purchase-notes p:first-child{font-weight:600}
.flair-woo-purchase-notes .flair-woo-purchase-notes__required{
	margin:var(--flair-companion-space-xs) 0 0;
	font-size:.8125rem;
	font-weight:400;
	color:var(--flair-companion-color-muted);
}

/* ---- Service terms: fine print ----
   Delivery and refund terms. A step smaller than the body text and muted, set
   off by a hairline, so it reads as a footnote to the product and never
   competes with the description. The text runs the full width of the content. */
.flair-woo-service-terms{
	margin-top:var(--flair-companion-space-lg);
	padding-top:var(--flair-companion-space-sm);
	border-top:0.0625rem solid var(--flair-companion-color-border);
	color:var(--flair-companion-color-muted);
	font-family:var(--flair-companion-font-body);
}
.flair-woo-service-terms :is(p,li){
	margin:0 0 .5em;
	max-width:none;
	font-size:.8125rem;
	line-height:1.6;
}
.flair-woo-service-terms > :last-child{margin-bottom:0}
.flair-woo-service-terms a{
	color:inherit;
	text-decoration:underline;
	text-underline-offset:.15em;
}
.flair-woo-service-terms a:hover{color:var(--flair-companion-color-primary)}