/*
 * WooCommerce single product, cart, checkout, pay-for-order, thank-you and My Account (THM5b).
 * Only --occ-* tokens. WooCommerce's classic CSS (and select2.css) sit in the `reset` layer (inc/assets.php,
 * inc/product.php), so these rules win without !important; floats/widths WC still sets are reset explicitly.
 * Breakpoints: 48rem = two columns, 64rem = asymmetric 7/5 (4/8 on My Account).
 * Loop cards (related / up-sells / cross-sells) are styled by shop.css.
 */

@layer occ.components {
	/* Shared: buttons ------------------------------------------------------- */
	/* WC templates hard-code `.button`; mirror DS .occ-button (secondary) and .occ-button--primary for `.alt`. */
	.woocommerce :is(a.button, button.button, input.button, .button),
	.woocommerce-page :is(a.button, button.button, input.button) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--occ-space-2);
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-6);
		border: var(--occ-border-width) solid var(--occ-border-premium);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		background: transparent;
		font: var(--occ-fw-semibold) var(--occ-text-sm) / var(--occ-leading-ui) var(--occ-font-sans);
		letter-spacing: 0.04em;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition:
			background var(--occ-duration-base) var(--occ-ease-standard),
			border-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.woocommerce :is(a.button, button.button, input.button, .button):hover {
		color: var(--occ-fg);
		background: var(--occ-bg-elevated);
		border-color: var(--occ-accent-strong);
	}

	.woocommerce :is(.button.alt, .checkout-button, #place_order, .single_add_to_cart_button),
	.woocommerce :is(.button.alt, .checkout-button, #place_order, .single_add_to_cart_button):hover {
		border-color: transparent;
		color: var(--occ-fg);
		background: var(--occ-metallic-gradient);
	}

	.woocommerce :is(.button.alt, .checkout-button, #place_order, .single_add_to_cart_button):hover {
		filter: brightness(1.035);
	}

	.woocommerce :is(.button, button.button):is(:disabled, .disabled, [aria-disabled="true"]) {
		cursor: not-allowed;
		opacity: 0.55;
		filter: none;
	}

	.woocommerce .button.loading {
		opacity: 0.7;
	}

	/* Shared: form fields (mirror .occ-field / .occ-field__control, components.css) --------------------- */
	.woocommerce form .form-row {
		display: grid;
		gap: var(--occ-space-2);
		margin: 0 0 var(--occ-space-4);
		padding: 0;
	}

	.woocommerce form :is(.form-row-first, .form-row-last, .form-row-wide) {
		float: none;
		width: auto;
	}

	.woocommerce form .form-row label,
	.woocommerce-page form .form-row label {
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
		color: var(--occ-fg);
	}

	.woocommerce form .form-row .required {
		color: var(--occ-accent-ink);
		text-decoration: none;
	}

	.woocommerce form .form-row .optional {
		font-weight: var(--occ-fw-regular);
		color: var(--occ-fg-muted);
	}

	/* Border uses --occ-fg-muted: --occ-border is ≈1.58:1, too faint for an input boundary (SPEC §C). */
	.woocommerce :is(form .form-row .input-text, form .form-row select, form .form-row textarea, .quantity .qty, #coupon_code, .coupon .input-text),
	.woocommerce .select2-container .select2-selection--single {
		width: 100%;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-3);
		border: var(--occ-border-width) solid var(--occ-fg-muted);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		background: var(--occ-surface);
		font: var(--occ-fw-regular) var(--occ-text-md) / var(--occ-leading-ui) var(--occ-font-sans);
		box-shadow: none;
		transition:
			border-color var(--occ-duration-base) var(--occ-ease-standard),
			box-shadow var(--occ-duration-base) var(--occ-ease-standard);
	}

	.woocommerce form .form-row textarea {
		min-height: var(--occ-space-32);
		line-height: var(--occ-leading-body);
		resize: vertical;
	}

	.woocommerce :is(form .form-row .input-text, form .form-row select, form .form-row textarea, .quantity .qty):hover {
		border-color: var(--occ-fg);
	}

	.woocommerce :is(form .form-row .input-text, form .form-row select, form .form-row textarea, .quantity .qty, #coupon_code):focus-visible,
	.woocommerce .select2-container--focus .select2-selection--single,
	.woocommerce .select2-container--open .select2-selection--single {
		border-color: var(--occ-accent-ink);
		box-shadow: var(--occ-shadow-focus);
		outline: 2px solid var(--occ-focus-color);
		outline-offset: var(--occ-focus-offset);
	}

	.woocommerce form .form-row.woocommerce-invalid :is(.input-text, select, .select2-selection) {
		border-color: var(--occ-danger);
	}

	.woocommerce form .form-row.woocommerce-invalid label {
		color: var(--occ-danger);
	}

	.woocommerce form .form-row.woocommerce-validated :is(.input-text, select, .select2-selection) {
		border-color: var(--occ-fg-muted);
	}

	.woocommerce :is(.checkout-inline-error-message, .woocommerce-password-hint, .form-row .description) {
		margin: 0;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-ui);
	}

	.woocommerce .checkout-inline-error-message {
		color: var(--occ-danger);
	}

	.woocommerce form .form-row :is(input[type="checkbox"], input[type="radio"]),
	.woocommerce :is(.woocommerce-form__input-checkbox, .shipping_method, .input-radio) {
		width: var(--occ-space-6);
		height: var(--occ-space-6);
		margin: 0 var(--occ-space-2) 0 0;
		vertical-align: middle;
		accent-color: var(--occ-accent-ink);
	}

	.woocommerce :is(.woocommerce-form__label-for-checkbox, .woocommerce-form-login__rememberme) {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		font-weight: var(--occ-fw-regular);
		cursor: pointer;
	}

	/* select2 (country / state) */
	.woocommerce .select2-container .select2-selection--single {
		height: auto;
		display: flex;
		align-items: center;
	}

	.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
		padding: 0;
		color: var(--occ-fg);
		line-height: var(--occ-leading-ui);
	}

	.woocommerce .select2-container .select2-selection--single .select2-selection__arrow {
		height: 100%;
		right: var(--occ-space-2);
	}

	.select2-dropdown {
		border-color: var(--occ-fg-muted);
		background: var(--occ-surface);
		color: var(--occ-fg);
	}

	.select2-results__option {
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-3);
	}

	.select2-container--default .select2-results__option--highlighted[aria-selected],
	.select2-container--default .select2-results__option--highlighted[data-selected] {
		color: var(--occ-fg);
		background: var(--occ-surface-muted);
	}

	.select2-container--default .select2-search--dropdown .select2-search__field {
		min-height: var(--occ-touch-min);
		border-color: var(--occ-fg-muted);
		border-radius: var(--occ-radius-sm);
	}

	/* Shared: notices ------------------------------------------------------ */
	.woocommerce-notices-wrapper:empty {
		display: none;
	}

	:is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, p.no-comments) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-3) var(--occ-space-4);
		margin: 0 0 var(--occ-space-6);
		padding: var(--occ-space-4) var(--occ-space-6);
		border: var(--occ-border-width) solid var(--occ-border);
		border-inline-start: var(--occ-space-1) solid var(--occ-info);
		border-radius: var(--occ-radius-lg);
		color: var(--occ-fg);
		background: var(--occ-surface);
		font-size: var(--occ-text-md);
		line-height: var(--occ-leading-ui);
		list-style: none;
	}

	:is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
		content: none;
	}

	:is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
		content: none;
	}

	.woocommerce-message {
		border-inline-start-color: var(--occ-success);
	}

	.woocommerce-error {
		flex-direction: column;
		align-items: flex-start;
		border-inline-start-color: var(--occ-danger);
	}

	.woocommerce-error li {
		margin: 0;
	}

	:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) .button {
		order: 2;
		margin-inline-start: auto;
		float: none;
	}

	:is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
		color: var(--occ-fg);
		text-underline-offset: 0.2em;
	}

	/* Shared: tables (cart, order review, orders, order details) ----------- */
	.woocommerce table.shop_table {
		width: 100%;
		margin: 0 0 var(--occ-space-8);
		border: 0;
		border-collapse: collapse;
		border-radius: 0;
		font-size: var(--occ-text-md);
		line-height: var(--occ-leading-ui);
	}

	.woocommerce table.shop_table :is(th, td) {
		padding: var(--occ-space-4) var(--occ-space-3);
		border: 0;
		border-bottom: var(--occ-border-width) solid var(--occ-border);
		text-align: start;
		vertical-align: middle;
	}

	.woocommerce table.shop_table thead th {
		padding-block: var(--occ-space-3);
		border-bottom-color: var(--occ-border-strong);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
	}

	.woocommerce table.shop_table :is(tfoot th, tfoot td) {
		font-weight: var(--occ-fw-regular);
	}

	.woocommerce table.shop_table :is(tr.order-total, tr.order-total th) {
		font-weight: var(--occ-fw-bold);
		font-size: var(--occ-text-lg);
	}

	.woocommerce table.shop_table a:not(.button) {
		color: var(--occ-fg);
		text-underline-offset: 0.2em;
	}

	.woocommerce table.shop_table .product-thumbnail img {
		width: var(--occ-space-16);
		aspect-ratio: 63 / 88;
		height: auto;
		object-fit: contain;
		border-radius: var(--occ-radius-sm);
		background: var(--occ-surface-muted);
	}

	.woocommerce :is(.wc-item-meta, .variation) {
		margin: var(--occ-space-2) 0 0;
		padding: 0;
		list-style: none;
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.woocommerce :is(.wc-item-meta, .variation) :is(li, dt, dd, p) {
		display: inline;
		margin: 0;
		float: none;
	}

	.woocommerce .wc-item-meta li {
		display: block;
	}

	/* Stacked table rows (WC's small-screen sheet): label from data-title, 44px rows. */
	@media (max-width: 47.99rem) {
		.woocommerce table.shop_table_responsive tr td {
			display: flex;
			justify-content: space-between;
			gap: var(--occ-space-4);
			padding: var(--occ-space-2) 0;
			border-bottom: 0;
			background: none;
			text-align: end;
		}

		.woocommerce table.shop_table_responsive tr {
			display: block;
			padding-block: var(--occ-space-3);
			border-bottom: var(--occ-border-width) solid var(--occ-border);
		}

		.woocommerce table.shop_table_responsive tr td::before {
			float: none;
			color: var(--occ-fg-muted);
			font-weight: var(--occ-fw-semibold);
			text-align: start;
		}

		/* Cart rows: thumbnail left, remove top right, label/value lines beside the thumbnail. */
		.woocommerce table.cart tr.cart_item {
			display: grid;
			grid-template-columns: var(--occ-space-16) minmax(0, 1fr) auto;
			column-gap: var(--occ-space-4);
			align-items: start;
		}

		.woocommerce table.cart tr.cart_item td {
			grid-column: 2 / -1;
		}

		.woocommerce table.cart tr.cart_item td.product-thumbnail {
			display: block;
			grid-column: 1;
			grid-row: 1 / span 4;
		}

		.woocommerce table.cart tr.cart_item td.product-name {
			grid-column: 2;
			grid-row: 1;
			text-align: start;
		}

		.woocommerce table.cart tr.cart_item td.product-remove {
			grid-column: 3;
			grid-row: 1;
			padding: 0;
		}

		.woocommerce table.cart tr.cart_item :is(td.product-thumbnail, td.product-remove, td.product-name)::before,
		.woocommerce table.cart td.actions::before {
			content: none;
		}

		.woocommerce table.cart tr:has(td.actions) {
			border-bottom: 0;
		}

		.woocommerce table.cart td.actions {
			display: block;
			text-align: start;
		}

		.woocommerce table.cart td.actions > .button {
			width: 100%;
		}
	}

	/* Panels (cart totals, order review, payment, account content) ------- */
	.woocommerce :is(.cart_totals, #order_review, .woocommerce-order-details, .woocommerce-customer-details .woocommerce-column, .woocommerce-Address, .woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword, .woocommerce-EditAccountForm fieldset) {
		padding: var(--occ-space-6);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-surface);
	}

	.woocommerce :is(.cart_totals, #order_review, .woocommerce-order-details) table.shop_table {
		margin-bottom: var(--occ-space-6);
	}

	.woocommerce :is(.cart_totals h2, #order_review_heading, .woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-Address-title h2, .woocommerce-account .woocommerce h2, .woocommerce-checkout h3, .cross-sells > h2, .woocommerce-customer-details h2) {
		margin: 0 0 var(--occ-space-4);
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
		letter-spacing: var(--occ-tracking-tight);
	}

	/* Single product -------------------------------------------------------- */
	.occ-shop div.product {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--occ-space-8);
		align-items: start;
	}

	.occ-shop div.product > * {
		grid-column: 1 / -1;
	}

	.occ-shop div.product :is(div.images, div.summary) {
		float: none;
		width: auto;
		margin: 0;
	}

	.occ-shop div.product span.onsale {
		position: absolute;
		inset: var(--occ-space-4) auto auto var(--occ-space-4);
		z-index: var(--occ-z-raised);
		min-width: 0;
		min-height: 0;
		margin: 0;
		padding: var(--occ-space-1) var(--occ-space-3);
		border-radius: var(--occ-radius-round);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
		font-size: var(--occ-text-xs);
		font-weight: var(--occ-fw-semibold);
		letter-spacing: var(--occ-tracking-caps);
		line-height: var(--occ-leading-ui);
		text-transform: uppercase;
	}

	.occ-shop div.product {
		position: relative;
	}

	/* Gallery: card never cropped (contain), media radius 24px, sand stage. */
	.occ-shop .woocommerce-product-gallery {
		position: relative;
		display: grid;
		gap: var(--occ-space-3);
	}

	.occ-shop .woocommerce-product-gallery :is(.flex-viewport, .woocommerce-product-gallery__wrapper) {
		border-radius: var(--occ-radius-xl);
		background: var(--occ-surface-muted);
	}

	.occ-shop .woocommerce-product-gallery__wrapper {
		margin: 0;
	}

	.occ-shop .woocommerce-product-gallery__image {
		padding: var(--occ-space-6);
	}

	.occ-shop .woocommerce-product-gallery__image img,
	.occ-shop .woocommerce-product-gallery__image--placeholder img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 80svh;
		object-fit: contain;
	}

	.occ-shop .woocommerce-product-gallery__image--placeholder {
		padding: var(--occ-space-6);
		border-radius: var(--occ-radius-xl);
		background: var(--occ-surface-muted);
	}

	/* Without the slider (1 image), extra images stack as a thumb strip below the first. */
	.occ-shop .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--occ-space-3);
		background: none;
	}

	.occ-shop .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__image {
		padding: var(--occ-space-2);
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface-muted);
	}

	.occ-shop .woocommerce-product-gallery:not(:has(.flex-viewport)) .woocommerce-product-gallery__wrapper > :first-child {
		grid-column: 1 / -1;
		padding: var(--occ-space-6);
		border-radius: var(--occ-radius-xl);
	}

	/* Thumbnails: a scrollable strip on mobile, a row of equal cells from 48rem. */
	.occ-shop .woocommerce-product-gallery .flex-control-thumbs {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - 3 * var(--occ-space-3)) / 4);
		gap: var(--occ-space-3);
		margin: 0;
		padding: 0;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		list-style: none;
	}

	.occ-shop .woocommerce-product-gallery .flex-control-thumbs li {
		float: none;
		width: auto;
		margin: 0;
		scroll-snap-align: start;
	}

	.occ-shop .woocommerce-product-gallery .flex-control-thumbs img {
		display: block;
		width: 100%;
		aspect-ratio: 63 / 88;
		padding: var(--occ-space-1);
		object-fit: contain;
		border: var(--occ-border-width-strong) solid transparent;
		border-radius: var(--occ-radius-md);
		background: var(--occ-surface-muted);
		opacity: 1;
		cursor: pointer;
		transition: border-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.occ-shop .woocommerce-product-gallery .flex-control-thumbs img:hover {
		border-color: var(--occ-border-premium);
	}

	.occ-shop .woocommerce-product-gallery .flex-control-thumbs img.flex-active {
		border-color: var(--occ-accent-ink);
	}

	/* Lightbox trigger: 44px icon control, top right of the stage. */
	.occ-shop .woocommerce-product-gallery__trigger {
		position: absolute;
		inset: var(--occ-space-3) var(--occ-space-3) auto auto;
		z-index: var(--occ-z-raised);
		display: grid;
		place-items: center;
		width: var(--occ-touch-min);
		height: var(--occ-touch-min);
		border: var(--occ-border-width) solid var(--occ-border);
		border-radius: var(--occ-radius-md);
		background: var(--occ-bg-elevated);
		text-decoration: none;
		text-indent: 0;
		font-size: var(--occ-text-md);
	}

	/* WC's emoji glyph is not in every font: hide it and draw a magnifier (circle + handle) in currentColor. */
	.occ-shop .woocommerce-product-gallery__trigger > span {
		display: none;
	}

	.occ-shop .woocommerce-product-gallery__trigger {
		color: var(--occ-fg);
	}

	.occ-shop .woocommerce-product-gallery__trigger::before {
		content: "";
		position: absolute;
		inset: auto;
		width: var(--occ-space-3);
		height: var(--occ-space-3);
		margin: 0 var(--occ-space-1) var(--occ-space-1) 0;
		border: 2px solid currentColor;
		border-radius: var(--occ-radius-round);
		background: none;
	}

	.occ-shop .woocommerce-product-gallery__trigger::after {
		content: "";
		position: absolute;
		inset: auto;
		width: 2px;
		height: var(--occ-space-2);
		margin: var(--occ-space-3) 0 0 var(--occ-space-3);
		border: 0;
		border-radius: var(--occ-radius-round);
		background: currentColor;
		transform: rotate(-45deg);
	}

	.occ-shop .woocommerce-product-gallery__trigger:hover {
		border-color: var(--occ-accent-strong);
	}

	/* Summary */
	.occ-shop div.product .summary {
		display: flex;
		flex-direction: column;
		gap: var(--occ-space-4);
	}

	.occ-shop div.product .summary > * {
		margin: 0;
	}

	.occ-product-summary__top {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--occ-space-3);
	}

	.occ-product-summary__top .occ-badge--neutral {
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
	}

	.occ-product-summary__eyebrow {
		margin: 0;
		color: var(--occ-fg-muted);
	}

	.occ-shop div.product .product_title {
		font-family: var(--occ-font-display);
		font-size: clamp(var(--occ-text-3xl), 4vw, var(--occ-text-5xl));
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
		letter-spacing: var(--occ-tracking-tight);
		text-wrap: balance;
		overflow-wrap: anywhere;
	}

	.occ-shop div.product .summary .price {
		color: var(--occ-fg);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-bold);
		line-height: var(--occ-leading-ui);
	}

	.occ-shop div.product .summary .price del {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-lg);
		font-weight: var(--occ-fw-regular);
	}

	.occ-shop div.product .summary .price ins {
		text-decoration: none;
	}

	.occ-shop div.product .woocommerce-product-details__short-description {
		max-width: 68ch;
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	.occ-shop div.product .woocommerce-product-details__short-description > :first-child {
		margin-top: 0;
	}

	.occ-shop div.product .woocommerce-product-details__short-description > :last-child {
		margin-bottom: 0;
	}

	.occ-shop div.product p.stock {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-2);
		margin: 0;
		color: var(--occ-success);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-semibold);
	}

	.occ-shop div.product p.stock::before {
		content: "";
		width: var(--occ-space-2);
		height: var(--occ-space-2);
		border-radius: var(--occ-radius-round);
		background: currentColor;
	}

	.occ-shop div.product p.stock.out-of-stock {
		color: var(--occ-danger);
	}

	.occ-shop div.product p.stock.available-on-backorder {
		color: var(--occ-fg-muted);
	}

	.occ-shop div.product form.cart {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-3);
		margin: 0;
	}

	.occ-shop div.product form.cart::before,
	.occ-shop div.product form.cart::after {
		content: none;
	}

	.occ-shop div.product form.cart .quantity {
		float: none;
		margin: 0;
	}

	/* Sold individually (slabs): WC prints a hidden qty inside an empty wrapper. */
	.occ-shop div.product form.cart .quantity:has(input[type="hidden"]) {
		display: none;
	}

	.occ-shop div.product form.cart .quantity .qty {
		width: calc(var(--occ-touch-min) * 2);
		text-align: center;
	}

	.occ-shop div.product form.cart .single_add_to_cart_button {
		flex: 1 1 12rem;
		float: none;
		min-height: var(--occ-control-lg);
	}

	/* Spec list: label / value rows, fine rules. */
	.occ-product-specs {
		padding-top: var(--occ-space-4);
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-product-specs__title {
		margin: 0 0 var(--occ-space-2);
		color: var(--occ-fg-muted);
		font-family: var(--occ-font-sans);
	}

	.occ-product-specs__list {
		margin: 0;
	}

	.occ-product-specs__row {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--occ-space-4);
		padding-block: var(--occ-space-3);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
		font-size: var(--occ-text-md);
		line-height: var(--occ-leading-ui);
	}

	.occ-product-specs__row dt {
		color: var(--occ-fg-muted);
	}

	.occ-product-specs__row dd {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 var(--occ-space-3);
		margin: 0;
		color: var(--occ-fg);
		font-weight: var(--occ-fw-semibold);
		overflow-wrap: anywhere;
	}

	.occ-product-specs__verify {
		display: inline-flex;
		align-items: center;
		gap: var(--occ-space-1);
		min-height: var(--occ-touch-min);
		color: var(--occ-accent-ink);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-regular);
		text-underline-offset: 0.2em;
	}

	.occ-product-specs__verify:hover {
		color: var(--occ-fg);
	}

	.occ-product-specs__verify .occ-icon {
		width: 1em;
		height: 1em;
	}

	/* Requester CTA (out of stock) */
	.occ-product-requester {
		display: grid;
		gap: var(--occ-space-3);
		justify-items: start;
		padding: var(--occ-space-6);
		border: var(--occ-border-width) solid var(--occ-border-premium);
		border-radius: var(--occ-radius-lg);
		background: var(--occ-bg-elevated);
	}

	.occ-product-requester > * {
		margin: 0;
	}

	.occ-product-requester__eyebrow {
		color: var(--occ-accent-ink);
	}

	.occ-product-requester__title {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
		letter-spacing: var(--occ-tracking-tight);
	}

	.occ-product-requester__text {
		max-width: 52ch;
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	/* Description + related / up-sells */
	.occ-product-sections {
		padding-top: var(--occ-space-12);
		border-top: var(--occ-border-width) solid var(--occ-border);
	}

	.occ-product-section {
		max-width: 68ch;
		color: var(--occ-fg-muted);
		line-height: var(--occ-leading-body);
	}

	.occ-product-section + .occ-product-section {
		margin-top: var(--occ-space-12);
	}

	.occ-product-section > h2,
	.occ-shop div.product :is(.related, .up-sells) > h2 {
		margin: 0 0 var(--occ-space-6);
		color: var(--occ-fg);
		font-family: var(--occ-font-display);
		font-size: clamp(var(--occ-text-2xl), 3vw, var(--occ-text-4xl));
		font-weight: var(--occ-fw-regular);
		line-height: var(--occ-leading-heading);
		letter-spacing: var(--occ-tracking-tight);
	}

	/* WC's clearfix (`.products ul::before`) would take the first grid cell in related / up-sells / cross-sells. */
	.products .occ-shop-grid::before,
	.products .occ-shop-grid::after {
		content: none;
	}

	.occ-shop div.product :is(.related, .up-sells) {
		margin-top: var(--occ-space-16);
	}

	@media (min-width: 48rem) {
		.occ-shop div.product {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: var(--occ-grid-gap);
			row-gap: var(--occ-space-12);
		}

		.occ-shop div.product > .woocommerce-product-gallery {
			grid-column: 1 / span 6;
		}

		.occ-shop div.product > .summary {
			grid-column: 7 / -1;
			position: sticky;
			top: var(--occ-space-24);
		}

		.occ-shop .woocommerce-product-gallery .flex-control-thumbs {
			grid-auto-flow: row;
			grid-template-columns: repeat(5, minmax(0, 1fr));
			overflow: visible;
		}
	}

	@media (min-width: 64rem) {
		.occ-shop div.product > .woocommerce-product-gallery {
			grid-column: 1 / span 7;
		}

		.occ-shop div.product > .summary {
			grid-column: 9 / -1;
		}

		.occ-product-sections {
			padding-top: var(--occ-space-16);
		}
	}

	/* Cart ------------------------------------------------------------------ */
	.woocommerce-cart .woocommerce {
		display: grid;
		gap: var(--occ-space-8);
	}

	.woocommerce-cart .woocommerce > * {
		margin: 0;
	}

	.woocommerce table.cart td.product-remove a.remove {
		display: grid;
		place-items: center;
		width: var(--occ-touch-min);
		height: var(--occ-touch-min);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xl);
		font-weight: var(--occ-fw-regular);
		line-height: 1;
	}

	.woocommerce table.cart td.product-remove a.remove:hover {
		color: var(--occ-danger);
		background: var(--occ-bg-subtle);
	}

	.woocommerce table.cart .product-name a {
		font-weight: var(--occ-fw-semibold);
	}

	.woocommerce table.cart .quantity .qty {
		width: calc(var(--occ-touch-min) * 2);
		text-align: center;
	}

	.woocommerce table.cart td.actions {
		padding-top: var(--occ-space-6);
		text-align: end;
	}

	.woocommerce table.cart td.actions .coupon {
		display: flex;
		flex-wrap: wrap;
		gap: var(--occ-space-3);
		float: none;
		margin-bottom: var(--occ-space-3);
	}

	.woocommerce table.cart td.actions .coupon .input-text {
		flex: 1 1 12rem;
		width: auto;
		margin: 0;
	}

	.woocommerce table.cart td.actions > .button {
		float: none;
	}

	.woocommerce .cart-collaterals {
		display: grid;
		gap: var(--occ-space-8);
	}

	.woocommerce .cart-collaterals :is(.cart_totals, .cross-sells) {
		float: none;
		width: auto;
	}

	.woocommerce .wc-proceed-to-checkout {
		padding: 0;
	}

	.woocommerce .wc-proceed-to-checkout .checkout-button {
		width: 100%;
		min-height: var(--occ-control-lg);
		margin: 0;
		font-size: var(--occ-text-md);
	}

	.woocommerce :is(ul#shipping_method, ul.wc_payment_methods) {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.woocommerce ul#shipping_method li {
		display: flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		margin: 0;
	}

	.woocommerce :is(.woocommerce-shipping-destination, .woocommerce-shipping-calculator) {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
	}

	.woocommerce .cart-empty.woocommerce-info {
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
	}

	.woocommerce-cart .return-to-shop {
		margin: 0;
	}

	@media (min-width: 64rem) {
		.woocommerce-cart .woocommerce:has(.cart-collaterals) {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: var(--occ-grid-gap);
			align-items: start;
		}

		.woocommerce-cart .woocommerce:has(.cart-collaterals) > * {
			grid-column: 1 / -1;
		}

		.woocommerce-cart .woocommerce > .woocommerce-cart-form {
			grid-column: 1 / span 8;
		}

		.woocommerce-cart .woocommerce > .cart-collaterals {
			grid-column: 9 / -1;
			position: sticky;
			top: var(--occ-space-24);
		}
	}

	/* Checkout + pay-for-order -------------------------------------------- */
	.woocommerce-checkout .woocommerce :is(.woocommerce-form-coupon, .woocommerce-form-login) {
		margin: 0 0 var(--occ-space-6);
	}

	.woocommerce form.checkout {
		display: grid;
		gap: var(--occ-space-8);
	}

	.woocommerce form.checkout > * {
		margin: 0;
	}

	.woocommerce .col2-set {
		display: grid;
		gap: var(--occ-space-8);
		width: auto;
	}

	.woocommerce .col2-set::before,
	.woocommerce .col2-set::after {
		content: none;
	}

	.woocommerce .col2-set :is(.col-1, .col-2) {
		float: none;
		width: auto;
		max-width: none;
	}

	.woocommerce form.checkout .col2-set {
		grid-template-columns: minmax(0, 1fr);
	}

	.woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		column-gap: var(--occ-space-4);
	}

	#ship-to-different-address {
		margin: 0 0 var(--occ-space-4);
		font-family: var(--occ-font-sans);
		font-size: var(--occ-text-md);
	}

	.woocommerce #order_review .shop_table {
		margin-bottom: var(--occ-space-6);
	}

	.woocommerce #payment,
	.woocommerce-checkout #payment {
		border-radius: var(--occ-radius-lg);
		background: var(--occ-bg-subtle);
	}

	.woocommerce #payment ul.payment_methods {
		padding: var(--occ-space-4);
		border-bottom: var(--occ-border-width) solid var(--occ-border);
	}

	.woocommerce #payment ul.payment_methods::before,
	.woocommerce #payment ul.payment_methods::after {
		content: none;
	}

	.woocommerce #payment ul.payment_methods li {
		margin: 0;
		padding-block: var(--occ-space-2);
		line-height: var(--occ-leading-ui);
	}

	.woocommerce #payment ul.payment_methods li > label {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		font-weight: var(--occ-fw-semibold);
		cursor: pointer;
	}

	.woocommerce #payment div.payment_box {
		margin: var(--occ-space-2) 0 0;
		padding: var(--occ-space-4);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg-muted);
		background: var(--occ-surface);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	.woocommerce #payment div.payment_box::before {
		content: none;
	}

	.woocommerce #payment div.form-row.place-order {
		margin: 0;
		padding: var(--occ-space-4);
	}

	.woocommerce :is(.woocommerce-terms-and-conditions-wrapper, .woocommerce-privacy-policy-text) {
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-sm);
		line-height: var(--occ-leading-body);
	}

	.woocommerce #place_order {
		width: 100%;
		min-height: var(--occ-control-lg);
		float: none;
		margin-top: var(--occ-space-4);
		font-size: var(--occ-text-md);
	}

	/* Pay-for-order page (order-pay endpoint, requester start/settlement orders). */
	.woocommerce-order-pay .woocommerce form#order_review {
		display: grid;
		gap: var(--occ-space-6);
		max-width: var(--occ-container-md);
	}

	.woocommerce-order-pay .woocommerce form#order_review > * {
		margin: 0;
	}

	@media (min-width: 48rem) {
		.woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.woocommerce :is(.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-address-fields__field-wrapper) > :not(.form-row-first, .form-row-last) {
			grid-column: 1 / -1;
		}

		.woocommerce .col2-set:not(form.checkout .col2-set) {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 64rem) {
		.woocommerce form.checkout {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			column-gap: var(--occ-grid-gap);
			align-items: start;
		}

		.woocommerce form.checkout > * {
			grid-column: 1 / -1;
		}

		.woocommerce form.checkout > #customer_details {
			grid-column: 1 / span 7;
			grid-row: span 2;
		}

		.woocommerce form.checkout > #order_review_heading {
			grid-column: 8 / -1;
			align-self: start;
		}

		.woocommerce form.checkout > #order_review {
			grid-column: 8 / -1;
			position: sticky;
			top: var(--occ-space-24);
		}
	}

	/* Thank-you page -------------------------------------------------------- */
	.woocommerce ul.woocommerce-order-overview {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
		gap: var(--occ-space-4);
		margin: 0 0 var(--occ-space-8);
		padding: 0;
		list-style: none;
	}

	.woocommerce ul.woocommerce-order-overview::before,
	.woocommerce ul.woocommerce-order-overview::after {
		content: none;
	}

	.woocommerce ul.woocommerce-order-overview li {
		float: none;
		margin: 0;
		padding: 0 0 var(--occ-space-3);
		border: 0;
		border-bottom: var(--occ-border-width) solid var(--occ-border);
		color: var(--occ-fg-muted);
		font-size: var(--occ-text-xs);
		letter-spacing: var(--occ-tracking-caps);
		text-transform: uppercase;
	}

	.woocommerce ul.woocommerce-order-overview li strong {
		display: block;
		margin-top: var(--occ-space-1);
		color: var(--occ-fg);
		font-size: var(--occ-text-md);
		letter-spacing: var(--occ-tracking-normal);
		text-transform: none;
	}

	.woocommerce :is(.woocommerce-thankyou-order-received, .woocommerce-notice--success) {
		margin: 0 0 var(--occ-space-6);
		font-family: var(--occ-font-display);
		font-size: var(--occ-text-2xl);
		line-height: var(--occ-leading-heading);
	}

	.woocommerce address {
		padding: 0;
		border: 0;
		font-style: normal;
		line-height: var(--occ-leading-body);
	}

	.woocommerce .woocommerce-customer-details .woocommerce-columns {
		margin-top: var(--occ-space-8);
	}

	/* Password reveal (login, register, edit account, checkout): WC's 22px eye -> 44px target over the field's end. */
	.woocommerce .password-input {
		position: relative;
		display: block;
	}

	.woocommerce .show-password-input {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		display: grid;
		place-items: center;
		width: var(--occ-control-md);
		min-height: var(--occ-control-md);
		padding: 0;
		border: 0;
		border-radius: var(--occ-radius-md);
		background: transparent;
		color: var(--occ-fg-muted);
		cursor: pointer;
	}

	.woocommerce .show-password-input:hover {
		color: var(--occ-fg);
	}

	/* My Account ------------------------------------------------------------- */
	.woocommerce-account .woocommerce {
		display: grid;
		gap: var(--occ-space-8);
	}

	.woocommerce-account .woocommerce::before,
	.woocommerce-account .woocommerce::after {
		content: none;
	}

	.woocommerce-account .woocommerce > * {
		margin: 0;
		min-width: 0;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content {
		float: none;
		width: auto;
	}

	/* Mobile: the account menu is a scrollable row of tabs above the content, not a stacked list. */
	.woocommerce-MyAccount-navigation ul {
		display: flex;
		gap: var(--occ-space-2);
		margin: 0;
		padding: 0 0 var(--occ-space-2);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		list-style: none;
		scrollbar-width: thin;
	}

	.woocommerce-MyAccount-navigation li {
		flex: none;
		margin: 0;
		scroll-snap-align: start;
	}

	.woocommerce-MyAccount-navigation a {
		display: flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		padding: var(--occ-space-2) var(--occ-space-4);
		border: var(--occ-border-width) solid var(--occ-border-strong);
		border-radius: var(--occ-radius-md);
		color: var(--occ-fg);
		font-size: var(--occ-text-sm);
		font-weight: var(--occ-fw-semibold);
		text-decoration: none;
		white-space: nowrap;
		transition:
			background var(--occ-duration-base) var(--occ-ease-standard),
			border-color var(--occ-duration-base) var(--occ-ease-standard);
	}

	.woocommerce-MyAccount-navigation a:hover {
		border-color: var(--occ-accent-strong);
		background: var(--occ-bg-elevated);
	}

	.woocommerce-MyAccount-navigation a[aria-current="page"] {
		border-color: var(--occ-surface-inverse);
		color: var(--occ-fg-inverse);
		background: var(--occ-surface-inverse);
	}

	.woocommerce-MyAccount-content {
		line-height: var(--occ-leading-body);
	}

	.woocommerce-MyAccount-content > p:first-child {
		margin-top: 0;
	}

	.woocommerce-MyAccount-content a:not(.button, .occ-button) {
		color: var(--occ-fg);
		text-underline-offset: 0.2em;
	}

	.woocommerce-MyAccount-content mark {
		color: var(--occ-fg);
		background: var(--occ-surface-muted);
		font-weight: var(--occ-fw-semibold);
	}

	.woocommerce :is(.woocommerce-orders-table__cell-order-actions, .order-actions) .button {
		margin: var(--occ-space-1);
		min-height: var(--occ-touch-min);
		padding-inline: var(--occ-space-4);
	}

	.woocommerce .woocommerce-Addresses .woocommerce-Address-title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--occ-space-2);
	}

	.woocommerce .woocommerce-Address-title :is(h2, h3) {
		float: none;
	}

	.woocommerce .woocommerce-Address-title .edit {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		float: none;
	}

	.woocommerce-EditAccountForm fieldset {
		margin: var(--occ-space-6) 0;
	}

	.woocommerce-EditAccountForm legend {
		padding-inline: var(--occ-space-2);
		font-weight: var(--occ-fw-bold);
	}

	.woocommerce :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
		max-width: var(--occ-container-sm);
		margin: 0;
	}

	/* The form's one decisive action is primary (DS: one primary per decision area). */
	.woocommerce :is(.woocommerce-form-login__submit, .woocommerce-form-register__submit, .woocommerce-ResetPassword .button) {
		float: none;
		border-color: transparent;
		background: var(--occ-metallic-gradient);
	}

	.woocommerce :is(.lost_password, .woocommerce-LostPassword) a {
		display: inline-flex;
		align-items: center;
		min-height: var(--occ-touch-min);
		color: var(--occ-fg);
		text-underline-offset: 0.2em;
	}

	@media (min-width: 64rem) {
		.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) {
			grid-template-columns: repeat(12, minmax(0, 1fr));
			gap: var(--occ-grid-gap);
			align-items: start;
		}

		.woocommerce-account .woocommerce:has(> .woocommerce-MyAccount-navigation) > * {
			grid-column: 1 / -1;
		}

		.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation {
			grid-column: 1 / span 3;
			position: sticky;
			top: var(--occ-space-24);
		}

		.woocommerce-account .woocommerce > .woocommerce-MyAccount-content {
			grid-column: 5 / -1;
		}

		/* Desktop: a vertical list with a fine rule, active item marked by a bronze bar. */
		.woocommerce-MyAccount-navigation ul {
			flex-direction: column;
			gap: 0;
			padding: 0;
			overflow: visible;
			border-top: var(--occ-border-width) solid var(--occ-border);
		}

		.woocommerce-MyAccount-navigation a {
			padding-inline: var(--occ-space-4) 0;
			border: 0;
			border-bottom: var(--occ-border-width) solid var(--occ-border);
			border-inline-start: var(--occ-space-1) solid transparent;
			border-radius: 0;
			font-weight: var(--occ-fw-regular);
		}

		.woocommerce-MyAccount-navigation a:hover {
			border-color: var(--occ-border);
			border-inline-start-color: var(--occ-border-premium);
		}

		.woocommerce-MyAccount-navigation a[aria-current="page"] {
			border-color: var(--occ-border);
			border-inline-start-color: var(--occ-accent-ink);
			color: var(--occ-fg);
			background: var(--occ-bg-elevated);
			font-weight: var(--occ-fw-bold);
		}
	}
}