/* ==========================================================
   Gaspar Store — CSS extra
   Só o que o theme.json não consegue fazer. Tudo continua
   editável no Editor do site (estilos de bloco e classes).
   ========================================================== */

/* ---------- Imagens em arco (estilo "Arco" / "Arco invertido") ---------- */
.wp-block-image.is-style-arco img,
.wp-block-cover.is-style-arco {
	border-radius: 999px 999px 14px 14px / 50vw 50vw 14px 14px;
}
.wp-block-image.is-style-arco img {
	border-radius: 50% 50% 14px 14px / 34% 34% 14px 14px;
	aspect-ratio: 3 / 4;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}
.wp-block-image.is-style-arco-invertido img {
	border-radius: 14px 14px 50% 50% / 14px 14px 34% 34%;
	aspect-ratio: 3 / 4;
	width: 100%;
	object-fit: cover;
	object-position: top center;
}

/* ---------- Grupo "Com formas do logótipo" ---------- */
.wp-block-group.is-style-formas {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.wp-block-group.is-style-formas::before,
.wp-block-group.is-style-formas::after {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
}
/* mancha terracota em baixo à esquerda */
.wp-block-group.is-style-formas::before {
	width: clamp(160px, 22vw, 280px);
	aspect-ratio: 1 / 0.92;
	left: clamp(-90px, -6vw, -50px);
	bottom: clamp(-70px, -5vw, -40px);
	background: var(--wp--preset--color--terracota);
	opacity: 0.55;
	border-radius: 50% 45% 55% 50% / 55% 50% 50% 45%;
}
/* pintinhas brancas em cima à direita */
.wp-block-group.is-style-formas::after {
	width: 130px;
	height: 130px;
	right: clamp(12px, 3vw, 40px);
	top: clamp(16px, 3vw, 40px);
	background: radial-gradient(#fff 2.5px, transparent 3px) 0 0 / 18px 18px;
	opacity: 0.85;
}

/* ---------- Sobretítulo pequeno ---------- */
.is-style-sobretitulo {
	font-family: var(--wp--preset--font-family--texto) !important;
	font-size: 0.72rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.4em !important;
	text-transform: uppercase;
	color: var(--wp--preset--color--destaque);
	margin-bottom: 0.4rem !important;
}

/* ---------- Cabeçalho a toda a largura: menu | logo | ícones ---------- */
.gaspar-cabecalho {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
}
.gaspar-cabecalho > .gaspar-cabecalho__menu { justify-self: start; }
.gaspar-cabecalho > .wp-block-site-logo,
.gaspar-cabecalho > .gaspar-cabecalho__logo { justify-self: center; text-align: center; }
.gaspar-cabecalho > .gaspar-cabecalho__icones { justify-self: end; }
.gaspar-cabecalho .wp-block-site-logo img { height: auto; }
.gaspar-assinatura {
	font-size: 0.6rem;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: var(--wp--preset--color--malva);
	margin: 0.25rem 0 0 !important;
	text-align: center;
	padding-left: 0.5em; /* compensa o espaçamento da última letra */
}
.gaspar-cabecalho__icones svg { width: 22px; height: 22px; }
/* Pesquisa só com ícone (sem pílula) */
.gaspar-cabecalho__icones .wp-block-search__button {
	background: transparent !important;
	color: var(--wp--preset--color--texto) !important;
	padding: 0.25rem !important;
	margin: 0;
	border: 0;
	box-shadow: none;
}
.gaspar-cabecalho__icones .wp-block-search__button svg { fill: currentColor; width: 24px; height: 24px; }
.gaspar-cabecalho__icones .wp-block-search__input { border-radius: 999px; min-width: 200px; }

/* Hero no telemóvel: foto primeiro e texto centrado (como na maquete) */
@media (max-width: 781px) {
	.gaspar-hero { flex-direction: column-reverse; text-align: center; }
	.gaspar-hero .wp-block-buttons { justify-content: center; }
	.gaspar-hero .wp-block-image img { max-width: 320px; margin: 0 auto; }
}
.gaspar-cabecalho__icones .wc-block-mini-cart__button { padding: 0.25rem; }

@media (max-width: 781px) {
	.gaspar-assinatura { font-size: 0.5rem; letter-spacing: 0.4em; }
	.gaspar-cabecalho .wp-block-site-logo img { width: 120px !important; }
	.gaspar-cabecalho__icones .wp-block-search { display: none; }
}

/* Menu do telemóvel com a identidade da loja */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--malva-escuro) !important;
	padding: 2rem 1.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	font-size: 1rem;
	gap: 1.2rem;
}

/* ---------- Cartões de categoria ---------- */
.gaspar-categorias .wp-block-image { margin-bottom: 0.9rem; }
.gaspar-categorias h3 { font-size: 1.15rem; text-align: center; margin-top: 0; }
.gaspar-categorias a { text-decoration: none; }
.gaspar-categorias .wp-block-image img { transition: transform 0.4s ease; }
.gaspar-categorias .wp-block-image:hover img { transform: scale(1.02); }

/* ---------- Grelhas de produtos: não partem ---------- */
.wc-block-components-product-image img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product a img,
.wp-block-woocommerce-product-image img {
	aspect-ratio: 4 / 5;
	width: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 12px;
}
.wp-block-woocommerce-product-template .wp-block-post-title,
.wc-block-grid__product-title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.8em;
}
.wp-block-woocommerce-product-template .wp-block-post-title a { text-decoration: none; color: var(--wp--preset--color--texto); }
.wc-block-components-product-sale-badge,
.wc-block-components-product-badge {
	background: var(--wp--preset--color--branco) !important;
	color: var(--wp--preset--color--malva-escuro) !important;
	border: 0 !important;
	border-radius: 20px !important;
	font-size: 0.68rem !important;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* ---------- Carrinho lateral, carrinho e checkout com a cor de destaque ---------- */
.wc-block-mini-cart__drawer .wc-block-components-button:not(.is-link),
.wc-block-cart .wc-block-components-button:not(.is-link),
.wc-block-checkout .wc-block-components-button:not(.is-link) {
	background: var(--wp--preset--color--destaque);
	color: var(--wp--preset--color--branco);
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.85rem;
}
.wc-block-mini-cart__drawer .wc-block-components-button:not(.is-link):hover,
.wc-block-cart .wc-block-components-button:not(.is-link):hover,
.wc-block-checkout .wc-block-components-button:not(.is-link):hover {
	background: var(--wp--preset--color--malva-escuro);
}
.wc-block-mini-cart__drawer .components-modal__content,
.wc-block-mini-cart__drawer .wc-block-mini-cart__items {
	background: var(--wp--preset--color--base);
}
.wc-block-mini-cart__badge {
	background: var(--wp--preset--color--destaque) !important;
	color: #fff !important;
}

/* Campos de formulário */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wp-block-search__input,
input[type="email"], input[type="text"], input[type="tel"], input[type="password"], textarea, select {
	border-radius: 10px;
	border-color: var(--wp--preset--color--linha);
	font-family: var(--wp--preset--font-family--texto);
}

/* ---------- Faixa de vantagens ---------- */
.gaspar-vantagens svg {
	width: 34px;
	height: 34px;
	stroke: var(--wp--preset--color--malva);
	fill: none;
	stroke-width: 1.3;
	display: block;
	margin: 0 auto 0.6rem;
}
.gaspar-vantagens h3 {
	font-family: var(--wp--preset--font-family--texto);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	margin: 0;
	color: var(--wp--preset--color--texto);
}

/* ---------- Rodapé ---------- */
.gaspar-rodape a { color: inherit; text-decoration: none; }
.gaspar-rodape a:hover { text-decoration: underline; }
.gaspar-rodape h2 {
	font-size: 1rem;
	letter-spacing: 0.12em;
	color: #fff;
}
.gaspar-rodape .wp-block-list { list-style: none; padding: 0; margin: 0; }
.gaspar-rodape .wp-block-list li { margin-bottom: 0.45rem; }

/* Marca visível para dados por preencher */
.gaspar-preencher {
	background: #fff3c4;
	color: #6b4b00;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 500;
}

/* Acessibilidade: foco bem visível */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--malva-escuro);
	outline-offset: 3px;
}

/* Telemóvel: sem deslize horizontal */
html, body { overflow-x: clip; }