/* =============================================================================
 * zphcstore-checkout — CART + CHECKOUT
 *
 * CONSUMES the theme's design tokens (`assets/css/zphc-tokens.css`, enqueued as
 * the `zphc-tokens` dependency of this sheet). It never re-declares them: two
 * agents forked those tokens already and it was reverted both times.
 *
 * It layers on top of WooCommerce's own `woocommerce.css` /
 * `woocommerce-layout.css` / `woocommerce-smallscreen.css` rather than replacing
 * them, because the markup underneath is WooCommerce's own — this source IS a
 * WooCommerce store, so its cart and checkout are Woo's cart and checkout with
 * Flatsome styling on top. Three of Woo's rules have to be beaten rather than
 * added to, and each is called out where it happens.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. The 3-step progress breadcrumb + the deliverability notice
 *
 * The source renders steps 1 and 3 and both dividers with `hide-for-small`, so on
 * a phone ONLY the current step shows. Reproduced exactly — and it is also what
 * keeps this strip from wrapping to three lines at 390px.
 * -------------------------------------------------------------------------- */

.zphck-page-title {
	margin: 0 auto var(--zphc-sp-5);
	padding: var(--zphc-sp-5) var(--zphc-container-pad) 0;
	max-width: var(--zphc-container);
	text-align: center;
}

.zphck-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--zphc-sp-3);
	font-family: var(--zphc-font-head);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.zphck-bc-step {
	color: var(--zphc-ink-muted);
	text-decoration: none;
}

a.zphck-bc-step:hover,
a.zphck-bc-step:focus-visible {
	color: var(--zphc-primary);
}

.zphck-bc-step.current {
	color: var(--zphc-primary);
}

.zphck-bc-div {
	color: var(--zphc-border-strong);
	font-size: 20px;
	line-height: 1;
}

.zphck-mail-notice {
	max-width: 600px;
	margin: 0 auto var(--zphc-sp-5);
	padding: 0 20px;
	text-align: center;
}

.zphck-mail-notice p {
	margin: 0;
	color: #f50000;                 /* the source's own notice colour */
	font-weight: 500;
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* -----------------------------------------------------------------------------
 * 2. Shared shell
 * -------------------------------------------------------------------------- */

.woocommerce-cart .zphc-woo,
.woocommerce-checkout .zphc-woo {
	padding-bottom: var(--zphc-sp-7);
	color: var(--zphc-ink);
	font-family: var(--zphc-font-body);
}

.woocommerce-cart .zphc-woo > .woocommerce,
.woocommerce-checkout .zphc-woo > .woocommerce {
	max-width: var(--zphc-container);
	width: 100%;
	margin: 0 auto;
	padding: 0 var(--zphc-container-pad);
	box-sizing: border-box;
}

.woocommerce-cart .zphc-woo h2,
.woocommerce-cart .zphc-woo h3,
.woocommerce-checkout .zphc-woo h2,
.woocommerce-checkout .zphc-woo h3 {
	font-family: var(--zphc-font-head);
	color: var(--zphc-heading-deep);
}

.woocommerce-cart .zphc-woo h3,
.woocommerce-checkout .zphc-woo h3 {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 var(--zphc-sp-4);
}

/* Woo notices, in the brand palette rather than its own purple/green. */
.woocommerce-cart .zphc-woo .woocommerce-message,
.woocommerce-cart .zphc-woo .woocommerce-info,
.woocommerce-checkout .zphc-woo .woocommerce-message,
.woocommerce-checkout .zphc-woo .woocommerce-info {
	background: var(--zphc-tint);
	border-top-color: var(--zphc-primary);
	color: var(--zphc-ink);
	border-radius: var(--zphc-r);
}

.woocommerce-cart .zphc-woo .woocommerce-error,
.woocommerce-checkout .zphc-woo .woocommerce-error {
	background: #fff5f5;
	border-top-color: var(--zphc-alert);
	color: var(--zphc-ink);
	border-radius: var(--zphc-r);
}

.woocommerce-cart .zphc-woo .woocommerce-message::before,
.woocommerce-cart .zphc-woo .woocommerce-info::before,
.woocommerce-checkout .zphc-woo .woocommerce-message::before,
.woocommerce-checkout .zphc-woo .woocommerce-info::before {
	color: var(--zphc-primary);
}

/* -----------------------------------------------------------------------------
 * 3. Form controls — one declaration for both screens
 * -------------------------------------------------------------------------- */

.zphc-woo .input-text,
.zphc-woo input[type="text"],
.zphc-woo input[type="email"],
.zphc-woo input[type="tel"],
.zphc-woo input[type="password"],
.zphc-woo input[type="number"],
.zphc-woo textarea,
.zphc-woo select,
.zphc-woo .select2-container .select2-selection--single {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--zphc-border-strong);
	border-radius: var(--zphc-r);
	background: var(--zphc-white);
	color: var(--zphc-ink);
	font-family: var(--zphc-font-body);
	font-size: 15px;
	line-height: 1.4;
	box-shadow: none;
	transition: border-color .2s var(--zphc-ease), box-shadow .2s var(--zphc-ease);
}

.zphc-woo .input-text:focus,
.zphc-woo select:focus,
.zphc-woo textarea:focus {
	border-color: var(--zphc-primary);
	box-shadow: 0 0 0 3px rgba(0, 114, 188, .14);
	outline: none;
}

.zphc-woo textarea {
	min-height: 86px;
	resize: vertical;
}

.zphc-woo .form-row {
	margin: 0 0 var(--zphc-sp-4);
	padding: 0;
}

.zphc-woo .form-row label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--zphc-ink-strong);
}

.zphc-woo .form-row label .required,
.zphc-woo abbr.required {
	color: var(--zphc-alert);
	border: 0;
	text-decoration: none;
}

.zphc-woo .form-row.woocommerce-invalid .input-text,
.zphc-woo .form-row.woocommerce-invalid select {
	border-color: var(--zphc-alert);
}

/* Woo's own buttons, in the theme's button language. `.zphc-btn` cannot be added
   to markup WooCommerce emits, so the token values are mapped onto `.button`. */
.zphc-woo .button,
.zphc-woo button.button,
.zphc-woo input.button,
.zphc-woo #place_order {
	display: inline-block;
	box-sizing: border-box;
	font-family: var(--zphc-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: var(--zphc-ls-btn);
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	padding: 12px 22px;
	border: 2px solid var(--zphc-primary);
	border-radius: var(--zphc-r);
	background: var(--zphc-primary);
	color: var(--zphc-white);
	cursor: pointer;
	transition: background-color .25s var(--zphc-ease), border-color .25s var(--zphc-ease);
}

.zphc-woo .button:hover,
.zphc-woo button.button:hover,
.zphc-woo input.button:hover,
.zphc-woo #place_order:hover {
	background: var(--zphc-secondary);
	border-color: var(--zphc-secondary);
	color: var(--zphc-white);
}

.zphc-woo .button:disabled,
.zphc-woo .button.disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
 * 4. CART PAGE
 *
 * Markup is WooCommerce's own `cart/cart.php` — Product / Price / Quantity /
 * Subtotal, the `×` remove link, "Update cart", and the Cart totals panel. That
 * is also exactly what the source renders, so this is styling only: no template
 * fork, nothing in the data flow touched.
 * -------------------------------------------------------------------------- */

.woocommerce-cart .zphc-woo .woocommerce-cart-form {
	margin-bottom: var(--zphc-sp-6);
}

.woocommerce-cart .zphc-woo table.shop_table {
	width: 100%;
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	border-collapse: separate;
	border-spacing: 0;
	background: var(--zphc-white);
	box-shadow: var(--zphc-sh-card);
}

.woocommerce-cart .zphc-woo table.shop_table thead th {
	background: var(--zphc-tint);
	border-bottom: 1px solid var(--zphc-border);
	padding: 14px 16px;
	font-family: var(--zphc-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
	text-align: left;
}

.woocommerce-cart .zphc-woo table.shop_table td {
	padding: 16px;
	border-top: 1px solid var(--zphc-hairline);
	vertical-align: middle;
	font-size: 15px;
}

.woocommerce-cart .zphc-woo td.product-thumbnail img {
	width: 72px;
	height: auto;
	border-radius: var(--zphc-r-img);
}

.woocommerce-cart .zphc-woo td.product-name a {
	color: var(--zphc-link);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart .zphc-woo td.product-name a:hover {
	color: var(--zphc-link-hover);
}

.woocommerce-cart .zphc-woo td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--zphc-border);
	color: var(--zphc-ink) !important;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
}

.woocommerce-cart .zphc-woo td.product-remove a.remove:hover {
	background: var(--zphc-alert);
	color: var(--zphc-white) !important;
}

.woocommerce-cart .zphc-woo .quantity input.qty {
	width: 72px;
	min-width: 72px;
	text-align: center;
}

.woocommerce-cart .zphc-woo td.actions {
	background: var(--zphc-tint);
	border-top: 1px solid var(--zphc-border);
}

.woocommerce-cart .zphc-woo td.actions .zphck-continue {
	display: inline-block;
	margin-right: var(--zphc-sp-3);
	color: var(--zphc-link);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-cart .zphc-woo td.actions .zphck-continue:hover {
	color: var(--zphc-link-hover);
}

.woocommerce-cart .zphc-woo .cart-collaterals {
	display: flex;
	justify-content: flex-end;
}

.woocommerce-cart .zphc-woo .cart_totals {
	width: 100%;
	max-width: 420px;
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	padding: var(--zphc-sp-5);
	box-sizing: border-box;
}

.woocommerce-cart .zphc-woo .cart_totals h2 {
	font-size: 20px;
	margin: 0 0 var(--zphc-sp-4);
}

.woocommerce-cart .zphc-woo .cart_totals table.shop_table {
	border: 0;
	box-shadow: none;
	background: transparent;
}

.woocommerce-cart .zphc-woo .cart_totals table.shop_table th,
.woocommerce-cart .zphc-woo .cart_totals table.shop_table td {
	padding: 11px 0;
	border-top: 0;
	border-bottom: 1px solid var(--zphc-hairline);
	font-size: 15px;
	text-align: left;
}

.woocommerce-cart .zphc-woo .cart_totals table.shop_table th {
	font-weight: 600;
	color: var(--zphc-ink-strong);
	width: 44%;
}

.woocommerce-cart .zphc-woo .cart_totals .order-total th,
.woocommerce-cart .zphc-woo .cart_totals .order-total td {
	border-bottom: 0;
	padding-top: 14px;
	font-size: 18px;
	color: var(--zphc-heading-deep);
}

.woocommerce-cart .zphc-woo .wc-proceed-to-checkout {
	padding: var(--zphc-sp-4) 0 0;
}

.woocommerce-cart .zphc-woo .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	font-size: 14px;
	padding: 14px 18px;
}

.woocommerce-cart .zphc-woo .cart-empty,
.woocommerce-checkout .zphc-woo .cart-empty {
	text-align: center;
	font-size: 18px;
	color: var(--zphc-ink);
}

.woocommerce-cart .zphc-woo .return-to-shop,
.woocommerce-checkout .zphc-woo .return-to-shop {
	text-align: center;
	margin-top: var(--zphc-sp-5);
}

/* -----------------------------------------------------------------------------
 * 5. CHECKOUT — the source's two-column shape, in CSS only
 *
 * Source (Flatsome) renders `.row > .large-7 .col` holding #customer_details and
 * `.large-5 .col > .col-inner.has-border` holding "Your order" + #order_review.
 * WooCommerce's own `form-checkout.php` emits the same four blocks as siblings, so
 * a grid reproduces the layout without forking the template — which keeps Woo's
 * address-locale engine, the country/state dependency, the optional separate
 * shipping address, "Create an account?" and the login toggle all intact.
 *
 * ⛔ Woo's `woocommerce-layout.css` floats `.col2-set .col-1 { float:left;
 * width:48% }` (and `.col-2` right). Those floats put BILLING and SHIPPING
 * side-by-side, which is not what the source does and breaks the grid cell. They
 * are neutralised below at equal-or-greater specificity.
 * -------------------------------------------------------------------------- */

@media (min-width: 850px) {
	.woocommerce-checkout .zphc-woo form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto 1fr;
		column-gap: var(--zphc-sp-6);
		align-items: start;
	}

	.woocommerce-checkout .zphc-woo form.checkout #customer_details {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-width: 0;
	}

	.woocommerce-checkout .zphc-woo form.checkout #order_review_heading {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
	}

	.woocommerce-checkout .zphc-woo form.checkout #order_review {
		grid-column: 2;
		grid-row: 2;
		min-width: 0;
	}
}

/* Billing above shipping, as the source has them — beats woocommerce-layout.css. */
.woocommerce-checkout .zphc-woo form.checkout .col2-set .col-1,
.woocommerce-checkout .zphc-woo form.checkout .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: none;
	padding: 0;
}

.woocommerce-checkout .zphc-woo form.checkout .col2-set::after {
	content: "";
	display: table;
	clear: both;
}

.woocommerce-checkout .zphc-woo .woocommerce-billing-fields,
.woocommerce-checkout .zphc-woo .woocommerce-shipping-fields,
.woocommerce-checkout .zphc-woo .woocommerce-additional-fields {
	margin-bottom: var(--zphc-sp-5);
}

.woocommerce-checkout .zphc-woo .woocommerce-shipping-fields h3 label,
.woocommerce-checkout .zphc-woo .woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--zphc-ink-strong);
	cursor: pointer;
}

.woocommerce-checkout .zphc-woo .woocommerce-form__input-checkbox {
	width: auto;
	min-height: 0;
	margin: 3px 0 0;
	flex: 0 0 auto;
}

/* --- the returning-customer login toggle + form (the source's own copy) ---- */
.woocommerce-checkout .zphc-woo .woocommerce-form-login-toggle .woocommerce-info {
	text-align: center;
}

.woocommerce-checkout .zphc-woo form.woocommerce-form-login {
	background: var(--zphc-tint);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	padding: var(--zphc-sp-5);
	margin-bottom: var(--zphc-sp-5);
}

/* --- the order-review panel ("col-inner has-border" on the source) -------- */
.woocommerce-checkout .zphc-woo #order_review_heading {
	padding: 0 0 var(--zphc-sp-3);
}

.woocommerce-checkout .zphc-woo #order_review {
	background: var(--zphc-white);
	border: 1px solid var(--zphc-border);
	border-radius: var(--zphc-r);
	box-shadow: var(--zphc-sh-card);
	padding: var(--zphc-sp-5);
	box-sizing: border-box;
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	margin-bottom: var(--zphc-sp-4);
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table thead th {
	padding: 0 0 10px;
	border-bottom: 1px solid var(--zphc-border-strong);
	font-family: var(--zphc-font-head);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
	text-align: left;
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table thead th.product-total,
.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table td.product-total {
	text-align: right;
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table td,
.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table th {
	padding: 11px 0;
	border-bottom: 1px solid var(--zphc-hairline);
	font-size: 14.5px;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table tfoot th {
	font-weight: 600;
	color: var(--zphc-ink-strong);
	width: 42%;
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout .zphc-woo table.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: 0;
	padding-top: 14px;
	font-size: 18px;
	font-weight: 700;
	color: var(--zphc-heading-deep);
}

.woocommerce-checkout .zphc-woo .product-quantity {
	color: var(--zphc-ink-muted);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
 * 6. The shipping row
 *
 * ONE flat $31.00 option on this store, so WooCommerce renders a hidden input +
 * label (its own behaviour with a single rate, and byte-for-byte what the source
 * renders). Add rows in the plugin admin and the same markup becomes radios with
 * no change here.
 * -------------------------------------------------------------------------- */

.zphc-woo ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zphc-woo ul#shipping_method li {
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.zphc-woo ul#shipping_method li:last-child {
	margin-bottom: 0;
}

.zphc-woo ul#shipping_method input.shipping_method {
	width: auto;
	min-height: 0;
	margin: 4px 0 0;
	flex: 0 0 auto;
}

.zphc-woo ul#shipping_method label {
	display: block;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--zphc-ink-strong);
	cursor: pointer;
}

.zphc-woo .zphck-ship-desc {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--zphc-ink-muted);
}

/* Shown only above the free-shipping threshold, which is DISABLED on this store
   (the source has no free-shipping offer). Kept because the threshold is an admin
   field: set it and the waived rows render FREE with the old price struck out. */
.zphc-woo .zphck-ship-free {
	display: inline-block;
	margin-left: 6px;
	color: var(--zphc-success);
	font-weight: 700;
	letter-spacing: .04em;
}

.zphc-woo del.zphck-ship-was,
.zphc-woo del.zphck-ship-was * {
	margin-left: 6px;
	color: var(--zphc-ink-muted);
	font-weight: 400;
	text-decoration: line-through;
}

.zphc-woo .woocommerce-shipping-destination {
	margin: 8px 0 0;
	font-size: 12.5px;
	color: var(--zphc-ink-muted);
}

/* -----------------------------------------------------------------------------
 * 7. Payment methods
 * -------------------------------------------------------------------------- */

.zphc-woo ul.wc_payment_methods {
	list-style: none;
	margin: 0 0 var(--zphc-sp-4);
	padding: 0;
	border: 0;
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method {
	margin: 0 0 8px;
	padding: 0;
	border: 1px solid var(--zphc-border-strong);
	border-radius: var(--zphc-r);
	background: var(--zphc-white);
	transition: border-color .2s var(--zphc-ease), background-color .2s var(--zphc-ease);
}

/* Selected state is expressed TWICE on purpose: `:has()` for browsers that have
   it, and a `.zphck-selected` class the plugin's JS maintains for those that do
   not. A customer who cannot see which payment option is selected does not
   complete the order, so this is not a place to depend on one new selector. */
.zphc-woo ul.wc_payment_methods li.wc_payment_method:has(input:checked),
.zphc-woo ul.wc_payment_methods li.wc_payment_method.zphck-selected {
	border-color: var(--zphc-primary);
	background: var(--zphc-tint);
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	min-height: 0;
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method > label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 13px 15px;
	font-family: var(--zphc-font-body);
	font-size: 15px;
	font-weight: 700;
	color: var(--zphc-ink-strong);
	cursor: pointer;
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method > label::before {
	content: "";
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 2px solid var(--zphc-border-strong);
	border-radius: 50%;
	background: var(--zphc-white);
	box-sizing: border-box;
}

/* --- the method glyph, after the title inside the label (the source's own
       position for its per-gateway SVG). Monochrome and tinted by the label, so
       it is grey while the option is unselected and brand blue once it is
       chosen — an affordance, never a fake official-integration badge. -------- */
.zphc-woo ul.wc_payment_methods li.wc_payment_method .zphck-pm-icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-left: auto;          /* pushed to the trailing edge of the row */
	fill: currentColor;
	color: var(--zphc-ink-muted);
	transition: color .2s var(--zphc-ease);
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method:has(input:checked) .zphck-pm-icon,
.zphc-woo ul.wc_payment_methods li.wc_payment_method.zphck-selected .zphck-pm-icon {
	color: var(--zphc-primary);
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method:has(input:checked) > label,
.zphc-woo ul.wc_payment_methods li.wc_payment_method.zphck-selected > label {
	color: var(--zphc-primary);
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method:has(input:checked) > label::before,
.zphc-woo ul.wc_payment_methods li.wc_payment_method.zphck-selected > label::before {
	border-color: var(--zphc-primary);
	box-shadow: inset 0 0 0 3px var(--zphc-white);
	background: var(--zphc-primary);
}

.zphc-woo ul.wc_payment_methods li.wc_payment_method > label:focus-within::before,
.zphc-woo ul.wc_payment_methods li.wc_payment_method > input[type="radio"]:focus-visible + label::before {
	box-shadow: 0 0 0 3px rgba(0, 114, 188, .3);
}

.zphc-woo .payment_box {
	margin: 0;
	padding: 0 15px 15px;
	background: transparent;
	color: var(--zphc-ink);
	font-size: 14px;
	line-height: 1.6;
}

.zphc-woo .payment_box::before {
	display: none;          /* Woo draws a speech-bubble arrow we do not want */
}

.zphc-woo .zphck-pm-desc {
	margin: 0 0 10px;
}

/* --- the coin card: NETWORK + live-rate amount + wrong-network warning ---- */
.zphc-woo .zphck-pm-box {
	border: 1px solid rgba(0, 114, 188, .22);
	border-radius: var(--zphc-r);
	background: var(--zphc-white);
	padding: 12px 14px;
}

.zphc-woo .zphck-pm-rows {
	display: grid;
	gap: 6px;
	margin-bottom: 10px;
}

.zphc-woo .zphck-pm-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	justify-content: space-between;
	align-items: baseline;
}

.zphc-woo .zphck-pm-k {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--zphc-ink-muted);
}

.zphc-woo .zphck-pm-v {
	font-size: 14.5px;
	color: var(--zphc-heading-deep);
	word-break: break-word;
}

.zphc-woo .zphck-pm-usd {
	color: var(--zphc-ink-muted);
	font-weight: 400;
}

.zphc-woo .zphck-pm-warn {
	margin: 0 0 8px;
	padding: 9px 11px;
	border-left: 4px solid var(--zphc-alert);
	border-radius: var(--zphc-r-sm);
	background: #fff5f5;
	color: var(--zphc-alert);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
}

.zphc-woo .zphck-pm-note {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--zphc-ink-muted);
}

/* -----------------------------------------------------------------------------
 * 8. The required consent checkbox (red, verbatim from the source)
 * -------------------------------------------------------------------------- */

.zphck-consent {
	margin: 15px 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--zphc-border);
}

.zphck-consent > label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	cursor: pointer;
	font-weight: 400;
}

.zphck-consent__input {
	width: auto;
	min-height: 0;
	margin: 3px 0 0;
	flex: 0 0 auto;
	accent-color: var(--zphc-alert);
}

.zphck-consent__text {
	display: block;
	color: #f50000;
	font-weight: 500;
	font-size: 13.5px;
	line-height: 1.55;
}

.zphck-consent__text .required {
	margin-left: 2px;
	color: #f50000;
	text-decoration: none;
	border: 0;
}

.zphc-woo .form-row.place-order {
	margin: 0;
	padding: 0;
}

.zphc-woo #place_order {
	display: block;
	width: 100%;
	margin-top: var(--zphc-sp-4);
	font-size: 14px;
	padding: 15px 18px;
}

.zphc-woo .woocommerce-terms-and-conditions-wrapper:empty {
	display: none;          /* the source's wrapper is empty too (no T&C page set) */
}

/* -----------------------------------------------------------------------------
 * 9. Responsive. ⚠️ VERIFIED AT 390 FIRST — every defect this sheet fixes is
 * invisible at desktop width.
 * -------------------------------------------------------------------------- */

@media (max-width: 849px) {
	.woocommerce-checkout .zphc-woo #order_review_heading {
		margin-top: var(--zphc-sp-5);
	}
}

@media (max-width: 549px) {
	/* The source's own `hide-for-small`: only the CURRENT step shows on a phone,
	   which is what stops the strip wrapping to three lines. */
	.zphck-bc-hide-small {
		display: none;
	}

	.zphck-breadcrumbs {
		font-size: 15px;
	}

	.zphck-page-title {
		padding-top: var(--zphc-sp-4);
		margin-bottom: var(--zphc-sp-4);
	}

	.zphck-mail-notice p {
		font-size: 15px;
	}

	.woocommerce-cart .zphc-woo .cart_totals,
	.woocommerce-cart .zphc-woo .cart-collaterals {
		max-width: none;
	}

	/* Woo's `woocommerce-smallscreen.css` turns the cart table into stacked rows
	   with a right-aligned `::before` label. Keep that behaviour — it is the right
	   one on a phone — but give it the brand's spacing and hairlines. */
	.woocommerce-cart .zphc-woo table.shop_table_responsive tr td {
		padding: 11px 14px;
		font-size: 14.5px;
		text-align: right;
	}

	.woocommerce-cart .zphc-woo table.shop_table_responsive tr td::before {
		font-weight: 700;
		font-size: 11px;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--zphc-ink-muted);
	}

	.woocommerce-cart .zphc-woo table.shop_table_responsive tr td.product-remove {
		text-align: left;
	}

	.woocommerce-cart .zphc-woo .quantity input.qty {
		width: 64px;
		min-width: 64px;
	}

	.woocommerce-checkout .zphc-woo #order_review {
		padding: var(--zphc-sp-4);
	}

	.zphc-woo .zphck-pm-row {
		flex-direction: column;
		gap: 2px;
	}
}