/* Vitamente Checkout — alinhado ao design system do tema Vitamente.
 *
 * Tokens (cores, spacing, radius, tipografia) vêm do :root do tema.
 * Os defaults dentro de var(..., fallback) garantem que o plugin
 * funciona mesmo em sites sem o tema Vitamente — útil quando você
 * compartilha o plugin com outras lojas.
 *
 * Convenções (DESIGN.md §6.1):
 *   - layout → box-model → typography → visual → animation
 *   - !important só pra sobrescrever WooCommerce/Pagar.me com motivo
 *   - prefixo do componente: .vitamente-* (mantido pra estabilidade dos
 *     selectors do JS; o tema usa .vt- pra conta e .sp- pra produto)
 */

/* =====================================================================
   Base
   ===================================================================== */

.vitamente-checkout * { box-sizing: border-box; }

.vitamente-checkout {
	font-family: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
	line-height: 1.6;
}

/* =====================================================================
   Page takeover — header e footer próprios do plugin
   ===================================================================== */

body.vitamente-page {
	margin: 0;
	background: #f6f7f8;
	font-family: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
	color: #1f2329;
}
.vitamente-page__shell { display: flex; flex-direction: column; min-height: 100vh; }
.vitamente-page__main  { flex: 1 0 auto; }

.vitamente-page__header {
	background: #ffffff;
	border-bottom: 1px solid #e8eaed;
}
.vitamente-page__header-inner {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.vitamente-page__logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.vitamente-page__logo img {
	max-height: 32px;
	width: auto;
	display: block;
}
.vitamente-page__logo-text {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.01em;
}
.vitamente-page__secure {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 500;
	color: #5b6370;
}
.vitamente-page__secure svg { color: #1f7a4d; }

.vitamente-page__footer {
	background: #ffffff;
	border-top: 1px solid #e8eaed;
	margin-top: 32px;
}
.vitamente-page__footer-inner {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.vitamente-page__secure--footer {
	font-size: 13px;
	color: #475063;
}
.vitamente-page__payments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	align-items: center;
}
.vitamente-page__pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.vitamente-page__pay svg {
	display: block;
	height: 24px;
	width: auto;
	border-radius: 3px;
}

.vitamente-page__small {
	font-size: 11px;
	color: #8a93a3;
	margin: 0;
}
.vitamente-page__small a {
	color: #475063;
	text-decoration: none;
	border-bottom: 1px dotted #c2c8d3;
}
.vitamente-page__small a:hover { color: #1f2329; }

@media (max-width: 640px) {
	.vitamente-page__header-inner { padding: 12px 16px; }
	.vitamente-page__footer-inner { padding: 20px 16px; }
	.vitamente-page__logo img { max-height: 26px; }
}

/* Esconde plumagem padrão do WooCommerce que duplica controles nossos. */
.vitamente-checkout .woocommerce-form-coupon-toggle,
.vitamente-checkout .woocommerce-form-login-toggle,
.vitamente-checkout .woocommerce-form-login,
.vitamente-checkout .create-account,
.vitamente-checkout #ship-to-different-address,
.vitamente-checkout .woocommerce-billing-fields > h3,
.vitamente-checkout .woocommerce-shipping-fields > h3,
.vitamente-checkout .woocommerce-additional-fields > h3 {
	display: none !important;
}

/* Brazilian Market: persontype/cnpj/etc — deferimos pro nosso billing_cpf
   único e usamos default_persontype + force_persontype no PHP pra alimentar
   os metas que o BM e gateways esperam. Esconder via CSS é a última camada
   de defesa caso BM injete via outro caminho que pulou nosso strip. */

/* IE: visível apenas quando o cliente digita CNPJ (>=12 dígitos). JS faz
   slideDown/slideUp; CSS esconde no estado inicial pra evitar flash. */
.vitamente-checkout .vitamente-ie-conditional { display: none; }

/* Sempre escondidos — duplicam o nosso billing_cpf único.
   Cobre BM (persontype/cnpj/cellphone) + Pagar.me v4 (document) + variantes
   genéricas (taxvat / tax_id / doc / documento) que outros gateways BR
   eventualmente registram. Os seletores por atributo capturam variantes
   de ID ([id^=billing_document]) caso o gateway use sufixo diferente. */
.vitamente-checkout #billing_persontype_field,
.vitamente-checkout #billing_cnpj_field,
.vitamente-checkout #billing_cellphone_field,
.vitamente-checkout [id^="billing_document"],
.vitamente-checkout [id^="billing_documento"],
.vitamente-checkout [id^="billing_doc_"],
.vitamente-checkout #billing_doc_field,
.vitamente-checkout [id^="billing_taxvat"],
.vitamente-checkout [id^="billing_tax_id"] {
	display: none !important;
}

/* Country selector: BR é fixo, não mostramos label nem wrapper.
   Múltiplos selectors cobrem: container <p>, label[for], select órfão,
   variações que BM ou gateways possam injetar.
   Failsafe via :has() pega caso ID não bata o pattern (ex: type=hidden
   override revertido por filter externo, ou wrapper sem _field suffix). */
.vitamente-checkout #billing_country_field,
.vitamente-checkout #shipping_country_field,
.vitamente-checkout p.form-row[id$="country_field"],
.vitamente-checkout .form-row[id$="country_field"],
.vitamente-checkout label[for="billing_country"],
.vitamente-checkout label[for="shipping_country"],
#vitamente-billing-fields #billing_country_field,
#vitamente-billing-fields [id$="country_field"],
.vitamente-checkout p.form-row:has(select[name$="_country"]),
.vitamente-checkout p.form-row:has(label[for$="_country"]),
.vitamente-billing-mirror:has(select[name$="_country"]),
.vitamente-billing-mirror:has(label[for$="_country"]) {
	display: none !important;
}

/* "Nome completo" / "Destinatário" num campo só — last_name fica hidden
   (input tipo hidden, populado por JS a partir do split do primeiro espaço) */
.vitamente-checkout #billing_last_name_field,
.vitamente-checkout #shipping_last_name_field,
.vitamente-checkout #billing_last_name_field,
.vitamente-checkout .vitamente-hidden-fullname,
.vitamente-checkout p[id$="_last_name_field"] {
	display: none !important;
}

/* Step 2: progressive disclosure. Só mostra o CEP até a
   API responder; quando ela traz dados (ou retorna 404), os outros campos
   aparecem — preenchidos pela resposta ou em branco pra preencher manual.
   A classe `is-cep-revealed` é adicionada pelo JS ao container.
   Country fica fora dessa lógica — sempre escondido (regra mais abaixo). */
.vitamente-step[data-step="shipping"] .vitamente-step__body .form-row:not(#shipping_postcode_field) {
	display: none !important;
}
.vitamente-step[data-step="shipping"].is-cep-revealed .vitamente-step__body .form-row:not(#shipping_postcode_field):not(#shipping_country_field) {
	display: block !important;
}

#vitamente-billing-fields .form-row:not(#billing_postcode_field) {
	display: none !important;
}
#vitamente-billing-fields.is-cep-revealed .form-row:not(#billing_postcode_field):not(#billing_country_field) {
	display: block !important;
}

/* Quando o summary "Enviando para" está exibido, escondemos os campos
   de Rua/Bairro/Cidade/Estado — só Número e Complemento ficam editáveis.
   Se o cliente clicar em "alterar", removemos has-cep-summary e os
   campos voltam a aparecer. */
.vitamente-step[data-step="shipping"].has-cep-summary #shipping_address_1_field,
.vitamente-step[data-step="shipping"].has-cep-summary #shipping_neighborhood_field,
.vitamente-step[data-step="shipping"].has-cep-summary #shipping_city_field,
.vitamente-step[data-step="shipping"].has-cep-summary #shipping_state_field,
#vitamente-billing-fields.has-cep-summary #billing_address_1_field,
#vitamente-billing-fields.has-cep-summary #billing_neighborhood_field,
#vitamente-billing-fields.has-cep-summary #billing_city_field,
#vitamente-billing-fields.has-cep-summary #billing_state_field {
	display: none !important;
}

/* Estilo do summary "Enviando para" */
.vitamente-cep-summary {
	margin: 8px 0 16px;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #475063;
}
.vitamente-cep-summary[hidden] { display: none; }
.vitamente-cep-summary strong {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #1f2329;
	margin-bottom: 2px;
}
.vitamente-cep-summary__address {
	display: block;
	color: #5b6370;
}
.vitamente-cep-summary__edit { display: none; }
.vitamente-cep-summary__hint {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	color: #8a93a3;
	font-style: italic;
}

/* Shipping: campos pessoais que NÃO usamos (CPF, empresa, documentos
   de gateways BR). shipping_first_name FICA visível como "Destinatário"
   (campo único; shipping_last_name é hidden, populado pelo split JS).
   Mirror server-side preenche o que ficar vazio no posted_data. */
.vitamente-checkout #shipping_company_field,
.vitamente-checkout #shipping_persontype_field,
.vitamente-checkout #shipping_cnpj_field,
.vitamente-checkout #shipping_cpf_field,
.vitamente-checkout [id^="shipping_document"],
.vitamente-checkout [id^="shipping_documento"],
.vitamente-checkout [id^="shipping_doc_"],
.vitamente-checkout [id^="shipping_taxvat"],
.vitamente-checkout [id^="shipping_tax_id"],
.vitamente-checkout #shipping_cellphone_field,
.vitamente-checkout #shipping_phone_field,
.vitamente-checkout #shipping_email_field {
	display: none !important;
}

/* Opcionais: escondidos só quando o merchant não habilitou no admin */
.vitamente-checkout.vitamente-no-rg        #billing_rg_field,
.vitamente-checkout.vitamente-no-ie        #billing_ie_field,
.vitamente-checkout.vitamente-no-birthdate #billing_birthdate_field,
.vitamente-checkout.vitamente-no-gender    #billing_gender_field,
.vitamente-checkout.vitamente-no-gender    #billing_sex_field,
.vitamente-checkout.vitamente-no-company   #billing_company_field {
	display: none !important;
}

/* =====================================================================
   Layout — 3 colunas no desktop (Perfil • Endereço+Pagamento • Revisão)
   ===================================================================== */

.vitamente-form {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: var(--spacing-lg, 32px) var(--container-pad, 24px) var(--spacing-2xl, 96px);
}

.vitamente-grid {
	display: grid;
	gap: var(--spacing-md, 16px);
	grid-template-columns: minmax(0, 1fr);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.vitamente-grid {
		gap: var(--spacing-md, 16px);
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
	}
}

.vitamente-col {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
}

/* Sticky removido: o cliente reclamou que travava o resumo no topo e
   ainda obrigava as avaliações a competirem por espaço vertical. Right
   column agora rola junto com a página normalmente. */

/* =====================================================================
   Step (cards) com progressive disclosure
   ===================================================================== */

.vitamente-step {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	overflow: clip;
	transition: border-color var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
}

.vitamente-step.is-active {
	border-color: rgba(0, 203, 2, 0.4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 203, 2, 0.08) inset;
}

.vitamente-step.is-complete {
	cursor: pointer;                       /* clique no resumo retorna pra editar */
}

.vitamente-step.is-complete:hover {
	border-color: var(--color-dark, #303030);
}

.vitamente-step.is-locked .vitamente-step__head h2 { color: var(--color-gray, #767676); }

.vitamente-step__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	padding: var(--spacing-md, 16px) var(--spacing-lg, 32px);
}

.vitamente-step__head h2 {
	margin: 0;
	font-size: 18px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: -0.01em;
	color: var(--color-dark, #303030);
}

.vitamente-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-gray-light, #d5d8dc);
	color: var(--color-bg, #fff);
	font-size: 13px;
	font-weight: var(--font-weight-medium, 500);
}

.vitamente-step.is-active   .vitamente-step__num,
.vitamente-step.is-complete .vitamente-step__num {
	background: var(--color-dark, #303030);
}

/* Body / Locked / Summary visibility — controlled by step state */
.vitamente-step__body,
.vitamente-step__summary,
.vitamente-step__locked { display: none; }

.vitamente-step.is-active   .vitamente-step__body    { display: block; padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px); }
.vitamente-step.is-locked   .vitamente-step__locked  { display: block; padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px); }
.vitamente-step.is-complete .vitamente-step__summary { display: block; padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px); }

.vitamente-step__locked {
	color: var(--color-gray, #767676);
	font-size: 13px;
	line-height: 1.5;
}

.vitamente-step__summary {
	color: var(--color-gray-dark, #555);
	font-size: 13px;
	line-height: 1.55;
}

.vitamente-step__summary strong {
	display: block;
	margin-bottom: 2px;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-dark, #303030);
	font-size: 14px;
}

/* "Avançar" button — local ao step, não submete o form */
.vitamente-step__advance-wrap {
	margin-top: var(--spacing-md, 16px);
}

.vitamente-step__advance {
	width: 100%;
	padding: 14px 22px;
	border: 1px solid var(--color-accent, #00cb02);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-accent, #00cb02);
	color: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.vitamente-step__advance:hover {
	background: var(--color-bg, #fff);
	color: var(--color-accent, #00cb02);
}

@media (max-width: 559px) {
	.vitamente-step__head    { padding: var(--spacing-md, 16px); }
	.vitamente-step.is-active   .vitamente-step__body,
	.vitamente-step.is-locked   .vitamente-step__locked,
	.vitamente-step.is-complete .vitamente-step__summary { padding: 0 var(--spacing-md, 16px) var(--spacing-md, 16px); }
}

/* =====================================================================
   Form fields (DESIGN.md §3.8)
   ===================================================================== */

.vitamente-checkout .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 var(--spacing-md, 16px);
	padding: 0;
}

.vitamente-checkout .form-row label {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.04em;
	color: var(--color-gray-dark, #555);
}

.vitamente-checkout .form-row .required { color: var(--color-sale, #c0392b); }

.vitamente-checkout .form-row input[type=text],
.vitamente-checkout .form-row input[type=email],
.vitamente-checkout .form-row input[type=tel],
.vitamente-checkout .form-row input[type=number],
.vitamente-checkout .form-row input[type=password],
.vitamente-checkout .form-row input[type=date],
.vitamente-checkout .form-row select,
.vitamente-checkout .form-row textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 16px;            /* 16px+ obrigatório: iOS dá zoom em <16 */
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
	transition: border-color var(--transition, 0.25s ease), box-shadow var(--transition, 0.25s ease);
}

.vitamente-checkout .form-row input:focus,
.vitamente-checkout .form-row select:focus,
.vitamente-checkout .form-row textarea:focus {
	outline: none;
	border-color: var(--color-dark, #303030);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.vitamente-checkout .form-row.woocommerce-invalid input,
.vitamente-checkout .form-row.woocommerce-invalid select {
	border-color: var(--color-sale, #c0392b);
}

.vitamente-checkout .form-row.woocommerce-invalid input:focus,
.vitamente-checkout .form-row.woocommerce-invalid select:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

/* Mensagem de erro inline embaixo do campo. Pequena, vermelha, sem
   mexer no layout (margin-top 3px). aria-live="polite" garante que
   leitores de tela anunciem ao aparecer. */
.vitamente-checkout .vitamente-field-error {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: var(--font-weight-light, 300);
	line-height: 1.35;
	color: var(--color-sale, #c0392b);
	letter-spacing: 0.005em;
}

.vitamente-checkout .form-row-first,
.vitamente-checkout .form-row-last {
	display: inline-flex;
	width: 49%;
	vertical-align: top;
}

.vitamente-checkout .form-row-first { margin-right: 2%; }
.vitamente-checkout .form-row-wide  { width: 100%; }

@media (max-width: 560px) {
	.vitamente-checkout .form-row-first,
	.vitamente-checkout .form-row-last {
		width: 100%;
		margin-right: 0;
	}
}

/* =====================================================================
   Coluna 3 — Revisão do pedido
   ===================================================================== */

.vitamente-review {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	overflow: clip;
}

.vitamente-review__body {
	padding: 0 var(--spacing-lg, 32px) var(--spacing-lg, 32px);
}

@media (max-width: 559px) {
	.vitamente-review__body { padding: 0 var(--spacing-md, 16px) var(--spacing-md, 16px); }
}

.vitamente-summary__items { margin: 0; padding: 0; list-style: none; }

.vitamente-summary__items li {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	gap: var(--spacing-sm, 8px);
	align-items: center;
	padding: var(--spacing-sm, 8px) 0;
	border-bottom: 1px solid var(--color-bg-light, #f8f8f8);
}

.vitamente-summary__items img {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg-light, #f8f8f8);
	object-fit: cover;
	aspect-ratio: 1;
}

.vitamente-summary__name {
	display: block;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
}

.vitamente-summary__qty {
	font-size: 11px;
	color: var(--color-gray, #767676);
}

.vitamente-summary__price {
	font-size: 14px;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-dark, #303030);
}

.vitamente-summary__totals { margin-top: var(--spacing-md, 16px); }

.vitamente-summary__totals > div {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-gray-dark, #555);
}

.vitamente-summary__total {
	margin-top: 6px !important;                  /* sobrescreve fluxo do WC */
	padding-top: var(--spacing-sm, 8px) !important;
	border-top: 1px solid var(--color-border, #e8e8e8);
	font-size: 17px !important;
	font-weight: var(--font-weight-medium, 500) !important;
	color: var(--color-dark, #303030) !important;
}
.vitamente-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vitamente-summary__label { color: var(--color-gray-dark, #555); }
.vitamente-summary__value { color: var(--color-dark, #303030); font-weight: var(--font-weight-medium, 500); text-align: right; }
.vitamente-summary__value .amount { font-weight: inherit; }
.vitamente-muted { color: var(--color-gray, #767676); font-style: normal; font-size: 12px; }

/* Step 3 (Pagamento): esconde o table de items/totais/notices que duplicam
   o que já temos no right column. Mantém #payment (radios + place order)
   visível. Picker de frete também escondido (cópia no step 2). */
#order_review table.shop_table,
#order_review .woocommerce-checkout-review-order-table,
#order_review .shipping ul.shipping_methods,
#order_review .woocommerce-shipping-methods,
#order_review .woocommerce-NoticeGroup-checkout {
	display: none !important;
}

/* Notices informacionais ("frete grátis", "cupom aplicado") — não mostra
   no step 3. JS extrai e duplica num bloco no right column ("Revise seu
   pedido"). Mantém .woocommerce-error visível pra erros reais de
   pagamento (cartão recusado etc.). */
.vitamente-step[data-step="payment"] .woocommerce-info,
.vitamente-step[data-step="payment"] .woocommerce-message,
.vitamente-step[data-step="payment"] li.woocommerce-info,
.vitamente-step[data-step="payment"] li.woocommerce-message,
.vitamente-step[data-step="payment"] [class*="NoticeGroup"],
.vitamente-step[data-step="payment"] .woocommerce-notices-wrapper,
.vitamente-step[data-step="payment"] .frete-gratis-mensagem {
	display: none !important;
}
/* Também esconde elementos órfãos de progress de frete grátis injetados
   por theme/functions via woocommerce_review_order_before_cart_contents
   (que renderiza dentro de <tbody> e o browser move pra fora do table) */
.vitamente-checkout > .frete-gratis-mensagem,
form.checkout > .frete-gratis-mensagem {
	display: none !important;
}
/* Quando o JS move pro right column, mostra normalmente */
.vitamente-review__body > .frete-gratis-mensagem {
	display: block !important;
	margin: 0 0 12px;
}

/* Notices reposicionados no right column */
.vitamente-summary__notices {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 10px;
}
.vitamente-summary__notices[hidden] { display: none; }
.vitamente-summary__notice {
	background: #ecfdf3;
	color: var(--color-primary, #1f7a4d);
	border: 1px solid #b8e7c8;
	border-radius: 8px;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
}

/* Privacy text — pequeno e cinza, acima do botão "Comprar agora" */
.vitamente-checkout .woocommerce-privacy-policy-text {
	font-size: 11px;
	line-height: 1.45;
	color: #8a93a3;
	margin: 14px 0 6px;
	text-align: left;
}
.vitamente-checkout .woocommerce-privacy-policy-text p {
	margin: 0;
	font-size: 11px;
	color: inherit;
}
.vitamente-checkout .woocommerce-privacy-policy-text a {
	color: #5b6370;
	text-decoration: underline;
}

/* Brinde: item zerado vira card verde com selo "BRINDE" */
.vitamente-summary__items li.is-brinde {
	background: linear-gradient(0deg, #ecfdf3, #ecfdf3);
	border-radius: 8px;
	padding: 8px;
	margin: 0 -4px;
}

/* Order Bump: item adicionado via 1-click upsell. Fundo verde MUITO
   sutil (mais claro que o brinde, que é "grátis") + preço de/por
   stacked à direita pra reforçar o desconto que o cliente aceitou. */
.vitamente-summary__items li.is-orderbump {
	background: rgba(0, 203, 2, 0.04);
	border-radius: 8px;
	padding: 8px;
	margin: 0 -4px;
	border-bottom-color: transparent;
}

.vitamente-summary__price-stack {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
	text-align: right;
}

.vitamente-summary__price-stack .vitamente-summary__price-from {
	font-size: 12px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-gray, #767676);
	text-decoration: line-through;
}

.vitamente-summary__price-stack .vitamente-summary__price {
	color: var(--color-primary, #1f7a4d);
	font-weight: var(--font-weight-medium, 500);
}
.vitamente-summary__brinde {
	display: inline-block;
	margin-left: auto;
	padding: 3px 10px;
	background: #1f7a4d;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	border-radius: 999px;
	text-transform: uppercase;
}

/* Payment method selectors — radio cards */
.vitamente-checkout #payment ul.wc_payment_methods,
.vitamente-checkout #payment ul.payment_methods {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vitamente-checkout #payment ul.wc_payment_methods li,
.vitamente-checkout #payment ul.payment_methods li {
	list-style: none !important;
	border: 1px solid #e8eaed;
	border-radius: 10px;
	background: #ffffff;
	overflow: hidden;
	margin: 0;
	padding: 0;
	transition: border-color .15s ease, background .15s ease;
}
.vitamente-checkout #payment ul.wc_payment_methods li::before,
.vitamente-checkout #payment ul.payment_methods li::before {
	display: none !important;
}
.vitamente-checkout #payment li > input[type="radio"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}
.vitamente-checkout #payment li > label {
	display: flex !important;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	cursor: pointer;
	font-weight: 500;
	color: #1f2329;
	margin: 0 !important;
}
.vitamente-checkout #payment li > label::before {
	content: '';
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c9d2cc;
	box-sizing: border-box;
	transition: border-color .15s ease;
}
.vitamente-checkout #payment li input[type="radio"]:checked + label::before {
	border-color: #1f7a4d;
	background: radial-gradient(#1f7a4d 4px, #ffffff 5px);
}
.vitamente-checkout #payment li > label > img {
	height: 22px;
	width: auto;
	margin-left: auto;
	border-radius: 3px;
}
/* Badge de desconto do gateway (.vitamente-discount-badge inserida em
   woocommerce_gateway_title) — alinha à direita, depois do nome+ícone */
.vitamente-checkout #payment li > label .vitamente-discount-badge {
	margin-left: auto;
	padding: 3px 10px;
	background: #ecfdf3;
	color: var(--color-primary, #1f7a4d);
	border: 1px solid #b8e7c8;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
/* Quando o gateway tem ícone, o badge fica DEPOIS do ícone (à direita
   absoluta). Garantimos isso forçando ordem e empurrando o ícone */
.vitamente-checkout #payment li > label > img + .vitamente-discount-badge,
.vitamente-checkout #payment li > label .vitamente-discount-badge + img {
	margin-left: 8px;
}
.vitamente-checkout #payment li.has-discount-badge > label::after,
.vitamente-checkout #payment li .gateway-discount-badge {
	margin-left: auto;
	padding: 3px 8px;
	background: #ecfdf3;
	color: #1f7a4d;
	font-size: 11px;
	font-weight: 600;
	border-radius: 999px;
}
.vitamente-checkout #payment .payment_box {
	border-top: 1px solid #eef0f3;
	padding: 16px;
	margin: 0;
	background: #fafbfc;
	font-size: 13px;
	color: #475063;
	border-radius: 0 0 10px 10px;
}
/* CC form fields: deixa o gateway controlar a largura/layout interno.
   Forçar 50/50 (versão anterior) quebrava o grid do Pagar.me. Apenas
   garantimos espaçamento vertical consistente entre rows. */
.vitamente-checkout #payment .payment_box .form-row {
	margin-bottom: 12px;
}
.vitamente-checkout #payment .payment_box .form-row:last-child {
	margin-bottom: 0;
}
/* Pagar.me CC form: usa flex no container interno pra que Validade
   (form-row-first) e CVV (form-row-last) fiquem lado a lado de fato.
   HTML do Pagar.me: <div data-pagarme-element="fields-cc-data"> envolve
   os <p class="form-row form-row-first/last"> de expiry/cvv. */
.vitamente-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"],
.vitamente-checkout #payment .payment_box .wc-credit-card-info {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px 12px !important;
	align-items: flex-end;
}
.vitamente-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row,
.vitamente-checkout #payment .payment_box .wc-credit-card-info > p.form-row {
	flex: 1 1 100% !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}
.vitamente-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row.form-row-first,
.vitamente-checkout #payment .payment_box [data-pagarme-element="fields-cc-data"] > p.form-row.form-row-last,
.vitamente-checkout #payment .payment_box .wc-credit-card-info > p.form-row.form-row-first,
.vitamente-checkout #payment .payment_box .wc-credit-card-info > p.form-row.form-row-last {
	flex: 1 1 calc(50% - 6px) !important;
	width: calc(50% - 6px) !important;
	max-width: calc(50% - 6px) !important;
}
.vitamente-checkout #payment .payment_box .form-row input,
.vitamente-checkout #payment .payment_box .form-row select {
	width: 100% !important;
	box-sizing: border-box;
}

/* ═══ Efi (Gerencianet) cartao de credito ═══════════════════════════════════
   O plugin oficial Efi nao usa <p class="form-row"> — renderiza o form com
   <p>/<label>/<input> direto sem wrappers WC. Aqui aplicamos a mesma
   gramatica visual dos outros gateways (Pagar.me/MP/etc). Selectors usam
   tanto IDs nativos do plugin (gn_cartao_*) quanto class hooks que o
   nosso JS adiciona (vc-efi-input).

   NAO usar display:flex no payment_box — quebra o show/hide nativo do
   WC (jQuery slideUp/Down inline display:none vs nosso !important).
   Spacing via margin no lobotomized owl selector preserva o toggle. */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao > * + * {
	margin-top: 14px !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao p {
	margin: 0 !important;
	padding: 0 !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #475063 !important;
	margin: 0 0 6px !important;
	padding: 0 !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao label .required,
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao label abbr.required {
	color: #ef4444 !important;
	text-decoration: none !important;
	font-weight: 600 !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="text"],
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="tel"],
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input[type="number"],
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao select {
	width: 100% !important;
	height: 44px !important;
	padding: 0 14px !important;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	font-size: 14px !important;
	color: #1e293b !important;
	background: #fff !important;
	box-sizing: border-box !important;
	transition: border-color .15s, box-shadow .15s !important;
	font-family: inherit !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao input:focus,
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao select:focus {
	border-color: #6366f1 !important;
	box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
	outline: none !important;
}
/* Linha Validade + CVV lado-a-lado (espelha layout MP/Pagar.me) */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-row-2col {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 12px !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-row-2col > p {
	margin: 0 !important;
}

/* Parcelas — escondida ate o usuario digitar 13+ digitos do cartao.
   Slide-down suave + fade quando aparece. JS toggle .is-visible. */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-installments {
	max-height: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: max-height .3s cubic-bezier(.4,0,.2,1), opacity .25s, margin .25s !important;
	pointer-events: none !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-installments.is-visible {
	max-height: 200px !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* Brand badge — logo Visa/Master/Elo/etc dentro do input do numero do cartao */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-card-number-wrap {
	position: relative !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-card-number-wrap input {
	padding-right: 56px !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 36px !important;
	height: 24px !important;
	background: transparent center / contain no-repeat !important;
	transition: opacity .15s !important;
	opacity: 0;
	pointer-events: none;
	margin-top: 13px !important; /* compensa label acima */
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand]:not([data-brand=""]) {
	opacity: 1;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="visa"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%231A1F71'/><path fill='%23fff' d='M19.7 21.4l1.7-10.5h2.7l-1.7 10.5zm10.7-10.3c-.5-.2-1.4-.4-2.5-.4-2.7 0-4.7 1.4-4.7 3.5 0 1.5 1.4 2.4 2.5 2.9 1.1.5 1.5.9 1.5 1.4 0 .7-.9 1.1-1.7 1.1-1.1 0-1.7-.2-2.6-.5l-.4-.2-.4 2.4c.7.3 1.9.6 3.1.6 2.9 0 4.8-1.4 4.8-3.6 0-1.2-.7-2.1-2.4-2.9-1-.5-1.6-.8-1.6-1.4 0-.5.5-1 1.7-1 1 0 1.7.2 2.2.4l.3.1.4-2.4zm6.7-.2h-2.1c-.7 0-1.2.2-1.5.9l-4.1 9.6h2.9l.6-1.6h3.5l.3 1.6h2.6l-2.2-10.5zm-3.4 6.8c.2-.6 1.1-2.9 1.1-2.9l.3-.9.2.8.6 3h-2.2zm-15.6-6.8l-2.7 7.2-.3-1.5c-.5-1.7-2.1-3.6-3.8-4.5l2.5 9.3h2.9l4.4-10.5z'/></svg>") !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="mastercard"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23fff'/><circle cx='19' cy='16' r='8' fill='%23EB001B'/><circle cx='29' cy='16' r='8' fill='%23F79E1B'/><path fill='%23FF5F00' d='M24 10a7.94 7.94 0 0 1 0 12 7.94 7.94 0 0 1 0-12z'/></svg>") !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="elo"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23000'/><circle cx='24' cy='16' r='6' fill='none' stroke='%23FFD700' stroke-width='2'/><circle cx='20' cy='16' r='2.5' fill='%23FF3F3F'/><circle cx='28' cy='16' r='2.5' fill='%2300A4E0'/></svg>") !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="hipercard"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23B82329'/><text x='24' y='20' text-anchor='middle' fill='%23fff' font-size='8' font-family='Arial' font-weight='bold'>HIPER</text></svg>") !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="amex"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23006FCF'/><text x='24' y='20' text-anchor='middle' fill='%23fff' font-size='9' font-family='Arial' font-weight='bold'>AMEX</text></svg>") !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="diners"],
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-brand[data-brand="discover"] {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'><rect width='48' height='32' rx='4' fill='%23475569'/><circle cx='24' cy='16' r='6' fill='%23fff'/></svg>") !important;
}

/* Mobile mantem 2-col — Validade (MM/AA) e CVV (3-4 digitos) cabem
   confortavelmente lado a lado mesmo em 320px. */
/* Hint helper — Efi mostra texto de ajuda em <small> */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao small {
	display: block !important;
	font-size: 11px !important;
	color: #94a3b8 !important;
	margin-top: 4px !important;
	line-height: 1.4 !important;
}
/* Select de parcelas — chevron customizado (sem appearance native do browser) */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	padding-right: 36px !important;
}
/* Container do form - card branco com sombra suave */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao {
	background: #fafbfc !important;
	border: 1px solid #e5e7eb !important;
	border-radius: 10px !important;
	padding: 18px !important;
}

/* Badge de seguranca — substitui o texto incorreto do plugin Efi
   ('seu pagamento sera confirmado em ate um dia util') por mensagem
   correta + tom de confianca. Aprovado na hora + criptografia + BCB. */
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-security {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 10px 12px !important;
	margin: 14px 0 0 !important; /* abaixo dos inputs — espaco superior */
	background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
	border: 1px solid #bbf7d0 !important;
	border-radius: 8px !important;
	color: #14532d !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-security__icon {
	flex-shrink: 0 !important;
	color: #10b981 !important;
	margin-top: 1px !important;
	display: inline-flex !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-security__text {
	flex: 1 !important;
	min-width: 0 !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-security__text strong {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #14532d !important;
	margin: 0 0 2px !important;
	line-height: 1.3 !important;
}
.vitamente-checkout #payment .payment_box.payment_method_wc_gerencianet_cartao .vc-efi-security__text small {
	display: block !important;
	font-size: 11px !important;
	color: #166534 !important;
	margin: 0 !important;
	line-height: 1.4 !important;
}

/* Validation inline errors — Efi cartao
 * Aparece embaixo de cada input quando user clica 'Comprar agora' com
 * campo vazio/invalido. Mesma estetica do .vitamente-field-error usado
 * pros campos de Perfil. */
.vitamente-checkout .vc-efi-field-error {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #c0392b;
	font-weight: 500;
	line-height: 1.4;
}
.vitamente-checkout .vc-efi-has-error input,
.vitamente-checkout .vc-efi-has-error select {
	border-color: #f5b8af !important;
	background-color: #fef3f2 !important;
}
.vitamente-checkout .vc-efi-has-error input:focus,
.vitamente-checkout .vc-efi-has-error select:focus {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important;
}

/* Pagar.me e gateways modernos usam markup próprio (às vezes iframe pra
   tokenização PCI). O floating label nosso não funciona bem em iframes
   (não detecta :focus / :placeholder-shown). Aqui voltamos pro layout
   tradicional dentro de .payment_box: label ESTÁTICO acima do input.
   Match com a UX nativa do Pagar.me em outros sites WC. */
.vitamente-checkout #payment .payment_box .form-row {
	position: static !important;
}
.vitamente-checkout #payment .payment_box .form-row > label {
	position: static !important;
	transform: none !important;
	display: block !important;
	background: transparent !important;
	padding: 0 0 6px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #475063 !important;
	max-width: none !important;
	overflow: visible !important;
	white-space: normal !important;
	pointer-events: auto !important;
	z-index: auto !important;
}
.vitamente-checkout #payment .payment_box .form-row > label .required,
.vitamente-checkout #payment .payment_box .form-row > label abbr {
	color: #c0392b !important;
	margin-left: 2px;
}
.vitamente-checkout #payment .payment_box .form-row input[type="text"],
.vitamente-checkout #payment .payment_box .form-row input[type="tel"],
.vitamente-checkout #payment .payment_box .form-row input[type="number"],
.vitamente-checkout #payment .payment_box .form-row select {
	min-height: 44px !important;
	padding: 10px 12px !important;
	font-size: 14px;
}
/* Reset de fieldset/box do gateway (Pagar.me/MP/etc envolvem o CC form
   num fieldset com border default do browser) */
.vitamente-checkout #payment .payment_box fieldset,
.vitamente-checkout #payment .payment_box .wc-pagarme-cc-form,
.vitamente-checkout #payment .payment_box .pagarme-cc-form,
.vitamente-checkout #payment .payment_box .form-row-group {
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}
.vitamente-checkout #payment .payment_box fieldset > legend,
.vitamente-checkout #payment .payment_box legend {
	display: none !important;
}
.vitamente-checkout #payment .payment_box::before {
	display: none !important;
}
.vitamente-checkout #payment li input[type="radio"]:checked ~ .payment_box {
	display: block;
}

/* Place order — verde, full-width, com ícone de cadeado */
.vitamente-checkout #place_order {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 22px;
	background: #00cb02 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	cursor: pointer;
	margin-top: 16px;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background .15s ease, transform .08s ease;
}
.vitamente-checkout #place_order:hover,
.vitamente-checkout #place_order:focus,
.vitamente-checkout #place_order:active {
	background: #00b302 !important;
	color: #ffffff !important;
	box-shadow: 0 0 0 3px rgba(0, 203, 2, 0.22) !important;
}
.vitamente-checkout #place_order:active { transform: translateY(1px); }
.vitamente-place-order__icon { flex: 0 0 auto; color: #ffffff; }
.vitamente-place-order__label { display: inline-block; color: #ffffff; }
.vitamente-checkout #place_order:hover .vitamente-place-order__label,
.vitamente-checkout #place_order:hover .vitamente-place-order__icon { color: #ffffff !important; }

/* Picker de frete dentro do passo 2 */
.vitamente-shipping-methods {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 14px 0 4px;
}
.vitamente-shipping-methods:empty { display: none; }
.vitamente-shipping-method {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 8px);
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.vitamente-shipping-method:hover { border-color: #c9d2cc; }
.vitamente-shipping-method.is-active {
	border-color: var(--color-primary, #1f7a4d);
	background: #f1f8f3;
}
.vitamente-shipping-method input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.vitamente-shipping-method__radio {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #c9d2cc;
	position: relative;
}
.vitamente-shipping-method.is-active .vitamente-shipping-method__radio {
	border-color: var(--color-primary, #1f7a4d);
}
.vitamente-shipping-method.is-active .vitamente-shipping-method__radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--color-primary, #1f7a4d);
	border-radius: 50%;
}

/* Single shipping method (so 1 opcao disponivel — WC renderiza como
 * <input type="hidden">). Renderizamos como card estatico marcado, sem
 * cursor pointer / sem hover (nao da pra desselecionar). */
.vitamente-shipping-method.is-single {
	cursor: default;
	border-color: var(--color-primary, #1f7a4d);
	background: #f1f8f3;
}
.vitamente-shipping-method.is-single:hover {
	border-color: var(--color-primary, #1f7a4d);
}
.vitamente-shipping-method.is-single .vitamente-shipping-method__radio {
	border-color: var(--color-primary, #1f7a4d);
}
.vitamente-shipping-method.is-single .vitamente-shipping-method__radio::after {
	content: '';
	position: absolute;
	inset: 3px;
	background: var(--color-primary, #1f7a4d);
	border-radius: 50%;
}
.vitamente-shipping-method__label,
.vitamente-shipping-method__title {
	font-size: 14px;
	color: var(--color-dark, #303030);
}
.vitamente-shipping-method__info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.vitamente-shipping-method__title {
	font-weight: 500;
	line-height: 1.2;
}
.vitamente-shipping-method__eta {
	font-size: 11px;
	font-weight: 400;
	color: #6b7280;
	line-height: 1.2;
}
.vitamente-shipping-method__price {
	margin-left: auto;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-dark, #303030);
}
.vitamente-shipping-method__free,
.vitamente-summary__free {
	display: inline-block;
	margin-left: auto;
	padding: 3px 10px;
	background: #1f7a4d;
	color: #ffffff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
}
.vitamente-shipping-method__label .amount { font-weight: 500; }

.vitamente-summary__secure {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: var(--spacing-md, 16px) 0 0;
	font-size: 11px;
	color: var(--color-gray, #767676);
}

/* =====================================================================
   Place order — pill verde igual .btn--cart do tema
   ===================================================================== */

#place_order,
.vitamente-checkout button[name="woocommerce_checkout_place_order"] {
	display: inline-block;
	width: 100%;
	padding: 16px 28px;
	border: 1px solid var(--color-accent, #00cb02);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-accent, #00cb02);
	color: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 13px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease), border-color var(--transition, 0.25s ease);
}

#place_order:hover {
	background: var(--color-bg, #fff);
	color: var(--color-accent, #00cb02);
}

#place_order:active   { transform: translateY(1px); }
#place_order:disabled { opacity: 0.55; cursor: not-allowed; }

/* =====================================================================
   Notices (WooCommerce override)
   ===================================================================== */

/* Wrappers do WC posicionados como TOAST bottom-right (desktop) /
   bottom-stretched (mobile). Nao mais inline no topo — fica menos
   intrusivo e mais legivel no visual moderno (Stripe/Vercel-like). */
.vitamente-checkout .woocommerce-notices-wrapper,
.vitamente-checkout .woocommerce-NoticeGroup,
body.vitamente-checkout .woocommerce-notices-wrapper {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	left: auto !important;
	top: auto !important;
	width: auto !important;
	max-width: 420px !important;
	margin: 0 !important;
	padding: 0 !important;
	z-index: 99999 !important;
	pointer-events: none; /* permite click-through do wrapper, so as notices interagem */
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.vitamente-checkout .woocommerce-notices-wrapper:empty,
.vitamente-checkout .woocommerce-NoticeGroup:empty,
body.vitamente-checkout .woocommerce-notices-wrapper:empty {
	display: none;
}

/* Mobile: estica de 16px de cada borda, sem max-width */
@media (max-width: 640px) {
	.vitamente-checkout .woocommerce-notices-wrapper,
	.vitamente-checkout .woocommerce-NoticeGroup,
	body.vitamente-checkout .woocommerce-notices-wrapper {
		bottom: 16px !important;
		right: 16px !important;
		left: 16px !important;
		max-width: none !important;
	}
}

.vitamente-checkout .woocommerce-error,
.vitamente-checkout .woocommerce-message,
.vitamente-checkout .woocommerce-info {
	margin: 0 !important;
	padding: 14px 16px;
	border: 1px solid;
	border-radius: 10px;
	list-style: none;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	pointer-events: auto;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
	animation: vitamente-notice-in .28s cubic-bezier(.4,0,.2,1);
}
@keyframes vitamente-notice-in {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}
.vitamente-checkout .woocommerce-info {
	border-color: #cfe5f4;
	background: #f1f8fc;
	color: #1a4566;
}

/* Notices que escaparem sem wrapper (alguns plugins imprimem direto no
   <main>) — re-posiciona como toast bottom-right alinhado com as notices
   no wrapper, mantem visual consistente. */
.vitamente-page__main > .woocommerce-error,
.vitamente-page__main > .woocommerce-message,
.vitamente-page__main > .woocommerce-info,
.vitamente-page__main > ul.woocommerce-error,
.vitamente-page__main > ul.woocommerce-message {
	position: fixed !important;
	bottom: 24px;
	right: 24px;
	left: auto;
	max-width: 420px;
	margin: 0 !important;
	z-index: 99999;
}
@media (max-width: 640px) {
	.vitamente-page__main > .woocommerce-error,
	.vitamente-page__main > .woocommerce-message,
	.vitamente-page__main > .woocommerce-info,
	.vitamente-page__main > ul.woocommerce-error,
	.vitamente-page__main > ul.woocommerce-message {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}
}

/* Erro: background mais opaco + border solida pra garantir legibilidade
 * em mobile (cliente reportou notice 'transparente desbotada') — antes
 * era rgba 6% que sumia em fundo branco. */
.vitamente-checkout .woocommerce-error {
	border-color: #f5b8af;
	background: #fef3f2;
	color: #991b1b;
	font-weight: 500;
	border-left-width: 4px;
}

.vitamente-checkout .woocommerce-message {
	border-color: var(--color-success-bd, #b7e4c7);
	background: var(--color-success-bg, #f0faf4);
	color: var(--color-success-fg, #1a6b3a);
	border-left-width: 4px;
}

.vitamente-checkout .woocommerce-info {
	border-left-width: 4px;
}

.vitamente-checkout .blockUI.blockOverlay { background: rgba(255, 255, 255, 0.7) !important; }

/* =====================================================================
   Coupon (DESIGN.md §3.6 trust pill, mas com input)
   ===================================================================== */

.vitamente-coupon {
	margin: 0 0 12px;
	padding: 0;
	border: none;
	background: transparent;
}

.vitamente-coupon__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--color-primary, #1f7a4d);
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
	cursor: pointer;
}
.vitamente-coupon__toggle:hover { color: var(--color-dark, #1f2329); }
.vitamente-coupon__toggle svg { color: inherit; }

.vitamente-coupon__form {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	align-items: flex-start;
}
.vitamente-coupon__form[hidden] { display: none !important; }

/* Wrapper .form-row do input — usa flex: 1 pra ocupar todo espaço
   menos o botão "Aplicar". Reseta margem do .form-row default do WC
   (16px bottom polui o layout do collapse). flex-direction: column
   garante que .vitamente-field-error fique embaixo do input. */
.vitamente-coupon__input-row {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.vitamente-coupon__form input,
.vitamente-coupon__input-row input {
	width: 100%;
	flex: 1;
	padding: 10px 12px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 6px);
	font-size: 14px;
	box-sizing: border-box;
}

/* Erro inline no input do cupom — UNSCOPED de propósito: precisa
   funcionar no sidecart em shop pages (body SEM .vitamente-checkout)
   além de cart e checkout. Mesmo padrão visual do Celular/CPF/Email
   (borda vermelha + msg pequena embaixo). */
.vitamente-coupon__input-row.woocommerce-invalid input,
.vitamente-coupon__input-row.woocommerce-invalid-format input {
	border-color: var(--color-sale, #c0392b);
}
.vitamente-coupon__input-row.woocommerce-invalid input:focus,
.vitamente-coupon__input-row.woocommerce-invalid-format input:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}
.vitamente-coupon .vitamente-field-error {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	font-weight: 300;
	line-height: 1.35;
	color: var(--color-sale, #c0392b);
	letter-spacing: 0.005em;
}

.vitamente-coupon__apply {
	padding: 10px 18px;
	border: 1px solid var(--color-dark, #303030);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-dark, #303030);
	color: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.vitamente-coupon__apply:hover {
	background: var(--color-bg, #fff);
	color: var(--color-dark, #303030);
}

.vitamente-coupon__apply:disabled { opacity: 0.55; cursor: progress; }

/* Gateway discount badge — pill de sucesso do design system */
.vitamente-discount-badge {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 10px;
	border: 1px solid var(--color-success-bd, #b7e4c7);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-success-bg, #f0faf4);
	color: var(--color-success-fg, #1a6b3a);
	font-size: 11px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.04em;
}

/* =====================================================================
   "Usar endereço de cobrança diferente" toggle + collapsed block
   ===================================================================== */

.vitamente-billing-toggle {
	display: flex;
	align-items: center;
	margin: var(--spacing-md, 16px) 0 var(--spacing-sm, 8px);
	padding: 12px 14px;
	border: 1px dashed var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg-light, #f8f8f8);
}

.vitamente-billing-toggle label {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm, 8px);
	cursor: pointer;
	font-size: 13px;
	color: var(--color-dark, #303030);
	user-select: none;
}

.vitamente-billing-toggle input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--color-dark, #303030);
}

.vitamente-billing-block {
	margin: 4px 0 var(--spacing-md, 16px);
	padding: var(--spacing-md, 16px);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	background: var(--color-bg, #fff);
}

.vitamente-billing-block[hidden] { display: none; }

/* Mirror billing rows: ficam REGISTRADOS no $fields['billing'] para
   gateways (Pagar.me, Asaas, Cielo) encontrarem via get_checkout_fields,
   mas escondidos na seção de Perfil. JS move pra cá quando o toggle abre. */
.woocommerce-billing-fields .vitamente-billing-mirror {
	display: none !important;
}
#vitamente-billing-fields .vitamente-billing-mirror {
	display: block !important;
}

.vitamente-billing-block__hint {
	margin: 0 0 12px;
	font-size: 11px;
	color: var(--color-gray, #767676);
}

/* =====================================================================
   CEP loading spinner
   ===================================================================== */

.vitamente-cep-loading::after {
	content: '';
	display: inline-block;
	width: 14px; height: 14px;
	margin-left: var(--spacing-sm, 8px);
	border: 2px solid var(--color-gray-light, #d5d8dc);
	border-top-color: var(--color-dark, #303030);
	border-radius: 50%;
	vertical-align: middle;
	animation: vitamente-spin 0.7s linear infinite;
}

@keyframes vitamente-spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Social proof block (DESIGN.md §3.6 + product reviews)
   ===================================================================== */

/* Quando dentro do .vitamente-reviews-box, é um cartão próprio. */
.vitamente-reviews-box {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	margin-top: var(--spacing-md, 16px);
	padding: var(--spacing-lg, 24px);
}
.vitamente-reviews-box:empty { display: none; }

.vitamente-reviews-box .vitamente-proof {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/* Fallback (quando renderizado fora do reviews-box, mantém estilo antigo). */
.vitamente-proof:not(.vitamente-reviews-box .vitamente-proof) {
	margin-top: var(--spacing-md, 16px);
	padding-top: var(--spacing-md, 16px);
	border-top: 1px dashed var(--color-border, #e8e8e8);
}

.vitamente-proof__head {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 10px;
}

.vitamente-proof__head h3 {
	margin: 0;
	font-size: 11px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-gray-dark, #555);
}

.vitamente-proof__list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* 2 colunas em telas com largura suficiente; 1 coluna em mobile */
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.vitamente-proof__list { grid-template-columns: 1fr 1fr; }
}

.vitamente-proof__item {
	padding: 10px 12px;
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg-light, #f8f8f8);
}

.vitamente-proof__stars { display: flex; gap: 1px; margin-bottom: 4px; }

.vitamente-proof__text {
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: var(--font-weight-light, 300);
	line-height: 1.45;
	color: var(--color-dark, #303030);
}

.vitamente-proof__item footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 11px;
	color: var(--color-gray-dark, #555);
}

.vitamente-proof__product {
	font-style: italic;
	color: var(--color-gray, #767676);
}

/* =====================================================================
   Pix block (thank-you)
   ===================================================================== */

/* =====================================================================
   Order received (thank-you) — single-column card layout
   ===================================================================== */

.vitamente-thankyou {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
	max-width: 720px;
	margin: 0 auto;
	padding: var(--spacing-md, 16px) 0 var(--spacing-lg, 32px);
}

.vitamente-card {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	padding: var(--spacing-lg, 32px);
}

.vitamente-thankyou__hero { text-align: left; }

.vitamente-thankyou__head {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: var(--spacing-md, 16px);
}

.vitamente-thankyou__head h1 {
	margin: 0;
	font-size: 22px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
}

.vitamente-thankyou__head p {
	margin: 0;
	font-size: 13px;
	color: var(--color-gray-dark, #555);
}

.vitamente-thankyou__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #fff;
}

.vitamente-thankyou__badge--paid    { background: #1f9c3b; }
.vitamente-thankyou__badge--pending { background: #b07a00; }
.vitamente-thankyou__badge--failed  { background: #c0392b; }

.vitamente-thankyou__retry-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.vitamente-thankyou__overview {
	list-style: none;
	margin: 0;
	padding: var(--spacing-md, 16px) 0 0;
	border-top: 1px solid var(--color-border, #e8e8e8);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px 24px;
}

.vitamente-thankyou__overview li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vitamente-thankyou__label {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-gray, #767676);
}

.vitamente-thankyou__overview strong {
	font-size: 14px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
	word-break: break-word;
}

.vitamente-thankyou__payment > * + * { margin-top: var(--spacing-md, 16px); }

.vitamente-thankyou__details h2,
.vitamente-thankyou__addresses h2,
.vitamente-thankyou__addresses h3 {
	margin: 0 0 var(--spacing-md, 16px);
	font-size: 16px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

/* Fallback CSS pra esconder a linha 'Ações: Pagar Cancelar' caso venha de
   uma fonte que escapa do nosso filter PHP. :has() suportado em Chrome
   105+, Safari 15.4+, Firefox 121+. Targeting seguro: row tfoot que
   contem links pra pay_for_order ou cancel_order. */
.vitamente-thankyou__details .shop_table tr:has(td a[href*="pay_for_order"]),
.vitamente-thankyou__details .shop_table tr:has(td a[href*="cancel_order"]),
.vitamente-thankyou__details .shop_table tr:has(td a[href*="order-pay"]) {
	display: none !important;
}

/* Tabela de detalhes (template order/order-details.php) */
.vitamente-thankyou__details .woocommerce-table--order-details,
.vitamente-thankyou__details .shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.vitamente-thankyou__details .shop_table th,
.vitamente-thankyou__details .shop_table td {
	padding: 10px 0;
	border-bottom: 1px solid var(--color-border, #e8e8e8);
	text-align: left;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

.vitamente-thankyou__details .shop_table tfoot th,
.vitamente-thankyou__details .shop_table tfoot td {
	font-weight: var(--font-weight-normal, 400);
}

.vitamente-thankyou__details .shop_table tfoot tr:last-child th,
.vitamente-thankyou__details .shop_table tfoot tr:last-child td {
	font-size: 16px;
	border-top: 1px solid var(--color-border, #e8e8e8);
	padding-top: 14px;
}

/* Customer details (enderecos cobranca + entrega). Cobre 2 contextos:
   - guest: dentro de .vitamente-thankyou__addresses (explicit render)
   - logged-in: dentro de .vitamente-thankyou__details (order-details.php
     renderiza customer-details internamente quando user_id matches) */
.vitamente-thankyou__addresses .woocommerce-customer-details,
.vitamente-thankyou__details .woocommerce-customer-details {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border, #e8e8e8);
}

.vitamente-thankyou__addresses .woocommerce-customer-details address,
.vitamente-thankyou__details .woocommerce-customer-details address {
	font-style: normal;
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-gray-dark, #555);
	margin: 0;
}

/* Headings dos enderecos — espaco respiravel acima e abaixo */
.vitamente-thankyou__addresses .woocommerce-customer-details h2,
.vitamente-thankyou__addresses .woocommerce-customer-details h3,
.vitamente-thankyou__details .woocommerce-customer-details h2,
.vitamente-thankyou__details .woocommerce-customer-details h3,
.vitamente-thankyou__details .woocommerce-column__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-dark, #303030);
}

/* Quando WC renderiza ambos enderecos (cobranca != entrega): grid 2-col
   no desktop (≥ 768px), 1 col no mobile. Quando shipping == billing,
   so 1 coluna existe e ocupa toda largura naturalmente. */
.vitamente-thankyou__addresses .woocommerce-columns--addresses,
.vitamente-thankyou__details .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}
@media (min-width: 768px) {
	.vitamente-thankyou__addresses .woocommerce-columns--addresses,
	.vitamente-thankyou__details .woocommerce-columns--addresses {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}
}

/* Fallback pra WC que NAO usa wrapper .woocommerce-columns--addresses
   (versoes mais antigas / themes que sobrescrevem o template) — quando
   o customer-details tem 2 <h2> seguidos de <address> em sequencia,
   forca grid via :has(). */
@media (min-width: 768px) {
	.vitamente-thankyou__details .woocommerce-customer-details:has(h2 + address ~ h2 + address) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 32px;
		align-items: start;
	}
}

/* Espaco entre cada <address> e elementos que aparecem entre eles
   (ex: phone/email injetados pelo BR Market entre billing e shipping) */
.vitamente-thankyou__details .woocommerce-customer-details > p,
.vitamente-thankyou__addresses .woocommerce-customer-details > p {
	margin: 12px 0;
	font-size: 14px;
	color: var(--color-gray-dark, #555);
	font-style: normal;
}

/* =====================================================================
   Pix block (thank-you) — refined card with steps strip
   ===================================================================== */

.vitamente-pix {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md, 16px);
	text-align: center;
}

.vitamente-pix__head h2 {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

.vitamente-pix__head p {
	margin: 0;
	font-size: 13px;
	color: var(--color-gray-dark, #555);
}

.vitamente-pix__qr {
	margin: 0 auto;
	padding: 12px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	background: #fff;
	width: fit-content;
	min-width: 244px;
	min-height: 244px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vitamente-pix__qr img {
	display: block;
	width: 220px;
	height: 220px;
	max-width: 100%;
}

/* Fallback estatico — visivel quando img.onerror dispara is-failed */
.vitamente-pix__qr-fallback {
	display: none;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px;
	max-width: 220px;
	color: #64748b;
	text-align: center;
}
.vitamente-pix__qr-fallback p {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
}
.vitamente-pix__qr-fallback p strong {
	font-size: 13px;
	color: #1e293b;
	font-weight: 600;
}
.vitamente-pix__qr-fallback svg {
	color: #94a3b8;
}
.vitamente-pix__qr.is-failed img {
	display: none !important;
}
.vitamente-pix__qr.is-failed .vitamente-pix__qr-fallback {
	display: flex;
}

.vitamente-pix__copy {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm, 8px);
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
}

.vitamente-pix__copy code {
	display: block;
	padding: 10px 12px;
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-sm, 6px);
	background: var(--color-bg-light, #f8f8f8);
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-size: 11px;
	word-break: break-all;
	text-align: left;
	color: var(--color-gray-dark, #555);
}

.vitamente-pix__btn {
	padding: 12px 22px;
	border: 1px solid var(--color-dark, #303030);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-dark, #303030);
	color: var(--color-bg, #fff);
	font-family: inherit;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.vitamente-pix__btn:hover {
	background: var(--color-bg, #fff);
	color: var(--color-dark, #303030);
}

.vitamente-pix__steps {
	list-style: none;
	margin: var(--spacing-sm, 8px) 0 0;
	padding: var(--spacing-md, 16px) 0 0;
	border-top: 1px solid var(--color-border, #e8e8e8);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
	text-align: left;
	font-size: 12px;
	color: var(--color-gray-dark, #555);
}

.vitamente-pix__steps li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px;
	background: var(--color-bg-light, #f8f8f8);
	border-radius: var(--radius-sm, 6px);
}

.vitamente-pix__step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-dark, #303030);
	color: #fff;
	font-size: 12px;
	font-weight: var(--font-weight-bold, 600);
}

@media (max-width: 600px) {
	.vitamente-card { padding: var(--spacing-md, 16px); }
	.vitamente-thankyou__head h1 { font-size: 20px; }
	.vitamente-pix__qr img { width: 180px; height: 180px; }
}



/* =====================================================================
   Header: voltar ao carrinho
   ===================================================================== */

.vitamente-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: var(--spacing-md, 16px);
	color: var(--color-gray-dark, #555);
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--transition, 0.25s ease);
}

.vitamente-back:hover { color: var(--color-dark, #303030); }
.vitamente-back svg   { flex-shrink: 0; }

/* =====================================================================
   Trust block — coluna 1, abaixo do step Perfil
   ===================================================================== */

.vitamente-trust {
	padding: var(--spacing-md, 16px) var(--spacing-lg, 32px);
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
}

.vitamente-trust__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-md, 16px);
	margin-bottom: var(--spacing-sm, 8px);
}

.vitamente-trust__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: var(--font-weight-normal, 400);
	color: var(--color-dark, #303030);
}

.vitamente-trust__pill svg {
	color: var(--color-dark, #303030);
	flex-shrink: 0;
}

.vitamente-trust__note {
	margin: 0;
	padding-top: var(--spacing-sm, 8px);
	border-top: 1px solid var(--color-bg-light, #f8f8f8);
	color: var(--color-gray, #767676);
	font-size: 11px;
	line-height: 1.55;
	text-align: center;
}
.vitamente-trust__note a {
	color: var(--color-dark, #1f2329);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
.vitamente-trust__note a:hover {
	color: var(--color-primary, #1f7a4d);
}

/* =====================================================================
   Empty cart fallback
   ===================================================================== */

.vitamente-empty {
	max-width: 480px;
	margin: var(--spacing-2xl, 96px) auto;
	padding: 0 var(--container-pad, 24px);
	text-align: center;
}

.vitamente-empty h1 {
	margin: 0 0 var(--spacing-sm, 8px);
	font-size: 22px;
	font-weight: var(--font-weight-light, 300);
	letter-spacing: 0.02em;
	color: var(--color-dark, #303030);
}

.vitamente-empty p {
	margin: 0 0 var(--spacing-lg, 32px);
	font-size: 14px;
	color: var(--color-gray-dark, #555);
}

.vitamente-empty__cta {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid var(--color-dark, #303030);
	border-radius: var(--radius-pill, 1000px);
	background: var(--color-dark, #303030);
	color: var(--color-bg, #fff);
	font-size: 13px;
	font-weight: var(--font-weight-normal, 400);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--transition, 0.25s ease), color var(--transition, 0.25s ease);
}

.vitamente-empty__cta:hover {
	background: var(--color-bg, #fff);
	color: var(--color-dark, #303030);
}

/* =====================================================================
   Focus visible (DESIGN.md §7)
   ===================================================================== */

.vitamente-checkout :focus-visible {
	outline: 2px solid var(--color-primary, #303030);
	outline-offset: 3px;
}

/* =====================================================================
   Floating labels — Material Design style para TODOS os inputs
   ===================================================================== */

/* Wrapper do form-row vira referência pra posicionar o label */
.vitamente-checkout .form-row {
	position: relative;
	margin-bottom: 16px;
}

/* Label posicionado dentro do input por padrão (centro vertical) */
.vitamente-checkout .form-row > label {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	background: #ffffff;
	padding: 0 4px;
	font-size: 14px;
	font-weight: 400;
	color: #6b7280;
	pointer-events: none;
	transition: top .15s ease, font-size .15s ease, color .15s ease, font-weight .15s ease;
	z-index: 1;
	line-height: 1;
	max-width: calc(100% - 24px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Float up: input com foco OU com conteúdo (precisa placeholder=" " no input).
   Label fica cinza (mesma cor do texto), sem destaque verde. */
.vitamente-checkout .form-row:has(input:focus) > label,
.vitamente-checkout .form-row:has(input:not(:placeholder-shown)) > label,
.vitamente-checkout .form-row:has(textarea:focus) > label,
.vitamente-checkout .form-row:has(textarea:not(:placeholder-shown)) > label,
.vitamente-checkout .form-row:has(select:focus) > label,
.vitamente-checkout .form-row.has-value > label {
	top: 0;
	font-size: 11px;
	font-weight: 500;
	color: #5b6370;
}

/* Form rows full-width: WC adiciona form-row-first/last pra layout em
   2 colunas que aqui fica feio com floating labels. Forçamos full-width
   em todos os campos. */
.vitamente-checkout .form-row,
.vitamente-checkout .form-row.form-row-first,
.vitamente-checkout .form-row.form-row-last,
.vitamente-checkout .form-row.form-row-wide {
	width: 100% !important;
	float: none !important;
	clear: both !important;
}

/* WC esconde alguns labels com screen-reader-text (ex: shipping_address_2).
   Como nosso layout depende do label visível, sobrescrevemos. */
.vitamente-checkout .form-row > label.screen-reader-text,
.vitamente-checkout .form-row > .screen-reader-text {
	position: absolute !important;
	width: auto !important;
	height: auto !important;
	padding: 0 4px !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: nowrap !important;
}

/* Required asterisk */
.vitamente-checkout .form-row > label .required,
.vitamente-checkout .form-row > label abbr.required {
	color: #c0392b;
	text-decoration: none;
	border: none;
	font-weight: 600;
	margin-left: 2px;
}

/* Inputs base — padding maior pra acomodar a label dentro */
.vitamente-checkout .form-row input[type="text"],
.vitamente-checkout .form-row input[type="email"],
.vitamente-checkout .form-row input[type="tel"],
.vitamente-checkout .form-row input[type="number"],
.vitamente-checkout .form-row input[type="date"],
.vitamente-checkout .form-row input[type="password"],
.vitamente-checkout .form-row textarea,
.vitamente-checkout .form-row select {
	width: 100%;
	padding: 16px 12px 14px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	background: #ffffff;
	font-size: 14px;
	line-height: 1.4;
	box-sizing: border-box;
	transition: border-color .15s ease, box-shadow .15s ease;
	color: #1f2329;
	font-family: inherit;
	font-weight: 400;
	margin: 0;
	min-height: 50px;
}
.vitamente-checkout .form-row textarea {
	min-height: 96px;
	resize: vertical;
}
.vitamente-checkout .form-row input::placeholder,
.vitamente-checkout .form-row textarea::placeholder {
	color: transparent; /* placeholder real é " " só pra :placeholder-shown */
}
.vitamente-checkout .form-row input:focus,
.vitamente-checkout .form-row textarea:focus,
.vitamente-checkout .form-row select:focus {
	border-color: #1f7a4d;
	outline: none;
	box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.12);
}

/* Wrap interno do WC */
.vitamente-checkout .form-row .woocommerce-input-wrapper {
	width: 100%;
	display: block;
}

/* Force native select sobre o select2 (style mais consistente) */
.vitamente-checkout .select2-container { display: none !important; }
.vitamente-checkout .form-row select { display: block !important; }

/* Checkboxes/radios mantêm label normal (não flutua) */
.vitamente-checkout .form-row.checkbox > label,
.vitamente-checkout .form-row .checkbox > label,
.vitamente-checkout .vitamente-billing-toggle label {
	position: static;
	transform: none;
	background: transparent;
	padding: 0;
	pointer-events: auto;
	font-size: 14px;
	color: #1f2329;
	font-weight: 400;
	max-width: none;
	overflow: visible;
	white-space: normal;
	line-height: 1.4;
	z-index: auto;
}
.vitamente-checkout .form-row.checkbox > input[type="checkbox"],
.vitamente-checkout .form-row .checkbox > input[type="checkbox"] {
	margin-right: 8px;
	accent-color: #1f7a4d;
}

/* Estado de erro (woocommerce-invalid) — label e border vermelhos.
   Se o input está vazio (placeholder mostrando), neutraliza o vermelho:
   plugins BR (gateways, BM) marcam required-vazio como invalid no init,
   poluindo a UI antes do cliente sequer interagir. Vermelho só aparece
   quando o cliente DIGITOU algo inválido. */
.vitamente-checkout .form-row.woocommerce-invalid > label {
	color: #c0392b !important;
}
.vitamente-checkout .form-row.woocommerce-invalid input,
.vitamente-checkout .form-row.woocommerce-invalid select,
.vitamente-checkout .form-row.woocommerce-invalid textarea {
	border-color: #c0392b !important;
}
/* Override pra empty fields */
.vitamente-checkout .form-row.woocommerce-invalid:has(input:placeholder-shown) > label,
.vitamente-checkout .form-row.woocommerce-invalid:has(textarea:placeholder-shown) > label {
	color: #6b7280 !important;
}
.vitamente-checkout .form-row.woocommerce-invalid input:placeholder-shown,
.vitamente-checkout .form-row.woocommerce-invalid textarea:placeholder-shown {
	border-color: #d1d5db !important;
}

/* =====================================================================
   Coupon pills no right column — verde claro
   ===================================================================== */

.vitamente-summary__coupons {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 6px 0;
	margin: 0;
	border: none;
	font-size: 14px;
}
.vitamente-summary__coupons[hidden] { display: none; }
.vitamente-summary__coupons-label {
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-gray-dark, #555);
}
.vitamente-summary__coupons-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-left: auto;
	justify-content: flex-end;
}

.vitamente-coupon-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 6px 4px 10px;
	background: #ecfdf3;
	color: var(--color-primary, #1f7a4d);
	border: 1px solid #b8e7c8;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
}
.vitamente-coupon-pill__code {
	font-weight: 700;
	text-transform: uppercase;
}
.vitamente-coupon-pill__amount {
	font-weight: 600;
	color: var(--color-primary, #1f7a4d);
}
.vitamente-coupon-pill__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background: rgba(31, 122, 77, 0.12);
	border: none;
	padding: 0;
	margin-left: 2px;
	color: var(--color-primary, #1f7a4d);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background .12s ease;
}
.vitamente-coupon-pill__remove:hover {
	background: var(--color-primary, #1f7a4d);
	color: #ffffff;
}

/* =====================================================================
   Quantity control nos items do checkout (- N +)
   ===================================================================== */

.vitamente-qty {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 4px;
}
.vitamente-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid #d1d5db;
	border-radius: 50%;
	background: #ffffff;
	color: #475063;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	/* Hit-area expandida via pseudo. Visualmente continua compacto (22x22)
	 * pra preservar layout, mas a area de toque vira 44x44 (WCAG 2.5.5
	 * + Apple HIG + Material Design minimum). Reduz mistap em mobile —
	 * especialmente pro botao "-" quando qty=1 que arma is-confirm-remove. */
	position: relative;
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
/* Hit-area pseudo: 44x44 invisivel sobre o botao. Suficiente
 * pra cumprir WCAG sem alterar layout/visual. */
.vitamente-qty__btn::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
	background: transparent;
}
.vitamente-qty__btn:hover {
	border-color: var(--color-primary, #1f7a4d);
	color: var(--color-primary, #1f7a4d);
}
.vitamente-qty__btn:active {
	background: var(--color-primary, #1f7a4d);
	color: #ffffff;
}
.vitamente-qty__btn:disabled,
.vitamente-qty__btn.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	pointer-events: none;
}

/* Aviso fixo de cap do bump — sempre visivel quando max_quantity > 1.
 * Estilo discreto: texto pequeno laranja, sem fundo nem borda. JS adiciona
 * .is-flashing por ~1s ao tentar exceder (pulse de cor pra chamar atencao). */
.vitamente-summary__qty-cap-note {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1.3;
	color: #b45309;
	opacity: 0.85;
}
.vitamente-summary__qty-cap-note.is-flashing {
	animation: vitamente-cap-pulse 1s ease-out;
}
@keyframes vitamente-cap-pulse {
	0%   { color: #b45309; opacity: 0.85; transform: translateY(0); }
	25%  { color: #b91c1c; opacity: 1;    transform: translateY(-1px); }
	100% { color: #b45309; opacity: 0.85; transform: translateY(0); }
}

/* Badge "-X%" no bump line do cart — mesma identidade visual do badge
 * usado no card de bump antes de adicionar (.vitamente-orderbump__discount):
 * vermelho/sale, transparent, borda, font 10px. Reforco visual de que
 * o desconto persistiu apos adicionar ao carrinho. */
.vitamente-summary__price-discount {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 0 5px;
	background: transparent;
	color: var(--color-sale, #c0392b);
	font-size: 10px;
	font-weight: var(--font-weight-medium, 500);
	border: 1px solid currentColor;
	border-radius: var(--radius-sm, 6px);
	white-space: nowrap;
	line-height: 1.6;
}
.vitamente-qty__value {
	min-width: 22px;
	text-align: center;
	font-size: 13px;
	font-weight: 500;
	color: var(--color-dark, #1f2329);
}

/* Confirmação de remoção: cliente clica em "-" com qty=1, primeiro click
   pinta o botão de vermelho (armado) sem remover. Segundo click remove
   de fato. Click fora do item desfaz (handler em checkout.js). */
.vitamente-summary__items li.is-confirm-remove .vitamente-qty__btn--decrease {
	border-color: var(--color-sale, #c0392b);
	color: var(--color-sale, #c0392b);
	background: rgba(192, 57, 43, 0.06);
}
.vitamente-summary__items li.is-confirm-remove .vitamente-qty__btn--decrease:hover {
	background: var(--color-sale, #c0392b);
	color: #fff;
}

.vitamente-summary__items li.is-updating {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity .15s ease;
}

/* =====================================================================
   "Incluir informações adicionais" toggle + textarea de observações
   ===================================================================== */

/* Toggle herda visual do .vitamente-billing-toggle (já estilizado) */

/* Por padrão, .woocommerce-additional-fields fica escondido. Aparece
   quando o form ganha .has-additional-info via JS. */
.vitamente-checkout .woocommerce-additional-fields {
	display: none;
}
.vitamente-checkout form.checkout.has-additional-info .woocommerce-additional-fields {
	display: block;
	margin-top: 8px;
}

/* Textarea de observações: altura igual aos outros inputs (~50px) com
   resize vertical pra cliente expandir se quiser */
.vitamente-checkout #order_comments {
	min-height: 50px !important;
	max-height: 200px;
	resize: vertical !important;
	padding: 16px 12px 14px !important;
}

/* Textarea: label sempre no topo flutuado (centro vertical não faz
   sentido em textarea, que começa o texto no topo). Aplica-se ao
   #order_comments e qualquer outro textarea futuro. */
.vitamente-checkout .form-row:has(textarea) > label {
	top: 0 !important;
	transform: translateY(-50%) !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5b6370 !important;
}

/* Frete no right column: nome do método ("SEDEX", "PAC") + pill ou preço */
.vitamente-summary__method {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-dark, #1f2329);
	margin-right: 6px;
}

/* =====================================================================
   Acessibilidade — respeita preferência do sistema por menos animação.
   Cobre todas as transitions/animations do plugin. Mantém o efeito de
   "estado mudando" instantâneo (sem subir transition pra 0.01s, que
   causa cascade rendering); usa `none`/`auto` direto.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.vitamente-checkout *,
	.vitamente-checkout *::before,
	.vitamente-checkout *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.vitamente-spinner { animation: none !important; }
}

/* =====================================================================
   Order Bump — card de oferta no resumo do pedido (1-click add)
   Visual: borda destacada + badge + animação sutil pra capturar atenção
   sem ser agressivo. Cor accent verde da marca.
   ===================================================================== */

/* Wrapper único — caso 1 bump usa, mantém o espaçamento vertical do
   bloco. Caso 2+ vira carrossel (--carousel modifier). */
.vitamente-orderbumps { margin: var(--spacing-md, 16px) 0; }
.vitamente-orderbumps .vitamente-orderbump { margin: 0; }

/* Carrossel horizontal com swipe nativo (scroll-snap) + dots embaixo.
   Dispensa libs externas. Mobile-first: cada slide ocupa 100% da
   largura, swipe gesture funciona em iOS/Android via -webkit-overflow-
   scrolling. JS em checkout.js sincroniza dot ativo com a posição. */
.vitamente-orderbumps--carousel {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vitamente-orderbumps__viewport {
	position: relative;
}

/* Setas laterais — só aparecem no desktop (≥720px). No mobile o cliente
   usa swipe nativo do scroll-snap, então as setas seriam redundantes e
   roubariam espaço. Posicionadas dentro do viewport (não fora) porque
   .vitamente-review tem overflow:clip e cortaria botões externos. */
.vitamente-orderbumps__nav {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	margin: 0;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: 50%;
	color: var(--color-gray-dark, #555);
	cursor: pointer;
	z-index: 2;
	transition: border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.vitamente-orderbumps__nav:hover {
	border-color: var(--color-primary, #1f7a4d);
	color: var(--color-primary, #1f7a4d);
}

.vitamente-orderbumps__nav:disabled {
	opacity: 0.35;
	cursor: default;
	border-color: var(--color-border, #e8e8e8);
	color: var(--color-gray-dark, #555);
}

.vitamente-orderbumps__nav--prev { left: 4px; }
.vitamente-orderbumps__nav--next { right: 4px; }

@media (min-width: 720px) {
	.vitamente-orderbumps__nav {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

.vitamente-orderbumps__track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 12px;
}

.vitamente-orderbumps__track::-webkit-scrollbar { display: none; }

.vitamente-orderbumps__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
}

.vitamente-orderbumps__slide .vitamente-orderbump {
	height: 100%;
}

.vitamente-orderbumps__dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.vitamente-orderbumps__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.16);
	cursor: pointer;
	transition: background 0.2s ease, width 0.25s ease;
}

.vitamente-orderbumps__dot:hover {
	background: rgba(0, 0, 0, 0.36);
}

.vitamente-orderbumps__dot.is-active {
	width: 22px;
	background: var(--color-accent-dark, #1f7a4d);
	border-radius: 999px;
}

.vitamente-orderbumps__dot:focus { outline: none; }
.vitamente-orderbumps__dot:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 203, 2, 0.35);
}

.vitamente-orderbump {
	margin: var(--spacing-md, 16px) 0;
	padding: 10px;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e8e8e8);
	border-radius: var(--radius-md, 12px);
	transition: border-color 0.18s ease, opacity 0.25s ease;
}

.vitamente-orderbump:hover {
	border-color: var(--color-primary, #1f7a4d);
}

.vitamente-orderbump.is-added {
	opacity: 0.5;
}

.vitamente-orderbump__body {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 10px;
	align-items: center;
}

.vitamente-orderbump__image {
	margin: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm, 6px);
	overflow: hidden;
	background: var(--color-bg-light, #f8f8f8);
}

.vitamente-orderbump__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.vitamente-orderbump__meta {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.vitamente-orderbump__badge {
	align-self: flex-start;
	padding: 0 6px;
	background: transparent;
	color: var(--color-primary, #1f7a4d);
	border: 1px solid currentColor;
	font-size: 9px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: var(--radius-pill, 999px);
	line-height: 1.6;
}

.vitamente-orderbump__title {
	margin: 0;
	font-size: 13px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-dark, #303030);
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.vitamente-orderbump__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
}

.vitamente-orderbump__price-from {
	font-size: 11.5px;
	color: var(--color-gray, #767676);
	text-decoration: line-through;
}

.vitamente-orderbump__price-by {
	font-size: 13px;
	font-weight: var(--font-weight-medium, 500);
	color: var(--color-dark, #303030);
}

.vitamente-orderbump__price.is-discounted .vitamente-orderbump__price-by {
	color: var(--color-primary, #1f7a4d);
}

.vitamente-orderbump__discount {
	display: inline-flex;
	align-items: center;
	padding: 0 5px;
	background: transparent;
	color: var(--color-sale, #c0392b);
	font-size: 10px;
	font-weight: var(--font-weight-medium, 500);
	border: 1px solid currentColor;
	border-radius: var(--radius-sm, 6px);
	white-space: nowrap;
	line-height: 1.6;
}

.vitamente-orderbump__btn {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 10px;
	padding: 7px 12px;
	background: transparent;
	color: var(--color-primary, #1f7a4d);
	border: 1px solid var(--color-primary, #1f7a4d);
	border-radius: var(--radius-sm, 6px);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: var(--font-weight-medium, 500);
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}

.vitamente-orderbump__btn:hover {
	background: var(--color-primary, #1f7a4d);
	color: #fff;
}

.vitamente-orderbump__btn:disabled { cursor: wait; opacity: 0.7; }

.vitamente-orderbump__btn.is-busy svg { animation: vitamente-spin 0.7s linear infinite; }

/* =====================================================================
   Free shipping bar (resumo do pedido)
   Atualiza automatico via WC fragments — width:N% transition smooth.
   ===================================================================== */
.vitamente-shipping-bar {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 18px;
	margin: 0 0 var(--spacing-md, 16px);
	background: linear-gradient(135deg, #f0faf4 0%, #ffffff 60%);
	border: 1px solid rgba(0, 203, 2, 0.25);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 1px 3px rgba(0, 203, 2, 0.04);
	transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}

.vitamente-shipping-bar[hidden] {
	display: none;
}

.vitamente-shipping-bar__track {
	height: 8px;
	background: rgba(0, 203, 2, 0.12);
	border-radius: 999px;
	overflow: hidden;
	position: relative;
}

.vitamente-shipping-bar__fill {
	height: 100%;
	/* Gradiente original ESTÁTICO (escuro→claro, esquerda→direita).
	 * O movimento "vivo" vem só do shimmer (::after) cruzando da
	 * esquerda pra direita continuamente — direção única, sem efeito
	 * de farol que vinha do gradiente simétrico animado. */
	background: linear-gradient(90deg, #4caf50 0%, #00cb02 100%);
	border-radius: 999px;
	transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.vitamente-shipping-bar__fill::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Faixa de luz translúcida que viaja da esquerda pra direita.
	 * translateX -100% → 100% garante movimento unidirecional puro
	 * (sem animar background-position, que tendia a parecer cíclico). */
	background: linear-gradient(110deg, transparent 0%, transparent 35%, rgba(255,255,255,0.42) 50%, transparent 65%, transparent 100%);
	transform: translateX(-100%);
	animation: vitamente-shipping-bar-shimmer 2.4s linear infinite;
	pointer-events: none;
}

@keyframes vitamente-shipping-bar-shimmer {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}

.vitamente-shipping-bar__msg {
	margin: 0;
	font-size: 13px;
	font-weight: 400;
	color: var(--color-dark, #303030);
	line-height: 1.4;
	letter-spacing: -0.005em;
}

/* Estado desbloqueado: borda mais forte, fundo mais brilhante,
   mensagem em verde + bold */
.vitamente-shipping-bar.is-unlocked {
	background: linear-gradient(135deg, #e8f5e8 0%, #f0faf4 100%);
	border-color: rgba(0, 203, 2, 0.55);
	box-shadow: 0 1px 3px rgba(0, 203, 2, 0.12), 0 0 0 4px rgba(0, 203, 2, 0.04);
}

.vitamente-shipping-bar.is-unlocked .vitamente-shipping-bar__fill {
	/* Mesmo gradient do estado "ainda falta" — visual consistente
	 * (#4caf50 → #00cb02). A "conquista" é comunicada pelo container
	 * (.is-unlocked com borda + fundo verdes mais saturados) e pelo
	 * texto da mensagem (já vem em verde + bold). */
	background: linear-gradient(90deg, #4caf50 0%, #00cb02 100%);
}

.vitamente-shipping-bar.is-unlocked .vitamente-shipping-bar__msg {
	color: #007802;
	font-weight: 400;
}

/* Mobile compact */
@media (max-width: 540px) {
	.vitamente-shipping-bar { padding: 12px 14px; }
	.vitamente-shipping-bar__msg { font-size: 12.5px; }
}

/* Reduced motion: sem animação/transição no progress fill */
@media (prefers-reduced-motion: reduce) {
	.vitamente-shipping-bar__fill,
	.vitamente-shipping-bar__fill::after {
		animation: none !important;
		transition: none !important;
	}
}

/* =====================================================================
   Fees (Desconto Pix, Desconto Boleto, etc) — mesma cor/peso das demais
   linhas (Subtotal, Frete) pra não disputar atenção visual.

   O rule .vitamente-summary__totals > div (size 14 / weight 300 / cor #555)
   só pega direct children. As fees ficam dentro de .vitamente-summary__fees
   (pra serem replaceadas atomicamente como fragment), então um nível abaixo
   — replicamos a mesma tipografia aqui.
   ===================================================================== */
.vitamente-summary__fees:empty { display: none; }
.vitamente-summary__fees { display: block; width: 100%; }

.vitamente-summary__fees .vitamente-summary__row {
	width: 100%;
	padding: 6px 0;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-gray-dark, #555);
	/* Defensivo: alguns themes/builders sobrescrevem display do row
	 * dentro de .vitamente-summary__fees, fazendo o valor "Desconto Pix"
	 * cair embaixo OU colado ao label em vez de à direita. Re-afirmamos
	 * flex + width 100% pra ocupar linha inteira. margin-left:auto no
	 * value empurra ate a borda direita mesmo se tema sobrescreve flex. */
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}
.vitamente-summary__fees .vitamente-summary__label {
	flex: 1 1 auto;
	min-width: 0;
}
.vitamente-summary__fees .vitamente-summary__value {
	flex: 0 0 auto;
	margin-left: auto;
	text-align: right;
	white-space: nowrap;
}

/* =====================================================================
   Atalho flutuante "Revise seu pedido" — tab colado no bottom-center.
   Some via JS quando a coluna #vitamente-review-anchor está visível.
   ===================================================================== */
.vitamente-review-jump {
	position: fixed;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px 14px;
	background: var(--color-dark, #303030);
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	border-radius: 14px 14px 0 0;
	box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.18);
	z-index: 1000;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
	will-change: transform;
}

.vitamente-review-jump[hidden] {
	display: inline-flex;                         /* sobrescreve [hidden] pra animar */
	pointer-events: none;
	opacity: 0;
	transform: translateX(-50%) translateY(120%);
}

.vitamente-review-jump:hover {
	background: #1a1a1a;
}

.vitamente-review-jump:active {
	transform: translateX(-50%) translateY(2px);
}

.vitamente-review-jump__chevron {
	flex-shrink: 0;
	opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
	.vitamente-review-jump { transition: opacity 0.2s ease; }
	.vitamente-review-jump[hidden] { transform: translateX(-50%); }
}
}

/* =====================================================================
   Cart page (página /carrinho) — layout 2/3 produtos + 1/3 resumo
   ===================================================================== */

/* Container do <form> do cart — padrão idêntico ao checkout
 * (.vitamente-form). max-width + padding centralizam o conteúdo na
 * mesma largura do checkout. Sem isso o form spanava 100% e o inner
 * div ficava com max-width independente, parecendo full-width quando
 * o tema tinha estilos largos no <form>. */
.vitamente-cart-form,
form.vitamente-cart-form,
.vitamente-page__main .vitamente-cart-form {
	max-width: var(--container-max, 1280px) !important;
	margin: 0 auto !important;
	padding: var(--spacing-lg, 32px) var(--container-pad, 24px) var(--spacing-2xl, 96px) !important;
	box-sizing: border-box !important;
	width: auto !important;
}

.vitamente-cart-form .vitamente-cart {
	width: 100%;
	box-sizing: border-box;
}

.vitamente-cart__head {
	margin: 8px 4px 16px;
}
.vitamente-cart__head h1 {
	margin: 0 0 4px;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--color-dark, #303030);
}
.vitamente-cart__head p {
	margin: 0;
	color: var(--color-gray-dark, #6b7280);
	font-size: 0.875rem;
}

.vitamente-cart__grid {
	display: grid;
	gap: var(--spacing-md, 16px);
	grid-template-columns: minmax(0, 1fr);
	align-items: flex-start;
}

@media (min-width: 1024px) {
	.vitamente-cart__grid {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
}

.vitamente-cart__items-card,
.vitamente-cart__summary-card {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e6e7eb);
	border-radius: var(--radius-md, 12px);
	padding: var(--spacing-md, 16px);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.vitamente-cart__summary-head h2 {
	margin: 0 0 14px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-dark, #303030);
}

/* Items list — reaproveita .vitamente-summary__items mas com mais ar */
.vitamente-cart__items {
	margin: 0;
	padding: 0;
	list-style: none;
}
.vitamente-cart__items li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border, #eef0f2);
}
.vitamente-cart__items li:last-child { border-bottom: 0; }
.vitamente-cart__items img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 8px;
	flex-shrink: 0;
}

/* Cart page (Carrinho) — alinhamento dos pricos a direita.
 * Sidebar do checkout usa grid (auto-aligned); cart page usa flex sem
 * margin auto no preco, fazendo "R$ X" colar ao titulo em vez de ir pra
 * borda direita. Brinde ja tinha margin-left:auto (.708:738), agora
 * preco/price-stack ganham o mesmo tratamento pra consistencia visual. */
.vitamente-cart__items > li > .vitamente-summary__price,
.vitamente-cart__items > li > .vitamente-summary__price-stack {
	margin-left: auto;
	text-align: right;
	flex-shrink: 0;
}
/* Garante que o meta (titulo + qty controls) ocupe espaco disponivel
 * empurrando o preco pra direita mesmo se margin auto for sobrescrito. */
.vitamente-cart__items > li > .vitamente-summary__meta {
	flex: 1 1 auto;
	min-width: 0;
}

.vitamente-cart__continue {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--color-border, #e6e7eb);
}
.vitamente-cart__continue-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--color-gray-dark, #6b7280);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	transition: color 0.15s ease;
}
.vitamente-cart__continue-link:hover { color: var(--color-dark, #303030); }

/* CEP + frete */
.vitamente-cart__shipping-calc {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border, #eef0f2);
}
.vitamente-cart__label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--color-dark, #303030);
	margin-bottom: 6px;
}
.vitamente-cart__postcode {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid var(--color-border, #d6dadf);
	border-radius: 8px;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.vitamente-cart__postcode:focus {
	outline: none;
	border-color: var(--color-primary, #1f7a4d);
	box-shadow: 0 0 0 3px rgba(31, 122, 77, 0.12);
}
.vitamente-cart__postcode-help {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	color: var(--color-gray-dark, #6b7280);
}
.vitamente-cart__postcode-help.is-error { color: #b00020; }

.vitamente-cart__methods {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.vitamente-cart__methods.is-loading { opacity: 0.55; pointer-events: none; }
.vitamente-cart__methods-empty {
	margin: 0;
	padding: 12px;
	background: #f6f7f8;
	border: 1px dashed var(--color-border, #d6dadf);
	border-radius: 8px;
	font-size: 0.8125rem;
	color: var(--color-gray-dark, #6b7280);
	text-align: center;
}
.vitamente-cart__methods-package {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Cupom + totais — herdam estilos do .vitamente-summary__* */
.vitamente-cart__coupon {
	margin: 16px 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--color-border, #eef0f2);
}
.vitamente-cart__coupon:empty { display: none; }
.vitamente-cart__totals { margin-top: 8px; }

/* CTA finalizar */
.vitamente-cart__checkout-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding: 14px 16px;
	background: var(--color-primary, #1f7a4d);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.15s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.vitamente-cart__checkout-btn:hover {
	background: var(--color-primary-dark, #166038);
	color: #fff;
}
.vitamente-cart__checkout-btn:active { transform: translateY(1px); }

/* Empty state */
.vitamente-cart-empty {
	max-width: 520px;
	margin: 64px auto;
	padding: 32px 24px;
	text-align: center;
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-border, #e6e7eb);
	border-radius: var(--radius-md, 12px);
}
.vitamente-cart-empty svg {
	color: var(--color-gray-dark, #9ca3af);
	margin-bottom: 12px;
}
.vitamente-cart-empty h1 {
	margin: 0 0 8px;
	font-size: 1.25rem;
	font-weight: 600;
}
.vitamente-cart-empty p {
	margin: 0 0 20px;
	color: var(--color-gray-dark, #6b7280);
}
.vitamente-cart-empty .vitamente-empty__cta {
	display: inline-block;
	padding: 12px 20px;
	background: var(--color-primary, #1f7a4d);
	color: #fff;
	text-decoration: none;
	border-radius: 8px;
	font-weight: 500;
}
.vitamente-cart-empty .vitamente-empty__cta:hover { background: var(--color-primary-dark, #166038); }

/* Mobile: reordena pra resumo aparecer DEPOIS dos itens (fluxo natural
   de leitura). No grid de 1 coluna, ordem do HTML já é "items, summary"
   — esse override só vale se o merchant inverter a ordem por algum
   motivo. Mantido por defesa. */
@media (max-width: 1023px) {
	.vitamente-cart__items-col { order: 1; }
	.vitamente-cart__summary-col { order: 2; }
}

/* Sidecart anti-flicker: esconde o wrapper [data-vitamente-minicart-
 * summary] que aparece em .widget_shopping_cart_content (no body do
 * drawer) ANTES do reflowSidecart mover pra .cart-drawer__foot —
 * caso contrário o frete piscava no meio do drawer durante o ms entre
 * fragment refresh e JS reflow.
 *
 * GUARD: a regra só vale quando o JS adicionou a class
 * .vitamente-reflow-ready no .cart-drawer (= bootstrap rodou e o reflow
 * está ativo). Sem a class, wrapper aparece normalmente — defesa caso
 * o JS não rode (race, JS error, contexto sem .cart-drawer__foot). */
.cart-drawer.vitamente-reflow-ready .widget_shopping_cart_content [data-vitamente-minicart-summary] {
	display: none;
}
.cart-drawer.vitamente-reflow-ready .cart-drawer__foot [data-vitamente-minicart-summary] {
	display: block;
}

/* ════════════════════════════════════════════════════════════════════
 * Sticky CTA Mobile — barra fixa no bottom com Total + Continuar
 * ════════════════════════════════════════════════════════════════════
 * Aparece em mobile quando user rola pra fora da view do place_order.
 * Smooth scroll ate o botao real (sem click programatico — deixa user
 * ver validacoes inline).
 * Display via JS quando IntersectionObserver detecta #place_order fora
 * do viewport.
 */
.vitamente-mobile-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	padding-bottom: calc(10px + env(safe-area-inset-bottom));
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
	box-shadow: 0 -4px 16px rgba(15, 23, 42, .08);
	transform: translateY(100%);
	transition: transform 200ms ease;
}
.vitamente-mobile-cta.is-visible {
	transform: translateY(0);
}
.vitamente-mobile-cta__total {
	display: flex;
	flex-direction: column;
	font-size: 11px;
	color: #64748b;
	line-height: 1.2;
}
.vitamente-mobile-cta__label {
	font-size: 11px;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.vitamente-mobile-cta__value {
	font-size: 16px;
	color: #0f172a;
	font-weight: 700;
}
.vitamente-mobile-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	min-height: 44px; /* WCAG 2.5.5 touch target */
	border: 0;
	border-radius: 999px;
	background: var(--color-primary, #1f7a4d);
	color: #ffffff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(31, 122, 77, .25);
}
.vitamente-mobile-cta__btn:hover,
.vitamente-mobile-cta__btn:focus {
	background: var(--color-primary-dark, #166639);
	outline: none;
}
.vitamente-mobile-cta__btn:active {
	transform: scale(.98);
}
@media (min-width: 1024px) {
	/* Desktop: column right column always visible — sticky CTA nao faz sentido */
	.vitamente-mobile-cta { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.vitamente-mobile-cta { transition: none; }
}

/* Padding bottom no body em mobile pra nao cobrir conteudo final */
@media (max-width: 1023px) {
	.vitamente-checkout--checkout {
		padding-bottom: 80px;
	}
}