/* ==========================================================================
   Mason's Vision — WooCommerce theming
   Brand tokens, classic checkout, cart, my-account
   Scoped to Woo pages via body classes.
   ========================================================================== */

:root {
	--mv-ink: #1B1A18;
	--mv-default: #CEC7BB;
	--mv-highlight: #E6CFA3;
	--mv-default-60: rgba(206, 199, 187, 0.6);
	--mv-default-40: rgba(206, 199, 187, 0.4);
	--mv-highlight-32: rgba(230, 207, 163, 0.32);
	--mv-highlight-08: rgba(230, 207, 163, 0.08);

	--mv-font-display: 'Cormorant Garamond', Georgia, serif;
	--mv-font-ui: 'Inter', -apple-system, sans-serif;
	--mv-font-meta: 'JetBrains Mono', monospace;
}

/* --------------------------------------------------------------------------
   Base — apply only on Woo pages (checkout, cart, account)
   -------------------------------------------------------------------------- */
body.woocommerce-checkout,
body.woocommerce-cart,
body.woocommerce-account,
body.woocommerce-page {
	background-color: var(--mv-ink);
	color: var(--mv-default);
	font-family: var(--mv-font-ui);
}

body.woocommerce-checkout h1,
body.woocommerce-cart h1,
body.woocommerce-account h1,
body.woocommerce-checkout h2,
body.woocommerce-cart h2,
body.woocommerce-account h2 {
	font-family: var(--mv-font-display);
	font-weight: 300;
	color: var(--mv-default);
	letter-spacing: 0.01em;
}

/* Section headings ("Billing details", "Your order", etc.) */
.woocommerce-checkout h3,
.woocommerce-cart h3,
.woocommerce-account h3,
.woocommerce form .form-row label,
#order_review_heading,
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
	font-family: var(--mv-font-ui);
	color: var(--mv-default);
}

/* Eyebrow / meta-style labels */
.woocommerce-info,
.woocommerce-message,
.cart-subtotal th,
.order-total th {
	font-family: var(--mv-font-meta);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.78rem;
	color: var(--mv-default-60);
}

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.select2-container .select2-selection {
	background-color: transparent;
	border: 1px solid var(--mv-default-40);
	border-radius: 0; /* square corners — brand rule */
	color: var(--mv-default);
	font-family: var(--mv-font-ui);
	padding: 14px 16px;
	transition: border-color 0.25s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce-checkout input:focus {
	border-color: var(--mv-highlight);
	outline: none;
	box-shadow: none;
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce-checkout input::placeholder {
	color: var(--mv-default-40);
}

/* Labels */
.woocommerce form .form-row label,
.woocommerce-checkout label {
	color: var(--mv-default-60);
	font-size: 0.85rem;
	margin-bottom: 6px;
}

/* Select2 dropdown (country/state) */
.select2-dropdown,
.select2-container--default .select2-results__option {
	background-color: var(--mv-ink);
	color: var(--mv-default);
	border-color: var(--mv-default-40);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--mv-highlight-32);
	color: var(--mv-default);
}

/* --------------------------------------------------------------------------
   Buttons — square corners, gold fill, brand hover
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--mv-highlight);
	color: var(--mv-ink);
	border: 1px solid var(--mv-highlight);
	border-radius: 0; /* square corners */
	font-family: var(--mv-font-ui);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 16px 32px;
	transition: background-color 0.35s ease, color 0.25s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--mv-highlight-32);
	color: var(--mv-highlight);
}

/* Secondary / outline buttons */
.woocommerce a.button.wc-backward,
.woocommerce button.button.alt[disabled] {
	background-color: transparent;
	color: var(--mv-default);
	border: 1px solid var(--mv-default-40);
}

/* --------------------------------------------------------------------------
   Order review table (right column)
   -------------------------------------------------------------------------- */
.woocommerce-checkout #order_review,
.woocommerce-checkout-review-order-table,
.woocommerce table.shop_table {
	background-color: transparent;
	border: 1px solid var(--mv-default-40);
	border-radius: 0;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-top: 1px solid var(--mv-default-40);
	color: var(--mv-default);
	padding: 16px;
}

.order-total .woocommerce-Price-amount {
	color: var(--mv-highlight);
	font-family: var(--mv-font-display);
	font-size: 1.4rem;
}

/* --------------------------------------------------------------------------
   Hairline divider — recurring brand element
   -------------------------------------------------------------------------- */
.woocommerce-checkout .col2-set,
.woocommerce-checkout #customer_details {
	border-bottom: 1px solid transparent;
}
.mv-hairline {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent 0%, var(--mv-highlight) 50%, transparent 100%);
	margin: 32px 0;
}

/* --------------------------------------------------------------------------
   Notices / info boxes
   -------------------------------------------------------------------------- */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error {
	background-color: var(--mv-highlight-08);
	border-top: 2px solid var(--mv-highlight);
	border-radius: 0;
	color: var(--mv-default);
}
.woocommerce-info::before,
.woocommerce-message::before {
	color: var(--mv-highlight);
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */
body.woocommerce-checkout a,
body.woocommerce-cart a,
body.woocommerce-account a {
	color: var(--mv-highlight);
	text-decoration: none;
	transition: opacity 0.25s ease;
}
body.woocommerce-checkout a:hover,
body.woocommerce-cart a:hover,
body.woocommerce-account a:hover {
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   My Account — navigation tabs
   -------------------------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	border: 1px solid var(--mv-default-40);
	border-radius: 0;
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--mv-default-40);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	color: var(--mv-highlight);
}

/* --------------------------------------------------------------------------
   Header / footer brand strip on Woo pages
   (so the user doesn't feel "thrown" to another site)
   Add a logo + back-to-shop link via a hooked template part if needed.
   -------------------------------------------------------------------------- */
.mv-checkout-header {
	text-align: center;
	padding: 32px 0;
	border-bottom: 1px solid var(--mv-default-40);
	margin-bottom: 40px;
}
.mv-checkout-header .mv-logo {
	font-family: var(--mv-font-display);
	font-size: 1.8rem;
	letter-spacing: 0.1em;
	color: var(--mv-default);
}
.mv-checkout-header .mv-back-link {
	display: block;
	margin-top: 8px;
	font-family: var(--mv-font-meta);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mv-default-60);
}


/* Order notes textarea fix */
.woocommerce form .form-row textarea,
#order_comments,
.woocommerce-additional-fields textarea {
	background-color: transparent !important;
	border: 1px solid var(--mv-default-40) !important;
	color: var(--mv-default) !important;
	border-radius: 0 !important;
}
#order_comments::placeholder {
	color: var(--mv-default-40) !important;
}

/* Branded footer on Woo pages */
.mv-checkout-footer {
	text-align: center;
	padding: 24px 0 48px;
}
.mv-checkout-footer .mv-copyright {
	font-family: var(--mv-font-meta);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--mv-default-40);
	margin: 16px 0 0;
}
/* Center the header logo + back link properly */
.mv-checkout-header .mv-logo {
	display: block;
	text-decoration: none;
}
.mv-checkout-header .mv-back-link:hover {
	color: var(--mv-highlight);
}