/**
 * PublicHealth commerce flow skin: digital services, not physical products.
 *
 * Covers Woo single product, cart, checkout, thank-you + LearnPress course
 * buttons + membership pricing. Uses NPHI tokens (teal #1a6b6b / deep
 * #0a2e2e, ember #e8652a, Inter + Plus Jakarta Sans) so every flow page
 * matches the site pattern. No markup or payment logic here.
 */

/* ---- Service products: hide physical-product imagery ---- */
.woocommerce div.product div.images,
.woocommerce div.product div.woocommerce-product-gallery,
.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product a .woocommerce-loop-product__link img,
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image,
.woocommerce-cart-form__cart-item .product-thumbnail,
.woocommerce-checkout-review-order-table .product-thumbnail,
.wc-block-order-confirmation-summary-list-item__image {
	display: none !important;
}

/* Single product → service package card. */
.single-product .site-main,
.single-product main {
	font-family: var(--font-sans);
}
.woocommerce div.product {
	max-width: var(--container-content);
	margin: 0 auto;
	padding: var(--space-6) var(--gutter) var(--space-8);
}
.woocommerce div.product .summary {
	float: none;
	width: 100%;
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	box-shadow: var(--shadow-md);
	position: relative;
	overflow: hidden;
}
.woocommerce div.product .summary::before {
	content: "";
	display: block;
	height: 6px;
	margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-5);
	background: linear-gradient(135deg, #0d3d3d 0%, #1a6b6b 60%, #2ba3a3 100%);
}
.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	font-size: var(--text-3xl);
	color: var(--color-ink);
	margin-bottom: var(--space-2);
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-display);
	font-size: var(--text-3xl);
	font-weight: 800;
	color: var(--color-primary-deep);
}
.woocommerce div.product p.price small,
.woocommerce-product-details__short-description {
	color: var(--color-muted);
	font-size: var(--text-sm);
}
.woocommerce div.product .sku_wrapper,
.woocommerce div.product .posted_in,
.woocommerce div.product .tagged_as {
	font-size: var(--text-sm);
	color: var(--color-muted);
}
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: stretch;
	margin-top: var(--space-5);
}
.woocommerce div.product form.cart .quantity {
	display: none !important;
}
.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product button[type="submit"].single_add_to_cart_button {
	flex: 1 1 100%;
	background: var(--color-primary);
	color: var(--color-on-primary);
	border: 0;
	border-radius: var(--radius-full);
	padding: var(--space-3) var(--space-6);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: var(--text-base);
	cursor: pointer;
}
.woocommerce div.product .single_add_to_cart_button:hover {
	background: var(--color-primary-deep);
}
.woocommerce div.product .ph-service-note {
	flex: 1 1 100%;
	font-size: var(--text-sm);
	color: var(--color-muted);
	text-align: center;
	margin: 0;
}

/* ---- Cart → redirected, but style any flash of it as package summary ---- */
body.woocommerce-cart .wc-block-cart-item__product a {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--color-ink);
	text-decoration: none;
}
body.woocommerce-cart .wc-block-cart-item__product a:hover {
	color: var(--color-primary);
}

/* ---- Checkout: service steps ---- */
body.woocommerce-checkout .wc-block-checkout__form {
	font-family: var(--font-sans);
}
.ph-checkout-steps {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-5);
	padding: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--color-muted);
}
.ph-checkout-steps li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.ph-checkout-steps li + li::before {
	content: "→";
	color: var(--color-faint);
}
.ph-checkout-steps .is-now {
	color: var(--color-primary-deep);
}

/* ---- Thank-you success hero ---- */
.ph-thankyou {
	max-width: var(--container-content);
	margin: 0 auto;
	padding: var(--space-6) var(--gutter) var(--space-8);
	font-family: var(--font-sans);
}
.ph-thankyou__hero {
	background: linear-gradient(135deg, #0d3d3d 0%, #1a6b6b 60%, #2ba3a3 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: var(--space-7) var(--space-6);
	text-align: center;
	box-shadow: var(--shadow-md);
}
.ph-thankyou__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--radius-full);
	background: #fff;
	color: var(--color-primary);
	font-size: 1.75rem;
	font-weight: 800;
	margin-bottom: var(--space-3);
}
.ph-thankyou__eyebrow {
	font-size: var(--text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d4f0f0;
	margin-bottom: var(--space-2);
}
.ph-thankyou__hero h2 {
	font-family: var(--font-display);
	color: #fff;
	font-size: var(--text-3xl);
	margin-bottom: var(--space-2);
}
.ph-thankyou__order,
.ph-thankyou__sub {
	color: #eef8f8;
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}
.ph-thankyou__actions {
	background: var(--color-surface);
	border: var(--border-width) solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	margin-top: var(--space-5);
	text-align: center;
}
.ph-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-full);
	font-weight: 700;
	text-decoration: none;
	border: var(--border-width) solid transparent;
	margin: var(--space-1);
}
.ph-btn--primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}
.ph-btn--primary:hover {
	background: var(--color-primary-deep);
	color: #fff;
}
.ph-btn--secondary {
	background: var(--color-surface);
	border-color: var(--color-primary);
	color: var(--color-primary);
}
.ph-btn--secondary:hover {
	background: var(--color-primary-tint);
	color: var(--color-primary-deep);
}
.ph-thankyou__count {
	font-size: var(--text-sm);
	color: var(--color-muted);
	margin-top: var(--space-3);
	margin-bottom: 0;
}

/* ---- LearnPress buy buttons match site ---- */
.ph-buy-now,
.lp-btn-add-item-to-cart.ph-buy-now,
.lp-btn-woo-view-cart.ph-buy-now {
	width: 100%;
	background: #1a6b6b;
	border-color: #1a6b6b;
	color: #fff;
	border-radius: 0.5rem;
	font-family: var(--font-sans);
	font-weight: 700;
}
.ph-buy-now:hover {
	background: #115252;
}
.ph-checkout-link {
	display: block;
	width: 100%;
	text-decoration: none;
}

/* ---- Membership + plan cards share the same service language ---- */
.nphi-mplan,
.nphi-plan,
.nphi-checkout-plan {
	font-family: var(--font-sans);
}
.nphi-mplan__price,
.nphi-plan__price,
.nphi-checkout-plan__price {
	font-family: var(--font-display);
	color: var(--color-primary-deep);
}
.nphi-mplan .nphi-btn,
.nphi-plan .nphi-btn {
	border-radius: var(--radius-full);
}

/* ---- Flow pages: consistent measure + headings ---- */
body.woocommerce-account main,
body.woocommerce-checkout main,
body.woocommerce-cart main {
	font-family: var(--font-sans);
}
body.woocommerce-account h1,
body.woocommerce-checkout h1,
body.woocommerce-cart h1,
.single-product h1.product_title {
	font-family: var(--font-display);
	letter-spacing: -0.02em;
}

@media (max-width: 48rem) {
	.woocommerce div.product {
		padding: var(--space-4) var(--gutter) var(--space-6);
	}
	.ph-thankyou__hero {
		padding: var(--space-5) var(--space-4);
	}
}