/* Card de produto — compartilhado pela Grade e o Carrossel de Produtos.
   Cores/tamanhos controláveis pelos widgets Elementor; aqui só a estrutura.
   Resets com !important nos estados de interação (fundo/sombra/contorno) —
   sem isso o tema/Elementor costuma vazar a cor de destaque padrão deles em
   cima dos nossos botões. */

.loja-cipo-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.loja-cipo-product-image {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 0;
	background: #f2f2f2;
	aspect-ratio: 311 / 373;
}

.loja-cipo-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.loja-cipo-product-image-hover {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.loja-cipo-product-image:hover .loja-cipo-product-image-hover {
	opacity: 1;
}

.loja-cipo-product-mask {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: var( --lc-mask-color, transparent );
	opacity: var( --lc-mask-opacity, 0 );
	mix-blend-mode: var( --lc-mask-blend, multiply );
}

.loja-cipo-product-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	background: #c1440e;
	color: #ffffff;
	line-height: 1.4;
}

.loja-cipo-product-wishlist,
.loja-cipo-product-wishlist:hover,
.loja-cipo-product-wishlist:focus,
.loja-cipo-product-wishlist:active {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	box-sizing: border-box;
	width: var( --lc-wishlist-size, 36px );
	height: var( --lc-wishlist-size, 36px );
	padding: 0 !important;
	margin: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --lc-wishlist-bg-color, rgba( 255, 255, 255, 0.85 ) ) !important;
	box-shadow: none !important;
	outline: none !important;
	border: none;
	color: var( --lc-wishlist-color, #333333 );
	font-size: 0;
	line-height: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.loja-cipo-product-wishlist-icon {
	width: var( --lc-wishlist-icon-size, 18px );
	height: var( --lc-wishlist-icon-size, 18px );
}

.loja-cipo-product-wishlist:hover {
	transform: scale( 1.08 );
}

.loja-cipo-product-wishlist.is-active {
	color: var( --lc-wishlist-active-color, #c1440e );
}

.loja-cipo-product-wishlist.is-active .loja-cipo-product-wishlist-icon {
	fill: currentColor;
}

/* Tooltip do coração — CSS puro (lê o texto de data-tooltip via attr()),
   sem JS: é só um rótulo estático no hover/foco, pra quem não conhece o
   ícone entender que é a wishlist. wishlist.js troca o data-tooltip entre
   "Wishlist"/"Remover Wishlist" a cada clique (ver setActive()). Centralizado
   embaixo do botão (não colado na borda), quadrado — sem arredondamento,
   igual ao resto da identidade visual do site. Só aparece em
   :hover/:focus-visible — em touch (sem hover) o aria-label ainda cobre
   leitor de tela, mas não tem popup visual equivalente. */
.loja-cipo-product-wishlist::after {
	content: attr( data-tooltip );
	position: absolute;
	top: calc( 100% + 12px );
	left: 50%;
	background: #18181b;
	color: #ffffff !important;
	/* O botão em si tem font-size/line-height: 0 (de propósito, pra colapsar
	   o espaço extra do SVG do coração) — e pseudo-elemento herda isso do
	   elemento "pai". Sem forçar line-height aqui, o texto do tooltip
	   ficava com a caixa de linha zerada e "vazava" pra cima/baixo do
	   padding, dando a impressão de padding vertical inexistente (era
	   exatamente isso, não CSS sendo sobrescrito por outro arquivo). */
	font-size: 12px !important;
	line-height: 1.5 !important;
	font-weight: 600 !important;
	white-space: nowrap;
	padding: 4px 10px !important;
	box-sizing: content-box !important;
	border-radius: 6px;
	opacity: 0;
	visibility: hidden;
	transform: translate( -50%, -4px );
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	pointer-events: none;
	z-index: 4;
}

.loja-cipo-product-wishlist::before {
	content: '';
	position: absolute;
	top: calc( 100% + 7px );
	left: 50%;
	transform: translateX( -50% );
	border: 5px solid transparent;
	border-bottom-color: #18181b;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s;
	pointer-events: none;
	z-index: 4;
}

.loja-cipo-product-wishlist:hover::after,
.loja-cipo-product-wishlist:focus-visible::after {
	opacity: 1;
	visibility: visible;
	transform: translate( -50%, 0 );
}

.loja-cipo-product-wishlist:hover::before,
.loja-cipo-product-wishlist:focus-visible::before {
	opacity: 1;
	visibility: visible;
}

.loja-cipo-product-content {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 12px;
	flex: 1;
}

.loja-cipo-product-title {
	display: block;
	color: inherit;
	text-decoration: none !important;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.35;
}

.loja-cipo-product-price {
	margin: 0;
	font-size: 16px;
	color: inherit;
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 6px;
}

.loja-cipo-product-price del {
	font-size: 1em;
	opacity: 0.5;
	text-decoration: line-through;
	font-weight: 400;
}

.loja-cipo-product-price ins {
	text-decoration: none;
	font-weight: 700;
}

.loja-cipo-product-pix {
	font-size: 12px;
	opacity: 0.6;
	white-space: nowrap;
}

/* Com desconto (badge/preço "de/por"), o Pix desce pra linha de baixo —
   sem desconto, ele fica sempre ao lado do preço. */
.loja-cipo-product-price--on-sale {
	flex-wrap: wrap;
}

.loja-cipo-product-price--on-sale .loja-cipo-product-pix {
	flex-basis: 100%;
	white-space: normal;
}

.loja-cipo-product-actions {
	margin-top: 10px;
}

.loja-cipo-product-actions .button,
.loja-cipo-product-actions .button:hover,
.loja-cipo-product-actions .button:focus,
.loja-cipo-product-actions .button:active,
.loja-cipo-product-actions .button:visited {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 16px;
	background: #8bc34a !important;
	color: #ffffff !important;
	border-radius: 0;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 13px;
	text-decoration: none !important;
	border: none;
	box-shadow: none !important;
	outline: none !important;
	cursor: pointer;
	transition: background-color 0.35s ease, opacity 0.35s ease;
}

.loja-cipo-product-actions .button:hover {
	opacity: 0.88;
}

/* Texto do botão controlado via JS (products-buy-button.js) — troca só o
   textContent com um fade curto de opacidade. Nada de animar transform em
   cima do texto: era isso que causava o artefato de renderização
   borrado/dobrado no Chrome/Edge do Windows, mesmo com backface-visibility. */
.loja-cipo-product-buy-label {
	display: block;
	line-height: 1.4;
	transition: opacity 0.12s ease;
}

.loja-cipo-product-buy-label.is-swapping {
	opacity: 0;
}

/* Spinner do estado "Adicionando..." — some por padrão, só aparece com a
   classe .is-loading no botão (adicionada via JS no clique). */
.loja-cipo-product-buy-spinner {
	display: none;
	flex: none;
	width: 14px;
	height: 14px;
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: loja-cipo-buy-spin 0.6s linear infinite;
}

.loja-cipo-product-buy-button.is-loading .loja-cipo-product-buy-spinner {
	display: inline-block;
}

/* Ícone de check do estado "Adicionado" — some por padrão, só aparece com
   .is-added (adicionada via JS quando o WooCommerce confirma o AJAX). */
.loja-cipo-product-buy-check {
	display: none;
	flex: none;
	line-height: 0;
	animation: loja-cipo-buy-pop 0.25s ease;
}

.loja-cipo-product-buy-button.is-added .loja-cipo-product-buy-check {
	display: inline-flex;
}

@keyframes loja-cipo-buy-spin {
	to {
		transform: rotate( 360deg );
	}
}

@keyframes loja-cipo-buy-pop {
	from {
		transform: scale( 0.4 );
		opacity: 0;
	}
	to {
		transform: scale( 1 );
		opacity: 1;
	}
}

/* O WooCommerce injeta esse link "Ver carrinho" via JS depois do AJAX
   add-to-cart — como o carrinho lateral do FunnelKit já abre sozinho, esse
   link fica redundante/confuso e a gente esconde. */
.loja-cipo-product-actions .added_to_cart {
	display: none !important;
}

/* Botão "Excluir" — só aparece na página da Wishlist (show_remove_button).
   Texto discreto por padrão, fica "de alerta" (vermelho) só no hover, pra
   não competir visualmente com o botão de comprar. */
.loja-cipo-product-remove,
.loja-cipo-product-remove:hover,
.loja-cipo-product-remove:focus {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 8px;
	padding: 8px;
	background: none !important;
	border: none;
	box-shadow: none !important;
	outline: none !important;
	color: inherit;
	opacity: 0.55;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.loja-cipo-product-remove:hover {
	opacity: 1;
	color: #c1440e;
}

.loja-cipo-product-remove-icon {
	flex: none;
}