.dcwb-order-bump {
	margin: 0 0 16px;
}

.dcwb-order-bump-card {
	background: #FDF2F8;
	border: 1px solid #F4A6C6;
	border-radius: 14px;
	padding: 16px;
}

.dcwb-order-bump-eyebrow {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	color: #9D174D;
}

.dcwb-order-bump-body {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.dcwb-order-bump-thumb img {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid #F4A6C6;
	background: #fff;
}

.dcwb-order-bump-copy {
	flex: 1 1 auto;
	min-width: 0;
}

.dcwb-order-bump-title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: #111827;
}

.dcwb-order-bump-desc {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.4;
	color: #4B5563;
}

.dcwb-order-bump-price {
	margin: 0;
	font-size: 17px;
	font-weight: 800;
	color: #9D174D;
}

/* Bug real encontrado 2026-10-21: esta regra era ".dcwb-order-bump-price span"
   (sem classe), o que também batia no <span class="woocommerce-Price-amount">
   que o próprio wc_price() gera -- o preço inteiro ficava pequeno, cinza e
   quebrando linha ("R$" numa linha, "39,90" na linha debaixo), reportado ao
   vivo como "o valor está muito pequeno apagado". Classe própria aqui garante
   que só a legenda "à vista no Pix/Boleto" é afetada, nunca o preço. */
.dcwb-order-bump-price-note {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: #6B7280;
}

.dcwb-order-bump-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px;
	background: #FCE7F0;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #9D174D;
	cursor: pointer;
}

.dcwb-order-bump-toggle input {
	width: 18px;
	height: 18px;
	accent-color: #DB2777;
	flex: 0 0 auto;
}

.dcwb-order-bump-error {
	margin: 8px 0 0;
	font-size: 12px;
	color: #B91C1C;
}

@media (max-width: 420px) {
	.dcwb-order-bump-thumb img {
		width: 52px;
		height: 52px;
	}

	.dcwb-order-bump-title {
		font-size: 14px;
	}
}

/* "Leve junto" -- carrossel com os 4 produtos fixos (Dcwb_OB_CrossSell),
   no carrinho e no carrinho lateral. Mesma paleta rosa/pink já usada pelo
   card da Sacola Surpresa acima, pra manter o plugin inteiro com uma cara
   só. Scroll horizontal NATIVO (overflow-x + scroll-snap), sem lib de
   carrossel nova -- mesmo princípio de "prefira o nativo" já seguido no
   resto do site. */
.dcwb-ob-crosssell {
	margin: 16px 0;
	/* Causa real do "não dá pra rolar pro lado" (2026-10-21): o <li> do
	   carrinho lateral é display:flex nativo do Woodmart
	   (".woocommerce-mini-cart>li"), o que faz este div virar um ITEM
	   flex -- e item flex, por padrão, tem min-width:auto, ou seja NUNCA
	   encolhe abaixo da largura do próprio conteúdo. Com os 4 cards
	   somando ~620px, o <li> inteiro esticava pra caber tudo isso, em vez
	   de ficar contido na largura do painel com o scroll interno do
	   carrossel fazendo o trabalho -- o touch-action:pan-x sozinho (fix
	   anterior) não resolvia porque o problema nunca foi o gesto de
	   toque, era não existir um scroll de verdade contido ali. */
	min-width: 0;
	max-width: 100%;
}

.dcwb-ob-crosssell-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 8px;
}

/* Redesenho visual 2026-10-30 -- virou "pastilha" (fundo rosa bem claro +
   texto rosa) em vez de texto colorido solto, mesmo princípio de badge já
   usado no grid principal (etiqueta pequena com intenção, não uma cor
   gritando sozinha no meio da página). */
.dcwb-ob-crosssell-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(219, 39, 119, 0.08);
	font-size: 12.5px;
	font-weight: 700;
	color: #DB2777;
}

/* Redesenho 2026-10-30 (reportado ao vivo "não funciona" + "feio" +
   "ruim no mobile") -- as setas brancas com borda de 1px eram pouco
   contrastantes (quase somem num card branco em foto comprimida) e, pior,
   não tinham utilidade nenhuma em touch: no celular o gesto nativo de
   arrastar já rola o carrossel sozinho, então um botão de seta ali só
   competia por espaço/toque com o próprio gesto de swipe sem resolver
   nada. Escondidas por padrão; só reaparecem em dispositivo com mouse de
   verdade (hover:hover + pointer:fine), onde são a ÚNICA forma de rolar
   (sem gesto de arrastar). Preenchimento sólido rosa (não mais branco+
   borda fina) pra nunca mais ficar ambíguo se é um botão de verdade. */
.dcwb-ob-crosssell-nav {
	display: none;
	gap: 6px;
	flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
	.dcwb-ob-crosssell-nav {
		display: flex;
	}
}

/* JS (dcwb_ob_update_carousel_state) acrescenta esta classe quando o
   carrossel não tem overflow nenhum pra rolar (ex: só sobraram 2 produtos
   elegíveis e eles cabem inteiros no painel) -- setas visíveis que não
   fazem nada eram exatamente o "parece quebrado" relatado. */
.dcwb-ob-crosssell-nav.dcwb-ob-crosssell-nav--hidden {
	display: none;
}

.dcwb-ob-crosssell-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #DB2777;
	color: #fff;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(219, 39, 119, 0.35);
}

.dcwb-ob-crosssell-arrow:hover {
	background: #9D174D;
}

.dcwb-ob-crosssell-arrow:disabled {
	background: #F3D5E4;
	box-shadow: none;
	cursor: default;
}

/* Barra de progresso do scroll -- substitui a seta como indício de "tem
   mais produto pra ver" pra quem está no celular (onde a seta nem
   aparece). JS atualiza a largura do preenchimento conforme a posição do
   scroll; sem JS/antes de carregar, fica só o trilho parado em 0, o que
   ainda é inofensivo (não passa a impressão de quebrado, só neutro). */
.dcwb-ob-crosssell-progress {
	height: 3px;
	margin: 8px 2px 2px;
	border-radius: 999px;
	background: #F9D4E4;
	overflow: hidden;
}

.dcwb-ob-crosssell-progress-fill {
	height: 100%;
	width: 33%;
	border-radius: 999px;
	background: #DB2777;
	transition: width 0.15s ease, transform 0.15s ease;
	transform: translateX(0);
}

.dcwb-ob-crosssell-carousel {
	display: flex;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	/* esconde a barra de scroll sem esconder a rolagem em si -- é um
	   carrossel por toque, não uma lista com scrollbar visível. */
	scrollbar-width: none;
	/* Sem isto o arrasto lateral não funcionava de verdade no celular
	   (reportado ao vivo 2026-10-21) -- o painel do carrinho lateral
	   (.wd-scroll-content, do próprio Woodmart) é vertical e tem
	   overflow-x:hidden nativo; mesmo este elemento tendo seu próprio
	   scroll horizontal, o navegador (principalmente Safari/iOS) pode não
	   reconhecer o gesto de arrastar na horizontal dentro de um painel que
	   já capturou o gesto como rolagem vertical, a não ser que isto seja
	   dito explicitamente. Mesma causa raiz já documentada antes neste
	   projeto pro carrinho lateral (ver comentários em
	   dcwb-gift-with-purchase sobre ".wd-scroll-content overflow-x:hidden").
	*/
	touch-action: pan-x;
}

.dcwb-ob-crosssell-carousel::-webkit-scrollbar {
	display: none;
}

/* Redesenho visual 2026-10-30 (reportado ao vivo: card, layout, cores e
   tipografia -- tudo precisava ser revisto, não só um ajuste pontual).
   Antes o card tinha borda rosa + sombra rosa + rótulo rosa + preço rosa +
   botão rosa -- tudo competindo com a mesma cor, sem hierarquia nenhuma.
   Base nova segue o mesmo princípio já aprovado no card "Shopee" do grid
   principal (product-card-shopee.css): fundo branco neutro, cantos bem
   arredondados, sombra discreta de apoio em vez de brilho colorido, e o
   rosa reservado só pro que precisa chamar atenção de verdade (preço e
   botão) -- nome do produto e legendas ficam em cinza/neutro.*/
.dcwb-ob-crosssell-card {
	flex: 0 0 auto;
	scroll-snap-align: start;
	width: 150px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #F1F2F4;
	border-radius: 18px;
	padding: 14px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 16px rgba(17, 24, 39, 0.05);
}

.dcwb-ob-crosssell-thumb {
	display: block;
	margin-bottom: 10px;
	border-radius: 12px;
	overflow: hidden;
	background: #F8FAFC;
}

.dcwb-ob-crosssell-thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.dcwb-ob-crosssell-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #111827;
	text-decoration: none;
	line-height: 1.35;
	min-height: 2.7em;
}

.dcwb-ob-crosssell-price {
	margin-bottom: 12px;
	font-size: 15px;
	font-weight: 700;
	color: #DB2777;
	line-height: 1.3;
}

.dcwb-ob-crosssell-price del {
	display: block;
	font-size: 11px;
	font-weight: 500;
	color: #9CA3AF;
}

.dcwb-ob-crosssell-price ins {
	text-decoration: none;
}

/* "à vista" -- texto que o plugin de parcelamento injeta sozinho logo
   depois do preço (woo-custom-installments-fork, via get_price_html());
   sem isso herdava o mesmo tamanho/peso do valor e grudava nele, uma das
   coisas que deixava o card "feio". Legenda própria, discreta, embaixo. */
.dcwb-ob-crosssell-price .woo-custom-installments-text-after-price {
	display: block;
	margin-top: 2px;
	font-size: 10px;
	font-weight: 600;
	color: #9CA3AF;
	text-transform: none;
}

a.dcwb-ob-crosssell-buy {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	/* Alvo de toque mínimo confortável (~36-40px) -- antes ficava em torno
	   de 24px de altura total, pequeno demais pra tocar com segurança num
	   carrossel que já exige precisão (reportado como parte do "ruim de
	   mexer no mobile" 2026-10-30). */
	min-height: 38px !important;
	height: auto !important;
	margin-top: auto;
	padding: 10px 10px !important;
	background: #DB2777 !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	text-transform: none !important;
	border-radius: 999px !important;
	/* sombra mais contida que a versão anterior (0 4px 10px bem espalhada
	   "brilhava" demais) -- CTA ainda com um pouco de elevação, sem virar
	   neon. */
	box-shadow: 0 2px 6px rgba(219, 39, 119, 0.22);
	white-space: nowrap;
}

a.dcwb-ob-crosssell-buy:hover {
	background: #9D174D !important;
	color: #fff !important;
}

a.dcwb-ob-crosssell-buy.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Mini-carrinho: cards um pouco menores, sem competir com a lista de
   produtos de verdade (mesmo princípio já usado pro resto do plugin de
   brindes no carrinho lateral). Linha divisória discreta no topo -- antes
   a seção só flutuava entre a lista de produtos e o rodapé fixo sem
   nenhuma separação visual, uma das coisas que deixava o "layout geral"
   confuso (relatado 2026-10-30). */
.dcwb-ob-crosssell--compact {
	margin: 4px 0 8px;
	padding-top: 14px;
	border-top: 1px solid #F3F4F6;
}

.dcwb-ob-crosssell--compact .dcwb-ob-crosssell-card {
	width: 128px;
	padding: 10px;
}

.dcwb-ob-crosssell--compact .dcwb-ob-crosssell-name {
	font-size: 11.5px;
	min-height: 2.5em;
}

.dcwb-ob-crosssell--compact .dcwb-ob-crosssell-price {
	font-size: 13px;
}

.dcwb-ob-crosssell--compact a.dcwb-ob-crosssell-buy {
	min-height: 34px !important;
	padding: 8px 8px !important;
	font-size: 10.5px !important;
}

/* Card um pouco mais largo no mobile (painel do carrinho lateral tem
   espaço de sobra em telas de celular) -- facilita tocar certo no botão
   e dá mais respiro pro título de 2 linhas, parte do pedido de "melhorar
   o mobile" 2026-10-30. */
@media (max-width: 480px) {
	.dcwb-ob-crosssell--compact .dcwb-ob-crosssell-card {
		width: 136px;
	}
}