/**
 * Front end styles.
 *
 * The product cards and the checkout layout are styled by the theme
 * (.card, .card-block, .order-page-container, .form-container, .order-container),
 * and the checkout form itself uses the Bootstrap 5 form classes the theme
 * loads. This file only covers what neither has rules for.
 */

/* Layout comes from the theme's .cards; this only keeps the per-card form from
   interfering, since the form — not the card — is the flex item. */
.ps-product-form {
	margin: 0;
	display: flex;
}

.ps-card-cover-empty {
	background-color: #e6ebf0;
	background-image: linear-gradient(135deg, #eef2f6 25%, #e2e8ee 25%, #e2e8ee 50%, #eef2f6 50%, #eef2f6 75%, #e2e8ee 75%);
	background-size: 16px 16px;
}

/* Honeypot: reachable by bots that read the DOM, invisible to people. */
.ps-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ps-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 8px;
	background: #f1f4f7;
	border: 1px solid #d8dfe6;
}

.ps-notice p {
	margin: 0 0 8px;
}

.ps-notice p:last-child {
	margin-bottom: 0;
}

/* The theme centres these headings through its h1 rule; the checkout uses h2 so
   the page keeps a single h1, which means the centring has to be restated. Only
   the section headings are targeted — the p.card-title inside the order card is
   already centred by .card-contents. */
.order-page-container h2.card-title {
	text-align: center;
}

.ps-payment {
	margin: 0 0 20px;
}

.ps-payment-note {
	margin: 8px 0 0;
	font-size: 14px;
	color: #63757f;
}

.ps-payment-details,
.ps-summary {
	border-collapse: collapse;
	margin: 0 0 16px;
	width: 100%;
	max-width: 460px;
}

.ps-payment-details th,
.ps-summary th {
	text-align: left;
	font-weight: 400;
	color: #63757f;
	padding: 6px 20px 6px 0;
	vertical-align: top;
	white-space: nowrap;
}

.ps-payment-details td,
.ps-summary td {
	padding: 6px 0;
	word-break: break-word;
}

.ps-thankyou {
	max-width: 640px;
	margin: 0 auto;
}

.ps-order-number {
	font-size: 18px;
}

.ps-muted {
	color: #63757f;
}

.ps-product a.post-edit-link {
	right: auto;
}