/* Every rule here is scoped to paragraphs, because List and Post Terms have
   styles with the same names (Checklist is also is-style-check, and Pills is
   also is-style-pill). */

/* Eyebrow: the design system's announcement pill, with a lit brand dot. It
   shrinks to its text, so it centers in a constrained or centered stack and
   sits at the start of a column. */
p.is-style-eyebrow {
	align-items: center;
	background-color: var(--wp--preset--color--primary-tint);
	border: 1px solid var(--wp--preset--color--primary-soft);
	border-radius: 9999px;
	color: var(--wp--preset--color--primary-strong);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	gap: 0.5rem;
	letter-spacing: 0.01em;
	line-height: 1.4;
	padding: 0.375rem 0.875rem;
	width: fit-content;
}

p.is-style-eyebrow::before {
	background-color: var(--wp--preset--color--primary);
	border-radius: 9999px;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
	content: "";
	flex: none;
	height: 0.375rem;
	width: 0.375rem;
}

p.is-style-eyebrow.has-text-align-center {
	margin-inline: auto;
}

/* A constrained layout centers every child with auto margins, which would
   center a pill that shrinks to its text even in a left-aligned column such
   as post content. Unless the pill is centered on purpose, line it up with
   the start of the content column instead. */
.is-layout-constrained > p:is(.is-style-eyebrow, .is-style-pill, .is-style-badge):not(.has-text-align-center):not(.has-text-align-right) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}

p.is-style-eyebrow a {
	color: inherit;
}

/* Badge: a solid brand label, such as "Best value" or "New". At the top of a
   featured card it sits on the card's border. */
p.is-style-badge {
	background-color: var(--wp--preset--color--primary);
	border-radius: 9999px;
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	padding: 0.3125rem 0.875rem;
	text-transform: uppercase;
	white-space: nowrap;
	width: fit-content;
}

.is-style-card-featured > p.is-style-badge:first-child {
	box-shadow: 0 4px 10px color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
	left: 50%;
	margin: 0 !important;
	position: absolute;
	top: 0;
	transform: translate(-50%, -50%);
}

.is-style-card-featured > p.is-style-badge:first-child + * {
	margin-block-start: 0;
}

/* Pill: a tinted tag for a category, a status, or a version. */
p.is-style-pill {
	background-color: var(--wp--preset--color--primary-tint);
	border: 1px solid var(--wp--preset--color--primary-soft);
	border-radius: 9999px;
	color: var(--wp--preset--color--primary-strong);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	padding: 0.125rem 0.625rem;
	width: fit-content;
}

/* Check: one short reassurance with a green check, such as "No card
   required". Set a few side by side in a row. */
p.is-style-check {
	align-items: center;
	color: var(--wp--preset--color--contrast-2);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	gap: 0.375rem;
}

p.is-style-check::before {
	background-color: #16a34a;
	content: "";
	flex: none;
	height: 0.875rem;
	-webkit-mask: var(--hassium-check) center / contain no-repeat;
	mask: var(--hassium-check) center / contain no-repeat;
	width: 0.875rem;
}

p.is-style-check.has-text-align-center {
	justify-content: center;
}

.is-style-section-brand p.is-style-check::before {
	background-color: currentColor;
}

/* Price: bold the amount and it is set large and heavy; the rest of the line
   stays small and muted. Strike through an old price to show a discount. */
p.is-style-price {
	align-items: baseline;
	color: var(--wp--preset--color--contrast-2);
	column-gap: 0.5rem;
	display: flex;
	flex-wrap: wrap;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
}

p.is-style-price.has-text-align-center {
	justify-content: center;
}

p.is-style-price strong {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--inter);
	font-size: clamp(2.25rem, 1.8rem + 1.6vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
}

p.is-style-price s {
	color: var(--wp--preset--color--contrast-2);
}