/* Seven Native WooCommerce — single-product presentation: the two-column
   layout, gallery badges, stock line, trust strip, sticky buy bar, the
   product-info block and the reviews section. Head-enqueued on product pages
   after the Theme layer sheet; the Theme keeps tabs.css (also used on account
   pages), reviews.css and the variation form. */
@layer components {
	/* The product page starts one step below the app bar and ends one above
	   the footer, like every other template (settings/space.css). Kept at zero
	   specificity so the Theme's `.st-breadcrumb-row + main` can drop the
	   opening space when its breadcrumb row has already opened the page. */
	:where(main.st-product) {
		padding-block: var(--st-page-block-start) var(--st-page-block-end);
	}

	/* The two panes (Material 3 list-detail): stacked on a compact or medium
	   window, gallery beside summary once the layout has 48rem of inline
	   size — measured on the layout itself, so a narrow host stays stacked
	   whatever the viewport. The panes sit a pane spacer apart; the row gap
	   and the seam below step with the window class, on the 8dp grid. */
	.st-product-layout {
		container-type: inline-size;
		display: grid;
		grid-template-columns:
			minmax(0, var(--st-pl-gallery, 1fr))
			minmax(0, var(--st-pl-summary, 1fr));
		gap: var(--st-space-6) var(--st-pane-spacer);
		align-items: start;
		margin-block-end: var(--st-space-10);
	}

	.st-product-layout--ratio-58-42 {
		--st-pl-gallery: 58fr;
		--st-pl-summary: 42fr;
	}

	.st-product-layout--ratio-66-33 {
		--st-pl-gallery: 66fr;
		--st-pl-summary: 34fr;
	}

	/* Stacked: each pane spans both tracks. */
	.st-product-layout__gallery,
	.st-product-layout__summary {
		grid-column: 1 / -1;
	}

	@container (min-width: 48rem) {
		.st-product-layout__gallery {
			grid-column: 1;
		}

		.st-product-layout__summary {
			grid-column: 2;
		}

		.st-product-layout--sticky-summary .st-product-layout__summary {
			position: sticky;
			inset-block-start: var(--st-space-lg);
		}
	}

	@media (width >= 52.5em) {
		.st-product-layout {
			row-gap: var(--st-space-8);
			margin-block-end: var(--st-space-16);
		}
	}

	.st-product-layout__gallery {
		position: relative;
		min-inline-size: 0;
	}

	.st-product-layout__summary {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-4);
		min-inline-size: 0;
	}

	/* summary internals */

	/* The H1 of the page: the Theme's page-title role, which every page's H1
	   shares, so a product name no longer outranks the catalogue title. */
	.st-product-layout__summary .product_title {
		margin: 0;
		font-size: var(--st-type-page-title-size, var(--st-font-size-h2));
		line-height: var(--st-type-page-title-lh, var(--st-line-height-tight));
		letter-spacing: var(--st-letter-spacing-snug);
	}

	.st-product-layout__summary .woocommerce-product-rating {
		display: flex;
		align-items: center;
		gap: var(--st-space-2);
		margin: 0;
		font-size: var(--st-font-size-sm);
	}

	.st-product-layout__summary .woocommerce-review-link {
		color: var(--st-fg-muted);
	}

	.st-product-layout__summary .price {
		margin: 0;
		color: var(--st-fg);
		font-size: var(--st-font-size-h3);
		font-weight: var(--st-font-weight-bold);
		line-height: var(--st-line-height-tight);
	}

	.st-product-layout__summary .price del {
		margin-inline-end: var(--st-space-2);
		color: var(--st-fg-muted);
		font-size: 0.7em;
		font-weight: var(--st-font-weight-normal);
	}

	.st-product-layout__summary .price ins {
		text-decoration: none;
	}

	.st-product-layout__summary .woocommerce-product-details__short-description {
		color: var(--st-fg-muted);
		line-height: var(--st-line-height-normal);
	}

	.st-product-layout__summary .woocommerce-product-details__short-description p {
		margin-block: 0 var(--st-space-3);
	}

	.st-product-layout__summary form.cart:not(.variations_form) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--st-space-3);
		margin: 0;
	}

	.st-product-layout__summary .woocommerce-variation-add-to-cart {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--st-space-3);
	}

	.st-product-layout__summary .single_add_to_cart_button {
		flex: 1 1 12rem;
	}

	.st-product-layout__summary .product_meta {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-1);
		margin: 0;
		padding-block-start: var(--st-space-4);
		border-block-start: 1px solid var(--st-border-subtle);
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
	}

	.st-product-layout__summary .product_meta a {
		color: var(--st-accent-fg);
	}

	/* gallery badges: the look is the shared badge sheet (the generated region
	   at the end of this file); this places the product page's stack. */

	.st-product-badges--product {
		position: absolute;
		inset-block-start: var(--st-space-3);
		inset-inline-start: var(--st-space-3);
		z-index: var(--st-z-raised);
	}

	/* The badges belong on the photo. A Theme gallery strip on their edge
	   pushes the photo inward by the strip and the gallery's gap; the strip
	   only stands beside the photo above 48em, in a carousel with thumbnails.
	   Left and right are physical, so in RTL the right strip is the near one. */
	@media (width > 48em) {
		.st-product-layout__gallery:has(.st-gallery--has-thumbs.st-gallery--thumbs-left) .st-product-badges--product,
		[dir="rtl"] .st-product-layout__gallery:has(.st-gallery--has-thumbs.st-gallery--thumbs-right) .st-product-badges--product {
			inset-inline-start: calc(2 * var(--st-space-3) + var(--st-gallery-thumb-size));
		}

		[dir="rtl"] .st-product-layout__gallery:has(.st-gallery--has-thumbs.st-gallery--thumbs-left) .st-product-badges--product {
			inset-inline-start: var(--st-space-3);
		}
	}

	/* stock indicator — block-level, as the summary column already lays it out;
	   inline, a product template's element wrapper would add a line's descent. */

	.st-product-stock {
		display: flex;
		align-items: center;
		gap: var(--st-space-2);
		margin: 0;
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-medium);
	}

	.st-product-stock .st-icon {
		flex-shrink: 0;
	}

	.st-product-stock--in {
		color: var(--st-success-fg);
	}

	.st-product-stock--low,
	.st-product-stock--backorder {
		color: var(--st-warning-fg);
	}

	.st-product-stock--out {
		color: var(--st-error-fg);
	}

	/* trust block */

	.st-product-trust {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-2);
		margin: 0;
		padding: var(--st-space-4);
		border-radius: var(--st-radius-card);
		background: var(--st-bg-subtle);
		list-style: none;
	}

	.st-product-trust__item {
		display: flex;
		align-items: center;
		gap: var(--st-space-3);
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
	}

	.st-product-trust__item .st-icon {
		flex-shrink: 0;
		color: var(--st-accent-fg);
	}

	/* sticky add-to-cart */

	/* The theme's floating dock rides above whichever of this module's bottom
	   bars is pinned on screen, instead of covering its buttons: the sticky bar
	   (sticky-atc.js) or a narrow variation table's footer (variation-table.js),
	   each publishing its own height while shown. The theme reads the larger as
	   `--st-float-zone-lift` (its docs/floating-dock-lift-contract.md). */
	:root {
		--st-float-zone-lift: max(var(--st-sticky-atc-lift, 0px), var(--st-variation-table-lift, 0px));
	}

	/* The bottom app bar (Material 3): surface-container at level 2 — the
	   tone and the shadow separate it from the page, no hairline. */
	.st-sticky-atc {
		position: fixed;
		inset-inline: 0;
		inset-block-end: 0;
		z-index: var(--st-z-sticky);
		background: var(--st-surface-container);

		/* A drop shadow falls off the screen under a bar on the bottom edge:
		   the Theme's bottom-anchored role keeps the ambient part alone. */
		box-shadow: var(--st-shadow-sheet-raised, var(--st-shadow-app-bar-scrolled));
		transform: translateY(100%);
		transition: transform var(--st-duration-base) var(--st-ease-standard);
	}

	.st-sticky-atc.is-visible {
		transform: translateY(0);
	}

	.st-sticky-atc__inner {
		display: flex;
		align-items: center;
		gap: var(--st-space-4);
		padding-block: var(--st-space-3);
	}

	.st-sticky-atc__thumb {
		flex-shrink: 0;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--st-radius-md);
		object-fit: cover;
	}

	.st-sticky-atc__title {
		overflow: hidden;
		font-weight: var(--st-font-weight-semibold);
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.st-sticky-atc__price {
		margin-inline-start: auto;
		white-space: nowrap;
		font-weight: var(--st-font-weight-semibold);
	}

	.st-sticky-atc__buy {
		flex-shrink: 0;
		min-block-size: var(--st-tap-target-min);
		padding-block: var(--st-space-2);
		padding-inline: var(--st-space-6);
		border: 0;
		border-radius: var(--st-radius-button);
		background: var(--st-accent-solid);
		color: var(--st-accent-on);
		font: inherit;
		font-weight: var(--st-font-weight-semibold);
		cursor: pointer;
		transition: var(--st-transition-color);
	}

	.st-sticky-atc__buy:hover {
		background: var(--st-accent-solid-hover);
	}

	.st-sticky-atc--top {
		inset-block: var(--st-sticky-atc-top, 0) auto;
		transform: translateY(-100%);
	}

	.st-sticky-atc--full .st-sticky-atc__inner {
		max-inline-size: none;
	}

	@media (width < 37.5em) {
		.st-sticky-atc__thumb {
			display: none;
		}
	}
}

@layer components {
	/* Single-product information block (description / additional info / reviews),
	   shown as tabs, stacked sections, or a native <details> accordion. It sits
	   just below the fold; this whole sheet loads blocking in the head, so its
	   top margin is reserved on the first frame (deferred, the block dropped
	   ~45px when the margin arrived — a measured ~0.05 CLS). The tabs chrome it
	   reuses is the Theme's generic tabs.css. */
	.st-product-info {
		margin-block-start: var(--st-space-fluid-lg);
	}

	/* A product template's Product details starts a row gap below the panes.
	   Today's layout gets that seam from its own bottom margin, which the first
	   block's top margin collapses into, so the first block here keeps none. */
	.st-product-pane--details > :first-child,
	.st-product-pane--details > :first-child > :first-child {
		margin-block-start: 0;
	}

	.st-product-info--stacked {
		display: flex;
		flex-direction: column;
		gap: var(--st-space-fluid-lg);
	}

	.st-product-info__heading {
		margin: 0 0 var(--st-space-4);
		font-size: var(--st-font-size-h4);
		line-height: var(--st-line-height-snug);
	}

	.st-product-info__panel {
		border-block-end: 1px solid var(--st-border);
	}

	.st-product-info__panel .st-prose {
		padding-block-end: var(--st-space-4);
	}

	.st-product-info__summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: var(--st-space-4);
		font-size: var(--st-font-size-lg);
		font-weight: var(--st-font-weight-semibold);
		cursor: pointer;
		list-style: none;
	}

	.st-product-info__summary::-webkit-details-marker {
		display: none;
	}

	.st-product-info__summary::after {
		content: "";
		inline-size: 0.6em;
		block-size: 0.6em;
		border-inline-end: 2px solid currentcolor;
		border-block-end: 2px solid currentcolor;
		transform: rotate(45deg);
		transition: transform var(--st-duration-fast) var(--st-ease-standard);
	}

	.st-product-info__panel[open] .st-product-info__summary::after {
		transform: rotate(-135deg);
	}
}

@layer components {
	/* Product reviews: their own section after the product-info block —
	   heading, rating summary, the review form folded behind one control,
	   then WooCommerce's review list. The summary lays out against the
	   section's own width, like the two panes above it. Sizes the Theme has
	   no token for are defined once here. */
	.st-reviews {
		--st-reviews-star-size: var(--st-font-size-lg);
		--st-reviews-small-star-size: var(--st-font-size-sm);
		--st-reviews-avatar-size: var(--st-control-height-lg);
		--st-reviews-bar-size: var(--st-space-1-5);
		--st-reviews-distribution-max: 22rem;
		--st-reviews-form-max: 40rem;
		--st-reviews-toggle-min: 15rem;

		container-type: inline-size;
		display: grid;
		gap: var(--st-space-6);
		margin-block-start: var(--st-space-fluid-lg);
	}

	.st-reviews__title {
		margin: 0;
		font-size: var(--st-type-section-title-size, var(--st-font-size-h4));
		line-height: var(--st-type-section-title-lh, var(--st-line-height-snug));
		text-align: center;
	}

	.st-reviews .st-rating {
		display: flex;
		gap: var(--st-space-1);
		color: var(--st-rating);
	}

	.st-reviews .st-rating__star {
		inline-size: var(--st-reviews-star-size);
		block-size: var(--st-reviews-star-size);
	}

	/* summary */

	.st-reviews__summary {
		display: grid;
		justify-items: center;
		gap: var(--st-space-5);
		text-align: center;
	}

	.st-reviews__overview {
		display: grid;
		justify-items: center;
		gap: var(--st-space-2);
	}

	.st-reviews__average {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: var(--st-space-2);
	}

	.st-reviews__score {
		font-weight: var(--st-font-weight-semibold);
	}

	.st-reviews__basis,
	.st-reviews__empty {
		margin: 0;
		color: var(--st-fg-muted);
	}

	.st-reviews__distribution {
		display: grid;
		gap: var(--st-space-2);
		inline-size: 100%;
		max-inline-size: var(--st-reviews-distribution-max);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.st-reviews__row {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) 3ch;
		align-items: center;
		gap: var(--st-space-3);
		font-size: var(--st-font-size-sm);
	}

	.st-reviews__row-stars {
		--st-reviews-star-size: var(--st-reviews-small-star-size);
	}

	.st-reviews__bar {
		position: relative;
		overflow: hidden;
		block-size: var(--st-reviews-bar-size);
		border-radius: var(--st-radius-full);
		background: var(--st-border-subtle);
	}

	/* The fill grows from the inline start, so it reads the right way in RTL. */
	.st-reviews__bar::before {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		inline-size: var(--st-review-share, 0%);
		border-radius: inherit;
		background: var(--st-rating);
	}

	.st-reviews__row-count {
		color: var(--st-fg-muted);
		font-variant-numeric: tabular-nums;
		text-align: end;
	}

	/* A phone gets a full-width control; a wide section centres it. */
	.st-reviews__compose {
		display: grid;
		inline-size: 100%;
	}

	.st-reviews__compose .woocommerce-verification-required {
		margin: 0;
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
	}

	/* A wide section sets the three parts side by side, with rules between
	   them; the empty state stays one centred column. The parts stretch to
	   their columns so the rules sit on the column edges. */
	@container (min-width: 48rem) {
		.st-reviews__summary:not(.st-reviews__summary--empty) {
			grid-auto-columns: minmax(0, 1fr);
			grid-auto-flow: column;
			justify-items: stretch;
			gap: 0;
		}

		.st-reviews__summary:not(.st-reviews__summary--empty) > * {
			align-content: center;
			padding-inline: var(--st-space-6);
		}

		.st-reviews__summary:not(.st-reviews__summary--empty) > * + * {
			border-inline-start: 1px solid var(--st-border-subtle);
		}

		.st-reviews__summary:not(.st-reviews__summary--empty) .st-reviews__distribution {
			max-inline-size: none;
		}

		.st-reviews__compose {
			justify-items: center;
		}

		.st-reviews__toggle {
			min-inline-size: var(--st-reviews-toggle-min);
		}
	}

	/* The form and the list open with a rule, so a folded form or an empty
	   list leaves no stray line. */
	.st-reviews__form,
	.st-reviews__list {
		padding-block-start: var(--st-space-6);
		border-block-start: 1px solid var(--st-border-subtle);
	}

	/* form — the wrapper never sets `display` outside this fallback, or it
	   would override `[hidden]`. Without the script the control is a link to
	   the form, and the address it targets opens it. */
	.st-reviews:not(.st-reviews--scripted) .st-reviews__form:is(:target, :has(:target)) {
		display: block;
	}

	.st-reviews__form .comment-respond {
		display: grid;
		gap: var(--st-space-4);
		max-inline-size: var(--st-reviews-form-max);
		margin-inline: auto;
	}

	.st-reviews__form .comment-reply-title {
		font-size: var(--st-font-size-lg);
		font-weight: var(--st-font-weight-semibold);
		text-align: center;
	}

	.st-reviews__form .comment-form {
		display: grid;
		gap: var(--st-space-4);
		margin: 0;
	}

	.st-reviews__actions {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--st-space-3);
		margin: 0;
	}

	/* WordPress's fields: each label above its field, the fields across the
	   form; the Theme's field recipe draws them. */
	.st-reviews__form p:not(.comment-form-cookies-consent, .form-submit) > label {
		display: block;
		margin-block-end: var(--st-space-1);
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-medium);
	}

	.st-reviews__form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
		inline-size: 100%;
	}

	.st-reviews__form :is(.comment-notes, .must-log-in, .comment-form-cookies-consent) {
		margin: 0;
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
	}

	/* WordPress's cookies consent keeps its box beside the label, the text
	   wrapping beside it rather than under it. */
	.st-reviews__form .comment-form-cookies-consent {
		display: flex;
		align-items: flex-start;
		gap: var(--st-space-2);
	}

	/* rating — five radios drawn as stars; the colours cross from the state
	   rules to the glyphs through one property, which forced colours re-points */
	.st-review-rating {
		--st-review-star-off: var(--st-border);
		--st-review-star-on: var(--st-rating);

		display: grid;
		justify-items: center;
		gap: var(--st-space-2);
		min-inline-size: 0;
		margin: 0;
		padding: 0;
		border: 0;
		text-align: center;
	}

	/* Floated, the legend leaves the fieldset border and lays out as a grid
	   item like the stars below it. */
	.st-review-rating__legend {
		float: inline-start;
		padding: 0;
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-medium);
	}

	.st-review-rating__stars {
		position: relative;
		display: inline-flex;
	}

	/* The radios stay focusable for the arrow keys; the labels draw them. */
	.st-review-rating__input {
		position: absolute;
		inline-size: 1px;
		block-size: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	/* The labels touch, so a pointer moving along the row never crosses a gap. */
	.st-review-rating .st-review-rating__star {
		--st-review-star: var(--st-review-star-off);

		display: inline-flex;
		margin: 0;
		padding: var(--st-space-1);
		border-radius: var(--st-radius-button);
		cursor: pointer;
	}

	.st-review-rating__icon {
		color: var(--st-review-star);
	}

	/* Every star up to the chosen one fills. */
	.st-review-rating__star:has(~ .st-review-rating__input:checked),
	.st-review-rating__input:checked + .st-review-rating__star {
		--st-review-star: var(--st-review-star-on);
	}

	/* A pointer previews its choice; these follow the checked rules so they win. */
	@media (hover: hover) {
		.st-review-rating__stars:hover .st-review-rating__star {
			--st-review-star: var(--st-review-star-off);
		}

		.st-review-rating__stars .st-review-rating__star:hover,
		.st-review-rating__stars .st-review-rating__star:has(~ .st-review-rating__star:hover) {
			--st-review-star: var(--st-review-star-on);
		}
	}

	.st-review-rating__input:focus-visible + .st-review-rating__star {
		outline: var(--st-focus-ring-width) solid var(--st-focus-ring);
		outline-offset: var(--st-focus-ring-offset);
	}

	/* list — WooCommerce's review markup; its wrappers dissolve into one grid:
	   stars and date, then the initials beside the author with any verified
	   label under it, then the text. Rows are spaced by margins, so the author
	   and its label stay together, and whatever another plugin prints through
	   the review hooks spans the width below the text. */

	.st-reviews__list .commentlist {
		display: grid;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.st-reviews__list .commentlist > li {
		padding-block: var(--st-space-6);
		border-block-end: 1px solid var(--st-border-subtle);
	}

	.st-reviews__list .commentlist > li:first-child {
		padding-block-start: 0;
	}

	.st-reviews__list .commentlist > li:last-child {
		padding-block-end: 0;
		border-block-end: 0;
	}

	.st-reviews__list .comment_container {
		display: grid;
		grid-template-areas:
			"rating rating date"
			"avatar author author"
			"avatar verified verified"
			"text text text";
		grid-template-columns: var(--st-reviews-avatar-size) minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--st-space-3);
	}

	.st-reviews__list .comment-text,
	.st-reviews__list .comment-text > .meta {
		display: contents;
	}

	.st-reviews__list .comment_container > *,
	.st-reviews__list .comment-text > * {
		grid-column: 1 / -1;
		margin-block: var(--st-space-3) 0;
	}

	.st-reviews__list .comment-text > .st-rating {
		--st-reviews-star-size: var(--st-reviews-small-star-size);

		grid-area: rating;
		margin: 0 0 var(--st-space-3);
	}

	.st-reviews__list .st-review-avatar {
		grid-area: avatar;
		margin: 0;
	}

	.st-reviews__list .woocommerce-review__author {
		grid-area: author;
		align-self: end;
		font-weight: var(--st-font-weight-semibold);
	}

	/* Without a verified label the author centres beside the initials. */
	.st-reviews__list .comment_container:not(:has(.woocommerce-review__verified)) .woocommerce-review__author {
		grid-row: 2 / 4;
		align-self: center;
	}

	.st-reviews__list .woocommerce-review__verified {
		grid-area: verified;
		align-self: start;
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
		font-style: normal;
	}

	.st-reviews__list .woocommerce-review__dash {
		display: none;
	}

	.st-reviews__list .woocommerce-review__published-date {
		grid-area: date;
		margin-block-end: var(--st-space-3);
		color: var(--st-fg-muted);
		font-size: var(--st-font-size-sm);
		white-space: nowrap;
	}

	/* A review awaiting approval has no author line; the note takes its place. */
	.st-reviews__list .woocommerce-review__awaiting-approval {
		grid-row: 2 / 4;
		grid-column: 2 / -1;
		color: var(--st-fg-muted);
		font-style: normal;
	}

	.st-reviews__list .description {
		grid-area: text;
	}

	.st-reviews__list .description > p {
		margin-block: 0 var(--st-space-2);
	}

	.st-reviews__list .description > p:last-child {
		margin-block-end: 0;
	}

	.st-review-avatar {
		display: grid;
		place-items: center;
		inline-size: var(--st-reviews-avatar-size);
		block-size: var(--st-reviews-avatar-size);
		border-radius: var(--st-radius-avatar);
		background: var(--st-accent-bg);
		color: var(--st-accent-fg);
		font-size: var(--st-font-size-sm);
		font-weight: var(--st-font-weight-semibold);
	}

	.st-reviews__list .woocommerce-pagination {
		margin-block-start: var(--st-space-4);
	}

	@media (forced-colors: active) {
		.st-reviews__bar {
			outline: 1px solid CanvasText;
		}

		.st-reviews__bar::before {
			forced-color-adjust: none;
			background: Highlight;
		}

		.st-review-rating {
			--st-review-star-off: CanvasText;
			--st-review-star-on: Highlight;
		}

		.st-review-rating__icon {
			forced-color-adjust: none;
		}

		.st-review-avatar {
			border: 1px solid CanvasText;
		}
	}
}

/* badges:start: generated from assets/badges/product-badges.css; run npm run build. */

/* Product badges: one look for every surface that prints the stack (cards,
   card templates and the product page). The build adds this file to
   catalog-cards.css and copies it into single-product.css between the badges
   markers; edit it here and run npm run build. Size, letter case and colours
   read the Badges settings' tokens first and keep today's look without them. */
@layer components {
	.st-product-badges {
		display: flex;
		flex-flow: var(--st-badge-direction, column) wrap;
		align-items: flex-start;
		gap: var(--st-space-2);
		pointer-events: none;
	}

	.st-product-badges--end {
		align-items: flex-end;
	}

	.st-product-badge {
		display: inline-flex;
		align-items: center;
		gap: var(--st-space-1);
		max-inline-size: 100%;
		padding-block: var(--st-badge-pad-block, var(--st-space-1));
		padding-inline: var(--st-badge-pad-inline, var(--st-space-3));
		border-radius: var(--st-badge-radius, var(--st-radius-badge));
		box-shadow: inset 0 0 0 1px var(--st-badge-border-color, transparent);
		font-size: var(--st-badge-font-size, var(--st-font-size-xs));
		font-weight: var(--st-badge-font-weight, var(--st-font-weight-semibold));
		letter-spacing: var(--st-badge-tracking, normal);
		line-height: 1;
		text-transform: var(--st-badge-case, none);
	}

	.st-product-badge .st-icon {
		flex: none;
		inline-size: 1em;
		block-size: 1em;
	}

	.st-product-badge__label {
		overflow: hidden;
		min-inline-size: 0;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* The Sale pair resolves here, on the badge, as the Theme's primary button
	   resolves its own: a surface that re-declares the accent recolours both. */
	.st-product-badge--sale {
		--st-badge-border-color: var(--st-badge-sale-border, transparent);

		background: var(--st-badge-sale-bg, var(--st-button-role-primary-bg, var(--st-accent-solid)));
		color: var(--st-badge-sale-fg, var(--st-button-role-primary-fg, var(--st-accent-on)));
	}

	/* "New" is the primary-container pair, a step below the Sale badge. */
	.st-product-badge--new {
		--st-badge-border-color: var(--st-badge-new-border, transparent);

		background: var(--st-badge-new-bg, var(--st-accent-bg));
		color: var(--st-badge-new-fg, var(--st-accent-fg));
	}

	.st-product-badge--out-of-stock {
		--st-badge-border-color: var(--st-badge-oos-border, transparent);

		background: var(--st-badge-oos-bg, var(--st-error-tint));
		color: var(--st-badge-oos-fg, var(--st-error-fg));
	}

	/* A custom badge (Products → Badges) paints its term's colours, which its
	   `--b{id}` rule declares, and the Theme's inverse pair without them. */
	.st-product-badge--custom {
		--st-badge-border-color: var(--st-badge-border, transparent);

		background: var(--st-badge-bg, var(--st-surface-inverse));
		color: var(--st-badge-fg, var(--st-on-surface-inverse));
	}

	/* Forced colours drop backgrounds and box shadows; a real border keeps the chip. */
	@media (forced-colors: active) {
		.st-product-badge {
			border: 1px solid CanvasText;
		}
	}
}

/* badges:end */