/**
 * NPHI commerce: cart, checkout, and order-received presentation.
 *
 * WooCommerce owns products, orders, and payment. This stylesheet only
 * aligns Woo markup (Blocks first, classic shortcodes as fallback) with
 * NPHI tokens and styles the [nphi_checkout_plan] context card.
 */

/* Page shell: constrain Woo's full-width page wrapper to the site grid. */
main[data-page="cart"] > :where(.alignwide, .alignfull),
main[data-page="checkout"] > :where(.alignwide, .alignfull) {
	max-width: var(--container-content);
	margin-left: auto;
	margin-right: auto;
}

main[data-page="cart"],
main[data-page="checkout"] {
	padding-bottom: var(--space-8);
}

main[data-page="cart"] .wp-block-post-title,
main[data-page="checkout"] .wp-block-post-title {
	font-size: var(--text-3xl);
	margin-bottom: var(--space-2);
}

/* ---- Checkout layout: breathing room + shared card language ---- */
body.woocommerce-checkout .wc-block-checkout {
	gap: var(--space-5);
}

body.woocommerce-checkout .wc-block-checkout__form {
	font-family: var(--font-sans);
	margin-bottom: 0;
}

/* Plan context card above the checkout. */
.nphi-checkout-plan {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-lg);
	padding: var(--space-5) var(--space-5) var(--space-4);
	margin-bottom: var(--space-6);
	box-shadow: var(--shadow-md);
}

.nphi-checkout-plan .nphi-badge {
	display: inline-flex;
	align-items: center;
	margin-bottom: var(--space-2);
	background-color: var(--color-primary-tint);
	border: var(--border-width) solid var(--color-primary);
	color: var(--color-primary-deep);
	border-radius: var(--radius-full);
	padding: 0.25rem 0.75rem;
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nphi-checkout-plan h2 {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	letter-spacing: -0.01em;
	color: var(--color-ink);
	margin: 0 0 var(--space-1);
}

.nphi-checkout-plan__price {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 800;
	color: var(--color-primary-deep);
	margin: 0 0 var(--space-1);
}

.nphi-checkout-plan__price small {
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-muted);
}

.nphi-checkout-plan > p {
	color: var(--color-muted);
	font-size: var(--text-sm);
	max-width: var(--measure);
}

.nphi-checkout-plan > p a {
	color: var(--color-primary);
	font-weight: 600;
}

.nphi-checkout-plan__intent {
	margin-top: var(--space-2);
}

.nphi-checkout-plan__benefits {
	list-style: none;
	margin: var(--space-3) 0 var(--space-2);
	padding: 0;
	display: grid;
	gap: var(--space-2);
}

.nphi-checkout-plan__benefits li {
	position: relative;
	padding-left: var(--space-5);
	font-size: var(--text-sm);
	color: var(--color-ink);
}

.nphi-checkout-plan__benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: var(--radius-full);
	background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E") center/0.65rem no-repeat;
}

/* Primary buttons (cart + checkout + confirmation). */
body.woocommerce-cart .wc-block-components-button:not(.is-link),
body.woocommerce-checkout .wc-block-components-button:not(.is-link) {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: var(--radius-full);
	font-weight: 700;
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-6);
	border: 0;
	transition: background-color 0.15s ease;
}

body.woocommerce-cart .wc-block-components-button:not(.is-link):hover,
body.woocommerce-checkout .wc-block-components-button:not(.is-link):hover {
	background-color: var(--color-primary-deep);
	color: var(--color-on-primary);
}

body.woocommerce-cart .wc-block-components-button:not(.is-link):focus-visible,
body.woocommerce-checkout .wc-block-components-button:not(.is-link):focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

body.woocommerce-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
	width: 100%;
}

/* Cart: product rows + totals sidebar as cards. */
body.woocommerce-cart table.wc-block-cart-items {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

body.woocommerce-cart .wc-block-cart-items__header th {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-muted);
}

body.woocommerce-cart .wc-block-cart-items__row {
	border-top: var(--border-width) solid var(--color-line);
}

body.woocommerce-cart .wc-block-cart-item__remove-link {
	color: var(--color-muted);
}

body.woocommerce-cart .wc-block-cart-item__remove-link:hover {
	color: var(--color-primary);
}

body.woocommerce-cart .wp-block-woocommerce-cart-order-summary-block {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

body.woocommerce-cart .wc-block-components-totals-coupon__form .components-button {
	border-radius: var(--radius-md);
}

/* Empty cart / empty checkout states. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}

/* Empty-cart "New in store" grid: services need no product imagery
   (same rule as commerce-flow.css for cart/checkout imagery) — layout only. */
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-image {
	display: none !important;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
	font-family: var(--font-display);
	font-weight: 700;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	font-weight: 700;
	text-decoration: none;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
	background-color: var(--color-primary-deep);
	color: var(--color-on-primary);
}

/* Checkout: numbered steps + summary sidebar as cards. */
body.woocommerce-checkout .wc-block-checkout__main .wc-block-components-checkout-step {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-4);
	box-shadow: var(--shadow-sm);
}

body.woocommerce-checkout .wc-block-components-checkout-step__heading {
	margin-bottom: var(--space-3);
}

body.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-ink);
	letter-spacing: -0.01em;
}

body.woocommerce-checkout .wc-block-components-checkout-step__description {
	font-size: var(--text-sm);
	color: var(--color-muted);
}

body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	position: sticky;
	top: 5.5rem;
}

body.woocommerce-checkout .wc-block-components-order-summary__content {
	padding-top: var(--space-2);
}

body.woocommerce-checkout .wc-block-components-totals-wrapper {
	border-top: var(--border-width) solid var(--color-line);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form {
	gap: var(--space-2);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form input {
	border-radius: var(--radius-md);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form .components-button {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border-radius: var(--radius-full);
	font-weight: 700;
	padding: var(--space-2) var(--space-4);
}

body.woocommerce-checkout .wc-block-components-totals-coupon__form .components-button:hover {
	background-color: var(--color-primary-deep);
}

body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-combobox input,
body.woocommerce-checkout .wc-block-components-textarea {
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: var(--text-base);
	border-color: var(--color-line-strong);
}

body.woocommerce-checkout .wc-block-components-text-input.is-active input,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-block-components-combobox input:focus {
	border-color: var(--color-primary);
	box-shadow: var(--focus-ring);
}

body.woocommerce-checkout .wc-block-components-validation-error > p {
	color: #b3261e;
}

body.woocommerce-checkout .wc-block-components-notices .wc-block-components-notice-banner.is-error {
	border-radius: var(--radius-md);
}

/* Payment method box matches cards. */
body.woocommerce-checkout .wc-block-checkout__payment-method {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
}

/* Order confirmation (Blocks): status hero + summary cards. */
body.woocommerce-checkout .wc-block-order-confirmation-status {
	background: linear-gradient(135deg, #0d3d3d 0%, #1a6b6b 60%, #2ba3a3 100%);
	border: 0;
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
	margin-bottom: var(--space-5);
	color: #fff;
}

body.woocommerce-checkout .wc-block-order-confirmation-status .wc-block-order-confirmation-status__message {
	color: #fff;
}

body.woocommerce-checkout .wc-block-order-confirmation-status.is-failed,
body.woocommerce-checkout .wc-block-order-confirmation-status.is-cancelled {
	background: #fdecea;
	color: var(--color-ink);
}

body.woocommerce-checkout .wc-block-order-confirmation-summary,
body.woocommerce-checkout .wc-block-order-confirmation-totals-wrapper,
body.woocommerce-checkout .wc-block-order-confirmation-additional-information,
body.woocommerce-checkout .wc-block-order-confirmation-downloads-wrapper {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-4);
}

body.woocommerce-checkout .wc-block-order-confirmation-summary-list-item {
	border-top: var(--border-width) solid var(--color-line);
	padding: var(--space-2) 0;
}

/* Classic shortcode fallback (kept for non-block checkout pages). */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #order_review {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.woocommerce-checkout #order_review {
	box-shadow: var(--shadow-sm);
}

.woocommerce-checkout input,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
	border: var(--border-width) solid var(--color-line-strong);
	border-radius: var(--radius-md);
	padding: var(--space-3) var(--space-4);
	font-family: inherit;
	font-size: var(--text-base);
	background-color: var(--color-surface);
	color: var(--color-ink);
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: var(--focus-ring);
}

.woocommerce-checkout #place_order,
.woocommerce-checkout button[name="woocommerce_checkout_place_order"] {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	border: none;
	border-radius: var(--radius-full);
	padding: var(--space-3) var(--space-6);
	font-weight: 700;
	font-size: var(--text-base);
	cursor: pointer;
	width: 100%;
}

.woocommerce-checkout #place_order:hover {
	background-color: var(--color-primary-deep);
}

.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--font-display);
	font-size: var(--text-2xl);
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--color-primary-deep);
	margin: 0 0 var(--space-4);
}

/* Classic thank-you meta strip: Order number / Date / Email / Total / Method.
   Woo renders a plain <ul>; Tailwind preflight strips its layout, so we
   rebuild it as a responsive card grid with dividers. */
.woocommerce-order .woocommerce-thankyou-order-details,
.woocommerce-order ul.woocommerce-thankyou-order-details,
.woocommerce-order ul.order_details.woocommerce-thankyou-order-details {
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	overflow: hidden;
}
.woocommerce-order .woocommerce-thankyou-order-details li,
.woocommerce-order ul.woocommerce-thankyou-order-details li {
	margin: 0;
	padding: var(--space-4) var(--space-5);
	border: 0;
	border-left: var(--border-width) solid var(--color-line);
	font-size: var(--text-sm);
	color: var(--color-muted);
	text-transform: none;
	min-width: 0;
}
.woocommerce-order .woocommerce-thankyou-order-details li:first-child {
	border-left: 0;
}
/* Woo classic uses plain text labels ("Order number:"), not data attrs —
   keep the inline label treatment simple. */
.woocommerce-order .woocommerce-thankyou-order-details li {
	line-height: var(--leading-normal);
}
.woocommerce-order .woocommerce-thankyou-order-details li strong {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-ink);
	word-break: break-word;
}

.woocommerce-order .woocommerce-order-downloads,
.woocommerce-order .woocommerce-customer-details {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-bottom: var(--space-4);
}

/* ---- BACS "Our bank details" (Direct bank transfer) ----
   Markup: section > h2 + h3 + ul.bacs_details > li. Without this,
   Tailwind leaves h2/h3 margin-less and li inline, producing the
   overlapping single-row look from the bug report. */
.woocommerce-bacs-bank-details,
.woocommerce-order .woocommerce-bacs-bank-details {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin: 0 0 var(--space-5);
	box-shadow: var(--shadow-sm);
}
.woocommerce-bacs-bank-details h2.wc-bacs-bank-details-heading,
.woocommerce-order .wc-bacs-bank-details-heading {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 800;
	color: var(--color-ink);
	margin: 0 0 var(--space-1);
}
.woocommerce-bacs-bank-details h3.wc-bacs-bank-details-account-name,
.woocommerce-order .wc-bacs-bank-details-account-name {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-primary-deep);
	margin: 0 0 var(--space-3);
}
.woocommerce-bacs-bank-details ul.wc-bacs-bank-details,
.woocommerce-bacs-bank-details ul.bacs_details,
.woocommerce-order ul.wc-bacs-bank-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: var(--border-width) solid var(--color-line);
}
.woocommerce-bacs-bank-details ul.wc-bacs-bank-details li,
.woocommerce-bacs-bank-details ul.bacs_details li {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border: 0;
	border-left: var(--border-width) solid var(--color-line);
	font-size: var(--text-sm);
	color: var(--color-muted);
	min-width: 0;
}
.woocommerce-bacs-bank-details ul li:first-child {
	border-left: 0;
	padding-left: 0;
}
.woocommerce-bacs-bank-details ul li strong {
	display: block;
	margin-top: 0.15rem;
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--color-ink);
	word-break: break-word;
}

/* ---- Classic "Order details" table ---- */
.woocommerce-order-details,
.woocommerce-order .woocommerce-order-details {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin: 0 0 var(--space-5);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.woocommerce-order-details__title,
.woocommerce-order .woocommerce-order-details__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 800;
	color: var(--color-ink);
	margin: 0 0 var(--space-3);
}
.woocommerce table.woocommerce-table--order-details,
.woocommerce-order table.woocommerce-table--order-details,
.woocommerce table.shop_table.order_details {
	width: 100%;
	margin: 0;
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--color-surface);
	font-size: var(--text-base);
}
.woocommerce table.woocommerce-table--order-details thead th,
.woocommerce table.shop_table.order_details thead th {
	background: var(--color-surface-tint);
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-ink);
	text-align: left;
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-width) solid var(--color-line);
}
.woocommerce table.woocommerce-table--order-details thead th:last-child,
.woocommerce table.shop_table.order_details thead th:last-child,
.woocommerce table.woocommerce-table--order-details td:last-child,
.woocommerce table.shop_table.order_details td:last-child,
.woocommerce table.woocommerce-table--order-details tfoot td:last-child {
	text-align: right;
}
.woocommerce table.woocommerce-table--order-details td,
.woocommerce table.woocommerce-table--order-details th,
.woocommerce table.shop_table.order_details td,
.woocommerce table.shop_table.order_details th {
	padding: var(--space-3) var(--space-4);
	border-top: var(--border-width) solid var(--color-line);
	vertical-align: top;
}
.woocommerce table.woocommerce-table--order-details thead tr:first-child th {
	border-top: 0;
}
.woocommerce table.woocommerce-table--order-details tbody tr:first-child td {
	border-top: 0;
}
.woocommerce table.woocommerce-table--order-details tfoot th {
	font-weight: 700;
	color: var(--color-ink);
	text-align: left;
}
.woocommerce table.woocommerce-table--order-details tfoot td {
	font-weight: 700;
	color: var(--color-ink);
}
.woocommerce table.woocommerce-table--order-details .product-quantity {
	font-weight: 700;
	color: var(--color-ink);
}

/* ---- Classic billing / shipping addresses ----
   Woo nests <address> inside a card; remove the double-box look and
   restore readable block layout lost to preflight. */
.woocommerce-customer-details .woocommerce-column__title,
.woocommerce-order .woocommerce-customer-details .woocommerce-column__title {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 800;
	color: var(--color-ink);
	margin: 0 0 var(--space-3);
}
.woocommerce-customer-details address,
.woocommerce-order .woocommerce-customer-details address {
	font-style: normal;
	line-height: var(--leading-loose);
	color: var(--color-ink);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-5);
	margin: 0;
	background: var(--color-surface);
}
.woocommerce-customer-details address p,
.woocommerce-customer-details--phone,
.woocommerce-customer-details--email {
	margin: 0 0 var(--space-1);
}
.woocommerce-columns--addresses,
.woocommerce .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}
.woocommerce-columns--addresses .woocommerce-column {
	margin: 0;
	min-width: 0;
}

/* Commerce body wrapper: keep classic + Blocks content inside the grid
   and stop Woo full-width helpers from escaping the shell. */
.ph-commerce-body .alignwide,
.ph-commerce-body .alignfull {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.ph-commerce-body .woocommerce {
	width: 100%;
	min-width: 0;
}
/* Classic shortcode layout fallback: Woo floats collapse under Tailwind
   preflight, so rebuild billing/shipping + review as a responsive grid. */
.ph-commerce-body .woocommerce form.checkout {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
	.ph-commerce-body .woocommerce form.checkout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		align-items: start;
	}
}
.ph-commerce-body .woocommerce .col2-set {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: minmax(0, 1fr);
	float: none;
	width: 100%;
}
.ph-commerce-body .woocommerce .col2-set .col-1,
.ph-commerce-body .woocommerce .col2-set .col-2 {
	float: none;
	width: 100%;
}
@media (min-width: 48rem) {
	.ph-commerce-body .woocommerce .col2-set {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ph-commerce-body .woocommerce form.checkout::before,
.ph-commerce-body .woocommerce form.checkout::after,
.ph-commerce-body .woocommerce .col2-set::before,
.ph-commerce-body .woocommerce .col2-set::after {
	content: none;
}
/* Woo notices must stay visible above the cards (not squeezed by grid). */
.ph-commerce-body .woocommerce .woocommerce-notices-wrapper,
.ph-commerce-body .woocommerce .woocommerce-NoticeGroup {
	grid-column: 1 / -1;
}
.ph-commerce-body .woocommerce .woocommerce-error,
.ph-commerce-body .woocommerce .woocommerce-message,
.ph-commerce-body .woocommerce .woocommerce-info {
	list-style: none;
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--color-line);
	background: var(--color-surface);
}
/* Coupon row + payment box internals never overflow the card. */
.ph-commerce-body .woocommerce .checkout_coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.ph-commerce-body .woocommerce #payment ul.payment_methods,
.ph-commerce-body .woocommerce #payment ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0;
	display: grid;
	gap: var(--space-2);
}
.ph-commerce-body .woocommerce #payment div.payment_box {
	margin: 0;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--color-surface-tint);
}

/* Narrow screens: let the sidebar cards stack naturally. */
@media (max-width: 48rem) {
	main[data-page="cart"] > :where(.alignwide, .alignfull),
	main[data-page="checkout"] > :where(.alignwide, .alignfull) {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.nphi-checkout-plan {
		padding: var(--space-4);
	}

	body.woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
		position: static;
	}

	.woocommerce-order .woocommerce-thankyou-order-details,
	.woocommerce-order ul.woocommerce-thankyou-order-details,
	.woocommerce-order ul.order_details.woocommerce-thankyou-order-details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.woocommerce-order .woocommerce-thankyou-order-details li {
		border-left: 0;
		border-top: var(--border-width) solid var(--color-line);
	}
	.woocommerce-order .woocommerce-thankyou-order-details li:nth-child(-n+2) {
		border-top: 0;
	}
	.woocommerce-order .woocommerce-thankyou-order-details li:nth-child(even) {
		border-left: var(--border-width) solid var(--color-line);
	}

	.woocommerce-bacs-bank-details ul.wc-bacs-bank-details,
	.woocommerce-bacs-bank-details ul.bacs_details,
	.woocommerce-order ul.wc-bacs-bank-details {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.woocommerce-bacs-bank-details ul li {
		border-left: 0;
		border-top: var(--border-width) solid var(--color-line);
		padding-left: 0;
	}
	.woocommerce-bacs-bank-details ul li:nth-child(-n+2) {
		border-top: 0;
	}

	.woocommerce-columns--addresses,
	.woocommerce .woocommerce-columns--addresses {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* PH: digital services need no order notes. The
   `woocommerce_enable_order_notes_field` filter (inc/commerce/fields.php)
   removes the field server-side; this hides any residual markup
   (Blocks additional-information section, cached classic output). */
.woocommerce-additional-fields,
#order_comments_field,
.wc-block-checkout__additional-information,
[data-block-name="woocommerce/checkout-additional-information-block"],
.wc-block-components-checkout-step--additional-information {
	display: none !important;
}

/* PH: per-item remove button in checkout order summary */
.nphi-remove-item{margin-top:6px;padding:0;border:0;background:none;color:#b33951;font-size:13px;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.nphi-remove-item:hover{color:#8c2b3e}
.nphi-remove-item:disabled{opacity:.6;cursor:default}

