/* ==========================================================================
   Quinta da Grela — WooCommerce, shell partilhado
   ==========================================================================

   Aqui só entra o que é comum a todas as áreas da loja: layout, migalhas,
   avisos, botões, formulários, quantidade + unidade, tabelas, paginação,
   estrelas e estados vazios.

   O CSS visual de cada área vive em assets/css/<área>.css e é carregado apenas
   na respectiva rota (ver absites_enqueue() em functions.php):
   loja.css · pesquisa.css · produto.css · carrinho.css · checkout.css ·
   obrigado.css · conta.css

   Tokens: style.css (:root). Componentes de página: paginas.css.
   Nenhum valor de cor/tamanho é repetido aqui — usar sempre var(--token).
   ========================================================================== */

/* ==========================================================================
   1. Estrutura: conteúdo + barra lateral
   ========================================================================== */

.store-layout {
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
	margin-block: var(--gap) calc(var(--gap) * 1.5);
}

.store-layout #primary { flex: 1 1 auto; min-width: 0; }

#sidebar { flex: 0 0 260px; }
#sidebar .widget { margin-bottom: var(--gap); }
#sidebar ul { list-style: none; margin: 0; padding: 0; }

.woocommerce-products-header { margin-bottom: var(--space); }
.woocommerce .woocommerce-ordering { margin-bottom: var(--space); }
.woocommerce .woocommerce-result-count { color: var(--color-muted); font-size: var(--fs-small); }

/* ==========================================================================
   2. Migalhas do WooCommerce
   ========================================================================== */

.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--space);
	font-size: 0.85rem;
	line-height: 1.4;
	color: var(--color-muted);
}

.woocommerce-breadcrumb a {
	color: inherit;
	text-decoration: none;
	text-underline-offset: 0.15em;
}

.woocommerce-breadcrumb a:hover {
	color: var(--color-action);
	text-decoration: underline;
}

/* ==========================================================================
   3. Avisos (mensagem, informação, erro)
   ========================================================================== */

.woocommerce-notices-wrapper { margin-bottom: var(--space); }

/* O WooCommerce dá foco programático aos avisos (tabindex="-1"); nesses casos o
   anel de foco global só polui — não são alcançáveis por Tab. */
.woocommerce-message:focus-visible,
.woocommerce-info:focus-visible,
.woocommerce-error:focus-visible { outline: none; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin: 0 0 var(--space);
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-action);
	border-radius: var(--radius);
	background: var(--color-primary-tint);
	color: var(--color-text);
	font-size: 0.95rem;
	line-height: 1.5;
	list-style: none;
}

/* O texto primeiro, o botão de acção à direita (o markup do WooCommerce tem o botão
   como primeiro filho). */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	order: 2;
	margin-left: auto;
}

.woocommerce-message .button + *,
.woocommerce-info .button + * { order: 3; }

.woocommerce-message {
	border-left-color: var(--color-accent);
	background: var(--color-success-bg);
}

.woocommerce-info {
	border-left-color: var(--color-action);
	background: var(--color-paper);
}

.woocommerce-error {
	display: block;
	border-left-color: var(--color-danger);
	background: var(--color-danger-bg);
	color: var(--color-danger);
}

.woocommerce-error li {
	margin: 0 0 0.35rem;
	padding-left: 1.1rem;
	position: relative;
}

.woocommerce-error li:last-child { margin-bottom: 0; }

.woocommerce-error li::before {
	content: '•';
	position: absolute;
	left: 0;
	color: var(--color-danger);
}

/* Mensagem de validação dentro do formulário. */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message { margin-bottom: var(--space); }

/* ==========================================================================
   4. Botões
   ========================================================================== */

.woocommerce .button,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-forward,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce input[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.85em 1.6em;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-white);
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s var(--ease), color 0.18s var(--ease),
		border-color 0.18s var(--ease);
}

.woocommerce .button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce .wc-forward:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce input[type='submit']:hover {
	background: var(--color-action-dark);
	color: var(--color-white);
}

.woocommerce .button:focus-visible,
.woocommerce .single_add_to_cart_button:focus-visible,
.woocommerce .checkout-button:focus-visible,
.woocommerce .wc-forward:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce input[type='submit']:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce .button.disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce input[type='submit']:disabled {
	background: var(--color-border);
	border-color: transparent;
	color: var(--color-muted);
	cursor: not-allowed;
}

/* Estado do AJAX do WooCommerce (o JS troca a classe enquanto adiciona). */
.woocommerce .button.loading,
.woocommerce .button.added.loading { opacity: 0.65; cursor: progress; }

/* Acções secundárias herdadas do WC. */
.woocommerce a.button.wc-backward { background: transparent; color: var(--color-action); border-color: currentColor; }
.woocommerce a.button.wc-backward:hover { background: var(--color-primary-tint); color: var(--color-action-dark); }

/* ==========================================================================
   5. Formulários
   ========================================================================== */

.woocommerce form .form-row {
	display: block;
	margin: 0 0 var(--space);
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: 0.3rem;
	color: var(--color-ink);
	font-size: var(--fs-small);
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row label.woocommerce-form__label-for-checkbox {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}

.woocommerce form .form-row .required {
	color: var(--color-danger);
	text-decoration: none;
	font-weight: 600;
}

.woocommerce .input-text,
.woocommerce select,
.woocommerce textarea,
.woocommerce form .form-row input.input-text,
.woocommerce #order_review input.input-text {
	width: 100%;
	max-width: 100%;
	padding: 0.7em 0.85em;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-text);
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.45;
	transition: border-color 0.18s var(--ease);
}

.woocommerce textarea { min-height: 6rem; resize: vertical; }

.woocommerce select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.2em;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15em) center, calc(100% - 0.85em) center;
	background-size: 0.3em 0.3em, 0.3em 0.3em;
	background-repeat: no-repeat;
}

.woocommerce .input-text:focus,
.woocommerce select:focus,
.woocommerce textarea:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--color-action);
	outline: 3px solid var(--color-accent);
	outline-offset: 1px;
}

.woocommerce input::placeholder,
.woocommerce textarea::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

.woocommerce input[type='checkbox'],
.woocommerce input[type='radio'] {
	width: 1.15rem;
	height: 1.15rem;
	margin: 0.15rem 0 0;
	accent-color: var(--color-action);
	flex: 0 0 auto;
}

/* Erro de campo (o WooCommerce marca o `.form-row`). */
.woocommerce .form-row.woocommerce-invalid label { color: var(--color-danger); }

.woocommerce .form-row.woocommerce-invalid .input-text,
.woocommerce .form-row.woocommerce-invalid select,
.woocommerce .form-row.woocommerce-invalid textarea {
	border-color: var(--color-danger);
}

.woocommerce .form-row.woocommerce-validated .input-text,
.woocommerce .form-row.woocommerce-validated select {
	border-color: var(--color-accent);
}

/* Aviso de campo opcional (o tema esconde o asterisco, não o texto). */
.woocommerce .form-row .optional { color: var(--color-muted); font-weight: 400; }

/* ==========================================================================
   6. Quantidade + unidade
   ========================================================================== */

.woocommerce .quantity {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.woocommerce .quantity input.qty {
	width: 4.5rem;
	height: 2.75rem;
	padding: 0 0.4rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	text-align: center;
}

.woocommerce .quantity input.qty:focus {
	border-color: var(--color-action);
	outline: 3px solid var(--color-accent);
	outline-offset: 1px;
}

/*
 * Unidade impressa pelo plugin `absites` depois da quantidade
 * (`.appendqty` no produto, `.additional-text` no carrinho).
 */
.woocommerce .appendqty,
.woocommerce .additional-text {
	margin: 0 0 0 0.35rem;
	color: var(--color-muted);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
}

.woocommerce .additional-text {
	display: block;
	margin: 0.3rem 0 0;
}

/* A unidade que o plugin de unidades cola ao preço (`<span class="uom">`). */
.woocommerce .uom {
	color: var(--color-muted);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
}

/* ==========================================================================
   7. Grelha de produtos + cartão do tema
   ========================================================================== */

.woocommerce ul.products {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gap);
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	margin: 0;
	min-width: 0;
}

/* O cartão ocupa a célula toda, para as acções ficarem alinhadas. */
.woocommerce ul.products li.product .produto { flex: 1 1 auto; }

/* O botão do WooCommerce vestido com o visual `.btn` do tema. */
.woocommerce ul.products .produto__accao .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55em 1.1em;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--color-action);
	color: var(--color-white);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}

.woocommerce ul.products .produto__accao .button:hover {
	background: var(--color-action-dark);
	color: var(--color-white);
}

.woocommerce ul.products .produto__accao .button:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.woocommerce ul.products .produto__accao .button.loading { opacity: 0.65; cursor: progress; }

.woocommerce ul.products .produto__accao .button.added {
	background: var(--color-accent);
	color: var(--color-white);
}

/* Selo de promoção (o cartão só o mostra dentro do loop). */
.produto__selo--promocao {
	background: var(--color-action);
	color: var(--color-white);
}

/* ==========================================================================
   8. Produto individual (estrutura de duas colunas)
   ========================================================================== */

.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gap);
	align-items: start;
}

.woocommerce div.product .woocommerce-product-gallery { grid-column: 1; margin: 0; }
.woocommerce div.product .summary { grid-column: 2; margin: 0; min-width: 0; }
.woocommerce div.product .product_title { margin-top: 0; }

.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-block: var(--space);
}

.woocommerce div.product form.cart .variations { width: 100%; margin-bottom: var(--space); }
.woocommerce div.product form.cart .quantity input { width: 4.5rem; }

.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 var(--space);
	padding: 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 0.6rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-ink);
}

.woocommerce-tabs ul.tabs li a:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

/* ==========================================================================
   9. Tabelas
   ========================================================================== */

.woocommerce table.shop_table {
	width: 100%;
	margin: 0 0 var(--gap);
	border: 1px solid var(--color-border);
	border-collapse: collapse;
	background: var(--color-white);
}

.woocommerce table.shop_table th {
	background: var(--color-paper);
	color: var(--color-ink);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 0.85rem 0.75rem;
	border-bottom: 1px solid var(--color-border);
	vertical-align: middle;
}

.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { width: 64px; height: auto; }
.woocommerce table.shop_table .amount { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   10. Carrinho (estrutura) e totais
   ========================================================================== */

.woocommerce .cart-collaterals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	align-items: flex-start;
}

.woocommerce .cart-collaterals .cross-sells { flex: 1 1 0; min-width: 0; }
.woocommerce .cart-collaterals .cross-sells ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce .cart-collaterals .cart_totals { flex: 1 1 0; min-width: 0; }
.woocommerce .cart-collaterals .cart_totals table { width: 100%; }
.woocommerce .actions { margin-top: var(--space); }
.woocommerce table.shop_table.cart td.actions { padding: 0.85rem 0.75rem; }

/* ==========================================================================
   11. Checkout (estrutura)
   ========================================================================== */

.woocommerce-checkout #customer_details {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--gap);
	margin-bottom: var(--gap);
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 { min-width: 0; }
.woocommerce-checkout #order_review { position: relative; }
#order_review_heading { margin-top: 0; }

/* ==========================================================================
   12. A minha conta (estrutura)
   ========================================================================== */

.woocommerce-account .woocommerce {
	display: flex;
	gap: var(--gap);
	align-items: flex-start;
}

.woocommerce-MyAccount-navigation { flex: 0 0 220px; min-width: 0; }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a { display: block; padding: 0.6rem 0.25rem; }
.woocommerce-MyAccount-content { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   13. Paginação
   ========================================================================== */

.woocommerce-pagination { margin-top: var(--gap); }

.woocommerce-pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-pagination ul.page-numbers li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.6rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-white);
	color: var(--color-ink);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
}

.woocommerce-pagination .page-numbers:hover {
	border-color: var(--color-action);
	color: var(--color-action);
}

.woocommerce-pagination .page-numbers:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.woocommerce-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-ink);
}

/* ==========================================================================
   14. Avaliações e selo de promoção
   ========================================================================== */

.woocommerce .star-rating {
	position: relative;
	display: inline-block;
	width: 5.5em;
	height: 1.15em;
	overflow: hidden;
	font-size: 0.95rem;
	line-height: 1.15;
	white-space: nowrap;
}

.woocommerce .star-rating::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 0.12em;
	color: var(--color-border-strong);
}

.woocommerce .star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	padding-top: 1.5em;
}

.woocommerce .star-rating span::before {
	content: '\2605\2605\2605\2605\2605';
	position: absolute;
	top: 0;
	left: 0;
	letter-spacing: 0.12em;
	color: var(--color-star);
}

.woocommerce .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: var(--space);
}

.woocommerce span.onsale {
	display: inline-block;
	margin-bottom: 0.5rem;
	padding: 0.25em 0.7em;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-ink);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.4;
}

/* ==========================================================================
   15. Estados vazios
   ========================================================================== */

.woocommerce-info.woocommerce-no-products-found {
	display: block;
	padding: var(--space) 1.1rem;
	text-align: center;
}

.woocommerce .woocommerce-no-products-found .woocommerce-info { margin: 0; }

/* ==========================================================================
   16. Faixa de topo das páginas de loja (absites_loja_hero())
   ========================================================================== */

.hero-simples__titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
}

.hero-simples__titulo h1 { margin-bottom: 0; }

.hero-simples__badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25em 0.75em;
	border-radius: var(--radius-pill);
	background: var(--color-ink);
	color: var(--color-white);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.6;
}

.hero-simples .breadcrumb { margin-top: 1.25rem; }

/* ==========================================================================
   17. Responsivo
   ========================================================================== */

@media (max-width: 1080px) {
	.woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.store-layout { flex-direction: column; }
	#sidebar { flex-basis: auto; width: 100%; }

	.woocommerce div.product { grid-template-columns: minmax(0, 1fr); }
	.woocommerce div.product .woocommerce-product-gallery,
	.woocommerce div.product .summary { grid-column: 1; }

	.woocommerce-account .woocommerce { flex-direction: column; }
	.woocommerce-MyAccount-navigation { flex-basis: auto; width: 100%; }
}

@media (max-width: 860px) {
	.woocommerce-checkout #customer_details { grid-template-columns: minmax(0, 1fr); }

	/* A tabela do carrinho desliza dentro do formulário, nunca no body. */
	.woocommerce > .woocommerce-cart-form {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.woocommerce .cart-collaterals { flex-direction: column; }
	.woocommerce .cart-collaterals .cross-sells,
	.woocommerce .cart-collaterals .cart_totals { flex-basis: auto; width: 100%; }
}

@media (max-width: 620px) {
	.woocommerce ul.products { grid-template-columns: minmax(0, 1fr); }
	.woocommerce .cart-collaterals .cross-sells ul.products { grid-template-columns: minmax(0, 1fr); }
	.woocommerce .woocommerce-ordering { width: 100%; }
	.woocommerce .woocommerce-ordering select { width: 100%; }
}

/* ==========================================================================
   18. Mostrar/ocultar palavra-passe (o plugin desliga o CSS que o desenha)
   ========================================================================== */

.woocommerce form .show-password-input {
	position: absolute;
	top: 50%;
	right: 0.35rem;
	left: auto;
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--color-muted);
	transform: translateY(-50%);
	cursor: pointer;
}

.woocommerce form .show-password-input:hover { color: var(--color-action); }

.woocommerce form .show-password-input:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 0;
}

.woocommerce form .show-password-input::after {
	content: '';
	display: block;
	width: 1.2rem;
	height: 1.2rem;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.woocommerce form .show-password-input.display-password::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4 20 20'/%3E%3Cpath d='M9.8 5.9A9.7 9.7 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-3.5 4.1'/%3E%3Cpath d='M6.5 7.9A16.4 16.4 0 0 0 2.5 12S6 18.5 12 18.5a9.9 9.9 0 0 0 3.6-.7'/%3E%3Cpath d='M10.3 10.4a2.4 2.4 0 0 0 3.3 3.3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4 20 20'/%3E%3Cpath d='M9.8 5.9A9.7 9.7 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-3.5 4.1'/%3E%3Cpath d='M6.5 7.9A16.4 16.4 0 0 0 2.5 12S6 18.5 12 18.5a9.9 9.9 0 0 0 3.6-.7'/%3E%3Cpath d='M10.3 10.4a2.4 2.4 0 0 0 3.3 3.3'/%3E%3C/svg%3E");
}