/* MOJ STYLE — branded WooCommerce cart / checkout / account pages */
:root {
	--moj-porcelain: #fbf6f3;
	--moj-pearl: #fffcfa;
	--moj-blush: #f7e3df;
	--moj-rose: #b47a64;
	--moj-rose-deep: #8b5643;
	--moj-ink: #2a1d1a;
	--moj-ink-soft: #5c4741;
	--moj-mute: #8f7c75;
	--moj-line: rgba(42, 29, 26, 0.1);
	--moj-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

body.moj-commerce {
	margin: 0;
	background: var(--moj-porcelain);
	color: var(--moj-ink);
	font-family: "Jost", system-ui, sans-serif;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
}

.moj-header {
	position: sticky;
	top: 12px;
	z-index: 50;
	margin: 12px auto 0;
	max-width: 1200px;
	width: calc(100% - 24px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 12px 22px;
	border-radius: 999px;
	background: rgba(251, 246, 243, 0.85);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow: 0 0 0 1px var(--moj-line), 0 20px 50px -30px rgba(42, 29, 26, 0.35);
}
.moj-back,
.moj-secure {
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--moj-ink-soft);
	text-decoration: none;
}
.moj-secure {
	justify-self: end;
}
.moj-back:hover {
	color: var(--moj-ink);
}
.moj-logo {
	display: flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: var(--moj-ink);
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 15px;
	letter-spacing: 0.42em;
}
.moj-logo img {
	height: 34px;
	width: auto;
}
@media (max-width: 640px) {
	.moj-logo span,
	.moj-secure {
		display: none;
	}
}

.moj-main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 72px 24px 96px;
	box-sizing: border-box;
}
.moj-title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	font-size: clamp(2.6rem, 6vw, 4.6rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	margin: 0 0 48px;
}

.moj-footer {
	text-align: center;
	padding: 32px 24px 48px;
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--moj-mute);
}

/* Typography inside WooCommerce blocks & classic templates */
.moj-content h2,
.moj-content h3,
.moj-content .wc-block-components-title,
.moj-content .wc-block-components-checkout-step__title {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em;
}
.moj-content a {
	color: var(--moj-rose-deep);
}

/* Inputs */
.moj-content input[type="text"],
.moj-content input[type="email"],
.moj-content input[type="tel"],
.moj-content input[type="password"],
.moj-content input[type="number"],
.moj-content select,
.moj-content textarea,
.moj-content .wc-block-components-text-input input,
.moj-content .wc-blocks-components-select__select {
	border-radius: 16px !important;
	border: 1px solid var(--moj-line) !important;
	background: var(--moj-pearl) !important;
	font-family: "Jost", system-ui, sans-serif !important;
	transition: box-shadow 0.5s var(--moj-ease);
}
.moj-content input:focus,
.moj-content select:focus,
.moj-content textarea:focus {
	outline: none !important;
	box-shadow: 0 0 0 1px var(--moj-rose) !important;
}

/* Buttons */
.moj-content .button,
.moj-content button.button,
.moj-content .wc-block-components-button:not(.is-link),
.moj-content .wc-block-components-checkout-place-order-button,
.moj-content #place_order {
	background: var(--moj-ink) !important;
	color: var(--moj-porcelain) !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 16px 32px !important;
	font-family: "Jost", system-ui, sans-serif !important;
	font-size: 11px !important;
	letter-spacing: 0.28em !important;
	text-transform: uppercase !important;
	transition: transform 0.6s var(--moj-ease), background-color 0.6s var(--moj-ease);
}
.moj-content .button:hover,
.moj-content .wc-block-components-button:not(.is-link):hover,
.moj-content #place_order:hover {
	background: #1d1412 !important;
}
.moj-content .button:active,
.moj-content .wc-block-components-button:active {
	transform: scale(0.98);
}

/* Panels */
.moj-content .wc-block-components-sidebar,
.moj-content .woocommerce-checkout-review-order,
.moj-content .cart_totals,
.moj-content .woocommerce-order {
	background: var(--moj-pearl);
	border-radius: 28px;
	padding: 28px;
	box-shadow: 0 0 0 1px var(--moj-line), 0 30px 60px -40px rgba(90, 50, 40, 0.35);
}
.moj-content .woocommerce-info,
.moj-content .woocommerce-message,
.moj-content .wc-block-components-notice-banner {
	border-radius: 18px;
	border-color: var(--moj-rose) !important;
	background: var(--moj-blush) !important;
}