/**
 * LOC.FIT — Checkout Personalizado
 * Camada visual sobre o checkout nativo do WooCommerce.
 * Escopo restrito a body.locpocket-checkout para não vazar para o resto do tema.
 */

.locpocket-checkout {
	--lc-bg: #ffffff;
	--lc-surface: #f7f8fa;
	--lc-border: #e2e5ea;
	--lc-border-strong: #cbd1da;
	--lc-text: #14181f;
	--lc-muted: #626b7a;
	/* Cores da LOCPOCKET: verde do botão de reserva da página de produto
	   (#1f9e4d) para as ações, rosa da marca (#f2295b) como acento. */
	--lc-brand: #1f9e4d;
	--lc-brand-dark: #157a3a;
	--lc-brand-soft: #e7f6ed;
	--lc-accent: #f2295b;
	--lc-accent-soft: #fdeaf0;
	--lc-danger: #c0392b;
	--lc-danger-soft: #fdecea;
	/* Cartão ao vivo: grafite azulado. Trocar estas duas paradas troca a cor
	   dos dois lados de uma vez — não há hex de cartão espalhado no arquivo. */
	--lc-card-1: #0f1b2b;
	--lc-card-2: #16283d;
	--lc-radius: 12px;
	--lc-radius-sm: 9px;
	--lc-gap: 18px;
	--lc-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
	--lc-focus: 0 0 0 3px rgba(31, 158, 77, .18);
}

/* ---------------------------------------------------------------
 * Limpeza do entorno — o checkout deve ser uma tela sem distração
 * ------------------------------------------------------------- */
/* ---------------------------------------------------------------
 * Barras de "já tem conta / cupom" — viram cartões discretos
 * ------------------------------------------------------------- */
.locpocket-checkout .woocommerce-form-coupon-toggle,
.locpocket-checkout .woocommerce-form-login-toggle,
.locpocket-checkout form.checkout_coupon,
.locpocket-checkout form.woocommerce-form-login {
	max-width: 1120px;
	margin: 0 auto 14px;
}

.locpocket-checkout .woocommerce-form-login-toggle .woocommerce-info,
.locpocket-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
	padding: 13px 18px;
	border: 1px solid var(--lc-border);
	border-left: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-bg);
	font-size: 14px;
	color: var(--lc-muted);
	box-shadow: none;
}

.locpocket-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
.locpocket-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
	display: none;
}

.locpocket-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.locpocket-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--lc-brand-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.locpocket-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
.locpocket-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
	color: var(--lc-brand);
}

/* Formulário de login nativo, com a mesma cara do resto da tela */
.locpocket-checkout form.woocommerce-form-login,
.locpocket-checkout form.checkout_coupon {
	padding: 22px;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	background: var(--lc-bg);
	box-shadow: var(--lc-shadow);
}

.locpocket-checkout form.woocommerce-form-login p:first-child {
	margin-top: 0;
	font-size: 14px;
	color: var(--lc-muted);
}

.locpocket-checkout form.woocommerce-form-login .form-row,
.locpocket-checkout form.checkout_coupon .form-row {
	max-width: 420px;
}

.locpocket-checkout form.woocommerce-form-login button,
.locpocket-checkout form.checkout_coupon button {
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-brand);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}

.locpocket-checkout form.woocommerce-form-login button:hover,
.locpocket-checkout form.checkout_coupon button:hover {
	background: var(--lc-brand-dark);
}

.locpocket-checkout form.woocommerce-form-login .woocommerce-LostPassword {
	margin: 12px 0 0;
	font-size: 13.5px;
}

.locpocket-checkout form.woocommerce-form-login .woocommerce-LostPassword a {
	color: var(--lc-brand-dark);
}

.locpocket-checkout .woocommerce-info,
.locpocket-checkout .woocommerce-error,
.locpocket-checkout .woocommerce-message {
	border-radius: var(--lc-radius-sm);
	border: 1px solid var(--lc-border);
	border-left: 4px solid var(--lc-brand);
	background: var(--lc-surface);
	color: var(--lc-text);
	box-shadow: none;
	padding: 14px 16px;
	margin: 0 0 var(--lc-gap);
}

.locpocket-checkout .woocommerce-error {
	border-left-color: var(--lc-danger);
	background: var(--lc-danger-soft);
}

/* ---------------------------------------------------------------
 * Grid principal
 * ------------------------------------------------------------- */
.locpocket-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	max-width: 1120px;
	margin: 0 auto;
}

@media (min-width: 993px) {
	.locpocket-layout {
		grid-template-columns: minmax(0, 1fr) 380px;
		gap: 32px;
	}
}

.locpocket-main {
	min-width: 0;
}

.locpocket-aside {
	min-width: 0;
}

@media (min-width: 993px) {
	.locpocket-checkout--sticky .locpocket-aside {
		position: sticky;
		top: 24px;
	}
}

/* ---------------------------------------------------------------
 * Stepper
 * ------------------------------------------------------------- */
/* Barra de progresso.
   Três traços soltos por cima de três rótulos não formam um caminho — leem
   como três coisas separadas. Aqui os traços viram um trilho contínuo, com
   as etapas apoiadas nele: um caminho com começo, posição atual e fim. */
.locpocket-stepper {
	grid-column: 1 / -1; /* acima das duas colunas */
	position: relative;
	display: flex;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: lcstep;
}

.locpocket-stepper li {
	flex: 1 1 0;
	position: relative;
	margin: 0;
	padding: 0 10px 0 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
	line-height: 1.2;
	color: var(--lc-muted);
	background: none;
}

.locpocket-stepper li:last-child {
	padding-right: 0;
}

/* O trilho: um segmento por etapa, emendados. O último não tem trilho —
   depois do pagamento não há para onde ir. */
.locpocket-stepper li::before {
	content: "";
	display: block;
	height: 3px;
	border-radius: 999px;
	background: var(--lc-border);
	transition: background .3s ease;
}

/* O último segmento também existe — some só o vão à direita. Sem ele as
   etapas ficariam com larguras diferentes e a barra torta. */

.locpocket-stepper li.is-done::before {
	background: var(--lc-brand);
}

/* A etapa atual mostra o trilho em degradê: até aqui foi percorrido, dali
   em diante ainda não. É o que dá a sensação de avanço. */
.locpocket-stepper li.is-current::before {
	background: linear-gradient( to right, var(--lc-brand) 0 12px, var(--lc-border) 12px );
}

.locpocket-stepper__label {
	display: flex;
	align-items: center;
	gap: 7px;
	font-weight: 500;
}

.locpocket-stepper__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: var(--lc-bg);
	border: 2px solid var(--lc-border);
	color: var(--lc-muted);
	font-size: 11px;
	font-weight: 700;
	flex: none;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

/* A etapa ATUAL é a única com anel: é onde o cliente está agora. */
.locpocket-stepper li.is-current .locpocket-stepper__num {
	border-color: var(--lc-brand);
	background: var(--lc-brand);
	color: #fff;
	box-shadow: 0 0 0 3px var(--lc-brand-soft);
}

.locpocket-stepper li.is-current .locpocket-stepper__label {
	font-weight: 700;
}

.locpocket-stepper li.is-done .locpocket-stepper__num {
	border-color: var(--lc-brand);
}

.locpocket-stepper li:not(.is-done):not(.is-current) .locpocket-stepper__label {
	opacity: .75;
}

.locpocket-stepper li.is-current .locpocket-stepper__num,
.locpocket-stepper li.is-done .locpocket-stepper__num {
	background: var(--lc-brand);
}

.locpocket-stepper li.is-current {
	color: var(--lc-text);
}

.locpocket-stepper li.is-done {
	cursor: pointer;
}

.locpocket-stepper li.is-done .locpocket-stepper__num::after {
	content: "✓";
}

.locpocket-stepper li.is-done .locpocket-stepper__num {
	font-size: 12px;
	color: #fff;
	text-indent: 0;
}

.locpocket-stepper li.is-done .locpocket-stepper__num-text {
	display: none;
}

/* ---------------------------------------------------------------
 * Painéis de etapa
 * ------------------------------------------------------------- */
.locpocket-pane {
	display: flex;
	flex-direction: column;
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	padding: 22px;
	box-shadow: var(--lc-shadow);
}

.locpocket-pane[hidden] {
	display: none !important;
}

/* O espaçamento entre etapas só existe quando DUAS estão visíveis.
   Medido no checkout: `.locpocket-pane + .locpocket-pane` valia mesmo com a etapa
   anterior em `hidden`, então nas etapas 2 e 3 o card do formulário nascia
   18 px abaixo do card do resumo — que é exatamente o "resumo mais alto que
   Entrega e Pagamento". Na etapa 1, sem irmão antes, batia certo. */
.locpocket-pane:not([hidden]) + .locpocket-pane:not([hidden]) {
	margin-top: var(--lc-gap);
}

.locpocket-pane__title {
	margin: 0 0 4px;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--lc-text);
}

.locpocket-pane__hint {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--lc-muted);
}

/* O plugin controla o espaçamento dos blocos nativos dentro do painel */
.locpocket-pane .woocommerce-billing-fields > h3,
.locpocket-pane .woocommerce-shipping-fields > h3,
.locpocket-pane .woocommerce-additional-fields > h3,
.locpocket-pane #order_review_heading {
	font-size: 15px;
	font-weight: 700;
	margin: 4px 0 12px;
	color: var(--lc-text);
}

/* Cada campo ocupa a altura toda da célula da grade: assim o input de um
   campo sem rótulo não sobe uma linha em relação ao vizinho. */
/* Os campos de uma mesma linha alinham pelo TOPO, e a mensagem de erro sai
   do fluxo.
   Antes eles alinhavam pelo rodapé (`flex-end`): bastava um campo ganhar a
   linha "Campo obrigatório" para o vizinho descer junto e a etapa inteira
   parecer torta. O espaço da mensagem fica reservado o tempo todo — assim
   nada pula quando o erro aparece ou some. */
.locpocket-pane .locpocket-fields > .form-row,
.locpocket-pane .woocommerce-shipping-fields__field-wrapper > .form-row {
	justify-content: flex-start;
	position: relative;
	padding-bottom: 20px;
}

.locpocket-pane .locpocket-fields > .form-row > .locpocket-field-error,
.locpocket-pane .woocommerce-shipping-fields__field-wrapper > .form-row > .locpocket-field-error {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	margin-top: 0;
}

.locpocket-pane .locpocket-fields,
.locpocket-pane .woocommerce-billing-fields__field-wrapper,
.locpocket-pane .woocommerce-shipping-fields__field-wrapper,
.locpocket-pane .woocommerce-additional-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 14px;
}

@media (max-width: 600px) {

	.locpocket-pane .locpocket-fields,
	.locpocket-pane .woocommerce-billing-fields__field-wrapper,
	.locpocket-pane .woocommerce-shipping-fields__field-wrapper,
	.locpocket-pane .woocommerce-additional-fields__field-wrapper {
		grid-template-columns: minmax(0, 1fr);
	}
}

.locpocket-pane .woocommerce-shipping-fields,
.locpocket-pane .woocommerce-additional-fields,
.locpocket-pane .woocommerce-account-fields {
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--lc-border);
}

.locpocket-pane .woocommerce-shipping-fields + .woocommerce-additional-fields {
	margin-top: 14px;
}

/* Campos que devem ocupar a linha inteira */
.locpocket-checkout .woocommerce-checkout #billing_email_field,
.locpocket-checkout .woocommerce-checkout #billing_address_1_field,
.locpocket-checkout .woocommerce-checkout #shipping_address_1_field,
.locpocket-checkout .woocommerce-checkout #order_comments_field,
.locpocket-checkout .woocommerce-checkout .woocommerce-account-fields,
.locpocket-checkout .woocommerce-checkout .locpocket-nav {
	grid-column: 1 / -1;
}

/* Endereço BR em duas colunas, mesmo com as classes wide do Woo */
@media (min-width: 601px) {

	.locpocket-checkout .woocommerce-checkout #billing_address_2_field,
	.locpocket-checkout .woocommerce-checkout #shipping_address_2_field,
	.locpocket-checkout .woocommerce-checkout #billing_number_field,
	.locpocket-checkout .woocommerce-checkout #shipping_number_field,
	.locpocket-checkout .woocommerce-checkout #billing_neighborhood_field,
	.locpocket-checkout .woocommerce-checkout #shipping_neighborhood_field,
	.locpocket-checkout .woocommerce-checkout #billing_city_field,
	.locpocket-checkout .woocommerce-checkout #shipping_city_field,
	.locpocket-checkout .woocommerce-checkout #billing_state_field,
	.locpocket-checkout .woocommerce-checkout #shipping_state_field,
	.locpocket-checkout .woocommerce-checkout #billing_cpf_field,
	.locpocket-checkout .woocommerce-checkout #billing_cnpj_field,
	.locpocket-checkout .woocommerce-checkout #billing_rg_field,
	.locpocket-checkout .woocommerce-checkout #billing_ie_field,
	.locpocket-checkout .woocommerce-checkout #billing_birthdate_field,
	.locpocket-checkout .woocommerce-checkout #billing_sex_field,
	.locpocket-checkout .woocommerce-checkout #billing_persontype_field,
	.locpocket-checkout .woocommerce-checkout #billing_phone_field,
	.locpocket-checkout .woocommerce-checkout #billing_cellphone_field {
		grid-column: span 1;
	}
}

/* Largura imposta pelo plugin: outros plugins reescrevem as classes do Woo
   depois de nós, então quem decide é a classe que o JS aplica. */
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-half {
	grid-column: span 1 !important;
}

.locpocket-checkout .woocommerce-checkout .form-row.locpocket-full {
	grid-column: 1 / -1 !important;
}

/* Campo sem par no fim da grade: ocupa a linha inteira em vez de deixar buraco */
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-orphan {
	/* !important porque as regras de meia-largura são por ID (mais específicas) */
	grid-column: 1 / -1 !important;
}

/* Endereço resumido depois do CEP */
.locpocket-address {
	grid-column: 1 / -1;
	margin: -2px 0 16px;
	padding: 14px 16px;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-surface);
}

.locpocket-address[hidden] {
	display: none !important;
}

.locpocket-address__label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lc-muted);
	margin-bottom: 6px;
}

.locpocket-address__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--lc-text);
}

.locpocket-address__text span {
	display: block;
}

.locpocket-address__edit {
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
}

.locpocket-checkout .woocommerce-checkout .form-row[hidden] {
	display: none !important;
}

/* Some quando não há nada útil para mostrar (país único, bloco de conta
   vazio, invólucro do tema que ficou sem conteúdo) */
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-hidden,
.locpocket-checkout .woocommerce-checkout .locpocket-hidden,
.locpocket-checkout .locpocket-hidden {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Campos
 * ------------------------------------------------------------- */
.locpocket-checkout .woocommerce-checkout .form-row {
	display: flex;
	flex-direction: column;
	margin: 0 0 16px;
	padding: 0;
	width: auto !important;
	float: none !important;
}

.locpocket-checkout .woocommerce-checkout .form-row-wide,
.locpocket-checkout .woocommerce-checkout .locpocket-full {
	grid-column: 1 / -1;
}

.locpocket-checkout .woocommerce-checkout .form-row label {
	font-size: 13px;
	font-weight: 600;
	color: var(--lc-text);
	margin: 0 0 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Erro dentro do campo: a moldura fica vermelha e o placeholder carrega a
   mensagem. Nada é empurrado, nada se sobrepõe. */
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-invalid--ph input::placeholder,
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-invalid--ph textarea::placeholder {
	color: var(--lc-danger);
	opacity: 1;
}

.locpocket-checkout .woocommerce-checkout .form-row.locpocket-invalid--ph input,
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-invalid--ph textarea {
	border-color: var(--lc-danger) !important;
}

/* Sem mensagem abaixo, a linha não precisa mais reservar espaço para ela. */
.locpocket-pane .locpocket-fields > .form-row.locpocket-invalid--ph,
.locpocket-pane .woocommerce-shipping-fields__field-wrapper > .form-row.locpocket-invalid--ph {
	padding-bottom: 0;
}

/* ---------------------------------------------------------------
 * Cartão ao vivo
 *
 * Frente e verso sobrepostos, sempre os dois visíveis. Proporção real do
 * cartão: 85,6 x 54 mm = 1,586 : 1. Nada gira e nada some — a arte não
 * tem estado escondido, então também não tem como ficar dessincronizada.
 *
 * A altura da caixa depende só da largura (aspect-ratio), nunca do
 * conteúdo: isso a mantém fora da briga com o ResizeObserver que
 * harmoniza a altura do resumo com a do formulário.
 * ------------------------------------------------------------- */
/* Sem moldura: o cartão já tem sombra e presença própria. Medido na tela,
   a caixa cinza virava um retângulo pousado em cima do verde da opção
   escolhida — duas superfícies disputando a mesma área. */
.locpocket-cardhelp {
	grid-column: 1 / -1;
	margin: 6px 0 18px;
	padding: 0;
	border: 0;
	background: none;
}

/* A instrução do código existe em texto para leitor de tela. O WordPress
   define .screen-reader-text, mas se um tema minificado deixar essa regra de
   fora a frase aparece solta embaixo do cartão — visto num render isolado.
   Aqui ela some por conta própria, sem depender de ninguém. */
.locpocket-cardhelp > .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.locpocket-card__stack {
	position: relative;
	width: 100%;
	max-width: 300px;
	margin: 0 auto;
	aspect-ratio: 1.24;
}

.locpocket-card {
	position: absolute;
	width: 78%;
	aspect-ratio: 1.586;
	border-radius: 11px;
	overflow: hidden;
	color: #fff;
	/* Grafite azulado, não verde.
	   Nesta tela o verde já é o botão, o ✓, a opção escolhida e o realce do
	   código de segurança. Com o cartão verde também, o bloco do código
	   sumia dentro do próprio verso — medido lado a lado. Em grafite o verde
	   volta a ter um significado só: "está certo". */
	background: linear-gradient(135deg, var(--lc-card-1) 0%, var(--lc-card-2) 62%, var(--lc-card-2) 160%);
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@supports (container-type: inline-size) {

	.locpocket-card {
		container-type: inline-size;
	}
}

.locpocket-card--back {
	right: 0;
	top: 0;
	background: linear-gradient(135deg, var(--lc-card-1) 0%, var(--lc-card-2) 100%);
}

.locpocket-card--front {
	left: 0;
	bottom: 0;
	z-index: 2;
	box-shadow: 0 8px 22px rgba(16, 24, 40, .22);
}

/* Brilho suave só na frente, para os dois cartões não ficarem idênticos. */
.locpocket-card--front::after {
	content: "";
	position: absolute;
	right: -28%;
	top: -40%;
	width: 78%;
	height: 180%;
	border-radius: 50%;
	background: rgba(255, 255, 255, .045);
}

.locpocket-card__chip {
	position: absolute;
	left: 7.5%;
	top: 17%;
	width: 12%;
	aspect-ratio: 1.35;
	border-radius: 3px;
	background: linear-gradient(150deg, #e8c86a, #c39a35);
}

.locpocket-card__brand {
	position: absolute;
	right: 7%;
	top: 15%;
	font-family: inherit;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
}

.locpocket-card__num {
	position: absolute;
	left: 7.5%;
	right: 7%;
	top: 46%;
	font-size: 15px;
	letter-spacing: .06em;
	white-space: nowrap;
	color: rgba(255, 255, 255, .96);
}

.locpocket-card__foot {
	position: absolute;
	left: 7.5%;
	right: 7%;
	bottom: 9%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 10px;
}

.locpocket-card__slot {
	min-width: 0;
}

.locpocket-card__slot--exp {
	flex: none;
}

.locpocket-card__lbl {
	display: block;
	margin: 0 0 4px;
	font-family: inherit;
	font-size: 6.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
}

.locpocket-card__val {
	display: block;
	max-width: 150px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .94);
}

/* Antes de o cliente digitar qualquer coisa, o cartão é só ilustração. */
.locpocket-card--empty .locpocket-card__num,
.locpocket-card--empty .locpocket-card__val {
	color: rgba(255, 255, 255, .34);
}

/* Onde as unidades de container existem, o texto acompanha a largura real
   do cartão em vez de depender do tamanho da tela. */
@supports (width: 1cqw) {

	/* Piso de 9 px e espaçamento proporcional: medido a 320 px, o número
	   pedia 145 px numa caixa de 124 e os últimos dígitos eram cortados
	   dentro do próprio cartão. */
	.locpocket-card__num { font-size: clamp(9px, 4.6cqw, 17px); letter-spacing: .4cqw; }
	.locpocket-card__brand { font-size: clamp(8px, 3cqw, 11px); }
	.locpocket-card__lbl { font-size: clamp(5.5px, 1.9cqw, 7px); }
	.locpocket-card__val { font-size: clamp(8px, 3cqw, 11px); }
}

/* Verso */
.locpocket-card__stripe {
	position: absolute;
	left: 0;
	right: 0;
	top: 13%;
	height: 19%;
	background: #0b1218;
}

.locpocket-card__sign {
	position: absolute;
	left: 8%;
	right: 26%;
	top: 47%;
	height: 22%;
	border-radius: 3px;
	background: repeating-linear-gradient(135deg, #f2f3f5 0 6px, #e6e8ec 6px 12px);
}

.locpocket-card__cvv {
	position: absolute;
	right: 8%;
	top: 47%;
	width: 16%;
	height: 22%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background: #fff;
	color: #0b1218;
	font-size: 10px;
	letter-spacing: .1em;
	transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

/* Acende enquanto o cliente está no campo do código de segurança. */
.locpocket-card__cvv--on {
	background: var(--lc-brand);
	color: #fff;
	box-shadow: 0 0 0 3px rgba(31, 158, 77, .32);
}

.locpocket-card__hint {
	position: absolute;
	right: 8%;
	top: 36%;
	font-family: inherit;
	font-size: 6.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

@supports (width: 1cqw) {

	.locpocket-card__cvv { font-size: clamp(8px, 3cqw, 11px); }
	.locpocket-card__hint { font-size: clamp(5.5px, 1.9cqw, 7px); }
}

@media (prefers-reduced-motion: reduce) {

	.locpocket-card__cvv {
		transition: none;
	}
}

/* ---------------------------------------------------------------
 * Confirmação por campo
 *
 * O ✓ só acende quando o dado é válido — Luhn no número, data no
 * futuro na validade. Um ✓ que acende só por ter caractere ensina a
 * coisa errada e deixa o erro para o gateway descobrir.
 * ------------------------------------------------------------- */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .form-row.locpocket-ok {
	position: relative;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .form-row.locpocket-ok::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 15px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--lc-brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'><path d='M2 6.3 4.6 9 10 3.2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 11px 11px no-repeat;
	pointer-events: none;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .form-row.locpocket-ok input {
	padding-right: 42px;
	border-color: var(--lc-brand) !important;
}

/* Campo sem rótulo visível ao lado de um campo com rótulo.
   O "Complemento" do endereço vem só com placeholder — e antes o JS marcava
   a linha, mas não existia regra nenhuma para essa classe: o campo subia e
   ficava desalinhado do "Número" ao lado. Aqui o espaço de uma linha de
   rótulo é reservado, e os dois campos voltam a começar na mesma altura.
   (13px * 1.4 de linha + 6px de margem = 24px.) */
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-nolabel::before {
	content: "";
	display: block;
	height: 24px;
}

/* Rótulo escondido para leitor de tela não conta como rótulo visível. */
.locpocket-checkout .woocommerce-checkout .form-row > label.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.locpocket-checkout .woocommerce-checkout .form-row .required {
	color: var(--lc-danger);
	text-decoration: none;
	border: 0;
}

.locpocket-checkout .woocommerce-checkout .form-row .optional {
	color: var(--lc-muted);
	font-weight: 400;
}

.locpocket-checkout .woocommerce-checkout .input-text,
.locpocket-checkout .woocommerce-checkout select,
.locpocket-checkout .woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	height: 48px;
	min-height: 48px;
	padding: 0 14px;
	font-size: 16px; /* evita zoom no iOS */
	line-height: 46px;
	color: var(--lc-text);
	background: var(--lc-bg);
	border: 1px solid var(--lc-border-strong);
	border-radius: var(--lc-radius-sm);
	box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.locpocket-checkout .woocommerce-checkout textarea.input-text {
	height: auto;
	min-height: 92px;
	line-height: 1.5;
	padding: 12px 14px;
}

.locpocket-checkout .woocommerce-checkout .input-text:focus,
.locpocket-checkout .woocommerce-checkout select:focus,
.locpocket-checkout .woocommerce-checkout .select2-container--focus .select2-selection--single {
	border-color: var(--lc-brand);
	box-shadow: var(--lc-focus);
	outline: none;
}

.locpocket-checkout .woocommerce-checkout .select2-container .select2-selection__rendered {
	line-height: 46px;
	padding-left: 0;
	color: var(--lc-text);
}

.locpocket-checkout .woocommerce-checkout .select2-container .select2-selection__arrow {
	height: 46px;
}

/* Estados de validação — borda, nunca preenchimento vermelho.
   Campo pintado de vermelho antes de o cliente errar assusta sem motivo. */
.locpocket-checkout .woocommerce-checkout .woocommerce-invalid .input-text,
.locpocket-checkout .woocommerce-checkout .woocommerce-invalid select,
.locpocket-checkout .woocommerce-checkout .locpocket-invalid .input-text,
.locpocket-checkout .woocommerce-checkout .locpocket-invalid select {
	border-color: var(--lc-danger);
	background: var(--lc-bg);
}

.locpocket-checkout .woocommerce-checkout .woocommerce-validated .input-text {
	border-color: var(--lc-border-strong);
}

.locpocket-field-error {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--lc-danger);
}

.locpocket-field-note {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--lc-muted);
}

.locpocket-field-note.is-loading::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-right: 6px;
	vertical-align: -1px;
	border: 2px solid var(--lc-border-strong);
	border-top-color: var(--lc-brand);
	border-radius: 50%;
	animation: locpocket-spin .7s linear infinite;
}

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

/* Checkboxes (criar conta, entregar em outro endereço, termos) */
.locpocket-checkout .woocommerce-checkout .form-row.locpocket-check,
.locpocket-checkout .woocommerce-checkout .woocommerce-form__label-for-checkbox {
	flex-direction: row;
	align-items: center;
	gap: 9px;
	font-size: 14px;
	font-weight: 500;
}

.locpocket-checkout .woocommerce-checkout input[type="checkbox"],
.locpocket-checkout .woocommerce-checkout input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--lc-brand);
	margin: 0;
	flex: none;
}

.locpocket-checkout .woocommerce-checkout #ship-to-different-address {
	font-size: 15px;
	margin: 4px 0 12px;
}

.locpocket-checkout .woocommerce-checkout #ship-to-different-address label {
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Conta: login inline e senha opcional
 * ------------------------------------------------------------- */
.locpocket-login {
	grid-column: 1 / -1;
	margin: -4px 0 18px;
	padding: 16px;
	border: 1px solid var(--lc-brand);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-brand-soft);
}

.locpocket-login[hidden] {
	display: none !important;
}

.locpocket-login__title {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--lc-brand-dark);
}

.locpocket-login__row {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.locpocket-login__row .input-text {
	flex: 1 1 auto;
}

.locpocket-btn--login {
	flex: 0 0 auto;
	background: var(--lc-brand);
	color: #fff;
	padding: 0 22px;
	min-height: 48px;
	font-size: 15px;
}

.locpocket-btn--login:hover {
	background: var(--lc-brand-dark);
}

.locpocket-btn--login[disabled] {
	opacity: .6;
	cursor: default;
}

.locpocket-login__msg {
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--lc-muted);
	min-height: 0;
}

.locpocket-login__msg:empty {
	display: none;
}

.locpocket-login__msg.is-error {
	color: var(--lc-danger);
}

.locpocket-login__msg.is-ok {
	color: var(--lc-brand-dark);
}

/* Os dois links secundários vinham desalinhados: um é <a> e o outro <button>,
   e o tema aplica caixa-alta e outra fonte no botão. Aqui os dois viram a
   MESMA coisa — mesma fonte, mesma cor, mesma linha de base, sem caixa-alta. */
.locpocket-login__links {
	display: flex;
	align-items: center;
	gap: 8px 18px;
	flex-wrap: wrap;
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.4;
}

.locpocket-login__links a,
.locpocket-login__links button {
	font-size: 13px;
	line-height: 1.4;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--lc-brand-dark);
	text-decoration: underline;
	background: none;
	border: 0;
	padding: 0;
	min-height: 0;
	height: auto;
}

/* --------------------------------------------------------------------------
   Conta já existente — os três estados do painel
   --------------------------------------------------------------------------
   O texto dizia "vamos vincular" e a tela mostrava campo de senha e um botão
   ENTRAR verde: a pessoa lia obrigação, não oferta. Vincular passa a ser a
   ação principal, e entrar é uma escolha de quem quer os dados salvos.
   -------------------------------------------------------------------------- */

.locpocket-login__hint {
	margin: -6px 0 12px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--lc-brand-dark);
	opacity: .85;
}

.locpocket-login__hint:empty,
.locpocket-login__acoes,
.locpocket-login__feito {
	display: none;
}

.locpocket-login__acoes {
	align-items: center;
	gap: 8px 16px;
	flex-wrap: wrap;
	margin: 0;
}

.locpocket-login.is-link .locpocket-login__acoes {
	display: flex;
}

.locpocket-login.is-link .locpocket-login__form,
.locpocket-login.is-login .locpocket-login__acoes,
.locpocket-login.is-done .locpocket-login__form,
.locpocket-login.is-done .locpocket-login__acoes,
.locpocket-login.is-done .locpocket-login__title,
.locpocket-login.is-done .locpocket-login__hint {
	display: none;
}

.locpocket-login.is-done .locpocket-login__feito {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	font-size: 13.5px;
	color: var(--lc-brand-dark);
}

/* Confirmado vira uma linha discreta: já resolveu, não precisa mais de caixa
   colorida chamando atenção no meio do formulário. */
.locpocket-login.is-done {
	padding: 10px 14px;
	background: transparent;
	border-color: var(--lc-border);
}

.locpocket-login__feito-txt::before {
	content: "✓";
	margin-right: 7px;
	font-weight: 700;
}

.locpocket-login__ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--lc-brand);
	min-height: 44px;
	padding: 0 20px;
	font-size: 15px;
	border: 1px solid var(--lc-brand);
	border-radius: var(--lc-radius-sm);
}

/* O tema repinta o texto de qualquer botão no hover. Sem travar a cor aqui,
   "Continuar assim" ficava com texto cinza-escuro sobre verde no momento
   exato em que a pessoa vai clicar — parece desabilitado. A cor é declarada
   em TODOS os estados, com a especificidade necessária para ganhar do tema
   sem recorrer a !important. */
.locpocket-checkout .locpocket-login .locpocket-login__ok,
.locpocket-checkout .locpocket-login .locpocket-login__ok:link,
.locpocket-checkout .locpocket-login .locpocket-login__ok:visited,
.locpocket-checkout .locpocket-login .locpocket-login__ok:hover,
.locpocket-checkout .locpocket-login .locpocket-login__ok:focus,
.locpocket-checkout .locpocket-login .locpocket-login__ok:focus-visible,
.locpocket-checkout .locpocket-login .locpocket-login__ok:active {
	color: #fff;
	text-decoration: none;
}

.locpocket-checkout .locpocket-login .locpocket-login__ok:hover,
.locpocket-checkout .locpocket-login .locpocket-login__ok:focus-visible {
	background: var(--lc-brand-dark);
	border-color: var(--lc-brand-dark);
}

.locpocket-checkout .locpocket-login .locpocket-login__ok:focus-visible {
	box-shadow: var(--lc-focus);
	outline: none;
}

/* "Prefiro entrar" é AÇÃO, não nota de rodapé: ganha corpo de botão
   secundário — mesma altura e mesmo raio do principal, contorno em vez de
   preenchimento. Como link solto, o hover do tema o deixava retangular e sem
   relação visual com o botão ao lado. */
.locpocket-checkout .locpocket-login .locpocket-login__prefiro {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	color: var(--lc-brand-dark);
	background: transparent;
	border: 1px solid var(--lc-brand);
	border-radius: var(--lc-radius-sm);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* Branco no hover, e não um verde mais escuro: o painel já é verde-claro, e
   preencher com verde faria os dois botões brigarem pela mesma atenção. */
.locpocket-checkout .locpocket-login .locpocket-login__prefiro:hover,
.locpocket-checkout .locpocket-login .locpocket-login__prefiro:focus-visible {
	background: #fff;
	color: var(--lc-brand-dark);
	border-color: var(--lc-brand-dark);
	text-decoration: none;
}

.locpocket-checkout .locpocket-login .locpocket-login__prefiro:focus-visible {
	box-shadow: var(--lc-focus);
	outline: none;
}

/* "alterar" continua link: está no estado já resolvido, onde nada precisa de
   peso de botão. */
.locpocket-login__reabrir {
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}

/* No celular o botão principal ocupa a linha inteira e o link fica embaixo:
   lado a lado em 320px o texto do link quebra no meio. */
@media ( max-width: 480px ) {
	.locpocket-login__acoes {
		flex-direction: column;
		align-items: stretch;
	}

	.locpocket-login__ok {
		width: 100%;
	}

	.locpocket-checkout .locpocket-login .locpocket-login__prefiro {
		width: 100%;
	}
}

.locpocket-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var(--lc-brand-dark);
	text-decoration: underline;
	cursor: pointer;
}

.locpocket-optional-password__toggle {
	grid-column: 1 / -1;
	justify-self: start;
	margin: 0 0 16px;
	font-size: 13.5px;
	font-weight: 600;
}

.locpocket-checkout .woocommerce-checkout .form-row.locpocket-optional-password[hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Navegação entre etapas
 * ------------------------------------------------------------- */
.locpocket-nav {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto; /* com o cartão esticado, a navegação encosta na base */
	padding-top: 6px;
}

.locpocket-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	border-radius: var(--lc-radius-sm);
	transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}

.locpocket-btn--next {
	flex: 1 1 auto;
	background: var(--lc-brand);
	color: #fff;
	min-height: 52px;
	padding: 0 22px;
	font-size: 16px;
}

/* O tema troca a cor do texto no hover dos botões e o "Continuar" ficava
   com letra preta sobre verde. Fixamos em branco nos quatro estados. */
.locpocket-btn--next,
.locpocket-btn--next:hover,
.locpocket-btn--next:focus,
.locpocket-btn--next:active,
.locpocket-btn--next:visited {
	color: #fff !important;
	text-decoration: none;
}

.locpocket-btn--next:hover {
	background: var(--lc-brand-dark) !important;
}

.locpocket-btn--next:active {
	transform: translateY(1px);
}

.locpocket-btn--next:focus-visible {
	box-shadow: var(--lc-focus);
	outline: none;
}

/* Na última etapa o "Voltar" fica abaixo do botão de finalizar, centralizado */
.locpocket-pane--3 .locpocket-nav {
	justify-content: center;
	margin-top: 14px;
}

.locpocket-btn--back {
	background: transparent;
	color: var(--lc-muted);
	min-height: 52px;
	padding: 0 6px;
	font-size: 14.5px;
	font-weight: 600;
	order: -1;
}

.locpocket-btn--back:hover {
	color: var(--lc-text);
}

/* Botão finalizar do WooCommerce */
.locpocket-checkout .woocommerce-checkout #place_order {
	width: 100%;
	min-height: 56px;
	font-size: 17px;
	font-weight: 800;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-brand);
	color: #fff;
	letter-spacing: .01em;
}

.locpocket-checkout .woocommerce-checkout #place_order,
.locpocket-checkout .woocommerce-checkout #place_order:hover,
.locpocket-checkout .woocommerce-checkout #place_order:focus,
.locpocket-checkout .woocommerce-checkout #place_order:active {
	color: #fff !important;
}

.locpocket-checkout .woocommerce-checkout #place_order:hover {
	background: var(--lc-brand-dark) !important;
}

/* ---------------------------------------------------------------
 * Resumo
 * ------------------------------------------------------------- */
.locpocket-summary {
	display: flex;
	flex-direction: column;
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow);
	overflow: hidden;
}

.locpocket-summary__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 18px 22px;
	background: var(--lc-surface);
	border: 0;
	border-bottom: 1px solid var(--lc-border);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	color: var(--lc-text);
	text-align: left;
	cursor: default;
}

.locpocket-summary__total {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.locpocket-summary__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 6px 22px 22px;
}

/* O tema deixa as células de .shop_table como display:block (tabela
   "responsiva"). Isso quebra as bordas em traços soltos e faz a linha do
   item estourar a largura. Aqui a tabela volta a ser tabela. */
.locpocket-summary__body table.shop_table {
	display: table !important;
	width: 100% !important;
	table-layout: fixed !important;
}

.locpocket-summary__body table.shop_table tbody,
.locpocket-summary__body table.shop_table tfoot {
	display: table-row-group !important;
}

.locpocket-summary__body table.shop_table tr {
	display: table-row !important;
}

.locpocket-summary__body table.shop_table th,
.locpocket-summary__body table.shop_table td {
	display: table-cell !important;
	width: auto !important;
	float: none !important;
	max-width: none !important;
}

/* Colunas: rótulo com folga, valor no que precisar.
   Células com colspan (a linha do item) ficam de fora: elas ocupam a
   tabela inteira e receber 62% as espremia. */
.locpocket-summary__body table.shop_table tr > *:first-child:not([colspan]) {
	width: 62%;
}

/* Reset total: o tema costuma pintar zebra, bordas e separadores próprios,
   que somados aos nossos viravam "listras duplicadas". */
.locpocket-summary__body table.shop_table,
.locpocket-summary__body table.shop_table thead,
.locpocket-summary__body table.shop_table tbody,
.locpocket-summary__body table.shop_table tfoot,
.locpocket-summary__body table.shop_table tr,
.locpocket-summary__body table.shop_table th,
.locpocket-summary__body table.shop_table td {
	border: 0 !important;
	border-collapse: collapse;
	border-spacing: 0;
	background: none !important;
	box-shadow: none !important;
}

.locpocket-summary__body table.shop_table {
	width: 100%;
	margin: 0;
	font-size: 14px;
	table-layout: auto;
}

.locpocket-summary__body table.shop_table th,
.locpocket-summary__body table.shop_table td {
	padding: 11px 0;
	vertical-align: top;
	line-height: 1.45;
}

.locpocket-summary__body table.shop_table thead {
	display: none;
}

.locpocket-summary__body table.shop_table tr::before,
.locpocket-summary__body table.shop_table tr::after,
.locpocket-summary__body table.shop_table td::before,
.locpocket-summary__body table.shop_table th::before {
	display: none !important;
	content: none !important;
}

/* Um único sistema de divisórias, aplicado na linha inteira */
.locpocket-summary__body table.shop_table tbody tr + tr > *,
.locpocket-summary__body table.shop_table tfoot tr > * {
	border-top: 1px solid var(--lc-border) !important;
}

.locpocket-summary__body table.shop_table tfoot tr:first-child > * {
	border-top: 1px solid var(--lc-border-strong) !important;
}

/* Linhas de "recorrente" do Subscriptions: bloco separado, sem virar tabela nova */
.locpocket-summary__body table.shop_table tfoot .recurring-total > *,
.locpocket-summary__body table.shop_table tfoot .recurring-totals > * {
	padding-top: 14px;
}

.locpocket-summary__body table.shop_table tfoot .recurring-totals th {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lc-muted);
	font-weight: 700;
}

/* ---------------------------------------------------------------
 * Linha do item: miniatura | conteúdo | remover
 * Estrutura montada pelo JS (.locpocket-item), porque o markup do tema
 * mistura float e flex e espremia o nome em duas palavras por linha.
 * ------------------------------------------------------------- */
.locpocket-summary__body table.shop_table .cart_item td,
.locpocket-summary__body table.shop_table .cart_item th {
	padding: 16px 0 !important;
	white-space: normal !important;
}

.locpocket-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.locpocket-item .locpocket-thumb {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	float: none;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: var(--lc-surface);
	border: 1px solid var(--lc-border);
}

.locpocket-item .locpocket-thumb img,
.locpocket-item .locpocket-thumb__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: cover;
	border-radius: 0;
}

.locpocket-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.locpocket-item__body > *,
.locpocket-item__body .wd-checkout-prod-cont {
	display: block !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0;
}

/* Nome do produto */
.locpocket-item__body .wd-checkout-prod-title,
.locpocket-summary__body td.product-name {
	font-size: 13.5px;
	line-height: 1.4;
	font-weight: 600;
	color: var(--lc-text);
	white-space: normal !important;
	overflow-wrap: anywhere;
}

.locpocket-item__body .wd-checkout-prod-title a {
	color: var(--lc-text);
	text-decoration: none;
}

/* Quantidade, loja e variações: segundo plano */
.locpocket-item__body .product-quantity,
.locpocket-item__body .variation,
.locpocket-item__body dl.variation,
.locpocket-item__body .variation-loja,
.locpocket-item__body small {
	display: block;
	margin: 3px 0 0;
	padding: 0;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--lc-muted);
	list-style: none;
}

.locpocket-item__body .variation p,
.locpocket-item__body .variation li,
.locpocket-item__body .variation dd,
.locpocket-item__body .variation dt {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: inherit;
	color: inherit;
}

.locpocket-item__body a {
	color: var(--lc-muted);
}

/* Preço do item: linha própria, à direita, sem quebrar */
.locpocket-item__body .wd-checkout-prod-total,
.locpocket-item__body .product-total {
	margin-top: 8px !important;
	text-align: right;
	font-size: 14px;
	font-weight: 700;
	color: var(--lc-text);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Remover: discreto, no topo à direita */
.locpocket-item .wd-checkout-remove-btn-wrapp,
.locpocket-item > a.remove {
	flex: 0 0 auto;
	float: none !important;
	margin: 0;
	line-height: 1;
}

.locpocket-item .wd-checkout-remove-btn-wrapp a,
.locpocket-item a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 17px;
	line-height: 1;
	/* Mesmo motivo do carrinho: token de borda não serve de cor de controle.
	   1,53:1 sobre branco vira 5,45:1 com --lc-muted. */
	color: var(--lc-muted);
	background: none;
	border-radius: 50%;
	text-decoration: none;
}

.locpocket-item .wd-checkout-remove-btn-wrapp a:hover,
.locpocket-item a.remove:hover {
	color: var(--lc-danger);
	background: var(--lc-danger-soft);
}

/* Item do carrinho: nome respira, preço alinhado à direita e sem quebrar */
.locpocket-summary__body table.shop_table .cart_item td.product-total,
.locpocket-summary__body table.shop_table .cart_item td:last-child {
	white-space: nowrap;
	padding-left: 12px;
}

.locpocket-summary__body table.shop_table .product-name .wcfm_dashboard_item_title,
.locpocket-summary__body table.shop_table .product-name small,
.locpocket-summary__body table.shop_table .product-name .wcfm-store-name {
	display: block;
	margin-top: 4px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--lc-muted);
}

.locpocket-summary__body table.shop_table .product-quantity,
.locpocket-summary__body table.shop_table .product-name .quantity {
	color: var(--lc-muted);
	font-weight: 400;
}

/* Botão de remover item do tema, discreto */
.locpocket-summary__body table.shop_table .product-remove a,
.locpocket-summary__body table.shop_table a.remove {
	color: var(--lc-muted);
	font-size: 15px;
	line-height: 1;
	background: none;
}

.locpocket-summary__body table.shop_table .product-remove a:hover,
.locpocket-summary__body table.shop_table a.remove:hover {
	color: var(--lc-danger);
	background: none;
}

.locpocket-summary__body table.shop_table td {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.locpocket-summary__body table.shop_table th {
	text-align: left;
	font-weight: 500;
	color: var(--lc-muted);
}

.locpocket-summary__body table.shop_table .product-name {
	text-align: left;
	font-weight: 600;
	color: var(--lc-text);
}

.locpocket-summary__body table.shop_table tfoot .order-total th,
.locpocket-summary__body table.shop_table tfoot .order-total td {
	font-size: 17px;
	font-weight: 800;
	color: var(--lc-text);
	padding-top: 14px;
}

.locpocket-summary__body .woocommerce-shipping-methods,
.locpocket-summary__body ul#shipping_method {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

.locpocket-summary__body ul#shipping_method li {
	margin: 0 0 6px;
	list-style: none;
}

/* Selos: encostam na base quando o cartão é esticado */
.locpocket-badges {
	list-style: none;
	margin: 16px 0 0;
	padding-top: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.locpocket-summary__body > .locpocket-badges {
	margin-top: auto;
	padding-top: 16px;
}

.locpocket-badges li {
	list-style: none;
	margin: 0;
	padding-left: 24px;
	position: relative;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--lc-muted);
}

.locpocket-badges li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: -1px;
	width: 17px;
	height: 17px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--lc-brand-soft);
	color: var(--lc-brand);
	font-size: 11px;
	font-weight: 700;
}

/* Resumo em acordeão no mobile */
@media (max-width: 992px) {
	.locpocket-aside {
		order: -1;
	}

	.locpocket-summary__head {
		cursor: pointer;
	}

	.locpocket-summary__head::after {
		content: "";
		width: 9px;
		height: 9px;
		border-right: 2px solid var(--lc-muted);
		border-bottom: 2px solid var(--lc-muted);
		transform: rotate(45deg) translateY(-2px);
		transition: transform .2s ease;
		flex: none;
		margin-left: auto;
	}

	.locpocket-summary.is-open .locpocket-summary__head::after {
		transform: rotate(225deg) translateY(-2px);
	}

	.locpocket-summary__toggle-text {
		font-size: 13px;
		font-weight: 600;
		color: var(--lc-brand);
	}

	.locpocket-summary:not(.is-open) .locpocket-summary__body {
		display: none;
	}
}

@media (min-width: 993px) {
	.locpocket-summary__toggle-text {
		display: none;
	}
}

/* ---------------------------------------------------------------
 * Pagamento
 * ------------------------------------------------------------- */
.locpocket-checkout .woocommerce-checkout #payment {
	background: none;
	border-radius: 0;
	padding: 0;
}

.locpocket-checkout .woocommerce-checkout #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	display: grid;
	gap: 10px;
}

.locpocket-checkout .woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid var(--lc-border-strong);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-bg);
	transition: border-color .15s ease, background .15s ease;
}

/* Selecionado: um traço à esquerda e a borda um tom acima — não uma moldura
   verde inteira. Com o cartão da etapa por fora já existindo, o frame verde
   criava dois quadros aninhados, e o resultado parecia aviso, não escolha. */
.locpocket-checkout .woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
	border-color: var(--lc-brand);
	background: var(--lc-bg);
	box-shadow: none;
}

/* O bloco do formulário do cartão é continuação do método escolhido, não uma
   caixa nova: sem borda, sem cartão dentro de cartão. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box {
	margin: 0;
	padding: 14px 0 2px;
	border: 0 !important;
	border-top: 1px solid var(--lc-border) !important;
	border-radius: 0;
	background: none !important;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box::before,
.locpocket-checkout .woocommerce-checkout #payment .payment_box::after {
	display: none !important;
	content: none !important;
}

.locpocket-checkout .woocommerce-checkout #payment ul.payment_methods li label {
	font-weight: 600;
	font-size: 15px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin: 0;
}

.locpocket-checkout .woocommerce-checkout #payment ul.payment_methods li img {
	max-height: 24px;
	width: auto;
	margin: 0;
}

.locpocket-checkout .woocommerce-checkout #payment div.payment_box {
	flex: 1 0 100%;
	background: transparent;
	border: 0;
	border-top: 1px dashed var(--lc-border-strong);
	margin: 12px 0 0;
	padding: 12px 0 0;
	font-size: 13.5px;
	color: var(--lc-muted);
	border-radius: 0;
}

.locpocket-checkout .woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* Grade do formulário de cartão: nome e número inteiros; mês, ano e código
   dividindo uma linha só. O gateway entrega o código de segurança como
   "form-row-wide", o que deixava um campo de 3 dígitos do tamanho do
   número do cartão. */
.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0 14px;
}

.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > * {
	grid-column: 1 / -1;
	min-width: 0;
}

.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > .locpocket-third {
	grid-column: span 2;
}

.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > .locpocket-half {
	grid-column: span 3;
}

/* O wrapper do gateway vira ele mesmo uma célula de largura total, para a
   grade de fora não brigar com a de dentro. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box > .locpocket-pay-grid {
	grid-column: 1 / -1;
}

/* Escolha de cartão salvo / novo cartão (Asaas).
   O gateway entrega essas opções como blocos cinzas empilhados, sem indício
   de que são clicáveis. Viram cartões de escolha, com o mesmo vocabulário do
   resto da tela. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lc-muted);
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option {
	margin: 0 0 8px;
	padding: 12px 14px;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-bg) !important;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

/* Rádio e rótulo na MESMA linha; o formulário do cartão ocupa a linha de baixo.
   Causa raiz medida a 320–430 px: a opção também é uma `.form-row`, e a regra
   geral de campo põe `flex-direction: column` em toda `.form-row`. Resultado:
   a bolinha ficava EM CIMA do texto e a escolha deixava de parecer uma
   escolha. Aqui a direção volta para linha, só nesta caixa. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 10px;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option > .input-radio {
	flex: 0 0 auto;
	margin: 0;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option > label.radio {
	/* base 0, e não `auto`: com base automática o rótulo era medido pelo seu
	   tamanho máximo, não cabia na linha a 320 px e o flex o EMPURRAVA para a
	   linha de baixo em vez de encolher — a bolinha ficava sozinha em cima. */
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* Linha própria, largura exata do conteúdo do pai — sem crescer (o `grow`
   somava a coluna do rádio e estourava 157 px). */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option > .asaas-cc-form-wrapper {
	flex: 0 0 100%;
	min-width: 0;
	margin-top: 12px;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option:hover {
	border-color: var(--lc-border-strong);
}

/* Opção escolhida: superfície neutra, borda verde.
   O preenchimento verde-claro existia de quando o gateway entregava dois
   blocos cinzas iguais, sem indício de serem clicáveis. Hoje ele é um
   retângulo verde de 400 px que não valida nada — e nesta tela o verde
   precisa significar UMA coisa: "está certo". Ficam verdes só a borda de
   seleção e os ✓ dos campos.
   O cinza (e não branco) mantém a noção de que aqueles campos pertencem à
   opção escolhida: no branco o bloco some contra o painel e o agrupamento
   se desfaz. De quebra, os campos brancos passam a saltar do fundo. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option:has(input:checked) {
	border-color: var(--lc-brand);
	background: var(--lc-surface) !important;
	box-shadow: 0 0 0 1px var(--lc-brand) inset;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--lc-text);
	cursor: pointer;
}

/* O woo-asaas-store.css pinta o rótulo da opção escolhida de rgb(164,100,151)
   — a cor da marca do gateway. Medido no checkout da loc.fit em 17/08/2026:
   a opção "Novo Cartão de Crédito" ficava com uma tarja rosa atravessada no
   meio da tela verde. Quem manda na cor da escolha é o cartão de fora. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option .radio,
.locpocket-checkout .woocommerce-checkout #payment .payment_box .one-click-buy-option .input-radio:checked + .radio {
	padding: 0;
	background: none !important;
	background-color: transparent !important;
	color: var(--lc-text) !important;
}

/* O título do gateway já está no cartão do método selecionado; repetir com
   linha tracejada por baixo só suja. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box > p:first-child:not(.form-row) {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-size: 13px;
	color: var(--lc-muted);
}

/* Campos do gateway (Asaas & cia): sempre brancos, nunca vermelhos.
   Muitos gateways marcam o campo como obrigatório já na renderização e o
   resultado é um formulário de cartão inteiro pintado de rosa. */
.locpocket-checkout .woocommerce-checkout #payment .payment_box input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.locpocket-checkout .woocommerce-checkout #payment .payment_box input[type="tel"],
.locpocket-checkout .woocommerce-checkout #payment .payment_box input[type="number"],
.locpocket-checkout .woocommerce-checkout #payment .payment_box input[type="password"],
.locpocket-checkout .woocommerce-checkout #payment .payment_box input.input-text,
.locpocket-checkout .woocommerce-checkout #payment .payment_box select,
.locpocket-checkout .woocommerce-checkout #payment .payment_box .wc-credit-card-form-card-number,
.locpocket-checkout .woocommerce-checkout #payment .payment_box .wc-credit-card-form-card-expiry,
.locpocket-checkout .woocommerce-checkout #payment .payment_box .wc-credit-card-form-card-cvc {
	width: 100%;
	/* Medido no probe de 320/360/390/430 px: os campos do Asaas ficam em
	   content-box, então `width:100%` + `padding:0 14px` dava 286 px de
	   caixa dentro de uma coluna de 256 px — 30 px a mais, estourando para
	   fora do bloco de pagamento em TODA largura de celular. */
	box-sizing: border-box;
	height: 48px;
	min-height: 48px;
	padding: 0 14px;
	font-size: 16px;
	color: var(--lc-text);
	background: var(--lc-bg) !important;
	background-image: none !important;
	border: 1px solid var(--lc-border-strong) !important;
	border-radius: var(--lc-radius-sm);
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box input:focus,
.locpocket-checkout .woocommerce-checkout #payment .payment_box select:focus {
	border-color: var(--lc-brand) !important;
	box-shadow: var(--lc-focus);
	outline: none;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box .form-row,
.locpocket-checkout .woocommerce-checkout #payment .payment_box p {
	margin: 0 0 14px;
}

/* Quem distribui as colunas é a grade, não as classes do gateway.
   Medido a 760 px: com `form-row-first` mantendo `width:calc(50% - 7px)` e
   `margin-right:14px`, o Mês saía 14 px mais estreito que o Ano e o Código —
   três campos irmãos com larguras diferentes. */
.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > .form-row-first,
.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > .form-row-last {
	width: auto !important;
	margin-right: 0;
	display: flex;
}

.locpocket-checkout .woocommerce-checkout #payment .payment_box label {
	display: block;
	margin: 0 0 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--lc-text);
}

/* Mês / ano lado a lado — resolvido pela grade (.locpocket-pay-grid).
   A regra antiga de `calc(50% - 7px)` + `margin-right:14px` ficou aqui de
   antes da grade existir e passou a brigar com ela: medido a 760 px, o Mês
   saía com 185 px contra 199 px do Ano e do Código. Três campos irmãos com
   larguras diferentes. Quem distribui coluna agora é o grid, e só ele. */

/* O tema/gateway pinta obrigatório de vermelho: neutralizado */
.locpocket-checkout .woocommerce-checkout #payment .payment_box .woocommerce-invalid input,
.locpocket-checkout .woocommerce-checkout #payment .payment_box input.woocommerce-invalid,
.locpocket-checkout .woocommerce-checkout #payment .payment_box .validate-required input {
	background: var(--lc-bg) !important;
}

.locpocket-checkout .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
	margin: 0 0 16px;
	font-size: 13.5px;
	color: var(--lc-muted);
}

/* Loading overlay do Woo */
.locpocket-checkout .blockUI.blockOverlay {
	background: rgba(255, 255, 255, .65) !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------
 * Barra fixa de ação no mobile
 * ------------------------------------------------------------- */
.locpocket-mobile-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--lc-bg);
	border-top: 1px solid var(--lc-border);
	box-shadow: 0 -6px 20px rgba(16, 24, 40, .08);
}

.locpocket-mobile-bar__total {
	font-size: 12.5px;
	color: var(--lc-muted);
	line-height: 1.25;
}

.locpocket-mobile-bar__total strong {
	display: block;
	font-size: 17px;
	color: var(--lc-text);
	font-variant-numeric: tabular-nums;
}

.locpocket-mobile-bar .locpocket-btn--next {
	flex: 0 1 60%;
	min-height: 48px;
	color: #fff !important;
}

/* ---------------------------------------------------------------
 * Barra fixa inferior do Woodmart (sticky toolbar) — fora do checkout
 *
 * O tema pendura `.wd-toolbar` no rodapé do celular: início, loja,
 * categorias, conta, carrinho. É um menu de SAÍDA colado na tela durante a
 * única tarefa que não pode ser interrompida — e cada ícone dele é um
 * caminho para longe da locação.
 *
 * Some só no checkout. No carrinho ela fica: lá o cliente ainda está
 * decidindo, navegar é legítimo, e a nossa camada não põe barra fixa.
 *
 * Medido na loc.fit: `.wd-toolbar` é `position: fixed; bottom: 0;
 * z-index: 350`, exibida por media query até 1024px. A nossa barra de ação
 * é z-index 9998 — ou seja, hoje uma cobre a outra, e o dia em que o tema
 * subir o z-index dele é o dia em que o menu do tema tapa o botão que
 * fecha a assinatura.
 * ------------------------------------------------------------- */
.locpocket-checkout .wd-toolbar {
	display: none !important;
}

/* O tema reserva espaço no corpo para essa barra:
 *   @media (max-width: 1024px) { .sticky-toolbar-on { padding-bottom: 55px } }
 *
 * Com a barra oculta, a reserva vira faixa morta no fim da página. E
 * repare no vão de 993px a 1024px: ali a barra do TEMA aparecia (o
 * breakpoint dele é 1024) enquanto a NOSSA ainda não (o nosso é 992) — o
 * checkout ficava com um menu de saída no rodapé e nenhum botão de avançar.
 * Por isso esta faixa segue o breakpoint do tema, não o nosso.
 */
@media (max-width: 1024px) {
	body.locpocket-checkout.sticky-toolbar-on {
		padding-bottom: 0;
	}

	/* Estes dois eram posicionados 55px/67px acima da barra do tema. Sem
	   ela, voltam para o rodapé — senão flutuam no meio do nada, em cima
	   da nossa barra de ação. */
	body.locpocket-checkout.sticky-toolbar-on .wd-sticky-btn {
		bottom: 0;
	}

	body.locpocket-checkout.sticky-toolbar-on .scrollToTop {
		bottom: 12px;
	}
}

@media (max-width: 992px) {
	.locpocket-checkout--steps .locpocket-mobile-bar.is-visible {
		display: flex;
	}

	.locpocket-checkout--steps.locpocket-has-bar .locpocket-main {
		padding-bottom: 86px;
	}

	/* Onde a NOSSA barra aparece, ela é quem tem direito ao rodapé: o
	   "voltar ao topo" sobe para não ficar por cima do botão. */
	body.locpocket-checkout--steps.locpocket-has-bar .scrollToTop {
		bottom: 98px;
	}

	.locpocket-checkout--steps .locpocket-pane .locpocket-nav .locpocket-btn--next {
		display: none;
	}

	/* A barra fixa É o botão da etapa. Deixar o #place_order também visível
	   dava dois "Finalizar assinatura" na mesma tela. */
	.locpocket-checkout--steps.locpocket-has-bar .woocommerce-checkout #place_order {
		display: none;
	}

	.locpocket-checkout--steps.locpocket-has-bar .woocommerce-checkout .place-order {
		margin-bottom: 0;
	}

	/* Barras do topo mais compactas no celular */
	.locpocket-checkout .woocommerce-form-login-toggle .woocommerce-info,
	.locpocket-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
		padding: 11px 14px;
		font-size: 13.5px;
		gap: 4px;
	}

	.locpocket-pane {
		padding: 18px 16px;
	}
}

/* Acessibilidade */
.locpocket-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.locpocket-checkout * {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
}

/* ===============================================================
 * CARRINHO
 * Mesma linguagem do checkout. A calculadora de CEP é a
 * protagonista: é ela que resolve frete, locadora da região e o
 * endereço que atravessa para a etapa 1 do checkout.
 * ============================================================= */

.locpocket-cart {
	--lc-bg: #ffffff;
	--lc-surface: #f7f8fa;
	--lc-border: #e2e5ea;
	--lc-border-strong: #cbd1da;
	--lc-text: #14181f;
	--lc-muted: #626b7a;
	--lc-brand: #1f9e4d;
	--lc-brand-dark: #157a3a;
	--lc-brand-soft: #e7f6ed;
	--lc-danger: #c0392b;
	--lc-radius: 12px;
	--lc-radius-sm: 9px;
	--lc-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px rgba(16, 24, 40, .06);
	--lc-focus: 0 0 0 3px rgba(31, 158, 77, .18);

	/* Azul: cor de BLOCO, nunca de ação.
	   Serve para separar a ferramenta (informe seu CEP) do objetivo
	   (concluir a locação). Por nunca aparecer num botão, não disputa o
	   clique com o verde nem cria dívida de identidade para as próximas
	   telas. */
	--lc-info: #2563eb;
	--lc-info-dark: #1e3a8a;
	--lc-info-soft: #eef4ff;
	--lc-info-border: #c7d7fb;
	--lc-info-text: #3f4c63;
	--lc-focus-info: 0 0 0 3px rgba(37, 99, 235, .18);

	/* Neutro do botão de apoio. */
	--lc-neutral: #475569;
	--lc-neutral-dark: #334155;

	/* Âmbar: cor de OFERTA.
	   Nasceu com a troca de plano no carrinho. Não podia ser verde — verde é
	   do "concluir locação", e um segundo verde ao lado dele vira dúvida na
	   hora do clique. Não podia ser azul — azul já é o bloco do CEP, a
	   ferramenta. Uma terceira família, usada só como fundo e borda, resolve
	   sem tirar significado de nenhuma das duas. Aqui também não existe botão
	   âmbar: a ação do cartão é um contorno neutro, secundário por desenho. */
	--lc-offer-soft: #fff8ec;
	--lc-offer-border: #f0dcb4;
	--lc-offer-line: #e7cf9f;
}

/* --- Coluna dos itens ---------------------------------------- */
.locpocket-cart .woocommerce-cart-form {
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow);
	padding: 6px 22px 22px;
}

.locpocket-cart .woocommerce-cart-form table.shop_table,
.locpocket-cart .woocommerce-cart-form table.shop_table th,
.locpocket-cart .woocommerce-cart-form table.shop_table td,
.locpocket-cart .woocommerce-cart-form table.shop_table tr {
	border: 0 !important;
	background: none !important;
}

.locpocket-cart .woocommerce-cart-form table.shop_table thead th {
	padding: 14px 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--lc-muted);
	border-bottom: 1px solid var(--lc-border) !important;
}

.locpocket-cart .cart_item > td {
	padding: 18px 0 !important;
	vertical-align: middle;
	border-bottom: 1px solid var(--lc-border) !important;
}

/* Miniatura quadrada, com o equipamento INTEIRO à vista.
   `cover` cortava a bike — e o cliente está assinando justamente ela.
   `contain` sobre fundo branco mostra o produto todo, sem deformar. */
.locpocket-cart .cart_item .product-thumbnail {
	width: 92px;
	padding-right: 0 !important;
}

/* `min-width` E `max-width`, não só `width`.
   O Woodmart dimensiona a miniatura por min/max-width (woo-mod-shop-table.min.css):

       td.product-thumbnail img { min-width: 80px; max-width: 80px }
       @media (max-width: 768.98px)
       .shop-table-with-img td.product-thumbnail img { min-width: 100px; max-width: 100px }

   E `min-width` ganha de `width`, com ou sem `!important` — não é disputa de
   especificidade, é a ordem em que o navegador resolve o tamanho. Sem repetir
   a medida nas três propriedades, a nossa continua sendo ignorada. */
.locpocket-cart .cart_item .product-thumbnail img {
	width: 92px !important;
	min-width: 92px !important;
	max-width: 92px !important;
	height: 92px !important;
	object-fit: contain;
	padding: 7px;
	border-radius: var(--lc-radius-sm);
	border: 1px solid var(--lc-border);
	background: #fff;
}

.locpocket-cart .cart_item .product-name {
	font-size: 14.5px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--lc-text);
	padding-right: 16px !important;
	padding-left: 18px !important;
}

/* O "×" de remover vinha em dobro: o tema imprime um ícone no ::before e o
   template do WooCommerce imprime o × de texto. Fica um só. */
.locpocket-cart .cart_item a.remove::before,
.locpocket-cart .cart_item .product-remove a::before {
	content: none !important;
}

/* Preço e subtotal são o MESMO número numa assinatura de um item por linha.
   Repetir só ocupa espaço e faz o cliente conferir duas vezes. Fica o
   subtotal, que é o que ele paga. */
.locpocket-cart .woocommerce-cart-form th.product-price,
.locpocket-cart .woocommerce-cart-form td.product-price {
	display: none !important;
}

.locpocket-cart .cart_item .product-name a {
	color: var(--lc-text);
	text-decoration: none;
}

.locpocket-cart .cart_item .product-name a:hover {
	color: var(--lc-brand-dark);
}

.locpocket-cart .cart_item .product-name .variation,
.locpocket-cart .cart_item .product-name dl,
.locpocket-cart .cart_item .product-name small {
	margin: 4px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--lc-muted);
}

.locpocket-cart .cart_item .product-price,
.locpocket-cart .cart_item .product-subtotal {
	padding-left: 16px !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

.locpocket-cart .cart_item .product-subtotal {
	font-weight: 700;
	color: var(--lc-text);
}

/* O × de remover é CONTROLE, não enfeite de borda.
   Estava com `--lc-border-strong` (#cbd1da), que dá 1,53:1 sobre o branco do
   carrinho — praticamente invisível, e o cliente reclamou disso antes de
   qualquer teste meu pegar. Token de borda serve para borda; para um glifo que
   precisa ser encontrado e clicado, vale `--lc-muted` (#626b7a), que dá 5,45:1.
   A WCAG pede 3:1 para componente de interface. */
.locpocket-cart .cart_item .product-remove a,
.locpocket-cart .cart_item a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: 18px;
	color: var(--lc-muted);
	background: none;
	border-radius: 50%;
}

/* No celular o dedo precisa de alvo, não de pixel: 44px é o mínimo
   recomendado, e aqui não custa espaço porque a coluna já é dedicada. */
@media ( max-width: 767px ) {
	.locpocket-cart .cart_item .product-remove a,
	.locpocket-cart .cart_item a.remove {
		width: 44px;
		height: 44px;
		font-size: 20px;
	}
}

.locpocket-cart .cart_item .product-remove a:focus-visible,
.locpocket-cart .cart_item a.remove:focus-visible {
	outline: 2px solid var(--lc-danger);
	outline-offset: 2px;
	color: var(--lc-danger);
}

.locpocket-cart .cart_item .product-remove a:hover,
.locpocket-cart .cart_item a.remove:hover {
	color: var(--lc-danger);
	background: var(--lc-danger-soft);
}

/* Ações: cupom discreto, "voltar à loja" como link */
.locpocket-cart .wd-cart-action-row td,
.locpocket-cart td.actions {
	padding: 18px 0 0 !important;
	border: 0 !important;
}

/* Cupom: um convite discreto, com cara de cupom. Não pode competir com o
   botão de concluir, mas também não pode parecer link quebrado. */
.locpocket-cart .locpocket-coupon-toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	margin: 4px 0 12px;
	padding: 9px 16px 9px 10px;
	border: 1px dashed var(--lc-border-strong);
	border-radius: 999px;
	background: var(--lc-bg);
	color: var(--lc-text);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none !important;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.locpocket-cart .locpocket-coupon-toggle::before {
	content: "%";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--lc-brand-soft);
	color: var(--lc-brand-dark);
	font-size: 12px;
	font-weight: 800;
}

.locpocket-cart .locpocket-coupon-toggle:hover {
	border-color: var(--lc-brand);
	border-style: solid;
	color: var(--lc-brand-dark);
	background: var(--lc-brand-soft);
}

.locpocket-cart .coupon[hidden] {
	display: none !important;
}

.locpocket-cart .coupon {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0 0 12px;
}

.locpocket-cart .coupon input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]) {
	flex: 1 1 200px;
	max-width: 260px;
	height: 48px;
	padding: 0 14px;
	font-size: 16px;
	border: 1px solid var(--lc-border-strong);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-bg);
}

.locpocket-cart .coupon input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus {
	border-color: var(--lc-brand);
	box-shadow: var(--lc-focus);
	outline: none;
}

.locpocket-cart .coupon button,
.locpocket-cart td.actions .button {
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--lc-border-strong) !important;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-bg) !important;
	color: var(--lc-text) !important;
	font-size: 14px;
	font-weight: 600;
	box-shadow: none;
}

.locpocket-cart .coupon button:hover,
.locpocket-cart td.actions .button:hover {
	border-color: var(--lc-brand) !important;
	color: var(--lc-brand-dark) !important;
	background: var(--lc-bg) !important;
}

/* --- Coluna dos totais --------------------------------------- */
.locpocket-cart .cart_totals,
.locpocket-cart .locpocket-cart-totals {
	background: var(--lc-bg);
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius);
	box-shadow: var(--lc-shadow);
	padding: 22px;
}

/* O tema imprime este título em 22px caixa-alta. Medido na tela: com dois
   níveis de classe a nossa regra perdia. */
body.locpocket-cart .cart_totals h2 {
	margin: 0 0 16px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: .02em !important;
	text-transform: none !important;
	color: var(--lc-text) !important;
}

.locpocket-cart .cart_totals table,
.locpocket-cart .cart_totals table th,
.locpocket-cart .cart_totals table td,
.locpocket-cart .cart_totals table tr {
	border: 0 !important;
	background: none !important;
}

.locpocket-cart .cart_totals table {
	display: block;
	width: 100%;
	margin: 0;
}

/* Aqui NÃO se força table-cell: o tema imprime os rótulos por
   pseudo-elemento quando as células são bloco, e voltar para tabela
   duplicava "Total Total". Cada linha vira um flex — rótulo à esquerda,
   valor à direita, divisória inteira. */
.locpocket-cart .cart_totals table tbody {
	display: block;
}

.locpocket-cart .cart_totals table tr {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
}

.locpocket-cart .cart_totals table tr + tr {
	border-top: 1px solid var(--lc-border);
}

.locpocket-cart .cart_totals table th,
.locpocket-cart .cart_totals table td {
	display: block !important;
	width: auto !important;
	padding: 0 !important;
	border: 0 !important;
	float: none !important;
}

/* A tabela "responsiva" do tema repete o rótulo dentro da célula do valor
   (`content: attr(data-title)`), o que virava "Total / Total / R$ 189,90".
   O rótulo já está no <th>. */
.locpocket-cart .cart_totals table td::before,
.locpocket-cart .cart_totals table th::before {
	display: none !important;
	content: none !important;
}

.locpocket-cart .cart_totals table th,
.locpocket-cart .cart_totals table td {
	font-size: 14px;
}

.locpocket-cart .cart_totals table tr {
	flex-wrap: nowrap;
}

.locpocket-cart .cart_totals table th {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
	font-weight: 500;
	color: var(--lc-muted);
}

.locpocket-cart .cart_totals table td {
	flex: 0 1 auto;
	min-width: 0;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

/* Valor que é só dinheiro não quebra; o do frete traz o nome do método
   e precisa poder quebrar, senão espreme o rótulo da locadora. */
.locpocket-cart .cart_totals .cart-subtotal td,
.locpocket-cart .cart_totals .order-total td {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Frete: o rótulo é o nome da locadora e o valor traz o nome do método —
   os dois longos. Lado a lado, um espremia o outro em quatro linhas.
   Empilhados, cada um usa a largura inteira. */
.locpocket-cart .cart_totals .shipping,
.locpocket-cart .cart_totals .woocommerce-shipping-totals {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 4px;
}

.locpocket-cart .cart_totals .shipping th,
.locpocket-cart .cart_totals .woocommerce-shipping-totals th {
	max-width: none;
	font-weight: 600;
	color: var(--lc-text);
}

.locpocket-cart .cart_totals .shipping td,
.locpocket-cart .cart_totals .woocommerce-shipping-totals td {
	text-align: left;
	white-space: normal;
	color: var(--lc-muted);
}

.locpocket-cart .cart_totals .order-total th,
.locpocket-cart .cart_totals .order-total td {
	font-size: 17px;
	font-weight: 800;
	color: var(--lc-text);
}

/* O tema põe o valor num <strong style="display:block">, que ocupa a linha
   inteira e joga o "/ por mês" para baixo. Medido na tela: o <strong> ficava
   com 245px e a linha do total recorrente, com 55px de altura contra 31px do
   total normal. */
.locpocket-cart .cart_totals td strong {
	display: inline !important;
	width: auto !important;
}

/* "Recorrente total" cabe numa linha; deixar quebrar desalinhava o valor. */
.locpocket-cart .cart_totals .order-total th {
	white-space: nowrap;
}

/* A assinatura é o que o cliente contrata: o recorrente é o número que ele
   precisa ler. Fica no mesmo peso do total, sem estourar a caixa. */
.locpocket-cart .cart_totals .order-total.recurring-total th,
.locpocket-cart .cart_totals .order-total.recurring-total td {
	font-size: 16px;
}

.locpocket-cart .cart_totals .recurring-totals th {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--lc-muted);
}

/* O Woodmart embrulha os totais num cartão próprio; com o nosso por fora,
   virava cartão dentro de cartão. */
/* O `:not(.locpocket-resumo)` entrou na 1.27.0: esta regra zerava, com
   !important, a margem que separa o nosso resumo do botão de pagar — e o
   número do mês seguinte ficava encostado no verde. Pego pelo harness de
   layout em Chromium, que mede a folga; nenhuma verificação de DOM veria
   isso. */
.locpocket-cart .cart-totals-inner,
.locpocket-cart .cart_totals > div:not(.locpocket-cep):not(.locpocket-resumo):not(.locpocket-oferta) {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* --- CEP em destaque ----------------------------------------- */
.locpocket-cep {
	position: relative;
	overflow: hidden;
	margin: 0 0 20px;
	padding: 18px;
	border: 1px solid var(--lc-info-border);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-info-soft);
}

/* ---------------------------------------------------------------
 * Cálculo em andamento
 *
 * Com o cálculo disparando sozinho ao completar o CEP, o bloqueio do
 * WooCommerce deixa de ser um incômodo ocasional (só de quem clica) e passa
 * a ser universal: TODO cliente que digitar veria a lista de produtos, o
 * cupom e os totais escurecidos por ~2s.
 *
 * A lista de produtos não vai mudar por causa de um CEP — escurecê-la só
 * comunica "espere" num lugar onde não há nada para esperar. Os totais
 * mantêm o bloqueio, porque eles mudam de verdade.
 *
 * `display: none`, e não `opacity: 0`: assim o overlay sai também do teste
 * de clique e a lista volta a responder. O nó CONTINUA no DOM — o
 * `unblock()` do jQuery o encontra e remove normalmente, nada é arrancado
 * por baixo de outra biblioteca.
 *
 * A regra só existe enquanto a classe estiver no body, isto é, só durante o
 * cálculo do CEP. Na atualização de quantidade o bloqueio segue como era,
 * porque ali a lista muda mesmo.
 * ------------------------------------------------------------- */
body.locpocket-cep-soft-block.locpocket-calculando-cep .woocommerce-cart-form .blockUI.blockOverlay,
body.locpocket-cep-soft-block.locpocket-calculando-cep .woocommerce-cart-form .blockUI.blockMsg {
	display: none !important;
}

/* O cartão assume o carregamento que a página deixou de assumir. */
.locpocket-cep--calculando::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--lc-info), transparent);
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: locpocket-cep-progresso 1.1s ease-in-out infinite;
}

@keyframes locpocket-cep-progresso {

	0% { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}

/* Quem pediu menos movimento recebe uma barra parada, não um pisca-pisca. */
@media (prefers-reduced-motion: reduce) {

	.locpocket-cep--calculando::after {
		animation: none;
		background: var(--lc-info);
		opacity: .5;
	}
}

.locpocket-cep--calculando button[name="calc_shipping"],
.locpocket-cep--calculando input[name="calc_shipping"] {
	opacity: .75;
	cursor: progress;
}

.locpocket-cep__title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: var(--lc-info-dark);
}

.locpocket-cep__hint {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--lc-info-text);
}

/* Recado de cálculo que saiu e não pegou.
   Fica DENTRO do cartão de entrega, logo abaixo do botão: é onde o cliente
   está olhando no instante em que percebe que nada aconteceu. */
.locpocket-cep__falha {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	line-height: 1.4;
	color: #8a1c12;
	background: #fdecea;
	border-radius: 8px;
}

.locpocket-cep__destino {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-bg);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--lc-text);
}

/* Cobertura confirmada. Uma linha e um visto — o cliente precisa saber que o
   endereço dele está coberto e por quem, não de um bloco de celebração. */
.locpocket-cep__destino.is-ok {
	position: relative;
	padding-left: 38px;
}

.locpocket-cep__destino.is-ok::before {
	content: "✓";
	position: absolute;
	left: 11px;
	top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	border-radius: 999px;
	background: var(--lc-brand);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.locpocket-cep__destino-titulo {
	display: block;
	line-height: 1.35;
}

.locpocket-cep__destino-meta {
	display: block;
	margin-top: 3px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--lc-muted);
}

/* O formulário inteiro do WooCommerce sobe para dentro do cartão (é ele que
   carrega o POST do CEP). Aqui ele perde as margens que o tema aplica. */
.locpocket-cep form.woocommerce-shipping-calculator {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.locpocket-cep .shipping-calculator-form {
	display: block !important;
	margin: 0;
}

.locpocket-cep .form-row {
	margin: 0 0 10px;
	padding: 0;
	width: auto;
	float: none;
}

/* O tema imprime "Calcular frete:" num ::before da linha. Dentro do cartão
   isso vira o terceiro texto dizendo a mesma coisa, logo abaixo de "Onde
   vamos entregar?" e da frase explicativa. */
.locpocket-cep .form-row::before {
	content: none !important;
}

.locpocket-cep label {
	display: block;
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--lc-text);
}

/* O campo tem que SALTAR do cartão verde. O tema deixa o fundo transparente
   e a borda em rgba(0,0,0,.1) — medido na tela: o campo sumia dentro do
   próprio cartão, e é ele o único pedido da página. */
.locpocket-cep input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.locpocket-cep select,
.locpocket-cep .select2-container .select2-selection--single {
	width: 100%;
	height: 52px;
	padding: 0 14px;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: .01em;
	/* Longhands, e não o atalho `border`: o Woodmart aplica a espessura por
	   variável própria (--wd-form-brd-width) numa regra que ganha do atalho.
	   Medido na tela — com `border:` o campo continuava com a borda cinza de
	   1px do tema. O anel de sombra garante o destaque em qualquer espessura. */
	border-style: solid !important;
	border-color: var(--lc-info) !important;
	border-radius: var(--lc-radius-sm);
	background: #fff !important;
	color: var(--lc-text);
	box-shadow: 0 0 0 1px rgba(37, 99, 235, .18), 0 1px 2px rgba(16, 24, 40, .06);
}

.locpocket-cep input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"])::placeholder {
	font-weight: 500;
	color: #9aa3af;
}

.locpocket-cep input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
.locpocket-cep select:focus {
	border-color: var(--lc-info);
	box-shadow: var(--lc-focus-info);
	outline: none;
}

/* Cinza neutro dentro do cartão azul.
   O caminho longo até aqui: verde brigava com o "Concluir locação" (mesma
   cor, mesmo peso), grafite invertia a hierarquia (preto sobre fundo claro é
   o maior contraste da página) e azul no botão criava uma segunda cor de
   AÇÃO. Com o azul no FUNDO e o botão neutro, o verde volta a ser a única
   cor que significa "clique aqui para fechar" na página inteira. */
.locpocket-cep button,
.locpocket-cep .button {
	width: 100%;
	min-height: 48px;
	margin: 4px 0 0;
	border: 0 !important;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-neutral) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.locpocket-cep button:hover,
.locpocket-cep .button:hover {
	background: var(--lc-neutral-dark) !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------
 * Fora da área de atendimento
 *
 * O WooCommerce responde com um aviso solto que parece defeito do site.
 * Numa operação com locadora por região, "não atendemos aí" não é erro: é
 * informação de cobertura — e é o momento em que o cliente mais precisa de
 * um caminho, não de um beco.
 * ------------------------------------------------------------- */
.locpocket-cart .locpocket-noship {
	margin: 4px 0 0;
	padding: 16px;
	border: 1px solid #f0c9a8;
	border-radius: var(--lc-radius-sm);
	background: #fff7ed;
}

.locpocket-cart .locpocket-noship__title {
	margin: 0 0 6px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.35;
	color: #7c3a06;
}

.locpocket-cart .locpocket-noship__text {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.5;
	color: #7a5433;
}

.locpocket-cart .locpocket-noship__cta {
	display: flex !important;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 16px;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-brand-dark);
	color: #fff !important;
	font-size: 14.5px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
}

.locpocket-cart .locpocket-noship__cta:hover {
	background: #08492e;
	color: #fff !important;
}

.locpocket-cart .locpocket-noship__alt {
	display: block;
	width: 100%;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: #7c3a06;
	text-decoration: underline;
	cursor: pointer;
}

/* Estados/país que o tema mostra na calculadora: fora do caminho */
.locpocket-cep .form-row:has(#calc_shipping_country),
.locpocket-cep .form-row:has(#calc_shipping_state),
.locpocket-cep .form-row:has(#calc_shipping_city),
.locpocket-cep .form-row:has(#calc_shipping_address_1) {
	display: none;
}

/* ---------------------------------------------------------------
 * A OFERTA DE TROCA DE PLANO
 *
 * Mora entre o resumo e o botão de pagar: o cliente lê "Você paga hoje
 * R$ 229,90", vê que existe um caminho em que a entrega não entra nessa conta,
 * e só então decide.
 *
 * O desenho tem uma regra difícil: precisa CONVIDAR sem COMPETIR. O verde
 * cheio é do "concluir locação" e continua sendo só dele — dois botões cheios
 * lado a lado viram duas dúvidas. Aqui o convite é um cartão claro com um
 * botão de contorno: visível, atraente, e evidentemente secundário.
 *
 * E o que o cliente ASSUME em troca fica no mesmo tamanho do que ele ganha.
 * Uma oferta que destaca o benefício e esconde o compromisso funciona uma vez
 * — e depois vira cancelamento e reclamação.
 * --------------------------------------------------------------- */
.locpocket-cart .cart_totals .locpocket-oferta {
	margin: 0 0 18px;
	padding: 16px 18px 18px;
	border: 1px solid var(--lc-offer-border, #f0dcb4);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-offer-soft, #fff8ec);
}

.locpocket-oferta__titulo {
	margin: 0 0 10px;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lc-text, #14181f);
}

.locpocket-oferta__ganho,
.locpocket-oferta__linha {
	margin: 0 0 4px;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--lc-text, #14181f);
}

/* O número é o argumento. Peso, sim; cor nova, não — o texto do sistema em
   negrito basta, e mantém o contraste medido. */
.locpocket-oferta__valor {
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.locpocket-oferta__precos {
	margin: 8px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--lc-muted, #626b7a);
}

/* A contrapartida. Mesmo corpo de texto do benefício, separada por uma linha
   para ser lida — não para ser pulada. */
.locpocket-oferta__troca {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--lc-offer-line, #e7cf9f);
	font-size: 13px;
	line-height: 1.45;
	color: var(--lc-text, #14181f);
}

.locpocket-oferta__botao {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	margin: 14px 0 0;
	padding: 0 18px;
	/* Contorno NEUTRO, não verde: ao lado do "concluir locação" preenchido,
	   isto se lê como "o outro caminho", nunca como "o botão". */
	border: 1.5px solid var(--lc-neutral, #475569);
	border-radius: var(--lc-radius-sm);
	background: #fff;
	color: var(--lc-neutral-dark, #334155) !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
}

.locpocket-oferta__botao:hover,
.locpocket-oferta__botao:focus-visible {
	background: var(--lc-neutral, #475569);
	color: #fff !important;
}

.locpocket-oferta__botao:focus-visible {
	outline: none;
	box-shadow: var(--lc-focus, 0 0 0 3px rgba(31, 158, 77, .18));
}

/* "Continuar com o plano atual" é texto, não botão: para continuar, basta não
   clicar em nada. Transformar isso num segundo botão criaria uma decisão onde
   já existe um padrão. */
.locpocket-oferta__ficar {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
	color: var(--lc-muted, #626b7a);
}

@media ( max-width: 767px ) {
	.locpocket-cart .cart_totals .locpocket-oferta {
		padding: 14px 14px 16px;
	}

	.locpocket-oferta__titulo { font-size: 14px; }
}

/* ---------------------------------------------------------------
 * O BOTÃO PRINCIPAL, E O DIREITO DELE DE RECEBER O CLIQUE
 *
 * Medido no carrinho da loja em 29/08/2026, num monitor de 1184px:
 *
 *   botão "CONCLUIR LOCAÇÃO"   x de 712 a 1131
 *   painel do WhatsApp         x de 771 a 1139   (fixo, invisível)
 *
 * De 771 até 1131 — 360 dos 419 pixels do botão, 86% da largura — o clique
 * NÃO chegava ao botão: `document.elementFromPoint()` devolvia
 * `.lf-wa-body` e `.lf-wa-fallback-link`. Só a faixa esquerda de 59px
 * funcionava. O cliente clicava em "concluir" e ia parar no WhatsApp.
 *
 * A causa está no widget, não aqui: o painel fechado é
 * `opacity: 0` com `pointer-events: auto` e `z-index: 99999` — invisível e
 * clicável, ocupando 369×435 no canto inferior direito. O próprio widget já
 * usa o padrão certo no `.lf-wa-overlay` (`pointer-events: none`, e `auto`
 * só com `.lf-open`); no painel, faltou.
 *
 * Aqui vai a rede de segurança, e ela vale só onde o nosso CSS carrega —
 * carrinho e checkout, as duas telas em que um clique perdido é dinheiro
 * perdido. A correção definitiva é no snippet do WhatsApp, para valer no
 * site inteiro.
 * --------------------------------------------------------------- */
#lf-wa-root .lf-wa-sheet:not(.lf-open) {
	pointer-events: none !important;
}

/* --- Botão principal ----------------------------------------- */
.locpocket-cart .wc-proceed-to-checkout {
	margin: 18px 0 0;
	padding: 0;
	/* Contexto próprio, acima do que estiver na mesma camada da página.
	   Valor BAIXO de propósito: subir a 99999 poria o botão por cima da
	   barra fixa do rodapé no celular quando a página rola. Contra widget
	   flutuante quem responde é a regra de `pointer-events` acima. */
	position: relative;
	z-index: 3;
}

.locpocket-cart .wc-proceed-to-checkout .checkout-button,
.locpocket-cart a.checkout-button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* 56 → 60px: o pedido do lojista foi "uma área maior" no botão que fecha
	   a locação. Quatro pixels não parecem muito e são ~7% de alvo a mais,
	   sem mexer no desenho que já estava aprovado. */
	min-height: 60px;
	margin: 0;
	padding: 0 22px;
	border: 0 !important;
	border-radius: var(--lc-radius-sm);
	background: var(--lc-brand) !important;
	color: #fff !important;
	font-size: 16.5px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
}

.locpocket-cart .wc-proceed-to-checkout .checkout-button:hover,
.locpocket-cart a.checkout-button:hover {
	background: var(--lc-brand-dark) !important;
	color: #fff !important;
}

/* --- Selos ---------------------------------------------------- */
/* Piscada curta ao chegar no botão depois do CEP: sinaliza "é aqui" sem
   virar animação de banner. */
.locpocket-cart .checkout-button.locpocket-cta-pulse {
	animation: locpocket-cta-pulse 1.6s ease-out 1;
}

@keyframes locpocket-cta-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(31, 158, 77, .45); }
	70%  { box-shadow: 0 0 0 12px rgba(31, 158, 77, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 158, 77, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.locpocket-cart .checkout-button.locpocket-cta-pulse {
		animation: none;
	}
}

.locpocket-cart .locpocket-badges {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--lc-border);
}

/* --- Mobile --------------------------------------------------- */
/* No celular, três campos numa linha de 360px deixam o código de segurança
   espremido e o rótulo "Código de Segurança" quebrado em duas linhas.
   Mês e Ano dividem a primeira linha; o código começa a linha de baixo,
   com a mesma largura do Mês — alinhado à mesma coluna, não solto.

   A linha do código é escolhida pela classe .locpocket-cvv, que o JS aplica ao
   campo que ele REALMENTE identificou. A versão anterior usava
   :nth-of-type(3n) e caía no campo errado assim que o gateway mudava a
   quantidade de linhas — foi o que aconteceu com o Asaas. */
@media (max-width: 600px) {
	.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > .locpocket-third {
		grid-column: span 3;
	}

	/* O código fica com a linha inteira, não com meia.
	   Medido: "Código de Segurança *" não cabe em meia coluna de celular —
	   o rótulo ia para duas linhas (32 px contra 16 px dos vizinhos) e
	   desalinhava a etapa toda. Com a linha inteira ele cabe de sobra, e o
	   campo herda a mesma moldura dos outros. */
	.locpocket-checkout .woocommerce-checkout #payment .locpocket-pay-grid > .locpocket-cvv {
		grid-column: 1 / -1;
	}

}

@media (max-width: 768px) {
	.locpocket-cart .woocommerce-cart-form,
	.locpocket-cart .cart_totals {
		padding: 16px;
	}

	/* O item do carrinho abria um vão enorme entre o valor e o cupom: no
	   modo responsivo do tema cada célula vira bloco e mantém o padding de
	   linha de tabela. */
	.locpocket-cart .cart_item > td {
		padding: 8px 0 !important;
	}

	.locpocket-cart .cart_item > td.product-subtotal {
		padding-bottom: 4px !important;
	}

	.locpocket-cart .wd-cart-action-row td,
	.locpocket-cart td.actions {
		padding: 10px 0 0 !important;
	}

	.locpocket-cart .cart_item .product-thumbnail,
	.locpocket-cart .cart_item .product-thumbnail img {
		width: 76px !important;
	}

	/* No mobile o tema pede 100px de min-width — e a âncora em volta da
	   imagem tem `overflow:hidden`. Resultado medido na loja em 28/08/2026:
	   imagem de 100px dentro de um link de 76px, com a moldura arredondada
	   cortada no lado direito. É preciso vencer as TRÊS propriedades. */
	.locpocket-cart .cart_item .product-thumbnail img {
		min-width: 76px !important;
		max-width: 76px !important;
		height: 76px !important;
	}

	.locpocket-cart .cart_item .product-name {
		padding-left: 14px !important;
	}

	.locpocket-cart .cart_item > td {
		padding: 12px 0 !important;
	}

	/* "Voltar à loja" sai do mobile.
	   A tela tem uma tarefa: informar o CEP e concluir. Um botão do tamanho
	   do principal convidando a SAIR do carrinho é a única coisa ali que
	   trabalha contra a locação. No desktop ele fica — divide a linha com o
	   cupom e não disputa atenção. */
	.locpocket-cart .locpocket-continue {
		display: none !important;
	}
}

/* ---------------------------------------------------------------
 * Subtítulo dentro de uma etapa
 *
 * Com "Seus dados" e "Entrega" na mesma etapa, os dois blocos precisam
 * continuar sendo DOIS. Sem esta separação eles viram uma lista única de
 * campos e o cliente perde a noção de que já passou dos dados pessoais.
 * ------------------------------------------------------------- */
.locpocket-pane .locpocket-subtitle {
	grid-column: 1 / -1;
	margin: 20px 0 12px;
	padding-top: 18px;
	border-top: 1px solid var(--lc-border);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--lc-text);
}

/* Primeiro elemento do painel não precisa de linha acima. */
.locpocket-pane .locpocket-subtitle:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* ---------------------------------------------------------------
 * Amex: 4 dígitos, e na FRENTE
 *
 * A ilustração antes dizia "3 dígitos" para todo mundo. Para quem tem Amex
 * isso não é impreciso, é instrução errada — e no único campo em que o
 * cliente costuma travar. O bloco da frente só existe quando o BIN é
 * reconhecido como Amex; até lá vale o caso comum, que é o certo para Visa,
 * Mastercard, Elo, Hipercard e Diners.
 * ------------------------------------------------------------- */
.locpocket-card__cvv--frente,
.locpocket-card__hint--frente {
	display: none;
}

.locpocket-card__stack.is-amex .locpocket-card__cvv--frente {
	display: flex;
	position: absolute;
	right: 7%;
	top: 27%;
	width: 18%;
	height: 15%;
	background: #fff;
	color: #0b1218;
}

.locpocket-card__stack.is-amex .locpocket-card__hint--frente {
	display: block;
	position: absolute;
	right: 7%;
	top: 44%;
	font-family: inherit;
	font-size: 6.5px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .6);
}

@supports (width: 1cqw) {

	.locpocket-card__stack.is-amex .locpocket-card__hint--frente { font-size: clamp(5.5px, 1.9cqw, 7px); }
}

/* Com Amex, o verso para de anunciar um código que não está lá. */
.locpocket-card__stack.is-amex .locpocket-card--back .locpocket-card__cvv,
.locpocket-card__stack.is-amex .locpocket-card--back .locpocket-card__hint {
	opacity: .25;
}

/* ==================================================================
 * Resumo da assinatura condensado
 *
 * A tabela do WooCommerce continua no DOM (os fragments contam com ela)
 * e é dela que os valores saem; o que o cliente lê é esta lista.
 * ================================================================ */

/* Somem o cabeçalho e o rodapé — que é onde mora a repetição. O CORPO fica:
   é o produto que o cliente está assinando, e esconder isso seria trocar
   redundância por cegueira.

   A tabela é forçada a `display:table !important` algumas centenas de linhas
   acima (o tema a deixa como blocos), então esconder exige vencer AQUELE
   seletor: dois `!important` empatam e quem decide é a especificidade. */
.locpocket-summary__body table.shop_table.locpocket-resumo-condensado thead,
.locpocket-summary__body table.shop_table.locpocket-resumo-condensado tfoot {
	display: none !important;
}

/* No CARRINHO some a tabela INTEIRA — ali ela não tem corpo com produto: os
   itens estão na coluna da esquerda, e o que a tabela de totais carrega é
   só a repetição (subtotal, frete, cupom duas vezes, total, total
   recorrente).

   Escondida, não removida: o `<input type="hidden" name="shipping_method[…]">`
   que o WooCommerce imprime ali dentro continua no DOM e continua indo no
   POST — o cálculo de frete não depende de a tabela estar visível. E é dela
   que os valores saem no próximo redesenho.

   Com ela vai também o "Entrega para Uberlândia 38401-306", que o cartão de
   CEP logo acima já diz melhor: com o nome da locadora e o prazo. */
.locpocket-cart .cart_totals table.locpocket-resumo-condensado,
.locpocket-cart .locpocket-cart-totals table.locpocket-resumo-condensado {
	display: none !important;
}

/* A lista ocupa o lugar da tabela: sem margem própria em cima (o <h2> do
   carrinho já espaça) e com folga embaixo antes do botão. */
.locpocket-cart .cart_totals .locpocket-resumo {
	margin-bottom: 22px;
}

/* Com um item só, o preço dele é o mesmo número da "Primeira mensalidade"
   logo abaixo. Com dois ou mais, cada preço diz de qual item é — e aí fica. */
.locpocket-resumo-condensado.tem-um-item .cart_item .product-total,
.locpocket-resumo-condensado .cart_item .product-quantity.locpocket-qtd-um {
	display: none !important;
}

.locpocket-resumo {
	margin: 0;
	padding: 4px 0 0;
}

/* As divisórias são desenhadas no TOPO de cada linha, nunca na base.
   Com borda em cima e embaixo, a linha de baixo do "cobrado uma vez"
   encontrava a de cima do "Você paga hoje" e virava um traço duplo — que é
   pequeno, mas é o tipo de desleixo que o cliente lê como desleixo, na tela
   em que ele decide pagar. Com uma borda só por junta, não há como duplicar. */
.locpocket-resumo__linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	font-size: 14px;
	line-height: 1.35;
	color: var(--lc-text, #14181f);
}

.locpocket-resumo__linha + .locpocket-resumo__linha {
	border-top: 1px solid var(--lc-border, #e2e5ea);
}

.locpocket-resumo__rot {
	color: var(--lc-muted, #626b7a);
	/* O rótulo é o lado que CEDE espaço: é ele que carrega o nome do cupom e,
	   desde a 1.27.2, a ação de remover. A coluna do dinheiro nunca encolhe. */
	min-width: 0;
}

.locpocket-resumo__val {
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* "cobrado uma vez" — a informação que evita a pergunta no WhatsApp.
   Sem `opacity`: transparência engana a conferência de contraste, que lê a
   COR declarada e não o que sai na tela. Se é para ser mais claro, que seja
   numa cor escolhida e medida. */
.locpocket-resumo__nota {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--lc-muted, #626b7a);
}

/* As duas linhas que o cliente realmente procura. A junta antes do total é a
   única mais forte — separa a composição do resultado. */
.locpocket-resumo__linha.is-hoje {
	margin-top: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--lc-border-strong, #cbd1da);
}

.locpocket-resumo__linha.is-hoje .locpocket-resumo__rot {
	font-weight: 700;
	color: var(--lc-text, #14181f);
}

.locpocket-resumo__linha.is-hoje .locpocket-resumo__val {
	font-size: 22px;
	font-weight: 700;
	color: var(--lc-text, #14181f);
}

/* "Depois, todo mês" pertence ao total de hoje: fica colada nele, sem junta,
   porque as duas juntas respondem à mesma pergunta. */
.locpocket-resumo__linha.is-depois {
	padding-top: 2px;
	border-top: 0;
}

.locpocket-resumo__linha.is-depois .locpocket-resumo__val {
	font-size: 15px;
}

/* --- O bloco dos PRÓXIMOS MESES -------------------------------

   Tudo o que vem depois do "Você paga hoje" é o futuro, e precisa se ler como
   futuro. No CARRINHO isso deixou de ser refinamento: com um cupom ativo, o
   WooCommerce escreve "Cupom: cliente10 −R$ 12,99" DUAS vezes — uma na conta
   de hoje, outra na dos próximos meses. São dois fatos verdadeiros, e nenhum
   dos dois pode sumir; o que não pode é os dois terem o mesmo peso na mesma
   coluna, porque aí um desconto só é lido como desconto em dobro.

   A junta depois do total de hoje é a mais forte da lista, e daí para baixo os
   valores ficam mais leves. O cliente vê onde uma conta termina e a outra
   começa sem precisar de mais uma palavra na tela.

   O `:not(.is-depois)` é a exceção medida: quando o futuro é UMA linha só
   ("Depois, todo mês", sem cupom nem frete mensal), ela responde à mesma
   pergunta do total de hoje e fica colada nele, como está desde a 1.26.0.
   Separador serve para separar blocos, não para cortar uma frase em duas. */
.locpocket-resumo__linha.is-hoje + .locpocket-resumo__linha:not( .is-depois ) {
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--lc-border-strong, #cbd1da);
}

.locpocket-resumo__linha.is-mensal .locpocket-resumo__val {
	font-weight: 600;
	color: var(--lc-muted, #626b7a);
}

/* --- O que vem clonado da célula do Woo ------------------------

   O "[Remover]" do cupom é o caso real, e ele chegou ATROPELANDO o valor:
   na loja, o tema tira esse link do fluxo (`position:absolute; right:0`) e
   ainda pendura um "✕" por pseudo-elemento. Dentro de uma célula de tabela
   posicionada, isso encosta no canto da célula; dentro da nossa lista, o ✕
   caiu em cima do "-R$ 12,99" — que foi exatamente o que apareceu na tela em
   28/08/2026.

   A regra aqui não é "consertar o tema": é a nossa lista dizer, para tudo o
   que entra clonado, que ali dentro ninguém sai do fluxo. O conteúdo continua
   inteiro — o que se recusa é a posição. */
.locpocket-resumo__val,
.locpocket-resumo__rot {
	position: relative;
}

.locpocket-resumo__val > *,
.locpocket-resumo__rot > * {
	position: static !important;
	float: none !important;
	transform: none !important;
	inset: auto !important;
}

/* A coluna do dinheiro continua sendo TEXTO, não uma grade de itens.
   Chegou a virar flex aqui, e o "-" do desconto — que é um nó de texto solto,
   irmão do preço — virou item próprio e ganhou o espaçamento do `gap`:
   "-  R$ 12,99". O que separa o link do valor é a margem dele, não a caixa. */

/* Links que vieram junto da linha do Woo. O link CONTINUA clicável (é o do
   próprio WooCommerce, clonado com a célula); só para de gritar mais alto que
   o valor ao lado. */
.locpocket-resumo__val a,
.locpocket-resumo__rot a {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	white-space: nowrap;
	font-weight: 400;
	color: var(--lc-muted, #626b7a);
	text-decoration: underline;
}

.locpocket-resumo__val a:hover,
.locpocket-resumo__rot a:hover {
	color: var(--lc-brand-dark, #14181f);
}

/* O "✕" do tema é decoração, e decoração que se sobrepõe a dinheiro não
   entra. O texto do link — que é do WooCommerce — continua inteiro. */
.locpocket-resumo__val a::before,
.locpocket-resumo__val a::after,
.locpocket-resumo__rot a::before,
.locpocket-resumo__rot a::after {
	content: none !important;
}

@media ( max-width: 420px ) {
	.locpocket-resumo__linha { font-size: 13.5px; }
	.locpocket-resumo__linha.is-hoje .locpocket-resumo__val { font-size: 20px; }
}


/* =====================================================================
 * DATAS DA LOCAÇÃO (Easy Booking)
 *
 * O que o cliente da LOCPOCKET confere antes de pagar não é o SKU: é o dia
 * da retirada e o da devolução. O Easy Booking publica essas datas como
 * variação do item, e a regra acima deixa toda variação em letra miúda
 * cinza — certo para "cor: azul", errado para a data que define a festa.
 *
 * Com datas no carrinho, o PHP marca o body com `locpocket-has-booking` e
 * o bloco ganha destaque: fundo rosado claro, texto legível e um par por
 * linha, no lugar de tudo emendado.
 * ================================================================== */
body.locpocket-has-booking .locpocket-item__body dl.variation,
body.locpocket-has-booking .locpocket-cart-item .product-name dl.variation,
body.locpocket-has-booking .woocommerce-cart-form .cart_item .product-name dl.variation {
	display: block;
	margin: 7px 0 0;
	padding: 6px 9px;
	border-left: 3px solid var(--lc-accent);
	border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
	background: var(--lc-accent-soft);
	font-size: 13px;
	line-height: 1.45;
	color: var(--lc-text);
}

body.locpocket-has-booking .locpocket-item__body dl.variation dt,
body.locpocket-has-booking .locpocket-cart-item .product-name dl.variation dt,
body.locpocket-has-booking .woocommerce-cart-form .cart_item .product-name dl.variation dt {
	display: inline;
	margin: 0 4px 0 0;
	font-weight: 700;
	color: var(--lc-text);
}

body.locpocket-has-booking .locpocket-item__body dl.variation dd,
body.locpocket-has-booking .locpocket-cart-item .product-name dl.variation dd,
body.locpocket-has-booking .woocommerce-cart-form .cart_item .product-name dl.variation dd {
	display: inline;
	margin: 0;
	font-weight: 500;
	color: var(--lc-text);
}

body.locpocket-has-booking .locpocket-item__body dl.variation dd p,
body.locpocket-has-booking .locpocket-cart-item .product-name dl.variation dd p,
body.locpocket-has-booking .woocommerce-cart-form .cart_item .product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

/* Um par (rótulo + data) por linha, sem depender de <br> do plugin. */
body.locpocket-has-booking .locpocket-item__body dl.variation dd::after,
body.locpocket-has-booking .locpocket-cart-item .product-name dl.variation dd::after,
body.locpocket-has-booking .woocommerce-cart-form .cart_item .product-name dl.variation dd::after {
	content: '';
	display: block;
}

/* Nunca esconder as datas, venha o `display:none` de onde vier. */
body.locpocket-has-booking .locpocket-item__body dl.variation {
	visibility: visible !important;
}


/* A data marcada pelo PHP: funciona mesmo se o `body` não tiver a classe
   e mesmo que o Easy Booking mude o markup em volta. */
.locpocket-booking-date {
	font-weight: 700;
	color: var(--lc-text);
	white-space: nowrap;
}

/* Bloco de variações que contém uma data vira o cartão do período. */
.locpocket-item__body dl.variation:has(.locpocket-booking-date),
.woocommerce-cart-form .cart_item .product-name dl.variation:has(.locpocket-booking-date) {
	display: block;
	margin: 7px 0 0;
	padding: 6px 9px;
	border-left: 3px solid var(--lc-accent);
	border-radius: 0 var(--lc-radius-sm) var(--lc-radius-sm) 0;
	background: var(--lc-accent-soft);
	font-size: 13px;
	line-height: 1.45;
	color: var(--lc-text);
}

.locpocket-item__body dl.variation:has(.locpocket-booking-date) dt,
.woocommerce-cart-form .cart_item .product-name dl.variation:has(.locpocket-booking-date) dt {
	display: inline;
	margin: 0 4px 0 0;
	font-weight: 700;
	color: var(--lc-text);
}

.locpocket-item__body dl.variation:has(.locpocket-booking-date) dd,
.woocommerce-cart-form .cart_item .product-name dl.variation:has(.locpocket-booking-date) dd {
	display: inline;
	margin: 0;
	color: var(--lc-text);
}

.locpocket-item__body dl.variation:has(.locpocket-booking-date) dd p,
.woocommerce-cart-form .cart_item .product-name dl.variation:has(.locpocket-booking-date) dd p {
	display: inline;
	margin: 0;
}

/* =====================================================================
 * CONVIVÊNCIA COM O "LOCPOCKET - CARRINHO ABANDONADO"
 *
 * Aquele plugin injeta o bloco de promoção + cupom em
 * `woocommerce_before_cart`, acima da tabela; a camada daqui trabalha a
 * tabela e a coluna de totais. São vizinhos, não concorrentes — o que
 * faltava era respiro entre os dois e a garantia de que nenhuma regra
 * nossa de largura o espreme.
 * ================================================================== */
body.locpocket-cart .locfit-cart-offer,
body.locpocket-cart [class^="locfit-cf"],
body.locpocket-cart [class*=" locfit-cf"] {
	max-width: none;
	margin-bottom: 20px;
}

/* =====================================================================
 * BOTÕES: O TEMA NÃO MANDA AQUI
 *
 * O WooDMart estiliza `button` dentro do formulário do checkout com
 * especificidade maior que a nossa, e o "Continuar" saía cinza-claro —
 * cara de botão desativado numa etapa que estava pronta para avançar. Foi
 * o mesmo defeito já visto nos botões do LOCPOCKET - Carrinho Abandonado,
 * e a solução é a mesma: cor da marca declarada com peso suficiente para
 * ganhar do tema, em todos os estados.
 *
 * O botão NUNCA é cinza. Ele não fica desabilitado esperando validação: se
 * faltar campo, o clique é que avisa qual falta. Um botão apagado numa
 * tela cheia de campos preenchidos faz o cliente procurar erro onde não
 * há.
 * ================================================================== */
.locpocket-checkout button.locpocket-btn--next,
.woocommerce-checkout button.locpocket-btn--next,
button.locpocket-btn--next,
.locpocket-mobile-bar button.locpocket-btn--next {
	background: var(--lc-brand) !important;
	background-image: none !important;
	border: 0 !important;
	color: #fff !important;
	opacity: 1 !important;
	box-shadow: none;
}

.locpocket-checkout button.locpocket-btn--next:hover,
.woocommerce-checkout button.locpocket-btn--next:hover,
button.locpocket-btn--next:hover,
.locpocket-checkout button.locpocket-btn--next:focus,
button.locpocket-btn--next:focus,
.locpocket-checkout button.locpocket-btn--next:active,
button.locpocket-btn--next:active {
	background: var(--lc-brand-dark) !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* Enquanto o pedido é enviado, o botão continua legível — só perde o
   convite ao clique. Cinza-morto, nunca. */
.locpocket-checkout button.locpocket-btn--next[disabled],
button.locpocket-btn--next[disabled] {
	background: var(--lc-brand) !important;
	color: #fff !important;
	opacity: .72 !important;
	cursor: progress;
}

/* "Voltar" é secundário, mas também não é fantasma. */
.locpocket-checkout button.locpocket-btn--back,
button.locpocket-btn--back {
	background: transparent !important;
	border: 1px solid var(--lc-border-strong) !important;
	color: var(--lc-text) !important;
	opacity: 1 !important;
}

.locpocket-checkout button.locpocket-btn--back:hover,
button.locpocket-btn--back:hover {
	background: var(--lc-surface) !important;
	color: var(--lc-text) !important;
}

/* O "Entrar" do painel de login vinha do mesmo lugar. */
.locpocket-checkout button.locpocket-btn--login,
button.locpocket-btn--login {
	background: var(--lc-brand) !important;
	color: #fff !important;
	opacity: 1 !important;
}

.locpocket-checkout button.locpocket-btn--login[disabled],
button.locpocket-btn--login[disabled] {
	opacity: .72 !important;
}

/* O botão de finalizar corre o mesmo risco: a regra base dele também não
   levava peso, e na etapa de pagamento o cinza apareceria de novo. */
.locpocket-checkout .woocommerce-checkout #place_order,
.locpocket-checkout .woocommerce-checkout button#place_order {
	background: var(--lc-brand) !important;
	background-image: none !important;
	border: 0 !important;
	color: #fff !important;
	opacity: 1 !important;
}

.locpocket-checkout .woocommerce-checkout #place_order:hover,
.locpocket-checkout .woocommerce-checkout #place_order:focus,
.locpocket-checkout .woocommerce-checkout #place_order:active {
	background: var(--lc-brand-dark) !important;
	color: #fff !important;
}

.locpocket-checkout .woocommerce-checkout #place_order[disabled] {
	opacity: .72 !important;
}

/* =====================================================================
 * ACEITE DOS TERMOS — modo "aceite pelo clique"
 *
 * A caixa de texto com os termos CONTINUA na tela: tirar o obstáculo não é
 * esconder o documento. O que sai é a caixinha de marcar, substituída pela
 * frase colada ao botão.
 * ================================================================== */
body.locpocket-terms-botao .woocommerce-terms-and-conditions-wrapper .form-row.validate-required,
body.locpocket-terms-botao .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text,
body.locpocket-terms-botao p.form-row.validate-required #terms,
body.locpocket-terms-botao .validate-required label.woocommerce-form__label-for-checkbox:has( #terms ) {
	display: none !important;
}

.locpocket-terms-aviso {
	margin: 0 0 12px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--lc-muted);
	text-align: center;
}

.locpocket-terms-aviso a {
	color: var(--lc-brand-dark);
	font-weight: 700;
	text-decoration: underline;
}

/* A caixa dos termos ganha respiro e deixa claro que dá para rolar. */
body.locpocket-terms-botao .woocommerce-terms-and-conditions {
	margin-bottom: 14px;
	border: 1px solid var(--lc-border);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-surface);
	padding: 12px 14px;
}

/* =====================================================================
 * PAINEL DE CONTA RECONHECIDA
 *
 * O "Continuar assim" nascia com `background: var(--lc-brand)` sem peso, e
 * o WooDMart repintava de cinza-claro — com a letra branca que travamos,
 * virava texto branco sobre cinza claro: ilegível. Mesma doença dos outros
 * botões, mesmo remédio.
 * ================================================================== */
.locpocket-checkout .locpocket-login button.locpocket-login__ok,
.locpocket-login button.locpocket-login__ok {
	background: var(--lc-brand) !important;
	background-image: none !important;
	border-color: var(--lc-brand) !important;
	color: #fff !important;
	opacity: 1 !important;
}

.locpocket-checkout .locpocket-login button.locpocket-login__ok:hover,
.locpocket-checkout .locpocket-login button.locpocket-login__ok:focus,
.locpocket-checkout .locpocket-login button.locpocket-login__ok:active,
.locpocket-login button.locpocket-login__ok:hover {
	background: var(--lc-brand-dark) !important;
	border-color: var(--lc-brand-dark) !important;
	color: #fff !important;
}

/* "Prefiro entrar na minha conta" é link, e link tem que parecer link —
   o tema o transformava num botão fantasma. */
.locpocket-checkout .locpocket-login button.locpocket-login__prefiro,
.locpocket-login button.locpocket-login__prefiro {
	background: none !important;
	border: 0 !important;
	color: var(--lc-brand-dark) !important;
	text-decoration: underline;
	min-height: 0 !important;
	padding: 0 !important;
}

/* A oferta de vincular só existe quando vincular é possível. Com CPF
   divergente ela some: mandar alguém vincular a conta de outra pessoa é
   exatamente o erro que o CPF existe para evitar. */
.locpocket-login__vincular {
	display: none;
}

.locpocket-login[data-linkable="1"] .locpocket-login__vincular {
	display: inline;
}

/* Três saídas na mesma linha, e no celular elas empilham em vez de
   espremer. A ordem é a da decisão: recuperar a senha, trocar de e-mail,
   ou seguir sem entrar. */
.locpocket-login__links {
	row-gap: 6px;
}

@media (max-width: 480px) {
	.locpocket-login__links {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* =====================================================================
 * CUPOM APLICADO — o ganho primeiro, o próximo passo em seguida
 *
 * Depois de aplicar o cupom, o cliente quer ver QUANTO ganhou. A tabela do
 * WooCommerce responde isso numa linha igual a todas as outras, e no
 * celular a página ainda o joga de volta para a lista de produtos. Este
 * cartão abre a coluna de totais com a resposta e emenda com o CEP, que é
 * o passo seguinte.
 * ================================================================== */
.locpocket-desconto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #bbe7cd;
	border-left: 4px solid var(--lc-brand);
	border-radius: var(--lc-radius-sm);
	background: var(--lc-brand-soft);
}

.locpocket-desconto__ok {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--lc-brand-dark);
}

.locpocket-desconto__ok::before {
	content: '✓ ';
}

/* O número é a informação: tamanho de manchete, não de rodapé. */
.locpocket-desconto__valor {
	font-size: 15px;
	color: var(--lc-text);
}

.locpocket-desconto__valor strong {
	font-size: 22px;
	font-weight: 800;
	color: var(--lc-brand-dark);
}

.locpocket-desconto__passo {
	margin: 8px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lc-accent);
	text-align: left;
	text-decoration: underline;
	cursor: pointer;
}

.locpocket-desconto__passo:hover,
.locpocket-desconto__passo:focus-visible {
	color: #c81348;
}

/* Chegou agora: uma piscada curta para o olho encontrar o cartão depois da
   rolagem. Respeita quem pediu menos movimento. */
@keyframes locpocketDescontoEntra {
	0%   { transform: scale( .98 ); box-shadow: 0 0 0 0 rgba( 31, 158, 77, .35 ); }
	60%  { transform: scale( 1 ); box-shadow: 0 0 0 10px rgba( 31, 158, 77, 0 ); }
	100% { transform: scale( 1 ); box-shadow: 0 0 0 0 rgba( 31, 158, 77, 0 ); }
}

.locpocket-desconto.is-novo {
	animation: locpocketDescontoEntra .9s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
	.locpocket-desconto.is-novo {
		animation: none;
	}
}

/* =====================================================================
 * CELULAR: UM CAMINHO SÓ
 *
 * "Atualizar", "Voltar à loja" e "Limpar" são três botões cinzas logo
 * abaixo dos produtos, no exato ponto em que o cliente decide se segue ou
 * desiste — e dois deles levam para fora. No celular eles saem: a
 * quantidade se atualiza sozinha (ver `autoAtualizarQuantidade` no JS), o
 * "x" de cada linha continua removendo item, e o menu do site continua
 * levando de volta à loja para quem quiser.
 * ================================================================== */
@media (max-width: 767px) {
	.locpocket-cart form.woocommerce-cart-form td.actions [name="update_cart"],
	.locpocket-cart form.woocommerce-cart-form .cart-actions [name="update_cart"],
	.locpocket-cart form.woocommerce-cart-form td.actions a.locpocket-continue,
	.locpocket-cart form.woocommerce-cart-form .cart-actions a.locpocket-continue,
	.locpocket-cart form.woocommerce-cart-form td.actions .wd-clear-cart,
	.locpocket-cart form.woocommerce-cart-form .cart-actions .wd-clear-cart,
	.locpocket-cart form.woocommerce-cart-form [name="empty_cart"],
	.locpocket-cart form.woocommerce-cart-form a.wc-block-cart__empty-cart__title {
		display: none !important;
	}

	/* Sem os botões, a faixa de ações não precisa de altura própria. */
	.locpocket-cart form.woocommerce-cart-form td.actions:empty,
	.locpocket-cart form.woocommerce-cart-form .cart-actions:empty {
		display: none;
	}

	/* O cartão do ganho encosta no bloco do cupom, que é de onde ele veio. */
	.locpocket-desconto {
		margin-top: 4px;
	}
}

/* =====================================================================
 * CARTÃO DO GANHO — versão sem botão concorrente
 *
 * Uma função só: mostrar o que a pessoa ganhou. O valor é a manchete, o
 * cupom é o crédito, e o próximo passo vem embaixo. Desfazer não mora
 * aqui: mora na linha do cupom dentro dos totais, onde a conta aparece.
 * ================================================================== */
.locpocket-desconto {
	position: relative;
	padding: 16px 18px 16px 20px;
	border: 1px solid #bbe7cd;
	border-left: 5px solid var(--lc-brand);
	background: linear-gradient( 135deg, #f0fbf4 0%, #e7f6ed 100% );
	box-shadow: 0 1px 2px rgba( 16, 40, 24, .06 );
}

.locpocket-desconto__ok {
	font-size: 12.5px;
	letter-spacing: .06em;
}

.locpocket-desconto__valor {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 2px;
	font-size: 14.5px;
	color: var(--lc-muted);
}

.locpocket-desconto__valor strong {
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.locpocket-desconto__passo {
	margin-top: 10px;
	font-size: 14.5px;
}

/* =====================================================================
 * A CONTA, NOS TOTAIS
 *
 * Subtotal → cupom → total. A linha do cupom é a única em vermelho-rosa
 * (é dinheiro saindo a favor do cliente) e leva o "remover" como palavra
 * discreta, não como botão.
 * ================================================================== */
.locpocket-cart-totals .locpocket-linha-cupom th,
.locpocket-cart-totals .locpocket-linha-cupom td {
	color: var(--lc-accent);
	font-weight: 700;
}

.locpocket-cart-totals .locpocket-linha-cupom td {
	white-space: normal;
}

.locpocket-cart-totals .locpocket-linha-cupom a.woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 10px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--lc-muted);
	text-decoration: underline;
	vertical-align: middle;
}

.locpocket-cart-totals .locpocket-linha-cupom a.woocommerce-remove-coupon:hover,
.locpocket-cart-totals .locpocket-linha-cupom a.woocommerce-remove-coupon:focus-visible {
	color: var(--lc-text);
}

/* =====================================================================
 * COM CUPOM APLICADO, NADA DE PEDIR CUPOM
 *
 * "Tenho um cupom" ao lado de um desconto que acabou de entrar faz a
 * pessoa achar que precisa aplicar de novo. Some — em qualquer tela. E
 * "Limpar" some no celular, onde ele fica colado no caminho de seguir.
 * ================================================================== */
body.locpocket-cart-com-cupom .locpocket-coupon-toggle,
body.locpocket-cart-com-cupom .woocommerce-cart-form .coupon {
	display: none !important;
}

/* =====================================================================
 * "LIMPAR ORÇAMENTO"
 *
 * Ele destrói trabalho do cliente — várias peças escolhidas, com data
 * marcada —, então não pode ter o mesmo peso visual do botão que leva
 * adiante. Mas sumir de vez também não serve: quem quer recomeçar fica
 * removendo item por item.
 *
 * A solução é a hierarquia: vira um link pequeno e cinza, centralizado,
 * logo abaixo dos produtos. Quem procura acha; quem não procura não
 * esbarra.
 * ================================================================== */
.locpocket-cart .locpocket-clear {
	display: block !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 14px auto 4px !important;
	padding: 6px 10px !important;
	border: 0 !important;
	border-radius: var(--lc-radius-sm) !important;
	background: none !important;
	box-shadow: none !important;
	font-size: 12.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	letter-spacing: 0 !important;
	text-align: center;
	text-transform: none !important;
	text-decoration: underline;
	color: var(--lc-muted) !important;
	float: none !important;
}

.locpocket-cart .locpocket-clear:hover,
.locpocket-cart .locpocket-clear:focus-visible {
	background: none !important;
	color: var(--lc-text) !important;
}

@media (max-width: 767px) {
	.locpocket-cart .locpocket-coupon-toggle {
		display: none !important;
	}
}

/* Ícone vindo de arquivo (o que o próprio gateway instalou). Altura casada
   com os ícones nativos das outras linhas, sem esticar a imagem. */
img.locpocket-gateway-img {
	display: inline-block;
	max-height: 22px;
	width: auto;
	margin-left: 8px;
	vertical-align: middle;
}