/*
 * Kit chrome shell (inc/sst-kit-chrome.php). Loaded only while the sst_kit_chrome option is on.
 * Header and footer styling comes from kit-shell.css (a copy of just those rules out of preview.css); tokens from kit.css.
 * No hex here: tests/test_kit_tokens.py.
 */

/* Astra's .ast-container is kept as a compatibility wrapper (plugin CSS keys on it); undo Astra's own layout. */
body.sst-kit-chrome .site-content,
body.sst-kit-chrome .site-content > .ast-container {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.sst-kit-chrome .kit-page {
	max-width: 1232px;
	margin: 0 auto;
	padding: 48px 24px 72px;
	color: var(--ink);
	font-family: var(--body);
}

body.sst-kit-chrome .kit-title {
	font-family: var(--display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: .95;
	letter-spacing: .01em;
	font-size: clamp(40px, 6vw, 72px);
	margin: 0 0 28px;
}

body.sst-kit-chrome .kit-content {
	max-width: 76ch;
}

body.sst-kit-chrome .kit-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

body.sst-kit-chrome .kit-card {
	background: var(--card);
	border-radius: var(--r-card);
	padding: 24px;
}

body.sst-kit-chrome .kit-card h2 {
	font-size: 30px;
	margin: 0 0 12px;
}

body.sst-kit-chrome .kit-card h2 a {
	color: var(--ink);
	text-decoration: none;
}

/*
 * Shared .button / .yellow / .kicker for kit shells (404, /my-courses/, course page). These were
 * preview.css rules; the chrome no longer loads preview.css, so they live here, scoped to .kit-page
 * so no other template's own .button is touched.
 */
body.sst-kit-chrome .kit-page .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 15px 24px;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: 0;
	line-height: 1.2;
}

body.sst-kit-chrome .kit-page .button.yellow {
	background: var(--yellow);
	color: var(--black);
}

body.sst-kit-chrome .kit-page .button:hover {
	transform: translateY(-2px);
}

body.sst-kit-chrome .kit-page .kicker {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
	margin-bottom: 15px;
}

@media (prefers-reduced-motion: reduce) {
	body.sst-kit-chrome .kit-page .button:hover {
		transform: none;
	}
}

body.sst-kit-chrome .kit-404 .button {
	display: inline-block;
	background: var(--yellow);
	color: var(--black);
	border-radius: var(--r-tile);
	padding: 14px 24px;
	font-weight: 900;
	text-decoration: none;
}

/* /my-courses/ (page-my-courses.php) */
body.sst-kit-chrome .kit-course .button,
body.sst-kit-chrome .kit-empty .button {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	background: var(--yellow);
	color: var(--black);
	border-radius: var(--r-tile);
	padding: 12px 24px;
}
/*
 * WooCommerce pages (woocommerce.php, and cart / my-account / order-received rendered by page.php).
 * Woo's own markup and shortcodes are untouched; this only styles them with kit tokens.
 */
body.sst-kit-chrome .kit-woo .kit-content {
	max-width: none;
}

body.sst-kit-chrome .kit-woo :is(.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-notice) {
	background: var(--card);
	color: var(--ink);
	border: 0;
	border-left: 6px solid var(--yellow);
	border-radius: var(--r-card);
	padding: 16px 20px;
	margin: 0 0 20px;
	list-style: none;
}

body.sst-kit-chrome .kit-woo .woocommerce-error {
	border-left-color: var(--danger);
}

body.sst-kit-chrome .kit-woo .woocommerce-message::before,
body.sst-kit-chrome .kit-woo .woocommerce-info::before,
body.sst-kit-chrome .kit-woo .woocommerce-error::before {
	display: none;
}

body.sst-kit-chrome .kit-woo :is(table.shop_table, .cart_totals, .woocommerce-MyAccount-content, .woocommerce-order-overview, .u-column1, .u-column2, .woocommerce-customer-details address) {
	background: var(--card);
	border: 0;
	border-radius: var(--r-card);
	padding: 20px;
}

body.sst-kit-chrome .kit-woo table.shop_table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

body.sst-kit-chrome .kit-woo :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], select, textarea) {
	max-width: 100%;
	border: 1px solid var(--gray-88);
	border-radius: var(--r-tile);
	padding: 12px 14px;
	font: inherit;
	color: var(--ink);
	background: var(--paper);
}

body.sst-kit-chrome .kit-woo :is(button.button, a.button, input.button, .wc-proceed-to-checkout a) {
	background: var(--yellow);
	color: var(--black);
	border: 0;
	border-radius: var(--r-tile);
	padding: 14px 24px;
	font-weight: 900;
	text-decoration: none;
}

body.sst-kit-chrome .kit-progress {
	background: var(--rule-2);
	border-radius: var(--r-tile);
	height: 10px;
	overflow: hidden;
	margin: 0 0 6px;
}

body.sst-kit-chrome .kit-progress span {
	display: block;
	height: 100%;
	background: var(--ok);
}

body.sst-kit-chrome .kit-progress-label {
	font-size: 14px;
	color: var(--muted);
	margin: 0 0 16px;
}
body.sst-kit-chrome .kit-woo .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.sst-kit-chrome .kit-woo .woocommerce-MyAccount-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: var(--r-tile);
	background: var(--card);
	color: var(--ink);
	font-weight: 700;
	text-decoration: none;
}

body.sst-kit-chrome .kit-woo .woocommerce-MyAccount-navigation .is-active a {
	background: var(--black);
	color: var(--yellow);
}

@media (max-width: 600px) {
	body.sst-kit-chrome .kit-page {
		padding: 28px 16px 56px;
	}

	body.sst-kit-chrome .kit-woo .shop_table_responsive {
		overflow-x: auto;
	}

	body.sst-kit-chrome .kit-woo :is(.woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content) {
		float: none;
		width: 100%;
	}
}

/* The cart page's branded empty state (woocommerce/cart/cart-empty.php) carries its own h1. */
body.sst-kit-chrome .kit-article--empty-cart > .kit-title,
body.sst-kit-chrome .kit-article:has(.sst-empty-cart) > .kit-title,
body.sst-kit-chrome .kit-article:has(.wc-empty-cart-message) > .kit-title {
	display: none;
}