/**
 * Checkout page styles — Stripe Checkout-style split layout.
 * Loaded only on the checkout page (see functions.php).
 * Left: order summary. Right: customer details + payment card.
 */

/* Page chrome */

.woocommerce-checkout .entry-header,
.woocommerce-checkout h1.entry-title {
	display: none;
}

/* Stripe-style split: both halves white, hairline divider down the middle */
body.pc-store-flow.woocommerce-checkout {
	background: #fff;
}

/* Split layout */

.pc-checkout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	align-items: start;
	min-height: calc(100vh - 64px - 101px); /* viewport minus nav and footer */
}

/* Full-height hairline divider at the viewport center, like Stripe Checkout */
.pc-checkout::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: #e5e7eb;
}

/* Left-facing shadow of the divider. A real box-shadow off a 1px line is
   nearly invisible, so it's drawn as a gradient strip instead. */
.pc-checkout::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 50%;
	width: 28px;
	background: linear-gradient(to left, rgba(23, 24, 28, 0.06), rgba(23, 24, 28, 0));
	pointer-events: none;
}

/* --- Left: order summary ------------------------------------------------ */

/* Both halves are mirrored: 480px of content, 56px off the divider, 24px outer */
.pc-checkout__summary {
	position: sticky;
	/* Exactly the fixed-nav height: a larger offset would push the column
	   down at rest and break the alignment with the right column */
	top: 64px;
	justify-self: end;
	width: 100%;
	max-width: 560px;
	padding: 40px 56px 64px 24px;
}

body.admin-bar .pc-checkout__summary {
	top: 96px; /* admin bar (32) + nav (64) */
}

/* WooCommerce/Astra float #order_review (and its heading) right with borders
   in the classic layout — flatten both into the left column */
.pc-checkout #order_review,
.pc-checkout #order_review_heading {
	width: 100% !important;
	float: none !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

.pc-checkout #order_review {
	margin: 0 !important;
}

.pc-checkout #order_review_heading {
	margin: 0 0 16px !important;
}

/* Astra renders review-table cells as flex — restore table semantics */
.pc-checkout table.shop_table tr {
	display: table-row !important;
}

.pc-checkout table.shop_table th,
.pc-checkout table.shop_table td {
	display: table-cell !important;
}

.pc-checkout table.shop_table {
	width: 100% !important;
	margin: 0 !important;
	border: none !important;
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	background: transparent;
}

.pc-checkout table.shop_table th,
.pc-checkout table.shop_table td {
	padding: 10px 0 !important;
	border: none !important;
	background: transparent;
	font-size: 15px;
	font-weight: 400;
	color: #4b5563;
	text-align: left;
	vertical-align: middle;
}

.pc-checkout table.shop_table td {
	text-align: right;
}

.pc-checkout table.shop_table thead {
	display: none; /* "Product / Subtotal" header row is noise */
}

/* Product line items */
.pc-checkout table.shop_table tr.cart_item td.product-name {
	text-align: left;
	font-weight: 600;
	color: #17181c;
	font-size: 16px;
}

.pc-review-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pc-review-item__thumb {
	flex: 0 0 auto;
}

.pc-review-item__thumb img {
	display: block;
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #e9ebee;
}

.pc-review-item__info {
	flex: 1;
	min-width: 0;
}

/* Remove-item link injected into the product name by pokercoaching_common:
   rendered as a small × badge on the thumbnail corner, out of the way of the
   name and price (the "Remove" text stays in the DOM for screen readers,
   hidden visually) */
.pc-review-item {
	position: relative;
}

.pc-checkout .pc_checkout_cart {
	display: block;
}

.pc-checkout .pc_checkout_cart a.remove {
	position: absolute;
	top: -6px;
	left: 40px; /* top-right corner of the 48px thumbnail */
	display: block;
	width: 18px !important;
	height: 18px !important;
	padding: 0 !important;
	border: 1px solid #d1d5db !important;
	border-radius: 50% !important;
	outline: none;
	box-shadow: none !important;
	background: #fff !important;
	color: #9ca3af !important;
	font-size: 0 !important; /* hides the accessible "Remove" text visually */
	text-decoration: none;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.pc-checkout .pc_checkout_cart a.remove:hover {
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
}

/* × glyph via mask (an inline SVG would be stripped by wp_kses_post) */
.pc-checkout .pc_checkout_cart a.remove::before {
	content: '' !important;
	display: block !important;
	width: 10px;
	height: 10px;
	margin: 3px;
	border: none !important;
	border-radius: 0 !important;
	background: currentColor !important;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'><path d='M18 6 6 18'/><path d='m6 6 12 12'/></svg>") center / contain no-repeat;
}

.pc-checkout .pc_checkout_cart a.remove::after {
	display: none !important;
	content: none !important;
}

.pc-checkout table.shop_table tr.cart_item td.product-name .product-quantity {
	font-weight: 400;
	color: #9ca3af;
}

.pc-checkout table.shop_table tr.cart_item td.product-total {
	font-weight: 600;
	color: #17181c;
	white-space: nowrap;
}

.pc-checkout table.shop_table tr.cart_item td {
	padding: 14px 0 !important;
	border-bottom: 1px solid #e9ebee;
}

/* Totals rows */
.pc-checkout table.shop_table tr.cart-subtotal th,
.pc-checkout table.shop_table tr.cart-subtotal td {
	padding-top: 16px !important;
}

.pc-checkout table.shop_table tr.cart-discount td {
	color: #16a34a;
	font-weight: 600;
	white-space: nowrap;
}

/* The coupon chip is shared via store-flow.css */

/* "Total" = due today: highlighted like on the cart page */
.pc-checkout table.shop_table tr.order-total:not(.recurring-total) th,
.pc-checkout table.shop_table tr.order-total:not(.recurring-total) td {
	padding: 14px 14px !important;
	background: #f0fdf4;
	background-clip: padding-box;
	border-top: 10px solid transparent;
	font-size: 16px;
	font-weight: 700;
	color: #17181c;
}

.pc-checkout table.shop_table tr.order-total:not(.recurring-total) th {
	border-radius: 8px 0 0 8px;
	white-space: nowrap;
}

.pc-checkout table.shop_table tr.order-total:not(.recurring-total) td {
	border-radius: 0 8px 8px 0;
	font-size: 19px;
	line-height: 1.2;
}

/* Compact renewal note (pc_renewal_note()) as the last table row — WCS's
   recurring-totals rows are unhooked in includes/store-flow.php */
.pc-checkout table.shop_table tr.pc-renewal-row td {
	padding: 14px 0 0 !important;
	border-top: 1px solid #eef0f2;
}

/* Promo-code proxy in the summary column — cart-style quiet toggle */

.pc-checkout .pc-checkout-promo {
	margin-top: 16px;
}

.pc-checkout .pc-checkout-promo summary {
	display: inline-block;
	cursor: pointer;
	font-size: 13px;
	color: #6b7280;
	list-style: none;
	transition: color 0.15s ease;
}

.pc-checkout .pc-checkout-promo summary::-webkit-details-marker {
	display: none;
}

.pc-checkout .pc-checkout-promo summary:hover {
	color: #17181c;
	text-decoration: underline;
}

/* Input + Apply styles are shared via store-flow.css */
.pc-checkout .pc-checkout-promo__row {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}

/* The Apply spinner (.is-loading) is shared via store-flow.css */

/* Coupon notices relocated next to the proxy control */
.pc-checkout .woocommerce-error,
.pc-checkout .woocommerce-message {
	max-width: none;
	margin: 16px 0 0 !important;
}

/* Advanced Coupons store-credit accordion — quiet link + clean panel,
   in place of the plugin's gray strip */

.pc-checkout .acfw-checkout-ui-block {
	margin-top: 16px;
}

.pc-checkout .acfw-accordion {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.pc-checkout .acfw-accordion h3 {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
	cursor: pointer;
}

.pc-checkout .acfw-accordion-title {
	font-size: 13px;
	font-weight: 400;
	color: #6b7280;
	transition: color 0.15s ease;
}

.pc-checkout .acfw-accordion h3:hover .acfw-accordion-title {
	color: #17181c;
	text-decoration: underline;
}

.pc-checkout .acfw-accordion .caret img {
	width: 10px;
	height: auto;
	opacity: 0.45;
}

.pc-checkout .acfw-accordion-inner,
.pc-checkout .acfw-accordion-content {
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

.pc-checkout .acfw-accordion-content {
	padding-top: 12px !important;
}

.pc-checkout .acfw-store-credit-user-balance,
.pc-checkout .acfw-store-credit-instructions {
	margin: 0 0 8px !important;
	font-size: 13px;
	color: #6b7280;
}

/* Amount + Apply on one aligned row */
.pc-checkout .acfw-redeem-store-credit-form-field {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.pc-checkout .acfw-redeem-store-credit-form-field .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.pc-checkout .acfw-redeem-store-credit-form-field .form-row-first {
	flex: 1;
}

.pc-checkout .acfw-redeem-store-credit-form-field label {
	display: none !important;
}

.pc-checkout .acfw-accordion-content .input-text {
	width: 100%;
	height: 100%;
	padding: 10px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
}

.pc-checkout .acfw-accordion-content .input-text:focus {
	border-color: #3fb859;
	outline: none;
	box-shadow: 0 0 0 3px rgba(63, 184, 89, 0.15);
}

.pc-checkout .acfw-accordion-content button.button {
	height: 100%;
	padding: 10px 20px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff !important;
	color: #17181c !important;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.pc-checkout .acfw-accordion-content button.button:hover {
	border-color: #3fb859;
	color: #3fb859 !important;
}

/* --- Right: details + payment (plain half, no card) --------------------- */

.pc-checkout__details {
	justify-self: start;
	width: 100%;
	max-width: 560px;
	padding: 40px 24px 64px 56px;
}

/* Billing fields */

/* Section headings — one shared style on both halves.
   !important: Astra styles checkout h3 with a #ddd underline and extra padding */
.pc-checkout .pc-checkout__heading,
.pc-checkout .woocommerce-billing-fields > h3,
.pc-checkout .woocommerce-shipping-fields > h3,
.pc-checkout .woocommerce-additional-fields > h3 {
	margin: 0 0 16px !important;
	padding: 0 !important;
	border: none !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #9ca3af;
	line-height: 1.4;
}

/* Payment section: compact break from the fields above, no extra chrome */
.pc-checkout .pc-checkout__heading--payment {
	margin: 24px 0 12px !important;
	padding: 0 !important;
	border: none !important;
}

.pc-checkout #customer_details {
	width: 100% !important;
	float: none !important;
}

.pc-checkout #payment {
	width: 100% !important;
	float: none !important;
	clear: both;
	background: transparent;
	border-radius: 0;
	margin-top: 0; /* the section heading owns the gap */
}

.pc-checkout .col2-set .col-1,
.pc-checkout .col2-set .col-2 {
	float: none;
	width: 100%;
	max-width: 100%;
}

/* Tight, even vertical rhythm for form rows */
.pc-checkout .form-row {
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.pc-checkout .form-row label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	margin-bottom: 4px;
}

.pc-checkout .form-row .input-text,
.pc-checkout .form-row select,
.pc-checkout .form-row .select2-selection {
	padding: 11px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	line-height: 1.4;
	height: auto;
}

.pc-checkout .form-row .select2-selection__rendered {
	line-height: 1.4;
	padding: 0;
}

.pc-checkout .form-row .select2-selection__arrow {
	height: 100%;
}

.pc-checkout .form-row .input-text:focus,
.pc-checkout .form-row select:focus {
	border-color: #3fb859;
	outline: none;
	box-shadow: 0 0 0 3px rgba(63, 184, 89, 0.15);
}

/* Payment methods */

/* Collapse empty structural blocks that add phantom vertical space */
.pc-checkout .col2-set .col-1,
.pc-checkout .col2-set .col-2,
.pc-checkout .woocommerce-billing-fields__field-wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

.pc-checkout .woocommerce-additional-fields,
.pc-checkout .woocommerce-account-fields {
	margin: 0;
}

/* Gateways as a segmented control: gray track, the active gateway is a white
   pill — deliberately a different visual language than Stripe UPE's outlined
   Card/Bank tabs inside the payment box. The list items become
   display:contents so the labels line up as segments (order 1) while the
   selected gateway's payment box spans the full width below them (order 2).
   Switching is still WooCommerce's own radio logic — the radios are just
   visually hidden. The track is a pseudo-element with a fixed height
   (4 + 44 + 4) because the boxes share the same flex container. */
.pc-checkout #payment ul.payment_methods {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 4px;
	padding: 0 !important; /* a themed list padding-left sneaks in otherwise */
	border: none;
	list-style: none;
	margin: 0 0 16px;
}

/* WooCommerce's clearfix pseudos would join the flex line as phantom items —
   the li ones especially, since display:contents promotes them to flex level.
   (ul::before stays: it is the track.) */
.pc-checkout #payment ul.payment_methods::after,
.pc-checkout #payment ul.payment_methods li.wc_payment_method::before,
.pc-checkout #payment ul.payment_methods li.wc_payment_method::after {
	content: none !important;
}

.pc-checkout #payment ul.payment_methods::before {
	content: '';
	/* !important: WooCommerce's clearfix makes this pseudo display:table,
	   which shrink-to-fits an absolute box to zero width */
	display: block !important;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 52px;
	background: #f3f4f6;
	border-radius: 12px;
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method {
	display: contents;
}

.pc-checkout #payment ul.payment_methods input.input-radio[name='payment_method'] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method > label {
	order: 1;
	flex: 1 1 0;
	position: relative; /* paints above the track */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin: 4px 0 !important;
	padding: 0 16px;
	border: none;
	border-radius: 9px;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: #6b7280;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method:first-child > label {
	margin-left: 4px !important;
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method:last-child > label {
	margin-right: 4px !important;
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method > label img {
	max-height: 20px;
	width: auto;
}

/* Stripe's cards.svg has a baked-in white box — it reads as a stray white
   square on the gray track, and the label text says it all anyway */
.pc-checkout #payment ul.payment_methods li.wc_payment_method > label img.stripe-icon {
	display: none;
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method > label:hover {
	color: #17181c;
}

/* Direct child combinators: saved-card radios nested inside the payment box
   must not pick up the segment styling */
.pc-checkout #payment ul.payment_methods li.wc_payment_method > input:checked + label {
	background: #fff;
	color: #17181c;
	box-shadow: inset 0 0 0 1.5px #3fb859, 0 1px 3px rgba(23, 24, 28, 0.1);
}

.pc-checkout #payment ul.payment_methods li.wc_payment_method > input:focus-visible + label {
	outline: 2px solid #3fb859;
	outline-offset: 1px;
}

.pc-checkout #payment ul.payment_methods div.payment_box {
	order: 2;
	flex: 1 1 100%;
}

.pc-checkout #payment div.payment_box {
	background: transparent !important;
	border-radius: 0;
	margin-top: 12px;
	padding: 0 !important;
}

.pc-checkout #payment div.payment_box::before {
	display: none;
}

/* Saved payment methods (Stripe tokens) — selectable rows */

.pc-checkout #payment ul.woocommerce-SavedPaymentMethods {
	margin: 0 0 12px;
	padding: 0 !important;
	list-style: none;
}

.pc-checkout #payment ul.woocommerce-SavedPaymentMethods li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	transition: border-color 0.15s ease;
}

.pc-checkout #payment ul.woocommerce-SavedPaymentMethods li:hover {
	border-color: #c9ced6;
}

.pc-checkout #payment ul.woocommerce-SavedPaymentMethods li:has(> input:checked) {
	border-color: #3fb859;
}

.pc-checkout #payment ul.woocommerce-SavedPaymentMethods input[type='radio'] {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin: 0;
	accent-color: #4b5563; /* neutral — the green border already marks selection */
	cursor: pointer;
}

.pc-checkout #payment ul.woocommerce-SavedPaymentMethods label {
	flex: 1;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	color: #374151;
	line-height: 1.4;
	cursor: pointer;
}

/* PayPal plugin placeholders that render invisible but still take space
   (!important: the ppcp script sets display:block inline) */
.pc-checkout .ppcp-messages {
	display: none !important;
}

/* Astra frames fieldsets — the Stripe UPE form doesn't need a box */
.pc-checkout #payment .payment_box fieldset {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent;
}

/* Place order */

.pc-checkout #payment #place_order,
.pc-checkout button#place_order {
	display: block;
	width: 100%;
	padding: 16px 24px;
	border: none;
	border-radius: 8px;
	background: #3fb859;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.pc-checkout #payment #place_order:hover,
.pc-checkout button#place_order:hover {
	background: #35a04c;
	transform: translateY(-1px);
}

.pc-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-privacy-policy-text,
.pc-checkout .woocommerce-terms-and-conditions-wrapper {
	font-size: 12px;
	color: #9ca3af;
	line-height: 1.5;
	text-align: center;
}

/* Turnstile sits above the privacy-policy text (see store-flow.php).
   Cloudflare injects a full-width nested <div> (~column width) with the
   fixed-size widget left-aligned inside it — flex-center every level. */
.pc-checkout #payment .pc-checkout-turnstile {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 8px 0 16px;
	text-align: center;
}

.pc-checkout #payment .pc-checkout-turnstile .cf-turnstile,
.pc-checkout #payment .pc-checkout-turnstile #cf-turnstile-woo-checkout,
.pc-checkout #payment .pc-checkout-turnstile .cf-turnstile > div {
	display: flex !important;
	justify-content: center !important;
	align-items: center;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 0;
}

.pc-checkout #payment .pc-checkout-turnstile iframe {
	margin: 0 auto !important;
}

.pc-checkout #payment .pc-checkout-turnstile .cf-turnstile-br {
	display: none;
}

/* Order-received fallback: most products redirect to their own thank-you
   page (see classes/WooCommerce.php), but the stock endpoint needs a
   readable container when it does render */
.woocommerce-order-received .pc-store-main .woocommerce {
	max-width: 640px;
	margin: 0 auto;
	padding: 48px 24px 96px;
}

.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-size: 22px;
	font-weight: 600;
	color: #17181c;
}

/* Cart-errors state uses the shared .pc-status component (store-flow.css) */

/* Notices on checkout — match the cart styling */

/* The wrapper positions the stack — symmetric 16px, like standalone notices */
.woocommerce-checkout .woocommerce-notices-wrapper:not(:empty) {
	max-width: 1032px;
	margin: 16px auto;
}

/* All notices live in the order-column slot (.pc-order-notices); the rules
   below normalize whatever lands there — server-rendered wrappers, AJAX
   notices relocated by JS, and place-order NoticeGroups */
.woocommerce-checkout .pc-order-notices .woocommerce-notices-wrapper {
	max-width: none;
	margin: 0;
}

.woocommerce-checkout .pc-order-notices :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
	max-width: none;
	margin: 0 0 16px !important;
}

/* AJAX-injected notices before JS relocates them into the slot */
.woocommerce-checkout div.woocommerce > :is(.woocommerce-error, .woocommerce-info, .woocommerce-message) {
	margin: 16px auto;
}

/* Login prompt inside Contact information, between heading and email field */
.pc-checkout .pc-checkout-login {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px !important;
	padding: 10px 14px !important;
	background: #f7f8fa;
	border: 1px solid #e9ebee;
	border-radius: 8px;
	font-size: 13px;
	color: #4b5563;
	line-height: 1.5;
}

.pc-checkout .pc-checkout-login svg {
	flex: 0 0 auto;
	color: #9ca3af;
}

.pc-checkout .pc-checkout-login a {
	color: #3fb859;
	font-weight: 600;
	text-decoration: none;
}

.pc-checkout .pc-checkout-login a:hover {
	text-decoration: underline;
}

/* Known contact details collapsed into a one-line summary with a caret
   (see includes/store-flow.php) */

/* !important: survives the inline display WooCommerce's address JS sets when
   it re-shows locale fields; the open state removes the class entirely */
.pc-checkout .form-row.pc-collapsed-row {
	display: none !important;
}

.pc-checkout .pc-contact-collapse__toggle {
	/* margin comes from the shared .form-row rule above */
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 10px 14px !important;
	border: 1px solid #e9ebee !important;
	border-radius: 8px;
	background: #fff !important; /* Astra paints generic buttons */
	color: #4b5563 !important;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.pc-checkout .pc-contact-collapse__toggle:hover {
	border-color: #c9ced6 !important;
}

.pc-checkout .pc-contact-collapse__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-checkout .pc-contact-collapse__toggle::after {
	content: '';
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	background: #9ca3af;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
	transition: transform 0.2s ease;
}

.pc-checkout .pc-contact-collapse__toggle.is-open::after {
	transform: rotate(180deg);
}

/* Card look is shared via store-flow.css; only the page width differs */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	max-width: 1032px;
}

/* Responsive */

@media (max-width: 900px) {
	.pc-checkout {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.pc-checkout::before,
	.pc-checkout::after {
		display: none;
	}

	.pc-checkout__summary,
	.pc-checkout__details {
		position: static;
		justify-self: stretch;
		max-width: 640px;
		margin: 0 auto;
		padding: 32px 20px 0;
	}

	.pc-checkout__details {
		padding-bottom: 64px;
		border-top: 1px solid #e5e7eb;
		margin-top: 24px;
	}
}