/* 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 (estilo Rishi). 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 — Rishi-style 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;
}

/* 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%;
}
.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: var(--color-primary, #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 que o WC usa: garante que o aviso fique dentro do container
   principal, abaixo do header, alinhado com a largura do formulário. */
.vitamente-checkout .woocommerce-notices-wrapper,
.vitamente-checkout .woocommerce-NoticeGroup {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: var(--spacing-md, 16px) var(--container-pad, 24px) 0;
}
.vitamente-checkout .woocommerce-notices-wrapper:empty,
.vitamente-checkout .woocommerce-NoticeGroup:empty {
	padding: 0;
}

.vitamente-checkout .woocommerce-error,
.vitamente-checkout .woocommerce-message,
.vitamente-checkout .woocommerce-info {
	margin: 0 0 var(--spacing-md, 16px);
	padding: 12px 14px;
	border: 1px solid;
	border-radius: var(--radius-sm, 6px);
	list-style: none;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
}
.vitamente-checkout .woocommerce-info {
	border-color: #cfe5f4;
	background: #f1f8fc;
	color: #1a4566;
}

/* Notices que escaparem sem wrapper (alguns plugins imprimem direto no
   <main>) — constrange à mesma largura do form. */
.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 {
	max-width: var(--container-max, 1280px);
	margin: var(--spacing-md, 16px) auto 0;
	margin-left: auto;
	margin-right: auto;
}

.vitamente-checkout .woocommerce-error {
	border-color: rgba(192, 57, 43, 0.3);
	background: rgba(192, 57, 43, 0.06);
	color: var(--color-sale, #c0392b);
}

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

.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;
}
.vitamente-coupon__form[hidden] { display: none !important; }

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

.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__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);
}

/* 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;
}

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

.vitamente-thankyou__addresses .woocommerce-columns--addresses {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--spacing-md, 16px);
}

/* =====================================================================
   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;
}

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

.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;
	cursor: pointer;
	transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.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 {
	opacity: 0.4;
	cursor: not-allowed;
}
.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: 3px;
}

.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 .vitamente-summary__row {
	padding: 6px 0;
	font-size: 14px;
	font-weight: var(--font-weight-light, 300);
	color: var(--color-gray-dark, #555);
}

/* =====================================================================
   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 {
	max-width: var(--container-max, 1280px);
	margin: 0 auto;
	padding: var(--spacing-lg, 32px) var(--container-pad, 24px) var(--spacing-2xl, 96px);
	box-sizing: border-box;
}

.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;
}

.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; }
}

/* =====================================================================
   Mini-cart / sidecart — totals block + finalizar compra (padronizado
   com o checkout). Plugin renderiza tudo dentro do mini-cart.php; o
   footer do tema (.cart-drawer__foot) é escondido via JS.
   ===================================================================== */

.vitamente-minicart__summary {
	/* margin-top / padding-top / border-top removidos — o
	 * .cart-drawer__foot já tem separação visual antes (divisor da
	 * lista de items). Adicionar mais espaço ficava redundante. */
}

/* Sidecart drawer: garantir que os badges (GRÁTIS solid + cupom pill
 * outline) tenham as mesmas cores do checkout. Theme da loja pode
 * sobrescrever com seletores tipo .cart-drawer span — escopamos com
 * .cart-drawer pra bumpar specificity sem !important. */
.cart-drawer .vitamente-summary__free {
	background: var(--color-primary, #1f7a4d);
	color: #ffffff;
	border: 0;
	padding: 3px 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	white-space: nowrap;
	display: inline-block;
}

.cart-drawer .vitamente-coupon-pill {
	background: #ecfdf3;
	color: var(--color-primary, #1f7a4d);
	border: 1px solid #b8e7c8;
	padding: 4px 6px 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.cart-drawer .vitamente-coupon-pill__code {
	font-weight: 700;
	text-transform: uppercase;
}
.cart-drawer .vitamente-coupon-pill__amount {
	font-weight: 600;
	color: var(--color-primary, #1f7a4d);
}
.cart-drawer .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;
}
.cart-drawer .vitamente-coupon-pill__remove:hover {
	background: var(--color-primary, #1f7a4d);
	color: #ffffff;
}

.vitamente-minicart__checkout-btn {
	margin-top: 14px;
}

.vitamente-minicart__coupons {
	margin: 0;
}