/*
 * Cola Storefront/WooCommerce -> design system Certisign. Mobile First:
 * o CSS sem media query é o layout de 360 px; min-width (768/1024) vem logo
 * abaixo de cada bloco e :hover só dentro de @media (hover: hover).
 * Sem !important: o prefixo "html body" sobe a especificidade acima do CSS do
 * Storefront e do customizer (que é impresso depois no <head>).
 */

/* ---------- Layout ---------- */
html body .col-full {
	box-sizing: border-box;
	width: 90%;
	max-width: var(--cs-layout-container-content-desktop);
	margin-right: auto;
	margin-left: auto;
	padding-right: 0;
	padding-left: 0;
}

/* Páginas sem sidebar (carrinho, checkout, conta): conteúdo na largura do container. */
html body.poc-no-sidebar .content-area {
	float: none;
	width: 100%;
	margin: 0;
}

/* ---------- Header ---------- */
html body .site-header {
	background: var(--cs-color-base-white);
	border-bottom: 0;
	padding-top: var(--cs-space-4);
	padding-bottom: var(--cs-space-4);
	color: var(--cs-color-texto-primario);
}

html body .site-header a:not(.button),
html body .site-header .site-branding a {
	color: var(--cs-color-texto-primario);
}

html body .main-navigation ul li a,
html body .secondary-navigation ul li a {
	min-width: 40px;
	padding-top: var(--cs-space-3);
	padding-bottom: var(--cs-space-3);
	font-size: var(--cs-font-size-text-label);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-label);
	letter-spacing: var(--cs-font-letter-text-label);
}

html body .main-navigation ul.menu > li.current-menu-item > a {
	color: var(--cs-color-institucional-primary);
}

html body .main-navigation ul ul {
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-border-light);
	border-radius: 8px;
}

@media (hover: hover) {
	html body .site-header a:not(.button):hover {
		color: var(--cs-color-institucional-primary);
	}

	html body .main-navigation ul.menu > li > a:hover {
		color: var(--cs-color-institucional-primary);
	}
}

/* ---------- Footer ---------- */
html body .site-footer {
	background: var(--cs-color-bg-subtle);
	border-top: 0;
	color: var(--cs-color-texto-muted);
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

html body .site-footer a:not(.button) {
	color: var(--cs-color-texto-muted);
	text-decoration: underline;
}

html body .site-footer a:not(.button):focus-visible {
	color: var(--cs-color-institucional-primary);
}

html body .site-footer h1,
html body .site-footer h2,
html body .site-footer h3,
html body .site-footer h4,
html body .site-footer .widget-title {
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-title);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-title);
}

@media (hover: hover) {
	html body .site-footer a:not(.button):hover {
		color: var(--cs-color-institucional-primary);
	}
}

/* ---------- Breadcrumb ---------- */
html body .storefront-breadcrumb {
	margin: var(--cs-space-4) 0;
	padding: 0;
	color: var(--cs-color-texto-muted);
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

/* Área de toque de 40 px sem aumentar a altura da linha (padding compensado pela margem). */
html body .storefront-breadcrumb a {
	display: inline-block;
	min-width: 40px;
	margin: -10px 0;
	padding: 10px 0;
	color: var(--cs-color-institucional-primary);
}

/* ---------- Widgets (sidebar) ---------- */
html body .widget {
	color: var(--cs-color-texto-muted);
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

html body .widget a:not(.button) {
	color: var(--cs-color-texto-primario);
}

html body .widget_product_categories ul li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 40px;
}

html body .widget_product_categories ul li a {
	display: flex;
	align-items: center;
	flex: 1;
	min-height: 40px;
}

/* Textos auxiliares do Woo: mínimo de 14 px (o Storefront usa 0.875em ≈ 12 px). */
html body .woocommerce-result-count,
html body .breadcrumb-separator,
html body .widget .count,
html body .woocommerce-pagination .page-numbers,
html body .woocommerce-Price-currencySymbol {
	font-size: var(--cs-font-size-text-body);
}

html body .site-branding a,
html body .site-footer .site-info a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
}

/* ---------- Paginação e remover item do mini-carrinho ---------- */
html body .woocommerce-pagination ul.page-numbers li .page-numbers {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 40px;
	min-height: 40px;
}

html body .woocommerce-pagination ul.page-numbers li .page-numbers {
	box-sizing: border-box;
	background: transparent;
	border: 1px solid var(--cs-color-border-default);
	border-radius: 8px;
	color: var(--cs-color-texto-primario);
	transition:
		background var(--cs-transition-default),
		border-color var(--cs-transition-default),
		color var(--cs-transition-default);
}

html body .woocommerce-pagination ul.page-numbers li a.page-numbers:not(.current) {
	color: var(--cs-color-texto-primario);
}

html body .woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background: var(--cs-color-institucional-primary);
	border-color: var(--cs-color-institucional-primary);
	color: var(--cs-color-base-white);
}

html body .woocommerce-pagination ul.page-numbers li .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--cs-color-texto-muted);
}

html body .woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	background: var(--cs-color-base-grey-100);
	border-color: var(--cs-color-institucional-primary);
	color: var(--cs-color-institucional-primary);
}

@media (hover: hover) {
	html body .woocommerce-pagination ul.page-numbers li a.page-numbers:hover {
		background: var(--cs-color-base-grey-100);
		border-color: var(--cs-color-institucional-primary);
		color: var(--cs-color-institucional-primary);
	}
}

/* Preços: texto primário do DS (o customizer do Storefront usa cinzas fora da paleta). */
html body .price,
html body ul.products li.product .price,
html body ul.products .wc-block-grid__product .price,
html body .wc-block-grid__products li.product .price,
html body .price .woocommerce-Price-amount,
html body .price .woocommerce-Price-currencySymbol,
html body .woocommerce-Price-amount,
html body .woocommerce-Price-currencySymbol,
html body .storefront-sticky-add-to-cart__content-price,
html body .wc-block-components-product-price,
html body .wc-block-formatted-money-amount {
	color: var(--cs-color-texto-primario);
}

/* Painel do mini-carrinho: superfície branca, borda e raio do DS, texto na escala. */
html body .site-header-cart .widget_shopping_cart {
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-border-default);
	border-radius: 8px;
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
}

html body .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total {
	background: var(--cs-color-bg-subtle);
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-label);
	line-height: var(--cs-font-line-text-label);
}

html body .site-header-cart .widget_shopping_cart .woocommerce-mini-cart-item .quantity,
html body .site-header-cart .widget_shopping_cart .woocommerce-mini-cart__total .woocommerce-Price-amount {
	color: var(--cs-color-texto-primario);
}

html body .woocommerce-mini-cart-item a.remove {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	font-size: var(--cs-font-size-text-title);
}

/* ---------- Botões ---------- */
/* Padrão = secundário (contorno institucional). */
html body a.button,
html body button.button,
html body .button,
html body .added_to_cart,
html body input[type="submit"],
html body input[type="button"],
html body .woocommerce button[type="submit"] {
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 10px 16px;
	background: transparent;
	border: 1px solid var(--cs-color-institucional-primary);
	border-radius: 8px;
	box-shadow: none;
	color: var(--cs-color-institucional-primary);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-label);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-label);
	letter-spacing: var(--cs-font-letter-text-label);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition:
		background var(--cs-transition-default),
		border-color var(--cs-transition-default),
		color var(--cs-transition-default);
}

html body a.button:focus-visible,
html body button.button:focus-visible,
html body .button:focus-visible,
html body .added_to_cart:focus-visible,
html body input[type="submit"]:focus-visible,
html body input[type="button"]:focus-visible,
html body .woocommerce button[type="submit"]:focus-visible,
html body a.button:active,
html body button.button:active,
html body .button:active,
html body input[type="submit"]:active {
	background: var(--cs-color-base-grey-100);
	border-color: var(--cs-color-institucional-primary);
	color: var(--cs-color-institucional-primary);
	text-decoration: none;
}

/* Ações principais = primário. */
html body a.button.alt,
html body button.button.alt,
html body input.button.alt,
html body .button.alt,
html body button.alt,
html body a.add_to_cart_button,
html body .single_add_to_cart_button,
html body .checkout-button,
html body #place_order,
html body .woocommerce-form-login__submit,
html body .woocommerce-Button.button {
	background: var(--cs-color-institucional-primary);
	border-color: var(--cs-color-institucional-primary);
	color: var(--cs-color-base-white);
}

html body a.button.alt:focus-visible,
html body button.button.alt:focus-visible,
html body input.button.alt:focus-visible,
html body .button.alt:focus-visible,
html body button.alt:focus-visible,
html body a.add_to_cart_button:focus-visible,
html body .single_add_to_cart_button:focus-visible,
html body .checkout-button:focus-visible,
html body #place_order:focus-visible,
html body .woocommerce-form-login__submit:focus-visible,
html body .woocommerce-Button.button:focus-visible,
html body a.button.alt:active,
html body button.button.alt:active,
html body .button.alt:active,
html body a.add_to_cart_button:active,
html body .single_add_to_cart_button:active,
html body .checkout-button:active,
html body #place_order:active {
	background: var(--cs-color-institucional-primary-hover);
	border-color: var(--cs-color-institucional-primary-hover);
	color: var(--cs-color-base-white);
}

/* Desabilitado (vem depois para vencer foco/active). */
html body a.button.disabled,
html body button.button:disabled,
html body .button.disabled,
html body .button:disabled,
html body button.alt.disabled,
html body input[type="submit"]:disabled,
html body .single_add_to_cart_button.disabled,
html body .single_add_to_cart_button:disabled,
html body #place_order:disabled {
	background: var(--cs-color-base-grey-500);
	border-color: var(--cs-color-base-grey-500);
	color: var(--cs-color-base-white);
	cursor: not-allowed;
	opacity: 1;
	pointer-events: none;
}

html body .added_to_cart {
	margin-left: var(--cs-space-2);
}

/* Carrinho/checkout em blocos e mini-carrinho: ação principal = primário; "Ver carrinho" = secundário. */
html body .wc-block-components-button.wc-block-cart__submit-button,
html body .wc-block-components-button.wc-block-components-checkout-place-order-button,
html body .widget_shopping_cart .buttons a.button,
html body .woocommerce-mini-cart__buttons a.button {
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 10px 16px;
	border: 1px solid var(--cs-color-institucional-primary);
	border-radius: 8px;
	box-shadow: none;
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-label);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-label);
	letter-spacing: var(--cs-font-letter-text-label);
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	transition:
		background var(--cs-transition-default),
		border-color var(--cs-transition-default),
		color var(--cs-transition-default);
}

html body .wc-block-components-button.wc-block-cart__submit-button,
html body .wc-block-components-button.wc-block-components-checkout-place-order-button,
html body .widget_shopping_cart .buttons a.button.checkout,
html body .woocommerce-mini-cart__buttons a.button.checkout {
	background: var(--cs-color-institucional-primary);
	border-color: var(--cs-color-institucional-primary);
	color: var(--cs-color-base-white);
}

html body .widget_shopping_cart .buttons a.button:not(.checkout),
html body .woocommerce-mini-cart__buttons a.button:not(.checkout) {
	background: transparent;
	color: var(--cs-color-institucional-primary);
}

html body .wc-block-components-button.wc-block-cart__submit-button:focus-visible,
html body .wc-block-components-button.wc-block-components-checkout-place-order-button:focus-visible,
html body .wc-block-components-button.wc-block-cart__submit-button:active,
html body .wc-block-components-button.wc-block-components-checkout-place-order-button:active,
html body .widget_shopping_cart .buttons a.button.checkout:focus-visible,
html body .woocommerce-mini-cart__buttons a.button.checkout:focus-visible {
	background: var(--cs-color-institucional-primary-hover);
	border-color: var(--cs-color-institucional-primary-hover);
	color: var(--cs-color-base-white);
}

html body .widget_shopping_cart .buttons a.button:not(.checkout):focus-visible,
html body .woocommerce-mini-cart__buttons a.button:not(.checkout):focus-visible {
	background: var(--cs-color-base-grey-100);
	color: var(--cs-color-institucional-primary);
}

html body .wc-block-components-button.wc-block-components-checkout-place-order-button:disabled,
html body .wc-block-components-button.wc-block-cart__submit-button.disabled {
	background: var(--cs-color-base-grey-500);
	border-color: var(--cs-color-base-grey-500);
	color: var(--cs-color-base-white);
	cursor: not-allowed;
	pointer-events: none;
}

@media (hover: hover) {
	html body .wc-block-components-button.wc-block-cart__submit-button:hover,
	html body .wc-block-components-button.wc-block-components-checkout-place-order-button:hover,
	html body .widget_shopping_cart .buttons a.button.checkout:hover,
	html body .woocommerce-mini-cart__buttons a.button.checkout:hover {
		background: var(--cs-color-institucional-primary-hover);
		border-color: var(--cs-color-institucional-primary-hover);
		color: var(--cs-color-base-white);
	}

	html body .widget_shopping_cart .buttons a.button:not(.checkout):hover,
	html body .woocommerce-mini-cart__buttons a.button:not(.checkout):hover {
		background: var(--cs-color-base-grey-100);
		color: var(--cs-color-institucional-primary);
	}
}

@media (hover: hover) {
	html body a.button:hover,
	html body button.button:hover,
	html body .button:hover,
	html body .added_to_cart:hover,
	html body input[type="submit"]:hover,
	html body input[type="button"]:hover,
	html body .woocommerce button[type="submit"]:hover {
		background: var(--cs-color-base-grey-100);
		border-color: var(--cs-color-institucional-primary);
		color: var(--cs-color-institucional-primary);
		text-decoration: none;
	}

	html body a.button.alt:hover,
	html body button.button.alt:hover,
	html body input.button.alt:hover,
	html body .button.alt:hover,
	html body button.alt:hover,
	html body a.add_to_cart_button:hover,
	html body .single_add_to_cart_button:hover,
	html body .checkout-button:hover,
	html body #place_order:hover,
	html body .woocommerce-form-login__submit:hover,
	html body .woocommerce-Button.button:hover {
		background: var(--cs-color-institucional-primary-hover);
		border-color: var(--cs-color-institucional-primary-hover);
		color: var(--cs-color-base-white);
	}

	html body a.button.disabled:hover,
	html body button.button:disabled:hover,
	html body .button.disabled:hover,
	html body .button:disabled:hover,
	html body input[type="submit"]:disabled:hover,
	html body .single_add_to_cart_button.disabled:hover,
	html body .single_add_to_cart_button:disabled:hover,
	html body #place_order:disabled:hover {
		background: var(--cs-color-base-grey-500);
		border-color: var(--cs-color-base-grey-500);
		color: var(--cs-color-base-white);
	}
}

/* ---------- Avisos (.cs-alert) ---------- */
html body .woocommerce-message,
html body .woocommerce-info,
html body .woocommerce-error,
html body .woocommerce-noreviews,
html body p.no-comments {
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cs-space-2);
	margin: 0 0 var(--cs-space-4);
	padding: var(--cs-space-3) var(--cs-space-4);
	background: var(--cs-color-base-grey-100);
	border: 0;
	border-radius: 8px;
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
	list-style: none;
}

html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body .woocommerce-error::before {
	position: static;
	margin: 0;
	color: inherit;
}

html body .woocommerce-message {
	background: var(--cs-color-feedback-positivo-suave);
	color: var(--cs-color-feedback-positivo);
}

html body .woocommerce-info {
	background: var(--cs-color-institucional-gelo);
	color: var(--cs-color-institucional-primary);
}

html body .woocommerce-error {
	color: var(--cs-color-feedback-negativo);
}

html body .woocommerce-error li {
	margin: 0;
	padding: 0;
}

html body .woocommerce-message .button,
html body .woocommerce-info .button,
html body .woocommerce-error .button {
	margin-left: auto;
}

/* ---------- Campos (.cs-input / .cs-select) ---------- */
/* Um campo por linha no mobile; 2 colunas só a partir de 768. */
html body .woocommerce form .form-row,
html body .woocommerce-page form .form-row {
	float: none;
	width: 100%;
}

html body .woocommerce form .form-row label,
html body .woocommerce-page form .form-row label,
html body .comment-form label {
	margin-bottom: var(--cs-space-1);
	color: var(--cs-color-base-grey-800);
	font-size: var(--cs-font-size-text-body);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body);
	letter-spacing: var(--cs-font-letter-text-body);
}

/* Checkbox/radio: área de toque de 40 px pelo label. */
html body .woocommerce form .form-row label.checkbox,
html body .woocommerce form .form-row label.woocommerce-form__label-for-checkbox,
html body .woocommerce form .form-row .input-radio + label {
	display: flex;
	align-items: center;
	gap: var(--cs-space-2);
	min-height: 40px;
}

/* Campos a 16 px no mobile (evita zoom do iOS). */
html body input[type="text"],
html body input[type="email"],
html body input[type="url"],
html body input[type="password"],
html body input[type="search"],
html body input[type="number"],
html body input[type="tel"],
html body textarea,
html body .woocommerce form .form-row input.input-text,
html body .woocommerce form .form-row textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 40px;
	padding: 4px 16px;
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-base-grey-400);
	border-radius: 4px;
	box-shadow: none;
	outline: 0;
	color: var(--cs-color-texto-primario);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-title);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-title);
	letter-spacing: var(--cs-font-letter-text-title);
	transition: border-color var(--cs-transition-default);
}

html body textarea {
	padding-top: var(--cs-space-2);
	padding-bottom: var(--cs-space-2);
}

html body input[type="text"]::placeholder,
html body input[type="email"]::placeholder,
html body input[type="password"]::placeholder,
html body input[type="search"]::placeholder,
html body input[type="tel"]::placeholder,
html body textarea::placeholder {
	color: var(--cs-color-texto-muted);
	opacity: 1;
}

html body input[type="text"]:focus,
html body input[type="email"]:focus,
html body input[type="url"]:focus,
html body input[type="password"]:focus,
html body input[type="search"]:focus,
html body input[type="number"]:focus,
html body input[type="tel"]:focus,
html body textarea:focus,
html body .woocommerce form .form-row input.input-text:focus,
html body .woocommerce form .form-row textarea:focus {
	border-color: var(--cs-color-institucional-primary);
	box-shadow: none;
}

html body input[type="text"]:focus-visible,
html body input[type="email"]:focus-visible,
html body input[type="url"]:focus-visible,
html body input[type="password"]:focus-visible,
html body input[type="search"]:focus-visible,
html body input[type="number"]:focus-visible,
html body input[type="tel"]:focus-visible,
html body textarea:focus-visible,
html body .woocommerce form .form-row input.input-text:focus-visible,
html body .woocommerce form .form-row textarea:focus-visible {
	outline: 2px solid var(--cs-color-institucional-primary);
	outline-offset: 2px;
}

html body input:disabled,
html body textarea:disabled,
html body select:disabled {
	border-color: var(--cs-color-base-grey-400);
	color: var(--cs-color-base-grey-500);
	cursor: not-allowed;
}

html body .woocommerce form .form-row.woocommerce-invalid label {
	color: var(--cs-color-feedback-negativo);
}

html body .woocommerce form .form-row.woocommerce-invalid input.input-text,
html body .woocommerce form .form-row.woocommerce-invalid input.input-text:focus,
html body .woocommerce form .form-row.woocommerce-invalid select,
html body .woocommerce form .form-row.woocommerce-invalid .select2-selection {
	border-color: var(--cs-color-feedback-negativo);
}

html body select,
html body .woocommerce form .form-row select,
html body .woocommerce div.product form.cart .variations select {
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	padding: 4px 40px 4px 16px;
	background-color: var(--cs-color-bg-surface);
	background-image: linear-gradient(45deg, transparent 50%, var(--cs-color-base-grey-800) 50%), linear-gradient(135deg, var(--cs-color-base-grey-800) 50%, transparent 50%);
	background-position: calc(100% - 20px) 17px, calc(100% - 15px) 17px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	border: 1px solid var(--cs-color-base-grey-400);
	border-radius: 4px;
	box-shadow: none;
	outline: 0;
	appearance: none;
	color: var(--cs-color-texto-primario);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-title);
	line-height: var(--cs-font-line-text-title);
	cursor: pointer;
}

html body select:focus-visible {
	border-color: var(--cs-color-institucional-primary);
	outline: 2px solid var(--cs-color-institucional-primary);
	outline-offset: 2px;
}

/* selectWoo (país/estado no checkout) */
html body .select2-container--default .select2-selection--single {
	box-sizing: border-box;
	height: 40px;
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-base-grey-400);
	border-radius: 4px;
}

html body .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 40px 0 16px;
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-title);
	line-height: 38px;
}

html body .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 38px;
	right: var(--cs-space-2);
}

html body .select2-container--default.select2-container--focus .select2-selection--single,
html body .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--cs-color-institucional-primary);
}

html body input[type="radio"] {
	accent-color: var(--cs-color-institucional-primary);
}

html body input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	accent-color: var(--cs-color-institucional-primary);
}

@media (hover: hover) {
	html body input[type="text"]:hover,
	html body input[type="email"]:hover,
	html body input[type="url"]:hover,
	html body input[type="password"]:hover,
	html body input[type="search"]:hover,
	html body input[type="number"]:hover,
	html body input[type="tel"]:hover,
	html body textarea:hover,
	html body select:hover {
		border-color: var(--cs-color-base-grey-800);
	}

	html body .woocommerce form .form-row.woocommerce-invalid input.input-text:hover {
		border-color: var(--cs-color-feedback-negativo);
	}
}

@media (min-width: 768px) {
	html body input[type="text"],
	html body input[type="email"],
	html body input[type="url"],
	html body input[type="password"],
	html body input[type="search"],
	html body input[type="number"],
	html body input[type="tel"],
	html body textarea,
	html body .woocommerce form .form-row input.input-text,
	html body .woocommerce form .form-row textarea,
	html body select,
	html body .woocommerce form .form-row select,
	html body .select2-container--default .select2-selection--single .select2-selection__rendered {
		font-size: var(--cs-font-size-text-body);
		line-height: var(--cs-font-line-text-body);
		letter-spacing: var(--cs-font-letter-text-body);
	}

	html body .select2-container--default .select2-selection--single .select2-selection__rendered {
		line-height: 38px;
	}

	html body .woocommerce form .form-row-first {
		float: left;
		width: 47%;
	}

	html body .woocommerce form .form-row-last {
		float: right;
		width: 47%;
	}
}

/* ---------- Grid de produtos ---------- */
html body ul.products[class*="columns-"] {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cs-layout-gutter);
	margin: 0 0 var(--cs-space-8);
	padding: 0;
}

html body ul.products[class*="columns-"]::before,
html body ul.products[class*="columns-"]::after {
	display: none;
}

/* Classes repetidas (.products, .product): o Storefront usa ".site-main ul.products.columns-N li.product"
   e variantes full-width com especificidade maior; sem isso o card herda float, largura % e margem direita. */
html body .site-main ul.products.products[class*="columns-"] li.product.product {
	float: none;
	width: auto;
	margin: 0;
	padding: var(--cs-space-4);
	background: var(--cs-color-bg-surface);
	border: 1px solid var(--cs-color-border-light);
	border-radius: 8px;
}

@media (min-width: 768px) {
	html body ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	html body ul.products[class*="columns-"] {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1440px) {
	html body ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ---------- Título e preço ---------- */
html body .woocommerce-loop-product__title,
html body .woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: var(--cs-space-2) 0;
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-title);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-title);
	letter-spacing: var(--cs-font-letter-text-title-bold);
}

html body .woocommerce div.product .product_title {
	color: var(--cs-color-base-grey-800);
	font-size: var(--cs-font-size-header-h5);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-header-h5);
	letter-spacing: normal;
}

@media (min-width: 768px) {
	html body .woocommerce div.product .product_title {
		font-size: var(--cs-font-size-header-h3);
		line-height: var(--cs-font-line-header-h3);
	}
}

html body .woocommerce ul.products li.product .price,
html body .woocommerce div.product p.price,
html body .woocommerce div.product span.price {
	color: var(--cs-color-texto-primario);
	font-size: var(--cs-font-size-text-title);
	font-weight: var(--cs-font-weight-semibold);
	line-height: var(--cs-font-line-text-title);
	letter-spacing: var(--cs-font-letter-text-title-bold);
}

html body .woocommerce .price del {
	color: var(--cs-color-texto-secundario);
	font-weight: var(--cs-font-weight-regular);
	opacity: 1;
}

html body .woocommerce .price ins {
	background: transparent;
	color: var(--cs-color-feedback-positivo);
	font-weight: var(--cs-font-weight-semibold);
	text-decoration: none;
}

/* ---------- Badge (.cs-tag) ---------- */
html body .woocommerce span.onsale,
html body span.onsale {
	box-sizing: border-box;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	top: var(--cs-space-2);
	left: var(--cs-space-2);
	min-width: 0;
	min-height: 24px;
	height: 24px;
	margin: 0;
	padding: 4px 6px;
	background: var(--cs-color-feedback-alerta-suave);
	border: 0;
	border-radius: 30px;
	color: var(--cs-color-feedback-alerta);
	font-family: var(--cs-font-family);
	font-size: var(--cs-font-size-text-body-small);
	font-weight: var(--cs-font-weight-regular);
	line-height: var(--cs-font-line-text-body-small);
	letter-spacing: var(--cs-font-letter-text-body-small);
	white-space: nowrap;
}

/* ---------- Auditoria UX: texto ≥ 14 px, alvos ≥ 40 px, contraste AA ---------- */
/* O Storefront, o Woo Blocks e o plugin do Mercado Pago usam 0.75–0.875em (≈ 10–12 px).
   Seletores com a classe do pai para vencer a especificidade deles sem !important. */
html body .menu-toggle,
html body .menu-toggle span,
html body .woocommerce-breadcrumb,
html body .woocommerce-breadcrumb a,
html body .site-header-cart .count,
html body .site-header-cart a,
html body .woocommerce-mini-cart__empty-message,
html body .storefront-handheld-footer-bar ul li.cart a.footer-cart-contents .count,
html body .widget.woocommerce li,
html body .widget.woocommerce li a,
html body .widget.woocommerce li .count,
html body .product_meta,
html body .product_meta .posted_in,
html body .product_meta a,
html body .mp-step-mark,
html body .wc-block-components-product-metadata .wc-block-components-product-metadata__description p,
html body .wc-block-components-totals-item__description .wc-block-components-totals-footer-item-shipping,
html body .wc-block-components-totals-item__value .wc-block-components-shipping-placeholder__value,
html body .wc-blocks-components-select .wc-blocks-components-select__label,
html body .wc-block-components-order-summary-item__image .wc-block-components-order-summary-item__quantity span,
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button {
	font-size: var(--cs-font-size-text-body);
	line-height: var(--cs-font-line-text-body);
}

/* O Mercado Pago fixa 12 px com !important e seletor de id: só !important vence. */
html body #mp-checkout-credits-root.mp-checkout-credits-container .mp-checkout-redirect-v3-container,
html body #mp-checkout-credits-root.mp-checkout-credits-container [class*="mp-checkout-redirect-v3-"] {
	font-size: var(--cs-font-size-text-body) !important;
	line-height: var(--cs-font-line-text-body) !important;
}

/* Links soltos no texto: área de toque de 40 px sem aumentar a altura da linha. */
html body .product_meta a,
html body .woocommerce-mini-cart-item a:not(.remove),
html body .mp-credits-tooltip-link a,
html body .mp-checkout-container .mp-test-mode-link,
html body .wc-block-components-product-name,
html body .wc-block-checkout__login-prompt,
html body .wc-block-components-address-card .wc-block-components-address-card__edit,
html body .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle {
	display: inline-flex;
	align-items: center;
	min-width: 40px;
	min-height: 40px;
	margin-top: -10px;
	margin-bottom: -10px;
}

html body .menu-toggle,
html body .woocommerce-product-gallery .woocommerce-product-gallery__trigger,
html body .wc-block-components-quantity-selector .wc-block-components-quantity-selector__button,
html body .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
html body .wc-block-components-panel .wc-block-components-panel__button {
	min-width: 40px;
	min-height: 40px;
}

html body .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
	width: 40px;
	height: 40px;
}

html body .wc-block-components-quantity-selector {
	width: auto;
}

html body .wc-block-components-checkbox label,
html body .wc-block-components-radio-control .wc-block-components-radio-control__option {
	display: flex;
	align-items: center;
	min-height: 40px;
}

/* Contraste AA: links do Mercado Pago e da meta do produto, selo do modo teste. */
html body .mp-credits-tooltip-link {
	--andes-accent-color: var(--cs-color-institucional-primary);
}

html body .product_meta a {
	color: var(--cs-color-institucional-primary);
}

/* O plugin fixa o texto branco com !important sobre laranja (2,65:1). */
html body .mp-checkout-container .mp-test-mode-badge {
	color: var(--cs-color-base-grey-900) !important;
}

/* ---------- Checkout: formulário de endereço (entrega = cobrança) ---------- */
/* O form de endereço dos blocos é flex-wrap; a ordem vem de `order`, sem mexer no DOM do React.
   Sequência: nome, sobrenome, telefone, CPF/CNPJ, CEP, endereço, complemento, número, bairro, cidade, estado.
   O plugin do Melhor Envio define outra ordem com seletor de 1 classe; o prefixo de 2 classes vence. */
html body .wc-block-components-address-form .wc-block-components-address-form__first_name {
	order: 1;
}

html body .wc-block-components-address-form .wc-block-components-address-form__last_name {
	order: 2;
}

html body .wc-block-components-address-form .wc-block-components-address-form__phone {
	order: 3;
}

html body .wc-block-components-address-form .wc-block-components-address-form__melhor-envio-cotacao-billing-document {
	order: 4;
}

html body .wc-block-components-address-form .wc-block-components-address-form__postcode {
	order: 5;
}

html body .wc-block-components-address-form .wc-block-components-address-form__address_1 {
	order: 6;
}

html body .wc-block-components-address-form .wc-block-components-address-form__address_2-toggle,
html body .wc-block-components-address-form .wc-block-components-address-form__address_2,
html body .wc-block-components-address-form .wc-block-components-address-form__address_2-hidden-input {
	order: 7;
}

html body .wc-block-components-address-form .wc-block-components-address-form__melhor-envio-cotacao-address-number {
	order: 8;
}

html body .wc-block-components-address-form .wc-block-components-address-form__melhor-envio-cotacao-neighborhood {
	order: 9;
}

html body .wc-block-components-address-form .wc-block-components-address-form__city {
	order: 10;
}

html body .wc-block-components-address-form .wc-block-components-address-form__state {
	order: 11;
}

/* Só o Brasil é atendido (país fixo em BR nas opções do Woo): o campo não precisa aparecer. */
html body .wc-block-components-address-form .wc-block-components-address-form__country {
	display: none;
}

/* Cobrança sempre igual à entrega: o checkbox some e o formulário de cobrança nunca abre. */
html body .wc-block-checkout__use-address-for-billing {
	display: none;
}

/* CEP e endereço lado a lado, do tamanho do telefone; o complemento (ao abrir) fica numa linha própria,
   com a mesma largura, entre eles e o número. 400 px é o mesmo ponto em que o Woo Blocks passa os campos
   para meia largura (media query do próprio plugin): abaixo disso tudo fica em uma coluna. */
@media (min-width: 400px) {
	html body .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_1,
	html body .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__address_1 {
		flex: 1 0 calc(50% - 12px);
	}

	html body .wc-block-checkout__shipping-fields .wc-block-components-address-form .wc-block-components-address-form__address_2,
	html body .wc-block-checkout__billing-fields .wc-block-components-address-form .wc-block-components-address-form__address_2 {
		flex: 0 0 calc((100% - 12px) / 2);
		margin-right: calc((100% - 12px) / 2 + 12px);
	}
}

/* Resumo do pedido sempre visível ao rolar: o Woo já o marca como sticky, mas o overflow-x: hidden do
   body e do .hfeed (Storefront) vira container de rolagem e anula o sticky. `clip` corta o excesso
   horizontal sem criar container de rolagem. Se o resumo for mais alto que a tela, rola por dentro. */
html body.woocommerce-checkout,
html body.woocommerce-cart,
html body.woocommerce-checkout .hfeed,
html body.woocommerce-cart .hfeed {
	overflow-x: clip;
	overflow-y: visible;
}

html body .wc-block-checkout__sidebar.is-sticky {
	max-height: calc(100vh - 48px);
	overflow-y: auto;
}

/* ---------- Carrinho com o mesmo layout do checkout ---------- */
/* Resumo em cartão, igual ao do checkout, e fixo ao rolar a partir de tablet. */
html body .wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-block {
	padding: 0 var(--cs-space-4);
	border: 1px solid var(--cs-color-border-default);
	border-radius: 8px;
}

@media (min-width: 768px) {
	html body .wc-block-cart.wp-block-woocommerce-filled-cart-block {
		min-height: calc(100vh - 48px);
	}

	html body .wc-block-cart__sidebar {
		position: sticky;
		top: 24px;
		align-self: flex-start;
		max-height: calc(100vh - 48px);
		overflow-y: auto;
	}
}

/* ---------- Resumo do carrinho sempre visível (todas as páginas, menos carrinho e checkout) ---------- */
/* O carrinho do cabeçalho vira uma barra flutuante de 64 px no canto inferior direito do container, e o
   mini-carrinho abre para cima. No mobile o Storefront já fixa o carrinho no rodapé. */
@media (min-width: 768px) {
	html body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header-cart {
		position: fixed;
		right: max(5vw, calc((100vw - var(--cs-layout-container-content-desktop)) / 2));
		bottom: var(--cs-space-4);
		min-width: 256px;
		width: auto;
		z-index: 1000;
		margin: 0;
		background: var(--cs-color-bg-surface);
		border: 1px solid var(--cs-color-border-default);
		border-radius: 8px;
		box-shadow: 0 2px 8px color-mix(in srgb, var(--cs-color-base-black) 20%, transparent);
	}

	html body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header-cart .cart-contents {
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 48px;
		gap: var(--cs-space-2);
		padding: 0 var(--cs-space-4);
	}

	html body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header-cart .widget_shopping_cart {
		top: auto;
		bottom: 100%;
		max-height: calc(100vh - 120px);
		overflow-y: auto;
	}
}

@media (min-width: 768px) {
	html body:not(.woocommerce-cart):not(.woocommerce-checkout) .site-header-cart .cart-contents::after {
		float: none;
		margin: 0;
	}
}

/* ---------- Ícones: Material Symbols no lugar do Font Awesome do Storefront ---------- */
/* O icons.css do Storefront (FA + posicionamento dos ícones) não é mais carregado; aqui ficam o glifo e o mínimo de layout de cada ícone usado. */
html body .widget_search form:not(.wp-block-search)::before,
html body .widget_product_search form:not(.wp-block-search)::before,
html body .storefront-handheld-footer-bar ul li > a::before,
html body .site-header-cart .cart-contents::after,
html body .widget_product_categories ul li::before,
html body .woocommerce-breadcrumb a:first-of-type::before,
html body .woocommerce-breadcrumb .breadcrumb-separator::after,
html body a.remove::before,
html body .wc-forward::after,
html body .woocommerce-pagination .next::after,
html body .woocommerce-pagination .prev::after,
html body .woocommerce-MyAccount-navigation ul li a::before,
html body .woocommerce-tabs ul.tabs li::after,
html body .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before,
html body .show-password-input::after,
html body .woocommerce-message::before,
html body .woocommerce-info::before,
html body .woocommerce-error::before,
html body .button.loading::after,
html body .blockUI::before {
	display: inline-block;
	letter-spacing: normal;
	text-transform: none;
	white-space: nowrap;
	word-wrap: normal;
	font-family: var(--cs-font-family-icon);
	font-style: normal;
	font-variant: normal;
	font-weight: 200;
	line-height: inherit;
	vertical-align: baseline;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
}

/* Glifos */
html body .widget_search form:not(.wp-block-search)::before,
html body .widget_product_search form:not(.wp-block-search)::before,
html body .storefront-handheld-footer-bar ul li.search > a::before,
html body .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before { content: "search"; }
html body .site-header-cart .cart-contents::after,
html body .storefront-handheld-footer-bar ul li.cart > a::before { content: "shopping_cart"; }
html body .storefront-handheld-footer-bar ul li.my-account > a::before,
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-account a::before { content: "person"; }
html body .widget_product_categories ul li::before { content: "topic"; }
html body .woocommerce-breadcrumb a:first-of-type::before { content: "home"; }
html body .woocommerce-breadcrumb .breadcrumb-separator::after,
html body .woocommerce-tabs ul.tabs li::after { content: "chevron_right"; }
html body a.remove::before { content: "cancel"; }
html body .wc-forward::after,
html body .woocommerce-pagination .next::after { content: "navigate_next"; }
html body .woocommerce-pagination .prev::after { content: "navigate_before"; }
html body .show-password-input::after { content: "visibility"; }
html body .woocommerce-message::before { content: "check_circle"; }
html body .woocommerce-info::before { content: "info"; }
html body .woocommerce-error::before { content: "error"; }
html body .button.loading::after,
html body .blockUI::before { content: "autorenew"; animation: cs-spin 0.75s linear infinite; }
html body .woocommerce-MyAccount-navigation ul li a::before { content: "chevron_right"; }
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--dashboard a::before { content: "dashboard"; }
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--orders a::before { content: "orders"; }
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a::before { content: "download"; }
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--edit-address a::before { content: "location_on"; }
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a::before { content: "credit_card"; }
html body .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: "logout"; }

/* Layout */
html body .widget_search form:not(.wp-block-search)::before,
html body .widget_product_search form:not(.wp-block-search)::before {
	position: absolute;
	top: 1em;
	left: 1em;
	line-height: 1;
}

html body .storefront-handheld-footer-bar ul li > a::before {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	font-size: 1.618em;
	line-height: 2.618046972;
	text-align: center;
	text-indent: 0;
	cursor: pointer;
}

html body .site-header-cart .cart-contents::after {
	float: right;
	height: 1em;
	line-height: 1.618;
}

html body .widget_product_categories ul li::before {
	display: block;
	float: left;
	width: 1em;
	margin-right: 0.54em;
	margin-left: -1.618em;
	opacity: 0.35;
}

html body .woocommerce-breadcrumb a:first-of-type::before {
	margin-right: 0.54em;
}

html body .woocommerce-breadcrumb .breadcrumb-separator {
	display: inline-block;
	position: relative;
	padding: 0 0.6em;
	text-indent: -9999px;
}

html body .woocommerce-breadcrumb .breadcrumb-separator::after {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1em;
	height: 1em;
	font-size: 0.875em;
	line-height: 1;
	text-align: center;
	text-indent: 0;
	opacity: 0.25;
	transform: translate(-50%, -50%);
}

html body a.remove {
	position: relative;
	overflow: hidden;
	text-indent: -9999px;
}

html body a.remove::before {
	position: absolute;
	inset: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--cs-color-texto-secundario);
	text-indent: 0;
}

html body .wc-forward::after {
	margin-left: 0.54em;
}

html body .woocommerce-pagination .next,
html body .woocommerce-pagination .prev {
	position: relative;
	overflow: hidden;
	text-indent: -9999px;
}

html body .woocommerce-pagination .next::after,
html body .woocommerce-pagination .prev::after {
	position: absolute;
	top: 50%;
	left: 50%;
	text-indent: 0;
	transform: translate(-50%, -50%);
}

html body .woocommerce-MyAccount-navigation ul li a::before {
	float: right;
	width: 1.41em;
	margin-left: 0.54em;
	line-height: 1.618;
	text-align: right;
	opacity: 0.25;
}

html body .woocommerce-MyAccount-navigation ul li.is-active a::before,
html body .woocommerce-MyAccount-navigation ul li a:focus-visible::before {
	opacity: 1;
}

html body .woocommerce-tabs ul.tabs li::after {
	display: block;
	position: absolute;
	top: 50%;
	right: -1em;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity var(--cs-transition-default);
}

html body .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger::before {
	display: block;
	line-height: 2;
	text-indent: 0;
}

html body .button.loading::after,
html body .blockUI::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	font-size: 20px;
	line-height: 20px;
}

@media (hover: hover) {
	html body .woocommerce-MyAccount-navigation ul li a:hover::before {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .button.loading::after,
	html body .blockUI::before {
		animation: none;
	}
}

/* ---------- Mercado Pago (plugin de terceiros): fonte, links e cores do DS ---------- */
/* !important é inevitável aqui: o CSS do plugin usa !important nas mesmas propriedades. */
html body .mp-checkout-container,
html body .mp-checkout-container *,
html body .mp-checkout-container [class],
html body .mp-credits-tooltip-text,
html body .mp-credits-tooltip-text [class],
html body .mp-credits-modal-container,
html body .mp-credits-modal-container [class] {
	font-family: var(--cs-font-family) !important;
}

html body .mp-checkout-container .mp-terms-and-conditions-link,
html body .mp-checkout-container .mp-test-mode-link,
html body .mp-credits-tooltip-link a,
html body .mp-credits-modal-container a {
	color: var(--cs-color-institucional-primary) !important;
}

html body .mp-checkout-container .mp-terms-and-conditions-link:hover,
html body .mp-checkout-container .mp-test-mode-link:hover,
html body .mp-credits-tooltip-link a:hover,
html body .mp-credits-modal-container a:hover {
	color: var(--cs-color-institucional-primary-hover) !important;
}

html body .mp-credits-tooltip-text,
html body .mp-credits-tooltip-text b,
html body .mp-credits-tooltip-link {
	color: var(--cs-color-texto-primario) !important;
	font-size: var(--cs-font-size-text-body) !important;
	line-height: var(--cs-font-line-text-body) !important;
}

html body .mp-checkout-container .mp-test-mode-card {
	background: var(--cs-color-bg-subtle) !important;
	border-radius: 8px !important;
}

html body .mp-checkout-container .mp-test-mode-badge {
	background: var(--cs-color-feedback-alerta) !important;
	color: var(--cs-color-texto-primario) !important;
}

html body .mp-checkout-container .mp-pix-template-title {
	color: var(--cs-color-texto-primario) !important;
	font-size: var(--cs-font-size-text-title) !important;
	line-height: var(--cs-font-line-text-title) !important;
}

html body .mp-checkout-container .mp-pix-template-description,
html body .mp-checkout-container .mp-input-label {
	color: var(--cs-color-texto-primario) !important;
	font-size: var(--cs-font-size-text-body) !important;
	line-height: var(--cs-font-line-text-body) !important;
}

/* Campos do cartão: o MP renderiza o número/validade/CVV em iframe (não estilizável); alinha o contêiner e o nome do titular. */
html body .mp-checkout-container .mp-checkout-custom-card-input {
	border: 1px solid var(--cs-color-base-grey-400) !important;
	border-radius: 4px !important;
}

html body .mp-checkout-container input.mp-checkout-custom-card-input {
	color: var(--cs-color-texto-primario) !important;
	font-size: var(--cs-font-size-text-title) !important;
}

/* Pix: o plugin fixa a fonte por seletor com #id (e variável própria). */
html body .mp-checkout-container {
	--mp-font-family: var(--cs-font-family) !important;
}

html body .mp-checkout-container #mp-checkout-pix-root.mp-checkout-pix-container .mp-pix-template-container [class] {
	font-family: var(--cs-font-family) !important;
}

/* Cartão: o plugin fixa fonte e borda com cadeia de #ids; :not(#_) soma ids para vencer sem depender da estrutura interna. */
html body #mp-checkout-custom-root *:not(#_):not(#__),
html body #mp-checkout-pix-root *:not(#_):not(#__) {
	font-family: var(--cs-font-family) !important;
}

html body #mp-checkout-custom-root .mp-checkout-custom-card-input:not(#_):not(#__) {
	border: 1px solid var(--cs-color-base-grey-400) !important;
	border-radius: 4px !important;
}