/* ==========================================================================
   Riscalo — woocommerce.css (SKIN, sem layout)
   O LAYOUT da loja, produto, carrinho e checkout e tratado pelo Blocksy +
   estilos core do WooCommerce. Aqui SO aplicamos a marca: tipografia (Fraunces
   nos titulos), cor (terracota/tinta/salvia), botoes, precos, estrelas, notices
   e o anel de foco. Nada de `display:grid`/`float`/larguras — para nao colidir
   com o markup do Blocksy.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Titulos Woo -> Fraunces / tinta
   -------------------------------------------------------------------------- */
.woocommerce .product_title,
.woocommerce-products-header__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-cart-form__contents caption,
.cart_totals h2,
.cross-sells > h2,
.related.products > h2,
.up-sells > h2,
.woocommerce-checkout h3,
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-Tabs-panel h2 {
	font-family: var(--lil-font-titulo);
	color: var(--lil-tinta);
	font-weight: var(--lil-peso-medio);
}

/* --------------------------------------------------------------------------
   2. Botoes WooCommerce -> botao da marca (terracota)
   (alguns temas/plugins definem cor propria; reforcamos aqui)
   -------------------------------------------------------------------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
	background-color: var(--lil-terracota);
	color: #ffffff;
	border: 1px solid transparent;
	border-radius: var(--lil-radio-btn);
	font-family: var(--lil-font-corpo);
	font-weight: var(--lil-peso-medio);
	letter-spacing: var(--lil-ls-btn);
	text-transform: uppercase;
	transition: background-color var(--lil-transicao), color var(--lil-transicao);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce #place_order:hover {
	background-color: var(--lil-terracota-escuro);
	color: #ffffff;
}

.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce .single_add_to_cart_button.disabled {
	background-color: var(--lil-muted-claro);
	color: var(--lil-text-forte); /* contraste AA (4.86:1) vs #fff (2.32:1) */
	opacity: 1;
}

/* --------------------------------------------------------------------------
   3. Precos
   -------------------------------------------------------------------------- */
.woocommerce .price,
.woocommerce span.amount,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--lil-text-forte);
}

.woocommerce .price del,
.woocommerce div.product p.price del {
	color: var(--lil-muted);
}

.woocommerce .price ins,
.woocommerce div.product p.price ins {
	color: var(--lil-terracota);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   4. Estrelas / etiqueta de promocao
   -------------------------------------------------------------------------- */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before,
.woocommerce p.stars a::before {
	color: var(--lil-terracota);
}

.woocommerce span.onsale {
	background-color: var(--lil-salvia);
	color: #ffffff;
	border-radius: var(--lil-radio-pill);
}

/* --------------------------------------------------------------------------
   5. Campos de formulario (checkout / conta) — foco na cor da marca
   -------------------------------------------------------------------------- */
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .input-text:focus,
.wc-block-components-text-input input:focus {
	outline: none;
	border-color: var(--lil-terracota);
	box-shadow: 0 0 0 3px rgba(194, 97, 90, 0.15);
}

/* --------------------------------------------------------------------------
   6. Notices / mensagens — acento editorial (sem mexer no layout)
   -------------------------------------------------------------------------- */
.woocommerce-message {
	border-left: 3px solid var(--lil-salvia);
}

.woocommerce-info {
	border-left: 3px solid var(--lil-terracota);
}

.woocommerce-error {
	border-left: 3px solid var(--lil-terracota-escuro);
}

/* Realce do preco da variacao escolhida */
.woocommerce div.product .woocommerce-variation-price .price {
	color: var(--lil-terracota);
}

/* --------------------------------------------------------------------------
   7. Calor — elevacao gentil nos cartoes e botoes da loja
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
	transition: transform var(--lil-transicao);
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-4px);
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	box-shadow: 0 6px 16px rgba(194, 97, 90, 0.18);
	transition: background-color var(--lil-transicao), color var(--lil-transicao),
		transform var(--lil-transicao), box-shadow var(--lil-transicao);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(169, 78, 71, 0.26);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce ul.products li.product:hover,
	.woocommerce a.button:hover,
	.woocommerce .single_add_to_cart_button:hover,
	.woocommerce #place_order:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   8. Reasseguramentos sob o botao de compra (confianca + calor)
   -------------------------------------------------------------------------- */
.lil-assurances {
	list-style: none;
	margin: var(--lil-espaco) 0 0;
	padding: var(--lil-espaco) 0 0;
	border-top: 1px solid var(--lil-border-suave);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lil-espaco-sm) var(--lil-espaco);
}

.lil-assurances__item {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-2xs);
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
	margin: 0;
}

.lil-assurances__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--lil-terracota);
}

/* --------------------------------------------------------------------------
   9. Elementos de CONVERSAO na pagina de produto
   -------------------------------------------------------------------------- */

/* Prova social (estrelas + score + familias) */
.lil-pp {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: var(--lil-espaco-sm) 0;
}

.lil-pp__stars {
	color: var(--lil-terracota);
	letter-spacing: 2px;
}

.lil-pp__score {
	font-weight: var(--lil-peso-semi);
	color: var(--lil-text-forte);
}

.lil-pp__count {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-mut);
}

/* Bullets de beneficios (USPs) acima do botao */
.lil-usps {
	list-style: none;
	margin: var(--lil-espaco) 0;
	padding: var(--lil-espaco) 0;
	border-top: 1px solid var(--lil-border-suave);
	border-bottom: 1px solid var(--lil-border-suave);
	display: grid;
	gap: var(--lil-espaco-xs);
}

.lil-usps li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
}

.lil-usps li svg {
	color: var(--lil-salvia);
	flex-shrink: 0;
}

/* Prazo + pagamento seguro */
.lil-buy-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lil-espaco-2xs) var(--lil-espaco-md);
	margin: var(--lil-espaco) 0 var(--lil-espaco-2xs);
	font-size: var(--lil-fs-meta);
	color: var(--lil-text-mut);
}

.lil-buy-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.lil-buy-meta svg {
	color: var(--lil-terracota);
}

/* Metodos de pagamento (badges de confianca) */
.lil-pay {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 var(--lil-espaco);
	padding: 0;
}

.lil-pay li {
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.lil-pay__logo {
	display: block;
	height: 26px;
	width: 40px;
	border-radius: var(--lil-radio-sm);
	box-shadow: 0 1px 2px rgba(40, 34, 28, 0.06);
}

/* Método de pagamento real (chip de texto — gerado dos gateways ativos) */
.lil-pay__method {
	padding: 0.3rem 0.7rem;
	background: var(--lil-branco-quente);
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-pill);
	font-size: var(--lil-fs-meta);
	font-weight: var(--lil-peso-medio);
	color: var(--lil-text-forte);
}

/* Banda de garantia */
.lil-guarantee {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	background: var(--lil-linho);
	border: 1px solid var(--lil-border-quente);
	border-radius: var(--lil-radio-md);
	padding: var(--lil-espaco-sm) var(--lil-espaco);
	margin: var(--lil-espaco) 0 var(--lil-espaco-sm);
}

.lil-guarantee__icon {
	color: var(--lil-terracota);
	flex-shrink: 0;
	display: inline-flex;
}

.lil-guarantee p {
	margin: 0;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
	line-height: 1.6;
}

.lil-guarantee strong {
	color: var(--lil-text-forte);
}

/* Nota de presente */
.lil-gift {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-mut);
}

.lil-gift svg {
	color: var(--lil-terracota);
	flex-shrink: 0;
}

/* FAQ da pagina de produto (largura total, abaixo do resumo) */
.lil-pdp-faq {
	max-width: var(--lil-largura);
	margin: var(--lil-espaco-2xl) auto;
	padding: 0 var(--lil-secao-px);
}

.lil-pdp-faq__title {
	font-family: var(--lil-font-titulo);
	font-weight: var(--lil-peso-medio);
	font-size: var(--lil-fs-h3);
	color: var(--lil-tinta);
	text-align: center;
	margin: 0 0 var(--lil-espaco-lg);
}

.lil-pdp-faq__item {
	border-bottom: 1px solid var(--lil-border-suave);
}

.lil-pdp-faq__item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: var(--lil-espaco-sm) 0;
	font-family: var(--lil-font-corpo);
	font-weight: var(--lil-peso-semi);
	font-size: var(--lil-fs-base);
	color: var(--lil-text-forte);
}

.lil-pdp-faq__item summary::-webkit-details-marker {
	display: none;
}

.lil-pdp-faq__item summary::after {
	content: "+";
	font-size: 1.3rem;
	color: var(--lil-terracota);
	line-height: 1;
	flex-shrink: 0;
}

.lil-pdp-faq__item[open] summary::after {
	content: "\2013";
}

.lil-pdp-faq__item p {
	margin: 0;
	padding-bottom: var(--lil-espaco-sm);
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
	line-height: 1.65;
	max-width: 70ch;
}

@media (min-width: 600px) {
	.lil-usps {
		grid-template-columns: 1fr 1fr;
		gap: var(--lil-espaco-xs) var(--lil-espaco);
	}
}

/* --------------------------------------------------------------------------
   10. Barra de compra fixa (sticky) — so em ecra estreito (<= 991px)
   -------------------------------------------------------------------------- */
.lil-stickybuy {
	display: none;
}

@media (max-width: 991px) {
	.lil-stickybuy {
		display: flex;
		align-items: center;
		gap: var(--lil-espaco-sm);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 200;
		padding: 0.6rem var(--lil-espaco);
		padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
		background: var(--lil-branco-quente);
		border-top: 1px solid var(--lil-border);
		box-shadow: 0 -8px 24px rgba(40, 34, 28, 0.10);
		transform: translateY(110%);
		transition: transform 240ms ease;
	}

	.lil-stickybuy.is-visible {
		transform: translateY(0);
	}

	.lil-stickybuy__info {
		display: flex;
		align-items: center;
		gap: var(--lil-espaco-2xs);
		min-width: 0;
		flex: 1;
	}

	.lil-stickybuy__thumb {
		width: 44px;
		height: 44px;
		border-radius: var(--lil-radio-sm);
		object-fit: cover;
		flex-shrink: 0;
		background: var(--lil-linho);
	}

	.lil-stickybuy__text {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.lil-stickybuy__title {
		font-family: var(--lil-font-titulo);
		font-size: var(--lil-fs-sm);
		color: var(--lil-tinta);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lil-stickybuy__price {
		font-size: var(--lil-fs-meta);
		color: var(--lil-text-forte);
		font-weight: var(--lil-peso-medio);
	}

	.lil-stickybuy__price .amount {
		color: var(--lil-text-forte);
	}

	.lil-stickybuy__btn {
		flex-shrink: 0;
		background: var(--lil-terracota);
		color: #ffffff;
		border: 0;
		border-radius: var(--lil-radio-btn);
		font-family: var(--lil-font-corpo);
		font-weight: var(--lil-peso-medio);
		letter-spacing: var(--lil-ls-btn);
		text-transform: uppercase;
		font-size: var(--lil-fs-nav);
		padding: 0.9rem 1.4rem;
		min-height: 44px;
		cursor: pointer;
		transition: background-color var(--lil-transicao);
	}

	.lil-stickybuy__btn:hover,
	.lil-stickybuy__btn:focus {
		background: var(--lil-terracota-escuro);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lil-stickybuy {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   11. Grelha da loja — mais ar entre cartoes e dentro de cada cartao
   (o Blocksy junta demasiado os elementos; damos ritmo vertical e respiro)
   -------------------------------------------------------------------------- */
.woocommerce ul.products {
	column-gap: var(--lil-espaco-md);
	row-gap: var(--lil-espaco-xl);
}

.woocommerce ul.products li.product > figure,
.woocommerce ul.products li.product .ct-image-container,
.woocommerce ul.products li.product a > img {
	margin-bottom: var(--lil-espaco-sm);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: var(--lil-espaco-3xs) 0 var(--lil-espaco-2xs);
	line-height: 1.3;
}

.woocommerce ul.products li.product .price {
	margin-bottom: var(--lil-espaco-2xs);
}

.woocommerce ul.products li.product .entry-meta {
	font-size: var(--lil-fs-meta);
	margin-bottom: var(--lil-espaco-sm);
}

.woocommerce ul.products li.product .ct-woo-card-actions {
	margin-top: var(--lil-espaco-2xs);
}

/* --------------------------------------------------------------------------
   12. Paginas WooCommerce — descolar do footer
   O topo ja respira (~102px, via hero-section do titulo do Blocksy). O fundo
   estava a 24px (.ct-container) -> colado ao footer. Damos SO respiro de fundo
   (~--lil-secao-py) para igualar o topo: margens opostas coerentes, sem mexer
   no topo nem duplicar espaco na home (que nao tem a classe body.woocommerce).
   -------------------------------------------------------------------------- */
body.woocommerce .site-main {
	padding-bottom: var(--lil-secao-py);
}

body.woocommerce .site-main > .ct-container,
body.woocommerce .site-main > .ct-container-full {
	padding-bottom: 0;
}

/* ==========================================================================
   13. PDP "grande" — bandas editoriais full-width abaixo do resumo
   Injetadas por inc/woocommerce.php nos hooks after_single_product_summary.
   Reaproveitam .lil-section/.lil-container; quebram para 100vw como a UGC.
   ========================================================================== */

/* Fundo "areia" (variante de seccao que faltava no main.css) */
.lil-section--areia {
	background-color: var(--lil-areia);
}

/* Breakout full-bleed (igual a .lil-ugc--full). As bandas sao injetadas em
   'woocommerce_after_single_product' (FORA de div.product, em fluxo de bloco),
   por isso o 100vw + margin-inline calc resolve corretamente. As 4 ultimas
   linhas sao defesa NO-OP em fluxo normal (cobrem o caso de o wrapper de
   conteudo ser grid/flex). O body tem overflow-x:hidden => sem scroll horizontal. */
.lil-pdp-band {
	/* !important: o Blocksy limita a largura dos filhos do <article> (~1200px);
	   este utilitario full-bleed TEM de vencer essa regra para ocupar 100vw. */
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	grid-column: 1 / -1; /* span total se o pai for grid */
	align-self: stretch; /* nao encolher se o pai for flex/grid */
	float: none;
	clear: both;
}

/* Defesa: se algo restar dentro de div.product (grid do Blocksy), ocupa a linha toda */
.woocommerce div.product > .lil-pdp-band,
.woocommerce div.product > .related.products {
	grid-column: 1 / -1;
}

/* Seam entre bandas consecutivas do mesmo tom (alem do par linho+linho do main) */
.lil-pdp-band.lil-section--branco + .lil-pdp-band.lil-section--branco,
.lil-pdp-band.lil-section--areia + .lil-pdp-band.lil-section--branco {
	border-top: 1px solid var(--lil-border-suave);
}

.lil-pdp-band__head {
	text-align: center;
	max-width: 64ch;
	margin: 0 auto var(--lil-espaco-lg);
}

.lil-pdp-band__head .lil-eyebrow {
	justify-content: center;
	margin-bottom: var(--lil-espaco-sm);
}

.lil-pdp-band__head .lil-h2 {
	margin-bottom: var(--lil-espaco-xs);
}

.lil-pdp-band__head .lil-lead {
	margin-inline: auto;
}

/* --- Escala MAIOR no resumo do produto (titulo / preco / botao) --- */
.single-product div.product .product_title,
.single-product div.product .entry-summary .product_title {
	font-size: clamp(2.1rem, 1.6rem + 1.8vw, 3rem);
	line-height: 1.06;
	margin-bottom: var(--lil-espaco-sm);
}

.single-product div.product .summary .price,
.single-product div.product p.price {
	font-size: 1.7rem;
	font-weight: var(--lil-peso-semi);
}

.single-product div.product .single_add_to_cart_button {
	font-size: 1rem;
	padding: 1.05rem 1.7rem;
	letter-spacing: 0.1em;
}

/* Respiro entre o herói (galeria/resumo) e a 1.ª banda full-width — senao a
   galeria fica "colada" ao fundo colorido da banda logo a seguir. */
.single-product div.product {
	padding-bottom: var(--lil-secao-py);
}

/* Resumo STICKY no desktop: acompanha a coluna de imagens grandes (1xN) e
   larga quando as imagens acabam. So funciona porque o body usa overflow-x:clip
   (e nao hidden) — ver style.css. align-self:start porque o pai e flex. */
@media (min-width: 768px) {
	.single-product div.product .entry-summary,
	.single-product div.product .summary {
		position: sticky;
		top: 1.5rem;
		align-self: start;
	}

	/* Alinhar o herói (galeria + resumo) com as bandas: mesma goteira lateral,
	   senao a galeria "espeta" para fora do alinhamento das bandas. */
	.single-product div.product .product-entry-wrapper {
		padding-inline: var(--lil-secao-px);
	}
}

/* Afordancia "anexa o desenho" (dentro do resumo, acima do botao) */
.lil-upload {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-xs);
	margin: var(--lil-espaco) 0 0;
	padding: var(--lil-espaco-sm) var(--lil-espaco);
	background: var(--lil-linho);
	border: 1.5px dashed var(--lil-border-forte);
	border-radius: var(--lil-radio-md);
}

.lil-upload__ic {
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: var(--lil-radio-full);
	background: var(--lil-branco-quente);
	color: var(--lil-terracota);
	box-shadow: var(--lil-sombra-suave);
}

.lil-upload__txt strong {
	display: block;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-forte);
}

.lil-upload__txt span {
	display: block;
	font-size: var(--lil-fs-meta);
	color: var(--lil-text-mut);
}

/* (Bandas "Avisos" e "Badges" removidas na revisao CRO — eram repeticoes dos
   USP/garantia. O CSS respetivo foi eliminado.) */

/* --- Descricao + ficha tecnica --- */
.lil-descr {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-lg);
	align-items: start;
}

.lil-descr__body .lil-eyebrow {
	margin-bottom: var(--lil-espaco-sm);
}

.lil-descr__body h2 {
	margin-bottom: var(--lil-espaco);
}

.lil-descr__body p {
	font-size: var(--lil-fs-lead);
	color: var(--lil-text-soft);
	line-height: 1.75;
	margin: 0 0 var(--lil-espaco-sm);
}

.lil-descr__body .lil-h2 + p::first-letter {
	font-family: var(--lil-font-titulo);
	font-size: 3.1rem;
	float: left;
	line-height: 0.8;
	padding: 0.35rem 0.5rem 0 0;
	color: var(--lil-terracota);
}

.lil-specs {
	background: var(--lil-branco-quente);
	border: 1px solid var(--lil-border-quente);
	border-radius: var(--lil-radio-lg);
	overflow: hidden;
}

.lil-specs h3 {
	margin: 0;
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-titulo-card-sm);
	color: var(--lil-tinta);
	padding: var(--lil-espaco-sm) var(--lil-espaco);
	background: var(--lil-linho);
	border-bottom: 1px solid var(--lil-border-quente);
}

.lil-specs dl {
	margin: 0;
	padding: var(--lil-espaco-3xs) var(--lil-espaco) var(--lil-espaco-sm);
}

.lil-specs__row {
	display: flex;
	justify-content: space-between;
	gap: var(--lil-espaco-sm);
	padding: var(--lil-espaco-xs) 0;
	border-bottom: 1px solid var(--lil-border-quente);
}

.lil-specs__row:last-child {
	border-bottom: 0;
}

.lil-specs dt {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-mut);
}

.lil-specs dd {
	margin: 0;
	font-size: var(--lil-fs-sm);
	font-weight: var(--lil-peso-semi);
	color: var(--lil-text-forte);
	text-align: right;
}

/* --- Comparacao --- */
.lil-compare {
	max-width: 760px;
	margin: 0 auto;
	background: var(--lil-branco-quente);
	border: 1px solid var(--lil-border-suave);
	border-radius: var(--lil-radio-lg);
	overflow: hidden;
	box-shadow: var(--lil-sombra-suave);
}

.lil-compare__row {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
}

.lil-compare__row + .lil-compare__row {
	border-top: 1px solid var(--lil-border-suave);
}

.lil-compare__row > div {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	padding: var(--lil-espaco-sm) var(--lil-espaco-xs);
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
}

.lil-compare__row--head > div {
	background: var(--lil-linho);
	font-weight: var(--lil-peso-forte);
	font-size: var(--lil-fs-xs);
	letter-spacing: var(--lil-ls-wide);
	text-transform: uppercase;
}

.lil-compare__feat {
	color: var(--lil-text-forte);
	font-weight: var(--lil-peso-semi);
}

.lil-compare__us {
	background: rgba(194, 97, 90, 0.05);
}

.lil-compare__row--head .lil-compare__us {
	color: var(--lil-terracota-escuro);
}

.lil-compare svg {
	flex-shrink: 0;
}

.lil-ico-yes {
	display: inline-flex;
	color: var(--lil-salvia);
}

.lil-ico-no {
	display: inline-flex;
	color: var(--lil-muted);
}

/* --- Blocos foto + texto --- */
.lil-story {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-lg);
	align-items: center;
}

.lil-story + .lil-story {
	margin-top: var(--lil-espaco-xl);
}

.lil-story__media {
	position: relative;
	aspect-ratio: 5 / 4;
	border-radius: var(--lil-radio-lg);
	overflow: hidden;
	background: var(--lil-areia);
	box-shadow: var(--lil-sombra-card);
}

.lil-story__media img,
.lil-story__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lil-story__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: var(--lil-radio-full);
	display: grid;
	place-items: center;
	background: rgba(251, 249, 245, 0.92);
	color: var(--lil-terracota);
	box-shadow: var(--lil-sombra-suave);
	padding-left: 3px;
}

.lil-story__tag {
	position: absolute;
	left: var(--lil-espaco-xs);
	bottom: var(--lil-espaco-xs);
	background: var(--lil-branco);
	color: var(--lil-terracota-escuro);
	font-size: 1.3rem;
	line-height: 1;
	padding: var(--lil-espaco-3xs) var(--lil-espaco-xs);
	border-radius: var(--lil-radio-pill);
	box-shadow: var(--lil-sombra-suave);
}

.lil-story__num {
	display: block;
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-sm);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-wide);
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco-3xs);
}

.lil-story__body h3 {
	font-size: var(--lil-fs-h3);
	margin-bottom: var(--lil-espaco-xs);
}

.lil-story__body p {
	font-size: var(--lil-fs-base);
	color: var(--lil-text-soft);
	line-height: 1.7;
	margin: 0;
}

.lil-story__list {
	list-style: none;
	margin: var(--lil-espaco-sm) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lil-espaco-2xs);
}

.lil-story__list li {
	display: flex;
	gap: var(--lil-espaco-2xs);
	align-items: flex-start;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
}

.lil-story__list svg {
	color: var(--lil-salvia);
	flex-shrink: 0;
	margin-top: 2px;
}

/* --- Prova social (cartoes) --- */
.lil-reviews {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco);
}

.lil-review {
	display: flex;
	flex-direction: column;
	gap: var(--lil-espaco-xs);
	margin: 0;
	background: var(--lil-branco-quente);
	border: 1px solid var(--lil-border-suave);
	border-radius: var(--lil-radio-lg);
	padding: var(--lil-espaco);
	box-shadow: var(--lil-sombra-suave);
}

.lil-review__stars {
	color: var(--lil-terracota);
	letter-spacing: 2px;
}

.lil-review blockquote {
	margin: 0;
	font-size: var(--lil-fs-base);
	color: var(--lil-text-soft);
	line-height: 1.6;
}

.lil-review__who {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-2xs);
	margin-top: auto;
}

.lil-review__who img {
	width: 42px;
	height: 42px;
	border-radius: var(--lil-radio-full);
	object-fit: cover;
}

.lil-review__who strong {
	display: block;
	font-size: var(--lil-fs-sm);
	color: var(--lil-tinta);
}

.lil-review__who em {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-style: normal;
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-semi);
	color: var(--lil-text-soft); /* contraste AA; acento salvia fica so no icone */
}

.lil-review__who em svg {
	color: var(--lil-salvia);
}

/* --- Fecho (banda tinta) --- */
.lil-pdp-closer {
	text-align: center;
}

.lil-pdp-closer .lil-eyebrow-script {
	color: var(--lil-blush);
}

.lil-pdp-closer .lil-h2 {
	max-width: 20ch;
	margin-inline: auto;
}

.lil-pdp-closer .lil-lead {
	color: var(--lil-muted-frio);
	margin: var(--lil-espaco-sm) auto var(--lil-espaco-md);
	max-width: 48ch;
}

/* FAQ dentro da banda: neutraliza o max-width/margin/padding antigos */
.lil-pdp-band .lil-pdp-faq {
	max-width: 780px;
	margin: 0 auto;
	padding: 0;
}

.lil-pdp-band .lil-pdp-faq__item summary {
	font-size: var(--lil-fs-lead);
	padding: var(--lil-espaco) 0;
}

.lil-pdp-band .lil-pdp-faq__item summary::after {
	font-size: 1.6rem;
}

.lil-pdp-band .lil-pdp-faq__item p {
	font-size: var(--lil-fs-base);
}

/* --------------------------------------------------------------------------
   14. PDP grande — desktop (>=768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.lil-descr {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--lil-espaco-2xl);
	}

	.lil-story {
		grid-template-columns: 1fr 1fr;
		gap: var(--lil-espaco-2xl);
	}

	.lil-story--rev .lil-story__media {
		order: 2;
	}

	.lil-reviews {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Comparacao em ecra muito estreito (<=380px): apertar para nao esmagar */
@media (max-width: 380px) {
	.lil-compare__row > div {
		padding: var(--lil-espaco-xs) var(--lil-espaco-3xs);
		font-size: var(--lil-fs-xs);
		gap: 2px;
	}

	.lil-compare__row--head > div {
		font-size: 0.6875rem;
		letter-spacing: 0.02em;
	}
}

/* ==========================================================================
   15. Galeria propria do produto (destaques + 1 video) + faixa UGC + relacionados
   ========================================================================== */

/* Galeria: rail de thumbs + palco grande. Vive na coluna da galeria do Blocksy
   (mantemos a classe .woocommerce-product-gallery para herdar a largura/coluna). */
/* Galeria — MOBILE: grid 2 colunas (compacta, resumo logo abaixo).
   DESKTOP: coluna unica com IMAGENS GRANDES empilhadas (1xN); o resumo fica
   sticky ao lado e larga quando as imagens acabam (regra mais abaixo). */
.lil-gallery--grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--lil-espaco-2xs);
}

/* 1 unico destaque -> ocupa a coluna toda */
.lil-gallery--grid[data-count="1"] {
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.lil-gallery--grid {
		grid-template-columns: 1fr; /* coluna unica: imagens grandes */
		gap: var(--lil-espaco-sm);
	}
}

.lil-gallery__tile {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--lil-radio-lg);
	overflow: hidden;
	background: var(--lil-linho);
}

.lil-gallery__tile img,
.lil-gallery__tile video,
.lil-gallery__tile iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* Poster e player do tile de video preenchem o tile (sobrepostos) */
.lil-gallery__vposter,
.lil-gallery__tile--video video,
.lil-gallery__tile--video iframe {
	position: absolute;
	inset: 0;
}

.lil-gallery__tile--video {
	background: var(--lil-tinta);
}

.lil-gallery__playbtn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: transparent; /* o poster ja esta por tras */
}

.lil-gallery__playbadge {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 62px;
	height: 62px;
	border-radius: var(--lil-radio-full);
	display: grid;
	place-items: center;
	background: rgba(251, 249, 245, 0.92);
	color: var(--lil-terracota);
	box-shadow: var(--lil-sombra-suave);
	padding-left: 3px;
	transition: transform var(--lil-transicao);
}

.lil-gallery__playbtn:hover .lil-gallery__playbadge,
.lil-gallery__playbtn:focus-visible .lil-gallery__playbadge {
	transform: translate(-50%, -50%) scale(1.06);
}

.lil-gallery__vlabel {
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--lil-espaco-2xs);
	text-align: center;
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-forte);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--lil-branco);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.lil-gallery__hint {
	margin: var(--lil-espaco-2xs) 0 0;
	font-size: var(--lil-fs-xs);
	color: var(--lil-muted);
	font-style: italic;
}

@media (prefers-reduced-motion: reduce) {
	.lil-gallery__playbtn:hover .lil-gallery__playbadge,
	.lil-gallery__playbtn:focus-visible .lil-gallery__playbadge {
		transform: translate(-50%, -50%);
	}
}

/* Produtos relacionados Woo (re-hospedados como banda) — respiro de banda */
.woocommerce .related.products,
.woocommerce .up-sells.products {
	padding-block: var(--lil-secao-py);
}

.woocommerce .related.products > h2,
.woocommerce .related.products > .products {
	max-width: var(--lil-largura);
	margin-inline: auto;
	padding-inline: var(--lil-secao-px);
}

/* --------------------------------------------------------------------------
   16. UGC marquee — carrossel rotativo CONTINUO que ocupa a pagina toda.
   Os cartoes sao duplicados (4x no PHP); animamos -25% (= 1 conjunto) em loop
   seamless. Pausa no hover/foco; respeita prefers-reduced-motion (vira scroll).
   -------------------------------------------------------------------------- */
.lil-ugc--marquee {
	overflow: hidden;
}

.lil-ugc--marquee .lil-ugc__track {
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	gap: 0;
	padding: var(--lil-espaco-2xs) 0 var(--lil-espaco);
	overflow: visible;
	scroll-snap-type: none;
	animation: lil-ugc-marquee 50s linear infinite;
}

.lil-ugc--marquee .lil-ugc__card {
	width: clamp(220px, 17vw, 300px); /* maiores que o base (200px), mesmo ratio 9/16 */
	margin-right: var(--lil-espaco-sm); /* cell uniforme p/ loop seamless */
	scroll-snap-align: none;
}

.lil-ugc--marquee:hover .lil-ugc__track,
.lil-ugc--marquee:focus-within .lil-ugc__track,
.lil-ugc--marquee.is-offscreen .lil-ugc__track { /* pausa fora do ecra (JS, perf) */
	animation-play-state: paused;
}

@keyframes lil-ugc-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
	.lil-ugc--marquee .lil-ugc__track {
		animation: none;
		overflow-x: auto;
		padding-inline: var(--lil-secao-px);
	}
}

/* --------------------------------------------------------------------------
   17. Lightbox da galeria (substitui o zoom/lightbox nativo do WooCommerce)
   -------------------------------------------------------------------------- */
.lil-gallery__img {
	cursor: zoom-in;
}

.lil-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: var(--lil-espaco);
	background: rgba(33, 30, 27, 0.92);
}

.lil-lightbox img {
	max-width: 92vw;
	max-height: 92vh;
	object-fit: contain;
	border-radius: var(--lil-radio-sm);
	box-shadow: var(--lil-sombra-media);
}

.lil-lightbox__close {
	position: absolute;
	top: 1rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--lil-radio-full);
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.lil-lightbox__close:hover,
.lil-lightbox__close:focus-visible {
	background: rgba(255, 255, 255, 0.26);
}