/*
Theme Name: Ntomafie
Theme URI: https://ntomafie.local
Author: Ntomafie
Description: TikTok-style fashion storefront for WooCommerce. Custom classic theme hosting a Vue island for all customer-facing screens; checkout and accounts stay native WooCommerce.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
Text Domain: ntomafie
WC requires at least: 8.0
WC tested up to: 11.1
*/

/* The storefront UI lives in app/. This file is only the theme header plus a
   pre-hydration shell so the first paint is not blank. */

:root { color-scheme: light dark; }

html, body { margin: 0; padding: 0; }

#ntomafie-app {
	min-height: 100vh;
	min-height: 100dvh;
	background: #0c0a07;
}

/* Pre-hydration splash — replaced when the app mounts. */
#ntomafie-boot {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	z-index: 9999;
	background: #0c0a07;
	color: #fbf7ef;
	font: 700 26px/1.2 "Fraunces", Georgia, "Times New Roman", serif;
	letter-spacing: 0.02em;
}
#ntomafie-boot[hidden] { display: none; }

/* ============================================================
   Native pages: cart, checkout, my-account, 404, plain pages.
   Light chrome around WooCommerce's own block/shortcode output.
   Carries the Kente Gold palette so checkout does not change brand mid-flow.
   ============================================================ */

body.ntomafie--page {
	margin: 0;
	background: #faf7f1;
	color: #1a150e;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

.nt-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.nt-page__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	background: #0c0a07;
	color: #fbf7ef;
}
.nt-page__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.nt-page__mark {
	display: block;
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
}
.nt-page__name {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-weight: 700;
	font-size: 18px;
}
.nt-page__back {
	color: #d8cbb0;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}
.nt-page__back:hover { color: #fbf7ef; }

.nt-page__main {
	flex: 1;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 28px 20px 60px;
}

.nt-page__foot {
	padding: 24px 20px;
	text-align: center;
	color: #9a8c6f;
	font-size: 12px;
}

/* Nudge WooCommerce block spacing so it isn't edge-to-edge. */
.nt-page__main .wp-block-woocommerce-cart,
.nt-page__main .wp-block-woocommerce-checkout { margin: 0; }
.nt-page__main .woocommerce { max-width: none; }
.nt-page__main a { color: #e8a317; }
.nt-page__main .button,
.nt-page__main button.wc-block-components-button {
	border-radius: 999px !important;
}

/* WooCommerce's own buttons default to the block theme's lilac — brand them so
   the pay flow doesn't change identity halfway through. */
.nt-page__main .button,
.nt-page__main .wp-element-button,
.nt-page__main button[type="submit"],
.nt-page__main input[type="submit"] {
	background: #e8a317;
	border: 0;
	border-radius: 999px;
	padding: 11px 20px;
	color: #1a1206;
	font-weight: 700;
	cursor: pointer;
}
.nt-page__main .button:hover,
.nt-page__main .wp-element-button:hover,
.nt-page__main button[type="submit"]:hover,
.nt-page__main input[type="submit"]:hover {
	background: #f2b02a;
}