/* =========================================================
   WOOCOMMERCE na estetica da Anti Social Syndicate

   O Woo vem com estilo claro de fabrica. Aqui ele e trazido
   para o fundo escuro da marca sem sobrescrever marcacao:
   so cor, espaco e forma.
   ========================================================= */

.woocommerce,
.woocommerce-page {
	color: var(--asy-white);
}

/* =========================================================
   VITRINE (loja, categoria, resultados)
   ========================================================= */

.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O Woo usa um clearfix de float na lista. Em grid esses pseudo-elementos
   viram itens e comem a primeira e a ultima celula, abrindo um buraco. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	display: none;
}

/* O Woo aplica margens e larguras percentuais nas colunas antigas. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
	padding: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(139, 61, 255, .08), rgba(15, 11, 28, .8));
	border: 1px solid rgba(139, 61, 255, .2);
	transition: transform 260ms cubic-bezier(.22,.61,.36,1), border-color 260ms, box-shadow 260ms;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 46, 154, .5);
	box-shadow: 0 24px 48px -24px rgba(255, 46, 154, .5);
}

.woocommerce ul.products li.product a img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	transition: transform 500ms cubic-bezier(.22,.61,.36,1);
}

.woocommerce ul.products li.product:hover a img {
	transform: scale(1.04);
}

/* O link do card embrulha imagem e titulo; vira a coluna do conteudo. */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	padding: 1.1rem 1.1rem .35rem;
	margin: 0;
	font-family: var(--font-display);
	font-size: .92rem;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--asy-white);

	/* Reserva duas linhas para que preco e botao fiquem na mesma altura
	   em todos os cards, mesmo com nomes de tamanhos diferentes. */
	min-height: 2.5em;
}

.woocommerce ul.products li.product .price {
	display: block;
	padding: 0 1.1rem;
	margin: 0 0 .9rem;
	font-family: var(--font-body);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--asy-cyan);
}

.woocommerce ul.products li.product .price del {
	color: var(--asy-muted);
	font-weight: 400;
	opacity: .7;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
}

/* O botao fica colado no rodape do card, alinhando cards de alturas diferentes. */
.woocommerce ul.products li.product .button {
	margin: auto 1.1rem 1.1rem;
	padding: .8rem 1.2rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	color: #fff;
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	transition: box-shadow 220ms, transform 220ms;
}

.woocommerce ul.products li.product .button:hover {
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	box-shadow: 0 12px 28px -12px rgba(255, 46, 154, .9);
	transform: translateY(-2px);
	color: #fff;
}

/* Depois do "adicionar" o Woo poe um "Ver carrinho" embaixo do botao. O
   carrinho lateral do cabecalho ja abre sozinho nessa hora, entao o link
   so duplicaria o caminho e desalinharia os cards. */
.woocommerce ul.products li.product .added_to_cart {
	display: none;
}

/* Cor e tamanho no card (vitrine-opcoes.js). Os botoes levam o seletor
   inteiro porque o Hello e o kit do Elementor pintam todo <button>. */
:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: auto 1.1rem 0;
}

/* O widget de produtos do Elementor so vira coluna com "alinhar botoes" ligado
   (display: var(--button-align-display)). Sem isso o margin auto nao empurra
   nada e o botao de produto sem variacao fica colado no preco. O body na
   frente ganha da regra do Elementor, que tem o mesmo seletor. */
body .elementor-products-grid ul.products.elementor-grid li.product {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-loop-product__buttons {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes ~ .woocommerce-loop-product__buttons {
	margin-top: 0;
}

/* Com opcoes, sao elas que descem para o rodape; o botao vem logo abaixo. */
:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes ~ .button,
:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes ~ .woocommerce-loop-product__buttons .button {
	margin-top: .85rem;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes__grupo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .45rem;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	transition: border-color 160ms, background-color 160ms, color 160ms, opacity 160ms, outline-color 160ms;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__cor {
	width: 1.6rem;
	height: 1.6rem;
	padding: 0;
	border-radius: 50%;
	background: var(--cor);
	border: 1px solid rgba(91, 33, 182, .28);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__cor:hover {
	background: var(--cor);
	outline-color: rgba(255, 46, 154, .45);
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__cor[aria-checked='true'] {
	outline-color: var(--asy-pink);
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__tamanho {
	min-width: 2.2rem;
	height: 1.9rem;
	padding: 0 .55rem;
	border-radius: 8px;
	background: transparent;
	border: 1px solid rgba(139, 61, 255, .35);
	color: var(--asy-white);
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__tamanho:hover {
	background: transparent;
	border-color: var(--asy-pink);
	color: var(--asy-white);
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__tamanho[aria-checked='true'] {
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	border-color: transparent;
	color: #fff;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button:focus-visible {
	outline: 2px solid var(--asy-cyan);
	outline-offset: 2px;
}

/* Pagina do produto: os icones ficam em linha e maiores, no lugar do select
   (que continua no formulario, escondido, para o script de variacoes). */
.woocommerce div.product form.cart .variations select[hidden] {
	display: none !important;
}

/* Label a esquerda, centrada na altura dos icones. O th centraliza por
   padrao e o line-height de 2em do Woo empurrava o texto para baixo. */
.woocommerce div.product form.cart .variations th.label {
	width: 1%;
	padding-right: 1.5rem;
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
	line-height: 1;
}

.woocommerce div.product form.cart .variations th.label label {
	margin: 0;
	line-height: 1;
}

.woocommerce div.product form.cart .variations td.value {
	vertical-align: middle;
	line-height: 1;
}

/* Em linha com o "Limpar": o link fica escondido ate a primeira escolha,
   mas ocupa espaco, e numa linha propria deixava a label da cor mais baixa. */
.woocommerce div.product form.cart .asy-opcoes--produto {
	display: inline-flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	margin: 0;
	vertical-align: middle;
}

.woocommerce div.product form.cart .asy-opcoes--produto ~ .reset_variations {
	margin-left: 1rem;
	vertical-align: middle;
}

.woocommerce div.product form.cart .asy-opcoes--produto button.asy-opcoes__cor {
	width: 2.1rem;
	height: 2.1rem;
}

.woocommerce div.product form.cart .asy-opcoes--produto button.asy-opcoes__tamanho {
	min-width: 2.9rem;
	height: 2.5rem;
	padding: 0 .8rem;
	border-radius: 10px;
	font-size: .9rem;
}

/* Combinacao sem estoque: continua clicavel para trocar o outro grupo. */
:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button[aria-disabled='true'] {
	opacity: .35;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes button.asy-opcoes__tamanho[aria-disabled='true'] {
	text-decoration: line-through;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes__aviso {
	margin: 0;
	font-family: var(--font-body);
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--asy-pink);
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes__aviso[data-tipo='ok'] {
	color: var(--asy-cyan);
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes__aviso:empty {
	display: none;
}

:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes__grupo--falta {
	animation: asy-opcoes-falta 380ms cubic-bezier(.36,.07,.19,.97);
}

@keyframes asy-opcoes-falta {
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	:is(.woocommerce ul.products li.product, .woocommerce div.product form.cart) .asy-opcoes__grupo--falta {
		animation: none;
	}
}

/* Selo de promocao. */
.woocommerce span.onsale {
	top: 12px;
	left: 12px;
	right: auto;
	min-width: 0;
	min-height: 0;
	padding: .4rem .8rem;
	border-radius: 999px;
	background: var(--asy-cyan);
	color: var(--asy-black);
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}

/* Cabecalho da vitrine: contagem e ordenacao. */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	color: var(--asy-muted);
	font-size: .88rem;
}

.woocommerce .woocommerce-ordering select,
.woocommerce select,
.woocommerce input[type='text'],
.woocommerce input[type='email'],
.woocommerce input[type='tel'],
.woocommerce input[type='number'],
.woocommerce input[type='password'],
.woocommerce textarea {
	padding: .75rem 1rem;
	border-radius: 10px;
	background: var(--asy-black-2);
	border: 1px solid rgba(139, 61, 255, .3);
	color: var(--asy-white);
	font-family: var(--font-body);
}

.woocommerce select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus {
	outline: none;
	border-color: var(--asy-cyan);
	box-shadow: 0 0 0 3px rgba(0, 229, 255, .18);
}

/* =========================================================
   PAGINA DE PRODUTO
   ========================================================= */

.woocommerce div.product .product_title {
	font-family: var(--font-display);
	font-size: var(--asy-titulo-1);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--asy-white);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--font-body);
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--asy-cyan);
}

.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--asy-muted);
	line-height: 1.7;
	max-width: 52ch;
}

.woocommerce div.product div.images img {
	border-radius: 18px;
	border: 1px solid rgba(139, 61, 255, .22);
}

/* Ate 768px o Woo empilha foto e resumo. No tablet em pe a foto ocupava a
   largura toda e o preco e o botao ficavam abaixo da dobra: ali os dois
   ficam lado a lado, e so no celular a pilha continua. */
@media (min-width: 600px) and (max-width: 768px) {
	body.woocommerce div.product div.images {
		float: left;
		width: 48%;
	}

	body.woocommerce div.product div.summary {
		float: right;
		clear: none;
		width: 48%;
	}
}

/* Tabela de variacoes (tamanho e cor). */
.woocommerce div.product form.cart .variations {
	margin-bottom: 1.25rem;
	border: 0;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
	padding: .4rem 0;
	border: 0;
	background: transparent;
}

.woocommerce div.product form.cart .variations label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--asy-muted);
}

.woocommerce div.product form.cart .reset_variations {
	color: var(--asy-muted);
	font-size: .8rem;
}

/* Botao principal de compra. */
.woocommerce div.product form.cart .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	padding: 1rem 2rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	color: #fff;
	font-family: var(--font-body);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border: 0;
	transition: box-shadow 220ms, transform 220ms;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -14px rgba(255, 46, 154, .9);
}

.woocommerce .quantity .qty {
	padding: .8rem .5rem;
	border-radius: 10px;
	background: var(--asy-black-2);
	border: 1px solid rgba(139, 61, 255, .3);
	color: var(--asy-white);
}

/* Abas de descricao e avaliacoes. */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	padding: 0;
	margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	border-bottom-color: rgba(139, 61, 255, .25);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: transparent;
	box-shadow: none;
	border: 0;
	border-radius: 0;

	/* O Woo poe margin 0 -5px e a lista corta o que passa: a primeira
	   letra de cada linha de abas sumia ("ESCRICAO"). */
	margin: 0;
	padding: 0 1.25rem 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	padding: .8rem 0;
	font-family: var(--font-body);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--asy-muted);
	border-bottom: 2px solid transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--asy-white);
	border-bottom-color: var(--asy-pink);
}

.woocommerce div.product .woocommerce-tabs .panel {
	color: var(--asy-muted);
	line-height: 1.75;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--font-display);
	font-size: 1.2rem;
	color: var(--asy-white);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border-color: rgba(139, 61, 255, .2);
	color: var(--asy-muted);
	background: transparent;
}

/* Produtos relacionados. */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce section.related > h2 {
	font-family: var(--font-display);
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--asy-white);
	margin-bottom: 1.5rem;
}

/* =========================================================
   CARRINHO E FINALIZACAO
   ========================================================= */

.woocommerce table.shop_table,
.woocommerce table.cart {
	border-radius: 16px;
	border-color: rgba(139, 61, 255, .22);
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: rgba(139, 61, 255, .1);
	color: var(--asy-white);
	font-family: var(--font-body);
	font-size: .78rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.woocommerce table.shop_table td {
	border-top-color: rgba(139, 61, 255, .16);
	color: var(--asy-muted);
}

.woocommerce table.shop_table td a,
.woocommerce table.shop_table .product-name a {
	color: var(--asy-white);
	text-decoration: none;
}

.woocommerce table.shop_table img {
	border-radius: 8px;
}

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-display);
	font-size: 1.2rem;
	text-transform: uppercase;
	color: var(--asy-white);
}

.woocommerce-checkout .woocommerce-checkout-review-order,
.woocommerce .cart-collaterals .cart_totals {
	padding: 1.5rem;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(139, 61, 255, .08), rgba(15, 11, 28, .8));
	border: 1px solid rgba(139, 61, 255, .22);
}

/* Formas de pagamento. */
.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border-bottom: 1px solid rgba(139, 61, 255, .22);
}

.woocommerce-checkout #payment ul.payment_methods li {
	padding: .9rem 0;
	list-style: none;
	color: var(--asy-white);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-family: var(--font-body);
	font-weight: 600;
	color: var(--asy-white);
}

.woocommerce-checkout #payment ul.payment_methods li img {
	max-height: 22px;
	margin-left: .5rem;
	vertical-align: middle;
}

.woocommerce-checkout #payment div.payment_box {
	margin-top: .75rem;
	padding: 1rem;
	border-radius: 12px;
	background: rgba(7, 6, 13, .7);
	border: 1px solid rgba(139, 61, 255, .22);
	color: var(--asy-muted);
	font-size: .9rem;
	line-height: 1.6;
}

.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: rgba(139, 61, 255, .5);
}

/* Cupom. */
.woocommerce .coupon input[type='text'] {
	min-width: 200px;
}

/* =========================================================
   AVISOS
   ========================================================= */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
	position: relative;
	padding: 1.1rem 1.4rem 1.1rem 4rem;
	border-radius: 14px;
	border: 1px solid rgba(139, 61, 255, .3);
	border-top-width: 1px;
	background: linear-gradient(160deg, rgba(139, 61, 255, .14), rgba(15, 11, 28, .85));
	color: var(--asy-white);
	line-height: 1.5;
	list-style: none;
}

/* O Woo posiciona o icone em cima do inicio do texto quando o padding
   muda. Aqui ele ganha um circulo proprio, na coluna reservada a esquerda. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	top: 50%;
	left: 1.1rem;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--asy-cyan) 16%, transparent);
	color: var(--asy-cyan);

	/* Caractere comum no lugar do glifo da fonte de icones do Woo, que
	   nao estava carregando e aparecia como um quadrado. */
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 2rem;
	text-align: center;
}

.woocommerce-message::before { content: '\2713'; }
.woocommerce-info::before    { content: 'i'; }
.woocommerce-error::before   { content: '!'; }

/* O "adicionado ao carrinho" traz o botao antes do texto. Em flex o
   botao vai para o fim da linha e o texto fica centralizado na altura dele. */
.woocommerce-message {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1.5rem;
}

.woocommerce .woocommerce-message a.button {
	order: 2;
	float: none;
	margin: 0 0 0 auto;
	padding: .8rem 1.5rem;
	font-size: .78rem;
	white-space: nowrap;
}

.woocommerce-error {
	border-color: rgba(255, 46, 154, .5);
	background: linear-gradient(160deg, rgba(255, 46, 154, .16), rgba(15, 11, 28, .85));
}

.woocommerce-error::before {
	background: rgba(255, 46, 154, .16);
	color: var(--asy-pink);
}

/* =========================================================
   PAGINACAO E MINHA CONTA
   ========================================================= */

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	gap: .4rem;
	display: inline-flex;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	padding: .55rem .95rem;
	border-radius: 10px;
	background: var(--asy-black-2);
	border: 1px solid rgba(139, 61, 255, .25);
	color: var(--asy-muted);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover {
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	border-color: transparent;
	color: #fff;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: .7rem 0;
	color: var(--asy-muted);
	text-decoration: none;
	border-bottom: 1px solid rgba(139, 61, 255, .16);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--asy-white);
}

/* =========================================================
   TRILHA DE NAVEGACAO
   ========================================================= */

.woocommerce .woocommerce-breadcrumb {
	margin-bottom: 1.5rem;
	font-size: .82rem;
	color: var(--asy-muted);
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--asy-muted);
	text-decoration: none;
}

.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--asy-cyan);
}

/* =========================================================
   LOJA EM FUNDO CLARO
   Vitrine, categorias e pagina de produto seguem a faixa clara
   (tokens invertidos no style.css). Aqui ficam so o fundo lilas
   e o que o Woo ou o kit do Elementor pintam com cor fixa.
   ========================================================= */

body.single-product #primary,
body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary,
body.tax-pa_tema #primary {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4.5rem, 9vw, 7rem);
	background: #F5F2FB;
}

/* No celular os 72px de fundo lilas embaixo da paginacao sobravam. */
@media (max-width: 767px) {
	body.single-product #primary,
	body.post-type-archive-product #primary,
	body.tax-product_cat #primary,
	body.tax-product_tag #primary,
	body.tax-pa_tema #primary {
		padding-block-end: 3rem;
	}
}

:is(.asy-claro, body.single-product #primary, body.post-type-archive-product #primary, body.tax-product_cat #primary, body.tax-product_tag #primary, body.tax-pa_tema #primary) ul.products li.product {
	background: #FFFFFF;
	border-color: rgba(91, 33, 182, .12);
	box-shadow: 0 18px 40px -28px rgba(91, 33, 182, .45);
}

:is(.asy-claro, body.single-product #primary, body.post-type-archive-product #primary, body.tax-product_cat #primary, body.tax-product_tag #primary, body.tax-pa_tema #primary) ul.products li.product:hover {
	border-color: rgba(255, 46, 154, .45);
	box-shadow: 0 26px 50px -26px rgba(255, 46, 154, .45);
}

/* O kit do Elementor fixa fundo claro-escuro nos inputs e cor clara nos
   links, com seletor mais forte que o do Woo. */
body.single-product #primary .quantity .qty {
	background: #FFFFFF;
	color: var(--asy-white);
}

:is(body.single-product #primary, body.post-type-archive-product #primary, body.tax-product_cat #primary, body.tax-product_tag #primary, body.tax-pa_tema #primary) :is(.product_meta, .woocommerce-tabs, .woocommerce-products-header) a {
	color: var(--asy-cyan);
}

:is(body.post-type-archive-product #primary, body.tax-product_cat #primary, body.tax-product_tag #primary, body.tax-pa_tema #primary) .page-title {
	color: var(--asy-white);
}

/* O widget de produtos do Elementor pinta titulo e preco com a cor
   global do kit; aqui eles seguem o mesmo padrao da pagina de produto. */
.asy-claro .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
	color: var(--asy-white);
}

.asy-claro .elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price {
	color: var(--asy-cyan);
}

.asy-claro span.onsale,
body.single-product #primary span.onsale {
	color: #FFFFFF;
}

.asy-claro .woocommerce-message,
.asy-claro .woocommerce-info,
body.single-product #primary .woocommerce-message,
body.single-product #primary .woocommerce-info {
	background: #FFFFFF;
	border-color: rgba(91, 33, 182, .16);
	box-shadow: 0 14px 34px -24px rgba(91, 33, 182, .5);
}

.asy-claro .woocommerce-error,
body.single-product #primary .woocommerce-error {
	background: #FFF4FA;
	border-color: rgba(255, 46, 154, .35);
}

/* =========================================================
   CARRINHO E FINALIZAR COMPRA
   Pagina em fundo claro (tokens invertidos no style.css) e
   os totais como card escuro. Carrinho e checkout sao os de
   blocos do Woo: as bordas deles usam currentColor, entao
   escurecem junto com o texto. Aqui entra o que o kit do
   Elementor pinta com cor fixa.
   ========================================================= */

:is(body.woocommerce-cart, body.woocommerce-checkout) {
	background: #F5F2FB;
}

:is(body.woocommerce-cart, body.woocommerce-checkout) #content {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}

body.woocommerce-checkout #content label {
	color: var(--asy-muted);
}

body.woocommerce-checkout #content .wc-block-components-address-form__address_2-toggle {
	color: var(--asy-cyan);
}

/* O kit pinta link de claro: "Termos e condicoes" sumia no fundo. */
:is(body.woocommerce-cart, body.woocommerce-checkout) #content a {
	color: var(--asy-cyan);
}

body.woocommerce-cart #content .wc-block-components-product-name {
	color: var(--asy-white);
}

body.woocommerce-checkout #content :is(.wc-block-components-checkbox__input, .wc-block-components-radio-control__input) {
	background-color: #FFFFFF;
	border-color: rgba(91, 33, 182, .4);
}

/* Campos no padrao do resto do site (Minha conta, quantidade, paginacao):
   cantos de 10px, borda lilas clara e foco roxo com halo. O Woo desenha a
   borda no <input> e, no seletor de pais/estado, no <select> dentro de um
   container com fundo branco; os dois ganham o mesmo canto. Campo com erro
   (.has-error) continua com a borda vermelha do Woo. */
:is(body.woocommerce-cart, body.woocommerce-checkout) #content :is(.wc-block-components-text-input input, .wc-block-components-textarea, .wc-blocks-components-select__container, .wc-blocks-components-select__select) {
	border-radius: 10px;
}

body.woocommerce-checkout #content :is(.wc-block-components-text-input:not(.has-error) input, .wc-block-components-textarea, .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select) {
	border: 1px solid rgba(91, 33, 182, .28);
	box-shadow: none;
	transition: border-color 160ms, box-shadow 160ms;
}

body.woocommerce-checkout #content :is(.wc-block-components-text-input:not(.has-error) input, .wc-block-components-textarea, .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select):hover {
	border-color: rgba(91, 33, 182, .5);
}

/* Cupom dentro do card escuro dos totais: borda clara em vez da lilas. */
:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) .wc-block-components-text-input:not(.has-error) input {
	border: 1px solid rgba(245, 242, 251, .25);
}

:is(body.woocommerce-cart, body.woocommerce-checkout) #content :is(.wc-block-components-text-input:not(.has-error) input, .wc-block-components-textarea, .wc-blocks-components-select:not(.has-error) .wc-blocks-components-select__select):focus {
	outline: none;
	border-color: var(--asy-cyan);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--asy-cyan) 20%, transparent);
}

:is(body.woocommerce-cart, body.woocommerce-checkout) #content .wc-block-components-totals-coupon__button {
	border-radius: 999px;
}

/* Forma de pagamento com o canto dos cards. O Woo desenha o contorno do
   grupo num ::after e o destaque da opcao escolhida com sombra interna. */
body.woocommerce-checkout #content .wc-block-components-radio-control-accordion-option {
	border-radius: 12px;
}

/* Pseudo-elemento nao vale dentro de :is(), por isso a regra propria. */
body.woocommerce-checkout #content .wc-block-components-radio-control--highlight-checked::after {
	border-color: rgba(91, 33, 182, .28);
	border-radius: 12px;
}

body.woocommerce-checkout #content .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	box-shadow: inset 0 0 0 1.5px var(--asy-cyan);
}

/* Quantidade e lixeira: o kit pinta fundo escuro no input e em todo <button>. */
body.woocommerce-cart #content .wc-block-components-quantity-selector__input {
	background: #FFFFFF;
	color: var(--asy-white);
}

body.woocommerce-cart #content :is(.wc-block-components-quantity-selector__button, .wc-block-cart-item__remove-link),
body.woocommerce-cart #content :is(.wc-block-components-quantity-selector__button, .wc-block-cart-item__remove-link):hover {
	background: transparent;
	color: var(--asy-muted);
}

body.woocommerce-cart #content :is(.wc-block-components-quantity-selector__button, .wc-block-cart-item__remove-link):hover {
	color: var(--asy-pink);
}

:is(body.woocommerce-cart, body.woocommerce-checkout) #content :is(.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button) {
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	color: #FFFFFF;
	font-family: var(--font-body);
	font-weight: 700;
	letter-spacing: .06em;
	text-decoration: none;
	text-transform: uppercase;
	transition: box-shadow 220ms, transform 220ms;
}

:is(body.woocommerce-cart, body.woocommerce-checkout) #content :is(.wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button):hover {
	color: #FFFFFF;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px -14px rgba(255, 46, 154, .9);
}

/* Totais escuros: os tokens voltam aos originais so dentro deles. No
   checkout o card e o resumo; no carrinho, a coluna inteira, com o botao. */
body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block,
body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block {
	--asy-white:   #F5F2FB;
	--asy-muted:   #A79FC0;
	--asy-cyan:    #00E5FF;
	--asy-black-2: #0F0B1C;
	color: var(--asy-white);
	background: #0F0B1C;
	border: 1px solid rgba(139, 61, 255, .3);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 30px 60px -34px rgba(7, 6, 13, .55);
}

body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block {
	align-self: flex-start;
	padding: 1.5rem;
}

body.woocommerce-checkout #content .wc-block-components-order-summary-item__quantity {
	background: var(--asy-pink);
	border-color: var(--asy-pink);
	color: #FFFFFF;
}

/* Hierarquia dentro do resumo (checkout) e dos totais (carrinho). Antes
   tudo tinha o mesmo peso: agora o nome manda, preco unitario e variacao
   ficam discretos, e o total geral e o maior numero do card. */

:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) :is(.wc-block-components-checkout-order-summary__title-text, .wc-block-cart__totals-title) {
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--asy-white);
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item {
	padding-block: .9rem;
	border-top: 1px solid rgba(139, 61, 255, .16);
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item:first-child {
	padding-top: .25rem;
	border-top: 0;
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__image img {
	border-radius: 10px;
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-name {
	display: block;
	margin-bottom: .2rem;
	font-family: var(--font-body);
	font-size: .92rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--asy-white);
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__individual-prices {
	display: block;
	font-size: .78rem;
	color: var(--asy-muted);
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata {
	margin-top: .45rem;
	font-size: .75rem;
	color: var(--asy-muted);
}

/* A descricao curta do produto so repetia o que o cliente ja escolheu. */
body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-metadata__description {
	display: none;
}

/* Variacoes viram etiquetas ("Tamanho: M", "Cor: Preto") no lugar do texto
   corrido com barra. */
body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* No resumo o Woo monta cada variacao como <span> com um separador
   " / " em <span aria-hidden>; a etiqueta ja separa, a barra sai. */
body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details > span {
	display: inline-flex;
	gap: .25rem;
	margin: 0;
	padding: .2rem .55rem;
	border-radius: 999px;
	background: rgba(139, 61, 255, .18);
	color: var(--asy-white);
	line-height: 1.3;
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details span[aria-hidden='true'] {
	display: none;
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details__name {
	color: var(--asy-muted);
	font-weight: 400;
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details__value {
	font-weight: 600;
}

body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-order-summary-item__total-price {
	font-size: .92rem;
	font-weight: 700;
	color: var(--asy-white);
}

:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) .wc-block-components-totals-item__label {
	font-size: .85rem;
	color: var(--asy-muted);
}

:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) .wc-block-components-totals-item__value {
	font-size: .9rem;
	font-weight: 600;
	color: var(--asy-white);
}

:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) .wc-block-components-panel__button {
	font-size: .85rem;
	font-weight: 600;
	color: var(--asy-cyan);
}

:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-family: var(--font-display);
	font-size: .95rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--asy-white);
}

:is(body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block, body.woocommerce-cart #content .wp-block-woocommerce-cart-totals-block) .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--font-display);
	font-size: 1.6rem;
	font-weight: 400;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple) 60%, var(--asy-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =========================================================
   MINHA CONTA
   Mesmo fundo claro do carrinho. A tela e a classica do Woo
   (shortcode), entao menu, formularios e enderecos viram
   cards brancos; o kit do Elementor pinta link de claro e
   input de escuro, por isso as regras levam o #content.
   ========================================================= */

body.woocommerce-account {
	background: #F5F2FB;
}

body.woocommerce-account #content {
	padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}

body.woocommerce-account #content a:not(.button) {
	color: var(--asy-cyan);
}

body.woocommerce-account #content .woocommerce-MyAccount-navigation ul {
	margin: 0;
	padding: .5rem;
	border-radius: 16px;
	background: #FFFFFF;
	border: 1px solid rgba(91, 33, 182, .12);
	box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
}

body.woocommerce-account #content .woocommerce-MyAccount-navigation li a {
	padding: .7rem 1rem;
	border-bottom: 0;
	border-radius: 10px;
	color: var(--asy-muted);
	font-weight: 600;
}

body.woocommerce-account #content .woocommerce-MyAccount-navigation li a:hover {
	background: rgba(139, 61, 255, .06);
	color: var(--asy-white);
}

body.woocommerce-account #content .woocommerce-MyAccount-navigation li.is-active a {
	background: rgba(139, 61, 255, .1);
	color: var(--asy-white);
	box-shadow: inset 3px 0 0 var(--asy-pink);
}

body.woocommerce-account #content :is(input.input-text, select, textarea) {
	background: #FFFFFF;
	color: var(--asy-white);
	border: 1px solid rgba(91, 33, 182, .25);
	border-radius: 10px;
}

body.woocommerce-account #content fieldset {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid rgba(91, 33, 182, .18);
	border-radius: 14px;
}

body.woocommerce-account #content legend {
	padding: 0 .4rem;
	color: var(--asy-white);
	font-weight: 700;
}

body.woocommerce-account #content :is(em, #account_display_name_description) {
	color: var(--asy-muted);
}

/* Enderecos e login/cadastro (deslogado) como cards brancos. */
body.woocommerce-account #content :is(.woocommerce-Address, .woocommerce-form-login, .woocommerce-form-register, table.shop_table) {
	background: #FFFFFF;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
}

body.woocommerce-account #content :is(.woocommerce-Address, .woocommerce-form-login, .woocommerce-form-register) {
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* Na tela de entrar e cadastrar, os titulos "Entrar" e "Cadastre-se" ja dizem
   o que e: o "Minha conta" da pagina sai. */
body.woocommerce-account #content:has(.woocommerce-form-login) > .page-header {
	display: none;
}

/* Entrar e Cadastre-se lado a lado, com os cards da mesma altura. */
body.woocommerce-account #content #customer_login {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 4%;
}

body.woocommerce-account #content #customer_login::before,
body.woocommerce-account #content #customer_login::after {
	content: none;
}

body.woocommerce-account #content #customer_login > :is(.u-column1, .u-column2) {
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
}

body.woocommerce-account #content #customer_login :is(.woocommerce-form-login, .woocommerce-form-register) {
	flex: 1 1 auto;
}

@media (max-width: 767px) {
	body.woocommerce-account #content #customer_login {
		grid-template-columns: minmax(0, 1fr);
	}
}

body.woocommerce-account #content .woocommerce-Address-title h2 {
	font-size: 1.05rem;
	letter-spacing: .04em;
}

body.woocommerce-account #content :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	background: #FFFFFF;
	border-color: rgba(91, 33, 182, .16);
	box-shadow: 0 14px 34px -24px rgba(91, 33, 182, .5);
}

/* =========================================================
   MINHA CONTA > PEDIDOS E TELA DO PEDIDO
   As tabelas vinham com a grade cinza do tema pai. Agora as
   linhas so tem um fio entre elas e a situacao vira etiqueta.
   O pedido que espera o cliente (pagar, aprovar a previa) leva
   .is-acao na etiqueta, e a partir dela a linha ganha fundo
   rosado, barra lateral e botao cheio. No celular cada pedido
   vira um cartao. A marcacao extra vem do inc/minha-conta.php.
   ========================================================= */

body.woocommerce-account #content :is(table.woocommerce-orders-table, table.woocommerce-table--order-details) {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: .95rem;
}

body.woocommerce-account #content :is(table.woocommerce-orders-table, table.woocommerce-table--order-details) :is(th, td) {
	padding: 1.05rem 1.25rem;
	border: 0;
	border-top: 1px solid rgba(91, 33, 182, .08);
	background: transparent;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	vertical-align: middle;
	color: var(--asy-white);
}

body.woocommerce-account #content :is(table.woocommerce-orders-table, table.woocommerce-table--order-details) thead th {
	padding-block: .8rem;
	border-top: 0;
	background: rgba(139, 61, 255, .05);
	font-family: var(--font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--asy-muted);
}

body.woocommerce-account #content table.woocommerce-orders-table tbody tr:hover > :is(th, td) {
	background: rgba(139, 61, 255, .03);
}

body.woocommerce-account #content .woocommerce-orders-table__cell-order-number a {
	font-family: var(--font-display);
	font-size: 1rem;
	text-decoration: none;
	color: var(--asy-white);
}

body.woocommerce-account #content .woocommerce-orders-table__cell-order-number a:hover {
	color: #C0127A;
}

body.woocommerce-account #content .woocommerce-orders-table__cell-order-date {
	white-space: nowrap;
	color: var(--asy-muted);
}

body.woocommerce-account #content .asy-pedido-total {
	display: block;
	font-weight: 700;
	white-space: nowrap;
}

body.woocommerce-account #content .asy-pedido-itens {
	display: block;
	font-size: .8rem;
	color: var(--asy-muted);
}

/* Etiqueta da situacao. Status sem cor propria fica lilas. */
body.woocommerce-account #content .asy-pedido-status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .32rem .8rem;
	border-radius: 999px;
	background: rgba(139, 61, 255, .1);
	font-size: .78rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	color: #5B21B6;
}

body.woocommerce-account #content .asy-pedido-status::before {
	content: '';
	flex: none;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: currentColor;
}

body.woocommerce-account #content .asy-pedido-status--on-hold {
	background: #FFF1D6;
	color: #8A5300;
}

body.woocommerce-account #content :is(.asy-pedido-status--processing, .asy-pedido-status--asy-producao) {
	background: #D5F5F8;
	color: #0B5C66;
}

body.woocommerce-account #content :is(.asy-pedido-status--completed, .asy-pedido-status--asy-enviado) {
	background: #DDF3E2;
	color: #1E5B2C;
}

body.woocommerce-account #content :is(.asy-pedido-status--cancelled, .asy-pedido-status--refunded, .asy-pedido-status--failed, .asy-pedido-status--checkout-draft) {
	background: #EEECF2;
	color: #5E5675;
}

body.woocommerce-account #content .asy-pedido-status.is-acao {
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	box-shadow: 0 8px 18px -10px rgba(255, 46, 154, .85);
	color: #FFFFFF;
}

body.woocommerce-account #content .asy-pedido-status.is-acao::before {
	animation: asy-pedido-pulso 1.6s ease-out infinite;
}

@keyframes asy-pedido-pulso {
	0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .85); }
	100% { box-shadow: 0 0 0 .45rem rgba(255, 255, 255, 0); }
}

body.woocommerce-account #content .asy-pedido-aviso {
	display: block;
	margin-top: .45rem;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #C0127A;
}

body.woocommerce-account #content table.woocommerce-orders-table tr:has(.is-acao) > :is(th, td) {
	background: rgba(255, 46, 154, .07);
}

body.woocommerce-account #content table.woocommerce-orders-table tr:has(.is-acao) > :first-child {
	box-shadow: inset 4px 0 0 var(--asy-pink);
}

/* Botoes: contorno discreto; cheio so na proxima acao do cliente. */
body.woocommerce-account #content .woocommerce-orders-table__cell-order-actions {
	text-align: right;
	white-space: nowrap;
}

body.woocommerce-account #content :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-order-details) .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 0;
	margin: 0;
	padding: .62rem 1.15rem;
	border: 1px solid rgba(91, 33, 182, .25);
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: none;
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.2;
	text-transform: none;
	color: var(--asy-white);
	transition: border-color var(--transition-default), color var(--transition-default), filter var(--transition-default);
}

body.woocommerce-account #content :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-order-details) .button + .button {
	margin-left: .45rem;
}

body.woocommerce-account #content :is(.woocommerce-orders-table__cell-order-actions, .woocommerce-order-details) .button:hover {
	border-color: var(--asy-pink);
	background: #FFFFFF;
	color: #C0127A;
}

body.woocommerce-account #content :is(
	table.woocommerce-orders-table tr:has(.is-acao) .button:first-child,
	.woocommerce-MyAccount-content:has(.asy-pedido-resumo .is-acao) .order-actions-button:first-child,
	.button.pay,
	.button.asy-botao-acao
),
body.woocommerce-account #content :is(
	table.woocommerce-orders-table tr:has(.is-acao) .button:first-child,
	.woocommerce-MyAccount-content:has(.asy-pedido-resumo .is-acao) .order-actions-button:first-child,
	.button.pay,
	.button.asy-botao-acao
):hover {
	border-color: transparent;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	box-shadow: 0 10px 22px -12px rgba(255, 46, 154, .9);
	color: #FFFFFF;
}

body.woocommerce-account #content :is(
	table.woocommerce-orders-table tr:has(.is-acao) .button:first-child,
	.woocommerce-MyAccount-content:has(.asy-pedido-resumo .is-acao) .order-actions-button:first-child,
	.button.pay,
	.button.asy-botao-acao
):hover {
	filter: brightness(1.08);
}

/* Tela do pedido: resumo em cartao, titulos menores, itens com
   etiquetas iguais as do carrinho e total com o degrade. */
body.woocommerce-view-order #content .woocommerce-MyAccount-content > p:has(> .asy-pedido-resumo) {
	margin: 0 0 2rem;
}

body.woocommerce-account #content .asy-pedido-resumo {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem 3rem;
	padding: 1.15rem 1.4rem;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
}

body.woocommerce-account #content .asy-pedido-resumo > span {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .4rem;
}

body.woocommerce-account #content :is(.asy-pedido-resumo, .asy-pedido-nota) small {
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--asy-muted);
}

body.woocommerce-account #content .asy-pedido-resumo strong {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--asy-white);
}

body.woocommerce-view-order #content .woocommerce-MyAccount-content h2 {
	margin: 2.25rem 0 .9rem;
	font-size: 1.05rem;
	letter-spacing: .04em;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details tbody td {
	vertical-align: top;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details .product-total {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details td.product-name {
	font-weight: 600;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details td.product-name > a {
	text-decoration: none;
	color: var(--asy-white);
}

body.woocommerce-view-order #content table.woocommerce-table--order-details .product-quantity {
	font-weight: 600;
	white-space: nowrap;
	color: var(--asy-muted);
}

body.woocommerce-view-order #content table.woocommerce-table--order-details ul.wc-item-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin: .55rem 0 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details ul.wc-item-meta li {
	display: inline-flex;
	align-items: baseline;
	gap: .3rem;
	margin: 0;
	padding: .2rem .65rem;
	border: 1px solid rgba(139, 61, 255, .3);
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.4;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details ul.wc-item-meta .wc-item-meta-label {
	float: none;
	margin: 0;
	font-weight: 500;
	color: var(--asy-muted);
}

body.woocommerce-view-order #content table.woocommerce-table--order-details ul.wc-item-meta p {
	display: inline;
	margin: 0;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details tfoot :is(th, td) {
	padding-block: .8rem;
}

body.woocommerce-view-order #content table.woocommerce-table--order-details tfoot tr:first-child > * {
	border-top-color: rgba(91, 33, 182, .16);
}

body.woocommerce-view-order #content table.woocommerce-table--order-details tfoot th {
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--asy-muted);
}

body.woocommerce-view-order #content table.woocommerce-table--order-details tfoot td {
	text-align: right;
	font-weight: 600;
}

/* "via Frete" embaixo do valor da entrega, e nao quebrado ao lado dele. */
body.woocommerce-view-order #content table.woocommerce-table--order-details tfoot .shipped_via {
	display: block;
	font-size: .75rem;
	font-weight: 400;
	color: var(--asy-muted);
}

/* A observacao e a unica linha dos totais sem scope="row"; ela sai daqui
   e aparece no cartao .asy-pedido-nota logo abaixo da tabela. */
body.woocommerce-view-order #content table.woocommerce-table--order-details tfoot tr:has(> th:not([scope]):not(.order-actions--heading)) {
	display: none;
}

body.woocommerce-account #content .asy-pedido-total-final {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 400;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple) 60%, var(--asy-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

body.woocommerce-account #content .asy-pedido-total-final * {
	color: inherit;
}

body.woocommerce-account #content .asy-pedido-nota {
	margin-top: 1rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
}

body.woocommerce-account #content .asy-pedido-nota small {
	display: block;
	margin-bottom: .45rem;
}

body.woocommerce-account #content .asy-pedido-nota p {
	margin: 0;
	line-height: 1.6;
	color: var(--asy-white);
}

body.woocommerce-view-order #content .woocommerce-customer-details .col2-set {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 1.25rem;
	width: auto;
}

body.woocommerce-view-order #content .woocommerce-customer-details .col2-set::before,
body.woocommerce-view-order #content .woocommerce-customer-details .col2-set::after {
	display: none;
}

body.woocommerce-view-order #content .woocommerce-customer-details .col2-set > :is(.col-1, .col-2) {
	float: none;
	width: auto;
	max-width: none;
}

body.woocommerce-view-order #content .woocommerce-customer-details address {
	padding: 1.15rem 1.4rem;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
	font-style: normal;
	line-height: 1.7;
	color: var(--asy-white);
}

body.woocommerce-view-order #content .woocommerce-customer-details address p {
	margin: .5rem 0 0;
	color: var(--asy-muted);
}

body.woocommerce-view-order #content ol.woocommerce-OrderUpdates {
	display: grid;
	gap: .6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.woocommerce-view-order #content ol.woocommerce-OrderUpdates li {
	margin: 0;
	padding: .9rem 1.2rem;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 14px;
	background: #FFFFFF;
}

body.woocommerce-view-order #content .woocommerce-OrderUpdate-meta {
	margin: 0 0 .25rem;
	font-size: .75rem;
	color: var(--asy-muted);
}

body.woocommerce-view-order #content .woocommerce-OrderUpdate-description p {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	body.woocommerce-account #content .asy-pedido-status.is-acao::before {
		animation: none;
	}
}

/* Celular: cada pedido vira um cartao com numero e situacao em cima,
   data e total embaixo e os botoes na largura toda. */
@media (max-width: 768px) {
	body.woocommerce-account #content table.woocommerce-orders-table {
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		overflow: visible;
	}

	body.woocommerce-account #content table.woocommerce-orders-table tbody {
		display: grid;
		gap: .75rem;
	}

	body.woocommerce-account #content table.woocommerce-orders-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: .35rem 1rem;
		padding: 1rem 1.1rem;
		border: 1px solid rgba(91, 33, 182, .12);
		border-radius: 16px;
		background: #FFFFFF;
		box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
	}

	body.woocommerce-account #content table.woocommerce-orders-table tbody tr > :is(th, td),
	body.woocommerce-account #content table.woocommerce-orders-table tbody tr:hover > :is(th, td),
	body.woocommerce-account #content table.woocommerce-orders-table tr:has(.is-acao) > :is(th, td) {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		text-align: left !important;
	}

	body.woocommerce-account #content table.woocommerce-orders-table tbody tr > :is(th, td)::before {
		display: none;
	}

	body.woocommerce-account #content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-status {
		grid-column: 2;
		grid-row: 1;
		text-align: right !important;
	}

	body.woocommerce-account #content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-date {
		grid-column: 1;
		grid-row: 2;
	}

	body.woocommerce-account #content table.woocommerce-orders-table .woocommerce-orders-table__cell-order-total {
		grid-column: 2;
		grid-row: 2;
		text-align: right !important;
	}

	body.woocommerce-account #content table.woocommerce-orders-table tbody tr > td.woocommerce-orders-table__cell-order-actions {
		display: flex;
		grid-column: 1 / -1;
		grid-row: 3;
		gap: .5rem;
		margin-top: .6rem;
		padding-top: .85rem;
		border-top: 1px solid rgba(91, 33, 182, .1);
	}

	body.woocommerce-account #content .woocommerce-orders-table__cell-order-actions .button {
		flex: 1;
	}

	body.woocommerce-account #content .woocommerce-orders-table__cell-order-actions .button + .button {
		margin-left: 0;
	}

	body.woocommerce-account #content table.woocommerce-orders-table tbody tr:has(.is-acao) {
		border-color: rgba(255, 46, 154, .45);
		background: linear-gradient(160deg, rgba(255, 46, 154, .09), #FFFFFF 60%);
		box-shadow: inset 4px 0 0 var(--asy-pink), 0 18px 40px -26px rgba(255, 46, 154, .55);
	}

	/* A barra lateral e do cartao; na celula do numero ela ficava colada no "#". */
	body.woocommerce-account #content table.woocommerce-orders-table tr:has(.is-acao) > :first-child {
		box-shadow: none;
	}

	body.woocommerce-account #content :is(table.woocommerce-table--order-details) :is(th, td) {
		padding-inline: .9rem;
	}

	body.woocommerce-account #content .asy-pedido-resumo {
		gap: 1rem 2rem;
	}
}

/* =========================================================
   PEDIDO RECEBIDO
   A pagina de obrigado herda o fundo claro do checkout, mas o
   aviso, o resumo e a tabela vinham com fundo pensado para o
   escuro. Aqui viram cards brancos; o card do WhatsApp fica
   escuro, porque e nele que esta a proxima acao do cliente.
   ========================================================= */

body.woocommerce-order-received #content .woocommerce-thankyou-order-received {
	margin: 0 0 1.25rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid rgba(91, 33, 182, .14);
	border-radius: 14px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px -24px rgba(91, 33, 182, .5);
	color: var(--asy-white);
	font-size: 1.05rem;
	font-weight: 600;
}

/* Numero, data, total e pagamento: rotulo pequeno em cima, valor embaixo. */
body.woocommerce-order-received #content ul.woocommerce-order-overview {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1.25rem 1.4rem;
	list-style: none;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	background: #FFFFFF;
}

body.woocommerce-order-received #content ul.woocommerce-order-overview::before,
body.woocommerce-order-received #content ul.woocommerce-order-overview::after {
	display: none;
}

body.woocommerce-order-received #content ul.woocommerce-order-overview li {
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--asy-muted);
}

body.woocommerce-order-received #content ul.woocommerce-order-overview li strong {
	display: block;
	margin-top: .3rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--asy-white);
}

/* Card do WhatsApp (plugin asy-pedido-whatsapp): escuro, com brilho verde. */
body.woocommerce-order-received #content .asy-wa-obrigado {
	--asy-white:   #F5F2FB;
	--asy-muted:   #A79FC0;
	--asy-cyan:    #00E5FF;
	--asy-black-2: #0F0B1C;
	color: var(--asy-white);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	border: 1px solid rgba(37, 211, 102, .35);
	border-radius: 20px;
	background:
		radial-gradient(ellipse 80% 120% at 50% 120%, rgba(37, 211, 102, .28), transparent 70%),
		#0F0B1C;
	box-shadow: 0 30px 60px -34px rgba(7, 6, 13, .55);
}

body.woocommerce-order-received #content :is(table.woocommerce-table--order-details, .woocommerce-customer-details address) {
	background: #FFFFFF;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	box-shadow: 0 18px 40px -30px rgba(91, 33, 182, .45);
}

body.woocommerce-order-received #content table.woocommerce-table--order-details :is(th, td) {
	border-color: rgba(91, 33, 182, .1);
	background: transparent;
}

body.woocommerce-order-received #content table.woocommerce-table--order-details thead th {
	background: rgba(139, 61, 255, .06);
}

body.woocommerce-order-received #content .woocommerce-customer-details address {
	padding: 1.25rem 1.4rem;
}

/* =========================================================
   CARRINHO LATERAL
   O painel vinha com nome, quantidade e botoes na mesma fonte
   de titulo em caixa alta. Aqui o nome manda, quantidade e
   preco ficam discretos e o subtotal e o maior numero.
   (Cores e botoes do painel ficam no widgets.css do plugin.)
   ========================================================= */

.asy-header__carrinho .elementor-menu-cart__product {
	padding-block: .9rem;
}

.asy-header__carrinho .elementor-menu-cart__product-image img {
	border-radius: 10px;
}

.asy-header__carrinho .elementor-menu-cart__product-name a {
	font-family: var(--font-body);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--asy-white);
}

.asy-header__carrinho .elementor-menu-cart__product-price,
.asy-header__carrinho .elementor-menu-cart__product-price .quantity {
	font-family: var(--font-body);
	font-size: .8rem;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--asy-muted);
}

.asy-header__carrinho .elementor-menu-cart__product-price .woocommerce-Price-amount {
	font-weight: 600;
	color: var(--asy-white);
}

.asy-header__carrinho .elementor-menu-cart__subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-family: var(--font-body);
}

.asy-header__carrinho .elementor-menu-cart__subtotal strong {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--asy-muted);
}

.asy-header__carrinho .elementor-menu-cart__subtotal .woocommerce-Price-amount {
	font-family: var(--font-display);
	font-size: 1.35rem;
	font-weight: 400;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple) 60%, var(--asy-cyan));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* =========================================================
   COR E TAMANHO NOS ITENS DO CARRINHO
   Mesmo desenho no carrinho lateral, no /carrinho/ e no resumo
   do checkout: bolinha com o nome da cor e etiqueta do tamanho.
   No lateral o PHP monta as etiquetas; nas telas em blocos elas
   saem dos detalhes do Woo e o tom da bolinha vem do
   vitrine-opcoes.js.
   ========================================================= */

.elementor-menu-cart__product .asy-item-opcoes,
:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
	margin: .45rem 0 0;
	padding: 0;
}

.elementor-menu-cart__product .asy-item-opcoes > span,
:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details > span {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: .22rem .6rem;
	border-radius: 999px;
	border: 1px solid rgba(139, 61, 255, .3);
	background: transparent;
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .02em;
	line-height: 1.3;
	text-transform: none;
	color: var(--asy-white);
}

.elementor-menu-cart__product .asy-item-opcoes__bolinha,
:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details__cor::before {
	flex: none;
	width: .75rem;
	height: .75rem;
	border-radius: 50%;
	background: var(--cor, #9A94A8);
	border: 1px solid rgba(139, 61, 255, .35);
}

:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details__cor::before {
	content: '';
}

/* Nos blocos a cor vem depois do tamanho e com rotulo; aqui a cor passa
   para a frente, o rotulo sai e o tamanho ganha o "Tam." do lateral. */
:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details__cor {
	order: -1;
}

:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details__name,
:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details span[aria-hidden='true'] {
	display: none;
}

:is(body.woocommerce-cart #content .wc-block-cart-items__row, body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block) .wc-block-components-product-details__tamanho .wc-block-components-product-details__value::before {
	content: 'Tam. ';
}

/* O /carrinho/ e o carrinho lateral sao claros: a etiqueta ganha fundo branco. */
.elementor-menu-cart__product .asy-item-opcoes > span,
body.woocommerce-cart #content .wc-block-cart-items__row .wc-block-components-product-details > span {
	background: #FFFFFF;
}

/* O resumo do checkout e escuro: com a borda roxa a bolinha preta sumia
   no fundo, entao a borda clareia. */
body.woocommerce-checkout #content .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-product-details__cor::before {
	border-color: rgba(245, 242, 251, .5);
}

/* =========================================================
   TELAS ESTREITAS
   ========================================================= */

@media (max-width: 640px) {
	.woocommerce ul.products {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: .9rem;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: .8rem;
		padding: .9rem .8rem .3rem;
	}

	.woocommerce ul.products li.product .price {
		padding: 0 .8rem;
		font-size: .95rem;
	}

	.woocommerce ul.products li.product .button {
		margin: auto .8rem .8rem;
		padding: .7rem .8rem;
		font-size: .7rem;
	}
}

/* =========================================================
   CARRINHO VAZIO
   O bloco do Woo vinha com o visual padrao dos blocos: carinha preta,
   pontinhos, cards soltos e botao cinza com texto roxo. Aqui ele segue
   os cards brancos da loja.
   ========================================================= */

body.woocommerce-cart #content .wp-block-woocommerce-empty-cart-block {
	padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
}

body.woocommerce-cart #content .wc-block-cart__empty-cart__title {
	margin: 0 0 .5rem;
	font-size: var(--asy-titulo-2);
}

body.woocommerce-cart #content .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	width: 4.5rem;
	height: 4.5rem;
	margin-bottom: 1.25rem;
	border-radius: 50%;
	background: var(--asy-grad-brand);
}

body.woocommerce-cart #content .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots {
	width: 120px;
	height: 1px;
	margin: 2.5rem auto;
	border: 0;
	background: var(--asy-grad-line);
}

body.woocommerce-cart #content .wp-block-woocommerce-empty-cart-block .wp-block-separator.is-style-dots::before {
	content: none;
}

body.woocommerce-cart #content .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
	margin: 0 0 1.5rem;
	font-size: var(--asy-titulo-2);
}

body.woocommerce-cart #content .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

body.woocommerce-cart #content .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	max-width: none;
	margin: 0;
	padding: 0 0 1.1rem;
	border: 1px solid rgba(91, 33, 182, .12);
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 18px 40px -28px rgba(91, 33, 182, .45);
	text-align: left;
	transition: transform 260ms cubic-bezier(.22,.61,.36,1), border-color 260ms, box-shadow 260ms;
}

body.woocommerce-cart #content .wc-block-grid__product:hover {
	border-color: rgba(255, 46, 154, .45);
	box-shadow: 0 26px 50px -26px rgba(255, 46, 154, .45);
}

body.woocommerce-cart #content .wc-block-grid__product-link {
	display: block;
	text-decoration: none;
}

body.woocommerce-cart #content .wc-block-grid__product-image {
	margin: 0;
}

body.woocommerce-cart #content .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

body.woocommerce-cart #content .wc-block-grid__product-title {
	min-height: 2.5em;
	margin: 0;
	padding: 1.1rem 1.1rem .35rem;
	font-family: var(--font-display);
	font-size: .92rem;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--asy-white);
}

body.woocommerce-cart #content .wc-block-grid__product-price {
	margin: 0 0 .9rem;
	padding: 0 1.1rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--asy-cyan);
}

body.woocommerce-cart #content .wc-block-grid__product-add-to-cart {
	margin: auto 1.1rem 0;
}

body.woocommerce-cart #content .wc-block-grid__product-add-to-cart .wp-block-button__link {
	display: block;
	width: 100%;
	padding: .8rem 1.2rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--asy-pink), var(--asy-purple));
	color: #fff;
	font-family: var(--font-body);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: box-shadow 220ms, transform 220ms;
}

body.woocommerce-cart #content .wc-block-grid__product-add-to-cart .wp-block-button__link:hover {
	box-shadow: 0 12px 28px -12px rgba(255, 46, 154, .9);
	transform: translateY(-2px);
}

body.woocommerce-cart #content .wc-block-grid__product-add-to-cart .added_to_cart {
	display: none;
}

/* Quatro novidades: abaixo de 900px ficam duas por linha, senao o botao
   quebrava em duas linhas dentro de um card de 170px. */
@media (max-width: 899px) {
	body.woocommerce-cart #content .wc-block-grid__products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: .9rem;
	}
}

@media (max-width: 640px) {
	body.woocommerce-cart #content .wc-block-grid__product-title {
		padding: .9rem .8rem .3rem;
		font-size: .8rem;
	}

	body.woocommerce-cart #content .wc-block-grid__product-price {
		padding: 0 .8rem;
		font-size: .95rem;
	}

	body.woocommerce-cart #content .wc-block-grid__product-add-to-cart {
		margin: auto .8rem 0;
	}

	body.woocommerce-cart #content .wc-block-grid__product-add-to-cart .wp-block-button__link {
		padding: .7rem .8rem;
		font-size: .7rem;
	}
}

/* ---- Entrega e total no carrinho lateral -------------------------------- */

/* Fica logo abaixo do subtotal da gaveta, com a mesma margem lateral. */
.asy-mini-frete {
	margin-top: -6px;
	padding: 0 20px 4px;
}

.asy-mini-linha {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 8px;
	font-size: .92em;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.asy-mini-linha--aviso {
	opacity: .62;
	font-style: italic;
}

.asy-mini-linha--total {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid currentColor;
	font-size: 1em;
	font-weight: 700;
}

/* As linhas sao spans, herdadas do formato antigo; empilham como bloco. */
.asy-mini-linha {
	width: 100%;
}

/* ---- Calcular entrega na ficha do produto -------------------------------- */

.asy-frete-produto {
	width: 100%;
	max-width: 440px;
	margin-top: 24px;
	padding: 16px 18px 14px;
	border: 1px solid rgba(139, 61, 255, .22);
	border-radius: 14px;
	background: rgba(139, 61, 255, .045);
}

.asy-frete-produto__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.asy-frete-produto__rotulo {
	margin: 0;
	font-family: var(--font-display, inherit);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--asy-purple, #8B3DFF);
}

.asy-frete-produto__campos {
	display: flex;
	flex: 1 1 auto;
	gap: 8px;
}

.asy-frete-produto__cep {
	width: 8.5em;
	padding: 10px 12px;
	border: 1px solid rgba(23, 17, 43, .18);
	border-radius: 10px;
	background: #fff;
	font-family: var(--font-body, inherit);
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	color: var(--asy-black, #07060D);
	text-transform: none;
}

.asy-frete-produto__cep:focus {
	outline: 2px solid var(--asy-purple, #8B3DFF);
	outline-offset: 1px;
	border-color: transparent;
}

/* O kit do Elementor pinta todo <button>; a classe junto ao tipo ganha dele. */
.asy-frete-produto button.asy-frete-produto__botao {
	flex: none;
	width: auto;
	margin: 0;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--asy-purple, #8B3DFF);
	font-family: var(--font-display, inherit);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	line-height: 1.2;
	cursor: pointer;
}

.asy-frete-produto button.asy-frete-produto__botao:hover:not(:disabled) {
	background: var(--asy-purple-deep, #5B21B6);
}

.asy-frete-produto button.asy-frete-produto__botao:disabled {
	opacity: .6;
	cursor: default;
}

.asy-frete-produto__aviso {
	margin: 12px 0 0;
	font-size: .88rem;
	color: var(--asy-muted, #A79FC0);
}

.asy-frete-produto__opcoes {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid rgba(23, 17, 43, .12);
}

.asy-frete-produto__opcoes li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid rgba(23, 17, 43, .08);
	font-size: .92rem;
	list-style: none;
}

.asy-frete-produto__opcoes li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.asy-frete-produto__nome {
	font-weight: 600;
	color: var(--asy-black, #07060D);
}

.asy-frete-produto__prazo {
	font-size: .82rem;
	color: var(--asy-muted, #A79FC0);
}

/* Empurra o valor para a direita seja qual for a largura do nome. */
.asy-frete-produto__valor {
	margin-left: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--asy-black, #07060D);
	white-space: nowrap;
}

/* ---- Calculadora de entrega no carrinho --------------------------------- */

/* O painel de totais do carrinho e escuro; os campos herdam essa base. */
.asy-frete-carrinho {
	padding: 16px 0 4px;
	border-top: 1px solid rgba(245, 242, 251, .14);
}

.asy-frete-carrinho__rotulo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--font-display, inherit);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--asy-cyan, #00E5FF);
}

.asy-frete-carrinho__campos {
	display: flex;
	gap: 8px;
}

.asy-frete-carrinho__cep {
	flex: 1 1 auto;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid rgba(245, 242, 251, .24);
	border-radius: 10px;
	background: rgba(245, 242, 251, .06);
	font-family: var(--font-body, inherit);
	font-size: .95rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	color: inherit;
}

.asy-frete-carrinho__cep::placeholder {
	color: rgba(167, 159, 192, .7);
}

.asy-frete-carrinho__cep:focus {
	outline: 2px solid var(--asy-cyan, #00E5FF);
	outline-offset: 1px;
	border-color: transparent;
}

.asy-frete-carrinho__botao {
	flex: none;
	padding: 10px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--asy-purple, #8B3DFF);
	font-family: var(--font-display, inherit);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

.asy-frete-carrinho__botao:hover:not(:disabled) {
	background: var(--asy-pink, #FF2E9A);
}

.asy-frete-carrinho__botao:disabled {
	opacity: .55;
	cursor: default;
}

.asy-frete-carrinho__erro,
.asy-frete-carrinho__vazio {
	display: block;
	margin: 8px 0 0;
	font-size: .84rem;
	color: var(--asy-pink, #FF2E9A);
}

.asy-frete-carrinho__opcoes {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.asy-frete-carrinho__opcao {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* O rotulo inteiro e a area clicavel; o valor vai para a direita. */
.asy-frete-carrinho__opcao label {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 8px 0;
	font-size: .9rem;
	cursor: pointer;
}

.asy-frete-carrinho__opcao input[type='radio'] {
	flex: none;
	margin: 0;
	accent-color: var(--asy-cyan, #00E5FF);
}

.asy-frete-carrinho__prazo {
	font-size: .8rem;
	color: var(--asy-muted, #A79FC0);
}

.asy-frete-carrinho__valor {
	margin-left: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Resumo recolhido da entrega: nota discreta e link que abre a calculadora. */
.asy-frete-carrinho__resumo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	font-size: .82rem;
}

.asy-frete-carrinho__nota {
	color: var(--asy-muted, #A79FC0);
}

/* O kit do Elementor pinta todo <button> de roxo com 16px/32px de respiro.
   Aqui e um link no meio da frase, entao a regra precisa ganhar dele: classe
   do bloco + tipo, que passa por cima de ".elementor-kit-N button". */
.asy-frete-carrinho button.asy-frete-carrinho__link {
	display: inline;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: var(--asy-muted, #A79FC0);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	box-shadow: none;
}

.asy-frete-carrinho button.asy-frete-carrinho__link:hover {
	background: none;
	color: var(--asy-cyan, #00E5FF);
}

/* Com o painel recolhido a moldura some; sobra so a linha de texto. */
.asy-frete-carrinho {
	padding: 10px 0 2px;
}

.asy-frete-carrinho__form {
	margin-top: 14px;
}