/**
 * Celsyn 360 — WooCommerce supplemental styles (Phase D).
 *
 * Loaded ONLY on shop / product / cart / checkout / account views.
 * Consumes theme.json tokens (--wp--preset--*) and theme.css tokens
 * (--celsyn-*) exclusively — no hardcoded colours or sizes.
 * Shallow single-class selectors; !important only where WooCommerce
 * ships inline styles.
 */

/* ------------------------------------------------------------------ *
 * 1. Scope + inheritance
 * ------------------------------------------------------------------ */
.woocommerce,
.wc-block-components-notice-banner,
.wc-block-cart,
.wc-block-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
	font-family: var( --wp--preset--font-family--body );
	color: var( --wp--preset--color--ink );
}

.woocommerce a:not( .wc-block-components-button ):not( .button ) {
	color: var( --wp--preset--color--accent );
}

/* ------------------------------------------------------------------ *
 * 2. Product media plate
 *    Three distinct states, styled separately so real photography is
 *    never touched by placeholder-only treatment:
 *      a) real product photography (PDP gallery, Shop card, cross-sell)
 *         — sits clean on a near-white surface, no blend, no opacity.
 *      b) WooCommerce's generic missing-image graphic — kept muted +
 *         multiplied so it reads as a deliberate empty state.
 *      c) the branded editorial "360" mark (--placeholder modifier) —
 *         keeps the warmer stone plate it launched on, unchanged.
 * ------------------------------------------------------------------ */
.celsyn-product-media {
	background-color: var( --celsyn-product-surface );
	aspect-ratio: 4 / 5;
	display: grid;
	place-items: center;
	padding: clamp( 1rem, 5%, 2.75rem );
	overflow: hidden;
}

/* a) Real product photography — clean, unfiltered, whole package visible. */
.celsyn-product-media :is(
	img,
	.wp-block-woocommerce-product-image img,
	.wc-block-components-product-image img,
	.woocommerce-product-gallery__image img
) {
	width: 100%;
	height: 100%;
	max-height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
	background: transparent;
}

/* b) WooCommerce's native missing-image placeholder ONLY — scoped to the
   placeholder asset itself so it can never dim a real photo. */
.celsyn-product-media :is( img.woocommerce-placeholder, .woocommerce-placeholder ),
.celsyn-product-media .wc-block-components-product-image img[src*="placeholder" i],
.celsyn-product-media .wp-block-woocommerce-product-image img[src*="placeholder" i] {
	opacity: 0.55;
	mix-blend-mode: multiply;
}

.celsyn-product-media .flex-viewport,
.celsyn-product-media .woocommerce-product-gallery {
	width: 100%;
}

/* c) Branded editorial "360" mark — the manual PDP placeholder
   (celsyn360/product-image-placeholder, `--placeholder` modifier) and the
   Shop-card fallback injected by celsyn_shop_card_branded_placeholder() (a
   bare .celsyn-product-media__mark child). Both keep the warmer stone plate. */
.celsyn-product-media--placeholder,
.celsyn-product-media:has( > .celsyn-product-media__mark ) {
	background-color: var( --wp--preset--color--stone );
	place-items: center;
}
.celsyn-product-media__mark {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 600;
	font-size: clamp( 3rem, 12vw, 6rem );
	letter-spacing: 0.06em;
	color: rgb( var( --celsyn-ink-rgb ) / 0.14 );
}

/* PDP gallery thumbnails */
.woocommerce-product-gallery__wrapper {
	gap: var( --wp--preset--spacing--50 );
}

/* ------------------------------------------------------------------ *
 * 3. Purchase area wrapper
 * ------------------------------------------------------------------ */
.celsyn-purchase {
	margin-block-start: var( --wp--preset--spacing--70 );
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--60 );
}

.celsyn-purchase form.cart,
.celsyn-purchase .wp-block-woocommerce-add-to-cart-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var( --wp--preset--spacing--50 );
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Quantity control
 * ------------------------------------------------------------------ */
.quantity,
.wc-block-components-quantity-selector {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var( --celsyn-hairline-strong );
	border-radius: 3px;
	overflow: hidden;
	background: var( --wp--preset--color--paper );
}

.quantity input.qty,
.wc-block-components-quantity-selector__input {
	width: 4.5rem;
	min-height: 44px;
	border: 0;
	text-align: center;
	font-family: var( --wp--preset--font-family--body );
	font-variant-numeric: tabular-nums;
	background: transparent;
	color: var( --wp--preset--color--ink );
	-moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wc-block-components-quantity-selector__button {
	min-width: 44px;
	min-height: 44px;
	border: 0;
	background: transparent;
	color: var( --wp--preset--color--ink );
	cursor: pointer;
}
.wc-block-components-quantity-selector__button:hover {
	background: rgb( var( --celsyn-ink-rgb ) / 0.05 );
}

/* ------------------------------------------------------------------ *
 * 5. Buttons — map WooCommerce classes to the theme button
 * ------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not( .is-link ),
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-cart__submit-button,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.85em 1.6em;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.2;
	border: 1px solid var( --wp--preset--color--ink );
	border-radius: 3px;
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	text-decoration: none;
	cursor: pointer;
	transition: transform var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease ),
	            background-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease ),
	            border-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease );
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.wc-block-components-button:not( .is-link ):hover,
.wc-block-cart__submit-button:hover,
.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	transform: translateY( -1px );
}
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce .single_add_to_cart_button:active,
.wc-block-components-button:not( .is-link ):active,
.wc-block-cart__submit-button:active {
	transform: translateY( 0 );
}

/* Secondary / quieter actions */
.woocommerce .button.wc-backward,
.woocommerce a.added_to_cart,
.wc-block-cart__submit-container .wc-block-components-button.is-link {
	background: transparent;
	color: var( --wp--preset--color--ink );
	border-color: var( --celsyn-hairline-strong );
}

/* Disabled / gating state (Phase E surfaces this via Store API errors) */
.woocommerce .button[disabled],
.wc-block-components-button[disabled],
.wc-block-components-button[aria-disabled="true"],
.wc-block-cart__submit-button[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
	background-color: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--ink );
}

/* ------------------------------------------------------------------ *
 * 6. Forms & fields
 * ------------------------------------------------------------------ */
.woocommerce form .form-row label,
.wc-block-components-text-input label,
.wc-block-components-checkout-step__heading {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 500;
	color: var( --wp--preset--color--ink );
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-select__select {
	border: 1px solid var( --celsyn-hairline-strong );
	border-radius: 3px;
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	font-family: var( --wp--preset--font-family--body );
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select__select:focus {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
	border-color: var( --wp--preset--color--accent );
}

/* Field-level validation */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.wc-block-components-text-input.has-error input {
	border-color: var( --celsyn-error );
}
.wc-block-components-validation-error,
.woocommerce .woocommerce-error li,
.woocommerce-invalid .checkout-inline-error-message {
	color: var( --celsyn-error );
	font-size: var( --wp--preset--font-size--x-small );
}

/* ------------------------------------------------------------------ *
 * 7. Tables — cart, account, order details
 * ------------------------------------------------------------------ */
.woocommerce table.shop_table,
.wc-block-cart-items,
.woocommerce-orders-table,
.woocommerce-table--order-details,
.woocommerce-MyAccount-downloads {
	border: 0;
	border-collapse: collapse;
	width: 100%;
	font-variant-numeric: tabular-nums;
}

.woocommerce table.shop_table th,
.woocommerce-orders-table__header {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
	text-align: start;
	border-block-end: 1px solid var( --celsyn-hairline-strong );
	padding: 0.75rem 0.5rem;
}

.woocommerce table.shop_table td,
.woocommerce-orders-table__cell,
.wc-block-cart-items__row td {
	border: 0;
	border-block-end: 1px solid var( --celsyn-hairline );
	padding: 1rem 0.5rem;
	background: transparent;
}

.woocommerce table.shop_table tr:last-child td {
	border-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * 8. Notices — success/info (blue system), error (brick)
 * ------------------------------------------------------------------ */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: 3px;
	border: 1px solid var( --celsyn-hairline-strong );
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	font-family: var( --wp--preset--font-family--body );
	padding: var( --wp--preset--spacing--60 );
}

.wc-block-components-notice-banner.is-success,
.woocommerce-message {
	border-color: var( --wp--preset--color--accent );
	box-shadow: inset 3px 0 0 var( --wp--preset--color--accent );
}
.wc-block-components-notice-banner.is-info,
.woocommerce-info {
	border-color: var( --celsyn-hairline-strong );
}
.wc-block-components-notice-banner.is-error,
.woocommerce-error {
	border-color: var( --celsyn-error );
	box-shadow: inset 3px 0 0 var( --celsyn-error );
	background: var( --celsyn-error-field );
}
.wc-block-components-notice-banner.is-error .wc-block-components-notice-banner__content {
	color: var( --celsyn-error );
}

/* ------------------------------------------------------------------ *
 * 9. Cart & checkout layout
 * ------------------------------------------------------------------ */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.cart_totals,
.wc-block-components-order-summary {
	background: var( --wp--preset--color--stone );
	border-radius: 3px;
	padding: var( --wp--preset--spacing--70 );
}

.wc-block-components-totals-item {
	font-variant-numeric: tabular-nums;
}

.wc-block-components-order-summary__title,
.cart_totals h2 {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
}

/* Cross-sells widget hidden — cart-level cross-sell wasn't in use; PDP-level
   complementary-product recommendation uses woocommerce/related-products instead. */
.cross-sells,
.wp-block-woocommerce-cart-cross-sells-block {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 10. My Account — shortcode output
 * ------------------------------------------------------------------ */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--80 );
}
.woocommerce-MyAccount-navigation {
	flex: 0 0 14rem;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: 1px solid var( --celsyn-hairline );
}
.woocommerce-MyAccount-navigation li {
	border-block-end: 1px solid var( --celsyn-hairline );
}
.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.8rem 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}
.woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 500;
	color: var( --wp--preset--color--accent );
}
.woocommerce-MyAccount-content {
	flex: 1 1 22rem;
}

/* --- 10a. Dashboard — Research Access status card ------------------- */
.celsyn-dash__hello {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink );
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
.celsyn-dash__logout {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
}
.celsyn-dash__lede {
	margin: 0.5rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-dash__research {
	margin-top: var( --wp--preset--spacing--70 );
	padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--70 );
	border-radius: 4px;
	background: var( --celsyn-product-surface, #F8F7F4 );
	border: 1px solid var( --celsyn-hairline );
}
.celsyn-dash__research--approved {
	background: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--ink );
}
.celsyn-dash__research--approved .celsyn-eyebrow,
.celsyn-dash__research--approved .celsyn-dash__research-status {
	color: var( --wp--preset--color--accent-cyan );
}
.celsyn-dash__research--approved .celsyn-dash__research-desc {
	color: rgb( 247 245 241 / 0.8 );
}
.celsyn-dash__research--approved .celsyn-dash__research-cta.wp-element-button {
	background-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--paper );
}
.celsyn-dash__research--approved .celsyn-dash__research-cta.wp-element-button:hover {
	background-color: #ffffff;
	border-color: #ffffff;
}
.celsyn-dash__research-status {
	margin: 0.2rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink );
}
.celsyn-dash__research-desc {
	margin: 0.4rem 0 0;
	max-width: 46ch;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-dash__research-cta {
	margin-top: var( --wp--preset--spacing--50 );
	display: inline-flex;
}
.celsyn-dash__links {
	margin-top: var( --wp--preset--spacing--70 );
	display: flex;
	flex-wrap: wrap;
	gap: var( --wp--preset--spacing--60 );
}

/* ------------------------------------------------------------------ *
 * 10b. My Account — Sign In / Create Account (logged-out) + Lost Password
 * ------------------------------------------------------------------ */
.celsyn-account {
	/* Fixed 2026-09-14: --wp--preset--spacing--30 isn't a real token (the
	   scale starts at 40), which silently invalidated this whole
	   padding-block declaration — .celsyn-account carried no padding at all. */
	padding-block: 0 var( --wp--preset--spacing--40 );
}
.celsyn-account__ctx {
	margin-bottom: var( --wp--preset--spacing--70 );
	padding: 0.9rem 1.2rem;
	background: rgb( 14 88 191 / 0.06 );
	border: 1px solid rgb( 14 88 191 / 0.2 );
	border-radius: 4px;
}
.celsyn-account__ctx p {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
}
.celsyn-account__grid {
	display: grid;
	gap: var( --wp--preset--spacing--60 );
}
.celsyn-account__grid--single {
	max-width: 30rem;
	margin-inline: auto;
}
@media ( min-width: 900px ) {
	.celsyn-account__grid {
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
	}
}
.celsyn-account__col {
	padding: var( --wp--preset--spacing--70 );
	border-radius: 4px;
}
.celsyn-account__col--signin {
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
}
.celsyn-account__col--register {
	background: var( --celsyn-product-surface, #F8F7F4 );
	border: 1px solid var( --celsyn-hairline );
}
.celsyn-account__col--signin .celsyn-eyebrow {
	color: var( --wp--preset--color--accent-cyan );
}
.celsyn-account__col--register .celsyn-eyebrow {
	color: var( --wp--preset--color--accent );
}
.celsyn-account__title {
	margin: 0.35rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 1.1rem + 1.6vw, 2.1rem );
	line-height: 1.15;
}
.celsyn-account__col--signin .celsyn-account__title {
	color: var( --wp--preset--color--paper );
}
.celsyn-account__col--register .celsyn-account__title {
	color: var( --wp--preset--color--ink );
}
.celsyn-account__lede {
	margin: 0.7rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
}
.celsyn-account__col--signin .celsyn-account__lede {
	color: rgb( 247 245 241 / 0.75 );
}
.celsyn-account__col--register .celsyn-account__lede {
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-account__form {
	margin-top: var( --wp--preset--spacing--60 );
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--50 );
}
.celsyn-account__row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.celsyn-account__row label {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 500;
	font-size: var( --wp--preset--font-size--small );
}
.celsyn-account__col--signin .celsyn-account__row label {
	color: var( --wp--preset--color--paper );
}
.celsyn-account__col--register .celsyn-account__row label {
	color: var( --wp--preset--color--ink );
}
.celsyn-account__row input[type="text"],
.celsyn-account__row input[type="email"],
.celsyn-account__row input[type="password"] {
	border: 1px solid var( --celsyn-hairline-strong );
	border-radius: 3px;
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	padding: 0.65em 0.8em;
	min-height: 44px;
}
.celsyn-account__col--signin .celsyn-account__row input {
	border-color: rgb( 247 245 241 / 0.25 );
}
.celsyn-account__row input:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
	border-color: var( --wp--preset--color--accent );
}
/* Placeholders: muted, clearly lighter than typed text, never blue — a
   distinct tone per panel since warm-grey reads too low-contrast on the
   dark Sign In panel. Firefox lowers placeholder opacity by default;
   pinned to 1 so both panels render the same muted tone deliberately. */
.celsyn-account__row input::placeholder {
	color: var( --wp--preset--color--warm-grey );
	opacity: 1;
}
.celsyn-account__col--signin .celsyn-account__row input::placeholder {
	color: rgb( 247 245 241 / 0.45 );
}
/* Room for the browser's own native password-reveal icon (Chrome/Edge/
   Safari inject one) so it never sits on top of typed characters. */
.celsyn-account__row input[type="password"] {
	padding-right: 2.75rem;
}
.celsyn-account__row--meta {
	flex-direction: row !important;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
}
/* !important throughout: WooCommerce core ships an unscoped `label{}` rule
   that otherwise wins on display/color here regardless of source order,
   since a bare element selector still out-weighs an author class in a few
   of its own declarations further down its cascade — same reason
   .celsyn-account__row--meta above already needed it for flex-direction. */
.celsyn-account__remember {
	display: inline-flex !important;
	align-items: center;
	gap: 0.55rem;
	font-weight: 400 !important;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink ) !important;
	cursor: pointer;
	/* Larger tap target on mobile without shifting the row's own layout. */
	padding-block: 0.4rem;
	margin-block: -0.4rem;
}
.celsyn-account__col--signin .celsyn-account__remember {
	color: var( --wp--preset--color--paper ) !important;
}
.celsyn-account__remember span {
	display: inline;
}
.celsyn-account__remember input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var( --wp--preset--color--accent );
	cursor: pointer;
}
.celsyn-account__col--signin .celsyn-account__remember input[type="checkbox"] {
	accent-color: var( --wp--preset--color--accent-cyan );
}
.celsyn-account__col--signin .celsyn-account__lost {
	color: var( --wp--preset--color--accent-cyan );
}
.celsyn-account__note {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-account__form button[type="submit"] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.85em 1.6em;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	border: 1px solid transparent;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.celsyn-account__col--signin .celsyn-account__form button[type="submit"] {
	background-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--paper );
}
.celsyn-account__col--signin .celsyn-account__form button[type="submit"]:hover {
	background-color: #ffffff;
	border-color: #ffffff;
}
.celsyn-account__col--register .celsyn-account__form button[type="submit"] {
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	border-color: var( --wp--preset--color--ink );
}
.celsyn-account__col--register .celsyn-account__form button[type="submit"]:hover {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
}
.celsyn-account__foot {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-account-benefits {
	margin-top: var( --wp--preset--spacing--80 );
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--preset--spacing--60 );
}
@media ( min-width: 720px ) {
	.celsyn-account-benefits {
		grid-template-columns: repeat( 4, 1fr );
	}
}
.celsyn-account-benefits__item {
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 2px solid var( --wp--preset--color--accent );
}
.celsyn-account-benefits__label {
	margin: 0 0 0.3rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}
.celsyn-account-benefits__desc {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	color: var( --wp--preset--color--warm-grey );
}

/* ------------------------------------------------------------------ *
 * 11. Mini-cart drawer
 * ------------------------------------------------------------------ */
.wc-block-mini-cart__drawer .wc-block-components-drawer {
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
}
.wc-block-mini-cart__button {
	color: inherit;
	font-family: var( --wp--preset--font-family--body );
}
.wc-block-mini-cart__badge {
	background: var( --wp--preset--color--accent-cyan );
	color: var( --wp--preset--color--ink );
}

/* ------------------------------------------------------------------ *
 * 12. Empty states
 * ------------------------------------------------------------------ */
.wc-block-cart__empty-cart__title,
.cart-empty {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	color: var( --wp--preset--color--ink );
}

.celsyn-no-products {
	text-align: center;
	padding-block: var( --wp--preset--spacing--90 );
}
.celsyn-no-products__title {
	font-family: var( --wp--preset--font-family--display );
}

/* ------------------------------------------------------------------ *
 * 13. Product card
 * ------------------------------------------------------------------ */
.celsyn-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --celsyn-hairline );
	border-radius: 0;
	background: var( --wp--preset--color--paper );
}
.celsyn-card__body {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--50 );
	padding: var( --wp--preset--spacing--60 );
}
.celsyn-card .wp-block-post-title,
.celsyn-card .wc-block-components-product-name {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	font-size: var( --wp--preset--font-size--large );
	margin: 0;
}
.celsyn-card .wp-block-post-title a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}
.celsyn-card__cta {
	margin-block-start: auto;
}

/* ------------------------------------------------------------------ *
 * 14. Responsive
 * ------------------------------------------------------------------ */
@media ( max-width: 767px ) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
	}
	.woocommerce-MyAccount-navigation {
		flex-basis: auto;
	}

	/* Cart table → stacked rows */
	.woocommerce table.shop_table.cart thead {
		display: none;
	}
	.woocommerce table.shop_table.cart tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.25rem 0.75rem;
		padding-block: 0.75rem;
		border-block-end: 1px solid var( --celsyn-hairline );
	}
	.woocommerce table.shop_table.cart td {
		border: 0;
		padding: 0.15rem 0;
	}
}

/* Any table that must scroll does so inside its own container, never the page */
.woocommerce .shop_table_responsive,
.wc-block-components-order-summary {
	overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * 15. Accessibility
 * ------------------------------------------------------------------ */
.woocommerce a:focus-visible,
.woocommerce button:focus-visible,
.woocommerce input:focus-visible,
.woocommerce select:focus-visible,
.wc-block-components-button:focus-visible,
.wc-block-mini-cart__button:focus-visible,
.woocommerce-MyAccount-navigation li a:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.wc-block-components-drawer,
	.woocommerce a.button,
	.wc-block-components-button {
		transition: none !important;
	}
}

/* ------------------------------------------------------------------ *
 * 16. Complete the System (celsyn/complete-the-system, PDP only)
 * ------------------------------------------------------------------ *
 * The block renders its button markup from PHP, so WordPress never enqueues
 * core's button block stylesheet for it — `.wp-block-button__link` falls back
 * to display:inline with no box model, which made a long label ("View <full
 * product name>") wrap across line boxes and spill outside the button. Supply
 * the box model + the approved CELSYN button colours (matching section 5), and
 * let the label wrap only when the column genuinely can't fit it.
 */
.celsyn-complete-system .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
}
.celsyn-complete-system .wp-block-button {
	max-width: 100%;
}
/* Selector qualified with `a` + both link classes so it clears the
   `.woocommerce a:not(...)` link-colour rule in section 1 (same specificity,
   later in the file) — otherwise the label renders accent-blue on ink. */
.celsyn-complete-system a.wp-block-button__link.wp-element-button {
	display: inline-block;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	text-align: center;
	line-height: 1.25;
	padding: 0.85em 1.6em;
	border: 1px solid var( --wp--preset--color--ink );
	border-radius: 3px;
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	text-decoration: none;
}
.celsyn-complete-system a.wp-block-button__link.wp-element-button:hover,
.celsyn-complete-system a.wp-block-button__link.wp-element-button:focus-visible {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--paper );
	transform: translateY( -1px );
	transition: transform var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease ),
	            background-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease );
}

/* ------------------------------------------------------------------ *
 * 17. UI/UX Phase 1 — Shop card, PDP sticky column, mobile sticky cart
 * ------------------------------------------------------------------ */

/* --- Shop: the whole product card is a target --------------------- *
 * One real anchor (the post-title link) extended over the card via ::after.
 * No nested anchors. "View Product ->" stays a real link, lifted above the
 * overlay so a direct click on it works as itself; both routes go to the
 * same product URL. Text selection still works (the overlay is transparent). */
.celsyn-card {
	position: relative;
	transition: border-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease, ease );
}
.celsyn-card .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* "View Product ->" — its own link treatment (no .celsyn-textlink underline-
   wipe, which would fight this ::after arrow). Lifted above the card overlay. */
.celsyn-card__cta {
	position: relative;
	z-index: 2;
	display: inline-block;
	color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	text-decoration: none;
}
.celsyn-card__cta::after {
	content: "\2192";
	display: inline-block;
	margin-inline-start: 0.35em;
	transition: transform var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease, ease );
}
.celsyn-card:hover .celsyn-card__cta::after,
.celsyn-card:focus-within .celsyn-card__cta::after {
	transform: translateX( 3px );
}

/* bottom accent line — the "elevation", no shadow */
.celsyn-card::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var( --wp--preset--color--accent );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform var( --celsyn-dur-mid, 320ms ) var( --celsyn-ease, ease );
	z-index: 3;
	pointer-events: none;
}
.celsyn-card:hover,
.celsyn-card:focus-within {
	border-color: var( --celsyn-hairline-strong );
}
.celsyn-card:hover::before,
.celsyn-card:focus-within::before {
	transform: scaleX( 1 );
}
.celsyn-card:hover .celsyn-product-media img,
.celsyn-card:focus-within .celsyn-product-media img {
	transform: scale( 1.02 );
}
.celsyn-card .celsyn-product-media img {
	transition: transform var( --celsyn-dur-mid, 320ms ) var( --celsyn-ease, ease );
}

/* Curated two-product presentation — centre the pair, cap the width.
 * The Product Collection block ships as `columns-3` with an auto-fill grid, so
 * with only two products it leaves an empty third track and the pair sits
 * left-of-centre. Pin it to two equal tracks and centre the group. Scoped to
 * the shop archive; single-product cross-sell collections are untouched. */
.woocommerce .wp-block-woocommerce-product-collection {
	max-width: 780px;
	margin-inline: auto;
}
body.post-type-archive-product .wp-block-woocommerce-product-collection .wc-block-product-template,
body.woocommerce-page.archive .wp-block-woocommerce-product-collection .wc-block-product-template {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 320px ) );
	justify-content: center;
}
@media ( max-width: 520px ) {
	body.post-type-archive-product .wp-block-woocommerce-product-collection .wc-block-product-template,
	body.woocommerce-page.archive .wp-block-woocommerce-product-collection .wc-block-product-template {
		grid-template-columns: minmax( 0, 320px );
	}
}

/* --- PDP: sticky desktop purchase column ------------------------- *
 * Native position:sticky. align-self:flex-start lets the column size to its
 * content (instead of stretching to the gallery's height) so it has travel.
 * Scoped by the inline flex-basis so the Complete the System / product-details
 * columns are untouched. */
@media ( min-width: 900px ) {
	body.single-product .wp-block-columns.alignwide > .wp-block-column[style*="flex-basis:52%"] {
		position: sticky;
		top: calc( var( --celsyn-header-h, 76px ) + 1.5rem );
		align-self: flex-start;
	}
}

/* purchase CTA weight — the WC add-to-cart form is a wrapping flex row
   (section 3). Make it full width and let the button take its own full-width
   row below the quantity, with a touch more height. */
.celsyn-purchase form.cart,
.celsyn-purchase .wp-block-woocommerce-add-to-cart-form {
	width: 100%;
}
.celsyn-purchase form.cart .single_add_to_cart_button {
	flex: 1 1 100%;
	min-height: 52px;
}

/* --- PDP: mobile sticky Add-to-Cart bar -------------------------- *
 * Rendered by patterns/product-sticky-cart.php (PDP template only), so it is
 * never in the DOM on cart/checkout. Hidden off-screen + visibility:hidden
 * until motion.js toggles .is-visible (when the real Add-to-Cart scrolls out
 * of view). Same actual WooCommerce add-to-cart POST. */
.celsyn-sticky-cart {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var( --wp--preset--color--paper );
	border-top: 1px solid var( --celsyn-hairline-strong );
	padding: 0.75rem clamp( 1rem, 4vw, 1.5rem );
	padding-bottom: calc( 0.75rem + env( safe-area-inset-bottom, 0px ) );
	transform: translateY( 110% );
	visibility: hidden;
	transition: transform var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease, ease ),
	            visibility 0s linear var( --celsyn-dur-fast, 180ms );
}
.celsyn-sticky-cart.is-visible {
	transform: none;
	visibility: visible;
	transition: transform var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease, ease );
}
@media ( min-width: 900px ) {
	.celsyn-sticky-cart {
		display: none;
	}
}
.celsyn-sticky-cart__form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: 40rem;
	margin-inline: auto;
	margin-bottom: 0;
}
.celsyn-sticky-cart__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.celsyn-sticky-cart__btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.4em;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
	letter-spacing: 0.01em;
	border: 1px solid var( --wp--preset--color--ink );
	border-radius: 3px;
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	cursor: pointer;
	transition: background-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease );
}
.celsyn-sticky-cart__btn:hover {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
}
.celsyn-sticky-cart__btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}

/* ================================================================== *
 * RESEARCH PRODUCT PDP  (body.celsyn-research-pdp)
 * Same editorial single-product layout as skincare, distinguished by:
 * a "Research Product" eyebrow, a strength line + research-use note in the
 * purchase area, the default product-details tabs hidden, and a dedicated
 * overview / details / documentation / notice stack.
 * ================================================================== */

/* Hide WooCommerce's default product-details (Description / Additional info /
   Reviews) for research products — the celsyn-rdetails stack replaces it. */
body.celsyn-research-pdp .wp-block-woocommerce-product-details {
	display: none;
}

.celsyn-purchase--research .celsyn-purchase__strength {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--ink );
}
.celsyn-purchase--research .celsyn-purchase__strength span {
	display: inline-block;
	margin-right: 0.6em;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
/* Official public RETAIL price, shown prominently near the purchase controls.
   No sale/intro/distributor price is ever configured — get_price_html() renders
   a single plain amount, no strikethrough, no badge. */
.celsyn-purchase--research .celsyn-purchase__price {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.1;
	font-weight: 500;
	color: var( --wp--preset--color--ink );
	font-variant-numeric: tabular-nums;
}
.celsyn-purchase--research .celsyn-purchase__price .woocommerce-Price-amount {
	white-space: nowrap;
}
.celsyn-purchase--research .celsyn-purchase__note {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgb( var( --celsyn-ink-rgb ) / 0.5 );
}
/* Unscoped (not .celsyn-purchase--research only, UI/UX polish 2026-09-13) —
   the purchase box below now shows "One-time purchase" on skincare PDPs
   too, reserving visual room for a future Subscribe & Save choice. */
.celsyn-purchase__option {
	margin: 0 0 var( --wp--preset--spacing--50 );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}

/* --- Purchase box: groups quantity + Add to Cart into one visual unit -- */
.celsyn-purchase__box {
	margin-top: var( --wp--preset--spacing--60 );
	padding: var( --wp--preset--spacing--60 );
	border: 1px solid var( --celsyn-hairline );
	border-radius: 4px;
	background: var( --celsyn-product-surface, #F8F7F4 );
}
.celsyn-purchase__box form.cart,
.celsyn-purchase__box .wp-block-woocommerce-add-to-cart-form {
	margin: 0;
}

.celsyn-rdetails__wrap {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--80 );
}
.celsyn-rdetails__h {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.15;
	margin: 0 0 var( --wp--preset--spacing--50 );
}
.celsyn-rdetails__block p {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
	line-height: 1.6;
}
.celsyn-rdetails__dl {
	margin: 0;
	display: grid;
	gap: 0;
}
.celsyn-rdetails__dl > div {
	display: grid;
	grid-template-columns: 10rem 1fr;
	gap: 0.5rem 1rem;
	padding: 0.7rem 0;
	border-top: 1px solid var( --celsyn-hairline );
}
.celsyn-rdetails__dl > div:last-child { border-bottom: 1px solid var( --celsyn-hairline ); }
.celsyn-rdetails__dl dt {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-rdetails__dl dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
}
.celsyn-rdetails__notice {
	margin: 0;
	padding: 1rem 1.2rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
	background: rgb( 14 88 191 / 0.06 );
	border: 1px solid rgb( 14 88 191 / 0.2 );
	border-radius: 4px;
}
@media ( max-width: 599.98px ) {
	.celsyn-rdetails__dl > div {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/* ================================================================== *
 * SKINCARE PRODUCT PDP  (body.celsyn-skincare-pdp)
 * The two skincare PDPs (Serum / Mask) have empty WooCommerce descriptions,
 * so the default product-details block renders as dead whitespace before
 * Complete the System. Hide it and let celsyn360/product-skincare-details
 * own a concise, descriptive info hierarchy in that space. Descriptive
 * positioning only — no usage directions, volume, concentration or claims.
 * ================================================================== */
body.celsyn-skincare-pdp .wp-block-woocommerce-product-details {
	display: none;
}

.celsyn-sdetails {
	margin-top: var( --wp--preset--spacing--70 );
	margin-bottom: var( --wp--preset--spacing--60 );
}
/* When the skincare info stack fills the space, Complete the System no longer
   needs its full standalone top gap (inline style on the block = needs !important). */
.celsyn-sdetails + .celsyn-complete-system {
	margin-top: var( --wp--preset--spacing--70 ) !important;
}
.celsyn-sdetails__wrap {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--70 );
}
.celsyn-sdetails__accordion {
	max-width: 720px;
	margin-top: var( --wp--preset--spacing--60 );
}
.celsyn-sdetails__positioning {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.3;
	color: var( --wp--preset--color--ink );
	text-wrap: balance;
}
.celsyn-sdetails__block {
	margin: 0;
}
.celsyn-sdetails__h {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-sdetails__rows,
.celsyn-sdetails__dl {
	margin: 0;
	display: grid;
	gap: 0;
}
.celsyn-sdetails__rows > div,
.celsyn-sdetails__dl > div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: 0.4rem 1.2rem;
	padding: 0.7rem 0;
	border-top: 1px solid var( --celsyn-hairline );
}
.celsyn-sdetails__rows > div:last-child,
.celsyn-sdetails__dl > div:last-child {
	border-bottom: 1px solid var( --celsyn-hairline );
}
.celsyn-sdetails__rows dt,
.celsyn-sdetails__dl dt {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-sdetails__rows dd,
.celsyn-sdetails__dl dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	color: var( --wp--preset--color--ink );
}
.celsyn-sdetails__block > p {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.6;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-sdetails__block > p .celsyn-textlink {
	white-space: nowrap;
}
@media ( max-width: 599.98px ) {
	.celsyn-sdetails__rows > div,
	.celsyn-sdetails__dl > div {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
}

/* ================================================================== *
 * TRACK ORDER  (/track-order/ — [woocommerce_order_tracking] result)
 * The page is a plain WP page; celsyn360_enqueue_woocommerce_styles()
 * loads this file + woocommerce-general there. Style the lookup result
 * (status line, order-details table, customer details) to match. No
 * decorative divider lines.
 * ================================================================== */
.celsyn-track .woocommerce-error,
.celsyn-track .woocommerce-message,
.celsyn-track .woocommerce-info {
	margin: 0 0 var( --wp--preset--spacing--60 );
	padding: 0.9rem 1.1rem;
	list-style: none;
	font-size: var( --wp--preset--font-size--small );
	border-radius: 4px;
}
.celsyn-track .woocommerce-error {
	color: var( --celsyn-error, #8C382C );
	background: var( --celsyn-error-field, rgb( 140 56 44 / 0.08 ) );
	border: 1px solid rgb( 140 56 44 / 0.25 );
}
.celsyn-track .woocommerce-message,
.celsyn-track .woocommerce-info {
	color: var( --wp--preset--color--ink );
	background: rgb( 14 88 191 / 0.06 );
	border: 1px solid rgb( 14 88 191 / 0.2 );
}
.celsyn-track .order-info {
	margin: var( --wp--preset--spacing--70 ) 0 0;
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.5;
	color: var( --wp--preset--color--ink );
}
.celsyn-track .order-info mark {
	background: none;
	color: var( --wp--preset--color--ink );
	font-weight: 600;
}
.celsyn-track .order-info mark.order-status {
	color: var( --wp--preset--color--accent );
}
.celsyn-track .woocommerce-order-details,
.celsyn-track .woocommerce-customer-details {
	margin-top: var( --wp--preset--spacing--70 );
}
.celsyn-track .woocommerce-order-details__title,
.celsyn-track .woocommerce-column__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	margin: 0 0 var( --wp--preset--spacing--50 );
}
.celsyn-track table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var( --wp--preset--font-size--small );
}
.celsyn-track table.woocommerce-table th,
.celsyn-track table.woocommerce-table td {
	text-align: left;
	padding: 0.7rem 0.6rem;
	border-bottom: 1px solid var( --celsyn-hairline );
	vertical-align: top;
}
.celsyn-track table.woocommerce-table th {
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-track table.woocommerce-table tfoot th {
	text-transform: none;
	letter-spacing: 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
}
.celsyn-track .woocommerce-table__product-name a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}
.celsyn-track .woocommerce-table__product-name a:hover { text-decoration: underline; }
.celsyn-track address {
	font-style: normal;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.6;
	color: var( --wp--preset--color--ink );
}
.celsyn-track .woocommerce-customer-details .col2-set,
.celsyn-track .woocommerce-columns--addresses {
	display: grid;
	gap: var( --wp--preset--spacing--60 );
}
@media ( min-width: 560px ) {
	.celsyn-track .woocommerce-customer-details .col2-set,
	.celsyn-track .woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
	}
}