/* ---------------------------------------------------------------------------
   Checkout, cart, account and the policy pages.

   The theme is a one-page landing site, so it never had a generic page layout.
   Its .site-header is position:absolute and every designed section clears it
   with its own padding-top (the hero uses 96px). Anything without that padding
   slides underneath the header - which is exactly what happened on checkout.

   Loaded only on those pages, so the landing page is untouched.
   --------------------------------------------------------------------------- */

/* Clear the absolutely positioned header. 80px header + breathing room. */
.shop-main,
.page-main {
	padding-top: 112px;
	padding-bottom: clamp(48px, 8vw, 90px);
	background: var(--cream);
	min-height: 60vh;
}

.shop-title,
.page-title {
	font-size: clamp(1.7rem, 4.5vw, 2.4rem);
	color: var(--ink);
	margin: 0 0 clamp(20px, 3vw, 32px);
	text-wrap: balance;
}

/* The landing page reserves space at the bottom for the floating buy button.
   There is no floating button here, so that gap would just look like a bug. */
.page-shop .site-footer,
.page-policy .site-footer {
	padding-bottom: 34px;
}

/* ---------- policy pages ---------- */

.policy-body {
	max-width: 780px;
	color: var(--text);
	line-height: 1.85;
}

.policy-body h2 {
	font-size: clamp(1.15rem, 2.6vw, 1.4rem);
	color: var(--ink);
	margin: 1.9em 0 .6em;
	text-wrap: balance;
}

.policy-body h2:first-child {
	margin-top: 0;
}

.policy-body p,
.policy-body li {
	text-wrap: pretty;
}

.policy-body ol {
	padding-inline-start: 1.3em;
	margin: 0 0 1.2em;
}

.policy-body ol li {
	margin-bottom: .7em;
}

.policy-body a {
	color: var(--gold-strong);
}

.policy-updated {
	display: inline-block;
	background: var(--cream-2);
	border-radius: 999px;
	padding: .35em 1.1em;
	font-size: .88rem;
	color: var(--ink);
	margin-bottom: 1.6em;
}

/* A callout for anything a buyer must not miss - used for the notice that this
   event falls inside the 7-business-day window and carries no right of
   cancellation. It has to read as a warning, not as more small print. */
.policy-note {
	background: #fdf6e6;
	border: 1px solid var(--gold-soft);
	border-inline-start: 4px solid var(--gold);
	border-radius: 12px;
	padding: 1.1em 1.3em;
	margin: 1.4em 0;
}

.policy-note strong {
	color: var(--gold-strong);
}

/* ---------- checkout tidy-ups ---------- */

/* WooCommerce's own headings inherit the theme font but come in a little loud
   next to the page title. */
.page-shop .wc-block-components-title {
	color: var(--ink);
}

@media (max-width: 700px) {
	.shop-main,
	.page-main {
		padding-top: 96px;
	}
}