/* ============================================================
 * DROPE — Checkout (bloco wp:edd/checkout)
 *
 * Mesmo sistema da página de produto: campo neutro, tinta quase preta,
 * fios de 1px, laranja da marca só na ação principal.
 *
 * Atenção ao Stripe: o Payment Element roda num iframe cross-origin e o
 * plugin copia o visual lendo o computed style de .edd-input / .edd-label /
 * .edd-gateway-option. Por isso essas três classes são estilizadas de forma
 * simples e direta — e o padding é replicado por filtro PHP, já que o Stripe
 * não copia padding sozinho.
 * ============================================================ */

/*
 * Os tokens precisam valer nos TRÊS blocos.
 *
 * O carrinho (.edd-blocks__cart) é um bloco separado do EDD, renderizado fora
 * do #edd_checkout_form_wrap. Declarados só no formulário, os tokens não
 * chegavam ao carrinho: var(--ck-trash) ficava inválido, a máscara do ícone
 * falhava e o botão de remover virava um quadrado vazio.
 */
.edd-blocks__checkout,
#edd_checkout_form_wrap,
.edd-blocks__cart {
	--ck-ink: #14161a;
	--ck-ink-2: #3d424a;
	--ck-muted: #6b7076;
	--ck-faint: #9aa0a6;
	--ck-line: #e4e4e7;
	--ck-line-soft: #f1f1f4;
	--ck-surface: #fff;
	--ck-canvas: #f7f7f8;
	--ck-brand: #ff7e01;
	--ck-brand-hover: #e86f00;
	--ck-brand-ink: #a34700;
	--ck-brand-tint: #fff4e8;
	--ck-ok: #157f58;
	--ck-ok-tint: #eef8f3;
	--ck-danger: #b4231c;
	--ck-r: 10px;
	--ck-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

	/* Ícones em máscara, para herdarem a cor de cada estado. */
	--ck-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h11M6.5 4V2.8h3V4M4 4l.6 9.2h6.8L12 4M6.6 6.6v4M9.4 6.6v4'/%3E%3C/svg%3E");
	--ck-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 1.8H14v5.6l-6.6 6.6a1 1 0 0 1-1.4 0L1.8 9.8a1 1 0 0 1 0-1.4z'/%3E%3Ccircle cx='11' cy='5' r='1'/%3E%3C/svg%3E");

	color: var(--ck-ink);
	font-size: 15px;
}

/* ---------- Layout ---------- */

#edd_checkout_form_wrap.wp-block-edd-checkout {
	max-width: 1120px;
	margin: 0 auto;
	padding: 8px 0 64px;
	gap: 28px;
}

@media (min-width: 782px) {
	#edd_checkout_form_wrap.edd-checkout__layout--two-thirds {
		grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
		gap: 32px;
		align-items: start;
	}
}

/* ---------- Painéis do formulário ---------- */

#edd_purchase_form .edd-blocks-form,
#edd_purchase_form fieldset.edd-blocks-form {
	padding: 22px;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r);
	background: var(--ck-surface);
	gap: 16px;
}

#edd_purchase_form legend,
.edd-blocks__checkout legend {
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--ck-ink);
	border: none;
}

/* O CFM desenha o bloco de dados pessoais. */
#edd_checkout_user_info.cfm-form {
	padding: 22px;
	margin: 0 0 18px;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r);
	background: var(--ck-surface);
}

/* ---------- Campos ---------- */

.edd-blocks__checkout label,
#edd_purchase_form label,
.edd-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-ink-2);
}

/* Simples de propósito: é daqui que o Stripe lê o visual do iframe. */
.edd-input,
#edd_purchase_form input[type="text"],
#edd_purchase_form input[type="email"],
#edd_purchase_form input[type="tel"],
#edd_purchase_form input[type="password"],
#edd_purchase_form select,
.edd-select {
	display: block;
	width: 100%;
	border: 1px solid #d8d8de;
	border-radius: 8px;
	background: var(--ck-surface);
	font-family: inherit;
	font-size: 14.5px;
	color: var(--ck-ink);
	transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.edd-input,
#edd_purchase_form input[type="text"],
#edd_purchase_form input[type="email"],
#edd_purchase_form input[type="tel"],
#edd_purchase_form input[type="password"],
#edd_purchase_form select {
	padding: 11px 13px;
}

.edd-input:focus,
#edd_purchase_form input:focus,
#edd_purchase_form select:focus {
	outline: none;
	border-color: var(--ck-brand);
	box-shadow: 0 0 0 3px var(--ck-brand-tint);
}

.edd-input:hover,
#edd_purchase_form input:hover,
#edd_purchase_form select:hover { border-color: #c4c4cc; }

span.edd-required-indicator { color: var(--ck-danger); }

.edd-description {
	margin-top: 5px;
	font-size: 12.5px;
	color: var(--ck-faint);
}

/* ---------- Escolha do meio de pagamento ---------- */

#edd_payment_mode_select_wrap { margin-bottom: 18px; }

#edd_payment_mode_select {
	padding: 22px;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r);
	background: var(--ck-surface);
}

#edd-payment-mode-wrap {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
	margin-top: 4px;
}

.edd-blocks__checkout label.edd-gateway-option {
	display: flex !important;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--ck-line);
	border-radius: 9px;
	background: var(--ck-surface);
	font-size: 14px;
	font-weight: 600;
	color: var(--ck-ink);
	cursor: pointer;
	transition: border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.edd-blocks__checkout label.edd-gateway-option::before {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	border: 1.5px solid #c9c9d0;
	border-radius: 50%;
	background: var(--ck-surface);
	transition: border-color 0.14s ease, border-width 0.14s ease;
}

.edd-blocks__checkout label.edd-gateway-option:hover {
	border-color: #d0d0d6;
	background: var(--ck-canvas);
}

.edd-blocks__checkout label.edd-gateway-option-selected {
	border-color: var(--ck-brand);
	background: var(--ck-brand-tint);
	box-shadow: 0 0 0 1px var(--ck-brand);
}

.edd-blocks__checkout label.edd-gateway-option-selected::before {
	border-color: var(--ck-brand);
	border-width: 5px;
	box-shadow: inset 0 0 0 1px var(--ck-surface);
}

.edd-payment-icons { margin-left: auto; display: inline-flex; gap: 5px; }
.edd-payment-icons img.payment-icon { height: 22px; width: auto; }

/* ---------- Cartão / Stripe ---------- */

#edd_cc_fields {
	padding: 22px;
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r);
	background: var(--ck-surface);
}

#edd_secure_site_wrapper {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 14px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--ck-ok-tint);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ck-ok);
}

#edd_secure_site_wrapper .padlock svg { width: 13px; height: 13px; fill: currentColor; }

#edd-stripe-payment-errors:not(:empty) {
	margin-top: 12px;
	padding: 11px 14px;
	border: 1px solid #f3c9c6;
	border-radius: 8px;
	background: #fdf3f2;
	font-size: 13.5px;
	color: var(--ck-danger);
}

/* ---------- Carrinho ---------- */

.edd-blocks__cart { min-width: 0; }

@media (min-width: 782px) {
	.edd-blocks__cart {
		position: sticky;
		top: 88px;
	}
}

.edd-blocks-form__cart #edd_checkout_cart,
#edd_checkout_cart {
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-r);
	background: var(--ck-surface);
	overflow: hidden;
}

.edd-blocks-cart__row {
	padding: 14px 18px;
	gap: 12px;
}

.edd-blocks-cart__row-header {
	padding: 13px 18px;
	border-bottom: 1px solid var(--ck-line);
	background: var(--ck-canvas);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--ck-faint);
}

.edd-blocks-cart__row-item { border-bottom: 1px solid var(--ck-line-soft); }
.edd-blocks-cart__items .edd-blocks-cart__row-item:last-child { border-bottom: none; }

.edd_cart_item_name {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ck-ink);
}

.edd_cart_item_image img {
	display: block;
	width: 52px;
	height: 40px;
	object-fit: cover;
	border: 1px solid var(--ck-line);
	border-radius: 7px;
}

.edd_checkout_cart_item_title {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.edd_cart_item_price {
	font-family: var(--ck-mono);
	font-size: 13.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ck-ink);
	white-space: nowrap;
}

/*
 * Remover item.
 *
 * O EDD entrega um link com um "×" solto, que fica boiando ao lado do preço e
 * parece erro de layout. Aqui vira botão de verdade: alvo de 30px, contorno
 * discreto e ícone de lixeira, que diz o que faz sem depender de cor.
 */
/*
 * POR QUE OS SELETORES SÃO TÃO LONGOS
 *
 * O EDD dimensiona este botão em `1em`:
 *     .edd-blocks-form__cart .edd-blocks-cart__action-remove { width:1em; height:1em }
 * Isso é 0,2,0. A nossa regra era `.edd-blocks-cart__action-remove` (0,1,0) e
 * perdia. Combinado com o `font-size:0` que usamos para esconder o rótulo,
 * aquele `1em` virava ZERO: o botão existia no HTML, mas com 0x0 pixels.
 *
 * Repetir o contexto do EDD e acrescentar o elemento (`a`) leva a 0,2,1 e
 * vence. As medidas vão em pixels, nunca em `em`, para nunca mais dependerem
 * do tamanho da fonte.
 */
.edd-blocks-form__cart a.edd-blocks-cart__action-remove,
.edd-blocks-form__cart a.edd_cart_remove_item_btn,
.edd-blocks-cart__action-remove,
.edd_cart_remove_item_btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	margin-left: 10px;
	padding: 0;
	flex-shrink: 0;
	border: 1px solid var(--ck-line, #e4e4e7) !important;
	border-radius: 8px;
	/* O EDD põe um SVG em background; aqui o ícone é o ::before. */
	background-image: none !important;
	background-color: var(--ck-surface, #fff) !important;
	color: var(--ck-faint, #9aa0a6);
	font-size: 0;
	line-height: 0;
	opacity: 1 !important;
	text-decoration: none !important;
	transition: border-color 0.14s ease, background-color 0.14s ease, color 0.14s ease;
}

/* Lixeira desenhada em máscara, para herdar a cor do estado. */
.edd-blocks-cart__action-remove::before,
.edd_cart_remove_item_btn::before {
	content: '' !important;
	display: block;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h11M6.5 4V2.8h3V4M4 4l.6 9.2h6.8L12 4M6.6 6.6v4M9.4 6.6v4'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h11M6.5 4V2.8h3V4M4 4l.6 9.2h6.8L12 4M6.6 6.6v4M9.4 6.6v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.edd-blocks-form__cart a.edd-blocks-cart__action-remove:hover,
.edd-blocks-form__cart a.edd_cart_remove_item_btn:hover,
.edd-blocks-cart__action-remove:hover,
.edd_cart_remove_item_btn:hover,
.edd-blocks-cart__action-remove:focus-visible,
.edd_cart_remove_item_btn:focus-visible {
	border-color: #f2c9c7 !important;
	background-color: #fdf3f2 !important;
	color: var(--ck-danger, #b4231c);
}

.edd-blocks-cart__action-remove:active,
.edd_cart_remove_item_btn:active { transform: scale(0.94); }

/* A linha inteira dá a dica antes do ponteiro chegar no botão. */
.edd-blocks-cart__row-item { transition: background 0.14s ease; }
.edd-blocks-cart__row-item:hover { background: var(--ck-canvas); }

.edd-blocks-cart__row-item:hover .edd-blocks-cart__action-remove,
.edd-blocks-cart__row-item:hover .edd_cart_remove_item_btn { color: var(--ck-muted); }

/* Rodapé: cupom e total */

.edd-blocks-cart__row-footer {
	border-top: 1px solid var(--ck-line);
	background: var(--ck-canvas);
}

.edd_cart_total,
.edd_cart_footer_row .edd_cart_total {
	margin-left: auto;
	font-size: 15px;
	font-weight: 650;
	color: var(--ck-ink);
}

.edd_cart_amount {
	font-family: var(--ck-mono);
	font-size: 17px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ck-ink);
}

.edd_cart_discount { font-size: 13.5px; color: var(--ck-ok); }
.edd_cart_discount_row { background: var(--ck-ok-tint); }

/* ---------- Cupom ---------- */

#edd_discount_code { padding: 0; border: none; }

#edd_show_discount {
	padding: 0;
	background: none;
	border: none;
	font-size: 13.5px;
	color: var(--ck-muted);
}

/*
 * "Adicionar cupom" vinha como link sublinhado, competindo em peso com o total
 * ao lado. Vira um botão secundário: contorno de 1px, ícone de etiqueta e nada
 * de sublinhado — presente, sem disputar com a ação principal.
 */
.edd-blocks__checkout .edd_discount_link,
.edd-blocks__checkout .edd_discount_link:hover,
.edd-blocks__checkout .edd_discount_link:focus {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--ck-line);
	border-radius: 999px;
	background: var(--ck-surface);
	box-shadow: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-ink-2);
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}

.edd-blocks__checkout .edd_discount_link::before {
	content: '';
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background: currentColor;
	-webkit-mask: var(--ck-tag) center / contain no-repeat;
	mask: var(--ck-tag) center / contain no-repeat;
}

.edd-blocks__checkout .edd_discount_link:hover {
	border-color: var(--ck-brand);
	background: var(--ck-brand-tint);
	color: var(--ck-brand-ink);
}

#edd-discount-code-wrap {
	padding: 0;
	background: none;
	border: none;
}

.edd-discount-code-field-wrap {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.edd-discount-code-field-wrap #edd-discount { flex: 1; min-width: 0; }

.edd-blocks__checkout .edd-apply-discount {
	flex: 0 0 auto;
	padding: 0 16px;
	border: 1px solid var(--ck-ink);
	border-radius: 8px;
	background: var(--ck-ink);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.14s ease;
}

.edd-blocks__checkout .edd-apply-discount:hover { background: #000; color: #fff; }

/* ---------- Termos e envio ---------- */

#edd_purchase_submit {
	padding: 0;
	border: none;
	margin-top: 18px;
}

#edd_terms_agreement {
	padding: 14px 16px;
	margin-bottom: 14px;
	border: 1px solid var(--ck-line);
	border-radius: 9px;
	background: var(--ck-canvas);
}

.edd-terms-agreement {
	display: flex;
	align-items: flex-start;
	gap: 9px;
}

.edd-terms-agreement label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ck-ink-2);
	cursor: pointer;
}

#edd_agree_to_terms {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	accent-color: var(--ck-brand);
	flex-shrink: 0;
}

.edd-show-terms a.edd_terms_links {
	font-size: 12.5px;
	color: var(--ck-brand-ink);
}

/* Botão final — a única superfície laranja da página. */
.edd-blocks__checkout #edd-purchase-button,
#edd_purchase_submit #edd-purchase-button,
.edd-blocks__checkout input[type="submit"].edd-submit.green {
	display: block;
	width: 100%;
	padding: 16px 20px;
	border: 1px solid var(--ck-brand);
	border-radius: 10px;
	background: var(--ck-brand);
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
	box-shadow: 0 2px 8px rgba(255, 126, 1, 0.28);
}

.edd-blocks__checkout #edd-purchase-button:hover,
#edd_purchase_submit #edd-purchase-button:hover {
	background: var(--ck-brand-hover);
	border-color: var(--ck-brand-hover);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(255, 126, 1, 0.36);
}

.edd-blocks__checkout #edd-purchase-button:active { transform: none; }

#edd_purchase_submit #edd-purchase-button[data-edd-button-state="disabled"],
#edd_purchase_submit #edd-purchase-button[data-edd-button-state="updating"] {
	opacity: 0.55;
	cursor: default;
	transform: none;
	box-shadow: none;
}

/* ---------- Alertas ---------- */

.edd_errors,
.edd-alert {
	padding: 12px 15px;
	border-radius: 9px;
	font-size: 13.5px;
	border: 1px solid transparent;
}

.edd-alert-error,
.edd_errors.edd-alert-error {
	border-color: #f3c9c6;
	background: #fdf3f2;
	color: var(--ck-danger);
}

.edd-alert-error p, .edd_errors p { margin: 0; }

/* ---------- Carrinho vazio ---------- */

.edd_empty_cart {
	display: block;
	padding: 34px 20px;
	border: 1px dashed var(--ck-line);
	border-radius: var(--ck-r);
	background: var(--ck-canvas);
	text-align: center;
	font-size: 14.5px;
	color: var(--ck-muted);
}

/* ---------- Selos de confiança (via hook) ---------- */

.ck-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--ck-line-soft);
}

.ck-trust li {
	display: flex;
	align-items: center;
	gap: 7px;
	list-style: none;
	font-size: 12.5px;
	color: var(--ck-muted);
}

.ck-trust svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--ck-ok); }

/* ---------- Responsivo ---------- */

@media (max-width: 781px) {
	#edd_checkout_form_wrap.wp-block-edd-checkout { padding-bottom: 40px; }

	/* No mobile o resumo vem primeiro: o cliente confere o que vai pagar. */
	.edd-blocks__cart { order: -1; }

	#edd_purchase_form .edd-blocks-form,
	#edd_cc_fields,
	#edd_payment_mode_select,
	#edd_checkout_user_info.cfm-form { padding: 18px; }

	#edd-payment-mode-wrap { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.edd-blocks__checkout * { transition: none !important; }
}

/* ============================================================
 * Campos em duas colunas
 *
 * Um campo por linha alonga o formulário sem necessidade. Aqui os dois blocos
 * viram grid de 2 colunas e a ordem é definida por CSS — o HTML do EDD/CFM
 * continua intacto, só a apresentação muda.
 * ============================================================ */

/* ---------- Informações pessoais (CFM) ---------- */

#edd_checkout_user_info.cfm-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
	align-items: start;
}

#edd_checkout_user_info.cfm-form legend { grid-column: 1 / -1; }

/* Nome | Sobrenome · Email inteiro · Telefone | CPF */
#edd_checkout_user_info #edd-first-name-wrap { grid-column: 1; }
#edd_checkout_user_info #edd-last-name-wrap  { grid-column: 2; }
#edd_checkout_user_info #edd-email-wrap      { grid-column: 1 / -1; }
#edd_checkout_user_info .cfm-el.phone        { grid-column: 1; }
#edd_checkout_user_info .cfm-el.cpf          { grid-column: 2; }

/* Os hidden do CFM são filhos diretos e ocupariam células do grid. */
#edd_checkout_user_info.cfm-form > input[type="hidden"] { display: none; }

#edd_checkout_user_info .cfm-el { margin: 0; }

/* ---------- Informações de cobrança ---------- */

#edd_purchase_form fieldset#edd_cc_address,
#edd_cc_address.edd-blocks-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 18px;
	align-items: start;
}

#edd_cc_address legend { grid-column: 1 / -1; order: 0; }

/* País | CEP · Estado | Cidade · Endereço | Complemento */
#edd_cc_address #edd-card-country-wrap   { order: 1; }
#edd_cc_address #edd-card-zip-wrap       { order: 2; }
#edd_cc_address #edd-card-state-wrap     { order: 3; }
#edd_cc_address #edd-card-city-wrap      { order: 4; }
#edd_cc_address #edd-card-address-wrap   { order: 5; }
#edd_cc_address #edd-card-address-2-wrap { order: 6; }

#edd_cc_address > input[type="hidden"] { display: none; }
#edd_cc_address .edd-blocks-form__group { margin: 0; }

/* ---------- Campos com o mesmo desenho nos dois blocos ---------- */

/* O CFM traz size="100" nos inputs, o que os fazia medir diferente. */
#edd_purchase_form input[size],
#edd_checkout_user_info input[size] { width: 100%; }

#edd_purchase_form select,
#edd_cc_address select,
.edd-select {
	padding: 11px 13px;
	height: auto;
	line-height: 1.35;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7076' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 34px;
}

/* Rótulo e ajuda com a mesma métrica nos dois blocos. */
#edd_checkout_user_info .edd-label,
#edd_cc_address .edd-label {
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ck-ink-2);
}

#edd_checkout_user_info .edd-description,
#edd_cc_address .edd-description {
	display: block;
	margin: 0 0 6px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ck-faint);
}

/* O Chosen (select estilizado do EDD) precisa acompanhar a largura. */
#edd_cc_address .chosen-container { width: 100% !important; }

#edd_cc_address .chosen-container-single .chosen-single {
	height: auto;
	padding: 11px 13px;
	border: 1px solid #d8d8de;
	border-radius: 8px;
	background: var(--ck-surface);
	box-shadow: none;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--ck-ink);
}

#edd_cc_address .chosen-container-active.chosen-with-drop .chosen-single {
	border-color: var(--ck-brand);
	box-shadow: 0 0 0 3px var(--ck-brand-tint);
}

/* As duas colunas valem também no celular — o par lado a lado encurta muito
   o formulário. Só a folga entre eles diminui. */
@media (max-width: 640px) {
	#edd_checkout_user_info.cfm-form,
	#edd_purchase_form fieldset#edd_cc_address,
	#edd_cc_address.edd-blocks-form {
		gap: 12px;
	}
}

/* ============================================================
 * Correção das colunas de cobrança
 *
 * O CSS do bloco declara `.edd-blocks-form.cc-address > div{grid-column:span 2}`
 * — ou seja, TODO campo ocupava as duas colunas, anulando o grid. Prefixando
 * com o ID a especificidade sobe e cada campo volta a ocupar uma coluna.
 * ============================================================ */

#edd_cc_address.cc-address > div,
#edd_purchase_form #edd_cc_address.cc-address > div {
	grid-column: span 1;
}

/* A legenda continua ocupando a linha inteira. */
#edd_cc_address.cc-address > legend,
#edd_purchase_form #edd_cc_address.cc-address > legend {
	grid-column: 1 / -1;
}

/* Cada campo de cobrança segue ocupando uma coluna no celular. */

/* ============================================================
 * Carrinho vazio
 * ============================================================ */

/* O bloco retorna o carrinho vazio ANTES de criar #edd_checkout_form_wrap,
   então este é o único conteúdo da página — ocupa a largura toda. As medidas
   de leitura ficam nos elementos internos, não no contêiner. */
.ck-empty {
	display: block;
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding: 48px 0 40px;
	text-align: center;
	box-sizing: border-box;
}

.ck-empty *,
.ck-empty *::before,
.ck-empty *::after { box-sizing: border-box; }

.ck-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #fff4e8;
	color: #ff7e01;
	font-size: 26px;
}

.ck-empty-icon svg { width: 26px; height: 26px; }

.ck-empty-title {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -0.02em;
	color: #14161a;
}

.ck-empty-sub {
	max-width: 400px;
	margin: 0 auto 20px;
	font-size: 14.5px;
	line-height: 1.6;
	color: #6b7076;
}

.ck-empty .ck-empty-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border: 1px solid #ff7e01;
	border-radius: 10px;
	background: #ff7e01;
	color: #fff;
	font-size: 14.5px;
	font-weight: 650;
	text-decoration: none;
	transition: background 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
	box-shadow: 0 2px 8px rgba(255, 126, 1, 0.28);
}

.ck-empty .ck-empty-cta:hover {
	background: #e86f00;
	border-color: #e86f00;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(255, 126, 1, 0.36);
}

.ck-empty-suggest {
	margin-top: 34px;
	padding-top: 24px;
	border-top: 1px solid #f1f1f4;
}

.ck-empty-legend {
	display: block;
	margin-bottom: 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #9aa0a6;
}

.ck-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	text-align: left;
}

.ck-empty .ck-card,
.ck-empty .ck-card:hover {
	text-decoration: none;
	box-shadow: none;
}

.ck-card {
	display: flex;
	flex-direction: column;
	border: 1px solid #e8e8ec;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	color: inherit;
	transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.ck-card:hover {
	border-color: #ffd9ad;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(20, 22, 26, 0.09);
}

.ck-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	background: #f7f7f8 center/cover no-repeat;
	border-bottom: 1px solid #f1f1f4;
}

.ck-card-body { padding: 10px 12px 12px; }

.ck-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #14161a;
}

.ck-card-cat {
	display: inline-block;
	margin-top: 6px;
	font-size: 11px;
	color: #9aa0a6;
}

@media (max-width: 520px) {
	.ck-empty { padding: 32px 0; }
	.ck-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
 * Cabeçalho do checkout — etapas, título e faixa de confiança
 * ============================================================ */

.ck-head {
	max-width: 1120px;
	margin: 0 auto 26px;
	padding: 0;
}

.ck-steps {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.ck-step {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #9aa0a6;
}

/* O traço que liga uma etapa à seguinte. */
.ck-step + .ck-step::before {
	content: '';
	width: clamp(18px, 5vw, 52px);
	height: 1px;
	background: #e4e4e7;
	margin-right: 4px;
}

.ck-step-dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid #e4e4e7;
	border-radius: 50%;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	color: #9aa0a6;
}

.ck-step.is-done { color: #157f58; }
.ck-step.is-done .ck-step-dot {
	border-color: #cfe9de;
	background: #eef8f3;
	color: #157f58;
}

.ck-step.is-now { color: #14161a; }
.ck-step.is-now .ck-step-dot {
	border-color: #ff7e01;
	background: #ff7e01;
	color: #fff;
	box-shadow: 0 0 0 3px #fff4e8;
}

.ck-title {
	margin: 0 0 6px;
	font-size: clamp(24px, 3vw, 30px);
	font-weight: 650;
	letter-spacing: -0.022em;
	line-height: 1.15;
	color: #14161a;
}

.ck-sub {
	margin: 0 0 20px;
	font-size: 14.5px;
	line-height: 1.55;
	color: #6b7076;
}

.ck-assur {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ck-assur-item {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border: 1px solid #e4e4e7;
	border-radius: 10px;
	background: #fff;
}

.ck-assur-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
	background: #eef8f3;
	color: #157f58;
}

.ck-assur-ico svg { width: 15px; height: 15px; }

.ck-assur-txt { display: flex; flex-direction: column; line-height: 1.3; }
.ck-assur-txt strong { font-size: 13px; font-weight: 650; color: #14161a; }
.ck-assur-txt em { font-style: normal; font-size: 11.5px; color: #9aa0a6; }

/* ============================================================
 * Prova social abaixo do resumo
 * ============================================================ */

.ck-proof {
	margin-top: 14px;
	padding: 16px 18px;
	border: 1px solid var(--ck-line, #e4e4e7);
	border-radius: var(--ck-r, 10px);
	background: #fff;
}

.ck-proof-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

.ck-proof-stars {
	display: inline-flex;
	gap: 2px;
	color: #00b67a; /* verde do Trustpilot */
	line-height: 0;
}

.ck-proof-stars svg { width: 15px; height: 15px; }

.ck-proof-src {
	font-size: 11.5px;
	color: var(--ck-faint, #9aa0a6);
}

.ck-proof-src strong { color: var(--ck-ink-2, #3d424a); font-weight: 650; }

/*
 * As avaliações ficam empilhadas no mesmo espaço e só uma aparece por vez.
 * Altura fixa manteria texto curto com um vão embaixo e cortaria o texto
 * longo; com grid, todas ocupam a mesma célula e a caixa cresce até a maior —
 * ninguém vê o bloco pular de tamanho a cada troca.
 */
.ck-proof-track {
	display: grid;
}

.ck-proof-item {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

/*
 * O primeiro depoimento aparece por CSS, sem depender do script.
 *
 * Com o "Delay JavaScript Execution" do WP Rocket, o JS do carrossel só roda
 * depois do primeiro toque — e o bloco inteiro ficava vazio até lá. Assim o
 * visitante sempre vê uma avaliação; o script apenas assume a rotação depois.
 * Quando ele assume, marca .is-on em algum item, e o :not() abaixo devolve o
 * primeiro ao fluxo normal.
 */
.ck-proof-track:not(:has(.ck-proof-item.is-on)) .ck-proof-item:first-child,
.ck-proof-item.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Reserva para navegador sem :has() — pior caso, dois itens sobrepostos por
   um instante, o que ainda é melhor do que um bloco vazio. */
@supports not selector(:has(*)) {
	.ck-proof-item:first-child {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

.ck-proof-item blockquote {
	margin: 0 0 9px;
	padding: 0;
	border: none;
	font-size: 13.5px;
	font-style: normal;
	line-height: 1.5;
	color: var(--ck-ink-2, #3d424a);
}

.ck-proof-item figcaption {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11.5px;
}

.ck-proof-name { font-weight: 650; color: var(--ck-ink, #14161a); }

.ck-proof-date { color: var(--ck-faint, #9aa0a6); }

.ck-proof-date::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 8px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

/* ---------- Navegação ---------- */

.ck-proof-dots {
	display: flex;
	gap: 5px;
	margin: 13px 0 12px;
}

.ck-proof .ck-proof-dot {
	width: 18px;
	height: 4px;
	padding: 0;
	border: none;
	border-radius: 999px;
	background: var(--ck-line, #e4e4e7);
	cursor: pointer;
	transition: background 0.2s ease, width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.ck-proof .ck-proof-dot:hover { background: #cfcfd6; }

.ck-proof .ck-proof-dot.is-on {
	width: 26px;
	background: #00b67a;
}

.ck-proof-who {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--ck-line-soft, #f1f1f4);
	font-size: 12px;
	color: var(--ck-faint, #9aa0a6);
}

.ck-proof-who strong { color: var(--ck-ink, #14161a); font-weight: 650; }

@media (prefers-reduced-motion: reduce) {
	.ck-proof-item { transition: none; }
}

.ck-proof-who strong { color: var(--ck-ink, #14161a); font-weight: 650; }

/* ============================================================
 * Campos: um único padrão nos dois blocos
 *
 * O CSS do bloco define `.edd-blocks-form select{padding:4px 6px}` e o
 * edd.min.css mexe em largura — por isso os campos de cobrança nasciam mais
 * baixos que os de informações pessoais. Estas regras, ancoradas no ID do
 * formulário, dão a mesma métrica a todos.
 * ============================================================ */

#edd_purchase_form input[type="text"],
#edd_purchase_form input[type="email"],
#edd_purchase_form input[type="tel"],
#edd_purchase_form input[type="number"],
#edd_purchase_form input[type="password"],
#edd_purchase_form select,
#edd_purchase_form .edd-input,
#edd_purchase_form .edd-select,
#edd_cc_address input,
#edd_cc_address select,
#edd_checkout_user_info input[type="text"],
#edd_checkout_user_info input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid #d8d8de;
	border-radius: 9px;
	background-color: #fff;
	font-family: inherit;
	font-size: 14.5px;
	line-height: 1.35;
	color: #14161a;
}

/* A seta do select some com appearance:none — devolvemos a nossa. */
#edd_purchase_form select,
#edd_cc_address select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236b7076' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

#edd_purchase_form input:focus,
#edd_purchase_form select:focus,
#edd_cc_address input:focus,
#edd_cc_address select:focus {
	outline: none;
	border-color: #ff7e01;
	box-shadow: 0 0 0 3px #fff4e8;
}

/* ---------- CTA com o valor ---------- */

#edd_purchase_submit #edd-purchase-button[data-ck-label] {
	font-size: 16px;
	letter-spacing: 0.01em;
}

@media (max-width: 781px) {
	.ck-head { margin-bottom: 20px; }
	.ck-steps { margin-bottom: 18px; }
	.ck-step-label { display: none; }
	.ck-step + .ck-step::before { width: 26px; }
	.ck-assur { grid-template-columns: 1fr; }
}

/* ============================================================
 * Ajustes finais
 * ============================================================ */

/* O cabeçalho colava no topo da página. */
.ck-head { padding-top: 26px; }

/* Selos abaixo do botão: sempre na mesma linha. */
.ck-trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	align-items: start;
}

.ck-trust li { font-size: 12px; line-height: 1.35; align-items: flex-start; }
.ck-trust svg { margin-top: 2px; }

@media (max-width: 520px) {
	.ck-trust { grid-template-columns: 1fr; }
}

/* ---------- Método de pagamento ----------
   Os cartões são <label>, e o tema/Elementor pintam labels e botões com
   gradiente e borda escura — era a diferença de padrão que aparecia. */

#edd-payment-mode-wrap label.edd-gateway-option,
#edd-payment-mode-wrap label.edd-gateway-option:hover,
#edd-payment-mode-wrap label.edd-gateway-option:focus {
	background-image: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: 0;
	font-family: inherit;
}

#edd-payment-mode-wrap label.edd-gateway-option {
	background-color: #fff;
	border: 1px solid var(--ck-line, #e4e4e7);
	border-radius: 10px;
	color: var(--ck-ink, #14161a);
	font-size: 14px;
	font-weight: 600;
	padding: 15px 16px;
}

#edd-payment-mode-wrap label.edd-gateway-option:hover {
	background-color: var(--ck-canvas, #f7f7f8);
	border-color: #d0d0d6;
}

#edd-payment-mode-wrap label.edd-gateway-option-selected,
#edd-payment-mode-wrap label.edd-gateway-option-selected:hover {
	background-color: var(--ck-brand-tint, #fff4e8);
	border-color: var(--ck-brand, #ff7e01);
	box-shadow: inset 0 0 0 1px var(--ck-brand, #ff7e01);
	color: var(--ck-ink, #14161a);
}

/* ---------- Checkboxes como toggle ----------
   O próprio input vira o interruptor (appearance:none + pseudo-elementos):
   funciona tanto no termo (input + label irmão) quanto no WhatsApp
   (input dentro do label), sem depender de :has(). */

#edd_purchase_submit input[type="checkbox"],
#edd_agree_to_terms,
#whatsapp_offers {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 23px;
	margin: 0;
	padding: 0;
	border: 1px solid #d8d8de;
	border-radius: 999px;
	background: #ececed;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
	vertical-align: middle;
}

#edd_purchase_submit input[type="checkbox"]::before,
#edd_agree_to_terms::before,
#whatsapp_offers::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 2px;
	width: 17px;
	height: 17px;
	margin-top: -8.5px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 22, 26, 0.28);
	transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

#edd_purchase_submit input[type="checkbox"]:checked,
#edd_agree_to_terms:checked,
#whatsapp_offers:checked {
	background: var(--ck-brand, #ff7e01);
	border-color: var(--ck-brand, #ff7e01);
}

#edd_purchase_submit input[type="checkbox"]:checked::before,
#edd_agree_to_terms:checked::before,
#whatsapp_offers:checked::before {
	transform: translateX(17px);
}

#edd_purchase_submit input[type="checkbox"]:focus-visible,
#edd_agree_to_terms:focus-visible,
#whatsapp_offers:focus-visible {
	outline: 2px solid var(--ck-brand, #ff7e01);
	outline-offset: 2px;
}

/* As duas linhas com o mesmo desenho. */
#edd_purchase_submit label[for="whatsapp_offers"],
.edd-terms-agreement {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	margin: 0;
	padding: 13px 15px;
	border: 1px solid var(--ck-line, #e4e4e7);
	border-radius: 10px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ck-ink-2, #3d424a);
	cursor: pointer;
	transition: border-color 0.14s ease;
}

#edd_purchase_submit label[for="whatsapp_offers"]:hover,
.edd-terms-agreement:hover { border-color: #d0d0d6; }

/* O <p> que envolve o checkbox do WhatsApp não deve criar espaço extra. */
#edd_purchase_submit p:has(#whatsapp_offers) { margin: 0 0 10px; }

.edd-terms-agreement label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ck-ink-2, #3d424a);
	cursor: pointer;
}

#edd_terms_agreement {
	padding: 0;
	border: none;
	background: none;
	margin-bottom: 12px;
}

/* ============================================================
 * Mobile
 *
 * Os contêineres nasceram sem padding lateral — no celular o conteúdo
 * encostava nas bordas da tela. Aqui eles ganham respiro e os blocos do topo
 * ficam mais compactos, para o formulário aparecer sem tanto rolar.
 * ============================================================ */

.ck-head,
.ck-empty,
#edd_checkout_form_wrap.wp-block-edd-checkout {
	padding-left: 16px;
	padding-right: 16px;
}

@media (min-width: 782px) {
	.ck-head,
	.ck-empty,
	#edd_checkout_form_wrap.wp-block-edd-checkout {
		padding-left: 20px;
		padding-right: 20px;
	}
}

@media (max-width: 781px) {
	.ck-head { padding-top: 20px; margin-bottom: 18px; }

	.ck-title { font-size: 22px; }
	.ck-sub { font-size: 13.5px; margin-bottom: 16px; }

	/* Etapas: o rótulo da etapa atual continua visível — só números
	   soltos não dizem nada a quem está comprando. */
	.ck-steps { gap: 6px; margin-bottom: 16px; }
	.ck-step { font-size: 12px; }
	.ck-step-label { display: none; }
	.ck-step.is-now .ck-step-label { display: inline; }
	.ck-step-dot { width: 22px; height: 22px; font-size: 11px; }
	.ck-step + .ck-step::before { width: 16px; margin-right: 2px; }

	/* Garantias em linha única e compacta, sem empilhar três cartões. */
	.ck-assur {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.ck-assur::-webkit-scrollbar { display: none; }

	.ck-assur-item {
		flex: 0 0 auto;
		gap: 8px;
		padding: 9px 12px;
	}

	.ck-assur-ico { width: 26px; height: 26px; border-radius: 7px; }
	.ck-assur-ico svg { width: 13px; height: 13px; }
	.ck-assur-txt strong { font-size: 12px; }
	.ck-assur-txt em { font-size: 10.5px; }

	/* Painéis com menos folga interna. */
	#edd_purchase_form .edd-blocks-form,
	#edd_purchase_form fieldset.edd-blocks-form,
	#edd_cc_fields,
	#edd_payment_mode_select,
	#edd_checkout_user_info.cfm-form {
		padding: 16px;
		border-radius: 12px;
	}

	#edd_purchase_form .edd-blocks-form,
	#edd_checkout_user_info.cfm-form { gap: 14px; }

	/* Resumo do pedido: mais enxuto no topo. */
	.edd-blocks-cart__row { padding: 12px 14px; }
	.edd-blocks-cart__row-header { padding: 11px 14px; }
	.edd_cart_item_image img { width: 44px; height: 34px; }
	.edd_cart_item_name { font-size: 13.5px; }

	/* O botão principal encosta no polegar — vale a área maior. */
	.edd-blocks__checkout #edd-purchase-button,
	#edd_purchase_submit #edd-purchase-button {
		padding: 17px 18px;
		font-size: 15.5px;
		border-radius: 12px;
	}

	#edd_purchase_submit #edd-purchase-button[data-ck-label] { font-size: 15px; }

	/* Toggles: alvo de toque confortável. */
	#edd_purchase_submit label[for="whatsapp_offers"],
	.edd-terms-agreement { padding: 12px 13px; }
}

@media (max-width: 400px) {
	.ck-head,
	.ck-empty,
	#edd_checkout_form_wrap.wp-block-edd-checkout {
		padding-left: 13px;
		padding-right: 13px;
	}

	.ck-title { font-size: 20px; }
}

/* ============================================================
 * Duas colunas também no celular
 *
 * Numa tela de 390px cada coluna fica com ~150px. Para o texto digitado não
 * ficar espremido, os campos perdem um pouco de padding e as descrições
 * auxiliares somem — o rótulo já diz o que é.
 * ============================================================ */

@media (max-width: 640px) {
	#edd_purchase_form input[type="text"],
	#edd_purchase_form input[type="email"],
	#edd_purchase_form input[type="tel"],
	#edd_purchase_form input[type="number"],
	#edd_purchase_form select,
	#edd_purchase_form .edd-input,
	#edd_cc_address input,
	#edd_cc_address select,
	#edd_checkout_user_info input[type="text"],
	#edd_checkout_user_info input[type="email"] {
		min-height: 44px;
		padding: 11px 12px;
		font-size: 15px; /* 16px evita o zoom automático do iOS; 15 fica no limite */
		border-radius: 8px;
	}

	#edd_purchase_form select,
	#edd_cc_address select {
		padding-right: 30px;
		background-position: right 10px center;
	}

	/* "Informe seu nome" etc. só ocupam altura numa coluna estreita. */
	#edd_checkout_user_info .edd-description { display: none; }

	#edd_checkout_user_info .edd-label,
	#edd_cc_address .edd-label {
		margin-bottom: 5px;
		font-size: 12.5px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* Telas bem estreitas: o par continua lado a lado, com folga mínima. */
@media (max-width: 380px) {
	#edd_checkout_user_info.cfm-form,
	#edd_purchase_form fieldset#edd_cc_address,
	#edd_cc_address.edd-blocks-form {
		gap: 10px;
	}

	#edd_purchase_form input,
	#edd_purchase_form select,
	#edd_cc_address input,
	#edd_cc_address select {
		padding-left: 10px;
		padding-right: 10px;
	}
}