.ggn-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: var(--wp--preset--spacing--card);
}

.ggn-card--lg {
	padding: var(--wp--preset--spacing--card-lg);
}

.ggn-card__media {
	background-color: var(--wp--preset--color--surface);
}

.ggn-card__media img {
	display: block;
	object-fit: contain;
	width: 100%;
}

.ggn-pill {
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--meta);
	padding: var(--wp--custom--pill--padding);
}

.ggn-pill--pending {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}

.ggn-pill--processing {
	background-color: var(--wp--preset--color--warn-soft);
	color: var(--wp--preset--color--warn);
}

.ggn-pill--on-hold {
	background-color: var(--wp--preset--color--warn-soft);
	color: var(--wp--preset--color--warn);
}

.ggn-pill--completed {
	background-color: var(--wp--preset--color--good-soft);
	color: var(--wp--preset--color--good);
}

.ggn-pill--cancelled {
	background-color: var(--wp--preset--color--bad-soft);
	color: var(--wp--preset--color--bad);
}

.ggn-badge {
	background-color: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--text);
}

.ggn-badge--sale {
	background-color: var(--wp--preset--color--sale);
	color: var(--wp--preset--color--bg);
}

.ggn-price {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.ggn-price del {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--meta);
}

/* Shared button sizing */
.wp-element-button,
.wp-block-button__link,
.wc-block-components-button,
.button,
input[type="submit"],
input[type="button"],
button {
	align-items: center;
	box-sizing: border-box;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--custom--font--button);
	font-weight: 600;
	height: var(--wp--custom--button--height);
	justify-content: center;
	line-height: 1.2;
	min-height: var(--wp--custom--button--height);
	padding-bottom: 0;
	padding-top: 0;
	vertical-align: middle;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-secondary .wp-block-button__link {
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--text) 22%, transparent);
	color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus-visible {
	border-color: color-mix(in srgb, var(--wp--preset--color--text) 45%, transparent);
}

.wp-block-button.is-style-icon .wp-block-button__link {
	align-items: center;
	background-color: var(--wp--preset--color--surface-2);
	display: inline-flex;
	justify-content: center;
	height: var(--wp--custom--control--size);
	min-height: var(--wp--custom--control--size);
	min-width: var(--wp--custom--control--size);
	width: var(--wp--custom--control--size);
	padding: var(--wp--custom--control--icon);
	border-radius: var(--wp--custom--radius--control);
}

.wp-block-button.is-style-whatsapp .wp-block-button__link {
	background-color: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--whatsapp-text);
}

.ggn-chip {
	align-items: center;
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	display: inline-flex;
}

.ggn-chip.is-active {
	background-color: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent);
}

/* Shared form controls */
:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea) {
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	box-sizing: border-box;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	min-height: var(--wp--custom--control--size);
	padding: 0 var(--wp--preset--spacing--card);
}

:where(textarea) {
	padding-bottom: var(--wp--preset--spacing--card);
	padding-top: var(--wp--preset--spacing--card);
}

/* Match classic WooCommerce form-row input specificity. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form select,
.woocommerce :where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea) {
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	box-sizing: border-box;
	color: var(--wp--preset--color--text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	min-height: var(--wp--custom--control--size);
	padding: 0 var(--wp--preset--spacing--card);
}

.woocommerce form .form-row textarea {
	padding-bottom: var(--wp--preset--spacing--card);
	padding-top: var(--wp--preset--spacing--card);
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], textarea)::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

:where(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea):focus-visible {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent);
	outline: 0;
}

:where(label, .woocommerce form .form-row label) {
	color: var(--wp--preset--color--text);
}

.woocommerce form .form-row label {
	color: var(--wp--preset--color--text);
}

:where(.required, .required_field, abbr.required) {
	color: var(--wp--preset--color--bad);
}

.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required {
	color: var(--wp--preset--color--bad);
}

:where(form .description, .woocommerce form .form-row .description, .woocommerce form .form-row .woocommerce-input-wrapper + .description) {
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

.woocommerce form .form-row .description {
	color: var(--wp--preset--color--muted);
	font-style: normal;
}

/* WooCommerce notices */
.wc-block-store-notices:not(:has(.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-error, .woocommerce-info)) {
	display: none;
}

.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.wc-block-components-notice-banner {
	background-color: var(--wp--preset--color--surface-2) !important;
	border: 1px solid var(--wp--preset--color--accent) !important;
	border-radius: var(--wp--custom--radius--control);
	box-shadow: none;
	color: var(--wp--preset--color--text) !important;
}

.woocommerce-message {
	border-color: var(--wp--preset--color--good) !important;
}

.woocommerce-error {
	border-color: var(--wp--preset--color--bad) !important;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.wc-block-components-notice-banner > svg,
.wc-block-components-notice-banner__content::before {
	color: var(--wp--preset--color--accent) !important;
}

.woocommerce-message::before {
	color: var(--wp--preset--color--good) !important;
}

.woocommerce-error::before {
	color: var(--wp--preset--color--bad) !important;
}

.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-success > svg {
	border-color: var(--wp--preset--color--good) !important;
	color: var(--wp--preset--color--good) !important;
}

.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-error > svg {
	border-color: var(--wp--preset--color--bad) !important;
	color: var(--wp--preset--color--bad) !important;
}

.wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--text);
}

.woocommerce-info a,
.woocommerce-message a,
.woocommerce-error a,
.wc-block-components-notice-banner a {
	color: var(--wp--preset--color--accent);
}

.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error .button {
	float: none;
}

@media (max-width: 781px) {
	.ggn-chip {
		min-height: var(--wp--custom--control--size);
	}

	.woocommerce-info,
	.woocommerce-message,
	.woocommerce-error {
		align-items: flex-start;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--card);
	}

	.woocommerce-info .button,
	.woocommerce-message .button,
	.woocommerce-error .button {
		align-self: flex-start;
		margin: 0;
		order: 2;
	}

	.wc-block-components-notice-banner__content {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--card);
	}
}

/* #138: notice action links (e.g. "Confirm email address") after the message, readable on the dark notice. */
.wc-block-components-notice-banner.wc-block-components-notice-banner > .wc-block-components-notice-banner__content .wc-forward,
.wc-block-components-notice-banner__content .button,
.woocommerce-info .wc-forward,
.woocommerce-message .wc-forward {
	align-self: flex-start;
	background: none !important;
	border: 0 !important;
	color: var(--wp--preset--color--accent) !important;
	float: none !important;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	margin: 0 !important;
	min-height: var(--wp--custom--control--size);
	opacity: 1 !important;
	order: 2;
	padding: 0 !important;
	text-decoration: underline;
	display: inline-flex;
	align-items: center;
}

.wc-block-components-notice-banner__content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--card);
}

/* Coupon form (cart and checkout totals): same field and secondary button as the rest of the store.
   Four classes so it outranks WooCommerce's .wc-block-components-form .wc-block-components-text-input input[type="text"] (0,3,1). */
.wc-block-components-totals-coupon .wc-block-components-totals-coupon__form .wc-block-components-text-input.wc-block-components-totals-coupon__input input {
	background-color: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--text);
	min-height: var(--wp--custom--control--size);
}

.wc-block-components-totals-coupon .wc-block-components-totals-coupon__form .wc-block-components-text-input.wc-block-components-totals-coupon__input input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.wc-block-components-totals-coupon .wc-block-components-totals-coupon__form .wc-block-components-text-input.wc-block-components-totals-coupon__input input:focus {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent);
}

.wc-block-components-totals-coupon .wc-block-components-text-input label {
	color: var(--wp--preset--color--muted);
}

.wc-block-components-totals-coupon button.wc-block-components-totals-coupon__button {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--text);
	min-height: var(--wp--custom--control--size);
}

.wc-block-components-totals-coupon button.wc-block-components-totals-coupon__button:disabled {
	opacity: .6;
}