/* Etiquetas nas listagens de produtos (loja, categorias, relacionados, home): mais discretas e numa só fila.
   Só dentro de .product-small; a página de produto mantém as suas. Ver inc/rounded.php */

.product-small .badge-container {
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 4px;
	width: auto;
	margin: 8px !important;
}
.product-small .badge-container .badge {
	position: static;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
}
.product-small .badge-container .badge-inner {
	position: static;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 22px;
	min-height: 0;
	padding: 0 8px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.product-small .badge-container .badge-inner .onsale {
	font-size: inherit;
	font-weight: inherit;
	line-height: 1;
}
/* O valor em euros já está no preço por baixo: na listagem fica só a percentagem */
.product-small .badge-inner .giw-off-amt {
	display: none;
}
/* "Unissexo" / "Novo": mesmo tamanho, discretos */
.product-small .badge-inner.new-bubble,
.product-small .badge-inner.new-bubble-auto {
	font-weight: 600;
	letter-spacing: .06em;
}
.product-small .badge-inner.new-bubble span {
	font-size: inherit;
}

/* ---------- Chips com o mesmo tamanho e raio (o Flatsome dá ao "Unissexo" um tamanho e uma forma próprios) ---------- */
.product-small .badge-container .badge-inner {
	height: 22px !important;
	padding: 0 8px !important;
	font-size: 11px !important;
	border-radius: var(--giaw-r-btn, 5px) !important;
}
.product-small .badge-container .badge-inner span {
	font-size: inherit !important;
	line-height: 1;
}

/* ---------- "NOVO" (div .new-badge-text impresso por um plugin ao lado do contentor das etiquetas) ----------
   O JS (assets/listing.js) mete-o dentro da fila de etiquetas. Se não houver fila (produto só "novo"), fica no canto de cima. */
.product-small .new-badge-text {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 22px;
	margin: 8px !important;
	padding: 0 8px !important;
	border: 0 !important;
	border-radius: var(--giaw-r-btn, 5px);
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .06em;
	line-height: 1;
}
.product-small .badge-container .new-badge-text {
	position: static !important;
	margin: 0 !important;
}

/* ---------- "Poupas X €" junto ao preço ---------- */
.product-small .price-wrapper {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 10px;
}
.product-small .price-wrapper .price {
	margin: 0;
}
.product-small .giw-saving-line {
	display: inline-block;
	margin: 0;
	white-space: nowrap;
	color: #111;
	font-size: 11px;
	font-weight: 600;
	vertical-align: baseline;
}
.product-small .giw-saving-line .woocommerce-Price-amount,
.product-small .giw-saving-line .woocommerce-Price-currencySymbol {
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	vertical-align: baseline;
}

/* O Flatsome dá largura fixa a .callout.badge.badge-square (mesma especificidade e vem depois): força a automática */
.product-small .badge-container .callout.badge.badge-square,
.product-small .badge-container .badge.badge-square,
.product-small .badge-container .badge {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	flex: none;
}
.product-small .badge-container .badge .badge-inner {
	width: auto !important;
	min-width: 0 !important;
}

/* O texto do cartão cola à foto em todas as listagens (na homepage o cartão não está dentro de .products,
   onde o CSS do site já tirava o padding de cima, e ficava com o do Flatsome: ~28px) */
.product-small .box-text.box-text-products {
	padding-top: 0 !important;
}

/* O comportamento "equalize-box" do Flatsome (JS) iguala a altura do nome, do preço e do excerto em cada linha de produtos:
   um nome com 2 linhas faz os vizinhos reservarem 2 linhas e abre um buraco entre o nome e o preço.
   O JS escreve a altura inline; o !important sobrepõe-se. Cada cartão fica com a altura do seu próprio texto. */
.equalize-box .product-small .product-title,
.equalize-box .product-small .price-wrapper,
.equalize-box .product-small .box-excerpt {
	height: auto !important;
	min-height: 0 !important;
}

/* =====================================================================
   Telemóvel (cartões com ~170px): etiquetas mais pequenas e texto do preço contido
   ===================================================================== */
@media (max-width: 549px) {
	.product-small .badge-container {
		gap: 3px;
		margin: 6px !important;
	}
	.product-small .badge-container .badge-inner {
		height: 18px !important;
		padding: 0 5px !important;
		font-size: 10px !important;
		letter-spacing: .02em;
	}
	.product-small .new-badge-text {
		height: 18px;
		margin: 6px !important;
		padding: 0 5px !important;
		font-size: 10px !important;
		letter-spacing: .03em;
	}
	.product-small .badge-container .new-badge-text {
		margin: 0 !important;
	}
	/* "Poupas X €" a 11px também em telemóvel (o Flatsome aumentava o texto do preço) */
	.product-small .giw-saving-line,
	.product-small .giw-saving-line * {
		font-size: 10px !important;
	}
	/* Botão do saco um pouco mais pequeno */
	.product-small .giaw-qa__btn {
		width: 28px;
		height: 28px;
		right: 6px;
		bottom: calc(100% + 6px);
	}
	.product-small .giaw-qa__panel {
		bottom: calc(100% + 42px);
	}
}

/* Telemóveis muito estreitos (cartões < 160px): as três etiquetas já não cabem numa fila; o "Novo" é o menos decisivo */
@media (max-width: 389px) {
	.product-small .badge-container .new-badge-text {
		display: none !important;
	}
}

/* Etiquetas informativas ("Unissexo", "Novo") com a mesma opacidade, quer sejam a 1.ª, 2.ª ou 3.ª da fila:
   o Flatsome só dá .9 à 2.ª etiqueta (.badge+.badge) e .8 à 3.ª; a promoção fica a 100% */
.product-small .badge-container .badge-inner.new-bubble,
.product-small .badge-container .badge-inner.new-bubble-auto,
.product-small .badge-container .new-badge-text {
	opacity: .9;
}
.product-small .badge-container .badge,
.product-small .badge-container .badge + .badge,
.product-small .badge-container .badge + .badge + .badge {
	opacity: 1;
}

/* Botão do carrinho em telemóvel: mais suave (é sempre visível porque não há hover) */
@media (max-width: 549px) {
	.product-small .giaw-qa__btn {
		width: 26px;
		height: 26px;
		background: rgba(255, 255, 255, .8);
		box-shadow: none;
		opacity: .85;
	}
	.product-small .giaw-qa__btn svg {
		width: 14px;
		height: 14px;
	}
}

/* =====================================================================
   Cores: promoção vermelha, "NOVO" preto, "Unissexo" branco (as duas informativas a 90%)
   ===================================================================== */
.product-small .badge-container .new-badge-text {
	background: #111 !important;
	color: #fff !important;
}

/* =====================================================================
   Coração da wishlist: canto inferior esquerdo, só no hover, no mesmo estilo do botão do carrinho
   ===================================================================== */
.product-small .image-tools.top.right {
	top: auto !important;
	right: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	margin: 8px;
	padding: 0 !important;
}
.product-small .image-tools.top.right .wishlist-button {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .14);
	color: #111 !important;
	line-height: 1;
}
.product-small .image-tools.top.right .wishlist-button:hover {
	background: #111 !important;
	color: #fff !important;
}
.product-small .image-tools.top.right .wishlist-button i {
	margin: 0;
	font-size: 15px;
	line-height: 1;
}
/* A mensagem ("Adicionar aos favoritos") passa a abrir para cima e alinhada à esquerda, para não sair do cartão */
.product-small .image-tools.top.right .wishlist-popup {
	top: auto;
	right: auto;
	bottom: 100%;
	left: 0;
	margin: 0 0 8px;
	white-space: nowrap;
}
.product-small .image-tools.top.right .wishlist-popup::after {
	top: 100%;
	right: auto;
	bottom: auto;
	left: 20px;
	border-bottom-color: transparent;
	border-top-color: rgba(0, 0, 0, .8);
}
/* Só aparece com o rato por cima do cartão (desktop); em ecrãs de toque fica sempre visível mas suave */
@media (hover: hover) {
	.product-small .image-tools.top.right {
		opacity: 0 !important;
		pointer-events: none;
	}
	.product-small:hover .image-tools.top.right,
	.product-small .box-image:focus-within .image-tools.top.right {
		opacity: 1 !important;
		pointer-events: auto;
	}
}
@media (hover: none) {
	.product-small .image-tools.top.right {
		opacity: .85 !important;
	}
}
@media (max-width: 549px) {
	.product-small .image-tools.top.right {
		margin: 6px;
	}
	.product-small .image-tools.top.right .wishlist-button {
		width: 26px;
		height: 26px;
		background: rgba(255, 255, 255, .8) !important;
		box-shadow: none;
	}
	.product-small .image-tools.top.right .wishlist-button i {
		font-size: 13px;
	}
}

/* Coração centrado no círculo: o Flatsome desloca o ícone com .button i { top: -1.5px } e line-height 1.2 */
.product-small .image-tools.top.right .wishlist-button {
	display: grid !important;
	place-items: center;
}
.product-small .image-tools.top.right .wishlist-button i {
	position: static !important;
	top: auto !important;
	display: block;
	width: auto;
	height: auto;
	margin: 0 !important;
	line-height: 1 !important;
	vertical-align: baseline;
}
.product-small .image-tools.top.right .wishlist-button i::before {
	display: block;
	line-height: 1;
}

/* Favoritos: quando o produto já está na lista, o coração fica preenchido e vermelho (o Flatsome só acrescenta a classe .wishlist-added) */
.wishlist-button.wishlist-added i::before {
	content: "\e000";
}
.wishlist-button.wishlist-added,
.wishlist-button.wishlist-added:hover {
	background: rgba(255, 255, 255, .92) !important;
	color: #d90000 !important;
}

/* Telemóvel: o preço final é o elemento principal do cartão; antigo e poupança ficam abaixo dele em tamanho */
@media (max-width: 549px) {
	html body .product-small .price-wrapper .price ins,
	html body .product-small .price-wrapper .price ins * {
		font-size: 13px !important;
	}
	html body .product-small .price-wrapper .price del,
	html body .product-small .price-wrapper .price del * {
		font-size: 11px !important;
	}
	html body .product-small .price-wrapper .price > .woocommerce-Price-amount,
	html body .product-small .price-wrapper .price > .woocommerce-Price-amount * {
		font-size: 13px !important;
	}
}

/* Telemóvel: "Poupas" sempre numa linha por baixo do preço, com 85% de opacidade */
@media (max-width: 549px) {
	html body .product-small .price-wrapper .giw-saving-line {
		display: block;
		flex: 0 0 100%;
		margin-top: 2px;
		opacity: .85;
	}
}

/* Etiqueta de stock ("2 UNIDADES"): vem sem <span> de cor, por isso herdava texto branco sobre fundo branco.
   Fica no mesmo estilo suave do "Unissexo" mas com texto vermelho (urgência sem competir com a etiqueta de promoção, que é vermelha cheia) */
.badge-container .badge-inner.new-bubble:not(:has(span)) {
	color: #d90000 !important;
	font-weight: 700;
}