/* Gulloza Conversão — badges, urgência, selos, lista de espera */

/* =========================================================================
 * 22. Sistema tipográfico e cor "divertido" (site-wide, 2026-09-17).
 *     Baloo 2 nos títulos, Quicksand no corpo/descrições, variáveis de
 *     cor da marca para usar em badges/ícones/destaques.
 *     Sem !important nas regras de fonte: perdem de propósito contra
 *     seletores mais específicos que já existem (.gz-hero h1 e afins da
 *     /jogo/, .et_pb_slide_N do slider da home) — não é preciso excluir
 *     nada à mão, a cascata resolve.
 * ========================================================================= */
:root {
	--gz-orange: #ff7a00;
	--gz-orange-dark: #e56600;
	--gz-purple: #563cf3;
	--gz-purple-dark: #241d49;
}

h1, h2, h3, h4,
.et_pb_module_header,
.et_pb_text h1, .et_pb_text h2, .et_pb_text h3, .et_pb_text h4,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.product_title,
.gz-xs-wrap > h2 {
	font-family: 'Baloo 2', 'Poppins', sans-serif;
	font-weight: 700;
}

.entry-content p,
.et_pb_text_inner p,
.woocommerce-product-details__short-description,
.woocommerce-product-details__short-description p,
.et_pb_wc_description .et_pb_module_inner p,
.et_pb_wc_description .et_pb_module_inner li,
.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li,
.single-product .summary p,
.woocommerce ul.products li.product .price,
.gz-selos, .gz-trust, .gz-xs {
	font-family: 'Quicksand', 'Poppins', sans-serif;
}

/* Dá uma "pega" fácil para destacar palavras-chave a laranja dentro de
   descrições de produto, sem precisar de reescrever o texto agora — basta
   pôr <strong> à volta da palavra no editor. `.et_pb_wc_description` é o
   módulo Divi que mostra a descrição curta na ficha (confirmado ao vivo,
   já vem com <strong> em várias palavras nas descrições escritas por IA). */
.woocommerce-product-details__short-description strong,
.et_pb_wc_description .et_pb_module_inner strong,
.woocommerce-Tabs-panel strong,
.single-product .summary strong {
	color: var(--gz-orange-dark);
}

/* Cor da marca em links e botões "ghost" (2026-09-17). Os botões cheios
   (.button/.et_pb_button do WooCommerce/Divi) já usam o laranja da marca
   em TODO o site via "All Buttons" do Customizer (all_buttons_bg_color
   #ff5a00, classe .et_pb_button_helper_class no body) — não mexo nisso.
   O que faltava eram os LINKS de texto (herdavam preto do corpo, sem cor
   própria) e o texto dos botões "ghost"/outline (fundo claro), que
   mostravam o azul de origem do Divi (#2ea3f2, nunca decidido a propósito).
   Fica de fora o checkout — a visão do site pede-o "calmo e sem ruído",
   já tem paleta própria (creme/rosa) desde o checkout focado. */
body:not(.woocommerce-checkout) .entry-content a:not(.button):not(.et_pb_button):not(.gz-btn),
body:not(.woocommerce-checkout) .et_pb_text a:not(.button):not(.et_pb_button):not(.gz-btn),
body:not(.woocommerce-checkout) .woocommerce-Tabs-panel a:not(.button):not(.et_pb_button):not(.gz-btn),
body:not(.woocommerce-checkout) .woocommerce-product-details__short-description a:not(.button):not(.et_pb_button):not(.gz-btn),
body:not(.woocommerce-checkout) .posted_in a,
body:not(.woocommerce-checkout) .tagged_as a {
	color: var(--gz-purple);
}
body:not(.woocommerce-checkout) .entry-content a:not(.button):not(.et_pb_button):not(.gz-btn):hover,
body:not(.woocommerce-checkout) .et_pb_text a:not(.button):not(.et_pb_button):not(.gz-btn):hover,
body:not(.woocommerce-checkout) .woocommerce-Tabs-panel a:not(.button):not(.et_pb_button):not(.gz-btn):hover,
body:not(.woocommerce-checkout) .woocommerce-product-details__short-description a:not(.button):not(.et_pb_button):not(.gz-btn):hover,
body:not(.woocommerce-checkout) .posted_in a:hover,
body:not(.woocommerce-checkout) .tagged_as a:hover {
	color: var(--gz-orange-dark);
}

.et_pb_bg_layout_light.et_pb_module.et_pb_button {
	color: var(--gz-purple) !important;
}

/* Urgência de stock */
.gz-urgencia {
	margin: .35em 0 0;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: #b3261e;
	text-transform: uppercase;
}
.single-product .gz-urgencia {
	font-size: .9rem;
	margin: .5em 0 .75em;
}

/* Badge "Novo" */
.gz-badge-novo {
	position: absolute;
	z-index: 3;
	top: 10px;
	left: 10px;
	padding: .2em .55em;
	border-radius: 999px;
	background: #d6006e;
	color: #fff;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.4;
}
.woocommerce ul.products li.product,
.single-product div.product {
	position: relative;
}
.single-product .gz-badge-novo {
	top: 16px;
	left: 16px;
}

/* Selos de confiança (carrinho + checkout) */
.gz-selos {
	list-style: none;
	margin: 1.25em 0 0;
	padding: 1em;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .85em 1.25em;
	border: 1px solid #eadfd0;
	border-radius: 12px;
	background: #fdfaf5;
}
.gz-selos li {
	display: grid;
	grid-template-columns: 2.1em 1fr;
	grid-template-rows: auto auto;
	column-gap: .55em;
	align-items: center;
	margin: 0;
}
/* Círculo à volta do emoji — mesmo estilo da caixa de confiança da ficha
   de produto (.gz-trust__ico), para os dois lugares ficarem consistentes
   em vez do emoji "nu" que estava aqui antes (2026-09-17). */
.gz-selos__ico {
	grid-row: 1 / 3;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffe6cc;
	font-size: 1.1rem;
	line-height: 1;
}
.gz-selos__t {
	font-weight: 700;
	font-size: .86rem;
	line-height: 1.25;
}
.gz-selos__d {
	font-size: .76rem;
	opacity: .7;
	line-height: 1.2;
}
@media (max-width: 600px) {
	.gz-selos {
		grid-template-columns: 1fr;
	}
}

/* "Talvez também gostes" — carrinho (bloco Divi). Classes só nossas. */
.gz-xs-wrap {
	clear: both;
	margin: 2.5em 0 1em;
}
.gz-xs-wrap > h2 {
	font-size: 1.15rem;
	margin: 0 0 .9em;
}
ul.gz-xs {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25em;
}
ul.gz-xs::before,
ul.gz-xs::after { display: none !important; }
.gz-xs__item {
	margin: 0 !important;
	padding: 0;
	list-style: none;
	text-align: center;
	width: auto !important;
	float: none !important;
	/* coluna a toda a altura da célula da grelha, para alinhar o botão */
	display: flex;
	flex-direction: column;
	height: 100%;
}
.gz-xs__link {
	display: block;
	text-decoration: none;
	color: inherit;
	/* absorve a diferença de altura dos nomes, deixando o botão em baixo */
	flex: 1 1 auto;
}
.gz-xs__img img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin-bottom: .5em;
}
.gz-xs__nome {
	display: block;
	font-size: .9rem;
	line-height: 1.3;
	margin-bottom: .25em;
	/* reserva 2 linhas: assim o preço fica ao mesmo nível em todos os cartões */
	min-height: 2.6em;
}
.gz-xs__preco {
	display: block;
	font-weight: 700;
	margin-bottom: .5em;
}
.gz-xs .button {
	font-size: .85rem;
	padding: .5em .9em;
	/* empurra o botão para o fundo do cartão — fica alinhado entre todos
	   (!important porque o CSS do Divi mete margin nos .button) */
	margin-top: auto !important;
	align-self: center;
}
@media (max-width: 782px) {
	ul.gz-xs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
	ul.gz-xs { gap: .75em; }
}

/* Carrinho vazio — sugestões (novidades + mais vendidos) */
.gz-carrinho-vazio-sugestoes {
	margin-top: 2.5em;
}
.gz-grelha-sugestoes {
	margin-top: 2em;
}
.gz-grelha-sugestoes h2 {
	font-size: 1.15rem;
	margin-bottom: .75em;
}

/* Lista de espera — avisar quando chegar */
.gz-restock {
	margin: 1em 0 1.5em;
	padding: 1.1em 1.2em;
	border: 1px solid #eadfd0;
	border-radius: 12px;
	background: #fdfaf5;
}
.gz-restock__t {
	margin: 0 0 .7em;
}
.gz-restock__ok {
	margin: 0;
	font-weight: 600;
	color: #2f7d32;
}
.gz-restock__form {
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
}
.gz-restock__form input[type="email"] {
	flex: 1 1 12em;
	min-width: 0;
	padding: .6em .75em;
	border: 1px solid #d9cbb8;
	border-radius: 8px;
	font-size: .95rem;
}
.gz-restock__form button {
	padding: .6em 1.3em;
	border: 0;
	border-radius: 8px;
	background: #d6006e;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}
.gz-restock__form button:hover {
	background: #b30059;
}
.gz-restock__rgpd {
	margin: .6em 0 0;
	font-size: .74rem;
	opacity: .6;
}

/* =========================================================================
 * Página de produto — reordenar a coluna do resumo:
 * nome → preço → [quantidade + Adicionar + caixa de confiança] → descrição.
 * A coluna do resumo é .et_pb_column_2_tb_body no template "Product page V6".
 * ========================================================================= */
body.single-product .et_pb_column_2_tb_body {
	display: flex;
	flex-direction: column;
}
body.single-product .et_pb_column_2_tb_body > .et_pb_module {
	order: 20; /* qualquer módulo não previsto vai para o fim */
}
body.single-product .et_pb_column_2_tb_body > .et_pb_code_0_tb_body { order: 1; }             /* logótipo da marca */
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_title_0_tb_body { order: 2; }
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_price_0_tb_body { order: 3; }
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_stock_0_tb_body { order: 4; }
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_add_to_cart_0_tb_body { order: 5; }
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_description_0_tb_body { order: 6; }
body.single-product .et_pb_column_2_tb_body > .et_pb_text_0_tb_body { order: 7; }
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_tabs_0_tb_body { order: 8; }
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_related_products_0_tb_body { order: 9; }

/* espaço a seguir ao botão, antes da descrição */
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_add_to_cart_0_tb_body {
	margin-bottom: 6px;
}

/* No telemóvel o logótipo da marca (~107 px + 30 px) empurrava o nome e o
   preço para baixo da dobra / para trás da barra de cookies. Passa para
   depois do botão e fica mais pequeno — nome e preço sobem para a vista.
   (ronda 3) */
@media (max-width: 767px) {
	body.single-product .et_pb_column_2_tb_body > .et_pb_code_0_tb_body {
		order: 6; /* logo depois do botão Adicionar (que é order 5) */
		margin: 4px 0 14px !important;
	}
	body.single-product .et_pb_column_2_tb_body > .et_pb_code_0_tb_body img {
		max-height: 44px;
		width: auto;
	}
	body.single-product .woocommerce-product-gallery { margin-bottom: 6px; }
}

/* =========================================================================
 * Caixa de confiança (a seguir ao botão "Adicionar")
 * ========================================================================= */
.gz-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 4px;
}
.gz-trust__item {
	flex: 1 1 calc(50% - 10px);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid #f2e2cf;
	border-radius: 12px;
	background: #fff8f0;
}
.gz-trust__ico {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #ffe6cc;
	font-size: 18px;
	line-height: 1;
}
.gz-trust__txt {
	display: flex;
	flex-direction: column;
	font-size: .78rem;
	color: #6b6b6b;
	line-height: 1.25;
}
.gz-trust__txt strong {
	font-size: .9rem;
	color: #222;
}
@media (max-width: 480px) {
	.gz-trust__item { flex-basis: 100%; }
}

/* =========================================================================
 * Rodapé "Pagamentos / Entregas / Qualidade / Precisa de ajuda" —
 * o bloco ícone+texto aparecia encostado à esquerda de cada coluna
 * (mais visível no carrinho). Centra o bloco dentro da coluna e o
 * texto por baixo do ícone.
 * ========================================================================= */
body #page-container .et-l .et_pb_row_0_tb_footer.et_pb_row {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1180px;
	width: 92%;
}
/* distribuir as 4 colunas por igual, sem folga a mais à direita */
.et_pb_row_0_tb_footer .et_pb_column {
	justify-content: center;
}
.et_pb_row_0_tb_footer .et_pb_blurb .et_pb_blurb_content {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 240px;
	margin: 0 auto;
}
.et_pb_row_0_tb_footer .et_pb_blurb .et_pb_main_blurb_image {
	margin: 0 0 8px;
}
.et_pb_row_0_tb_footer .et_pb_blurb .et_pb_blurb_container {
	padding: 0;
	text-align: center;
}
.et_pb_row_0_tb_footer .et_pb_blurb .et_pb_blurb_description,
.et_pb_row_0_tb_footer .et_pb_blurb .et_pb_blurb_description p {
	text-align: center !important;
}

/* =========================================================================
 * Faixa "Novidades no teu email" (rodapé) — [gulloza_newsletter_footer]
 * ========================================================================= */
/* a secção/linha/coluna do Divi não devem apertar a faixa */
.gz-nl-section,
.gz-nl-section > .et_pb_row,
.gz-nl-section .et_pb_column {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
.gz-nl {
	background: linear-gradient(90deg, #ff7100, #ff9a2f);
	padding: 22px 20px;
}
.gz-nl__in {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 40px;
}
.gz-nl__txt {
	flex: 1 1 320px;
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.gz-nl__txt strong {
	font-size: 1.15rem;
	line-height: 1.25;
}
.gz-nl__txt span {
	font-size: .86rem;
	opacity: .95;
}
.gz-nl__form {
	flex: 1 1 340px;
}
.gz-nl__row {
	display: flex;
	gap: 8px;
}
.gz-nl__row input[type="email"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: .7em .9em;
	border: 0;
	border-radius: 10px;
	font-size: .95rem;
}
.gz-nl__row button {
	flex: 0 0 auto;
	padding: .7em 1.3em;
	border: 0;
	border-radius: 10px;
	background: #17143a;
	color: #fff;
	font-weight: 800;
	cursor: pointer;
	white-space: nowrap;
}
.gz-nl__row button:hover {
	background: #000;
}
.gz-nl__rgpd {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin-top: 9px;
	font-size: .72rem;
	color: #fff;
	line-height: 1.35;
}
.gz-nl__rgpd a {
	color: #fff;
	text-decoration: underline;
}
.gz-nl__rgpd input {
	margin-top: 2px;
}
@media (max-width: 600px) {
	.gz-nl__row {
		flex-wrap: wrap;
	}
	.gz-nl__row button {
		width: 100%;
	}
}

/* =========================================================================
 * Pop-up "-10% na 1ª compra" (captação de email)
 * ========================================================================= */
.gz-pop[hidden],
.gz-pop__form[hidden],
.gz-pop__done[hidden] { display: none !important; }
.gz-pop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(23, 20, 58, .55);
}
.gz-pop__box {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px 22px;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .5);
	text-align: center;
}
.gz-pop__x {
	position: absolute;
	top: 8px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #999;
	cursor: pointer;
}
.gz-pop__x:hover { color: #333; }
.gz-pop__t {
	display: block;
	font-size: 1.35rem;
	color: #17143a;
	line-height: 1.2;
}
.gz-pop__p {
	margin: .5em 0 1em;
	font-size: .88rem;
	color: #666;
	line-height: 1.45;
}
.gz-pop__form { display: flex; flex-direction: column; gap: 8px; }
.gz-pop__form input[type="email"] {
	padding: .8em .9em;
	border: 1px solid #d9cbb8;
	border-radius: 10px;
	font-size: .95rem;
}
.gz-pop__form button {
	padding: .85em 1em;
	border: 0;
	border-radius: 10px;
	background: #ff7100;
	color: #fff;
	font-weight: 800;
	font-size: 1rem;
	cursor: pointer;
}
.gz-pop__form button:hover { background: #e56600; }
.gz-pop__rgpd {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin-top: 2px;
	font-size: .68rem;
	color: #888;
	line-height: 1.35;
	text-align: left;
}
.gz-pop__rgpd a { color: #888; text-decoration: underline; }
.gz-pop__done p { margin: .3em 0; font-size: .9rem; color: #444; }
.gz-pop__code {
	display: inline-block;
	margin: .4em 0;
	padding: .4em 1em;
	border: 2px dashed #ff7100;
	border-radius: 10px;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: #17143a;
	user-select: all;
}
.gz-pop__hint { font-size: .74rem !important; color: #999 !important; }
.gz-pop__frame { display: none; }

/* =========================================================================
 * 15. Checkout focado (só em body.woocommerce-checkout)
 * ========================================================================= */

/* --- Reforço acima do botão "Finalizar": portes + confiança + pagamentos --- */
.gz-cko {
	margin: 0 0 1.1em;
}
.gz-cko__portes {
	margin: 0 0 .4em;
	font-size: .9rem;
	color: #1d1d1d;
}
.gz-cko__portes strong { color: #d6006e; }
.gz-cko__portes--ok {
	margin-bottom: 1em;
	color: #1a7f37;
}
.gz-cko__portes--ok strong { color: #1a7f37; }
.gz-cko__bar {
	display: block;
	height: 8px;
	margin-bottom: 1em;
	border-radius: 999px;
	background: #fbe3ef;
	overflow: hidden;
}
.gz-cko__bar > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #d6006e;
	transition: width .4s ease;
}
.gz-cko .gz-selos { margin-top: 0; }
/* no checkout, manter os selos a 2 colunas mais tempo (menos scroll antes do botão) */
@media (max-width: 480px) { .gz-cko .gz-selos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 360px) { .gz-cko .gz-selos { grid-template-columns: 1fr; } }
.gz-cko__pay {
	list-style: none;
	margin: .8em 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45em;
	justify-content: center;
}
.gz-cko__pay li {
	margin: 0;
	padding: 0;
	line-height: 0;
	list-style: none !important; /* o Divi força display:list-item + disco nos <li> */
	display: flex;
}
.gz-cko__pay li::before,
.gz-cko__pay li::marker { content: none; }
.gz-cko__pay img {
	display: block;
	border-radius: 3px;
}
body.woocommerce-checkout .gz-cko__pay li { max-height: 20px; }
body.woocommerce-checkout .gz-cko__pay img {
	height: 20px !important;
	width: auto !important;
	max-width: 42px !important;
	max-height: 20px !important;
}

/* --- "Nota à encomenda" recolhida --- */
.gz-cko-toggle {
	display: inline-block;
	margin: .25em 0 .5em;
	padding: 0;
	border: 0;
	background: none;
	color: #ff7100;
	font-size: .88rem;
	font-weight: 700;
	cursor: pointer;
}
.gz-cko-toggle:hover { text-decoration: underline; }

/* --- Cabeçalho do checkout (substitui o do Theme Builder, em PHP) ---
   Mesma barra da marca (fundo laranja + logótipo branco + ícones), sem o
   mega-menu de categorias/países/marcas nem o slider de anúncios. */
.gz-cko-hd {
	background: #ff8a00 center / cover no-repeat;
	border-bottom: 1px solid #f0e6d6;
}
.gz-cko-hd__in {
	max-width: 1240px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5em 1em;
}
.gz-cko-hd__logo { display: inline-flex; line-height: 0; flex: 0 0 auto; }
/* !important: o Divi estila `.et-l img` com specificity de ID (#et-boc) e o
   logótipo saía ao tamanho natural (486×116) a rebentar a barra. */
.gz-cko-hd__logo img { width: auto !important; height: 44px !important; max-width: 210px !important; }
.gz-cko-hd__right {
	display: flex;
	align-items: center;
	gap: 1.1em;
	color: #fff;
	font-size: .84rem;
	font-weight: 600;
}
.gz-cko-hd__right a { color: #fff; text-decoration: none; }
.gz-cko-hd__right a:hover { opacity: .82; }
.gz-cko-hd__right .fa { font-size: 1.05rem; }
.gz-cko-hd__safe { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap; }
@media (max-width: 600px) {
	.gz-cko-hd__in { padding: 10px 15px; justify-content: center; }
	.gz-cko-hd__logo img { height: 30px !important; }
	.gz-cko-hd__right {
		flex: 1 1 100%;
		justify-content: center;
		gap: 1em;
		font-size: .76rem;
	}
	.gz-cko-hd__tel { display: none; }
}

/* fundo creme muito suave em vez de branco puro */
body.woocommerce-checkout #main-content { background: #fdf7ee; }

/* --- Coluna do resumo/pagamento: era um bloco laranja saturado com texto
   branco por cima (contraste ~2:1, ilegível sobretudo no telemóvel). Passa a
   um cartão creme calmo com texto escuro — mais "focado", e legível.
   O gradiente e as cores de texto brancas vêm de MÓDULOS do Theme Builder,
   com regras prefixadas `.et-db #et-boc .et-l` (specificity com ID). Para
   ganhar, prefixamos igual — `#et-boc` sozinho já é 1 ID = bate qualquer
   número de classes. */
#et-boc .et_pb_column_3_tb_body {
	background-image: none !important;
	background-color: #fffaf1 !important;
	border: 1px solid #f0e2cf !important;
	border-radius: 12px !important;
}
#et-boc .et_pb_column_3_tb_body,
#et-boc .et_pb_column_3_tb_body p,
#et-boc .et_pb_column_3_tb_body span,
#et-boc .et_pb_column_3_tb_body label,
#et-boc .et_pb_column_3_tb_body li,
#et-boc .et_pb_column_3_tb_body td,
#et-boc .et_pb_column_3_tb_body th,
#et-boc .et_pb_column_3_tb_body strong,
#et-boc .et_pb_column_3_tb_body h1,
#et-boc .et_pb_column_3_tb_body h2,
#et-boc .et_pb_column_3_tb_body h3,
#et-boc .et_pb_column_3_tb_body h4,
#et-boc .et_pb_column_3_tb_body .et_pb_module_header,
#et-boc .et_pb_column_3_tb_body .payment_box,
#et-boc .et_pb_column_3_tb_body .payment_box * {
	color: #2b2b2b !important;
}
#et-boc .et_pb_column_3_tb_body a:not(.button) { color: #d6006e !important; } /* sem .button: nas categorias esta coluna é a grelha e pintava "Avisar quando voltar" e "Escolher latas" de rosa sobre laranja */
#et-boc .et_pb_column_3_tb_body .required,
#et-boc .et_pb_column_3_tb_body .woocommerce-error,
#et-boc .et_pb_column_3_tb_body abbr[title] { color: #d6006e !important; }
#et-boc .et_pb_column_3_tb_body .payment_box {
	background: #fff3e0 !important;
	border-radius: 8px !important;
}
#et-boc .et_pb_column_3_tb_body .woocommerce-checkout-review-order-table tr,
#et-boc .et_pb_column_3_tb_body .woocommerce-checkout-review-order-table th,
#et-boc .et_pb_column_3_tb_body .woocommerce-checkout-review-order-table td {
	border-color: #efe2cf !important;
}
/* o botão "Finalizar encomenda" mantém-se cor de marca */
#et-boc .et_pb_column_3_tb_body #place_order,
#et-boc .et_pb_column_3_tb_body #place_order span {
	color: #fff !important;
	background: #ff6a00 !important;
}

/* --- Rodapé mínimo do checkout (substitui o do Theme Builder, em PHP) --- */
.gz-cko-ft {
	background: #17110a;
	color: #cfc6ba;
}
.gz-cko-ft__in {
	max-width: 900px;
	margin: 0 auto;
	padding: 26px 24px 32px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .9em;
	text-align: center;
}
.gz-cko-ft__safe { margin: 0; font-size: .82rem; font-weight: 600; color: #fff; }
.gz-cko-ft .gz-cko__pay { margin: 0; }
.gz-cko-ft .gz-cko__pay img { background: #fff; padding: 2px; }
.gz-cko-ft__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .3em 1.1em;
}
.gz-cko-ft__links li { margin: 0; list-style: none !important; }
.gz-cko-ft__links li::before, .gz-cko-ft__links li::marker { content: none; }
.gz-cko-ft__links a::after { content: none !important; } /* o menu do Divi mete um ícone depois do link */
.gz-cko-ft__links a {
	color: #cfc6ba;
	text-decoration: none;
	font-size: .78rem;
}
.gz-cko-ft__links a:hover { color: #fff; text-decoration: underline; }
.gz-cko-ft__copy { margin: 0; font-size: .72rem; color: #8c8479; }

/* o Divi calcula o offset para o cabeçalho fixo — o nosso está em fluxo, tira-o */
body.woocommerce-checkout #page-container { padding-top: 0 !important; }

/* --- Menos distrações: só na página de checkout --- */

/* imagem de cabeçalho gigante + título "Checkout" (1.ª secção do body layout) */
body.woocommerce-checkout .et_pb_section_0_tb_body {
	display: none !important;
}

/* mascote, carrinho flutuante (Woo Fly Cart + Xoo), WhatsApp, pop-up de saída */
body.woocommerce-checkout #gz-gully,
body.woocommerce-checkout [id^="woofc"],
body.woocommerce-checkout .woofc-menu-item,
body.woocommerce-checkout #xoo-wsc-container,
body.woocommerce-checkout .xoo-wsc-container,
body.woocommerce-checkout .xoo-wsc-cart-trigger,
body.woocommerce-checkout .ht_ctc_style,
body.woocommerce-checkout #ht-ctc-chat,
body.woocommerce-checkout #cartbounty-exit-intent-form,
body.woocommerce-checkout #cartbounty-exit-intent-form-backdrop {
	display: none !important;
}

/* barras de portes do plugin — a nossa (.gz-cko__bar) fica */
body.woocommerce-checkout .wpcfb-wrap {
	display: none !important;
}

/* Estrelas de avaliação — o Divi pinta-as com o azul do tema (#2EA3F2).
   Repor dourado em todo o lado onde aparecem (loop, produto, reviews, form). */
.woocommerce .star-rating span::before,
.woocommerce-page .star-rating span::before,
.woocommerce p.stars a::before,
.woocommerce p.stars a:hover ~ a::before,
.woocommerce p.stars.selected a.active ~ a::before,
.woocommerce #reviews #comments .star-rating span::before {
	color: #f5a623 !important;
}
.woocommerce .star-rating::before,
.woocommerce-page .star-rating::before {
	color: #d9d2c4 !important;
}

/* Badge "Promoção!" / .onsale — o CSS do Customizer põe z-index:9999, acima do
   cabeçalho fixo do Divi (z-index:499), por isso ao fazer scroll o selo passava
   por cima do menu. Baixar para ficar só acima da imagem do produto. */
.woocommerce ul.products li.product span.onsale,
.woocommerce div.product span.onsale,
.woocommerce-page ul.products li.product span.onsale,
body span.onsale,
body .onsale {
	z-index: 3 !important;
}

/* ===== Pop-up de saída (CartBounty) — apresentação (§16 do mu-plugin) =====
   O plugin traz o cartão laranja com texto branco e um GIF genérico. Aqui
   fica um cartão creme, texto escuro legível, o Gully em destaque e um
   cabeçalho com garra. A imagem vem do filtro cartbounty_exit_intent_image_html. */
#cartbounty-exit-intent-form-container {
	background: #fffaf1 !important;
	max-width: 560px;
	margin: 0 auto;
	border: 3px solid #ff7100;
	border-radius: 22px;
	padding: 30px 34px 26px !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .4);
}
#cartbounty-exit-intent-form-content {
	display: flex;
	align-items: center;
	gap: 20px;
	text-align: left;
}
#cartbounty-exit-intent-form-content-l {
	flex: 0 0 38%;
	text-align: center !important;
}
#cartbounty-exit-intent-form-content img {
	max-height: 220px !important;
	margin: 0 auto !important;
	animation: gz-cb-hop 1.5s ease-in-out infinite;
}
@keyframes gz-cb-hop {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}
#cartbounty-exit-intent-form-content-r { flex: 1 1 auto; }
#cartbounty-exit-intent-form h2 {
	color: #2b2b2b !important;
	font-size: 27px !important;
	line-height: 1.15 !important;
	margin: 0 0 8px !important;
}
#cartbounty-exit-intent-form p {
	color: #5a5148 !important;
	font-size: 14.5px !important;
	line-height: 1.5 !important;
	padding: 0 0 14px !important;
}
#cartbounty-exit-intent-form input {
	width: 60%;
	border: 2px solid #e6d8c2 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #2b2b2b !important;
	box-shadow: none !important;
}
#cartbounty-exit-intent-form input:focus { border-color: #ff7100 !important; }
#cartbounty-exit-intent-submit {
	width: 38%;
	background: #ff7100 !important;
	color: #fff !important;
	border-radius: 10px !important;
	font-weight: 800 !important;
	opacity: 1 !important;
}
#cartbounty-exit-intent-submit:hover { background: #e56600 !important; }
#cartbounty-exit-intent-close { opacity: .75; }
#cartbounty-exit-intent-close svg line { stroke: #2b2b2b !important; }
#cartbounty-exit-intent-form #cartbounty-exit-intent-consent {
	color: #9a8f7e !important;
	font-size: 11px !important;
	margin-top: 8px;
}
#cartbounty-exit-intent-form #cartbounty-exit-intent-consent a { color: #ff7100 !important; }
@media (max-width: 560px) {
	#cartbounty-exit-intent-form-content { flex-direction: column; text-align: center; gap: 10px; }
	#cartbounty-exit-intent-form-content-l { flex-basis: auto; }
	#cartbounty-exit-intent-form-content img { max-height: 140px !important; }
	#cartbounty-exit-intent-form-container { padding: 26px 20px 22px !important; }
	#cartbounty-exit-intent-form input,
	#cartbounty-exit-intent-submit { display: block; width: 100%; margin: 0 0 8px; }
}

/* =========================================================================
 * 17. Barra de cookies (plugin Cookie Notice) + linha do resumo do checkout
 *     — ronda 3.
 *     A barra era alta (126 px no telemóvel), fixa no fundo, e tapava o
 *     preço do produto no telemóvel e campos do checkout; o "Ok" ficava
 *     atrás do seletor de idioma. Agora: compacta, por cima do seletor, e o
 *     conteúdo ganha folga por baixo enquanto ela está visível.
 * ========================================================================= */
#cookie-notice { z-index: 1000002 !important; }
#cookie-notice .cookie-notice-container {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 8px 14px; max-width: 1180px; margin: 0 auto; padding: 10px 18px !important;
}
#cookie-notice #cn-notice-text {
	font-size: 13px; line-height: 1.4; flex: 1 1 320px; text-align: left;
}
#cookie-notice #cn-notice-buttons {
	display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 !important;
}
#cookie-notice .cn-button {
	font-size: 12.5px !important; padding: 7px 16px !important; margin: 0 !important;
	border-radius: 6px !important; line-height: 1.2 !important;
}
/* "Ok" amarelo (#febd1b) vinha com texto branco — ilegível */
#cookie-notice #cn-accept-cookie { color: #1a1440 !important; font-weight: 700 !important; }
#cookie-notice #cn-refuse-cookie,
#cookie-notice .cn-button[data-link-url] {
	background: transparent !important; color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .45) !important;
}
body.cookies-not-set { padding-bottom: 62px; }
body.cookies-not-set .ht-ctc.ht-ctc-chat { bottom: 84px !important; }
@media (max-width: 600px) {
	#cookie-notice #cn-notice-text { flex-basis: 100%; text-align: center; }
	#cookie-notice .cookie-notice-container { padding: 9px 14px !important; }
	body.cookies-not-set { padding-bottom: 108px; }
	body.cookies-not-set .ht-ctc.ht-ctc-chat { bottom: 122px !important; }
}

/* 17b. Checkout: a barra vai para o topo da página e deixa de ser fixa
   (gulloza-conversao.php §23) — nunca tapa campos nem o botão de pagar. */
body.gz-cn-topo #cookie-notice {
	position: relative !important; top: auto !important; bottom: auto !important;
	left: auto !important; right: auto !important; width: 100% !important;
}
body.gz-cn-topo.cookies-not-set { padding-bottom: 0; }
body.gz-cn-topo.cookies-not-set .ht-ctc.ht-ctc-chat { bottom: 15px !important; }

/* Resumo do checkout: a quantidade "× 1" colava ao preço → lia-se "×12,39 €".
   Preço à direita, com folga da quantidade. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .cart-subtotal td,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td,
body.woocommerce-cart table.cart .product-subtotal {
	text-align: right !important;
	padding-left: 16px !important;
}
body.woocommerce-checkout .product-quantity,
body.woocommerce-cart .product-quantity {
	margin-left: 6px;
	white-space: nowrap;
	opacity: .75;
}

/* Botão "Adicionar" dos cartões de produto — texto preto, a negrito e maior,
   em toda a loja (pedido do Luis, ronda 3). Sem o override, o Divi/tema
   pinta o texto de branco (home) / rosa #d6006e (loja) e o peso fica a 500.
   O botão dos esgotados (.gz-avisar-btn) fica como está. */
.woocommerce ul.products li.product a.button.add_to_cart_button,
.woocommerce ul.products li.product a.button.product_type_variable,
.woocommerce ul.products li.product a.button.product_type_grouped,
.woocommerce ul.products li.product a.button.product_type_external,
.woocommerce ul.products li.product a.added_to_cart,
.woocommerce-page ul.products li.product a.button.add_to_cart_button,
.woocommerce-page ul.products li.product a.button.product_type_variable,
.et-db #et-boc .et-l .woocommerce ul.products li.product a.button.add_to_cart_button {
	color: #1a1a1a !important;
	font-weight: 800 !important;
	font-size: 16px !important;
	letter-spacing: .01em;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}
@media (max-width: 480px) {
	.woocommerce ul.products li.product a.button.add_to_cart_button,
	.woocommerce ul.products li.product a.added_to_cart,
	.et-db #et-boc .et-l .woocommerce ul.products li.product a.button.add_to_cart_button {
		font-size: 15px !important;
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
}

/* =========================================================================
 * 17b. Microinteração nos cartões da loja (2026-09-17) — leve elevação +
 *      sombra ao passar o rato, para o site parecer mais "vivo". Sem
 *      afetar layout (transform não desloca os vizinhos). Desligada em
 *      ecrãs sem rato (media hover:hover) para não atrapalhar o toque.
 * ========================================================================= */
@media (hover: hover) {
	.woocommerce ul.products li.product {
		transition: transform .18s ease, box-shadow .18s ease;
		border-radius: 10px;
	}
	.woocommerce ul.products li.product:hover {
		transform: translateY(-5px);
		box-shadow: 0 12px 22px rgba(0, 0, 0, .09);
	}
}

/* =========================================================================
 * 18. Banner Monster no fim da homepage (migração 40, secção
 *     .gz-home-monster-banner). O CSS por-módulo do Divi (cor do h2, cor do
 *     botão, max-width da imagem) não é regenerado em produção quando a
 *     secção é adicionada por migração — fica aqui, à prova disso. (ronda 3)
 * ========================================================================= */
.gz-home-monster-banner h2 {
	color: #ffffff !important;
}
.gz-home-monster-banner .et_pb_text,
.gz-home-monster-banner .et_pb_text p {
	color: #cfe0d3 !important;
}
.gz-home-monster-banner .et_pb_button {
	background-color: #0aff4f !important;
	color: #04210e !important;
	border: 0 !important;
	border-radius: 46px !important;
	font-weight: 800 !important;
	padding: 13px 30px !important;
}
.gz-home-monster-banner .et_pb_button:hover {
	background-color: #0ae047 !important;
}
.gz-home-monster-banner .et_pb_image {
	max-width: 620px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.gz-home-monster-banner .et_pb_image img {
	border-radius: 18px;
}

/* =========================================================================
 * 19. Faixa de benefícios da homepage (migração 41, .gz-home-tira).
 *     Substitui as 6 caixas brancas gigantes por uma linha compacta de
 *     ícone + frase. (ronda 3)
 * ========================================================================= */
.gz-home-tira {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 20px 20px;
}
.gz-home-tira li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	width: 132px;
	text-align: center;
}
.gz-home-tira img {
	width: 52px;
	height: 52px;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .10));
}
.gz-home-tira span {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #2b2b2b;
}
@media (max-width: 600px) {
	.gz-home-tira { gap: 18px 8px; }
	.gz-home-tira li { width: 31%; min-width: 92px; }
	.gz-home-tira img { width: 42px; height: 42px; }
	.gz-home-tira span { font-size: 11.5px; }
}

/* =========================================================================
 * 20. Box Mistério em destaque na home (shortcode [gulloza_boxes],
 *     .gz-boxes; migração 42). (ronda 3)
 * ========================================================================= */
.gz-boxes {
	max-width: 1180px;
	margin: 0 auto;
	text-align: center;
}
.gz-boxes__head h2 {
	font-size: clamp(22px, 3.2vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	margin: 0 0 8px;
	color: #2b2b2b;
}
.gz-boxes__head p {
	margin: 0 auto 22px;
	max-width: 46ch;
	color: #5a5148;
	font-size: 15px;
	line-height: 1.5;
}
.gz-boxes__head p strong { color: #d24e00; }
.gz-boxes__grid {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.gz-boxes__grid li {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #efe3d2;
	border-radius: 16px;
	padding: 14px 14px 16px;
	box-shadow: 0 8px 22px -14px rgba(58, 42, 26, .25);
}
.gz-boxes__link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.gz-boxes__imgwrap {
	display: block;
	aspect-ratio: 1 / 1;
	margin-bottom: 10px;
	border-radius: 10px;
	overflow: hidden;
	background: #faf6ef;
}
.gz-boxes__imgwrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gz-boxes__nome {
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.25;
	margin-bottom: 4px;
	color: #2b2b2b;
}
.gz-boxes__preco {
	font-weight: 800;
	font-size: 15px;
	color: #d24e00;
	margin-bottom: 12px;
	margin-top: auto;
}
.gz-boxes__btn {
	display: block;
	text-decoration: none;
	text-align: center;
	background: #ff7100;
	color: #1a1a1a !important;
	font-weight: 800;
	font-size: 15px;
	padding: 9px 12px;
	border-radius: 999px;
}
.gz-boxes__btn:hover { background: #e56600; }
.gz-boxes__all a {
	font-weight: 700;
	color: #d24e00;
	text-decoration: none;
}
.gz-boxes__all a:hover { text-decoration: underline; }
@media (max-width: 780px) {
	.gz-boxes__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}
@media (max-width: 380px) {
	.gz-boxes__grid { grid-template-columns: 1fr 1fr; }
	.gz-boxes__nome { font-size: 13px; }
}

/* =========================================================================
 * 21. Barra do menu do header — deixa de ser preta (#060a00) e passa a
 *     índigo profundo da marca + fio laranja em baixo (liga à faixa do
 *     logótipo e aos CTA laranja do site). Hover nos itens. (ronda 3)
 *     A secção .et_pb_section_3_tb_header é gerada pelo template de header
 *     do Theme Builder; o !important ganha à CSS do Divi em prod.
 * ========================================================================= */
/* specificity .et-l--header + 2 classes (0,3,0) + !important para ganhar à
   regra dinâmica do Divi ".et_pb_section_3_tb_header.et_pb_section{...!important}"
   (mesma specificity, mas a do Divi vem depois na cascata em prod). */
.et-l--header .et_pb_section_3_tb_header.et_pb_section {
	background-color: #2b2358 !important;
	background-image: linear-gradient(180deg, #322a66 0%, #241d49 100%) !important;
	border-top: 1px solid rgba(255, 255, 255, .08) !important;
	border-bottom: 3px solid #ff7100 !important;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25) !important;
}
/* itens do menu: um pouco mais nítidos + estado hover (antes não havia) */
@media (min-width: 981px) {
	.gz-nav .et-menu > li > a {
		font-weight: 600 !important;
		border-radius: 8px;
		transition: background-color .12s ease, color .12s ease;
	}
	.gz-nav .et-menu > li > a:hover {
		background-color: rgba(255, 255, 255, .10);
		color: #ffd9b0 !important;
	}
	/* aperta o espaço à direita dos itens com seta (Países/Gomas/Categorias/Marcas)
	   para caber tudo numa linha depois de a Monster virar pílula */
	.gz-nav .et-menu > li.menu-item-has-children > a {
		padding-right: 10px !important;
	}
	/* os itens destacados viram "pílulas" com cantos e respiração */
	.gz-nav .et-menu > li.promo-menu,
	.gz-nav .et-menu > li.viral-menu,
	.gz-nav .et-menu > li.pre-vendas,
	.gz-nav .et-menu > li.menu-monster {
		border-radius: 8px;
		margin: 0 3px;
		align-self: center;
	}
	.gz-nav .et-menu > li.promo-menu > a,
	.gz-nav .et-menu > li.viral-menu > a,
	.gz-nav .et-menu > li.pre-vendas > a,
	.gz-nav .et-menu > li.menu-monster > a {
		padding-left: 10px !important;
		padding-right: 10px !important;
	}
	.gz-nav .et-menu > li.promo-menu > a:hover,
	.gz-nav .et-menu > li.viral-menu > a:hover,
	.gz-nav .et-menu > li.pre-vendas > a:hover,
	.gz-nav .et-menu > li.menu-monster > a:hover {
		background-color: transparent;
		color: #fff !important;
		filter: brightness(1.08);
	}
	/* ⚡ Monster — pílula verde-Monster, MAIOR e a saltar à vista (motor de vendas) */
	.gz-nav .et-menu > li.menu-monster {
		background-color: #0d9a3d !important;
		background-image: linear-gradient(180deg, #18c451 0%, #0a842f 100%) !important;
		box-shadow: 0 0 0 2px rgba(138, 255, 92, .55), 0 4px 16px rgba(10, 132, 47, .55) !important;
		transform: scale(1.06);
		transform-origin: center;
	}
	.gz-nav .et-menu > li.menu-monster > a {
		font-size: 15px !important;
		font-weight: 800 !important;
		letter-spacing: .2px;
		padding-left: 13px !important;
		padding-right: 13px !important;
		text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
	}
	.gz-nav .et-menu > li.menu-monster:hover {
		box-shadow: 0 0 0 2px rgba(138, 255, 92, .9), 0 6px 20px rgba(10, 132, 47, .6) !important;
		transform: scale(1.09);
	}
}
/* Telemóvel: no menu deslizante o ⚡ Monster também fica destacado, a condizer
   com as outras faixas coloridas (Promoções/Produtos Virais/Pré-vendas). Fora
   do @media porque o menu mobile do Divi vive abaixo dos 981px. */
@media (max-width: 980px) {
	.gz-nav .et_mobile_menu li.menu-monster,
	.gz-nav .et-menu li.menu-monster,
	.gz-nav li.menu-monster {
		background-color: #0d9a3d !important;
		background-image: linear-gradient(180deg, #18c451 0%, #0a842f 100%) !important;
	}
	.gz-nav li.menu-monster > a {
		font-weight: 800 !important;
	}
}

/* Slide "Pré-venda Monster Nitro Blue Flash" (migração 43): é o único slide
   do slider da home com o atributo `image` nativo do Divi (fica com a classe
   .et_pb_slide_with_image). A imagem é alta (lata inteira, fundo removido) e
   fica centrada verticalmente dentro do slide — como o slide começa no topo
   da página, a parte de cima da lata ficava por trás do cabeçalho fixo do
   Divi. Trava a altura (cabe com folga) e ancora ao fundo em vez de centrar,
   para ficar sempre abaixo do menu. */
.et_pb_slide_with_image .et_pb_slide_image img {
	max-height: 44vh !important;
	width: auto !important;
}
@media (max-width: 980px) {
	.et_pb_slide_with_image .et_pb_slide_image img {
		max-height: 260px !important;
	}
}
/* A altura do slider vinha do slide "Monster Punk Punch" (removido na
   migração 44), que tinha custom_padding="45vh||45vh" — 90vh ao todo — e
   era esse valor (não qualquer um dos outros slides) que dava altura ao
   slider inteiro. Sem ele, a altura recalcula por slide ativo e fica
   pequena de mais para alguns (ex.: ~337px com "Toda a Monster" ativo,
   cortando o resto). Repõe os mesmos 90vh de antes, agora fixos aqui em
   vez de dependerem de um slide que já não existe. */
.et_pb_fullwidth_slider_0.et_pb_slider,
.et_pb_fullwidth_slider_0 .et_pb_slides,
.et_pb_fullwidth_slider_0 .et_pb_slider_container_inner {
	min-height: 90vh !important;
}
/* 2026-09-12: `min-height:90vh` numa célula de tabela isolada
   (`.et_pb_slider_container_inner` é `display:table-cell`) deixou de
   esticar o slide — confirmado com 4 slides ativos: o `.et_pb_container`
   pai (`display:table`) media só ~430px (altura do texto), a célula lá
   dentro tinha `min-height:827px` computado mas `offsetHeight:0`, sem
   nenhum efeito. `min-height` em `display:table-cell` não é fiável (o
   motor de layout de tabelas trata-o como sugestão, não como o bloco
   normal) — o `.et_pb_slide` ficava só com a altura do texto e sobrava
   espaço em branco por baixo da imagem (users viram isto como "está tudo
   cortado"). Fix: forçar o min-height no PRÓPRIO `.et_pb_container`
   (que é a tabela, não a célula) — tabelas respeitam min-height como
   qualquer bloco normal, e a célula lá dentro estica para acompanhar a
   linha/tabela (comportamento nativo de table-cell). */
.et_pb_fullwidth_slider_0 .et_pb_container {
	min-height: 90vh !important;
}
/* `.et_pb_slider_container_inner` centra o texto (display:table-cell;
   vertical-align:middle nativo do Divi) a meio da altura do slide. Com a
   altura maior de cima, o texto dos slides mais curtos ("Toda a Monster",
   "Viaja pelo mundo") passava a centrar-se demasiado perto do topo e ficava
   por trás do cabeçalho fixo. Ancora ao fundo em vez de centrar — a
   condizer com a imagem da lata, que já está ancorada ao fundo. */
.et_pb_fullwidth_slider_0 .et_pb_slider_container_inner {
	vertical-align: bottom !important;
	padding-bottom: 6vh;
}
/* folga extra a mais para o título de 2 linhas do slide "Pré-venda"
   (fonte maior que os outros slides) nunca ficar coladinho ao cabeçalho. */
.et_pb_slide_1 .et_pb_slide_title {
	margin-top: 50px !important;
}
@media (max-width: 980px) {
	.et_pb_fullwidth_slider_0 .et_pb_slider_container_inner {
		padding-bottom: 30px;
	}
}
/* 2026-09-11, fim da tarde: a sessão desta noite (troca de imagens do
   Nitro e do lineup Monster, slide novo do Van Holten's, contain->cover,
   ajustes de posição) foi revertida a pedido do Luis ("acho que devemos
   por como estava tudo antes de mexer no buner") — voltou tudo ao estado
   de antes de hoje: 3 slides, Nitro com `image` nativo (não
   background_image), "Toda a Monster" outra vez com a v2 + `contain`. Fica
   só a regra de posição do slide "Toda a Monster" (a única que ainda
   precisa — o Nitro usa `image` nativo, não tem background para
   posicionar). */
.et_pb_slide_3 {
	background-position: bottom center !important;
}
/* 2026-09-12: migração 70 — texto do slide "Toda a Monster" passa de
   preto+contorno laranja (migração 51) para branco liso, a condizer com
   os outros 3 slides (Nitro/Mundo/Mega Sour). O contorno deixa de ser
   preciso porque o gradiente escuro por trás (abaixo, mesma técnica dos
   outros 3) já garante legibilidade sozinho — não depende de encontrar a
   cor certa de contorno para cada imagem nova que o slide receber no
   futuro. Regra antiga (preto+laranja) removida daqui. */
.et_pb_slide_3 {
	position: relative;
}
.et_pb_slide_3::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .8) 65%, rgba(0, 0, 0, .9) 100%);
	pointer-events: none;
	z-index: 1;
}
.et_pb_slide_3 .et_pb_container {
	position: relative;
	z-index: 2;
}
/* 2026-09-12: migração 62 troca a imagem do slide "Toda a Monster" pela v6
   (Luis) — mesma proporção 2048×768, `background_color` já atualizado para
   preto na migração (corresponde aos cantos pretos/cinza-escuro da imagem
   nova, não precisa de regra CSS à parte).
   Migração 63 converte o slide "Nitro Blue Flash" (era imagem `image=`
   nativa ao lado do texto) para o MESMO padrão do slide 2: imagem de fundo
   v6 (lata + gelo + fruta, cena completa) com o texto nativo por cima —
   pedido do Luis ("exatamente igual com as frases que tens lá por cima da
   imagem"). Problema visto ao testar em local: o texto (heading "Monster
   Nitro Blue Flash chegou em pré-venda" + descrição) ancora em baixo
   (regra partilhada do slider, `vertical-align:bottom`) e cai exatamente
   por cima do wordmark "MONSTER ENERGY NITRO" da própria lata na imagem —
   ilegível, duas camadas de texto sobrepostas. Um contorno (como no slide
   2) não resolve — não é falta de contraste, é colisão de composição.
   Fix: gradiente escuro só na faixa de baixo do slide (onde o texto
   ancora), independente do que está por baixo na imagem. `::before`
   absoluto + z-index força o texto (`.et_pb_container`, z-index maior) a
   ficar sempre por cima do gradiente. */
.et_pb_slide_1 {
	position: relative;
}
.et_pb_slide_1::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 68%;
	/* 9 out 2026 (migração 120): o slide 1 passou a Vice Guava — roxo do cenário Vice City (era azul do Nitro) */
	background: linear-gradient(to bottom, rgba(26, 4, 42, 0) 0%, rgba(26, 4, 42, .5) 30%, rgba(26, 4, 42, .82) 55%, rgba(26, 4, 42, .94) 100%);
	pointer-events: none;
	z-index: 1;
}
.et_pb_slide_1 .et_pb_container {
	position: relative;
	z-index: 2;
}
/* 2026-09-12: migração 68 — `background_position` como atributo do
   shortcode do slide NÃO tem efeito nenhum (Divi ignora-o silenciosamente
   no módulo et_pb_slide; confirmado: computed style ficava sempre "50%
   50%" apesar do atributo estar gravado certo no post_content). A ÚNICA
   forma que funciona é uma regra CSS a apontar à classe `.et_pb_slide_N`
   — o mesmo padrão já usado no slide 2 (linha ~1289 abaixo). Sem isto, o
   `background_size="contain"` da migração 68 centrava a imagem (letterbox
   metade em cima, metade em baixo) em vez de empurrar tudo para cima. */
.et_pb_slide_9 {
	background-position: bottom center !important;
}
/* 2026-09-12: meio-termo entre `contain` (sobra espaço em cima, queixa do
   Luis: "a imagem continua a vir para baixo, em cima ficou espaço") e
   `cover` (cortava o poste dos países e os marcos do mundo nas pontas,
   queixa anterior). A imagem (3:1) é mais larga que a caixa (~2,3:1) —
   geometricamente impossível encher tudo sem cortar nada nem sobrar nada.
   110% em vez de 100% (contain) reduz o espaço em cima para menos de
   metade, cortando só ~4-5% de cada lado (bem menos que os ~11% do
   `cover` que apagava o poste/torre) — o texto do poste e os marcos do
   mundo perdem só a margem exterior, não o essencial. Testado visualmente
   antes de aplicar. Se ainda incomodar, a única forma de eliminar de vez é
   pedir a imagem numa proporção mais próxima da caixa (~2200×950, 2.3:1)
   em vez de 2172×724 (3:1). */
.et_pb_slide_9 {
	background-size: 110% auto !important;
}
/* 2026-09-12: migração 67, slide "Viaja pelo mundo" (2º) ganhou heading/
   descrição/botão nativos por cima da imagem (antes não tinha nenhum) —
   mesma técnica de gradiente escuro dos slides 0/3: a zona de baixo da
   imagem tem produtos com texto próprio (Van Holten's, Mega Sour, Royal,
   Monster), sem o gradiente o texto novo ficaria ilegível por cima deles. */
.et_pb_slide_9 {
	position: relative;
}
.et_pb_slide_9::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 35%, rgba(0, 0, 0, .8) 65%, rgba(0, 0, 0, .9) 100%);
	pointer-events: none;
	z-index: 1;
}
.et_pb_slide_9 .et_pb_container {
	position: relative;
	z-index: 2;
}
/* 2026-09-12: migração 66, slide novo "Mega Sour Challenge" no fim do
   slider — mesma técnica do slide 0 (gradiente escuro por trás do texto),
   mas com preto neutro em vez de azul-marinho: a imagem tem 3 fundos de
   cor diferente lado a lado (castanho/rosa/verde), nenhuma cor "de marca"
   serve para os 3 ao mesmo tempo — preto neutro funciona com qualquer um. */
.et_pb_slide_4 {
	position: relative;
}
.et_pb_slide_4::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 68%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .85) 55%, rgba(0, 0, 0, .95) 100%);
	pointer-events: none;
	z-index: 1;
}
.et_pb_slide_4 .et_pb_container {
	position: relative;
	z-index: 2;
}
/* 2026-09-12: migração 70 pôs os 4 slides com o mesmo `header_font_size`
   (52px/38px/30px) via atributos do shortcode — mas em PRODUÇÃO o CSS
   dinâmico do Divi para este módulo não regenerou (mesma lição já vista
   com o banner Monster em 2026-09-11: o Divi não recalcula sempre o CSS
   por-módulo quando o post_content muda por migração/WP-CLI, só quando é
   gravado pelo editor visual). Resultado: todos os títulos renderizavam a
   30px mesmo em ecrã grande (o valor "phone", porque
   `header_font_size_last_edited="on|phone"` faz o Divi tratar o valor do
   telemóvel como base quando o CSS por-módulo está desatualizado) e as
   descrições a 14px (nem sequer o valor de telemóvel real, 15px).
   Forçar aqui, sempre, independente do estado da cache do Divi. */
.et_pb_fullwidth_slider_0 .et_pb_slide_title {
	font-size: 52px !important;
	font-weight: 800 !important;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_description {
	font-size: 18px !important;
}
@media (max-width: 980px) {
	.et_pb_fullwidth_slider_0 .et_pb_slide_title {
		font-size: 38px !important;
	}
}
@media (max-width: 767px) {
	.et_pb_fullwidth_slider_0 .et_pb_slide_title {
		font-size: 30px !important;
	}
	.et_pb_fullwidth_slider_0 .et_pb_slide_description {
		font-size: 15px !important;
	}
}
/* 2026-09-12: o Luis reportou que no telemóvel os slides "Escolhe o teu
   país" e "Toda a Monster" (2º e 3º) ficam escuros demais — o gradiente
   escuro por trás do texto (para legibilidade) ocupa proporcionalmente
   mais do ecrã pequeno. Pedido dele: preferir mais luz mesmo que perca um
   pouco de contraste/legibilidade. Só no telemóvel: opacidade máxima do
   gradiente reduzida de 0.9/0.85 para 0.55, e começa mais tarde (55%
   em vez de 30-35%) para deixar mais imagem visível sem escurecer. */
@media (max-width: 767px) {
	.et_pb_slide_9::before,
	.et_pb_slide_3::before {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .55) 100%) !important;
	}
}
/* 2026-09-12: causa real do "parece vazio" no telemóvel (Luis: "onde tem
   a fase na imagem 2 e 3 parece vazio, mais na 2"). `min-height:90vh` faz
   sentido num ecrã LARGO (landscape), mas num telemóvel em pé o ecrã é
   ALTO E ESTREITO — 90% da altura do ecrã de um telemóvel (ex. 760px num
   iPhone) numa caixa de 390px de largura dá uma proporção de ~0,5:1
   (retrato). As imagens dos slides são todas LARGAS (~3:1, paisagem).
   `background-size:contain`/`110% auto` (o que se usa no desktop) encolhe
   a imagem para caber pela LARGURA, o que numa caixa tão alta a deixa com
   só ~130px de altura — uma faixa fininha, com ~85% da caixa a mostrar só
   a cor de fundo lisa. Daí parecer "vazio".
   ⚠️ TENTATIVA REVERTIDA: baixar a altura da caixa (`min-height:70vw` em
   vez de `90vh`) resolvia o vazio, mas a caixa é PARTILHADA pelos 4
   slides — mexeu também no slide 0 (Nitro), que o Luis pediu para não
   tocar ("a imagem 1 ficou muito aproximada, não era para mexer"). Só
   `background-size:cover` (sem mexer na altura) já resolve o vazio por si
   só — cover preenche sempre a caixa toda nunca deixando espaço em
   branco, ao preço de um recorte apertado nas laterais (mesmo tipo de
   recorte que o slide 0 já tinha antes, sem queixas). */
@media (max-width: 767px) {
	.et_pb_slide_9,
	.et_pb_slide_3 {
		background-size: cover !important;
	}
}
/* 2026-09-14: imagem dedicada ao telemóvel só para o slide "Escolhe o teu
   país" (migração 71). No desktop mantém a v4 (2172x724, ~3:1) sem
   qualquer alteração — o pedido do Luis foi explícito ("pc fica como
   está"). Só no telemóvel: a v4 em `cover` numa caixa retrato mostra
   uma faixa fininha do CENTRO da imagem, cortando o logótipo "GULLOZA"
   a meio. Esta imagem (900x1536, ~0,59:1) reenquadra o mesmo bloco
   central (sinaleira + mascote + logótipo completo + tagline) com
   céu/mesa estendidos por cima/baixo — em `cover` mostra a imagem quase
   toda, sem cortar o logótipo. */
@media (max-width: 767px) {
	.et_pb_slide_9 {
		background-image: url('/wp-content/uploads/2026/09/gulloza-banner-mundo-mobile-v1.jpg') !important;
		background-position: center center !important;
	}
}
/* 2026-09-14: mesma lógica do slide 1, agora para o slide "Toda a Monster
   num só sítio" (migração 72) — no telemóvel a v6 (2048x768, ~2,67:1) em
   `cover` só mostrava latas soltas do centro, sem o logótipo "MONSTER
   ENERGY" (que fica à esquerda da imagem original). Esta imagem
   (1350x2303, ~0,59:1) reenquadra o logótipo + a fila de latas com o
   fundo (textura preta) estendido por cima/baixo. Desktop inalterado. */
@media (max-width: 767px) {
	.et_pb_slide_3 {
		background-image: url('/wp-content/uploads/2026/09/gulloza-banner-monster-mobile-v1.jpg') !important;
		background-position: center center !important;
	}
}
/* 2026-09-14: letra dos títulos do slider da home — pedido do Luis
   ("letra melhor, cor laranja, para sobressair"). Aplica-se aos 4 slides
   (Baloo 2, Google Font só carregada na home — ver gulloza-conversao.php).
   Cor laranja da marca (#FF7A00) + sombra escura dupla a fazer de
   contorno (legibilidade sobre qualquer imagem, sem depender do
   `header_text_color` do shortcode do Divi — que por vezes não regenera
   em produção, ver lições de 2026-09-12 acima). Só o TÍTULO muda; a
   descrição por baixo mantém-se branca para dar hierarquia.
   ⚠️ O Divi gera, por slide, uma regra dinâmica MUITO específica
   (`.et_pb_slider .et_pb_slide_N.et_pb_slide .et_pb_slide_description
   .et_pb_slide_title{color:#fff!important}`, 5 classes) que ganhava à
   regra simples de 2 classes daqui — confirmado via JS (getComputedStyle
   + varrimento de document.styleSheets). Repetir a MESMA forma do
   seletor do Divi (por slide, 0 a 3) + 1 classe extra
   (`.et_pb_fullwidth_slider_0`) para garantir especificidade MAIOR,
   independente da ordem de carregamento das folhas de estilo. */
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_1.et_pb_slide .et_pb_slide_description .et_pb_slide_title,
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_9.et_pb_slide .et_pb_slide_description .et_pb_slide_title,
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_3.et_pb_slide .et_pb_slide_description .et_pb_slide_title,
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_4.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
	font-family: 'Baloo 2', 'Poppins', sans-serif !important;
	color: #ff7a00 !important;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .55), -1px -1px 0 rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .4) !important;
	letter-spacing: .01em;
}
/* 2026-09-14: botão dos 4 slides do slider — achado ao verificar o
   deploy de hoje (não é regressão de hoje, já vinha de trás). Em
   PRODUÇÃO os botões "Reservar agora"/"Ver países"/"Ver os sabores"
   caíam no estilo genérico `body .et_pb_button` (WooCommerce, laranja
   #ff5a00, texto branco, cantos 10px) em vez do estilo próprio do
   módulo (`button_bg_color="#0aff4f"` verde, texto escuro #04210e,
   cantos 46px em pílula, padding maior) — confirmado com
   `getComputedStyle` + `document.styleSheets`: a regra dinâmica do
   Divi para ESTE botão simplesmente não existe em produção (mesma
   família do problema do texto/tamanho de letra de 2026-09-12), por
   isso `body .et_pb_button` (mais genérica) ganha. Local está correto
   (confirma que o shortcode está bem — só a produção não regenerou).
   Fix: forçar os valores do shortcode por CSS, com 2 classes
   (`.et_pb_fullwidth_slider_0 .et_pb_button`) — mais específico que
   `body .et_pb_button` (1 classe), ganha independente da ordem. */
.et_pb_fullwidth_slider_0 .et_pb_button {
	background-color: #0aff4f !important;
	color: #04210e !important;
	border-radius: 46px !important;
	padding: 14px 32px !important;
}

/* 2026-09-15: SEO — só 1 <h1> na home (migração 73 passa 7 dos 8 módulos
   "Animated Text" de animated_level="h1" para "h2"). A migração 28 já tinha
   tentado isto e foi revertida pela 31: em PRODUÇÃO o CSS dinâmico
   por-módulo do Divi (`.ba_animated_text_N .dtq-animated-text-head{font-
   size:35px!important}`) não regenera quando o post_content muda por
   wp-cli — mesma família do bug do texto/botão do slider (ver acima) — e
   sem essa regra o h2 cai na regra genérica `h2{font-size:34px!important;
   font-weight:700}` de outro módulo da página: fica mais pequeno E bold,
   inconsistente com o desenho. Fix: forçar aqui o valor real do desenho
   (35px desktop / 25px telemóvel, peso 500 — confirmado no `h1,h2,h3,h4,
   h5,h6{font-weight:500}` de base do tema) por classe, que bate a regra
   `h2{...}` genérica independente do CSS dinâmico do Divi regenerar ou
   não. Aplica-se aos 8 módulos (h1 e h2), não muda nada visualmente. */
.dtq-animated-text-head {
	font-size: 35px !important;
	font-weight: 500 !important;
}
@media (max-width: 767px) {
	.dtq-animated-text-head {
		font-size: 25px !important;
	}
}

/* 2026-09-17: o sistema tipográfico novo (§22, Baloo 2 em todos os h1-h4)
   partiu a animação deste módulo — o plugin `ba_animated_text` mede em JS
   a largura do texto na fonte original (Lexend Deca) para fazer o efeito
   de "máquina de escrever"; ao trocar a fonte só por CSS, a largura real
   do texto renderizado deixa de bater com a largura calculada, e as
   letras aparecem/desaparecem a meio da animação. Mantém este módulo na
   fonte original, imune à regra genérica de §22 (que não usa !important
   de propósito, mas aqui precisa de ganhar de propósito). */
.dtq-animated-text-head,
.dtq-animated-text-head *,
.dtq-animated-text-main,
.dtq-animated-text-prefix,
.dtq-animated-text-suffix,
.dtq-animated-text-slide {
	font-family: 'Lexend Deca', sans-serif !important;
}

/* 2026-09-17: "riscas" laranja atravessando o texto animado da home
   (reportado pelo Luis, comparado com produção). Causa: uma regra do
   Customizer ("Additional CSS", `.woocommerce-tabs h2, .product h2,
   .product h3{border-bottom:3px solid #f5a623}`) pensada só para os
   títulos "Sabor"/"Experiência" da descrição do produto — mas o Divi
   põe a classe `.product` no wrapper `.et_builder_inner_content` de
   TODAS as páginas (confirmado via DOM em produção e local, mesma
   classe nos dois), não só nas fichas de produto. Como o h1/h2 deste
   módulo tem uma caixa larga (flex, texto centrado/alinhado à direita
   dentro dela), o border-bottom de 3px aparece como uma linha a
   "sobrar" depois do texto. Produção não mostra a linha porque a regra
   do Customizer lá não existe — não sabemos se foi removida de
   propósito ou nunca chegou a ir; de qualquer forma, aqui não pertence.
   Não mexe na origem (Customizer, fora do repo) — só neutraliza nestes
   elementos específicos. Precisa de 2 classes (`.dtq-module` + a própria)
   para bater a especificidade de `.product h2` (1 classe + 1 tag) — só
   `.dtq-animated-text-head` sozinho (1 classe) perdia. A mesma regra do
   Customizer também tem um `:after` (barra 70x4px #ff6b00, a "riscas"
   que sobra a meio do texto) — mesma origem, mesmo fix. */
.dtq-module .dtq-animated-text-head,
.dtq-animated-text-head.dtq-animated-text-head {
	border-bottom: 0 !important;
}
.dtq-module .dtq-animated-text-head::after,
.dtq-animated-text-head.dtq-animated-text-head::after {
	display: none !important;
	content: none !important;
}

/* 2026-09-25: slide 2 (índice 1; os antigos 1-3 passaram a 2-4 — índices
   deste ficheiro renumerados no mesmo dia) — "Halloween chegou à Gulloza 🎃" (migração 86).
   Mesmo tratamento dos outros: título Baloo laranja (seletor à Divi + 1 classe),
   gradiente escuro por trás do texto, e fundo forçado por CSS (em produção o CSS
   dinâmico do Divi para slides novos pode não regenerar). No telemóvel: cover
   centrado (lua + morcegos ao centro; os produtos ficam nas laterais). */
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_2.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
	font-family: 'Baloo 2', 'Poppins', sans-serif !important;
	color: #ff7a00 !important;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .55), -1px -1px 0 rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .4) !important;
	letter-spacing: .01em;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_2 {
	position: relative;
	background-image: url(/wp-content/uploads/2026/09/gulloza-banner-halloween.jpg) !important;
	background-size: cover !important;
	background-position: center center !important;
	background-color: #2a0b45 !important;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_2::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 68%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 35%, rgba(0, 0, 0, .7) 70%, rgba(0, 0, 0, .85) 100%);
	pointer-events: none;
	z-index: 1;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_2 .et_pb_container {
	position: relative;
	z-index: 2;
}
@media (max-width: 767px) {
	.et_pb_fullwidth_slider_0 .et_pb_slide_2 {
		background-image: url(/wp-content/uploads/2026/09/gulloza-banner-halloween-mobile.jpg?v=2) !important;
		background-position: center 30% !important; /* Gully inteiro também em ecrãs curtos */
	}
	.et_pb_fullwidth_slider_0 .et_pb_slide_2::before {
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .55) 100%) !important;
	}
}

/* 2026-09-25: slide "Escolhe o teu país" retirado (migração 90) — as regras dele
   passaram a .et_pb_slide_9 (inertes, guardadas para um eventual revert);
   Monster 3→2, Mega Sour 4→3. */

/* 2026-09-29: slide NOVO em 1.º lugar (índice 0) — "Em breve: Java Dubai Chocolate
   e Vanilla Shot" (migração 101). TODOS os índices .et_pb_slide_N deste ficheiro
   foram renumerados +1 no mesmo dia (Nitro 0→1, Halloween 1→2, Monster 2→3,
   Mega Sour 3→4; o 9 é inerte e ficou). Mesmo tratamento do Halloween: título
   Baloo laranja (seletor à Divi + 1 classe), gradiente escuro atrás do texto e
   fundo forçado por CSS (o CSS dinâmico do Divi pode não regenerar em produção).
   Telemóvel: imagem vertical dedicada (latas + Gully em cima, texto em baixo). */
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description .et_pb_slide_title {
	font-family: 'Baloo 2', 'Poppins', sans-serif !important;
	color: #ff7a00 !important;
	text-shadow: 2px 2px 0 rgba(0, 0, 0, .55), -1px -1px 0 rgba(0, 0, 0, .35), 0 3px 10px rgba(0, 0, 0, .4) !important;
	letter-spacing: .01em;
}
/* os títulos dos slides são links (<a>) e herdavam a cor dos links do tema (roxo
   #563cf3) — por isso o laranja de 14 set não aparecia. Vale para todos os slides. */
.et_pb_fullwidth_slider_0 .et_pb_slide .et_pb_slide_title a {
	color: inherit !important;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_0 {
	position: relative;
	background-image: url(/wp-content/uploads/2026/09/gulloza-banner-monster-lancamentos.jpg?v=2) !important;
	background-size: cover !important;
	background-position: center top !important;
	background-color: #060c09 !important;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_0::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 60%;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .8) 70%, rgba(0, 0, 0, .9) 100%);
	pointer-events: none;
	z-index: 1;
}
.et_pb_fullwidth_slider_0 .et_pb_slide_0 .et_pb_container {
	position: relative;
	z-index: 2;
}
/* slide novo: o CSS dinâmico do Divi para este módulo não existe (mesmo bug de
   sempre) — descrição e botão ficavam com o tamanho/peso por omissão. Iguala ao Nitro. */
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_content,
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_content p {
	font-size: 17px !important;
	font-weight: 700 !important;
	color: #fff !important;
}
.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_button {
	font-weight: 800 !important;
	padding: 14px 32px !important;
}
@media (max-width: 767px) {
	.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_content,
	.et_pb_fullwidth_slider_0.et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_content p {
		font-size: 15px !important;
	}
}
@media (max-width: 767px) {
	.et_pb_fullwidth_slider_0 .et_pb_slide_0 {
		background-image: url(/wp-content/uploads/2026/09/gulloza-banner-monster-lancamentos-mobile.jpg?v=4) !important;
		background-position: center top !important;
	}
}

/* 2026-10-09: slide 1 (era o Nitro, esgotado) = Monster Vice Guava / GTA 6
   (migração 120). Fundo forçado por CSS (o CSS dinâmico do Divi pode não
   regenerar em produção) + imagem vertical no telemóvel. */
.et_pb_fullwidth_slider_0 .et_pb_slide_1 {
	background-image: url(/wp-content/uploads/2026/10/gulloza-banner-monster-vice-guava.jpg?v=1) !important;
	background-size: cover !important;
	background-position: center top !important;
	background-color: #2b0b4a !important;
}
@media (max-width: 767px) {
	.et_pb_fullwidth_slider_0 .et_pb_slide_1 {
		background-image: url(/wp-content/uploads/2026/10/gulloza-banner-monster-vice-guava-mobile.jpg?v=1) !important;
	}
}

/* campo-armadilha anti-bot da lista de espera (28 set 2026) */
.gz-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;opacity:0}
/* lista de espera de lançamento ("Brevemente") */
.gz-restock--lanc{border-color:#0aff4f}

/* =========================================================================
 * 23. Quantidade + "Adicionar" na página de produto (2 out 2026).
 *     Luis: "o botão de adicionar e aumentar ou diminuir a quantidade estão
 *     muito próximos". Antes: −, número e + eram 3 caixas soltas e o
 *     "Adicionar" ficava colado por baixo (0 px). Agora: −/número/+ num só
 *     bloco arredondado e o "Adicionar" AO LADO, com 12 px de espaço; os
 *     selos de confiança passam para a linha de baixo. O CSS antigo está no
 *     Customizer ("Quantidade Premium", com !important) — daí a especificidade.
 * ========================================================================= */
body.single-product div.product form.cart:not(.variations_form),
body.single-product div.product .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 12px;
}
body.single-product div.product form.cart:not(.variations_form) > :not(.quantity):not(.single_add_to_cart_button),
body.single-product div.product .woocommerce-variation-add-to-cart > :not(.quantity):not(.single_add_to_cart_button) {
	flex: 0 0 100%;
}
body.single-product div.product form.cart .quantity {
	display: flex !important;
	flex: 0 0 auto;
	width: auto !important;
	height: 56px !important;
	margin: 0 !important;
	float: none !important;
	border: 2px solid #ff6a00 !important;
	border-radius: 14px !important;
	overflow: hidden;
	background: #fff !important;
	box-shadow: none !important;
}
body.single-product div.product form.cart .quantity .minus,
body.single-product div.product form.cart .quantity .plus {
	width: 46px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff4ea !important;
	color: #ff6a00 !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: background .15s;
}
body.single-product div.product form.cart .quantity .minus:hover,
body.single-product div.product form.cart .quantity .plus:hover {
	background: #ffe2c7 !important;
}
body.single-product div.product form.cart .quantity input.qty {
	width: 50px !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: #fff !important;
	color: #1a1a1a !important;
	font-size: 19px !important;
	font-weight: 800 !important;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}
body.single-product div.product form.cart .quantity input.qty::-webkit-inner-spin-button,
body.single-product div.product form.cart .quantity input.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
body.single-product div.product form.cart .single_add_to_cart_button {
	flex: 1 1 150px;
	height: 56px !important;
	margin: 0 !important;
	padding: 0 18px !important;
	float: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 19px !important;
	line-height: 1 !important;
}
body.single-product div.product form.cart .gz-trust {
	margin-top: 8px !important;
}
/* o clearfix do tema (::before/::after) virava item da flexbox e somava espaço */
body.single-product div.product form.cart:not(.variations_form)::before,
body.single-product div.product form.cart:not(.variations_form)::after,
body.single-product div.product .woocommerce-variation-add-to-cart::before,
body.single-product div.product .woocommerce-variation-add-to-cart::after {
	display: none !important;
}
/* telemóvel: quantidade mais estreita para o "Adicionar" caber ao lado */
@media (max-width: 600px) {
	body.single-product div.product form.cart .quantity .minus,
	body.single-product div.product form.cart .quantity .plus { width: 40px !important; }
	body.single-product div.product form.cart .quantity input.qty { width: 42px !important; }
	body.single-product div.product form.cart .single_add_to_cart_button { flex-basis: 120px; font-size: 18px !important; }
}
/* o Divi/Customizer põe margin-right:20px !important na .quantity — o espaço é o gap */
html body.single-product div.product form.cart div.quantity { margin: 0 !important; }

/* =========================================================================
 * 24. Ficha de produto (2 out 2026, ronda 5).
 *     Ingredientes logo a seguir ao título "Informação Nutricional" — o
 *     2.º módulo de descrição (description_1) não tinha order e ia para o fim
 *     da coluna (depois dos relacionados, ~3000 px abaixo do título).
 *     No telemóvel: nome/preço/Adicionar no 1.º ecrã, selos 2×2,
 *     relacionados 2 por linha. No PC fica igual (só a ordem dos ingredientes).
 * ========================================================================= */
body.single-product .et_pb_column_2_tb_body > .et_pb_wc_description_1_tb_body { order: 7; }

@media (max-width: 767px) {
	/* o cabeçalho fixo tem ~175 px; a secção reservava 250 */
	body.single-product .et_pb_section_0_tb_body { padding-top: 186px !important; }
	body.single-product .et_pb_row_1_tb_body { padding-top: 0 !important; }
	body.single-product .et_pb_row_1_tb_body > .et_pb_column_3_5 { margin-bottom: 12px !important; }
	/* foto no máximo 300 px de altura (latas ao alto ficavam com 470) */
	body.single-product .woocommerce-product-gallery__image > a > img.wp-post-image,
	body.single-product .woocommerce-product-gallery__image img.wp-post-image {
		max-height: 300px !important;
		width: 100% !important;
		object-fit: contain;
	}
	body.single-product .et_pb_wc_title_0_tb_body { margin-bottom: 2px !important; }
	body.single-product .et_pb_wc_title_0_tb_body h1 { font-size: 26px !important; line-height: 1.2 !important; padding-bottom: 0 !important; }
	body.single-product .et_pb_wc_price_0_tb_body { margin-bottom: 4px !important; }
	body.single-product .et_pb_wc_stock_0_tb_body { margin-bottom: 10px !important; }

	/* selos de confiança: grelha 2×2 compacta */
	body.single-product .gz-trust {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px !important;
	}
	body.single-product .gz-trust__item {
		padding: 8px 10px !important;
		gap: 8px !important;
		min-width: 0;
	}
	body.single-product .gz-trust__ico {
		width: 30px !important;
		height: 30px !important;
		font-size: 16px !important;
		flex: 0 0 30px !important;
	}
	body.single-product .gz-trust__txt { font-size: 11.5px !important; line-height: 1.3 !important; }
	body.single-product .gz-trust__txt strong { font-size: 13px !important; }

	/* relacionados: 2 por linha */
	body.single-product .et_pb_wc_related_products ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	body.single-product .et_pb_wc_related_products ul.products::before,
	body.single-product .et_pb_wc_related_products ul.products::after { display: none !important; }
	body.single-product .et_pb_wc_related_products ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		min-width: 0;
	}
}

/* =========================================================================
 * 25. Avaliações compactas (gulloza-conversao.php §20).
 * ========================================================================= */
html.gz-aval-fechado body.single-product #review_form_wrapper { display: none !important; }
body.single-product .gz-aval-btn {
	display: block;
	width: 100%;
	margin: 14px 0 4px;
	padding: 14px 18px;
	border: 2px solid #ff6a00;
	border-radius: 14px;
	background: #fff4ea;
	color: #c24f00;
	font-weight: 800;
	font-size: 16px;
	cursor: pointer;
}
body.single-product .gz-aval-btn:hover { background: #ffe2c7; }
@media (max-width: 767px) {
	/* menos moldura à volta das avaliações */
	body.single-product .et_pb_wc_tabs_0_tb_body .woocommerce-Tabs-panel { padding: 14px 12px !important; }
	body.single-product .et_pb_wc_tabs_0_tb_body #reviews #comments { padding: 18px 16px !important; margin: 0 !important; }
	body.single-product .et_pb_wc_tabs_0_tb_body #reviews #comments h2 { font-size: 24px !important; }
}
@media (max-width: 767px) {
	body.single-product .et_pb_wc_tabs_0_tb_body .et_pb_tab { padding: 12px !important; }
	body.single-product .et_pb_wc_tabs_0_tb_body #reviews.woocommerce-Reviews { padding: 16px !important; }
	body.single-product .et_pb_wc_tabs_0_tb_body #reviews #comments { padding: 0 !important; }
}
@media (max-width: 767px) {
	/* 250 px: com a barra de cookies (1.ª visita) o "Adicionar" continua à vista */
	body.single-product .woocommerce-product-gallery__image > a > img.wp-post-image,
	body.single-product .woocommerce-product-gallery__image img.wp-post-image { max-height: 250px !important; }
	/* miniaturas (produtos com várias fotos) numa só linha, pequenas */
	body.single-product .woocommerce-product-gallery .flex-control-thumbs {
		display: flex !important;
		gap: 6px;
		margin-top: 6px !important;
		overflow-x: auto;
	}
	body.single-product .woocommerce-product-gallery .flex-control-thumbs li {
		width: 46px !important;
		flex: 0 0 46px;
		margin: 0 !important;
		float: none !important;
	}
}
/* caixa "Avisar quando voltar" no lugar do botão Adicionar (ronda 5) */
body.single-product .et_pb_column_2_tb_body > .gz-restock { order: 5; margin: 6px 0 14px; }

/* =========================================================================
 * 26. Ficha de produto — aparência (2 out 2026, ronda 5, pedido do Luis
 *     "trata disso tudo").
 * ========================================================================= */

/* a) Telemóvel: marca + país POR CIMA do nome (antes iam para depois do botão) */
@media (max-width: 767px) {
	body.single-product .et_pb_column_2_tb_body > .et_pb_code_0_tb_body {
		order: 1 !important;
		margin: 0 0 6px !important;
	}
	body.single-product .et_pb_column_2_tb_body > .et_pb_code_0_tb_body img { max-height: 30px !important; }
}

/* b) Cartões de produto da ficha (Relacionados + "Produtos que recomendamos")
 *    iguais aos da loja: texto centrado, título 15px, foto quadrada, preço
 *    antigo pequeno ao lado do novo, selo "Promoção!" pequeno roxo, botão
 *    "Adicionar" numa linha. */
body.single-product .et_pb_wc_related_products li.product,
body.single-product .et_pb_shop_0_tb_body li.product {
	text-align: center !important;
	padding: 12px !important;
	position: relative;
}
body.single-product .et_pb_wc_related_products li.product .et_shop_image img,
body.single-product .et_pb_shop_0_tb_body li.product .et_shop_image img.attachment-woocommerce_thumbnail {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}
body.single-product .et_pb_wc_related_products li.product .woocommerce-loop-product__title,
body.single-product .et_pb_shop_0_tb_body li.product .woocommerce-loop-product__title {
	display: block !important;
	text-align: center !important;
	font-family: "Lexend Deca", Helvetica, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	color: #000 !important;
	padding: 12px 0 6px !important;
	margin: 0 !important;
}
body.single-product .et_pb_wc_related_products li.product .price,
body.single-product .et_pb_shop_0_tb_body li.product .price {
	display: block !important;
	text-align: center !important;
	margin: 0 0 8px !important;
	color: #000 !important;
	font-size: 22px !important;
	line-height: 1.2 !important;
}
body.single-product .et_pb_wc_related_products li.product .price del,
body.single-product .et_pb_shop_0_tb_body li.product .price del {
	font-size: 14px !important;
	color: #666 !important;
	margin-right: 4px;
	opacity: 1;
}
body.single-product .et_pb_wc_related_products li.product .price ins,
body.single-product .et_pb_shop_0_tb_body li.product .price ins {
	font-size: 22px !important;
	color: #000 !important;
	text-decoration: none;
}
body.single-product .et_pb_wc_related_products li.product .onsale,
body.single-product .et_pb_shop_0_tb_body li.product .onsale {
	position: absolute !important;
	top: 8px !important;
	left: 8px !important;
	right: auto !important;
	z-index: 3;
	margin: 0 !important;
	padding: 2px 10px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto !important;
	background: #563cf3 !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 20px !important;
	border-radius: 999px !important;
}
body.single-product .et_pb_wc_related_products li.product .button,
body.single-product .et_pb_shop_0_tb_body li.product .button {
	display: inline-block !important;
	width: auto !important;
	margin: 4px auto 0 !important;
	padding: 8px 14px !important;
	white-space: nowrap !important;
	font-size: 15px !important;
	line-height: 1.4 !important;
}
@media (max-width: 767px) {
	body.single-product .et_pb_shop_0_tb_body ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	body.single-product .et_pb_shop_0_tb_body ul.products::before,
	body.single-product .et_pb_shop_0_tb_body ul.products::after { display: none !important; }
	body.single-product .et_pb_shop_0_tb_body ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		min-width: 0;
	}
	body.single-product .et_pb_wc_related_products li.product .button,
	body.single-product .et_pb_shop_0_tb_body li.product .button { padding: 8px 12px !important; font-size: 14px !important; }
}

/* c) Avaliações sem "caixa dentro de caixa" nem título repetido:
 *    o separador único "Avaliações (0)" sai, fica o cartão com o título. */
body.single-product .et_pb_wc_tabs_0_tb_body {
	border: 0 !important;
	background: transparent !important;
}
body.single-product .et_pb_wc_tabs_0_tb_body .et_pb_tabs_controls { display: none !important; }
body.single-product .et_pb_wc_tabs_0_tb_body .et_pb_all_tabs { border: 0 !important; background: transparent !important; }
body.single-product .et_pb_wc_tabs_0_tb_body .et_pb_tab { padding: 0 !important; }

/* d) Faixa preta antes do rodapé: o fundo da ficha era um degradê branco→preto
 *    nos últimos 6% (ficava visível por baixo das Perguntas Frequentes). */
body.single-product .et_pb_section_0_tb_body {
	background-image: url("/wp-content/uploads/2026/01/bgas.png") !important;
	background-color: #fff !important;
}

/* e) Botão do WhatsApp escondido enquanto o bloco quantidade/Adicionar está
 *    no ecrã (no telemóvel ficava por cima do "−"). JS em gulloza-conversao §21. */
@media (max-width: 767px) {
	html.gz-carrinho-visivel body.single-product #ht-ctc-chat {
		opacity: 0 !important;
		pointer-events: none !important;
		transition: opacity .2s;
	}
	body.single-product #ht-ctc-chat { transition: opacity .2s; }
}
body.single-product .et_pb_wc_related_products li.product .price .amount,
body.single-product .et_pb_shop_0_tb_body li.product .price .amount { color: inherit !important; }
body.single-product .et_pb_wc_related_products li.product .price del .amount,
body.single-product .et_pb_shop_0_tb_body li.product .price del .amount { color: #666 !important; }
@media (max-width: 767px) {
	/* com a marca/país por cima do nome, a foto desce para 220 px para o
	   "Adicionar" continuar no 1.º ecrã (mesmo com a barra de cookies) */
	body.single-product .woocommerce-product-gallery__image > a > img.wp-post-image,
	body.single-product .woocommerce-product-gallery__image img.wp-post-image { max-height: 220px !important; }
	body.single-product .et_pb_wc_title_0_tb_body h1 { font-size: 24px !important; }
	body.single-product .et_pb_wc_stock_0_tb_body { margin-bottom: 6px !important; }
}
html body.single-product .et_pb_wc_related_products ul.products li.product .price,
html body.single-product .et_pb_wc_related_products ul.products li.product .price ins *,
html body.single-product .et_pb_wc_related_products ul.products li.product .price > .amount,
html body.single-product .et_pb_wc_related_products ul.products li.product .price > .amount * { color: #000 !important; }
/* d) reforço: o Divi aplica o degradê com #et-boc .et-l (especificidade de ID) */
html body.single-product #et-boc .et-l .et_pb_section_0_tb_body.et_pb_section {
	background-image: url("/wp-content/uploads/2026/01/bgas.png") !important;
	background-color: #fff !important;
}
/* relacionados 2 por linha também no PC (coluna estreita da ficha) */
body.single-product .et_pb_wc_related_products ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
body.single-product .et_pb_wc_related_products ul.products::before,
body.single-product .et_pb_wc_related_products ul.products::after { display: none !important; }
body.single-product .et_pb_wc_related_products ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	min-width: 0;
}

/* =========================================================================
 * 27. Loja / categorias / países / marcas no telemóvel (2 out 2026, ronda 5).
 *     Antes: herói de 460 px + "Filtrar" + contagem + ordenação em 3 linhas →
 *     produtos só aos ~710 px; cartões da mesma linha com alturas diferentes
 *     (botões desalinhados); nomes cortados a meio da 4.ª linha; selo
 *     "Promoção!" retangular fora do cartão.
 * ========================================================================= */
@media (max-width: 767px) {
	/* a) herói mais baixo (o cabeçalho fixo tem ~175 px) */
	body.woocommerce-shop .et_pb_section_0_tb_body,
	body.tax-product_cat .et_pb_section_0_tb_body,
	body.tax-product_country .et_pb_section_0_tb_body,
	body.tax-product_brand .et_pb_section_0_tb_body {
		padding-top: 190px !important;
		padding-bottom: 0 !important;
	}
	body.woocommerce-shop .et_pb_row_0_tb_body,
	body.tax-product_cat .et_pb_row_0_tb_body,
	body.tax-product_country .et_pb_row_0_tb_body,
	body.tax-product_brand .et_pb_row_0_tb_body { padding: 14px 0 12px !important; }
	body.woocommerce-shop .et_pb_text_0_tb_body h1,
	body.tax-product_cat .et_pb_text_0_tb_body h1,
	body.tax-product_country .et_pb_text_0_tb_body h1,
	body.tax-product_brand .et_pb_text_0_tb_body h1 { font-size: 30px !important; line-height: 1.15 !important; padding-bottom: 0 !important; }
	body.woocommerce-shop .et_pb_row_1_tb_body,
	body.tax-product_cat .et_pb_row_1_tb_body,
	body.tax-product_country .et_pb_row_1_tb_body,
	body.tax-product_brand .et_pb_row_1_tb_body { padding: 6px 0 !important; }
	body.woocommerce-shop .et_pb_row_2_tb_body,
	body.tax-product_cat .et_pb_row_2_tb_body,
	body.tax-product_country .et_pb_row_2_tb_body,
	body.tax-product_brand .et_pb_row_2_tb_body { padding-top: 12px !important; }

	/* b) "Filtrar" e "Ordenar" na mesma linha (o JS de gulloza-conversao §22
	 *    põe a ordenação dentro da barra do "Filtrar"); contagem pequena */
	.gz-loja-toggle { position: relative; margin-bottom: 4px !important; }
	.gz-loja-toggle .et_pb_toggle_title { padding-right: 0 !important; }
	.gz-loja-toggle > .woocommerce-ordering {
		position: absolute !important;
		top: 6px;
		right: 44px;
		width: 56% !important;
		margin: 0 !important;
		z-index: 2;
	}
	.gz-loja-toggle > .woocommerce-ordering select {
		width: 100% !important;
		height: 30px !important;
		padding: 2px 6px !important;
		font-size: 13px !important;
	}
	body .et_pb_shop .woocommerce-result-count {
		font-size: 12px !important;
		margin: 2px 0 8px !important;
		opacity: .75;
	}
}

/* c) Cartões das grelhas (loja, categorias, países, marcas, home) no telemóvel:
 *    mesma altura por linha, botão alinhado em baixo, nome em 3 linhas com "…",
 *    selo "Promoção!" pequeno dentro do cartão (como na ficha). */
@media (max-width: 767px) {
	body:not(.single-product) .et_pb_shop ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	body:not(.single-product) .et_pb_shop ul.products::before,
	body:not(.single-product) .et_pb_shop ul.products::after { display: none !important; }
	body:not(.single-product) .et_pb_shop ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		min-width: 0;
		position: relative;
		display: flex !important;
		flex-direction: column;
		padding: 12px !important;
	}
	body:not(.single-product) .et_pb_shop ul.products li.product > a.woocommerce-loop-product__link { flex: 1 1 auto; }
	body:not(.single-product) .et_pb_shop ul.products li.product > a.button {
		margin: 8px auto 0 !important;
		white-space: nowrap;
	}
	body:not(.single-product) .et_pb_shop ul.products li.product > a.button.gz-avisar-btn {
		white-space: normal;
		font-size: 13px !important;
		line-height: 1.25 !important;
	}
	body:not(.single-product) .et_pb_shop ul.products li.product .woocommerce-loop-product__title {
		display: -webkit-box !important;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden !important;
		height: auto !important;
		max-height: none !important;
		padding: 12px 0 0 !important;
		margin: 0 0 6px !important;
		line-height: 1.25 !important;
	}
	body:not(.single-product) .et_pb_shop ul.products li.product .gz-urgencia {
		white-space: nowrap;
		font-size: 11px !important;
		margin: 2px 0 2px !important;
		padding: 0 !important;
		line-height: 1.3 !important;
	}
	body:not(.single-product) .et_pb_shop ul.products li.product .onsale {
		position: absolute !important;
		top: 6px !important;
		left: 6px !important;
		right: auto !important;
		z-index: 3;
		margin: 0 !important;
		padding: 2px 10px !important;
		min-width: 0 !important;
		min-height: 0 !important;
		width: auto !important;
		background: #563cf3 !important;
		color: #fff !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 20px !important;
		border-radius: 999px !important;
	}
}
@media (max-width: 767px) {
	/* reforço: o tema/Customizer dá width:48% + margin-right ao li (com !important) */
	html body:not(.single-product) .et_pb_shop.et_pb_module ul.products li.product,
	html body:not(.single-product) .et_pb_shop.et_pb_module .woocommerce ul.products li.product {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		clear: none !important;
	}
}
@media (max-width: 767px) {
	/* o Divi usa ".et-db #et-boc .et-l .et_pb_shop ul.products.columns-N li.product
	   { width:48% !important; margin-right:4% !important }" — precisa de ID para ganhar */
	html body:not(.single-product) #et-boc .et-l .et_pb_shop.et_pb_module ul.products[class] li.product {
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
	}
}
@media (max-width: 767px) {
	html body:not(.single-product) #et-boc .et-l .et_pb_shop.et_pb_module ul.products[class] li.product .onsale {
		position: absolute !important;
		top: 6px !important;
		left: 6px !important;
		right: auto !important;
		margin: 0 !important;
		padding: 2px 10px !important;
		width: auto !important;
		min-width: 0 !important;
		min-height: 0 !important;
		font-size: 12px !important;
		line-height: 20px !important;
		border-radius: 999px !important;
		background: #563cf3 !important;
		color: #fff !important;
		z-index: 3;
	}
}

/* =========================================================================
 * 28. Checkout mais curto e claro (10 out 2026, gulloza-conversao.php §24).
 *     body.gz-cko-v2 só existe com o JS da §24 a correr — sem JS fica tudo
 *     visível como antes.
 * ========================================================================= */

/* bandeira flutuante do GTranslate tapava o campo País */
body.woocommerce-checkout #gt_float_wrapper,
body.woocommerce-checkout .gt_float_switcher {
	display: none !important;
}

/* c) Mais opções: NIF + outra morada + nota escondidos até abrir */
body.gz-cko-v2:not(.gz-cko-mais-aberto) #billing_nif_field,
body.gz-cko-v2:not(.gz-cko-mais-aberto) .et_pb_wc_checkout_shipping,
body.gz-cko-v2:not(.gz-cko-mais-aberto) .et_pb_wc_checkout_additional_info {
	display: none !important;
}
.gz-cko-mais {
	display: block;
	margin: .2em 0 1.4em;
	padding: 0;
	border: 0;
	background: none;
	color: #ff7100;
	font-size: .92rem;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.gz-cko-mais:hover { text-decoration: underline; }
/* o título "Informação adicional" não diz nada — a nota já tem rótulo */
body.gz-cko-v2 .et_pb_wc_checkout_additional_info h3 { display: none; }

/* b) campos lado a lado também no telemóvel (o Divi põe tudo a 100%) */
@media (max-width: 767px) {
	body.woocommerce-checkout .woocommerce-billing-fields .form-row-first,
	body.woocommerce-checkout .woocommerce-billing-fields .form-row-last,
	body.woocommerce-checkout .woocommerce-shipping-fields .form-row-first,
	body.woocommerce-checkout .woocommerce-shipping-fields .form-row-last {
		width: 48.5% !important;
		clear: none !important;
	}
	body.woocommerce-checkout .woocommerce-billing-fields .form-row-first,
	body.woocommerce-checkout .woocommerce-shipping-fields .form-row-first {
		float: left !important;
		clear: left !important;
	}
	body.woocommerce-checkout .woocommerce-billing-fields .form-row-last,
	body.woocommerce-checkout .woocommerce-shipping-fields .form-row-last {
		float: right !important;
	}
}

/* d) privacidade + convite de avaliação: pequenos, por baixo do botão */
body.woocommerce-checkout .place-order .woocommerce-privacy-policy-text,
body.woocommerce-checkout .place-order .woocommerce-privacy-policy-text p {
	margin: .9em 0 0 !important;
	font-size: .74rem !important;
	line-height: 1.4 !important;
	opacity: .85;
}
body.woocommerce-checkout .place-order .cr-customer-consent,
body.woocommerce-checkout .place-order p.form-row:has(#cr_customer_consent) {
	margin: .8em 0 0 !important;
	font-size: .76rem !important;
	line-height: 1.4 !important;
}
body.woocommerce-checkout .place-order #place_order { margin-bottom: .4em; }
.gz-cko--depois { margin: 1em 0 0; }

/* d) resumo da encomenda no topo — só telemóvel/tablet */
.gz-cko-resumo { display: none; }
@media (max-width: 980px) {
	.gz-cko-resumo {
		display: block;
		margin: 0 0 14px;
		border: 1px solid #f1dcc4;
		border-radius: 12px;
		background: #fff;
		font-size: .92rem;
	}
	.gz-cko-resumo summary {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 10px;
		padding: 12px 14px;
		cursor: pointer;
		list-style: none;
	}
	.gz-cko-resumo summary::-webkit-details-marker { display: none; }
	.gz-cko-resumo summary span:first-child { color: #ff7100; }
	.gz-cko-resumo summary b { color: #1d1d1d; }
	.gz-cko-resumo__tot { font-weight: 800; color: #1d1d1d; white-space: nowrap; }
	.gz-cko-resumo__tot::after { content: " ▾"; color: #ff7100; }
	.gz-cko-resumo[open] .gz-cko-resumo__tot::after { content: " ▴"; }
	.gz-cko-resumo ul { margin: 0; padding: 0 14px 10px; list-style: none; }
	.gz-cko-resumo li {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 7px 0;
		border-top: 1px solid #f3ece3;
		list-style: none !important;
	}
	.gz-cko-resumo li::before, .gz-cko-resumo li::marker { content: none; }
	/* com o resumo em cima, a tabela grande só mostra subtotal / envio / total */
	body.gz-cko-v2 .woocommerce-checkout-review-order-table thead,
	body.gz-cko-v2 .woocommerce-checkout-review-order-table tr.cart_item {
		display: none !important;
	}
	/* títulos mais pequenos — menos scroll */
	body.woocommerce-checkout .et_pb_text h1 { font-size: 24px !important; margin-bottom: 0 !important; }
	body.woocommerce-checkout .et_pb_text h3,
	body.woocommerce-checkout .et_pb_wc_checkout_order_details h3 { font-size: 22px !important; }
}

/* =========================================================================
 * 29. Carrinho no telemóvel: barra fixa "Finalizar compra · total"
 *     (12 out 2026, gulloza-conversao.php §25). Os botões flutuantes
 *     (WhatsApp, carrinho, bandeira) sobem para não ficarem por baixo.
 * ========================================================================= */
.gz-cartbar { display: none; }
@media (max-width: 980px) {
	.gz-cartbar {
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(12px + var(--gz-cn, 0px));
		z-index: 99990;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 22px;
		border-radius: 999px;
		background: #ff5a00;
		color: #fff !important;
		font-weight: 700;
		font-size: 1.05rem;
		text-decoration: none !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
		transition: transform .25s ease, opacity .25s ease;
	}
	.gz-cartbar .amount, .gz-cartbar bdi { color: #fff; }
	.gz-cartbar--off { transform: translateY(140%); opacity: 0; pointer-events: none; }
	/* já estás no carrinho: o carrinho flutuante e a bandeira só tapavam a barra */
	body.gz-tem-cartbar .woofc-count,
	body.gz-tem-cartbar .gt_float_switcher,
	body.gz-tem-cartbar .gtranslate_wrapper > div { display: none !important; }
	body.gz-tem-cartbar #ht-ctc-chat, body.gz-tem-cartbar .ht-ctc { bottom: calc(92px + var(--gz-cn, 0px)) !important; transform: none !important; }
}
/* Selos do checkout no telemóvel: uma coluna (a 2 colunas ficavam espremidos
   dentro da caixa de pagamento). */
@media (max-width: 480px) { .gz-cko .gz-selos { grid-template-columns: 1fr; gap: .6em; padding: .8em; } }

/* =========================================================================
 * 30. Ficha de produto no PC: a foto acompanha o scroll (13 out 2026, ronda 6).
 *     A coluna da esquerda (3/5) só tem as imagens; descrição, avaliações e
 *     relacionados vão todos para a coluna da direita → ficavam ~3 000 px de
 *     vazio por baixo da foto. A linha passa a flex (colunas da mesma altura)
 *     e o módulo das imagens fica "sticky" por baixo do cabeçalho fixo.
 * ========================================================================= */
@media (min-width: 981px) {
	/* O Divi põe overflow:hidden nestes dois → o sticky não funciona; clip corta igual sem o impedir. */
	body.single-product #page-container, body.single-product #et-main-area { overflow: clip !important; }
	.single-product .et_pb_row_1_tb_body { display: flex; align-items: stretch; }
	.single-product .et_pb_row_1_tb_body > .et_pb_column_1_tb_body { float: none; }
	.single-product .et_pb_row_1_tb_body > .et_pb_column_1_tb_body .et_pb_wc_images {
		position: sticky;
		top: 190px;
	}
}

/* =========================================================================
 * 31. Home: "Notícias fresquinhas da Gulloza" legível (13 out 2026, ronda 6).
 *     Título e texto brancos em cima da parte BRANCA do degradê da secção
 *     (branco → preto) — quase invisíveis. ⚠️ Classes por índice do Divi
 *     (et_pb_text_15/16 da home): se se mexer nas secções de cima, rever.
 * ========================================================================= */
.home .et_pb_section_11 .et_pb_text_15 h2,
.home .et_pb_section_11 .et_pb_text_15 h2 *,
.home .et_pb_section_11 .et_pb_text_16,
.home .et_pb_section_11 .et_pb_text_16 p { color: #1d1b2e !important; }

/* =========================================================================
 * 32. Carrinho vazio no telemóvel: sugestões 2 por linha (13 out 2026, ronda 6).
 *     Saíam 1 por linha, com fotos enormes (página muito comprida).
 * ========================================================================= */
@media (max-width: 767px) {
	.gz-grelha-sugestoes ul.products {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.gz-grelha-sugestoes ul.products::before,
	.gz-grelha-sugestoes ul.products::after { display: none !important; }
	.gz-grelha-sugestoes ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
	}
}

/* =========================================================================
 * 33. Carrinho vazio ("Novidades"/"Mais vendidos"): preço e selo como na loja
 *     (15 out 2026, vistoria). Nos produtos em promoção o preço atual ia para
 *     a 2.ª linha e ficava escondido atrás do botão (a caixa do preço tinha 1
 *     linha de altura) — via-se só o preço riscado. O selo "Promoção!" saía
 *     com letra de 20 px e tapava a foto.
 * ========================================================================= */
.gz-grelha-sugestoes ul.products li.product .price {
	height: auto !important;
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 6px;
	margin-bottom: 10px !important;
}
.gz-grelha-sugestoes ul.products li.product .price del,
.gz-grelha-sugestoes ul.products li.product .price del .amount {
	font-size: 14px !important;
	color: #666 !important;
	font-weight: 400 !important;
}
.gz-grelha-sugestoes ul.products li.product .price ins,
.gz-grelha-sugestoes ul.products li.product .price ins .amount {
	font-size: 20px !important;
	color: #000 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}
.gz-grelha-sugestoes ul.products li.product .onsale {
	top: 6px !important;
	left: 6px !important;
	right: auto !important;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 2px 10px !important;
	font-size: 12px !important;
	line-height: 20px !important;
	font-weight: 700 !important;
	border-radius: 999px !important;
	background: #563cf3 !important;
	color: #fff !important;
	margin: 0 !important;
}