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

	.st-product-layout__summary .product_title {
		margin: 0;
		font-size: var(--st-font-size-h2);
		line-height: 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 */

	.st-product-badges {
		position: absolute;
		inset-block-start: var(--st-space-3);
		inset-inline-start: var(--st-space-3);
		z-index: var(--st-z-raised);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--st-space-2);
		pointer-events: none;
	}

	.st-product-badge {
		display: inline-flex;
		padding-block: var(--st-space-1);
		padding-inline: var(--st-space-3);
		border-radius: var(--st-radius-badge);
		font-size: var(--st-font-size-xs);
		font-weight: var(--st-font-weight-semibold);
		line-height: 1;
	}

	.st-product-badge--sale {
		background: var(--st-accent-solid);
		color: var(--st-accent-on);
	}

	/* "New" is the primary-container pair (the accent tint with its ink), a
	   step below the sale badge's filled accent; the page ink is text, never
	   a container. */
	.st-product-badge--new {
		background: var(--st-accent-bg);
		color: var(--st-accent-fg);
	}

	/* stock indicator */

	.st-product-stock {
		display: inline-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 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);
		box-shadow: 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);
	}

	.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-font-size-h4);
		line-height: 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;
		}
	}
}