/**
 * Asa Branca - Página "Como Funciona"
 *
 * Só carrega nas páginas que usam o template page-como-funciona.php.
 * Cores e tipografia herdadas do tema PharmaCare (Roboto, #297F42, #D63338).
 */

/* Os tokens vivem na raiz, e não só em .ab-cf.
   O cartão de produto é usado fora dos blocos Elementor (arquivos do
   WooCommerce), onde não existe contentor .ab-cf. Aí as variáveis ficavam
   por definir, o var() era inválido e o cartão perdia contorno, o verde do
   preço e o estilo do botão. */
:root {
	--ab-green: #297F42;
	--ab-green-dark: #1f6634;
	--ab-green-soft: #EAF2EC;
	--ab-green-line: #CBDFD2;
	--ab-red: #D63338;
	--ab-ink: #2c2c2c;
	--ab-body: #777;
	--ab-line: #ebebeb;
	--ab-surface: #f7f7f7;
	--ab-warn-bg: #FCF6E8;
	--ab-warn-line: #E8C77A;
	--ab-warn-ink: #8A6218;
}

.ab-cf {
	/* Paleta do projeto - alterar aqui reflete-se em toda a página */
	--ab-green: #297F42;
	--ab-green-dark: #1f6634;
	--ab-green-soft: #EAF2EC;
	--ab-green-line: #CBDFD2;
	--ab-red: #D63338;
	--ab-ink: #2c2c2c;
	--ab-body: #777;
	--ab-line: #ebebeb;
	--ab-surface: #f7f7f7;
	--ab-warn-bg: #FCF6E8;
	--ab-warn-line: #E8C77A;
	--ab-warn-ink: #8A6218;

	font-family: Roboto, sans-serif;
	color: var(--ab-body);
}

/* O template pede ao tema um #qodef-page-inner sem grelha nem padding,
   para as secções poderem ocupar a largura total do ecrã. */
#qodef-page-inner.ab-cf-page-inner {
	width: 100%;
	max-width: 100%;
	padding: 0;
	margin: 0;
}

/* Container interno alinhado com a grelha de 1100px do tema */
.ab-cf__wrap {
	width: 1100px;
	max-width: calc(100% - 60px);
	margin: 0 auto;
}

/* Sem reset geral aos parágrafos de propósito.
   Um ".ab-cf p" (0,1,1) ou ".ab-cf p:not([class])" (0,2,1) ganharia às regras
   dos componentes e anulava-lhes as margens - inclusive nas áreas de texto
   rico, onde os parágrafos vêm sem classe e PRECISAM de espaço entre si.
   Cada componente define a margem dos seus parágrafos; o tema aplica
   p { margin: 10px 0 } a tudo o resto, o que é um ponto de partida aceitável. */

/* Neutraliza os estilos globais de listas do tema dentro desta página */
.ab-cf ul,
.ab-cf ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ab-cf li {
	margin: 0;
}

.ab-cf__section {
	padding: 90px 0;
}

/* ---------------------------------------------------------------- Títulos */

.ab-cf h1,
.ab-cf h2,
.ab-cf h3 {
	font-family: Roboto, sans-serif;
	color: var(--ab-ink);
	letter-spacing: 0;
	margin: 0;
	word-wrap: break-word;
}

.ab-cf__eyebrow {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.154em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ab-green);
	margin-bottom: 14px;
}

.ab-cf__title {
	font-size: 45px;
	font-weight: 700;
	line-height: 1.111em;
}

.ab-cf__section-title {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.188em;
	margin-bottom: 46px;
}

.ab-cf__lead {
	font-size: 17px;
	line-height: 1.75em;
	color: #555;
	margin: 20px 0 0;
}

/* ------------------------------------------------------------------ Botão */
/* Réplica do botão do tema: Roboto 700, maiúsculas, sem arredondamento. */

.ab-cf__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	vertical-align: middle;
	width: auto;
	margin: 0;
	padding: 19px 31px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.154em;
	letter-spacing: .1em;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--ab-green);
	border: 1px solid transparent;
	border-radius: 0;
	outline: 0;
	cursor: pointer;
	transition: color .3s ease-in-out, background-color .3s ease-in-out, border-color .3s ease-in-out;
}

.ab-cf__btn:hover,
.ab-cf__btn:focus {
	color: #fff;
	background-color: var(--ab-green-dark);
}

/* ------------------------------------------------------------------- Hero */

.ab-cf__hero {
	background-color: var(--ab-green-soft);
	padding: 80px 0;
}

.ab-cf__hero-inner {
	max-width: 720px;
}

/* ------------------------------------------------------- Passos (timeline) */

.ab-cf__steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ab-cf__step {
	position: relative;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: 28px;
	margin: 0;
	padding-bottom: 0;
}

.ab-cf__step-marker {
	position: relative;
}

.ab-cf__step--linha {
	padding-bottom: 46px;
}

/* Linha vertical que liga um passo ao seguinte */
.ab-cf__step--linha .ab-cf__step-marker::after {
	content: "";
	position: absolute;
	left: 32px;
	top: 64px;
	bottom: 0;
	width: 1px;
	background-color: var(--ab-line);
}

.ab-cf__step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background-color: var(--ab-green);
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.ab-cf__step-head {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	margin-bottom: 4px;
}

.ab-cf__step-title {
	font-size: 23px;
	font-weight: 700;
	line-height: 1.269em;
}

.ab-cf__step-head .ab-cf__ico {
	color: var(--ab-green);
	flex-shrink: 0;
}

/* A margem inferior deste parágrafo é o que separa a descrição do bloco de
   destaque, seja ele qual for (confirmações, etiquetas, aviso ou grelha). */
.ab-cf__step-text {
	font-size: 15px;
	line-height: 1.75em;
	color: var(--ab-body);
	margin: 0 0 24px;
}

/* Ícones inline (SVG) */
.ab-cf__ico {
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ab-cf__ico--sm {
	width: 18px;
	height: 18px;
}

.ab-cf__ico--lg {
	width: 26px;
	height: 26px;
}

/* Ícones escolhidos na biblioteca do Elementor (opção "Personalizado"):
   vêm como <i> de fonte ou <svg> carregado, dentro de um <span.ab-cf__ico>. */
span.ab-cf__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

span.ab-cf__ico i {
	font-size: 20px;
	line-height: 1;
}

span.ab-cf__ico svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

span.ab-cf__ico--sm i {
	font-size: 15px;
}

span.ab-cf__ico--lg i {
	font-size: 22px;
}

/* Confirmações: uma caixa por item, com o mesmo desenho das etiquetas de
   pagamento mas a cheio em vez de contorno. */
.ab-cf__checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ab-cf__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	background-color: var(--ab-surface);
	font-size: 14px;
	line-height: 1.4;
	color: #555;
	margin: 0;
}

.ab-cf__checks .ab-cf__ico {
	color: var(--ab-green);
}

/* Métodos de pagamento do passo 2 */
.ab-cf__pays {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* padding 11px + 1px de contorno = mesma altura das caixas de confirmação */
.ab-cf__pays li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 17px;
	border: 1px solid var(--ab-line);
	font-size: 14px;
	line-height: 1.4;
	color: #555;
	margin: 0;
}

.ab-cf__pays li.is-secure {
	color: var(--ab-green);
	border-color: var(--ab-green);
}

/* Aviso de prazo do passo 3 */
.ab-cf__notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px 20px;
	background-color: var(--ab-warn-bg);
	border: 1px solid var(--ab-warn-line);
}

.ab-cf__notice .ab-cf__ico {
	color: var(--ab-warn-ink);
	margin-top: 1px;
}

.ab-cf__notice p {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ab-warn-ink);
	margin: 0;
}

/* Provas de entrega do passo 4: uma caixa por item, com o mesmo desenho das
   etiquetas de pagamento mas em tons de verde. */
.ab-cf__proof {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.ab-cf__proof li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 17px;
	background-color: var(--ab-green-soft);
	border: 1px solid var(--ab-green-line);
	margin: 0;
}

.ab-cf__proof .ab-cf__ico {
	color: var(--ab-green);
	margin-top: 2px;
}

.ab-cf__proof-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ab-ink);
	margin: 0 0 3px;
}

.ab-cf__proof-text {
	font-size: 13px;
	line-height: 1.5;
	color: #5c6b60;
	margin: 0;
}

/* -------------------------------------------------------------- Garantias */

.ab-cf__guarantees {
	background-color: var(--ab-surface);
	border-top: 1px solid var(--ab-line);
	border-bottom: 1px solid var(--ab-line);
}

.ab-cf__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ab-cf__card {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 28px;
	background-color: #fff;
	border: 1px solid var(--ab-line);
	margin: 0;
}

.ab-cf__card-ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	background-color: var(--ab-green-soft);
	color: var(--ab-green);
}

.ab-cf__card-title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.166em;
	color: var(--ab-ink);
	margin: 0 0 8px;
}

.ab-cf__card-text {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ab-body);
	margin: 0;
}

/* -------------------------------------------------------------------- CTA */

.ab-cf__cta {
	text-align: center;
}

.ab-cf__cta .ab-cf__section-title {
	margin-bottom: 14px;
}

.ab-cf__cta-text {
	display: block;
	font-size: 16px;
	line-height: 1.7;
	color: var(--ab-body);
	max-width: 480px;
	margin: 0 auto 30px;
}

/* A caixa de texto acompanha o alinhamento escolhido no widget */
.ab-cf__cta--left .ab-cf__cta-text {
	margin-left: 0;
}

.ab-cf__cta--right .ab-cf__cta-text {
	margin-right: 0;
}

/* ---------------------------------------------------------- Responsividade */

@media only screen and (max-width: 1024px) {

	.ab-cf__section {
		padding: 70px 0;
	}

	.ab-cf__hero {
		padding: 64px 0;
	}

	.ab-cf__title {
		font-size: 38px;
	}

	.ab-cf__section-title {
		font-size: 30px;
		margin-bottom: 38px;
	}
}

@media only screen and (max-width: 768px) {

	.ab-cf__wrap {
		max-width: calc(100% - 40px);
	}

	.ab-cf__section {
		padding: 56px 0;
	}

	.ab-cf__hero {
		padding: 52px 0;
	}

	.ab-cf__title {
		font-size: 31px;
	}

	.ab-cf__section-title {
		font-size: 24px;
		margin-bottom: 32px;
	}

	.ab-cf__lead {
		font-size: 16px;
	}

	/* Timeline passa a uma coluna: número por cima do conteúdo */
	.ab-cf__step {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ab-cf__step--linha {
		padding-bottom: 38px;
	}

	.ab-cf__step--linha .ab-cf__step-marker::after {
		display: none;
	}

	.ab-cf__step-num {
		width: 52px;
		height: 52px;
		font-size: 22px;
	}

	.ab-cf__step-head {
		min-height: 0;
	}

	.ab-cf__step-title {
		font-size: 20px;
	}

	.ab-cf__proof,
	.ab-cf__cards {
		grid-template-columns: 1fr;
	}

	.ab-cf__cards {
		gap: 16px;
	}

	.ab-cf__card {
		padding: 22px;
		gap: 14px;
	}
}

@media only screen and (max-width: 480px) {

	.ab-cf__title {
		font-size: 27px;
	}

	.ab-cf__section-title {
		font-size: 22px;
	}

	.ab-cf__checks {
		flex-direction: column;
		gap: 10px;
	}

	.ab-cf__btn {
		width: 100%;
		text-align: center;
		padding: 17px 20px;
	}
}

/* ==========================================================================
   BLOCOS DA PÁGINA DE CONTACTO
   ========================================================================== */

/* ------------------------------------------------------------- AB - Aviso */

.ab-alert {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	border: 1px solid transparent;
}

.ab-alert p {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	margin: 0;
}

.ab-alert--verde {
	background-color: var(--ab-green-soft);
	border-color: var(--ab-green-line);
	color: var(--ab-green);
}

.ab-alert--ambar {
	background-color: var(--ab-warn-bg);
	border-color: var(--ab-warn-line);
	color: var(--ab-warn-ink);
}

.ab-alert--vermelho {
	background-color: #FBEBEB;
	border-color: #EFC3C4;
	color: var(--ab-red);
}

.ab-alert--neutro {
	background-color: var(--ab-surface);
	border-color: var(--ab-line);
	color: #555;
}

.ab-alert .ab-cf__ico {
	color: currentColor;
}

.ab-alert__dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: currentColor;
	flex-shrink: 0;
}

.ab-alert__dot--pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: currentColor;
	animation: ab-pulse 2s ease-out infinite;
}

@keyframes ab-pulse {

	0% {
		transform: scale(1);
		opacity: .6;
	}

	100% {
		transform: scale(2.6);
		opacity: 0;
	}
}

/* --------------------------------------------- AB - Canais de contacto */

.ab-channels {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.ab-channel {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 22px;
	background-color: #fff;
	border: 1px solid var(--ab-line);
	margin: 0;
}

.ab-channel--main {
	border-color: var(--ab-green);
}

.ab-channel__ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
}

.ab-channel__ico--verde {
	background-color: var(--ab-green);
	color: #fff;
}

.ab-channel__ico--suave {
	background-color: var(--ab-green-soft);
	color: var(--ab-green);
}

.ab-channel__ico--vermelho {
	background-color: var(--ab-red);
	color: #fff;
}

.ab-channel__ico--neutro {
	background-color: var(--ab-surface);
	color: #555;
}

.ab-channel__body {
	flex: 1;
	min-width: 0;
}

.ab-channel__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 6px;
}

.ab-channel__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ab-ink);
	margin: 0;
}

.ab-channel__badge {
	display: inline-block;
	padding: 3px 10px;
	background-color: var(--ab-green-soft);
	color: var(--ab-green);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ab-channel__text {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ab-body);
	margin: 0 0 14px;
}

.ab-channel__link {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ab-green);
	text-decoration: none;
	margin: 0;
	word-break: break-word;
}

a.ab-channel__link:hover {
	color: var(--ab-green-dark);
	text-decoration: underline;
}

/* Variante compacta do botão, para dentro dos cartões */
.ab-cf__btn--sm {
	padding: 13px 20px;
	font-size: 11px;
	line-height: 1.182em;
}

/* -------------------------------------------------------- AB - Formulário */

.ab-form--boxed {
	padding: 26px;
	background-color: #fff;
	border: 1px solid var(--ab-line);
}

.ab-form__title {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.166em;
	color: var(--ab-ink);
	margin: 0 0 6px;
}

.ab-form__text {
	font-size: 14px;
	line-height: 1.65;
	color: var(--ab-body);
	margin: 0 0 18px;
}

.ab-form__title + .wpcf7,
.ab-form__text + .wpcf7 {
	margin-top: 18px;
}

.ab-form__empty {
	font-size: 14px;
	color: var(--ab-body);
	margin: 0;
}

/* Campos do Contact Form 7 alinhados com o desenho do site. A estrutura dos
   campos continua a ser definida no próprio CF7. */
.ab-form .wpcf7 p {
	margin: 0 0 14px;
}

.ab-form .wpcf7 label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: #555;
	margin-bottom: 6px;
}

.ab-form .wpcf7 input[type="text"],
.ab-form .wpcf7 input[type="email"],
.ab-form .wpcf7 input[type="tel"],
.ab-form .wpcf7 input[type="url"],
.ab-form .wpcf7 input[type="number"],
.ab-form .wpcf7 input[type="date"],
.ab-form .wpcf7 select,
.ab-form .wpcf7 textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: Roboto, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ab-ink);
	background-color: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 0;
	outline: 0;
	transition: border-color .2s ease-in-out;
}

.ab-form .wpcf7 textarea {
	min-height: 130px;
	resize: vertical;
}

.ab-form .wpcf7 input:focus,
.ab-form .wpcf7 select:focus,
.ab-form .wpcf7 textarea:focus {
	border-color: var(--ab-green);
}

.ab-form .wpcf7 input[type="submit"],
.ab-form .wpcf7 button[type="submit"] {
	width: 100%;
	padding: 17px 24px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.154em;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	background-color: var(--ab-green);
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .3s ease-in-out;
}

.ab-form .wpcf7 input[type="submit"]:hover,
.ab-form .wpcf7 button[type="submit"]:hover {
	background-color: var(--ab-green-dark);
}

/* Aceitação, checkboxes e radios.
   O style.css do tema-filho tem regras globais para input[type=checkbox]
   (margin-top: 13px, height: 15px !important) feitas para o checkout do
   WooCommerce. Dentro do formulário desalinham a caixa, por isso aqui são
   substituídas - com !important só onde é preciso vencer o !important delas.
   As regras globais ficam intactas para o resto do site. */
.ab-form .wpcf7 .wpcf7-list-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin: 0 0 8px;
}

.ab-form .wpcf7 .wpcf7-list-item:last-child {
	margin-bottom: 0;
}

.ab-form .wpcf7 .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ab-body);
	margin: 0;
	cursor: pointer;
}

.ab-form .wpcf7 .wpcf7-list-item-label {
	line-height: 1.55;
}

.ab-form .wpcf7 input[type="checkbox"],
.ab-form .wpcf7 input[type="radio"] {
	position: relative;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	flex: 0 0 18px;
	width: 18px !important;
	height: 18px !important;
	margin: 1px 0 0 !important;
	padding: 0;
	background-color: #fff;
	border: 1px solid #b5b5b5;
	border-radius: 0;
	cursor: pointer;
	transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}

.ab-form .wpcf7 input[type="radio"] {
	border-radius: 50%;
}

.ab-form .wpcf7 input[type="checkbox"]:hover,
.ab-form .wpcf7 input[type="radio"]:hover {
	border-color: var(--ab-green);
}

.ab-form .wpcf7 input[type="checkbox"]:checked,
.ab-form .wpcf7 input[type="radio"]:checked {
	background-color: var(--ab-green);
	border-color: var(--ab-green);
}

/* O visto, desenhado com dois lados de uma borda rodada 45 graus */
.ab-form .wpcf7 input[type="checkbox"]:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ab-form .wpcf7 input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background-color: #fff;
}

.ab-form .wpcf7 input[type="checkbox"]:focus-visible,
.ab-form .wpcf7 input[type="radio"]:focus-visible {
	outline: 2px solid var(--ab-green);
	outline-offset: 2px;
}

/* A caixa de aceitação fica separada do botão de envio */
.ab-form .wpcf7 .wpcf7-acceptance {
	display: block;
	margin-bottom: 6px;
}

.ab-form .wpcf7-not-valid-tip {
	font-size: 12px;
	color: var(--ab-red);
	margin-top: 5px;
}

.ab-form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	font-size: 14px;
	border-width: 1px;
}

/* --------------------------------------------------------------- AB - FAQ */

.ab-faq__item {
	border-bottom: 1px solid var(--ab-line);
}

.ab-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ab-ink);
	cursor: pointer;
	list-style: none;
}

/* Esconde o triângulo por omissão do <details> nos vários browsers */
.ab-faq__q::-webkit-details-marker {
	display: none;
}

.ab-faq__q::marker {
	content: "";
}

.ab-faq__q:hover {
	color: var(--ab-green);
}

.ab-faq__chevron {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: #999;
	transition: transform .25s ease-in-out, color .2s ease-in-out;
}

.ab-faq__item[open] .ab-faq__chevron {
	transform: rotate(180deg);
	color: var(--ab-green);
}

.ab-faq__a {
	padding: 0 0 20px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--ab-body);
}

.ab-faq__a p {
	margin: 0 0 10px;
}

.ab-faq__a p:last-child {
	margin-bottom: 0;
}

.ab-faq__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 700;
	color: var(--ab-green);
	text-decoration: none;
}

.ab-faq__more:hover {
	color: var(--ab-green-dark);
	text-decoration: underline;
}

/* ---------------------------------------------- AB - Lista de informações */

.ab-info--cinza,
.ab-info--verde {
	padding: 24px;
}

.ab-info--cinza {
	background-color: var(--ab-surface);
}

.ab-info--verde {
	background-color: var(--ab-green-soft);
}

.ab-info__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--ab-ink);
	margin: 0 0 18px;
}

.ab-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ab-info__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}

.ab-info__list .ab-cf__ico {
	color: var(--ab-green);
	margin-top: 2px;
}

.ab-info__label {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--ab-ink);
	margin: 0 0 2px;
}

.ab-info__value {
	display: block;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ab-body);
	margin: 0;
	text-decoration: none;
	word-break: break-word;
}

a.ab-info__value--link {
	color: var(--ab-green);
	font-weight: 500;
}

a.ab-info__value--link:hover {
	color: var(--ab-green-dark);
	text-decoration: underline;
}

/* Quem pediu menos movimento no sistema operativo não leva animação */
@media (prefers-reduced-motion: reduce) {

	.ab-alert__dot--pulse::after,
	.ab-faq__chevron {
		animation: none;
		transition: none;
	}
}

@media only screen and (max-width: 768px) {

	.ab-channel {
		padding: 18px;
		gap: 14px;
	}

	.ab-channel__ico {
		width: 42px;
		height: 42px;
	}

	.ab-form--boxed,
	.ab-info--cinza,
	.ab-info--verde {
		padding: 20px;
	}

	.ab-faq__q {
		font-size: 14px;
		padding: 16px 0;
	}
}

/* ==========================================================================
   BLOCOS DA HOMEPAGE
   ========================================================================== */

/* ------------------------------------------------------- Botão de contorno */

.ab-cf__btn--contorno {
	color: var(--ab-green);
	background-color: transparent;
	border-color: var(--ab-green);
}

.ab-cf__btn--contorno:hover,
.ab-cf__btn--contorno:focus {
	color: #fff;
	background-color: var(--ab-green);
	border-color: var(--ab-green);
}

/* --------------------------------------------------------------- AB - Hero */

.ab-hero__pill {
	display: inline-block;
	padding: 6px 16px;
	margin-bottom: 18px;
	background-color: var(--ab-green);
	color: #fff;
	border-radius: 100px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
}

.ab-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 30px;
}

.ab-hero--media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/* A imagem passa para a primeira coluna sem mudar a ordem no HTML,
   para quem navega por teclado ou leitor de ecrã continuar a ouvir
   primeiro o título e só depois a imagem. */
.ab-hero--invertido .ab-hero__media {
	grid-column: 1;
	grid-row: 1;
}

.ab-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* ------------------------------------------------------- AB - Hero Slider */

/* Os slides ocupam todos a mesma célula da grelha: a altura do bloco fica a
   do slide mais alto e não há saltos na transição. */
.ab-hero-slider {
	position: relative;
	display: grid;
	grid-template-areas: "slide";
}

.ab-hero-slide {
	grid-area: slide;
	opacity: 0;
	/* visibility (e não display) tira o slide da ordem de tabulação sem
	   estragar a transição nem a altura do bloco */
	visibility: hidden;
	transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
}

.ab-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
}

/* Espaço em baixo para o conteúdo não bater nas bolinhas */
.ab-hero-slider--dots .ab-hero-slide {
	padding-bottom: 46px;
}

.ab-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 0;
	margin: 0;
}

.ab-hero-dot {
	width: 11px;
	height: 11px;
	padding: 0;
	background-color: transparent;
	border: 1px solid var(--ab-green);
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .2s ease-in-out, transform .2s ease-in-out;
}

.ab-hero-dot:hover {
	background-color: var(--ab-green-line);
}

.ab-hero-dot.is-active {
	background-color: var(--ab-green);
	transform: scale(1.15);
}

.ab-hero-dot:focus-visible {
	outline: 2px solid var(--ab-green);
	outline-offset: 3px;
}

/* Sobre fotografia ou fundo escuro */
.ab-hero-dots--branco .ab-hero-dot {
	border-color: rgba(255, 255, 255, .8);
}

.ab-hero-dots--branco .ab-hero-dot:hover {
	background-color: rgba(255, 255, 255, .45);
}

.ab-hero-dots--branco .ab-hero-dot.is-active {
	background-color: #fff;
}

.ab-hero-dots--branco .ab-hero-dot:focus-visible {
	outline-color: #fff;
}

/* Texto só para leitores de ecrã (o tema pode já ter, fica garantido) */
.ab-cf .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* -------------------------------------------- AB - Título (com link/subtítulo) */

.ab-head {
	margin-bottom: 0;
}

.ab-head--com-link {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ab-head__main {
	min-width: 0;
}

.ab-head--com-link .ab-cf__section-title {
	margin-bottom: 0;
}

/* Alinhamento à esquerda por omissão, em todas as partes do cabeçalho.
   O controlo do widget escreve por cima quando se escolhe outro. */
.ab-head,
.ab-head .ab-cf__eyebrow,
.ab-head .ab-cf__section-title,
.ab-head .ab-head__sub {
	text-align: left;
}

.ab-head__sub {
	font-size: 15px;
	line-height: 1.65;
	color: var(--ab-body);
	margin: 10px 0 0;
	max-width: 620px;
}

/* Com o cabeçalho centrado ou à direita, a caixa do subtítulo acompanha -
   senão ficava limitada a 620px encostada à esquerda. */
.ab-head--center .ab-head__sub {
	margin-left: auto;
	margin-right: auto;
}

.ab-head--right .ab-head__sub {
	margin-left: auto;
	margin-right: 0;
}

.ab-head--com-link .ab-head__link {
	margin-top: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

/* --------------------------------------------------- AB - Bloco de texto */

/* Alinhamento à esquerda declarado em cada parte, e não herdado.
   Sem isto, uma secção do Elementor com o texto centrado arrastava o título
   e a etiqueta para o meio - e o corpo ficava à esquerda, porque o editor
   de texto rico traz o seu próprio alinhamento. */
.ab-text,
.ab-text .ab-cf__eyebrow,
.ab-text .ab-cf__section-title,
.ab-text .ab-text__body {
	text-align: left;
}

.ab-text--center,
.ab-text--center .ab-cf__eyebrow,
.ab-text--center .ab-cf__section-title,
.ab-text--center .ab-text__body {
	text-align: center;
}

.ab-text--right,
.ab-text--right .ab-cf__eyebrow,
.ab-text--right .ab-cf__section-title,
.ab-text--right .ab-text__body {
	text-align: right;
}

.ab-text__title {
	margin-bottom: 22px;
}

.ab-text__body {
	font-size: 15px;
	line-height: 1.75;
	color: var(--ab-body);
}

.ab-text__body p {
	margin: 0 0 18px;
}

.ab-text__body p:last-child {
	margin-bottom: 0;
}

.ab-text__body h2,
.ab-text__body h3,
.ab-text__body h4 {
	margin: 28px 0 12px;
}

.ab-text__body ul,
.ab-text__body ol {
	margin: 0 0 18px;
	padding-left: 20px;
	list-style: revert;
}

.ab-text__body li {
	margin-bottom: 6px;
}

.ab-text__link {
	margin-top: 28px;
}

/* ---------------------------------------------- Variantes dos cartões */

.ab-cf__card--cinza,
.ab-cf__card--verde {
	border-color: transparent;
}

.ab-cf__card--cinza {
	background-color: var(--ab-surface);
}

.ab-cf__card--verde {
	background-color: var(--ab-green-soft);
}

/* No cartão cinza o quadrado do ícone fica verde claro, como no desenho.
   No cartão verde passa a branco, senão o quadrado desaparecia no fundo. */
.ab-cf__card--verde .ab-cf__card-ico {
	background-color: #fff;
}

/* ------------------------------------------------------------ AB - Números */

.ab-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ab-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	text-align: center;
	margin: 0;
}

.ab-stats--sep .ab-stat + .ab-stat {
	border-left: 1px solid var(--ab-line);
}

.ab-stat__value {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--ab-green);
}

.ab-stat__label {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ab-body);
	max-width: 160px;
}

/* ------------------------------------------------------ AB - Produtos */

.ab-prods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.ab-prod {
	display: flex;
	flex-direction: column;
	margin: 0;
	background-color: #fff;
	border: 1px solid var(--ab-line);
	transition: border-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

.ab-prod:hover {
	border-color: var(--ab-green-line);
	box-shadow: 0 6px 20px rgba(41, 127, 66, .08);
}

.ab-prod--destaque {
	border-color: var(--ab-green);
}

.ab-prod__media {
	display: block;
	background-color: var(--ab-surface);
	overflow: hidden;
}

.ab-prod__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .4s ease-in-out;
}

.ab-prod:hover .ab-prod__media img {
	transform: scale(1.04);
}

.ab-prod__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 18px;
}

.ab-prod__badge {
	align-self: flex-start;
	padding: 3px 10px;
	margin-bottom: 10px;
	background-color: var(--ab-green-soft);
	color: var(--ab-green);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.ab-prod__cat {
	font-size: 12px;
	line-height: 1.4;
	color: #999;
	margin: 0 0 5px;
}

.ab-prod__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ab-ink);
	margin: 0 0 8px;
}

.ab-prod__title a {
	color: inherit;
	text-decoration: none;
}

.ab-prod__title a:hover {
	color: var(--ab-green);
}

.ab-prod__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--ab-body);
	margin: 0 0 14px;
}

/* empurra preço e botão para o fundo, para os cartões ficarem alinhados */
.ab-prod__price {
	margin: auto 0 12px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ab-red);
}

.ab-prod__price-prefix {
	display: block;
	font-size: 12px;
	font-weight: 400;
	color: var(--ab-body);
	margin-bottom: 2px;
}

.ab-prod__price del {
	font-size: 15px;
	font-weight: 400;
	color: #aaa;
	margin-right: 6px;
}

.ab-prod__price ins {
	text-decoration: none;
}

.ab-prod__action {
	margin-top: auto;
}

/* O botão vive dentro do padding do corpo do cartão, como na homepage.
   O tema aplica margens negativas aos botões dentro do loop da loja, o que o
   fazia encostar às arestas; aqui são anuladas. */
.ab-prod .ab-prod__action {
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

/* O tema estiliza os botões do loop com selectores de ID (#qodef-woo-page),
   que ganham às classes: o botão saía com largura automática e com o ícone
   de saco do tema. Aqui é reposto a toda a largura e sem ícone. */
.ab-prod .ab-prod__action .button,
.ab-prod .ab-prod__action .added_to_cart,
#qodef-woo-page .ab-prod .ab-prod__action .button,
#qodef-woo-page .ab-prod .ab-prod__action .added_to_cart,
.qodef-woo-shortcode .ab-prod .ab-prod__action .button {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100% !important;
	margin: 0 !important;
	left: auto;
	right: auto;
	position: relative;
	color: #fff;
	background-color: var(--ab-green);
	border: 1px solid transparent;
	border-radius: 0;
}

/* O ícone de saco que o tema acrescenta ao botão */
#qodef-woo-page .ab-prod .ab-prod__action .button::before,
#qodef-woo-page .ab-prod .ab-prod__action .button::after,
.ab-prod .ab-prod__action .button > .qodef-woo-product-add-to-cart-icon,
.ab-prod .ab-prod__action .button i {
	display: none !important;
	content: none !important;
}

#qodef-woo-page .ab-prod .ab-prod__action .button:hover,
#qodef-woo-page .ab-prod .ab-prod__action .added_to_cart:hover {
	color: #fff;
	background-color: var(--ab-green-dark);
}

/* --------------------------------------------- Cartão de produto na loja */

.ab-prod__badge--promo {
	background-color: var(--ab-red);
	color: #fff;
}

.ab-prod__badge--esgotado {
	background-color: var(--ab-surface);
	color: #888;
}

/* Vista Rápida e Favoritos: uma linha de links discretos por cima do botão.
   A ordem é garantida pelo template (ab-prod__tools vem antes de
   ab-prod__action), não por prioridades de hook. */
.ab-prod__tools {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	gap: 6px 18px;
	margin-top: auto;
	padding: 2px 0 14px;
	/* nada transborda o cartão, por mais estreita que fique a coluna */
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

.ab-prod__tools a {
	max-width: 100%;
	min-width: 0;
}

.ab-prod__tools a span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Nos favoritos fica só o coração. O rótulo não é apagado, é escondido à
   vista: é ele que dá nome ao link para quem usa leitor de ecrã, e sem ele o
   botão passaria a ser anunciado como um link sem texto. Por isso não leva
   display:none nem visibility:hidden - qualquer um deles esconderia o texto
   também do leitor. A Vista Rápida mantém o seu, e por isso a regra só toca
   na classe do plugin dos favoritos. */
.ab-prod__tools .qwfw-m-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Os plugins envolvem cada botão num <div>, que por ser bloco ocupava a linha
   toda e empilhava os dois. Aqui encolhem ao conteúdo e ficam lado a lado. */
/* O gap também vai para dentro dos wrappers: quando um plugin mete os dois
   links no mesmo <div>, o espaçamento entre eles vinha a zero. */
.ab-prod__tools > * {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin: 0;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 18px;
}

.ab-prod__tools:empty {
	display: none;
}

.ab-prod__tools > * {
	margin: 0;
}

.ab-prod__tools a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	font-family: Roboto, sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	color: #888;
	background: transparent;
	border: 0;
	transition: color .2s ease-in-out;
}

.ab-prod__tools a:hover {
	color: var(--ab-green);
	background: transparent;
}

/* Cada plugin traz o seu ícone em fonte própria, com desenhos e tamanhos
   diferentes. Escondemo-los e desenhamos os nossos com máscara, para os dois
   links ficarem com o mesmo peso visual. */
.ab-prod__tools a > svg,
.ab-prod__tools a > img,
.ab-prod__tools a > i,
.ab-prod__tools a > span[class*="icon"],
.ab-prod__tools a::before {
	display: none !important;
}

.ab-prod__tools a::after {
	content: "";
	order: -1;
	width: 15px;
	height: 15px;
	/* caixa fixa para os dois ícones assentarem na mesma linha de base */
	min-width: 15px;
	flex: 0 0 15px;
	align-self: center;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Olho para a Vista Rápida.
   Desenhado num viewBox de 20 e com margem lateral, para ocupar a mesma
   área visual do coração - a forma do olho é larga e, à mesma altura,
   parecia sempre maior. */
.ab-prod__tools a::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12s3.2-5.5 8.5-5.5 8.5 5.5 8.5 5.5-3.2 5.5-8.5 5.5S3.5 12 3.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12s3.2-5.5 8.5-5.5 8.5 5.5 8.5 5.5-3.2 5.5-8.5 5.5S3.5 12 3.5 12z'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3C/svg%3E");
}

/* Coração para os Favoritos, com a mesma espessura de traço do olho */
.ab-prod__tools a[class*="wishlist"]::after,
.ab-prod__tools [class*="wishlist"] a::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5l-1.2-1.1C6 14 3.6 11.9 3.6 9.2A4.1 4.1 0 017.7 5.1c1.4 0 2.8.7 3.6 1.8l.7.9.7-.9a4.4 4.4 0 013.6-1.8 4.1 4.1 0 014.1 4.1c0 2.7-2.4 4.8-7.2 9.2L12 19.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19.5l-1.2-1.1C6 14 3.6 11.9 3.6 9.2A4.1 4.1 0 017.7 5.1c1.4 0 2.8.7 3.6 1.8l.7.9.7-.9a4.4 4.4 0 013.6-1.8 4.1 4.1 0 014.1 4.1c0 2.7-2.4 4.8-7.2 9.2L12 19.5z'/%3E%3C/svg%3E");
}

/* Texto igual nos dois links, seja qual for o que o plugin traz.
   A entrelinha é fixada em pixéis (e não em múltiplos) e as margens são
   zeradas: cada plugin trazia a sua, e bastava um pixel de diferença para
   as duas ligações assentarem em níveis diferentes. */
.ab-prod__tools a,
.ab-prod__tools a span,
.ab-prod__tools a .qwfw-m-text {
	font-size: 11px !important;
	line-height: 16px !important;
	letter-spacing: .04em !important;
	font-weight: 500 !important;
	text-transform: uppercase !important;
	color: inherit !important;
	vertical-align: middle;
}

/* Todos os elementos da linha ficam com a mesma caixa: mesma altura, sem
   margens nem espaçamentos próprios. É isso que os põe ao mesmo nível. */
.ab-prod__tools > *,
.ab-prod__tools a,
.ab-prod__tools a span {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	min-height: 16px;
	align-items: center;
}

.ab-prod__tools a {
	display: inline-flex !important;
}

/* ------------------------------------ AB - Grelha de produtos (loja) */

.ab-shop__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-bottom: 18px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--ab-line);
}

.ab-shop__count {
	font-size: 14px;
	line-height: 1.4;
	color: var(--ab-body);
	margin: 0;
}

.ab-shop__count strong {
	color: var(--ab-ink);
	font-weight: 700;
}

.ab-shop__range {
	color: #aaa;
}

.ab-shop__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.ab-shop__sort label {
	font-size: 13px;
	color: var(--ab-body);
	margin: 0;
}

.ab-shop__sort select {
	padding: 9px 12px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	color: var(--ab-ink);
	background-color: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 0;
	cursor: pointer;
}

.ab-shop__sort select:focus {
	border-color: var(--ab-green);
	outline: 0;
}

.ab-shop__vazio {
	padding: 40px 0;
	font-size: 15px;
	color: var(--ab-body);
	text-align: center;
}

/* --------------------------------------------------------- Paginação */

.ab-shop__pag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 34px;
}

.ab-shop__pag .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #555;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--ab-line);
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.ab-shop__pag a.page-numbers:hover {
	color: var(--ab-green);
	border-color: var(--ab-green);
}

.ab-shop__pag .page-numbers.current {
	color: #fff;
	background-color: var(--ab-green);
	border-color: var(--ab-green);
}

.ab-shop__pag .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: #aaa;
}

@media only screen and (max-width: 680px) {

	.ab-shop__bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.ab-shop__sort {
		width: 100%;
	}

	.ab-shop__sort select {
		flex: 1;
	}
}

/* ------------------------------------------------------- Grelha da loja */

/* O tema define o layout da lista com selectores de ID (#qodef-woo-page), que
   pesam mais do que qualquer classe. Nos arquivos de categoria isso tornava a
   lista num flex de uma só linha e os cartões ficavam com poucos pixéis de
   largura - o texto partia-se letra a letra. Daí o !important e o prefixo. */
.woocommerce ul.products,
#qodef-woo-page ul.products,
.qodef-woo-shortcode ul.products {
	display: grid !important;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
	float: none;
}

/* O WooCommerce ainda usa clearfix nesta lista; com grelha estorva */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/* Paginação dos arquivos do WooCommerce com o mesmo desenho da grelha da
   loja: caixas com contorno, activa a verde. */
.woocommerce nav.woocommerce-pagination {
	margin-top: 34px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: visible;
	list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li::before {
	content: none;
	display: none;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers,
#qodef-woo-page nav.woocommerce-pagination ul li a.page-numbers,
#qodef-woo-page nav.woocommerce-pagination ul li span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #555;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 0;
	transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out;
}

.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
#qodef-woo-page nav.woocommerce-pagination ul li a.page-numbers:hover {
	color: var(--ab-green);
	border-color: var(--ab-green);
	background-color: #fff;
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
#qodef-woo-page nav.woocommerce-pagination ul li .page-numbers.current {
	color: #fff;
	background-color: var(--ab-green);
	border-color: var(--ab-green);
}

.woocommerce nav.woocommerce-pagination ul li .page-numbers.dots,
#qodef-woo-page nav.woocommerce-pagination ul li .page-numbers.dots {
	color: #aaa;
	background: transparent;
	border-color: transparent;
}

/* Rede de segurança: apanha qualquer ligação ou número da paginação, mesmo
   que o tema não use as classes .page-numbers do WooCommerce. */
.woocommerce-pagination a,
.woocommerce-pagination > ul > li > a,
.woocommerce-pagination > ul > li > span,
#qodef-woo-page .woocommerce-pagination a,
#qodef-woo-page .woocommerce-pagination > ul > li > span {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #555;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 0;
}

.woocommerce-pagination a:hover,
#qodef-woo-page .woocommerce-pagination a:hover {
	color: var(--ab-green);
	border-color: var(--ab-green);
}

.woocommerce-pagination .current,
#qodef-woo-page .woocommerce-pagination .current {
	color: #fff !important;
	background-color: var(--ab-green) !important;
	border-color: var(--ab-green) !important;
}

/* Título do arquivo de categoria (reactivado no functions.php) */
.woocommerce-products-header {
	margin: 0 0 30px;
}

.woocommerce-products-header__title,
#qodef-woo-page .woocommerce-products-header__title {
	font-family: Roboto, sans-serif;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.188em;
	letter-spacing: 0;
	color: var(--ab-ink);
	margin: 0 0 10px;
	text-align: left;
}

.woocommerce-products-header .term-description {
	font-size: 15px;
	line-height: 1.75;
	color: var(--ab-body);
	max-width: 720px;
}

.woocommerce-products-header .term-description p:last-child {
	margin-bottom: 0;
}

@media only screen and (max-width: 768px) {

	.woocommerce-products-header__title,
	#qodef-woo-page .woocommerce-products-header__title {
		font-size: 24px;
	}

	.woocommerce-products-header {
		margin-bottom: 22px;
	}
}

/* Esconde o selector de vista (grelha / lista) na barra de resultados.
   Em vez de o apanhar pela classe - que vem do módulo de filtros do tema e
   pode mudar - escondemos tudo o que esteja nessa barra e NÃO seja a
   contagem de resultados ou a ordenação do WooCommerce. Assim não há risco
   de esconder por engano o que queremos manter. */
.qodef-woo-results > *:not(.woocommerce-result-count):not(.woocommerce-ordering):not(form) {
	display: none !important;
}

/* O wrapper da lista não é grelha nenhuma: é apenas a caixa que a envolve.
   Fica a bloco e à largura toda, para a grelha lá dentro poder respirar. */
#qodef-woo-page .qodef-woo-product-list,
.qodef-woo-shortcode .qodef-woo-product-list {
	display: block;
	width: 100%;
}

/* Cada cartão ocupa a sua célula da grelha. O min-width: 0 é essencial:
   sem ele um item de grelha nunca encolhe abaixo do conteúdo e a linha
   transborda. */
.woocommerce ul.products li.product,
#qodef-woo-page ul.products li.product,
.qodef-woo-shortcode ul.products li.product {
	width: auto !important;
	max-width: none !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	float: none !important;
	clear: none !important;
}

.woocommerce ul.products.columns-1 {
	--ab-cols: 1;
}

.woocommerce ul.products.columns-2 {
	--ab-cols: 2;
}

.woocommerce ul.products.columns-3 {
	--ab-cols: 3;
}

.woocommerce ul.products.columns-4 {
	--ab-cols: 4;
}

.woocommerce ul.products.columns-5 {
	--ab-cols: 5;
}

/* O corpo do cartão também precisa de poder encolher dentro da célula,
   senão o título longo alarga a coluna e desalinha a grelha toda. */
.ab-prod,
.ab-prod__body,
.ab-prod__title,
.ab-prod__cat,
.ab-prod__desc {
	min-width: 0;
}

.ab-prod__title,
.ab-prod__cat {
	overflow-wrap: anywhere;
}

@media only screen and (max-width: 1024px) {

	.woocommerce ul.products,
	#qodef-woo-page ul.products,
	.qodef-woo-shortcode ul.products {
		--ab-cols: 3;
	}
}

@media only screen and (max-width: 768px) {

	.woocommerce ul.products,
	#qodef-woo-page ul.products,
	.qodef-woo-shortcode ul.products {
		--ab-cols: 2;
		gap: 12px;
	}
}

@media only screen and (max-width: 480px) {

	.woocommerce ul.products,
	#qodef-woo-page ul.products,
	.qodef-woo-shortcode ul.products {
		--ab-cols: 1;
	}
}

/* ==========================================================================
   BARRA LATERAL DA LOJA
   Estiliza os widgets nativos do WooCommerce (categorias, filtro por preço e
   filtro por atributo). A lógica de filtragem é a do WooCommerce; aqui só se
   trata do aspeto.
   ========================================================================== */

.widget_product_categories .widget-title,
.widget_price_filter .widget-title,
.widget_layered_nav .widget-title,
.widget_layered_nav_filters .widget-title {
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #999;
	margin: 0 0 14px;
}

/* ---------------------------------------------- Lista de categorias */

/* A bola é o marcador da própria lista, definido pelo tema num selector com
   ID. Só se apaga com !important, e tem de ser aplicado ao <ul> E ao <li>. */
.widget_product_categories ul,
.widget_product_categories li,
.widget_layered_nav ul,
.widget_layered_nav li {
	list-style: none !important;
	list-style-type: none !important;
	list-style-image: none !important;
}

.widget_product_categories ul,
.widget_layered_nav ul {
	margin: 0;
	padding: 0;
}

/* Cada linha é uma grelha: ícone + nome à esquerda, contagem encostada à
   direita. Sem traços separadores - o espaçamento chega para separar. */
.widget_product_categories li,
.widget_layered_nav li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

/* Sem marcadores. O tema desenha-os com ::before a partir de um selector com
   ID, por isso é preciso !important para os apagar - é a única forma de
   vencer um selector de maior peso. */
/* A bola não é o marcador da lista: o tema desenha-a como um pseudo-elemento
   com fundo redondo, num selector .widget.widget_XXX ul li:before. Para a
   apagar é preciso igualar essa especificidade (duas classes + ul + li) e
   anular também o tamanho e o fundo, não só o content. */
.widget.widget_product_categories ul li::before,
.widget.widget_product_categories ul li::after,
.widget.widget_product_categories ul li > a::before,
.widget.widget_layered_nav ul li::before,
.widget.widget_layered_nav ul li::after,
.widget.widget_layered_nav ul li > a::before {
	content: none !important;
	display: none !important;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	background: none !important;
	border-radius: 0 !important;
}

.widget_product_categories li::marker,
.widget_layered_nav li::marker {
	content: "";
}

/* Um filete entre itens */
.widget_product_categories li + li,
.widget_layered_nav li + li {
	border-top: 1px solid var(--ab-line, #ebebeb);
}

/* As subcategorias ocupam a linha inteira por baixo do pai. Sem isto o
   <ul> filho entrava na mesma linha do flex e ficava como coluna ao lado.
   O comportamento é o normal do WooCommerce: ficam visíveis, apenas com
   recuo e um filete a marcar a hierarquia. */
.widget_product_categories li > .children {
	display: block;
	flex: 0 0 100%;
	width: 100%;
	margin: 0;
	padding-left: 14px;
	border-left: 1px solid var(--ab-line, #ebebeb);
}

.widget_product_categories li > .children li a {
	font-size: 13px;
	color: #666;
}

.widget_product_categories li a,
.widget_layered_nav li a {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	/* Folga igual acima e abaixo, para o filete não colar ao texto */
	padding: 13px 0;
	font-size: 14px;
	line-height: 1.4;
	color: #444;
	text-decoration: none;
	transition: color .2s ease-in-out;
}

/* Os ícones das categorias mantêm-se, com tamanho uniforme */
.widget_product_categories li a img,
.widget_product_categories li a svg,
.widget_product_categories li a i {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	font-size: 16px;
	line-height: 1;
	object-fit: contain;
}

.widget_product_categories li a:hover,
.widget_layered_nav li a:hover {
	color: #297F42;
}

.widget_product_categories li.current-cat > a,
.widget_layered_nav li.chosen > a {
	color: #297F42;
	font-weight: 700;
}

/* A contagem, em pastilha à direita. Os parênteses que o WooCommerce
   imprime são retirados no functions.php. */
.widget_product_categories li .count,
.widget_layered_nav li .count {
	flex: 0 0 auto;
	margin-left: auto;
	min-width: 26px;
	padding: 2px 9px;
	background-color: #f0f0f0;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.7;
	color: #999;
	text-align: center;
}

.widget_product_categories li.current-cat > .count,
.widget_layered_nav li.chosen > .count {
	background-color: var(--ab-green-soft, #EAF2EC);
	color: #297F42;
}

/* Ícone da categoria, injectado no functions.php a partir da imagem do termo */
.widget_product_categories li a .ab-cat-ico {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	object-fit: contain;
	border-radius: 2px;
}

/* ------------------------------------------------- Filtro por preço */

.widget_price_filter .price_slider_wrapper {
	margin-top: 4px;
}

.widget_price_filter .ui-slider {
	height: 4px;
	background-color: #e6e6e6;
	border: 0;
	border-radius: 0;
	margin: 10px 0 18px;
}

.widget_price_filter .ui-slider .ui-slider-range {
	background-color: #297F42;
}

.widget_price_filter .ui-slider .ui-slider-handle {
	width: 14px;
	height: 14px;
	top: -5px;
	background-color: #fff;
	border: 2px solid #297F42;
	border-radius: 50%;
	cursor: grab;
}

.widget_price_filter .price_label {
	font-size: 13px;
	color: #888;
}

.widget_price_filter .price_label .from,
.widget_price_filter .price_label .to {
	font-weight: 700;
	color: #297F42;
}

.widget_price_filter .button {
	padding: 10px 18px;
	font-family: Roboto, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background-color: #297F42;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.widget_price_filter .button:hover {
	background-color: #1f6634;
}

/* ------------------------------- Filtros aplicados (limpar filtro) */

.widget_layered_nav_filters ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.widget_layered_nav_filters li {
	margin: 0;
}

.widget_layered_nav_filters li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	background-color: var(--ab-green-soft, #EAF2EC);
	font-size: 12px;
	color: #297F42;
	text-decoration: none;
}

.widget_layered_nav_filters li a:hover {
	background-color: #297F42;
	color: #fff;
}

/* ==========================================================================
   BARRA DE FILTROS NO TOPO
   Os mesmos widgets da barra lateral, desenhados em linha por cima da grelha.
   Só muda a disposição - o aspecto de cada controlo continua a vir das regras
   .widget_price_filter / .widget_layered_nav acima, que se aplicam aqui
   também. Estas regras levam o prefixo .ab-filtros-topo precisamente para
   ganharem em especificidade sem precisarem de !important.
   ========================================================================== */

/* Os 15px de topo alinham a barra com o cimo da caixa das categorias, que
   arranca um pouco mais acima por estar noutra coluna. */
.ab-filtros-topo {
	margin: 15px 0 26px;
	padding: 20px 24px;
	background-color: #fff;
	border: 1px solid var(--ab-line, #ebebeb);
	border-radius: 0;
}

/* Os filtros correm ao comprido numa linha só, cada um com a largura que
   precisa. Antes esticavam todos por igual (flex: 1 1 180px), o que abria
   buracos entre eles quando eram poucos, e alinhavam pelo topo - com o
   "Vendido por" a ter um título por cima e os outros não, as caixas ficavam
   umas mais acima do que as outras.

   align-items: center põe tudo na mesma linha média, seja qual for a altura
   de cada filtro. */
.ab-filtros-topo__grelha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 34px;
}

.ab-filtros-topo__item {
	flex: 0 0 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* O preço não cresce - fica com a largura que precisa e larga o resto para
   os outros filtros. Antes era ele o mais largo dos três e empurrava o
   terceiro para a linha de baixo. */
.ab-filtros-topo .widget_price_filter {
	flex: 0 1 290px;
}

/* Com espaço, os filtros ficam todos na mesma linha em vez de irem
   passando para baixo à medida que se acrescentam. Encolhem em conjunto,
   que é o que o min-width: 0 acima permite. Abaixo desta largura volta a
   valer o flex-wrap e vão mudando de linha conforme couberem. */
@media only screen and (min-width: 860px) {

	.ab-filtros-topo__grelha {
		flex-wrap: nowrap;
	}
}

/* O título fica na mesma linha do que filtra - "Vendido por: Unidade Caixa" -
   em vez de uma etiqueta por cima. É o que o mockup mostra e é o que mantém
   toda a barra a uma só altura. */
.ab-filtros-topo .widget_layered_nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

/* A margem tem de vir num selector com o mesmo peso ou mais do que a regra dos
   títulos das barras laterais, mais acima neste ficheiro:

     .widget_layered_nav .widget-title { margin: 0 0 14px }   (duas classes)

   Uma classe só - .ab-filtros-topo__titulo - perdia, e os 14px de baixo
   empurravam o título para fora da linha média dos restantes filtros. */
.ab-filtros-topo__grelha .widget_layered_nav .widget-title,
.ab-filtros-topo__titulo {
	margin: 0;
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #999;
}

/* Os termos deixam de empilhar e passam a correr ao comprido */
.ab-filtros-topo .widget_layered_nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
}

.ab-filtros-topo .widget_layered_nav li,
.ab-filtros-topo .widget_layered_nav li + li {
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
}

/* O filtro por atributo em dropdown. As propriedades são as mesmas de
   .ab-shop__sort select, para ficar igual ao "Ordenar por" - incluindo a seta,
   que é a do browser e só aparece por não se mexer no appearance. O prefixo
   #qodef-woo-page está aqui porque nos arquivos de categoria o tema desenha os
   selects com selectores de ID, que pesam mais do que uma classe sozinha. */
.ab-filtros-topo select,
#qodef-woo-page .ab-filtros-topo select {
	/* width: auto e não 100%: o item já não estica, portanto um select a 100%
	   ficava do tamanho do seu próprio conteúdo e saltava de largura conforme
	   a marca escolhida. O min-width segura-o quieto. */
	width: auto;
	min-width: 190px;
	max-width: 100%;
	height: auto;
	/* O tema dá margin: 31px 0 17px a todos os <select>. Dentro da barra isso
	   fazia o filtro das marcas ocupar 85px de altura contra os 30px dos
	   vizinhos, e era ele que abria o espaço a mais na linha. */
	margin: 0;
	padding: 9px 12px;
	font-family: Roboto, sans-serif;
	font-size: 13px;
	color: var(--ab-ink, #2c2c2c);
	background-color: #fff;
	border: 1px solid var(--ab-line, #ebebeb);
	border-radius: 0;
	cursor: pointer;
}

.ab-filtros-topo select:focus,
#qodef-woo-page .ab-filtros-topo select:focus {
	border-color: var(--ab-green, #297F42);
	outline: 0;
}

.ab-filtros-topo .woocommerce-widget-layered-nav-dropdown {
	margin: 0;
}

/* Cursor, intervalo e botão numa linha só, com o botão encostado à direita */
.ab-filtros-topo .widget_price_filter .price_slider_wrapper {
	margin-top: 0;
}

.ab-filtros-topo .widget_price_filter .price_slider {
	margin-bottom: 16px;
}

.ab-filtros-topo .widget_price_filter .price_slider_amount {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.ab-filtros-topo .widget_price_filter .price_label {
	order: 1;
}

.ab-filtros-topo .widget_price_filter .button {
	order: 2;
	margin-left: auto;
}

/* O .clear do WooCommerce parte a linha ao meio se for deixado no fluxo */
.ab-filtros-topo .widget_price_filter .price_slider_amount .clear {
	display: none;
}

/* Dentro do painel dobrável de mobile, a barra deixa de ser uma caixa: o
   painel já tem contorno e espaçamento próprios, e uma caixa dentro da outra
   ficava com duas molduras. Este aninhamento só existe quando o JavaScript
   move a barra para lá, ou seja, só em ecrã estreito - não é preciso media
   query nenhuma para o limitar. */
.ab-filtros__corpo .ab-filtros-topo {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Empilhados, porque a coluna do painel é estreita */
.ab-filtros__corpo .ab-filtros-topo__grelha {
	display: block;
}

.ab-filtros__corpo .ab-filtros-topo__item {
	margin-bottom: 22px;
}

@media only screen and (max-width: 680px) {

	.ab-filtros-topo {
		padding: 16px 18px;
	}

	/* Em ecrã estreito cada filtro ocupa a linha toda - lado a lado ficavam
	   duas colunas de poucos centímetros. */
	.ab-filtros-topo__item,
	.ab-filtros-topo .widget_price_filter {
		flex: 1 1 100%;
	}
}

/* O botão vem do template do WooCommerce, para manter o AJAX */
.ab-prod__action .button,
.ab-prod__action .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 13px 18px;
	font-family: Roboto, sans-serif;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .08em;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	background-color: var(--ab-green);
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color .3s ease-in-out;
}

.ab-prod__action .button:hover,
.ab-prod__action .added_to_cart:hover {
	color: #fff;
	background-color: var(--ab-green-dark);
}

.ab-prod__action .added_to_cart {
	margin-top: 8px;
	color: var(--ab-green);
	background-color: transparent;
	border-color: var(--ab-green);
}

.ab-prod__action .added_to_cart:hover {
	color: #fff;
	background-color: var(--ab-green);
}

/* ---------------------------------------------------------- AB - Categorias */

.ab-cats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
}

.ab-cat {
	margin: 0;
}

.ab-cat__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	height: 100%;
	padding: 20px 12px;
	text-align: center;
	text-decoration: none;
	background-color: var(--ab-surface);
	border: 1px solid var(--ab-line);
	transition: background-color .2s ease-in-out, border-color .2s ease-in-out, transform .2s ease-in-out;
}

/* Só os cartões com link reagem ao rato: um cartão sem destino não deve
   parecer clicável. */
a.ab-cat__inner:hover,
a.ab-cat__inner:focus-visible {
	background-color: #fff;
	border-color: var(--ab-green);
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(41, 127, 66, .14);
}

a.ab-cat__inner:focus-visible {
	outline: 2px solid var(--ab-green);
	outline-offset: 2px;
}

.ab-cat__inner .ab-cf__ico {
	color: var(--ab-red);
	transition: transform .2s ease-in-out;
}

a.ab-cat__inner:hover .ab-cf__ico,
a.ab-cat__inner:focus-visible .ab-cf__ico {
	transform: scale(1.14);
}

.ab-cat__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--ab-ink);
	transition: color .2s ease-in-out;
}

a.ab-cat__inner:hover .ab-cat__name,
a.ab-cat__inner:focus-visible .ab-cat__name {
	color: var(--ab-green);
}

.ab-cat__desc {
	font-size: 12px;
	line-height: 1.4;
	color: #999;
}

/* Cartão verde, tipo "Ver tudo" */
.ab-cat--destaque .ab-cat__inner {
	background-color: var(--ab-green);
	border-color: var(--ab-green);
}

.ab-cat--destaque .ab-cat__inner .ab-cf__ico,
.ab-cat--destaque .ab-cat__name {
	color: #fff;
}

.ab-cat--destaque .ab-cat__desc {
	color: rgba(255, 255, 255, .75);
}

.ab-cat--destaque a.ab-cat__inner:hover,
.ab-cat--destaque a.ab-cat__inner:focus-visible {
	background-color: var(--ab-green-dark);
	border-color: var(--ab-green-dark);
	box-shadow: 0 10px 24px rgba(41, 127, 66, .3);
}

/* No cartão verde o texto tem de continuar branco ao passar o rato,
   senão a regra de cima punha-o verde sobre verde. */
.ab-cat--destaque a.ab-cat__inner:hover .ab-cat__name,
.ab-cat--destaque a.ab-cat__inner:focus-visible .ab-cat__name,
.ab-cat--destaque a.ab-cat__inner:hover .ab-cf__ico,
.ab-cat--destaque a.ab-cat__inner:focus-visible .ab-cf__ico {
	color: #fff;
}

/* -------------------------------------------------------- AB - Depoimentos */

.ab-quotes {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.ab-quote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 24px;
	background-color: var(--ab-surface);
}

.ab-quote__stars {
	display: flex;
	gap: 3px;
	margin-bottom: 14px;
}

.ab-quote__stars svg {
	width: 16px;
	height: 16px;
	color: #E0A32B;
}

.ab-quote__text {
	flex: 1;
	font-size: 14px;
	font-style: normal;
	line-height: 1.75;
	color: #444;
	margin: 0 0 18px;
	padding: 0;
	border: 0;
	quotes: "\201C" "\201D";
}

.ab-quote__text::before {
	content: open-quote;
}

.ab-quote__text::after {
	content: close-quote;
}

.ab-quote__author {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ab-quote__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: cover;
}

.ab-quote__avatar--initials {
	background-color: var(--ab-green-soft);
	color: var(--ab-green);
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.ab-quote__name {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ab-body);
	margin: 0;
}

/* ------------------------------------------------------- CTA em verde escuro */

.ab-cf__cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ab-cf__cta--center .ab-cf__cta-actions {
	justify-content: center;
}

.ab-cf__cta--right .ab-cf__cta-actions {
	justify-content: flex-end;
}

.ab-cf__cta--escuro .ab-cf__section-title {
	color: #fff;
}

.ab-cf__cta--escuro .ab-cf__cta-text {
	color: rgba(255, 255, 255, .85);
}

.ab-cf__cta--escuro .ab-cf__btn {
	color: var(--ab-green);
	background-color: #fff;
	border-color: #fff;
}

.ab-cf__cta--escuro .ab-cf__btn:hover {
	color: var(--ab-green-dark);
	background-color: var(--ab-green-soft);
	border-color: var(--ab-green-soft);
}

.ab-cf__cta--escuro .ab-cf__btn--contorno {
	color: #fff;
	background-color: transparent;
	border-color: rgba(255, 255, 255, .6);
}

.ab-cf__cta--escuro .ab-cf__btn--contorno:hover {
	color: var(--ab-green);
	background-color: #fff;
	border-color: #fff;
}

/* --------------------------------------------------------- Responsividade */

@media only screen and (max-width: 1024px) {

	.ab-hero--media {
		gap: 32px;
	}

	.ab-stat__value {
		font-size: 30px;
	}
}

@media only screen and (max-width: 768px) {

	/* O hero passa a uma coluna e a imagem vai sempre para baixo */
	.ab-hero--media {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.ab-hero--invertido .ab-hero__media {
		grid-column: auto;
		grid-row: auto;
	}

	.ab-hero__actions {
		margin-top: 24px;
	}

	.ab-hero__actions .ab-cf__btn {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ab-head--com-link {
		align-items: flex-start;
		gap: 14px;
	}

	.ab-head--com-link .ab-head__link {
		margin-top: 0;
	}

	/* Sem linhas verticais numa grelha de 2 colunas */
	.ab-stats--sep .ab-stat + .ab-stat {
		border-left: 0;
	}

	.ab-stat {
		padding: 14px 8px;
	}

	.ab-stat__value {
		font-size: 26px;
	}

	.ab-prod__body {
		padding: 14px;
	}

	.ab-quote {
		padding: 20px;
	}

	.ab-cat__inner {
		padding: 16px 10px;
	}

	.ab-cf__cta-actions {
		flex-direction: column;
	}

	.ab-cf__cta-actions .ab-cf__btn {
		width: 100%;
		justify-content: center;
	}
}

@media only screen and (max-width: 480px) {

	.ab-cat__name {
		font-size: 13px;
	}

	.ab-cat__desc {
		display: none;
	}

	.ab-hero__actions {
		flex-direction: column;
	}

	.ab-hero__actions .ab-cf__btn {
		width: 100%;
	}
}

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

	.ab-prod,
	.ab-prod__media img,
	.ab-cat__inner,
	.ab-hero-slide,
	.ab-hero-dot {
		transition: none;
	}

	.ab-prod:hover .ab-prod__media img,
	a.ab-cat__inner:hover,
	.ab-hero-dot.is-active {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   AB - Cestas: blocos de direcionamento para as cestas familiares
   ---------------------------------------------------------------------------
   O cartão é o mesmo do produto: as regras estão na secção "AB - Produtos" e
   não se repetem aqui. Só entra o que distingue a cesta - a imagem em retrato
   e o botão, que aqui é uma ligação para a cesta e não o botão de compra do
   WooCommerce.

   O .ab-prod__cta não usa a classe .button de propósito. O tema estiliza os
   botões do loop com selectores de ID (#qodef-woo-page), que ganham às classes
   e obrigavam a repetir aqui a guerra de especificidade que está na secção do
   cartão de produto.
   ------------------------------------------------------------------------- */

/* A proporção é escolhida no painel; esta é a que vale se o campo vier vazio,
   por exemplo em blocos criados antes de o controlo existir. */
.ab-prod--cesta .ab-prod__media img {
	aspect-ratio: 3 / 4;
}

/* O link ocupa o cartão todo, para a área clicável ser o cartão e não apenas
   o título ou o botão. */
.ab-prod__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

/* É o link que recebe o foco, por isso o contorno tem de aparecer à volta do
   cartão inteiro e não de um pedaço dele. */
.ab-prod__link:focus-visible {
	outline: 2px solid var(--ab-green);
	outline-offset: 3px;
}

.ab-prod__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 11px 18px;
	border: 1px solid transparent;
	background-color: var(--ab-green);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background-color .2s ease-in-out;
}

.ab-prod--cesta .ab-prod__title {
	transition: color .2s ease-in-out;
}

/* O título e o botão reagem ao rato em qualquer ponto do cartão: o cartão
   inteiro é o link, e estes dois são a sua indicação visível. O :focus-visible
   dá o mesmo destaque a quem navega por teclado, que de outro modo só via o
   contorno. */
.ab-prod--cesta:hover .ab-prod__title,
.ab-prod__link:focus-visible .ab-prod__title {
	color: var(--ab-green);
}

.ab-prod--cesta:hover .ab-prod__cta,
.ab-prod__link:focus-visible .ab-prod__cta {
	background-color: var(--ab-green-dark);
}

/* Botão no fim da secção, a levar à página com todas as cestas. */
.ab-cestas-cta {
	margin: 28px 0 0;
	text-align: center;
}

.ab-cestas-cta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 30px;
	border: 1px solid var(--ab-green);
	background-color: transparent;
	color: var(--ab-green);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.ab-cestas-cta__link:hover,
.ab-cestas-cta__link:focus {
	background-color: var(--ab-green);
	color: #fff;
}

.ab-cestas-cta__link:focus-visible {
	outline: 2px solid var(--ab-green-dark);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   AB - Newsletter (rodapé)
   ------------------------------------------------------------------------- */

.ab-news__texto {
	margin: 0 0 14px;
}

.ab-news__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: stretch;
}

.ab-news__campo {
	flex: 1 1 180px;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--ab-line, #d9ded8);
	border-radius: 8px;
	background-color: #fff;
	color: var(--ab-ink, #1d2a22);
	font-size: 15px;
	line-height: 1.3;
}

.ab-news__campo::placeholder {
	color: #7c8a80;
	opacity: 1;
}

.ab-news__campo:focus-visible {
	outline: 2px solid var(--ab-green, #0f7a45);
	outline-offset: 1px;
}

.ab-news__btn {
	flex: 0 0 auto;
	padding: 11px 24px;
	border: 1px solid var(--ab-green, #0f7a45);
	border-radius: 8px;
	background-color: var(--ab-green, #0f7a45);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease;
}

.ab-news__btn:hover,
.ab-news__btn:focus-visible {
	background-color: var(--ab-green-dark, #0a5c34);
}

.ab-news__aviso {
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.4;
}

.ab-news__aviso--ok {
	background-color: var(--ab-green-soft, #e8f4ec);
	color: var(--ab-green-dark, #0a5c34);
}

.ab-news__aviso--erro {
	background-color: var(--ab-warn-bg, #fdecea);
	color: var(--ab-warn-ink, #8a2b1f);
}

/* O isco tem de continuar a existir no formulário para o robô o preencher,
   mas nunca pode ser visto nem alcançado por teclado. */
.ab-news__isco {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
   Newsletter dentro do rodapé — acerto de especificidade
   ---------------------------------------------------------------------------
   O tema-mãe pinta os campos do rodapé com

       #qodef-page-footer input[type="email"] { color:#fff; background:transparent }

   Um selector com ID ganha a uma classe só, por isso o .ab-news__campo acima
   perdia: o texto e o placeholder saíam brancos por cima do verde claro do
   rodapé - ilegíveis - e o fundo branco do campo nunca chegava a aparecer.

   A correcção é igualar a especificidade, não pôr !important: assim continua a
   poder ser sobreposto mais à frente sem uma guerra de importâncias.

   Campo sem fundo próprio: deixa passar o verde claro do rodapé, com texto e
   contorno pretos por cima. É o que o tema já fazia (background:transparent),
   só que com as cores invertidas - o tema punha tudo a branco, que sobre o
   verde claro não se lia.
   ------------------------------------------------------------------------- */

#qodef-page-footer input[type="email"] {
    background-color: transparent;
    color: #000;
    border-color: #000;
}

#qodef-page-footer input[type="email"]::placeholder {
    color: #000;
    opacity: 1;
}

#qodef-page-footer input[type="email"]:focus,
#qodef-page-footer input[type="email"]:focus-visible {
    background-color: transparent;
    color: #000;
    outline: 2px solid var(--ab-green, #0f7a45);
    outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Loja - lista de categorias na barra lateral
   ---------------------------------------------------------------------------
   O pharmacare-core gera uma folha de estilos com a cor principal do tema e
   mete lá dentro, entre muitos outros, o selector do "+" que abre as
   subcategorias. Por isso o ícone saía verde como todo o resto.

   Os selectores abaixo levam o #qodef-page-sidebar à frente: a regra gerada
   tem quatro classes e ganharia a qualquer coisa escrita só com classes, sem
   depender de quem carrega primeiro.
   ------------------------------------------------------------------------- */

#qodef-page-sidebar .qodef-woo-product-categories-list-simple .qodef-product-category .qodef-cat-opener,
#qodef-page-sidebar .qodef-woo-product-categories-list-simple .qodef-product-category .qodef-cat-opener .qodef-e-icon {
    color: var(--ab-red, #D63338);
}

/* Encosto do "+" à direita da linha e linha sem recuos laterais, para as
   categorias ficarem alinhadas com o resto da coluna. O tema deixa o opener em
   right: 15px / top: 13px e o link com padding lateral de 15px e 11px. */
#qodef-page-sidebar .qodef-woo-product-categories-list-simple .qodef-product-category .qodef-cat-opener {
    margin-left: auto;
    right: 5px;
    /* top: initial devolve o posicionamento vertical à posição estática, que
       com o link em align-items: center deixa o ícone a meio da linha. */
    top: initial;
}

#qodef-page-sidebar .qodef-woo-product-categories-list-simple .qodef-product-category .qodef-cat-link {
    padding-left: 0;
    padding-right: 0;
}

/* As subcategorias não têm imagem própria, por isso o WooCommerce punha lá o
   marcador cinzento de "sem fotografia" - um ícone de máquina fotográfica
   repetido em todas as linhas, que não acrescentava nada. As categorias de
   topo mantêm o seu ícone, que esse é real. */
#qodef-page-sidebar .qodef-woo-product-categories-list-simple .children .qodef-cat-image {
    display: none;
}

/* ---------------------------------------------------------------------------
   Loja - distribuição do espaço entre categorias e produtos
   ---------------------------------------------------------------------------
   O que se passava: o #qodef-page-inner do tema é uma grelha fixa de 1300px,
   e num ecrã de 1900px sobravam quase 300px de cada lado sem nada. Dentro
   dela, a barra lateral levava 3 das 12 colunas e os produtos os restantes 9 -
   o que deixava a grelha com 837px e os cartões a 197px. Com imagens lá
   dentro, ficavam pequenos de mais para se ver o produto sem o abrir.

   Duas correcções, ambas presas ao body.ab-loja para não tocarem no resto do
   site:

   1. A grelha da página deixa de estar fixa em 1300px e passa a acompanhar o
      ecrã até 1660px.
   2. A linha deixa de ser feita de floats com push/pull - o tema empurra o
      conteúdo 325px para a direita e puxa a barra lateral 975px para a
      esquerda - e passa a flex. A barra lateral fica com uma largura fixa e os
      produtos ficam com tudo o que sobrar, em vez de uma percentagem.

   O flex precisa de order: no HTML o conteúdo vem primeiro e a barra lateral
   depois; era o push/pull que os trocava visualmente.
   ------------------------------------------------------------------------- */

@media only screen and (min-width: 1025px) {

    body.ab-loja #qodef-page-inner.qodef-content-grid {
        width: auto;
        max-width: 1660px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 30px;
        padding-right: 30px;
    }

    /* Os selectores abaixo repetem a cadeia do tema de propósito. A regra que
       empurra e puxa as colunas é
         .qodef-grid.qodef-layout--template > .qodef-grid-inner
             > .qodef-grid-item.qodef-col-pull--9
       ou seja cinco classes. Sem lhe igualar o peso, o left negativo mantinha-se
       e a barra lateral saía do ecrã pela esquerda - foi o que aconteceu à
       primeira tentativa, com um selector de três classes. */

    body.ab-loja #qodef-page-inner .qodef-grid.qodef-layout--template > .qodef-grid-inner {
        display: flex;
        align-items: flex-start;
        /* Sem espaço entre as duas colunas: a barra lateral já tem o seu
           próprio arranjo interno e os 30px de antes só encolhiam a grelha. */
        gap: 0;
    }

    body.ab-loja #qodef-page-inner .qodef-grid.qodef-layout--template > .qodef-grid-inner > .qodef-grid-item.qodef-page-sidebar-section {
        order: 1;
        flex: 0 0 260px;
        width: 260px;
        max-width: 260px;
        float: none;
        /* O tema não empurra com left: empurra com right (right: 75% na barra
           lateral). Com left:auto, o valor usado de left passa a ser -right, e
           era daí que vinha o -1222px que atirava a coluna para fora do ecrã.
           Zerar os dois é o que resolve. */
        left: auto;
        right: auto;
    }

    body.ab-loja #qodef-page-inner .qodef-grid.qodef-layout--template > .qodef-grid-inner > .qodef-grid-item.qodef-page-content-section {
        order: 2;
        flex: 1 1 0;
        /* Sem isto, um item de flex nunca encolhe abaixo do conteúdo e a
           grelha de produtos empurrava a linha para fora do ecrã. */
        min-width: 0;
        width: auto;
        max-width: none;
        float: none;
        left: auto;
        right: auto;
    }
}

/* ---------------------------------------------------------------------------
   Barra de filtros: Promoção e Marca
   ---------------------------------------------------------------------------
   Os dois filtros próprios do Asa Branca. O "Vendido por" continua a ser o
   widget de atributo do WooCommerce e já tem estilo mais acima.

   A caixa da Promoção é um <a> e não um <input type="checkbox">: o filtro é
   uma navegação - muda o endereço e recarrega - e um link é o que descreve
   isso. O quadrado é desenhado em CSS para poder acompanhar o resto.
   ------------------------------------------------------------------------- */

.ab-filtro-caixa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ab-ink, #2c2c2c);
	font-size: 15px;
	line-height: 1.3;
}

.ab-filtro-caixa__marca {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 1px solid var(--ab-line, #d9ded8);
	border-radius: 3px;
	background-color: #fff;
	transition: background-color .2s ease, border-color .2s ease;
}

.ab-filtro-caixa:hover .ab-filtro-caixa__marca {
	border-color: var(--ab-green, #0f7a45);
}

.ab-filtro-caixa--activa .ab-filtro-caixa__marca {
	border-color: var(--ab-green, #0f7a45);
	background-color: var(--ab-green, #0f7a45);
	/* O visto é desenhado com dois lados de uma caixa, rodados. Evita mais um
	   ficheiro de ícone só para isto. */
	background-image: linear-gradient(transparent, transparent);
	position: relative;
}

.ab-filtro-caixa--activa .ab-filtro-caixa__marca::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.ab-filtro-caixa--activa {
	font-weight: 600;
}

/* O dropdown das marcas não traz aspecto próprio: fica igual aos outros
   selects da barra, que já estão desenhados mais acima em
   ".ab-filtros-topo select". Repetir aqui as mesmas propriedades só fazia com
   que este saísse diferente dos restantes - foi o que aconteceu à primeira,
   com um padding e um border-radius diferentes dos do vizinho. */
.ab-filtro-select:focus-visible {
	outline: 2px solid var(--ab-green, #0f7a45);
	outline-offset: 1px;
}