/* ==========================================================================
   Riscalo — main.css
   Componentes do tema. Tokens em style.css (:root, prefixo --lil-).
   Mobile-first; grids colapsam para 1 coluna. Sem cores hardcoded.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout — container / section
   -------------------------------------------------------------------------- */
.lil-container {
	width: 100%;
	max-width: var(--lil-largura);
	margin-inline: auto;
	padding-inline: var(--lil-secao-px);
}

.lil-section {
	padding-block: var(--lil-secao-py);
}

.lil-section--linho {
	background-color: var(--lil-linho);
}

/* Seam quente entre duas seccoes linho consecutivas (evita fusao visual). */
.lil-section--linho + .lil-section--linho {
	border-top: 1px solid var(--lil-border-quente);
}

.lil-section--branco {
	background-color: var(--lil-branco);
}

/* Veu blush — "aquecer" a pagina ate ao pico emotivo (testemunho). */
.lil-section--blush {
	background: var(--lil-blush-veu);
}

.lil-section--tinta {
	background-color: var(--lil-tinta);
	color: var(--lil-muted-frio);
}

.lil-section--tinta .lil-h1,
.lil-section--tinta .lil-h2,
.lil-section--tinta .lil-h3 {
	color: var(--lil-branco);
}

.lil-divider {
	border: 0;
	height: 1px;
	background-color: var(--lil-border-quente);
	margin-block: var(--lil-espaco-md);
}

/* --------------------------------------------------------------------------
   2. Tipografia de componente
   -------------------------------------------------------------------------- */
.lil-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--lil-espaco-2xs);
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-label);
	text-transform: uppercase;
	color: var(--lil-terracota-escuro);
	margin: 0 0 var(--lil-espaco-sm);
}

.lil-h1 {
	font-family: var(--lil-font-titulo);
	font-weight: var(--lil-peso-medio);
	font-size: var(--lil-fs-display);
	line-height: 1.08;
	letter-spacing: var(--lil-ls-display);
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco);
}

.lil-h2 {
	font-family: var(--lil-font-titulo);
	font-weight: var(--lil-peso-medio);
	font-size: var(--lil-fs-h2);
	line-height: 1.14;
	letter-spacing: var(--lil-ls-display);
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco);
}

.lil-h3 {
	font-family: var(--lil-font-titulo);
	font-weight: var(--lil-peso-medio);
	font-size: var(--lil-fs-h3);
	line-height: 1.16;
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco-sm);
}

.lil-accent-italic {
	font-style: italic;
	color: var(--lil-terracota);
}

.lil-lead {
	font-family: var(--lil-font-corpo);
	font-weight: var(--lil-peso-normal);
	font-size: var(--lil-fs-lead);
	line-height: 1.55;
	color: var(--lil-text-soft);
	max-width: var(--lil-medida);
	margin: 0 0 var(--lil-espaco);
}

.lil-manuscrito {
	font-family: var(--lil-font-manuscrito);
	color: var(--lil-text-soft);
	line-height: 1.2;
}

/* --------------------------------------------------------------------------
   3. Botões / links
   -------------------------------------------------------------------------- */
.lil-btn,
.lil-btn:link,
.lil-btn:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--lil-espaco-2xs);
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-medio);
	letter-spacing: var(--lil-ls-btn);
	text-transform: uppercase;
	line-height: 1;
	padding: 18px 34px;
	border: 1px solid transparent;
	border-radius: var(--lil-radio-btn);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--lil-transicao), color var(--lil-transicao), border-color var(--lil-transicao);
}

.lil-btn:hover,
.lil-btn:focus {
	text-decoration: none;
}

.lil-btn--primary,
.lil-btn--primary:link,
.lil-btn--primary:visited {
	background-color: var(--lil-terracota);
	color: var(--lil-branco);
}

.lil-btn--primary:hover,
.lil-btn--primary:focus {
	background-color: var(--lil-terracota-escuro);
	color: var(--lil-branco);
}

.lil-btn--ghost,
.lil-btn--ghost:link,
.lil-btn--ghost:visited {
	background-color: transparent;
	color: var(--lil-text-forte);
	border-color: var(--lil-border-forte);
}

.lil-btn--ghost:hover,
.lil-btn--ghost:focus {
	border-color: var(--lil-terracota);
	color: var(--lil-terracota-escuro);
}

.lil-btn--block {
	display: flex;
	width: 100%;
}

.lil-link-arrow,
.lil-link-arrow:link,
.lil-link-arrow:visited {
	display: inline-flex;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-wide);
	color: var(--lil-terracota);
	text-decoration: none;
}

.lil-link-arrow::after {
	content: "\2192";
	transition: transform var(--lil-transicao);
}

.lil-link-arrow:hover,
.lil-link-arrow:focus {
	color: var(--lil-terracota-escuro);
	text-decoration: none;
}

.lil-link-arrow:hover::after,
.lil-link-arrow:focus::after {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   4. Header / nav
   -------------------------------------------------------------------------- */
.site-header {
	background-color: var(--lil-linho);
	border-bottom: 1px solid var(--lil-border-quente);
	position: relative;
	z-index: 50;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lil-espaco);
	padding-block: var(--lil-espaco-sm);
}

.site-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.site-logo img {
	height: 44px;
	width: auto;
	mix-blend-mode: multiply;
}

/* Wordmark de texto (marca em fonte Sacramento) — substitui a imagem do logo */
.site-logo__wordmark {
	font-family: var(--lil-font-logo);
	font-size: 2.5rem;
	line-height: 1;
	color: var(--lil-terracota);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.site-logo__wordmark {
		font-size: 2.75rem;
	}
}

.main-nav {
	flex: 1 1 auto;
}

.main-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--lil-espaco-md);
}

.main-nav__link,
.main-nav__link:link,
.main-nav__link:visited {
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-medio);
	letter-spacing: var(--lil-ls-tight);
	color: var(--lil-text-forte);
	text-decoration: none;
	transition: color var(--lil-transicao);
}

.main-nav__link:hover,
.main-nav__link:focus,
.main-nav__link.is-active {
	color: var(--lil-terracota-escuro);
	text-decoration: none;
}

.header-tools {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-sm);
	flex-shrink: 0;
}

.header-tools a,
.header-tools button {
	display: inline-flex;
	align-items: center;
	color: var(--lil-text-forte);
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-medio);
	letter-spacing: var(--lil-ls-tight);
	text-decoration: none;
}

.header-tools a:hover,
.header-tools a:focus,
.header-tools button:hover,
.header-tools button:focus {
	color: var(--lil-terracota-escuro);
	text-decoration: none;
}

.header-tools svg {
	width: 20px;
	height: 20px;
}

.cart-link {
	position: relative;
}

.cart-count {
	position: absolute;
	top: -8px;
	right: -10px;
	min-width: 18px;
	height: 18px;
	padding-inline: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--lil-terracota);
	color: var(--lil-branco);
	font-size: 0.6875rem;
	font-weight: var(--lil-peso-semi);
	line-height: 1;
	border-radius: var(--lil-radio-full);
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nav-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background-color: var(--lil-text-forte);
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Footer
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--lil-tinta);
	color: var(--lil-muted-frio);
	padding-block: var(--lil-espaco-xl);
	font-size: var(--lil-fs-sm);
}

.site-footer__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lil-espaco);
	flex-wrap: wrap;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--lil-espaco);
}

.site-footer__links a,
.site-footer__links a:link,
.site-footer__links a:visited {
	color: var(--lil-muted-frio);
	text-decoration: none;
	transition: color var(--lil-transicao);
}

.site-footer__links a:hover,
.site-footer__links a:focus {
	color: var(--lil-branco);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   6. Hero (home)
   -------------------------------------------------------------------------- */
.hero {
	background-color: var(--lil-linho);
	padding-block: var(--lil-secao-py);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-xl);
	align-items: center;
}

.hero__content {
	max-width: 36rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lil-espaco-sm) var(--lil-espaco-lg);
	margin-top: var(--lil-espaco-md);
}

.hero__content .lil-btn,
.hero__content .lil-link-arrow {
	margin-right: 0;
}

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

.hero__note svg {
	width: 18px;
	height: 18px;
	color: var(--lil-terracota);
	flex-shrink: 0;
}

.hero__media {
	position: relative;
}

.hero__card {
	background-color: var(--lil-areia);
	border-radius: var(--lil-radio-sm);
	box-shadow: var(--lil-sombra-card);
	overflow: hidden;
}

.hero__card img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: cover;
}

.hero__drawing {
	position: absolute;
	right: -1rem;
	bottom: -1.5rem;
	width: 42%;
	max-width: 220px;
	margin: 0;
	background-color: var(--lil-branco);
	padding: var(--lil-espaco-xs);
	border-radius: var(--lil-radio-sm);
	box-shadow: var(--lil-sombra-flutua);
	transform: rotate(-5deg);
}

.hero__drawing img {
	width: 100%;
	border-radius: 2px;
}

.hero__drawing figcaption {
	font-family: var(--lil-font-manuscrito);
	font-size: 1.25rem;
	color: var(--lil-text-soft);
	text-align: center;
	margin-top: var(--lil-espaco-3xs);
}

/* --------------------------------------------------------------------------
   7. Processo
   -------------------------------------------------------------------------- */
.process {
	text-align: center;
}

.process__steps {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lil-espaco-lg);
	margin-top: var(--lil-espaco-xl);
}

.process-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 16rem;
}

.process-step__icon {
	width: 74px;
	height: 74px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--lil-border-forte);
	border-radius: var(--lil-radio-full);
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco-sm);
}

.process-step__icon svg {
	width: 32px;
	height: 32px;
}

.process-step__num {
	display: block;
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-tag);
	text-transform: uppercase;
	color: var(--lil-terracota-escuro);
	margin-bottom: var(--lil-espaco-3xs);
}

.process-step .lil-h3,
.process-step h3 {
	font-size: var(--lil-fs-titulo-card);
}

.process__arrow {
	display: none;
	color: var(--lil-border-forte);
}

.process__arrow svg {
	width: 28px;
	height: 28px;
}

/* --------------------------------------------------------------------------
   8. Categorias — cat-grid
   -------------------------------------------------------------------------- */
.cat-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lil-espaco);
	margin-top: var(--lil-espaco-xl);
}

.cat-card,
.cat-card:link,
.cat-card:visited {
	display: block;
	text-decoration: none;
	color: inherit;
}

.cat-card:hover,
.cat-card:focus {
	text-decoration: none;
}

.cat-card__media {
	aspect-ratio: 1 / 1;
	background-color: var(--lil-areia);
	border-radius: var(--lil-radio-sm);
	overflow: hidden;
	box-shadow: var(--lil-sombra-suave);
	margin-bottom: var(--lil-espaco-xs);
}

.cat-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lil-transicao);
}

.cat-card:hover .cat-card__media img,
.cat-card:focus .cat-card__media img {
	transform: scale(1.03);
}

.cat-card__title {
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-titulo-card-sm);
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco-3xs);
}

.cat-card__price {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-mut2);
}

/* --------------------------------------------------------------------------
   9. Cartão de produto — product-card
   -------------------------------------------------------------------------- */
.product-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.product-card__media {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--lil-linho);
	border-radius: var(--lil-radio-sm);
	overflow: hidden;
	margin-bottom: var(--lil-espaco-sm);
}

.product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-card__badge {
	position: absolute;
	top: var(--lil-espaco-xs);
	left: var(--lil-espaco-xs);
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	background-color: var(--lil-terracota);
	color: var(--lil-branco);
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-pill);
	text-transform: uppercase;
	border-radius: var(--lil-radio-pill);
}

.product-card__badge--salvia {
	background-color: var(--lil-salvia);
}

.product-card__badge--tinta {
	background-color: var(--lil-tinta);
}

.product-card__title {
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-titulo-card);
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco-3xs);
}

.product-card__title a,
.product-card__title a:link,
.product-card__title a:visited {
	color: inherit;
	text-decoration: none;
}

.product-card__title a:hover,
.product-card__title a:focus {
	color: var(--lil-terracota-escuro);
	text-decoration: none;
}

.product-card__price {
	font-size: var(--lil-fs-base);
	color: var(--lil-text-forte);
	font-weight: var(--lil-peso-medio);
	margin-bottom: var(--lil-espaco-3xs);
}

.product-card__meta {
	font-size: var(--lil-fs-meta);
	color: var(--lil-muted);
	margin-bottom: var(--lil-espaco-sm);
}

.product-card__swatches {
	display: flex;
	gap: var(--lil-espaco-3xs);
	margin-bottom: var(--lil-espaco-sm);
}

.product-card__swatches span {
	width: 15px;
	height: 15px;
	border-radius: var(--lil-radio-full);
	border: 1px solid var(--lil-border);
}

.product-card__cta {
	margin-top: auto;
	align-self: flex-start;
}

/* --------------------------------------------------------------------------
   10. Testemunho
   -------------------------------------------------------------------------- */
.testimonial__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-xl);
	align-items: center;
}

.testimonial__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	/* A imagem lifestyle e uma composicao (foto + copy de marca a direita);
	   recortamos a esquerda para mostrar so a foto, como no design. */
	object-position: left center;
	border-radius: var(--lil-radio-sm);
	box-shadow: var(--lil-sombra-card);
}

.testimonial__quote {
	font-family: var(--lil-font-titulo);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);
	line-height: 1.3;
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco);
}

.testimonial__author {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-mut);
	margin-bottom: var(--lil-espaco-sm);
}

.testimonial__dots {
	display: flex;
	gap: var(--lil-espaco-2xs);
}

.testimonial__dots span {
	width: 8px;
	height: 8px;
	border-radius: var(--lil-radio-full);
	background-color: var(--lil-border-forte);
}

.testimonial__dots span.is-active {
	background-color: var(--lil-terracota);
}

/* --------------------------------------------------------------------------
   11. Trust band
   -------------------------------------------------------------------------- */
.trust {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--lil-espaco-lg);
}

.trust-item {
	text-align: center;
}

.trust-item svg {
	width: 36px;
	height: 36px;
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco-xs);
}

.trust-item .lil-h3,
.trust-item h3 {
	font-size: var(--lil-fs-titulo-card-sm);
	margin-bottom: var(--lil-espaco-3xs);
}

.trust-item p {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
	margin: 0;
}

/* --------------------------------------------------------------------------
   12. Loja — shop-head / toolbar / products
   -------------------------------------------------------------------------- */
.shop-head {
	background-color: var(--lil-linho);
	text-align: center;
	padding-block: var(--lil-espaco-2xl);
}

.shop-head .lil-lead {
	margin-inline: auto;
}

.shop-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--lil-espaco-xs);
	padding-block: var(--lil-espaco);
	border-bottom: 1px solid var(--lil-border-suave);
	margin-bottom: var(--lil-espaco-lg);
}

.shop-toolbar__count {
	margin-left: auto;
	font-size: var(--lil-fs-meta);
	color: var(--lil-muted);
}

.shop-filter,
.shop-filter:link,
.shop-filter:visited {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-medio);
	color: var(--lil-text-forte);
	background-color: var(--lil-branco-quente);
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-pill);
	text-decoration: none;
	transition: background-color var(--lil-transicao), color var(--lil-transicao), border-color var(--lil-transicao);
}

.shop-filter:hover,
.shop-filter:focus,
.shop-filter.is-active {
	background-color: var(--lil-terracota);
	color: var(--lil-branco);
	border-color: var(--lil-terracota);
	text-decoration: none;
}

/* .products / .product: o layout da loja e do produto e tratado pelo Blocksy +
   estilos core do WooCommerce. NAO impomos grid aqui (colidiria com o markup do
   Blocksy: galeria + resumo + tabs + relacionados como filhos de div.product). */

/* --------------------------------------------------------------------------
   13. Produto individual — (layout pelo Blocksy/Woo; sem regras de grelha)
   -------------------------------------------------------------------------- */

.product__preview {
	background-color: var(--lil-linho);
	padding: var(--lil-espaco-md);
	border-radius: var(--lil-radio-sm);
}

.preview-stage {
	position: relative;
	aspect-ratio: 1 / 1;
	background-color: var(--lil-areia);
	border-radius: var(--lil-radio);
	overflow: hidden;
}

.preview-stage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.preview-badge {
	position: absolute;
	top: var(--lil-espaco-xs);
	left: var(--lil-espaco-xs);
	display: inline-flex;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	padding: 6px 13px;
	background-color: var(--lil-branco-quente);
	color: var(--lil-text-forte);
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-medio);
	letter-spacing: var(--lil-ls-pill);
	border-radius: var(--lil-radio-pill);
	box-shadow: var(--lil-sombra-suave);
}

.preview-badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: var(--lil-radio-full);
	background-color: var(--lil-success-dot);
}

.preview-thumbs {
	display: flex;
	gap: var(--lil-espaco-xs);
	margin-top: var(--lil-espaco-sm);
}

.preview-thumbs img,
.preview-thumbs a {
	width: 72px;
	height: 72px;
	border-radius: var(--lil-radio);
	overflow: hidden;
	background-color: var(--lil-areia);
	object-fit: cover;
}

.product__summary {
	min-width: 0;
}

.product__eyebrow {
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-xs);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-label);
	text-transform: uppercase;
	color: var(--lil-terracota-escuro);
	margin-bottom: var(--lil-espaco-2xs);
}

.product__summary .product_title,
.product__summary h1 {
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-h1-pag);
	font-weight: var(--lil-peso-medio);
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco-sm);
}

.product__price,
.product__summary .price {
	font-size: 1.5rem;
	color: var(--lil-tinta);
	font-weight: var(--lil-peso-medio);
	margin-bottom: var(--lil-espaco-sm);
}

.product__rating {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco);
}

.config-step {
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-md);
	padding: var(--lil-espaco);
	margin-bottom: var(--lil-espaco-sm);
	background-color: var(--lil-branco-quente);
}

.config-step__head {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-2xs);
	margin-bottom: var(--lil-espaco-xs);
}

.config-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background-color: var(--lil-tinta);
	color: var(--lil-branco);
	font-size: var(--lil-fs-meta);
	font-weight: var(--lil-peso-semi);
	border-radius: var(--lil-radio-full);
}

.config-step__head label,
.config-step__head .config-step__label {
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-semi);
	letter-spacing: var(--lil-ls-tight);
	color: var(--lil-text-forte);
}

.product__cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lil-espaco-sm);
	margin-block: var(--lil-espaco);
}

.product__assurances {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lil-espaco);
	padding-block: var(--lil-espaco-sm);
	border-top: 1px solid var(--lil-border-suave);
}

.product__assurances > * {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	font-size: var(--lil-fs-meta);
	color: var(--lil-text-soft);
}

.product__assurances svg {
	width: 18px;
	height: 18px;
	color: var(--lil-salvia);
	flex-shrink: 0;
}

.product__accordion {
	margin-top: var(--lil-espaco);
	border-top: 1px solid var(--lil-border-suave);
}

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

.product__accordion summary {
	list-style: none;
	cursor: pointer;
	padding-block: var(--lil-espaco-sm);
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	font-weight: var(--lil-peso-medio);
	color: var(--lil-text-forte);
}

.product__accordion summary::-webkit-details-marker {
	display: none;
}

.product__accordion p {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
	padding-bottom: var(--lil-espaco-sm);
	margin: 0;
}

.reassurance {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-lg);
	background-color: var(--lil-linho);
	border-radius: var(--lil-radio-sm);
	padding: var(--lil-espaco-lg);
	margin-block: var(--lil-espaco-xl);
}

.reassurance > * {
	text-align: center;
}

.reassurance strong,
.reassurance__num {
	display: block;
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-stat);
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco-3xs);
}

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

.related {
	padding-block: var(--lil-espaco-xl);
	border-top: 1px solid var(--lil-border-suave);
}

.related .lil-h3,
.related h2 {
	font-size: var(--lil-fs-h3);
	margin-bottom: var(--lil-espaco-lg);
}

/* --------------------------------------------------------------------------
   14. Carrinho — (layout pelo Blocksy/Woo)
   NB: NAO estilamos `.cart` (colide com form.cart/table.cart do WooCommerce).
   -------------------------------------------------------------------------- */
.cart-items {
	display: flex;
	flex-direction: column;
	gap: var(--lil-espaco);
}

.cart-item {
	display: flex;
	gap: var(--lil-espaco);
	padding-bottom: var(--lil-espaco);
	border-bottom: 1px solid var(--lil-border-suave);
}

.cart-item__thumb,
.cart-item img {
	width: 118px;
	height: 118px;
	flex-shrink: 0;
	object-fit: cover;
	border-radius: var(--lil-radio);
	background-color: var(--lil-linho);
}

.cart-item__body {
	flex: 1 1 auto;
	min-width: 0;
}

.cart-item__title {
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-titulo-card-sm);
	color: var(--lil-tinta);
	margin: 0 0 var(--lil-espaco-3xs);
}

.cart-item__meta {
	font-size: var(--lil-fs-meta);
	color: var(--lil-muted);
}

.cart-item__draw {
	display: inline-flex;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	margin-top: var(--lil-espaco-2xs);
	padding: 5px 10px;
	background-color: var(--lil-linho);
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-pill);
	font-size: var(--lil-fs-xs);
	color: var(--lil-text-soft);
}

.cart-item__draw img {
	width: 28px;
	height: 28px;
	border-radius: 2px;
	object-fit: cover;
}

.qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-pill);
	overflow: hidden;
}

.qty button,
.qty .qty-btn {
	width: 34px;
	height: 34px;
	border: 0;
	background: none;
	color: var(--lil-muted-claro);
	font-size: 1.1rem;
	cursor: pointer;
	line-height: 1;
}

.qty input {
	width: 40px;
	border: 0;
	text-align: center;
	background: none;
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	color: var(--lil-text-forte);
}

.cart-summary {
	background-color: var(--lil-linho);
	border-radius: var(--lil-radio-sm);
	padding: var(--lil-espaco-lg);
	align-self: start;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lil-espaco-sm);
	padding-block: var(--lil-espaco-2xs);
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
}

.summary-row .lil-free,
.summary-row .free {
	color: var(--lil-salvia);
	font-weight: var(--lil-peso-semi);
}

.summary-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--lil-espaco-sm);
	padding-top: var(--lil-espaco-sm);
	margin-top: var(--lil-espaco-2xs);
	border-top: 1px solid var(--lil-border-quente);
	font-family: var(--lil-font-titulo);
	font-size: 1.375rem;
	color: var(--lil-tinta);
}

.cart-trustbar {
	background-color: var(--lil-tinta);
	color: var(--lil-muted-frio);
	text-align: center;
	padding: var(--lil-espaco) var(--lil-secao-px);
	font-size: var(--lil-fs-sm);
}

/* --------------------------------------------------------------------------
   15. Checkout — (layout pelo Blocksy/Woo)
   NB: NAO estilamos `.checkout` (colide com form.checkout do WooCommerce).
   -------------------------------------------------------------------------- */
.checkout-steps {
	display: flex;
	gap: var(--lil-espaco);
	font-size: var(--lil-fs-meta);
	color: var(--lil-muted);
}

.checkout-steps .is-active {
	color: var(--lil-terracota-escuro);
	font-weight: var(--lil-peso-semi);
}

.form-section {
	margin-bottom: var(--lil-espaco-lg);
}

.form-section h3,
.form-section .lil-h3 {
	font-family: var(--lil-font-titulo);
	font-size: 1.25rem;
	margin-bottom: var(--lil-espaco-sm);
}

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

.field label {
	display: block;
	font-size: var(--lil-fs-meta);
	font-weight: var(--lil-peso-medio);
	color: var(--lil-text-forte);
	margin-bottom: var(--lil-espaco-3xs);
}

.field input,
.field select,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-nav);
	color: var(--lil-text);
	background-color: var(--lil-branco-quente);
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-input);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--lil-terracota);
}

.field-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-sm);
}

.ship-option {
	display: flex;
	align-items: center;
	gap: var(--lil-espaco-xs);
	padding: var(--lil-espaco-sm);
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-md);
	margin-bottom: var(--lil-espaco-2xs);
	cursor: pointer;
}

.ship-option.is-selected {
	border-color: var(--lil-terracota);
	background-color: var(--lil-branco-quente);
}

.pay-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lil-espaco-2xs);
	margin-bottom: var(--lil-espaco-sm);
}

.pay-tabs button,
.pay-tabs .pay-tab {
	padding: 10px 16px;
	font-size: var(--lil-fs-nav);
	color: var(--lil-text-forte);
	background-color: var(--lil-branco-quente);
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-md);
	cursor: pointer;
}

.pay-tabs .is-selected,
.pay-tabs button.is-active {
	border-color: var(--lil-terracota);
	color: var(--lil-terracota-escuro);
}

.checkout-summary {
	background-color: var(--lil-linho);
	border-radius: var(--lil-radio-sm);
	padding: var(--lil-espaco-lg);
	align-self: start;
}

.gift-note {
	border: 1px dashed var(--lil-border-forte);
	border-radius: var(--lil-radio-lg);
	padding: var(--lil-espaco);
	margin-top: var(--lil-espaco-sm);
}

/* --------------------------------------------------------------------------
   16. Sobre — about-*
   -------------------------------------------------------------------------- */
.about-hero {
	background-color: var(--lil-linho);
	text-align: center;
	padding-block: var(--lil-espaco-2xl);
}

.about-hero .lil-lead {
	margin-inline: auto;
}

.about-story {
	padding-block: var(--lil-espaco-2xl);
}

.about-story__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-xl);
	align-items: center;
}

.about-story__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: left center;
	border-radius: var(--lil-radio-sm);
	box-shadow: var(--lil-sombra-card);
}

.about-story__signature {
	font-family: var(--lil-font-manuscrito);
	font-size: 1.75rem;
	color: var(--lil-terracota);
	margin-top: var(--lil-espaco);
}

.about-values {
	text-align: center;
}

.about-values__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-lg);
	margin-top: var(--lil-espaco-2xl);
}

.about-values__item svg {
	width: 32px;
	height: 32px;
	color: var(--lil-terracota);
}

.about-values__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1px solid var(--lil-border-forte);
	border-radius: var(--lil-radio-full);
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco-sm);
}

.about-cta {
	background-color: var(--lil-tinta);
	color: var(--lil-muted-frio);
	text-align: center;
	padding-block: var(--lil-espaco-2xl);
}

.about-cta .lil-h2,
.about-cta h2 {
	color: var(--lil-branco);
}

/* --------------------------------------------------------------------------
   17. Utilitários
   -------------------------------------------------------------------------- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   18. Responsivo — breakpoints ascendentes (mobile-first)
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.field-row {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 768px) {
	.site-logo img {
		height: 46px;
	}

	.hero__inner {
		grid-template-columns: 1.05fr 1fr;
	}

	.testimonial__inner {
		grid-template-columns: 1fr 1fr;
	}

	.trust {
		grid-template-columns: repeat(4, 1fr);
	}

	.cat-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.process__steps {
		flex-direction: row;
		align-items: flex-start;
		justify-content: center;
	}

	.process__arrow {
		display: inline-flex;
		align-self: center;
		margin-top: 37px;
	}

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

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

	.about-story__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* (As grelhas de loja/produto/carrinho/checkout em desktop sao do Blocksy/Woo.) */

/* --------------------------------------------------------------------------
   19. Navegação mobile (abaixo de 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.nav-toggle {
		display: flex;
		order: 3;
	}

	.main-nav {
		flex-basis: 100%;
		order: 4;
		display: none;
	}

	.main-nav.is-active {
		display: block;
	}

	.main-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--lil-espaco-sm);
		padding-block: var(--lil-espaco);
	}

	.site-header__inner {
		flex-wrap: wrap;
	}
}

/* ==========================================================================
   20. Camada de CALOR — amor + vontade de comprar
   Acentos manuscritos, brilho blush, elevacoes gentis, prova social e CTA.
   Mantem o registo editorial; motion subtil (respeita prefers-reduced-motion).
   ========================================================================== */

/* --- Hero: halo quente, prova social e desenho a flutuar --- */
.hero {
	background-image: radial-gradient(90% 120% at 78% 18%, #FBF1EA 0%, rgba(251, 241, 234, 0) 60%);
}

.hero__media::before {
	content: "";
	position: absolute;
	inset: -14% -10% auto auto;
	width: 72%;
	height: 72%;
	background: radial-gradient(circle, rgba(216, 167, 163, 0.40), rgba(216, 167, 163, 0) 70%);
	z-index: 0;
	pointer-events: none;
}

.hero__card,
.hero__drawing {
	position: relative;
	z-index: 1;
}

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

.hero__stars {
	color: var(--lil-terracota);
	letter-spacing: 2px;
	font-size: 1rem;
	flex-shrink: 0;
}

.hero__social-text {
	margin: 0;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
}

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

.hero__drawing {
	animation: lil-float 6s ease-in-out infinite;
}

@keyframes lil-float {
	0%, 100% { transform: rotate(-5deg) translateY(0); }
	50%      { transform: rotate(-5deg) translateY(-10px); }
}

/* --- Botoes: elevacao calorosa --- */
.lil-btn {
	transition: background-color var(--lil-transicao), color var(--lil-transicao),
		transform var(--lil-transicao), box-shadow var(--lil-transicao);
}

.lil-btn--primary {
	box-shadow: 0 8px 20px rgba(194, 97, 90, 0.20);
}

.lil-btn--primary:hover,
.lil-btn--primary:focus {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(169, 78, 71, 0.28);
}

/* --- Faixa de promessa --- */
.lil-promise {
	background: var(--lil-branco-quente);
	border-block: 1px solid var(--lil-border-suave);
}

.lil-promise__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--lil-espaco-xs) var(--lil-espaco);
	padding-block: var(--lil-espaco-sm);
}

.lil-promise__item {
	display: inline-flex;
	align-items: center;
	gap: var(--lil-espaco-2xs);
	font-size: var(--lil-fs-sm);
	font-weight: var(--lil-peso-medio);
	color: var(--lil-text-forte);
}

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

.lil-promise__sep {
	color: var(--lil-blush);
	font-size: 0.7rem;
}

/* --- Processo: circulos blush, mais quentes --- */
.process-step__icon {
	background-color: var(--lil-blush-claro);
	border-color: transparent;
	color: var(--lil-terracota-escuro);
}

/* --- Categorias: elevacao gentil no hover --- */
.cat-card {
	transition: transform var(--lil-transicao);
}

.cat-card__media {
	transition: box-shadow var(--lil-transicao), transform var(--lil-transicao);
}

.cat-card:hover {
	transform: translateY(-4px);
}

.cat-card:hover .cat-card__media {
	box-shadow: var(--lil-sombra-card);
}

/* --- Testemunho: eyebrow manuscrito + estrelas --- */
.testimonial__eyebrow {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--lil-terracota);
	margin: 0 0 var(--lil-espaco-3xs);
}

.testimonial__stars {
	display: block;
	color: var(--lil-terracota);
	letter-spacing: 3px;
	font-size: 1.05rem;
	margin-bottom: var(--lil-espaco-sm);
}

/* --- CTA de fecho (banda quente) --- */
.closing {
	background: radial-gradient(85% 130% at 50% 0%, #FBF1EA 0%, var(--lil-linho) 70%);
	text-align: center;
	border-top: 1px solid var(--lil-border-quente);
}

.closing__inner {
	max-width: 62ch;
	margin-inline: auto;
}

.closing__eyebrow {
	font-size: 1.6rem;
	line-height: 1;
	color: var(--lil-terracota);
	margin: 0 0 var(--lil-espaco-2xs);
}

.closing__title {
	margin: 0 0 var(--lil-espaco);
}

.closing__lead {
	font-size: var(--lil-fs-lead);
	color: var(--lil-text-soft);
	margin: 0 auto var(--lil-espaco-md);
	max-width: 50ch;
}

.closing__btn {
	margin-inline: auto;
}

.closing__note {
	margin-top: var(--lil-espaco);
	font-size: var(--lil-fs-meta);
	letter-spacing: var(--lil-ls-wide);
	text-transform: uppercase;
	color: var(--lil-muted);
}

/* --- Acessibilidade: respeitar reducao de movimento --- */
@media (prefers-reduced-motion: reduce) {
	.hero__drawing { animation: none; }

	.lil-btn--primary:hover,
	.lil-btn--primary:focus,
	.cat-card:hover {
		transform: none;
	}
}

/* ==========================================================================
   21. Elementos do design importado — announce, stats, UGC, clube
   ========================================================================== */

/* --- Announcement bar (topo do site) --- */
.lil-announce {
	background-color: var(--lil-tinta);
	color: var(--lil-branco);
}

.lil-announce__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--lil-espaco-2xs) var(--lil-espaco);
	padding-block: 0.5rem;
}

.lil-announce__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: var(--lil-fs-meta);
	letter-spacing: var(--lil-ls-tight);
}

.lil-announce__item svg {
	color: var(--lil-blush);
	flex-shrink: 0;
}

.lil-announce__sep {
	color: var(--lil-terracota);
	font-size: 0.6rem;
}

@media (max-width: 600px) {
	.lil-announce__item:not(:first-child),
	.lil-announce__sep {
		display: none;
	}
}

/* --- Prova social (stats band) --- */
.lil-stats {
	text-align: center;
}

.lil-stats__rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lil-espaco-3xs);
	margin-bottom: var(--lil-espaco-xl);
}

.lil-stats__stars {
	color: var(--lil-terracota);
	letter-spacing: 4px;
	font-size: 1.4rem;
}

.lil-stats__score {
	margin: 0;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-mut);
	letter-spacing: var(--lil-ls-wide);
}

.lil-stats__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-lg);
}

.lil-stats__num {
	display: block;
	font-family: var(--lil-font-titulo);
	font-size: var(--lil-fs-stat);
	color: var(--lil-terracota);
	margin-bottom: var(--lil-espaco-3xs);
}

.lil-stats__label {
	display: block;
	max-width: 26ch;
	margin-inline: auto;
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
}

@media (min-width: 768px) {
	.lil-stats__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- UGC / videos das familias --- */
.lil-ugc__head {
	text-align: center;
	margin-bottom: var(--lil-espaco-lg);
}

.lil-ugc__head .lil-eyebrow {
	justify-content: center;
}

.lil-ugc__sub {
	font-size: var(--lil-fs-sm);
	color: var(--lil-text-soft);
	margin: 0 0 var(--lil-espaco-2xs);
}

.lil-ugc__sub strong {
	color: var(--lil-terracota);
}

.lil-ugc__rating {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: var(--lil-fs-meta);
	color: var(--lil-text-mut);
}

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

.lil-ugc__track {
	display: flex;
	gap: var(--lil-espaco-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: var(--lil-espaco-2xs) var(--lil-secao-px) var(--lil-espaco);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.lil-ugc__track::-webkit-scrollbar {
	display: none;
}

.lil-ugc__card {
	position: relative;
	flex: 0 0 auto;
	width: 200px;
	aspect-ratio: 9 / 16;
	border-radius: var(--lil-radio-lg);
	overflow: hidden;
	scroll-snap-align: start;
	background-color: var(--lil-areia);
	box-shadow: var(--lil-sombra-suave);
	text-decoration: none;
	display: block;
	transition: transform var(--lil-transicao), box-shadow var(--lil-transicao);
}

.lil-ugc__card:hover,
.lil-ugc__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--lil-sombra-card);
}

.lil-ugc__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.lil-ugc__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(40, 34, 28, 0) 45%, rgba(40, 34, 28, 0.55) 100%);
}

.lil-ugc__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: 54px;
	height: 54px;
	border-radius: var(--lil-radio-full);
	display: inline-flex;
	align-items: center;
	justify-content: 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-ugc__card:hover .lil-ugc__play {
	transform: translate(-50%, -50%) scale(1.08);
}

.lil-ugc__cap {
	position: absolute;
	left: var(--lil-espaco-xs);
	bottom: var(--lil-espaco-xs);
	z-index: 2;
	color: var(--lil-branco);
	font-size: 1.3rem;
	line-height: 1;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

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

/* --- Newsletter / Clube --- */
.lil-club__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lil-espaco-xl);
	align-items: center;
}

.lil-club__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: left center;
	border-radius: var(--lil-radio-sm);
	box-shadow: var(--lil-sombra-card);
}

.lil-club__form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lil-espaco-2xs);
	margin-top: var(--lil-espaco);
}

.lil-club__input {
	flex: 1 1 220px;
	padding: 16px 18px;
	border: 1px solid var(--lil-border);
	border-radius: var(--lil-radio-input);
	background: var(--lil-branco-quente);
	font-family: var(--lil-font-corpo);
	font-size: var(--lil-fs-base);
	color: var(--lil-tinta);
}

.lil-club__input:focus {
	outline: none;
	border-color: var(--lil-terracota);
	box-shadow: 0 0 0 3px rgba(194, 97, 90, 0.15);
}

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

@media (min-width: 768px) {
	.lil-club__inner {
		grid-template-columns: 1fr 1.1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lil-ugc__card:hover,
	.lil-ugc__card:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   22. UPLIFT — mais atual, harmonioso e com o amor mae-filho
   (painel de design: arte/emocao + UI moderna + frontend/UX)
   ========================================================================== */

/* --- Harmonia tipografica: quebras equilibradas nos titulos --- */
.lil-h1,
.lil-h2,
.lil-h3,
.lil-ugc__head h2,
.closing__title {
	text-wrap: balance;
}

/* --- Motivo grafico: sublinhado "a mao" da palavra-emocao --- */
.lil-underline-hand {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12' viewBox='0 0 120 12'%3E%3Cpath d='M2 7c18-6 38-6 58-2s40 6 58 1' fill='none' stroke='%23C2615A' stroke-width='2.4' stroke-linecap='round' opacity='0.55'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 0.86em;
	background-size: 100% 0.42em;
	padding-bottom: 0.08em;
}

/* --- Eyebrow manuscrito (voz emocional Caveat) --- */
.lil-eyebrow-script {
	display: block;
	font-family: var(--lil-font-manuscrito);
	font-size: 1.6rem;
	line-height: 1;
	color: var(--lil-terracota);
	text-transform: none;
	letter-spacing: 0;
	margin: 0 0 var(--lil-espaco-3xs);
}

/* --- CTAs respiram: hero e formulario do clube --- */
.hero__actions {
	gap: var(--lil-espaco) var(--lil-espaco-xl);
	margin-top: var(--lil-espaco-md);
}

.lil-link-arrow {
	min-height: 44px;
	align-items: center;
}

.lil-club__form {
	gap: var(--lil-espaco-xs) var(--lil-espaco-sm);
	margin-top: var(--lil-espaco-md);
}

/* --- Cabecalhos de seccao orfaos (estavam sem CSS) --- */
.cat-grid__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lil-espaco-2xs) var(--lil-espaco);
	margin-bottom: var(--lil-espaco-md);
}

.cat-grid__head .lil-link-arrow {
	min-height: 44px;
}

.process__head {
	max-width: 46ch;
	margin-inline: auto;
}

/* --- A11y: anel de foco visivel nos campos (estava so border) --- */
.field input:focus,
.field select:focus,
.field textarea:focus {
	box-shadow: var(--lil-foco-anel);
}

/* --- A11y: alvos de toque >= 44px sem mudar o visual --- */
.header-tools a,
.header-tools button {
	min-height: 44px;
	min-width: 44px;
	justify-content: center;
}

.shop-filter {
	min-height: 40px;
}

/* --- Botoes: elevacao unificada via tokens --- */
.lil-btn--primary {
	box-shadow: var(--lil-sombra-btn);
}

.lil-btn--primary:hover,
.lil-btn--primary:focus {
	transform: translateY(var(--lil-btn-lift));
	box-shadow: var(--lil-sombra-btn-hover);
}

/* --- Fotografia mae-filho: vel quente para coesao tonal --- */
.testimonial__media,
.lil-club__media {
	position: relative;
}

.testimonial__media::after,
.lil-club__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--lil-radio-sm);
	background: linear-gradient(180deg, rgba(216, 167, 163, 0.10), rgba(194, 97, 90, 0.06));
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* --- Testemunho: pico emotivo com mais ar e citacao mais dramatica --- */
.testimonial {
	padding-block: calc(var(--lil-secao-py) * 1.15);
}

.testimonial__quote {
	font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.2rem);
	line-height: 1.32;
}

/* --- Hero: ponte "antes -> depois" e legenda na peca --- */
.hero__bridge {
	position: absolute;
	z-index: 2;
	right: 30%;
	bottom: -0.5rem;
	width: 92px;
	color: var(--lil-terracota);
	pointer-events: none;
}

.hero__bridge path {
	stroke-dasharray: 160;
	stroke-dashoffset: 160;
	animation: lil-draw 1.4s ease 0.4s forwards;
}

@keyframes lil-draw {
	to { stroke-dashoffset: 0; }
}

.hero__card-cap {
	position: absolute;
	left: var(--lil-espaco-sm);
	bottom: var(--lil-espaco-sm);
	z-index: 2;
	font-family: var(--lil-font-manuscrito);
	font-size: 1.4rem;
	color: var(--lil-branco);
	text-shadow: 0 1px 8px rgba(40, 34, 28, 0.45);
}

/* --- Reveal on scroll (moderno, sem libs; classe aplicada por JS) --- */
.lil-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}

.lil-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Failsafe: na impressao/PDF o conteudo nunca pode sair em branco */
@media print {
	.lil-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* --- Afordancia de scroll na fila UGC --- */
.lil-ugc {
	position: relative;
}

.lil-ugc__track {
	scroll-padding-left: var(--lil-secao-px);
}

/* --- UGC full-bleed (pagina de produto): sair da caixa do conteudo (max 1200)
   e ocupar a largura toda, como banda edge-to-edge igual a da homepage.
   O body tem overflow-x:hidden, por isso o 100vw nao cria scroll horizontal. --- */
.lil-ugc.lil-ugc--full {
	width: 100vw;
	max-width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* --- Responsivo: CTAs em coluna e cheios em ecra muito estreito --- */
@media (max-width: 519px) {
	.hero__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .lil-btn {
		width: 100%;
	}

	.hero__actions .lil-link-arrow {
		justify-content: center;
	}

	.lil-club__form {
		flex-direction: column;
	}

	.lil-club__form .lil-btn {
		width: 100%;
	}
}

/* --- Movimento reduzido: cobrir as novas animacoes --- */
@media (prefers-reduced-motion: reduce) {
	.hero__bridge path { animation: none; stroke-dashoffset: 0; }

	.lil-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Assinatura manuscrita do fecho */
.closing__signature {
	margin: var(--lil-espaco) 0 0;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--lil-terracota);
}