/*
 * Encomenda Já — estilos da loja.
 * Carregado com a data do ficheiro como versão (inc/aparencia.php): não é preciso mexer em números de versão.
 *
 * Paleta tirada do logótipo: verde #035f3f, amarelo #fbb32b, vermelho #e41a21.
 */

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 200 1000;
	font-display: swap;
	src: url("../fonts/nunito-latin-wght.woff2") format("woff2");
}

:root {
	--ej-green: #035f3f;
	--ej-green-dark: #02402b;
	--ej-green-darker: #012a1d;
	--ej-green-tint: #f2f7f4;
	--ej-yellow: #fbb32b;
	--ej-yellow-dark: #d99412;
	--ej-yellow-tint: #fff7e6;
	--ej-red: #e41a21;
	--ej-ink: #0b2e22;
	--ej-text: #3d4a45;
	--ej-muted: #6b7a74;
	--ej-line: #e2ebe6;
	--ej-radius: 14px;
	--ej-display: "Nunito", "Source Sans Pro", system-ui, sans-serif;
}

/* ---------- Base (toda a loja) ---------- */

h1, h2, h3, h4,
.button, button, input[type="submit"],
.woocommerce-Price-amount,
.ej-btn {
	font-family: var(--ej-display);
}

h1, h2, h3,
.entry-title, .product_title, .woocommerce-products-header__title {
	font-weight: 800;
	letter-spacing: -0.01em;
}

.button, button, input[type="submit"], .added_to_cart {
	border-radius: 10px;
	font-weight: 800;
}

/* Promoção: etiqueta vermelha; preço antigo discreto, preço atual sem sublinhado. */
.onsale {
	background: var(--ej-red);
	border: 0;
	border-radius: 6px;
	color: #fff;
	font-weight: 800;
}

ul.products li.product .price,
.single-product div.product p.price {
	color: var(--ej-ink);
	font-weight: 800;
}

.price del { color: var(--ej-muted); font-weight: 400; opacity: 1; }
.price ins { font-weight: inherit; text-decoration: none; }
.single-product div.product .summary p.price { font-size: 1.7em; }
.star-rating span::before, p.stars a::before, .ej-reviews__stars { color: var(--ej-yellow); }

/* Páginas de texto (políticas, sobre nós…): coluna estreita, mais fácil de ler. As páginas do WooCommerce ficam a toda a largura. */
body.page:not(.woocommerce-page):not(.ej-home) .hentry {
	margin-inline: auto;
	max-width: 780px;
}

body.page:not(.woocommerce-page) .entry-content h2 {
	font-size: 1.35em;
	margin-top: 1.6em;
}

/* ---------- Cabeçalho: só o logótipo, centrado ---------- */

.site-header {
	border-bottom: 1px solid var(--ej-line);
	padding-bottom: 12px;
	padding-top: 12px;
}

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header,
.site-header {
	margin-bottom: 2.617924em;
}

body.ej-home .site-header { margin-bottom: 0 !important; }

/* O seletor com .woocommerce-active é necessário: o Storefront usa-o para dar 73.9% de largura ao branding em desktop. */
.woocommerce-active .site-header .site-branding,
.site-header .site-branding {
	clear: both;
	float: none;
	margin: 0;
	text-align: center;
	width: 100%;
}

.site-header .site-branding .site-description { display: none; }
.site-header .custom-logo-link { display: inline-block; vertical-align: middle; }

.site-header .custom-logo-link img {
	display: block;
	height: 92px;
	margin: 0 auto;
	max-width: none;
	width: auto;
}

@media (max-width: 600px) {
	.site-header .custom-logo-link img { height: 72px; }
}

/* Sem carrinho: esconde o "Voltar ao carrinho" do checkout e o "Ver carrinho" que o WooCommerce junta aos botões. */
.wc-block-components-checkout-return-to-cart-button,
a.added_to_cart {
	display: none !important;
}

.wc-block-checkout__actions_row { justify-content: flex-end; }

/* O Storefront reserva espaço no fundo para a barra móvel (pesquisa/carrinho), que foi removida. */
@media (max-width: 767px) {
	body { margin-bottom: 0 !important; }
}

/* ---------- Peças comuns ---------- */

.ej-wrap {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1180px;
	padding-inline: 24px;
	width: 100%;
}

.ej-inicio ul, .ej-inicio ol, .ej-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Listas que também são contentor (.ej-wrap): repõe o alinhamento que a regra acima anularia. */
.ej-inicio ul.ej-wrap, .ej-footer ul.ej-wrap {
	margin-inline: auto;
	padding-inline: 24px;
}

.ej-inicio a, .ej-footer a { text-decoration: none; }
.ej-inicio p { margin: 0; }
.ej-icon { flex: none; }

.ej-btn {
	align-items: center;
	border-radius: 10px;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 900;
	gap: 0.5em;
	justify-content: center;
	letter-spacing: 0.05em;
	line-height: 1.2;
	padding: 15px 26px;
	text-transform: uppercase;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.ej-btn:hover { transform: translateY(-2px); }
.ej-btn--block { display: flex; width: 100%; box-sizing: border-box; }

.ej-inicio a.ej-btn--primary, .ej-btn--primary {
	background: var(--ej-yellow);
	box-shadow: 0 4px 0 var(--ej-yellow-dark);
	color: var(--ej-ink);
}

.ej-inicio a.ej-btn--dark {
	background: var(--ej-green-dark);
	box-shadow: 0 4px 0 var(--ej-green-darker);
	color: #fff;
}

.ej-badge {
	background: var(--ej-red);
	border-radius: 6px;
	color: #fff;
	display: inline-block;
	font-family: var(--ej-display);
	font-size: 0.75rem;
	font-weight: 900;
	line-height: 1;
	padding: 5px 8px;
}

.ej-eyebrow {
	color: var(--ej-green);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ---------- Página inicial: topo ---------- */

.ej-hero {
	background:
		radial-gradient(900px 500px at 85% 10%, rgba(251, 179, 43, 0.14), transparent 60%),
		linear-gradient(135deg, var(--ej-green-darker) 0%, var(--ej-green) 60%, #0a7d54 100%);
	color: #fff;
	padding: 64px 0 0;
}

.ej-hero__grid {
	align-items: center;
	display: grid;
	gap: 56px;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.ej-pill {
	background: rgba(251, 179, 43, 0.14);
	border: 1px solid rgba(251, 179, 43, 0.45);
	border-radius: 999px;
	color: var(--ej-yellow);
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	padding: 7px 14px;
}

.ej-hero h1 {
	color: #fff;
	font-size: clamp(2.1rem, 4.4vw, 3.5rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin: 22px 0 18px;
}

.ej-hero h1 span { color: var(--ej-yellow); }

.ej-hero__lead {
	color: rgba(255, 255, 255, 0.82);
	font-size: 1.06rem;
	line-height: 1.6;
	max-width: 34em;
}

.ej-hero__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 30px !important;
}

.ej-inicio a.ej-link {
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	color: #fff;
	font-weight: 600;
	padding-bottom: 2px;
}

.ej-inicio a.ej-hero__product {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 20px;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
	color: #fff;
	display: block;
	padding: 18px;
	transition: transform 0.2s ease;
}

.ej-inicio a.ej-hero__product:hover { transform: translateY(-4px); }

.ej-hero__media {
	aspect-ratio: 1 / 1;
	background: #fff;
	border-radius: 14px;
	display: block;
	overflow: hidden;
}

.ej-hero__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.ej-hero__eyebrow {
	color: var(--ej-yellow);
	display: block;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin-top: 16px;
	text-transform: uppercase;
}

.ej-hero__name {
	display: block;
	font-family: var(--ej-display);
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.3;
	margin-top: 6px;
}

.ej-hero__price {
	align-items: center;
	color: var(--ej-yellow);
	display: flex;
	font-size: 1.7rem;
	font-weight: 900;
	gap: 10px;
	margin: 8px 0 16px;
}

.ej-hero__price .ej-badge { margin-left: auto; }
.ej-hero__price del { color: rgba(255, 255, 255, 0.55); font-size: 0.95rem; font-weight: 500; margin-right: 6px; }
.ej-hero__price ins { text-decoration: none; }

.ej-hero__stats {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 56px !important;
	padding-bottom: 40px !important;
	padding-top: 32px !important;
}

.ej-hero__stats strong {
	color: var(--ej-yellow);
	display: block;
	font-family: var(--ej-display);
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	font-weight: 900;
	line-height: 1.1;
}

.ej-hero__stats span { color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; }

/* ---------- Faixa de confiança ---------- */

.ej-trust {
	background: #fff;
	border-bottom: 1px solid var(--ej-line);
	padding: 26px 0;
}

.ej-trust ul {
	display: grid;
	gap: 20px 16px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ej-trust li { color: var(--ej-green); text-align: center; }
.ej-trust strong { color: var(--ej-ink); display: block; font-size: 0.88rem; margin-top: 6px; }
.ej-trust span { color: var(--ej-muted); display: block; font-size: 0.78rem; }

/* ---------- Secções ---------- */

.ej-section { padding: 80px 0; }
.ej-section--tint { background: var(--ej-green-tint); }
.ej-section--warm { background: var(--ej-yellow-tint); }
.ej-section--dark { background: var(--ej-green-darker); color: rgba(255, 255, 255, 0.85); }

.ej-section__head { margin: 0 auto 44px; max-width: 40em; text-align: center; }

.ej-section__head h2 {
	color: var(--ej-ink);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 900;
	margin: 10px 0 12px;
}

.ej-section__head p:not(.ej-eyebrow) { color: var(--ej-muted); }
.ej-section--dark .ej-section__head h2 { color: #fff; }
.ej-section--dark .ej-eyebrow { color: var(--ej-yellow); }
.ej-section__foot { margin-top: 44px !important; text-align: center; }

/* Produtos */

.ej-cards {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ej-card {
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ej-card:hover { box-shadow: 0 18px 40px -22px rgba(1, 42, 29, 0.45); transform: translateY(-4px); }
.ej-card a { color: inherit; display: block; height: 100%; }

.ej-card__media {
	aspect-ratio: 1 / 1;
	background: #f4f7f5;
	display: block;
	overflow: hidden;
	position: relative;
}

.ej-card__media img { display: block; height: 100%; object-fit: cover; width: 100%; }
.ej-card__media .ej-badge { left: 12px; position: absolute; top: 12px; z-index: 1; }
.ej-card__body { display: block; padding: 16px 16px 18px; }
.ej-card__rating { align-items: center; color: var(--ej-muted); display: flex; font-size: 0.8rem; gap: 6px; margin-bottom: 6px; }
.ej-card__rating .star-rating { float: none; font-size: 0.8rem; margin: 0; }

.ej-card__title {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--ej-ink);
	display: -webkit-box;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.35;
	min-height: 2.7em;
	overflow: hidden;
}

.ej-card__price { color: var(--ej-ink); display: block; font-size: 1.2rem; font-weight: 900; margin-top: 10px; }
.ej-card__price del { color: var(--ej-muted); font-size: 0.8rem; font-weight: 400; margin-right: 6px; }
.ej-card__price ins { text-decoration: none; }

/* Razões */

.ej-features {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ej-features li {
	background: #fff;
	border: 1px solid rgba(217, 148, 18, 0.18);
	border-radius: var(--ej-radius);
	padding: 26px;
}

.ej-features__icon {
	align-items: center;
	background: var(--ej-yellow);
	border-radius: 12px;
	color: var(--ej-ink);
	display: inline-flex;
	height: 46px;
	justify-content: center;
	width: 46px;
}

.ej-features h3, .ej-steps h3 { color: var(--ej-ink); font-size: 1.05rem; font-weight: 800; margin: 16px 0 8px; }
.ej-features p, .ej-steps p { color: var(--ej-muted); font-size: 0.92rem; line-height: 1.6; }

/* Passos */

.ej-steps {
	counter-reset: none;
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	position: relative;
}

.ej-steps::before {
	background: linear-gradient(90deg, var(--ej-yellow), var(--ej-green));
	content: "";
	height: 2px;
	left: 16%;
	position: absolute;
	right: 16%;
	top: 58px;
}

.ej-steps li {
	background: #fff;
	border: 1px solid var(--ej-line);
	border-radius: var(--ej-radius);
	padding: 30px 26px;
	position: relative;
	text-align: center;
}

.ej-steps__num {
	align-items: center;
	background: var(--ej-green-dark);
	border: 3px solid var(--ej-yellow);
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	font-family: var(--ej-display);
	font-size: 1.2rem;
	font-weight: 900;
	height: 54px;
	justify-content: center;
	width: 54px;
}

/* Avaliações */

.ej-reviews {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ej-reviews li {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--ej-radius);
	padding: 26px;
}

.ej-reviews blockquote { border: 0; color: rgba(255, 255, 255, 0.9); font-style: italic; margin: 12px 0 16px; padding: 0; }
.ej-reviews__author { color: rgba(255, 255, 255, 0.65); font-size: 0.85rem; }
.ej-inicio .ej-reviews a { color: var(--ej-yellow); }

/* Chamada final */

.ej-cta {
	background: linear-gradient(135deg, var(--ej-yellow) 0%, #ffc85a 100%);
	padding: 72px 0;
	text-align: center;
}

.ej-cta h2 { color: var(--ej-ink); font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 900; margin: 0 0 10px; }
.ej-cta p { color: rgba(11, 46, 34, 0.8); margin-bottom: 28px !important; }

/* ---------- Rodapé ---------- */

.ej-footer {
	background: var(--ej-green-darker);
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.9rem;
}

.ej-footer a { color: rgba(255, 255, 255, 0.86); }
.ej-footer a:hover { color: var(--ej-yellow); }

.ej-footer__trust { background: var(--ej-green-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

.ej-footer__trust ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 34px;
	justify-content: center;
	padding-bottom: 20px;
	padding-top: 20px;
}

.ej-footer__trust li { align-items: center; color: #fff; display: flex; font-size: 0.85rem; font-weight: 600; gap: 8px; }
.ej-footer__trust .ej-icon { color: var(--ej-yellow); height: 18px; width: 18px; }

.ej-footer__cols {
	display: grid;
	gap: 40px;
	grid-template-columns: 1.5fr 1.1fr 1fr 1fr;
	padding-bottom: 52px;
	padding-top: 56px;
}

.ej-footer h2 {
	color: var(--ej-yellow);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	margin: 0 0 16px;
	text-transform: uppercase;
}

.ej-footer__name { color: #fff; font-family: var(--ej-display); font-size: 1.3rem; font-weight: 900; margin: 0 0 2px; }
.ej-footer__slogan { color: var(--ej-yellow); font-size: 0.85rem; margin: 0 0 14px; }
.ej-footer__brand p { line-height: 1.65; }
.ej-footer__contact { margin-top: 16px !important; }
.ej-footer__contact li { margin-bottom: 4px; }
.ej-footer__contact strong { color: #fff; font-weight: 600; }
.ej-footer__nav li { margin-bottom: 9px; }
.ej-footer__pay h2:not(:first-child) { margin-top: 26px; }
.ej-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ej-chips li {
	background: #fff;
	border-radius: 6px;
	color: var(--ej-ink);
	font-size: 0.76rem;
	font-weight: 700;
	padding: 5px 10px;
}

/* Logótipos oficiais dos meios de pagamento: sempre sobre branco e com as cores originais. */
.ej-chips--logos li { align-items: center; display: inline-flex; padding: 7px 12px; }
.ej-chips--logos img { display: block; height: 28px; width: auto; }

.ej-chips--soft li { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); font-weight: 500; }

.ej-footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.8rem;
	padding: 24px 0 30px;
	text-align: center;
}

.ej-footer__legal p { margin: 0 0 6px; }
.ej-footer__id { color: rgba(255, 255, 255, 0.5); }

/* ---------- Ecrãs pequenos ---------- */

@media (max-width: 960px) {
	.ej-hero { padding-top: 44px; }
	.ej-hero__grid { gap: 36px; grid-template-columns: minmax(0, 1fr); }
	.ej-inicio a.ej-hero__product { margin-inline: auto; max-width: 420px; }
	.ej-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ej-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ej-trust ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ej-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ej-section { padding: 60px 0; }
}

@media (max-width: 600px) {
	.ej-wrap { padding-inline: 18px; }
	.ej-cards { gap: 14px; }
	.ej-card__body { padding: 12px; }
	.ej-features, .ej-steps { grid-template-columns: minmax(0, 1fr); }
	.ej-steps::before { display: none; }
	.ej-trust ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ej-trust li:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ej-hero__stats { gap: 12px; }
	.ej-hero__actions .ej-btn { width: 100%; }
	.ej-footer__cols { gap: 32px; grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.ej-btn, .ej-card, .ej-inicio a.ej-hero__product { transition: none; }
}
