/**
 * Hopeellas — skin do front.
 *
 * Ajustes finos que vão além do theme.json (transições, hovers, detalhes).
 * A base da identidade (cores e tipografia) está em theme.json.
 */

/* Fundamentos: sem overflow e box-sizing previsível */
*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
figure,
video {
	max-width: 100%;
	height: auto;
}

.wp-site-blocks {
	overflow-x: clip;
}

/* Foco visível em todas as interações (acessibilidade e acabamento) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wc-block-mini-cart button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	border-radius: 0.5rem;
}

.wp-block-navigation a:focus-visible,
.wp-block-navigation a:focus {
	outline: none;
	box-shadow: none;
}

/* Cabeçalho fixo: o wrapper do template part (header) deixa de gerar box com
   display: contents, assim a barra de anúncio sai de cena ao rolar e a barra
   de navegação cola no topo da viewport por toda a página.

   Como o theme.json não define a cor "base", a classe has-base-background-color
   não gera regra nenhuma — por isso o header chega a ficar 100% transparente.
   Damos então um vidro fosco: levemente translúcido, com desfoque do conteúdo
   que passa por baixo ("backdrop-filter"). */
header.wp-block-template-part {
	display: contents;
}

.hopeellas-header {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(16px) saturate(1.3);
	-webkit-backdrop-filter: blur(16px) saturate(1.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	position: sticky;
	top: 0;
	z-index: 10;
}

/* Sem folga indesejada entre a barra de anúncio e o header após o collapse
   do wrapper (o header deixa de ser "primeiro filho" do bloco do site). */
.wp-site-blocks > .hopeellas-announce,
.wp-site-blocks > .hopeellas-header {
	margin-block-start: 0;
}

/* Busca no Header */
.hopeellas-header-search.wp-block-search {
	width: clamp(180px, 24vw, 340px);
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

.hopeellas-header-search.wp-block-search .wp-block-search__inside-wrapper {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 2.5rem;
	gap: 0.25rem;
	padding: 0.2rem 0.2rem 0.2rem 1.1rem;
	transition: border-color 0.2s ease;
}

.hopeellas-header-search.wp-block-search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.hopeellas-header-search .wp-block-search__input {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--primary-deep);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	min-width: 0;
	padding: 0.5rem 0;
}

.hopeellas-header-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--muted);
	opacity: 1;
}

.hopeellas-header-search .wp-block-search__input:focus-visible {
	outline: none;
}

.hopeellas-header-search .wp-block-search__button {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--base);
	display: inline-flex;
	flex-shrink: 0;
	height: 2.25rem;
	justify-content: center;
	line-height: 0;
	margin: 0 !important;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.2s ease;
	width: 2.25rem;
}

.hopeellas-header-search .wp-block-search__button:hover {
	background: var(--wp--preset--color--primary-deep);
	transform: scale(1.05);
}

.hopeellas-header-search .wp-block-search__button .search-icon {
	fill: currentColor;
	height: 1.1rem;
	width: 1.1rem;
}

/* Categorias no cabeçalho: linha central de acesso às coleções.
   O WP aplica a classe hopeellas-categories no <nav> E no <ul> interno;
   por isso as regras de "moldura" (borda superior e espaços) ficam só no
   elemento externo — senão a borda desenharia duas linhas. */
.hopeellas-categories:not(.wp-block-navigation__container) {
	border-top: 1px solid var(--wp--preset--color--surface);
	padding-top: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--20) !important;
}

.hopeellas-categories .wp-block-navigation__container {
	max-width: 100%;
	flex-wrap: wrap;
	row-gap: var(--wp--preset--spacing--20);
}

.hopeellas-categories .wp-block-navigation-item {
	position: relative;
}

.hopeellas-categories .wp-block-navigation-item:not(:last-child)::after {
	content: "";
	position: absolute;
	right: calc(var(--wp--preset--spacing--40) * -1);
	top: 50%;
	width: 4px;
	height: 4px;
	transform: translate(50%, -50%);
	border-radius: 50%;
	background: rgba(255, 82, 122, 0.35);
}

.hopeellas-categories .wp-block-navigation-item a {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.hopeellas-categories .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-decoration-color: rgba(255, 82, 122, 0.4);
	text-underline-offset: 0.2em;
}

@media (max-width: 781px) {
	.hopeellas-categories:not(.wp-block-navigation__container) {
		padding-top: var(--wp--preset--spacing--20);
	}

	.hopeellas-categories .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--20) !important;
		row-gap: var(--wp--preset--spacing--10);
	}

	.hopeellas-categories .wp-block-navigation-item:not(:last-child)::after {
		right: calc(var(--wp--preset--spacing--20) * -1);
	}

	.hopeellas-categories .wp-block-navigation-item a {
		font-size: 0.72rem;
		letter-spacing: 0.1em;
	}
}

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

section[id],
[id="main"] {
	scroll-margin-top: calc(var(--wp--preset--spacing--60) + 3rem);
}

.hopeellas-brand-tag {
	margin-bottom: 0 !important;
}

.wp-site-blocks .wp-block-navigation a {
	transition: color 0.2s ease;
}

.wp-site-blocks .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary);
}

/* Barra de anúncio */
.hopeellas-announce p {
	margin-bottom: 0 !important;
}

/* Ícones do cabeçalho (carrinho e conta) */
.hopeellas-header-icons .wc-block-mini-cart,
.hopeellas-header-icons .wc-block-customer-account {
	transition: opacity 0.2s ease;
}

.hopeellas-header-icons .wc-block-mini-cart:hover,
.hopeellas-header-icons .wc-block-customer-account:hover {
	opacity: 0.7;
}

/* Menu mobile */
@media (max-width: 781px) {
	.hopeellas-header > .wp-block-group {
		flex-wrap: wrap !important;
	}

	.hopeellas-brand {
		order: 1;
	}

	.hopeellas-header-actions {
		order: 2;
		flex-wrap: nowrap !important;
		justify-content: flex-end;
	}

	.hopeellas-header-search.wp-block-search {
		flex-basis: 100%;
		max-width: none;
		order: 3;
		width: 100%;
	}

	.hopeellas-announce p {
		font-size: 0.72rem !important;
		letter-spacing: 0.06em !important;
	}
}

/* Eyebrow acima dos títulos de seção */
.hopeellas-eyebrow {
	margin-bottom: 0 !important;
}

.hopeellas-eyebrow + .wp-block-heading {
	margin-top: 0;
	margin-bottom: 0;
}

.hopeellas-eyebrow + .wp-block-heading + p {
	margin-top: var(--wp--preset--spacing--20);
}

/* Hero */
.hopeellas-quote-mark,
.hopeellas-eyebrow {
	font-family: inherit;
}

/* Cartões de categoria */
.wp-block-group.has-primary-deep-background-color,
.wp-block-group.has-primary-background-color,
.wp-block-group.has-primary-soft-background-color,
.wp-block-group.has-surface-background-color {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-column > .wp-block-group.has-primary-soft-background-color:hover,
.wp-block-column > .wp-block-group.has-surface-background-color:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px -18px rgba(0, 0, 0, 0.22);
}

/* Coleção de produtos — tratamento de imagem consistente (home, catálogo, relacionados) */
.wp-block-woocommerce-product-collection {
	row-gap: var(--wp--preset--spacing--50) !important;
}

.wc-block-components-product-image,
.wp-block-woocommerce-product-image,
.wc-block-grid__product-image {
	overflow: hidden;
	border-radius: 1.5rem;
}

.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img,
.wc-block-grid__product-image img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	transition: transform 0.35s ease;
	border-radius: 1rem;
}

.wp-block-woocommerce-product-template:hover img,
.wc-block-grid__product:hover img {
	transform: scale(1.03);
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
	transition: color 0.2s ease;
}

.wp-block-button {
	margin-top: var(--wp--preset--spacing--10);
}

/* Botões: cantos suaves e toque delicado */
.wp-block-button__link.wp-element-button {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	border-radius: 2.5rem !important;
}

/* Separadores suaves */
.wp-block-separator {
	border-color: var(--wp--preset--color--surface) !important;
}

/* Rodapé */
footer .wp-block-columns {
	margin-bottom: var(--wp--preset--spacing--40);
}

footer a {
	text-decoration: none;
	transition: color 0.2s ease;
}

footer a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.hopeellas-payment-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.hopeellas-payment-icons svg {
	display: block;
	vertical-align: middle;
}

.hopeellas-seal-icons {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--10);
}

.hopeellas-seal-icons img {
	display: block;
	width: 60px;
	height: 60px;
	object-fit: contain;
	transition: opacity 0.2s ease;
}

.hopeellas-seal-icons a:hover img {
	opacity: 0.8;
}

/* Logo do rodapé: o mesmo logo do cabeçalho, em tamanho de apartamento */
.hopeellas-footer-logo img {
	display: block;
	width: clamp(150px, 20vw, 240px);
	max-width: 100%;
	max-height: 96px;
	height: auto;
	object-fit: contain;
	margin-bottom: var(--wp--preset--spacing--20);
}

footer .wp-block-column .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--20);
}

footer .wp-block-column > p {
	margin-top: var(--wp--preset--spacing--10);
}

/* Mobile: mantém a composição em uma coluna com folga */
@media (max-width: 781px) {
	.wp-block-woocommerce-product-collection {
		row-gap: var(--wp--preset--spacing--40) !important;
	}
}

/* ===== Catálogo (archive-product) ===== */

/* Toolbar: resultado, ordenação e filtros alinhados */
.hopeellas-catalog-toolbar {
	border-top: 1px solid var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--surface);
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--20);
}

.hopeellas-catalog-tools {
	column-gap: var(--wp--preset--spacing--30);
}

.hopeellas-catalog-toolbar .wc-block-product-results-count,
.hopeellas-catalog-toolbar .woocommerce-result-count,
.hopeellas-catalog-toolbar .wc-block-components-filter-price,
.hopeellas-catalog-toolbar p {
	margin-bottom: 0 !important;
}

.wc-block-product-filters__open-overlay {
	border-radius: 2.5rem !important;
	background: var(--wp--preset--color--primary-soft) !important;
	color: var(--wp--preset--color--primary-deep) !important;
	padding: 0.6rem 1.25rem !important;
}

/* Cartão de produto no catálogo */
.hopeellas-product-card {
	transition: transform 0.25s ease;
}

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

.hopeellas-product-card .wc-block-components-product-image,
.hopeellas-product-card .wp-block-woocommerce-product-image,
.hopeellas-product-card .wc-block-grid__product-image {
	overflow: hidden;
	border-radius: 1.5rem;
}

.hopeellas-product-card img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 5;
	transition: transform 0.35s ease;
}

.hopeellas-product-card:hover img {
	transform: scale(1.04);
}

.hopeellas-product-card .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--20);
}

.wc-block-components-sale-badge {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 2.5rem !important;
	padding: 0.15em 0.8em !important;
}

.wc-block-grid__product-onsale,
.woocommerce span.onsale {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 2.5rem !important;
}

/* Paginação */
.wp-block-query-pagination {
	gap: var(--wp--preset--spacing--20) !important;
}

.wp-block-query-pagination a,
.wp-block-query-pagination > .wp-block-query-pagination-numbers .page-numbers {
	border-radius: 2.5rem !important;
	border-color: var(--wp--preset--color--surface) !important;
	padding: 0.5rem 0.95rem !important;
	transition: all 0.2s ease;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination > .wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Breadcrumbs no catálogo */
.woocommerce-breadcrumb {
	color: var(--wp--preset--color--muted);
}

.woocommerce-breadcrumb a {
	text-decoration: none;
}

/* ===== Single product ===== */

.hopeellas-product-gallery .woocommerce-product-gallery__image img,
.hopeellas-product-gallery img {
	border-radius: 1.5rem;
}

.hopeellas-product-summary {
	padding-top: var(--wp--preset--spacing--20);
}

.hopeellas-product-likebar {
	margin-bottom: 0 !important;
}

.hopeellas-product-likebar .woocommerce-product-rating {
	margin-bottom: 0 !important;
}

/* Área reservada para personalização */
.hopeellas-personalize {
	font-size: 0.95rem;
}

.hopeellas-personalize p:last-child {
	margin-bottom: 0;
}

.hopeellas-personalize-note {
	opacity: 0.75;
}

/* Formulário de compra */
.woocommerce-product-add-to-cart,
.wp-block-woocommerce-add-to-cart-form form.cart {
	gap: var(--wp--preset--spacing--20);
	align-items: center;
}

.wp-block-woocommerce-add-to-cart-form .quantity {
	margin-right: 0;
}

.wp-block-woocommerce-add-to-cart-form .quantity .qty,
.woocommerce div.product form.cart div.quantity .qty {
	width: 5rem;
	height: auto;
	padding: 0.85rem 1rem;
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 2.5rem;
	background: var(--wp--preset--color--base);
}

.variations select {
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 2.5rem;
	padding: 0.65rem 1rem;
	background: var(--wp--preset--color--base);
}

.variations .label label {
	font-weight: 600;
	color: var(--wp--preset--color--primary-deep);
}

.hopeellas-product-meta {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
}

.hopeellas-product-meta a {
	font-weight: 500;
}

/* Barra de confiança */
.hopeellas-trust {
	border-top: 1px solid var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--surface);
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.hopeellas-trust .wp-block-heading {
	margin-bottom: var(--wp--preset--spacing--10);
}

.woocommerce-tabs ul.wc-tabs li a {
	border-radius: 2.5rem !important;
}

/* Tabs do WooCommerce minimal */
.woocommerce-tabs .wc-tabs-wrapper .wc-tab-title {
	color: var(--wp--preset--color--primary-deep);
}

.woocommerce-product-attributes-item__value a {
	font-weight: 500;
}

@media (max-width: 781px) {
	.hopeellas-catalog-toolbar {
		align-items: flex-start !important;
	}

	.hopeellas-catalog-toolbar .hopeellas-catalog-tools {
		flex-wrap: wrap;
		column-gap: var(--wp--preset--spacing--20);
	}

	.wp-block-woocommerce-product-collection .wp-block-column,
	.hopeellas-catalog-toolbar > .wp-block-group {
		flex-basis: 100%;
	}

	/* Single product mobile: form e botão em largura total */
	.hopeellas-product-summary {
		padding-top: 0;
	}

	.wp-block-woocommerce-add-to-cart-form form.cart,
	.woocommerce-product-add-to-cart {
		align-items: stretch;
		flex-direction: column;
	}

	.wp-block-woocommerce-add-to-cart-form .quantity .qty,
	.woocommerce div.product form.cart div.quantity .qty {
		width: 100%;
		text-align: center;
	}

	.hopeellas-trust .wp-block-columns,
	.hopeellas-trust .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Rodapé mobile: colunas empilhadas e organizadas */
	footer .wp-block-column,
	footer .wp-block-columns {
		flex-basis: 100% !important;
	}

	footer .wp-block-column {
		margin-bottom: var(--wp--preset--spacing--30);
	}

	footer .wp-block-group:last-child {
		row-gap: var(--wp--preset--spacing--10);
	}
}

/* ===== Fase 6 — Acabamento e consistência ===== */

/* Colunas nunca estouram o container */
.wp-block-column {
	min-width: 0;
}

/* Headings com hierarquia leve e leitura confortável */
.hopeellas-eyebrow {
	line-height: 1.4;
}

h2,
h3,
h4 {
	letter-spacing: -0.01em;
}

/* Botões outline: preenchem no hover para reforçar o CTA */
.wp-block-button.is-style-outline .wp-block-button__link {
	border-color: var(--wp--preset--color--primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-color: var(--wp--preset--color--primary) !important;
}

/* Botão de fundo claro (ex.: CTA "Para presentear"): texto legível no hover */
.wp-block-button.is-style-fill .wp-block-button__link.has-base-background-color:hover {
	color: var(--wp--preset--color--base) !important;
}

/* Price com presença equilibrada */
.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price,
.hopeellas-product-card .wp-block-woocommerce-product-price {
	font-weight: 600;
}

.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-price .woocommerce-Price-amount,
.hopeellas-product-card .wp-block-woocommerce-product-price .woocommerce-Price-amount {
	color: var(--wp--preset--color--primary-deep);
}

/* Cartão de produto: sombra sutil no hover e preço alinhado */
.hopeellas-product-card {
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hopeellas-product-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px -20px rgba(0, 0, 0, 0.18);
}

/* Notices do WooCommerce (carrinho, cupom, erros) */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	border-radius: 1rem !important;
}

.woocommerce-message,
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-info,
.woocommerce-error::before,
.woocommerce-error {
	border-top-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary-deep) !important;
}

/* Carrinho: tabela e totais delicados */
.woocommerce table.shop_table {
	border-radius: 1.5rem;
	border-color: var(--wp--preset--color--surface) !important;
}

.woocommerce table.shop_table th {
	color: var(--wp--preset--color--primary-deep);
	font-weight: 600;
}

.woocommerce table.shop_table td,
.woocommerce table.shop_table th {
	border-color: var(--wp--preset--color--surface) !important;
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .button {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 2.5rem !important;
	font-weight: 600;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .button:hover {
	background: var(--wp--preset--color--primary-deep) !important;
	color: var(--wp--preset--color--base) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Campos de formulário do WooCommerce */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: 1rem;
	padding: 0.75rem 1rem;
	background: var(--wp--preset--color--base);
}

/* Foco visível extra nos componentes WooCommerce */
.wc-block-components-button:focus-visible,
.wc-block-components-text-input input:focus-visible,
.wc-block-components-quantity-selector input:focus-visible,
.wc-block-components-checkbox input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Header: quebra suave em tablets para evitar overflow */
@media (max-width: 1100px) and (min-width: 782px) {
	.hopeellas-header > .wp-block-group {
		flex-wrap: wrap !important;
		row-gap: var(--wp--preset--spacing--20);
	}

	.hopeellas-brand {
		order: 1;
	}

	.hopeellas-header-actions {
		order: 2;
		margin-left: auto;
	}

	.hopeellas-header-search.wp-block-search {
		flex-basis: 100%;
		max-width: none;
		order: 3;
		width: 100%;
	}

	.hopeellas-brand-tag {
		display: none;
	}

	.hopeellas-header .wp-block-navigation {
		font-size: var(--wp--preset--font-size--small);
	}
}

@media (max-width: 480px) {
	.hopeellas-announce p {
		white-space: normal;
		text-align: center;
	}

	.wp-block-woocommerce-product-collection .wc-block-components-product-image img,
	.wp-block-woocommerce-product-collection .wp-block-woocommerce-product-image img,
	.wc-block-grid__product-image img {
		aspect-ratio: 3 / 4;
	}
}

/* ===== Fase 8 — Home com posicionamento comercial ===== */
/* Movimento de revelação: só existe quando o JavaScript está ativo e o
   usuário não reduziu movimento. Sem essas condições nada fica escondido. */
@media (prefers-reduced-motion: no-preference) {
	html.has-js .hopeellas-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.65s ease, transform 0.65s ease;
	}

	html.has-js .hopeellas-reveal.is-revealed {
		opacity: 1;
		transform: none;
	}
}

.hopeellas-eyebrow {
	margin-top: 0;
	margin-bottom: 0;
}

/* Hero: área de mídia — tratamento visual elegante (substitui placeholder tracejado) */
.hopeellas-hero-media {
	position: relative;
	padding: clamp(2.5rem, 6vw, 4.5rem);
	border: 1px solid rgba(255, 82, 122, 0.1);
	border-radius: 2rem;
	background:
		radial-gradient(ellipse at 20% 80%, rgba(255, 82, 122, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(255, 82, 122, 0.06) 0%, transparent 45%),
		linear-gradient(165deg, var(--wp--preset--color--base) 0%, rgba(255, 237, 243, 0.5) 100%);
	overflow: hidden;
	min-height: 22rem;
}

/* Elementos decorativos sutis no hero */
.hopeellas-hero-media::before {
	content: "";
	position: absolute;
	top: -2rem;
	right: -2rem;
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 82, 122, 0.07) 0%, transparent 70%);
	pointer-events: none;
}

.hopeellas-hero-media::after {
	content: "";
	position: absolute;
	bottom: 1.5rem;
	left: 1.5rem;
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 82, 122, 0.08);
	pointer-events: none;
}

/* Foto oficial da coleção no Hero */
.hopeellas-hero-image {
	width: 100%;
	margin: 0;
	border-radius: 1.5rem;
	overflow: hidden;
}

.hopeellas-hero-image img {
	display: block;
	width: 100%;
}

.hopeellas-hero-trust {
	position: relative;
	padding-left: 1rem;
	margin-top: 0;
	margin-bottom: 0;
}

.hopeellas-hero-trust::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 0.4rem;
	height: 0.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	transform: translateY(-50%);
}

/* Cartões de conceito (personalização) */
.hopeellas-card {
	border: 1px solid rgba(255, 82, 122, 0.12);
	box-shadow: 0 10px 30px rgba(255, 82, 122, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	height: 100%;
}

.hopeellas-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(255, 82, 122, 0.1);
}

/* Cartão de presente */
.hopeellas-gift-card {
	position: relative;
	box-shadow: 0 14px 38px rgba(255, 82, 122, 0.08);
	overflow: hidden;
	border: 1px solid rgba(255, 82, 122, 0.08);
	background:
		radial-gradient(ellipse at 90% 10%, rgba(255, 82, 122, 0.06) 0%, transparent 50%),
		var(--wp--preset--color--base);
}

.hopeellas-gift-card::before {
	content: "“";
	position: absolute;
	top: 0.25rem;
	left: 1.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 6rem;
	line-height: 1;
	color: rgba(255, 82, 122, 0.12);
}

/* Benefícios: marca em destaque com sublinhado delicado */
.hopeellas-benefit {
	padding: var(--wp--preset--spacing--20);
	border-radius: 1rem;
	height: 100%;
}

.hopeellas-benefit-mark {
	display: inline-block;
	position: relative;
	margin-top: 0;
	margin-bottom: 0;
}

.hopeellas-benefit-mark::after {
	content: "";
	display: block;
	width: 2.4rem;
	height: 0.22rem;
	margin-top: 0.4rem;
	border-radius: 2px;
	background: rgba(255, 82, 122, 0.35);
}

/* Home mobile: pilares e benefícios em coluna única com respiro */
@media (max-width: 480px) {
	.hopeellas-hero-trust {
		padding-left: 0;
		font-size: var(--wp--preset--font-size--small) !important;
	}

	.hopeellas-benefit {
		padding: var(--wp--preset--spacing--10) 0;
	}
}

/* ===== Home — Refinamento visual e hierarquia ===== */

/* Header: respiro inferior antes do Hero */
.hopeellas-announce + .hopeellas-header {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Respiro entre Header e Hero */
main.wp-block-group {
	margin-top: clamp(0.75rem, 1.5vw, 1.25rem);
}

/* Hero: amplia espaço da coluna de mídia e adiciona profundidade visual */
main > section:first-of-type .wp-block-column:last-child {
	min-height: 24rem;
}

/* Seção "Moda Cristã": banner com profundidade e brilho sutil */
main .has-primary-deep-background-color.hopeellas-reveal {
	background:
		radial-gradient(ellipse at 30% 50%, rgba(255, 237, 243, 0.12) 0%, transparent 60%),
		radial-gradient(ellipse at 70% 80%, rgba(255, 82, 122, 0.15) 0%, transparent 50%),
		var(--wp--preset--color--primary-deep);
}

/* Botão do banner "Fé": fundo branco + texto rosa para contrastar com o fúcsia */
.hopeellas-faith-button .wp-block-button__link {
	background: #ffffff !important;
	color: var(--wp--preset--color--primary-deep) !important;
}

.hopeellas-faith-button .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-soft) !important;
	color: var(--wp--preset--color--primary-deep) !important;
}

/* Seções com background colorido ganham mais respiro vertical (exceto o Hero, que define seu próprio padding no bloco) */
main > section:not(:first-of-type):has(.has-primary-soft-background-color),
main > section:has(.has-surface-background-color) {
	padding-top: clamp(4rem, 9vw, 6.5rem) !important;
	padding-bottom: clamp(4rem, 9vw, 6.5rem) !important;
}

/* Separador entre seções com mais espaço */
main > section + section::before {
	margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* Benefícios: hover sutil nos itens */
.hopeellas-benefit:hover {
	background: rgba(255, 82, 122, 0.03);
}

.hopeellas-benefit:hover .hopeellas-benefit-mark::after {
	width: 3rem;
	background: rgba(255, 82, 122, 0.5);
}

/* Transição suave entre seções: separador visual fino */
main > section + section::before {
	content: "";
	display: block;
	width: 4rem;
	height: 0;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 82, 122, 0.12);
}

/* Hero: primeira seção não precisa de separador */
main > section:first-of-type::before {
	display: none;
}

/* Seção de benefícios: borda superior e inferior delicadas */
main > section:has(.hopeellas-benefit) {
	border-top: 1px solid rgba(255, 82, 122, 0.06);
	border-bottom: 1px solid rgba(255, 82, 122, 0.06);
}

/* CTA final: destaque visual com borda sutil */
main > section:last-of-type .wp-block-group.aligncenter {
	background: rgba(255, 82, 122, 0.02);
	border-radius: 2rem;
	padding: clamp(2rem, 5vw, 3.5rem);
}

/* Mobile: removemos separadores e ajustamos respiro */
@media (max-width: 781px) {
	main > section + section::before {
		display: none;
	}

	.hopeellas-announce + .hopeellas-header {
		margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
	}

	main.wp-block-group {
		margin-top: clamp(0.5rem, 1.2vw, 0.75rem);
	}

	main > section:first-of-type .wp-block-column:last-child {
		min-height: 18rem;
	}

	main > section:not(:first-of-type):has(.has-primary-soft-background-color),
	main > section:has(.has-surface-background-color) {
		padding-top: clamp(3rem, 8vw, 5rem) !important;
		padding-bottom: clamp(3rem, 8vw, 5rem) !important;
	}

	main > section:last-of-type .wp-block-group.aligncenter {
		padding: clamp(1.5rem, 4vw, 2.5rem);
	}
}

/* ===== Fase 8.1 — Logo oficial no Header ===== */
/* O logo é publicado pelo proprietário na Media Library pelo Site Identity /
   Site Editor; aqui apenas dimensionamos e acomodamos o bloco Site Logo. */
.hopeellas-brand .wp-block-site-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.hopeellas-brand .wp-block-site-logo:focus-visible,
.hopeellas-brand .wp-block-site-logo a:focus-visible,
.hopeellas-brand .wp-block-site-logo:focus,
.hopeellas-brand .wp-block-site-logo a:focus {
	outline: none !important;
	box-shadow: none !important;
}

.hopeellas-brand .wp-block-site-logo img {
	display: block;
	width: clamp(140px, 20vw, 300px);
	max-width: 100%;
	height: auto;
	max-height: 110px;
	object-fit: contain;
}

/* Quando o logo oficial aparece, o texto provisório "Hopeellas Camisetas"
   deixa de ser exibido (o bloco Site Logo só renderiza após o upload). */
.hopeellas-brand .wp-block-site-logo + .hopeellas-brand-text {
	display: none;
}

.hopeellas-brand .wp-block-site-logo:has(.custom-logo) + .hopeellas-brand-text {
	display: none;
}

@media (max-width: 480px) {
	.hopeellas-brand .wp-block-site-logo img {
		max-height: 64px;
	}
}

/* ===== Seção "Para presentear" — espaçamento extra ===== */
.hopeellas-presente {
	padding: 40px 0 !important;
}

/* ===== Seções com fundo surface — espaçamento extra ===== */
.hopeellas-surface {
	padding: 40px 0 !important;
}

/* ===== Barra de pagamento/selos no rodapé — menos espaço ===== */
.hopeellas-payment-bar {
	margin-top: -1.5rem !important;
	margin-bottom: -2.5rem !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;
}