/* Mini cart "Pix expresso" — visual "Atelie" (v1.5.2, 20/08/2026).
   Paleta da marca no drawer: azul #00AAFF (progresso/adicionar), lilas #DCBDF7
   (destaques), verde #16A34A reservado ao dinheiro/Pix. Sem media query: o
   painel offcanvas tem a mesma largura estreita (~500px) no desktop. */

#woo-cart-panel .ct-panel-content-inner {
	display: flex; flex-direction: column; min-height: 100%; padding: 0 14px;
}

/* Cabecalho do drawer. O pai da `padding-top: 20px` (30px em telas maiores) e
   `padding-bottom: 0`, entao sobrava uma faixa branca em cima e o titulo
   encostava na faixa de frete. Alem disso o padding-inline do pai e
   `--panel-padding` (25px) contra os 14px do conteudo, e o titulo ficava
   desalinhado da coluna das thumbs. Aqui os dois viram simetricos e alinhados. */
#woo-cart-panel .ct-panel-actions {
	padding: 11px 14px 9px;
}
#woo-cart-panel .ct-panel-actions .ct-panel-heading {
	font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: #212529;
}
/* Contador de itens: chip lilas ao lado do titulo. O <span> e criado e
   atualizado pelo pcc-minicart.js a partir do .pcc-mc-count-src que o template
   imprime dentro do fragment (o heading fica fora dos cart fragments). */
#woo-cart-panel .pcc-mc-count {
	display: inline-grid; place-items: center; min-width: 20px; height: 20px;
	padding: 0 6px; margin-left: 8px; border-radius: 999px;
	background: #F1E5FC; color: #7C3AED; font-size: 11px; font-weight: 700;
	vertical-align: 2px;
}

/* Faixa de frete: trilha de cristal. Fundo degrade claro azul->lilas, barra de
   progresso em gradiente da marca e um losango facetado marcando a ponta.
   flex:none: a strip e filha da coluna flex do painel e o flex-shrink padrao
   a espremia conforme a lista de itens (ou a gavetinha aberta) crescia. */
#woo-cart-panel .pcc-mc-strip {
	position: sticky; top: 0; z-index: 6; flex: none; margin: 0 -14px;
	padding: 0 14px 8px; background: #fff;
}
#woo-cart-panel .pcc-mc-strip:not(:has(.ct-shipping-progress-mini-cart)) { display: none; }
/* A caixa arredondada e o wrapper do Companion, nao a strip: a strip fica
   branca e full-bleed (e o fundo do sticky quando a lista rola por baixo) e o
   cartao degrade flutua dentro dela. position:relative ancora a barra. */
#woo-cart-panel .pcc-mc-strip .ct-shipping-progress-mini-cart {
	position: relative; margin: 0; padding: 8px 12px 15px;
	background: linear-gradient(120deg, #F2FAFF, #F9F3FE);
	border-radius: 12px; overflow: hidden;
}
#woo-cart-panel .pcc-mc-strip :is(.ct-message, .ct-message p) { margin: 0; font-size: 12px; line-height: 1.45; text-align: center; color: #40484F; }
#woo-cart-panel .pcc-mc-strip .ct-message .woocommerce-Price-amount { color: #0090DB; font-weight: 700; }
#woo-cart-panel .pcc-mc-strip .ct-progress-bar {
	position: absolute; inset-inline: 12px; bottom: 6px; height: 4px; margin: 0;
	border-radius: 999px; background: #E3E9EE; overflow: visible;
}
#woo-cart-panel .pcc-mc-strip .ct-progress-bar span {
	display: block; position: relative; height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #00AAFF, #7CC7F5, #DCBDF7);
	transition: width .4s ease; overflow: visible;
}
/* O losango (cristal) na ponta do progresso: ::after do proprio span
   preenchido, entao acompanha o width inline que o Companion Pro escreve —
   sem JS de posicionamento. Estatico de proposito (decisao do dono, 20/08):
   sem pulso nem shine no frete conquistado. */
#woo-cart-panel .pcc-mc-strip .ct-progress-bar span::after {
	content: ""; position: absolute; top: 50%; right: -4px;
	width: 9px; height: 9px; margin-top: -4.5px; border-radius: 2px;
	background: linear-gradient(135deg, #9ED9FF, #C9A0F0);
	transform: rotate(45deg);
	box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(124, 58, 237, .35);
}

/* Itens em cartao #F9FAFB (sem linhas de separacao): a lista respira e casa
   com os cards dos sugeridos.
   width:100%: stretch do flex encolhia o <ul> e cortava o preco.
   margin:0 mata o `#woo-cart-panel ul { margin: 0 calc(var(--panel-padding,35px)*-1) }`
   do pai (--panel-padding = 25px aqui), que sangrava a lista 25px para fora do
   .ct-panel-content-inner e cortava a thumb na esquerda. Nossa regra e (1,1,0)
   contra (1,0,1) do pai, entao ganha por especificidade — sem !important. */
#woo-cart-panel .woocommerce-mini-cart {
	width: 100%; margin: 0; padding: 10px 0 2px;
	/* o tema limita a lista a 40vh com scroll proprio; a scrollbar padrao do
	   Windows atropelava a borda dos cartoes */
	scrollbar-width: thin; scrollbar-color: #D8DDE2 transparent;
}
/* border-bottom:0 mata o `li:not(:last-child) { border-bottom: 1px dashed }`
   do tema — os cartoes ja separam os itens. */
#woo-cart-panel .woocommerce-mini-cart-item {
	display: grid; grid-template-columns: 60px 1fr; column-gap: 11px;
	position: relative; margin: 0 0 8px; padding: 10px;
	background: #F9FAFB; border-radius: 14px; border-bottom: 0;
}
#woo-cart-panel .woocommerce-mini-cart-item > .ct-media-container { width: 60px; border-radius: 8px; overflow: hidden; align-self: start; }
#woo-cart-panel .remove_from_cart_button {
	position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
	display: grid; place-items: center; color: #C2C8CF;
}
#woo-cart-panel .remove_from_cart_button:hover { color: #e11d48; }
#woo-cart-panel .product-data { display: flex; flex-direction: column; gap: 1px; }
#woo-cart-panel .product-data .product-title {
	font-size: 12.5px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; margin: 0; padding-right: 26px;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#woo-cart-panel .product-data dl.variation { display: block; margin: 0; font-size: 11px; line-height: 1.35; color: #8b939d; }
#woo-cart-panel .product-data dl.variation dt { display: none; }
#woo-cart-panel .product-data dl.variation :is(dd, dd p) { display: inline; margin: 0; }
#woo-cart-panel .product-data dl.variation dd:not(:last-of-type) p::after { content: " \00b7 "; color: #c2c8cf; }
#woo-cart-panel .product-data .ct-product-actions {
	display: flex; align-items: center; justify-content: space-between; margin-top: 3px;
}
#woo-cart-panel .ct-product-actions .ct-product-multiply-symbol { display: none; }
#woo-cart-panel .ct-product-actions > .woocommerce-Price-amount { font-size: 13.5px; font-weight: 700; }
/* fundo branco: a pilula fica sobre o cartao cinza do item */
#woo-cart-panel .pcc-stepper {
	display: inline-flex; align-items: center; border: 1px solid #e3e6ea; border-radius: 999px; height: 26px;
	background: #fff;
}
/* O tema da `div.quantity { width: var(--quantity-width, 70px); height: 55px }`.
   Dentro da pilula isso empurrava o stepper para 128px e jogava o numero para
   a direita; com auto/auto o wrapper encolhe no input e o stepper fica ~84px. */
#woo-cart-panel .pcc-stepper .quantity {
	width: auto; height: auto; display: flex; align-items: center;
}
#woo-cart-panel .pcc-stepper .pcc-stepper-btn {
	width: 28px; height: 24px; border: 0; background: none; color: #4a5159; font-size: 15px; line-height: 1; cursor: pointer;
}
#woo-cart-panel .pcc-stepper input.qty {
	width: 26px; height: 24px; padding: 0; border: 0; background: none; text-align: center;
	font-size: 12.5px; font-weight: 600; -moz-appearance: textfield; appearance: textfield;
}
.pcc-stepper input.qty::-webkit-outer-spin-button,
.pcc-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* border-top:0: o tema poe um tracejado acima dos sugeridos (e do rodape);
   os unicos separadores do drawer sao os solidos da faixa e do rodape. */
#woo-cart-panel .ct-suggested-products--mini-cart { width: 100%; margin: 0; padding: 10px 0 0; border-top: 0; }
#woo-cart-panel .ct-suggested-products--mini-cart:not(:has(.flexy-item)) { display: none; }
/* Titulo vira chip lilas (inline-flex encolhe a pilula no texto). */
#woo-cart-panel .ct-suggested-products--mini-cart .ct-module-title {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
	background: #F1E5FC; color: #7C3AED; font-weight: 600;
	padding: 3px 11px; border-radius: 999px; margin-bottom: 9px;
}
#woo-cart-panel .ct-suggested-products--mini-cart :is(.flexy, .flexy-view) { overflow: visible; }
/* nowrap: >= 690px o Blocksy troca a fileira por wrap e virava grade de 2 linhas */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-items {
	display: flex !important; gap: 9px; width: auto !important; transform: none !important;
	flex-wrap: nowrap !important; align-items: start;
	overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: none;
}
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-items::-webkit-scrollbar { display: none; }
/* Card nasce em linha; na coluna de 124px vira vertical. Como a fileira
   virou scroller, order/transform do flexy so atrapalham.
   height:auto mata o `[data-flexy=""]:not([data-flexy-moving]) .flexy-items > *:not(.flexy-item-is-visible) { height: 1px }`
   do tema: num scroller CSS o flexy nunca marca .flexy-item-is-visible nos
   cards fora da viewport, entao eles ficavam com 1px e a thumb desabava para 0.
   Era isso que o autoplay mascarava, "consertando" os cards a cada ciclo — e
   por isso as imagens piscavam. */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-item {
	flex: 0 0 124px !important; width: 124px !important; flex-direction: column; gap: 5px;
	order: 0 !important; transform: none !important; min-height: 0 !important; height: auto;
	scroll-snap-align: start;
	border: 1px solid #EFE3FA; border-radius: 12px; padding: 8px;
}
/* :not(.add_to_cart_button): com o seletor de tipo `a` esta regra fica (1,3,1)
   e venceria o width/height/border-radius do quick-add circular la embaixo. */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-item :is(a:not(.add_to_cart_button), img, section) { width: 100%; height: auto; border-radius: 8px; }
/* ratio fixo: sem ele a thumb desaba p/ 37px no desktop */
#woo-cart-panel .ct-suggested-products--mini-cart .ct-media-container { aspect-ratio: 1; }
#woo-cart-panel .ct-suggested-products--mini-cart :is(.ct-product-title, .price, .add_to_cart_button) { font-size: 11px; line-height: 1.3; }
#woo-cart-panel .ct-suggested-products--mini-cart .ct-slider-arrows { display: none !important; }
/* Titulo em cima ocupando a linha inteira; preco e quick-add dividem a de
   baixo. Sem o grid o botao circular deixava um buraco ao lado do preco. */
#woo-cart-panel .ct-suggested-products--mini-cart .flexy-item section {
	display: grid; grid-template-columns: 1fr 32px; gap: 3px 6px; align-items: center;
}
#woo-cart-panel .ct-suggested-products--mini-cart .ct-product-title { grid-column: 1 / -1; }
#woo-cart-panel .ct-suggested-products--mini-cart .price { grid-column: 1; }
/* Quick-add circular AZUL (adicionar = navegacao; verde fica so no dinheiro).
   !important: o background dos .button vem do CSS dinamico do Customizer.
   O texto "Add to cart" continua no DOM para o leitor de tela (font-size:0
   nao o remove da arvore de acessibilidade); o "+" e o "check" do estado
   .added sao desenhados, nao escritos.
   POR QUE DESENHADO: com `display:grid` o texto do botao vira um item anonimo
   da grade — mesmo com font-size:0 ele ocupa uma linha (medido: grid-template-rows
   "7px 25px") e empurrava o "+" 3-4px para baixo do centro. Duas barras
   posicionadas em absoluto ficam no centro geometrico independentemente da
   fonte, do line-height e de quantos itens o botao tenha dentro. */
#woo-cart-panel .ct-suggested-products--mini-cart .add_to_cart_button {
	position: relative; grid-column: 2; width: 32px; height: 32px; min-height: 0; padding: 0;
	border-radius: 50%; font-size: 0; display: block;
	background-color: #00AAFF !important;
	transition: background-color .18s ease, transform .18s ease;
}
#woo-cart-panel .ct-suggested-products--mini-cart .add_to_cart_button:hover { background-color: #0090DB !important; }
/* SO ::after. O ::before do botao ja e do tema — e o brilho de hover
   (`.button:before { z-index:-1; opacity:0; filter: blur(11px) }`), que fica
   invisivel ate o :hover. Uma barra desenhada la nasce com opacity 0 e some.
   Dai as duas barras do "+" virarem dois gradientes dentro do mesmo ::after.
   :not(.loading) preserva o spinner que o tema poe no ::after durante o AJAX. */
#woo-cart-panel .ct-suggested-products--mini-cart .add_to_cart_button:not(.loading)::after {
	content: ""; position: absolute; top: 50%; left: 50%;
	width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
	background:
		linear-gradient(currentColor, currentColor) center / 13px 2px no-repeat,
		linear-gradient(currentColor, currentColor) center / 2px 13px no-repeat;
}
#woo-cart-panel .ct-suggested-products--mini-cart .add_to_cart_button.added {
	background-color: #16A34A !important; transform: scale(1.05);
}
/* Check = um "L" de bordas girado 45deg. Desenhado pelo mesmo motivo do "+". */
#woo-cart-panel .ct-suggested-products--mini-cart .add_to_cart_button.added:not(.loading)::after {
	width: 6px; height: 11px; margin: -7px 0 0 -3px;
	background: none; border: solid currentColor; border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Preco riscado: `text-decoration: line-through` posiciona o traco pelas
   metricas da fonte (~0,28em acima da baseline), que numa fonte de x-height
   alta cai embaixo dos digitos em vez de no meio deles. O traco proprio fica
   no centro otico da caixa do <del>, que e o que se enxerga como "meio". */
#woo-cart-panel .price del {
	position: relative; text-decoration: none;
}
#woo-cart-panel .price del::after {
	content: ""; position: absolute; inset-inline: -1px; top: 50%;
	height: 1px; background: currentColor; transform: translateY(-.5px);
}
/* O "Ver carrinho" que o Woo injeta apos o add quebraria a grade de 2 colunas. */
#woo-cart-panel .ct-suggested-products--mini-cart .added_to_cart { display: none; }

/* Trust strip: ocupa o vazio entre o conteudo e o rodape (margin-top:auto
   empurra ela — e o rodape junto — para o pe do painel). */
#woo-cart-panel .pcc-mc-trust {
	margin: auto 0 0; padding: 14px 4px 12px; text-align: center;
	font-size: 11px; line-height: 1.6; color: #A6ADB5;
}
#woo-cart-panel .pcc-mc-trust span { margin: 0 7px; white-space: nowrap; }

#woo-cart-panel .pcc-mc-footer {
	position: sticky; bottom: 0; z-index: 6; flex: none; margin: 0 -14px;
	padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
	background: #fff; border-top: 1px solid #f0f0f0;
}
#woo-cart-panel .pcc-mc-summary summary {
	list-style: none; cursor: pointer; display: flex; align-items: center;
	gap: 8px; font-size: 12.5px; color: #5a626b;
}
#woo-cart-panel .pcc-mc-summary summary::-webkit-details-marker { display: none; }
#woo-cart-panel .pcc-mc-summary summary strong { margin-left: auto; font-size: 13.5px; color: #212529; }
#woo-cart-panel .pcc-mc-chev {
	width: 8px; height: 8px; border-right: 2px solid #8b939d; border-bottom: 2px solid #8b939d; transform: rotate(45deg); transition: transform .2s ease;
}
#woo-cart-panel .pcc-mc-summary[open] .pcc-mc-chev { transform: rotate(225deg); }
#woo-cart-panel .pcc-mc-summary-body .woocommerce-mini-cart__total { margin: 8px 0 0; padding-top: 0; border-top: 0; font-size: 13px; }
/* Guarda: o hook do snippet 6607 e removido no functions.php, mas se o WPCode
   mudar o timing de execucao a caixa duplicada continua invisivel. */
#woo-cart-panel .pcc-mc-summary-body .bwp-price-details-extended { display: none; }
#woo-cart-panel .woocommerce-mini-cart__buttons { display: block; margin: 10px 0 0; padding-top: 0; border-top: 0; }
/* Rodape em tres camadas: a caixa do Pix (informacao), o botao (acao) e a
   alternativa parcelada (informacao de apoio). A caixa reencena a pix box do
   snippet 6607 (que sai da gavetinha): fundo verde-claro, marca do Pix, preco
   em destaque e o selo pill "- R$ X" — compacto para caber numa linha so.
   Todos os <span>: o widget do Woo ja envolve o hook num <p>, e um <p>
   aninhado seria fechado pelo parser antes do CTA. */
#woo-cart-panel .pcc-mc-pixline {
	display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px;
	margin-bottom: 9px; padding: 8px 11px; border-radius: 12px;
	background: #f0fdf4; font-size: 12.5px; line-height: 1.3; color: #15803d;
}
#woo-cart-panel .pcc-mc-cta-icon { display: grid; place-items: center; width: 18px; height: 18px; }
#woo-cart-panel .pcc-mc-cta-icon svg { display: block; width: 17px; height: 17px; fill: currentColor; }
#woo-cart-panel .pcc-mc-pixprice { font-size: 15px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
/* Selo da economia no formato pill da pix box; margin-left:auto encosta na
   borda direita da caixa, na mesma coluna do subtotal do <summary> acima.
   Verde unico #16A34A em selo, CTA e estado .added dos sugeridos. */
#woo-cart-panel .pcc-mc-save {
	margin-inline-start: auto; padding: 3px 9px; border-radius: 999px;
	background: #16A34A; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* !important: .checkout tem CSS dinamico do tema, mais forte. */
#woo-cart-panel .pcc-mc-cta {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; min-height: 52px; padding: 9px 14px; line-height: 1.2;
	font-size: 15.5px; font-weight: 700; letter-spacing: -.01em;
	background: #16A34A !important; color: #fff; border-radius: 12px;
}
#woo-cart-panel .pcc-mc-cta:hover { background: #107A38 !important; }
#woo-cart-panel .pcc-mc-cta svg { flex: none; width: 16px; height: 16px; fill: currentColor; }
/* Parcelamento e "Ver carrinho" dividem a mesma linha de apoio. */
#woo-cart-panel .pcc-mc-cta-note {
	display: block; margin-top: 7px; font-size: 11.5px; line-height: 1.35; color: #5a626b; text-align: center;
}
#woo-cart-panel .pcc-mc-cta-note a {
	color: #8b939d; text-decoration: underline; text-underline-offset: 3px;
}
#woo-cart-panel :is(.pcc-mc-pixline, .pcc-mc-cta-note) .woocommerce-Price-amount { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	#woo-cart-panel :is(.pcc-mc-strip .ct-progress-bar span, .pcc-mc-chev,
	.ct-suggested-products--mini-cart .add_to_cart_button) { transition: none; transform: none; }
}