/*
 * Meridian — WooCommerce Base CSS
 *
 * The WooCommerce bundled stylesheet is completely removed via the
 * `woocommerce_enqueue_styles` filter in functions.php. This file
 * replaces it with only the structural/layout rules needed for
 * WooCommerce to function correctly. All decorative styling (colors,
 * typography, borders, shadows) is handled by theme.json tokens so
 * the Global Styles panel in the Site Editor works as expected.
 *
 * Chunk 2 (WooCommerce Core Templates) will extend this file with
 * product grid, product page, cart, and checkout-specific rules.
 */

/* -------------------------------------------------------------------------
 * Clearfix — WooCommerce relies on this for some layouts
 * ---------------------------------------------------------------------- */
.woocommerce::after,
.woocommerce-page::after {
	content: "";
	display: table;
	clear: both;
}

/* -------------------------------------------------------------------------
 * Screen-reader text
 * ---------------------------------------------------------------------- */
.woocommerce .screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

/* -------------------------------------------------------------------------
 * Notices — informational, error, success
 * ---------------------------------------------------------------------- */
.woocommerce-notices-wrapper {
	margin-block-end: var(--wp--preset--spacing--24);
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--24);
	padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--24);
	border-left: 3px solid;
	font-size: var(--wp--preset--font-size--sm);
}

.woocommerce-message {
	border-color: var(--wp--preset--color--success);
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 8%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--neutral-800);
}

.woocommerce-error {
	border-color: var(--wp--preset--color--error);
	background-color: color-mix(in srgb, var(--wp--preset--color--error) 8%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--neutral-800);
}

.woocommerce-info {
	border-color: var(--wp--preset--color--accent);
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--neutral-800);
}

/* -------------------------------------------------------------------------
 * Forms — shared input/select/textarea styles
 * WooCommerce renders forms in classic checkout; block checkout uses
 * theme.json tokens directly. Both are covered here.
 * ---------------------------------------------------------------------- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce select,
.woocommerce textarea,
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
	width: 100%;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--16);
	border: 1px solid var(--wp--preset--color--neutral-200);
	border-radius: 0;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
	transition: border-color var(--wp--custom--transition--base);
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-select select:focus,
.wc-block-components-textarea textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--ink);
}

.woocommerce label,
.wc-block-components-form-token-field-label,
.wc-block-components-checkbox__label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--neutral-600);
	margin-block-end: var(--wp--preset--spacing--8);
}

/* -------------------------------------------------------------------------
 * Buttons — WooCommerce-specific button elements
 * Base button appearance comes from theme.json elements.button styles.
 * ---------------------------------------------------------------------- */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce input.button,
.woocommerce input[type="submit"],
.wc-block-components-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--8);
	cursor: pointer;
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--parchment);
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	padding: var(--wp--preset--spacing--12) var(--wp--preset--spacing--32);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1;
	transition:
		background-color var(--wp--custom--transition--smooth),
		border-color var(--wp--custom--transition--smooth),
		color var(--wp--custom--transition--smooth);
}

.woocommerce button.button:hover,
.woocommerce a.button:hover,
.woocommerce input.button:hover,
.woocommerce input[type="submit"]:hover,
.wc-block-components-button:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.woocommerce button.button.alt,
.woocommerce a.button.alt {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover {
	background-color: var(--wp--preset--color--accent-deep);
	border-color: var(--wp--preset--color--accent-deep);
}

/* -------------------------------------------------------------------------
 * Price display
 * ---------------------------------------------------------------------- */
.woocommerce-Price-amount,
.wc-block-components-product-price__value {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
}

del .woocommerce-Price-amount,
.wc-block-components-product-price__regular {
	color: var(--wp--preset--color--neutral-400);
	font-weight: 400;
	text-decoration: line-through;
}

ins .woocommerce-Price-amount,
.wc-block-components-product-price__sale {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Star ratings
 * ---------------------------------------------------------------------- */
.star-rating {
	overflow: hidden;
	position: relative;
	height: 1em;
	line-height: 1;
	font-size: var(--wp--preset--font-size--sm);
	width: 5.4em;
	font-family: "star";
	font-weight: 400;
}

.star-rating::before {
	content: "\73\73\73\73\73";
	color: var(--wp--preset--color--neutral-200);
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	letter-spacing: 0.1em;
}

.star-rating span {
	overflow: hidden;
	float: left;
	top: 0;
	left: 0;
	position: absolute;
	padding-top: 1.5em;
}

.star-rating span::before {
	content: "\73\73\73\73\73";
	top: 0;
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.1em;
}

/* -------------------------------------------------------------------------
 * Block checkout — WooCommerce block component base styles
 * Decorative tokens (color, typography) come from theme.json.
 * These rules handle layout and structural concerns only.
 * ---------------------------------------------------------------------- */
.wc-block-checkout__main,
.wc-block-cart__main {
	display: grid;
	gap: var(--wp--preset--spacing--32);
}

.wc-block-components-form .wc-block-components-form-step {
	margin-block-end: var(--wp--preset--spacing--32);
}

.wc-block-components-checkout-step__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
	letter-spacing: -0.01em;
}

.wc-block-components-order-summary {
	border: 1px solid var(--wp--preset--color--neutral-200);
	padding: var(--wp--preset--spacing--32);
}

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--wp--preset--color--neutral-200);
	padding-top: var(--wp--preset--spacing--24);
}