/**
 * Liberty Web Kits - content pages, prose, forms, WooCommerce account/cart.
 *
 * Depends on tokens.css, layout.css, home.css, shop.css.
 */

/* -------------------------------------------------------------------------
 * Page hero
 * ---------------------------------------------------------------------- */

.lwk-pagehero {
	position: relative;
	overflow: hidden;
	padding-block: 64px 44px;
	border-bottom: 1px solid var(--lwk-border);
}

.lwk-pagehero__glow {
	position: absolute;
	top: -70%;
	left: 50%;
	transform: translateX(-50%);
	width: min(860px, 100%);
	aspect-ratio: 2 / 1;
	background: radial-gradient(ellipse at center,
		color-mix(in srgb, var(--lwk-purple) 20%, transparent) 0%, transparent 66%);
	filter: blur(30px);
	pointer-events: none;
}

.lwk-pagehero > .lwk-container { position: relative; }

.lwk-pagehero__title {
	margin: 0 0 14px;
	font-family: var(--lwk-font-display);
	font-size: clamp(2rem, 1.5rem + 2.3vw, 3.125rem);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -0.032em;
	color: var(--lwk-text);
	text-wrap: balance;
}

.lwk-pagehero__lead {
	margin: 0;
	max-width: 66ch;
	font-size: var(--lwk-fs-lead);
	line-height: 1.6;
	color: var(--lwk-text-2);
}

.lwk-page__body { padding-block: 48px 90px; }

/* -------------------------------------------------------------------------
 * Prose
 * ---------------------------------------------------------------------- */

.lwk-prose--page { max-width: 76ch; }

.lwk-prose h2 {
	margin: 44px 0 14px;
	font-family: var(--lwk-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.022em;
	color: var(--lwk-text);
	scroll-margin-top: 90px;
}

.lwk-prose h2:first-child { margin-top: 0; }

.lwk-prose h3 {
	margin: 30px 0 10px;
	font-family: var(--lwk-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--lwk-text);
	scroll-margin-top: 90px;
}

.lwk-prose p,
.lwk-prose li {
	font-size: 1rem;
	line-height: 1.72;
	color: var(--lwk-text-2);
}

.lwk-prose p { margin: 0 0 16px; }

.lwk-prose ul,
.lwk-prose ol { margin: 0 0 18px; padding-left: 22px; }
.lwk-prose li { margin-bottom: 8px; }
.lwk-prose li::marker { color: var(--lwk-violet); }

.lwk-prose a { color: var(--lwk-cyan); text-decoration: underline; text-underline-offset: 3px; }
.lwk-prose a:hover { color: var(--lwk-violet); }

.lwk-prose strong { color: var(--lwk-text); }

.lwk-prose hr {
	border: 0;
	border-top: 1px solid var(--lwk-border);
	margin: 40px 0;
}

.lwk-prose blockquote {
	margin: 24px 0;
	padding: 16px 22px;
	border-left: 3px solid var(--lwk-violet);
	background: var(--lwk-surface);
	border-radius: 0 var(--lwk-radius-sm) var(--lwk-radius-sm) 0;
}

.lwk-prose blockquote p:last-child { margin-bottom: 0; }

.lwk-prose table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 20px;
	font-size: 0.9375rem;
}

.lwk-prose th,
.lwk-prose td {
	padding: 12px 14px;
	border: 1px solid var(--lwk-border);
	text-align: left;
	color: var(--lwk-text-2);
}

.lwk-prose th { color: var(--lwk-text); font-weight: 600; background: var(--lwk-surface); }

/* Owner/legal review callout used inside legal drafts. */
.lwk-review {
	display: block;
	margin: 20px 0;
	padding: 14px 18px;
	border: 1px solid color-mix(in srgb, var(--lwk-gold) 40%, transparent);
	border-left-width: 3px;
	border-radius: 0 var(--lwk-radius-sm) var(--lwk-radius-sm) 0;
	background: color-mix(in srgb, var(--lwk-gold) 8%, transparent);
	color: var(--lwk-gold);
	font-size: 0.875rem;
	line-height: 1.6;
}

.lwk-review strong { color: var(--lwk-gold); }

/* -------------------------------------------------------------------------
 * Coming-soon panel (bundles / free templates)
 * ---------------------------------------------------------------------- */

.lwk-soonpanel {
	text-align: center;
	padding: 56px 28px;
	border: 1px dashed var(--lwk-border-strong);
	border-radius: var(--lwk-radius-lg);
	background:
		radial-gradient(110% 130% at 50% 0%, color-mix(in srgb, var(--lwk-purple) 12%, transparent) 0%, transparent 60%),
		var(--lwk-surface);
	margin-bottom: 40px;
}

.lwk-soonpanel h2 {
	margin: 14px 0 12px;
	font-family: var(--lwk-font-display);
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
	font-weight: 600;
	color: var(--lwk-text);
}

.lwk-soonpanel p {
	margin: 0 auto 10px;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--lwk-text-2);
}

/* -------------------------------------------------------------------------
 * Documentation
 * ---------------------------------------------------------------------- */

.lwk-doclayout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.lwk-docnav {
	position: sticky;
	top: 88px;
	padding: 20px;
	border: 1px solid var(--lwk-border);
	border-radius: var(--lwk-radius);
	background: var(--lwk-surface);
}

.lwk-docnav h2 {
	margin: 0 0 12px;
	font-family: var(--lwk-font-body);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lwk-text-3);
}

.lwk-docnav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }

.lwk-docnav a {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 0.875rem;
	color: var(--lwk-text-2);
	text-decoration: none;
}

.lwk-docnav a:hover,
.lwk-docnav a:focus-visible {
	color: var(--lwk-text);
	background: var(--lwk-surface-2);
}

@media (max-width: 900px) {
	.lwk-doclayout { grid-template-columns: 1fr; gap: 28px; }
	.lwk-docnav { position: static; }
	.lwk-docnav ul { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* -------------------------------------------------------------------------
 * Forms (Fluent Forms + WooCommerce)
 * ---------------------------------------------------------------------- */

.lwk-page__body input[type="text"],
.lwk-page__body input[type="email"],
.lwk-page__body input[type="tel"],
.lwk-page__body input[type="url"],
.lwk-page__body input[type="password"],
.lwk-page__body input[type="number"],
.lwk-page__body select,
.lwk-page__body textarea,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.ff-el-form-control {
	width: 100%;
	min-height: 46px;
	padding: 11px 14px;
	border: 1px solid var(--lwk-border-strong);
	border-radius: var(--lwk-radius-sm);
	background: var(--lwk-surface);
	color: var(--lwk-text);
	font-family: var(--lwk-font-body);
	font-size: 0.9375rem;
	line-height: 1.5;
}

textarea.ff-el-form-control,
.lwk-page__body textarea { min-height: 130px; resize: vertical; }

.ff-el-form-control:focus,
.woocommerce form .form-row input.input-text:focus,
.lwk-page__body input:focus,
.lwk-page__body textarea:focus,
.lwk-page__body select:focus {
	outline: 2px solid var(--lwk-cyan);
	outline-offset: 2px;
	border-color: var(--lwk-violet);
}

.ff-el-input--label label,
.woocommerce form .form-row label,
.lwk-page__body label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--lwk-text);
}

.ff-el-input--label.ff-el-is-required label:after,
.woocommerce form .form-row .required {
	color: var(--lwk-violet);
	text-decoration: none;
}

.ff-el-group { margin-bottom: 18px; }

.ff-btn-submit,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce input.button:disabled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: var(--lwk-radius-sm);
	background: var(--lwk-grad-primary);
	color: var(--lwk-text);
	font-family: var(--lwk-font-body);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: transform var(--lwk-dur) var(--lwk-ease), box-shadow var(--lwk-dur) var(--lwk-ease);
}

.ff-btn-submit:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover {
	color: var(--lwk-text);
	transform: translateY(-1px);
	box-shadow: var(--lwk-glow-purple);
}

.ff-el-form-check-label,
.ff-el-form-check { color: var(--lwk-text-2); font-size: 0.875rem; }

.ff-el-is-error .ff-el-form-control { border-color: #F87171; }
.error, .text-danger, .ff-el-is-error .error { color: #F87171; font-size: 0.8125rem; }

/* -------------------------------------------------------------------------
 * WooCommerce notices
 * ---------------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 24px;
	padding: 14px 18px;
	border: 1px solid var(--lwk-border-strong);
	border-left-width: 3px;
	border-radius: 0 var(--lwk-radius-sm) var(--lwk-radius-sm) 0;
	background: var(--lwk-surface);
	color: var(--lwk-text-2);
	font-size: 0.9375rem;
	list-style: none;
}

.woocommerce-message { border-left-color: var(--lwk-cyan); }
.woocommerce-info    { border-left-color: var(--lwk-violet); }
.woocommerce-error   { border-left-color: #F87171; color: #FCA5A5; }

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* -------------------------------------------------------------------------
 * My Account
 * ---------------------------------------------------------------------- */

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	padding: 16px;
	border: 1px solid var(--lwk-border);
	border-radius: var(--lwk-radius);
	background: var(--lwk-surface);
	width: auto;
	float: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 0.9375rem;
	color: var(--lwk-text-2);
	text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--lwk-text);
	background: var(--lwk-surface-2);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--lwk-text);
	background: color-mix(in srgb, var(--lwk-purple) 22%, transparent);
}

.woocommerce-account .woocommerce-MyAccount-content {
	width: auto;
	float: none;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-content p { color: var(--lwk-text-2); line-height: 1.7; }
.woocommerce-account .woocommerce-MyAccount-content a { color: var(--lwk-cyan); }

/* Login / register */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
	padding: 26px;
	border: 1px solid var(--lwk-border);
	border-radius: var(--lwk-radius);
	background: var(--lwk-surface);
}

.woocommerce-account .u-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}

.woocommerce-account h2 {
	font-family: var(--lwk-font-display);
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--lwk-text);
	margin: 0 0 16px;
}

/* -------------------------------------------------------------------------
 * Cart / Checkout tables
 * ---------------------------------------------------------------------- */

.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--lwk-border);
	border-radius: var(--lwk-radius);
	overflow: hidden;
	background: var(--lwk-surface);
	margin-bottom: 24px;
}

.woocommerce table.shop_table th {
	padding: 14px 16px;
	border-bottom: 1px solid var(--lwk-border-strong);
	font-family: var(--lwk-font-body);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lwk-text-3);
	text-align: left;
}

.woocommerce table.shop_table td {
	padding: 16px;
	border-bottom: 1px solid var(--lwk-border);
	color: var(--lwk-text-2);
	font-size: 0.9375rem;
}

.woocommerce table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table a { color: var(--lwk-text); text-decoration: none; font-weight: 600; }
.woocommerce table.shop_table img { width: 64px; border-radius: 8px; border: 1px solid var(--lwk-border); }

.woocommerce .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--lwk-font-display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--lwk-text);
	margin: 0 0 14px;
}

.woocommerce .cart-collaterals .cart_totals {
	float: none;
	width: 100%;
	max-width: 420px;
	margin-left: auto;
}

.woocommerce-checkout .woocommerce form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	grid-template-areas:
		"express   express"
		"separator separator"
		"details   heading"
		"details   review";
	gap: 40px;
	align-items: start;
}

/* The checkout form has five direct children, not two: the Stripe Express
   Checkout block and its separator come first, then billing, the order
   heading and the order panel. Without explicit placement the order panel
   auto-flows into column one and sits under the billing fields. */
.woocommerce-checkout #wc-stripe-express-checkout-element          { grid-area: express; }
.woocommerce-checkout #wc-stripe-express-checkout-button-separator { grid-area: separator; }
.woocommerce-checkout #customer_details     { grid-area: details; min-width: 0; }
.woocommerce-checkout #order_review_heading { grid-area: heading; }
.woocommerce-checkout #order_review         { grid-area: review; min-width: 0; }

/* Astra's dynamic CSS keeps WooCommerce's legacy float layout on checkout:
   #customer_details gets width:55%;float:left and #order_review plus its
   heading get width:40%;float:right. Those percentages resolve against the
   grid tracks above, so each panel shrank to a fraction of its own column -
   the order column rendered ~200px wide with a wide empty gap beside it,
   which in turn squeezed the order table, the Stripe Payment Element, the
   terms text and the Place order button. Neutralise the float layout so the
   grid tracks alone define the columns. Selectors carry one class more than
   Astra's so they win without !important. */
.woocommerce.woocommerce-checkout form.checkout #customer_details.col2-set,
.woocommerce-page.woocommerce-checkout form.checkout #customer_details.col2-set,
.woocommerce.woocommerce-checkout form.checkout #order_review,
.woocommerce-page.woocommerce-checkout form.checkout #order_review,
.woocommerce.woocommerce-checkout form.checkout #order_review_heading,
.woocommerce-page.woocommerce-checkout form.checkout #order_review_heading {
	float: none;
	width: auto;
	margin-right: 0;
	clear: none;
}

/* Astra also boxes the heading and the panel with 2px borders and its own
   padding, from a rule whose :not() argument raises its specificity. Match
   that shape so the heading sits directly above one self-contained panel. */
.woocommerce-checkout form.checkout #order_review_heading:not(.elementor-widget-woocommerce-checkout-page #order_review_heading) {
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}

.woocommerce-checkout form.checkout #order_review:not(.elementor-widget-woocommerce-checkout-page #order_review) {
	padding: 26px;
	border: 1px solid var(--lwk-border);
	border-radius: var(--lwk-radius);
}

/* Fill the panel: table, payment area and button all take its full width. */
.woocommerce-checkout #order_review table.shop_table { width: 100%; }
.woocommerce-checkout #order_review #payment,
.woocommerce-checkout #order_review .payment_box,
.woocommerce-checkout #order_review .wc-stripe-upe-element,
.woocommerce-checkout #order_review #wc-stripe-upe-element,
.woocommerce-checkout #order_review .StripeElement,
.woocommerce-checkout #order_review .woocommerce-terms-and-conditions-wrapper {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
}

.woocommerce-checkout #order_review #place_order { width: 100%; float: none; }

/* The Stripe gateway's fieldset adds a fixed 30px inset, costing 60px of card
   field width at every breakpoint and leaving only ~139px at 360px. The order
   panel (26px) and the payment box (13px) already provide the padding. */
.woocommerce-checkout #order_review #wc-stripe-upe-form,
.woocommerce-checkout #order_review .wc-upe-form {
	padding: 0;
	border: 0;
	margin: 0;
}

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
	padding: 26px;
	border: 1px solid var(--lwk-border);
	border-radius: var(--lwk-radius);
	background: var(--lwk-surface);
}

.woocommerce-checkout #order_review { position: sticky; top: 88px; }

.woocommerce #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
}

.woocommerce #payment ul.payment_methods {
	padding: 0;
	border: 0;
	list-style: none;
	margin: 0 0 16px;
}

@media (max-width: 900px) {
	.woocommerce-account .woocommerce,
	.woocommerce-checkout .woocommerce form.checkout {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.woocommerce-checkout .woocommerce form.checkout {
		grid-template-areas:
			"express"
			"separator"
			"details"
			"heading"
			"review";
	}
	.woocommerce-checkout #order_review { position: static; }
	.woocommerce .cart-collaterals .cart_totals { max-width: none; }
}

@media (max-width: 600px) {
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--lwk-border); padding: 8px 0; }
	.woocommerce table.shop_table td {
		display: flex;
		justify-content: space-between;
		gap: 14px;
		border-bottom: 0;
		padding: 8px 14px;
	}
	.woocommerce table.shop_table td::before {
		content: attr(data-title);
		font-size: 0.75rem;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--lwk-text-3);
	}
}

/* A page whose content is a documentation layout needs the full container
   width, not the prose reading measure. :has() keeps this out of PHP. */
.lwk-prose--page:has(.lwk-doclayout) { max-width: none; }

/* Checkout is an application layout, not prose. Left at the reading
   measure, the billing form, order table and Stripe Payment Element are
   all squeezed into ~700px and the order table wraps a word per line. */
.woocommerce-checkout .lwk-prose--page { max-width: none; }
.lwk-doclayout .lwk-prose { max-width: 74ch; }