/* =========================================================================
   CleanPride - WooCommerce
   ========================================================================= */

/* ---------------------------------------------------------- Layout loja */

.loja-layout {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 36px;
	padding-block: 26px 60px;
	align-items: start;
}
.loja-layout .loja-conteudo { grid-column: 2; }
.loja-layout .loja-sidebar { grid-column: 1; grid-row: 1; }
body.sem-sidebar-loja .loja-layout { grid-template-columns: 1fr; }
body.sem-sidebar-loja .loja-layout .loja-conteudo { grid-column: 1; }

.loja-sidebar .widget {
	margin-bottom: 20px;
	padding: 22px;
	border-radius: var(--cp-raio);
	background: var(--cp-fundo-alt);
}
.loja-sidebar ul { margin: 0; padding: 0; list-style: none; font-size: .93rem; }
.loja-sidebar li { padding: 5px 0; }
.loja-sidebar a { color: var(--cp-texto); }
.loja-sidebar a:hover { color: var(--cp-primaria); }
.loja-sidebar .widget__titulo {
	margin: 0 0 12px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--cp-texto);
}

/* ------------------------------------------- Filtro de categorias */

.filtro-categorias a { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.filtro-categorias__conta {
	flex: none;
	font-size: .78rem;
	color: var(--cp-texto-fraco);
	font-variant-numeric: tabular-nums;
}
.filtro-categorias__mae > a { font-weight: 600; }
.filtro-categorias__todos { padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--cp-borda); }
.filtro-categorias__filhas { margin: 4px 0 8px; padding-left: 12px; border-left: 2px solid var(--cp-borda); }
.filtro-categorias__filhas li { padding: 3px 0; }
.filtro-categorias__filhas a { font-size: .88rem; color: var(--cp-texto-fraco); }
.filtro-categorias .esta-aqui > a,
.filtro-categorias li.esta-aqui > a { color: var(--cp-primaria); font-weight: 700; }

.woocommerce-products-header { padding-top: 6px; }
.woocommerce-products-header__title { margin-bottom: .3em; }
.woocommerce-products-header .term-description { max-width: 76ch; color: var(--cp-texto-fraco); }

/* ------------------------------------------------------- Aviso B2B */

.aviso-b2b { background: #fff6e8; }
.aviso-b2b .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-block: 14px;
}
.aviso-b2b p {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .93rem;
	font-weight: 500;
}
.aviso-b2b .icone { color: var(--cp-alerta); flex: none; }
.aviso-b2b .botao--claro { border-color: var(--cp-alerta); color: #8a4d05; }

/* Com o preco liberado o aviso e informativo, nao um alerta. */
.aviso-b2b--info { background: #eef4f9; }
.aviso-b2b--info .icone { color: var(--cp-destaque); }
.aviso-b2b--info .botao--claro { border-color: var(--cp-primaria); color: var(--cp-primaria); }

/* ------------------------------------------------ Barra e subcategorias */

.subcats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}
.subcats a {
	display: inline-block;
	padding: 9px 18px;
	border-radius: var(--cp-pill);
	background: var(--cp-fundo-alt);
	font-size: .9rem;
	font-weight: 550;
	color: var(--cp-texto-medio);
	transition: background-color var(--cp-transicao), color var(--cp-transicao);
}
.subcats a:hover { background: var(--cp-primaria); color: #fff; text-decoration: none; }
.subcats a:hover span { color: rgba(255,255,255,.7); }
.subcats span { color: var(--cp-texto-fraco); }

.listagem-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 4px 0 22px;
	margin-bottom: 4px;
}
.woocommerce-result-count { margin: 0; font-size: .88rem; color: var(--cp-texto-fraco); }
.woocommerce-ordering select {
	padding: 10px 16px;
	border: 1px solid var(--cp-borda-forte);
	border-radius: var(--cp-pill);
	font-family: inherit;
	font-size: .9rem;
	background: #fff;
}

/* ------------------------------------------------------- Card de produto */

/*
 * A grade se adapta a largura disponivel em vez de fixar o numero de colunas.
 * Com a lateral de categorias ocupando 268px, quatro colunas deixavam o card
 * com 199px - e ai TODOS os nomes ("Agua Sanitaria Master Limpeza Maxima 5
 * Litros - Desinfetante de Uso Geral e Alvejante") apareciam cortados.
 * Com auto-fill o card nunca fica abaixo de 240px: sobra largura, entram mais
 * colunas; falta, entram menos.
 */
ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* O clearfix do WooCommerce vira uma celula fantasma no grid.
   Precisa da especificidade .woocommerce para vencer o CSS do plugin. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after { content: none; display: none; }

.produto-card { margin: 0 !important; width: auto !important; float: none !important; }
.produto-card__interno {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: var(--cp-raio);
	overflow: hidden;
	box-shadow: var(--cp-sombra);
	transition: box-shadow var(--cp-transicao), transform var(--cp-transicao);
}
.produto-card__interno:hover { box-shadow: var(--cp-sombra-media); transform: translateY(-4px); }

.produto-card__midia { position: relative; }
.produto-card__midia a { display: block; }
.produto-card__midia img {
	aspect-ratio: 1;
	width: 100%;
	object-fit: contain;
	background: #fff;
	padding: 10px;
}

/*
 * Selo de oferta a ESQUERDA: o codigo do produto (.produto__sku) ocupa o canto
 * direito, e os dois juntos se sobrepunham. Precisa da cadeia completa
 * ".woocommerce ul.products li.product" para vencer o CSS do plugin, que
 * ancora o selo na direita.
 */
.woocommerce ul.products li.product .onsale,
.woocommerce .produto-card .onsale,
.produto-card .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	bottom: auto;
	margin: 0;
	min-height: 0;
	min-width: 0;
	line-height: 1.5;
	z-index: 2;
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--cp-alerta);
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
}

.produto__sku {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
	font-size: .7rem;
	color: #96a4b2;
	letter-spacing: .02em;
}

/*
 * HIERARQUIA DO CARD — quatro niveis, do mais forte para o mais fraco.
 *
 *   1. PRECO ......... 1.55rem, peso 800, verde   <- o olho bate aqui primeiro
 *   2. Titulo ........ .92rem, peso 600, texto    <- identifica o produto
 *   3. Embalagem ..... .78rem, cinza fraco        <- o que voce leva
 *   4. Codigo (SKU) .. .7rem, cinza claro         <- so quem procura, acha
 *
 * A regra que sustenta isso: cada nivel e menor E mais apagado que o anterior.
 * Titulo e preco no mesmo peso e na mesma cor - como estava antes - fazem os
 * dois brigarem, e o cliente nao sabe onde olhar.
 */
.produto-card__corpo { flex: 1; padding: 4px 16px 12px; }

/* Nivel 2 — titulo */
.produto-card .woocommerce-loop-product__title {
	font-size: .92rem !important;
	font-weight: 600;
	line-height: 1.32;
	margin: 0 0 8px !important;
	padding: 0 !important;
	color: var(--cp-texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Nivel 3 — embalagem. Apoia o preco, por isso fica logo abaixo dele. */
.produto__unidade {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 5px 0 0;
	font-size: .78rem;
	line-height: 1.3;
	color: var(--cp-texto-fraco);
}
.produto__unidade .icone { color: #9fb0c0; flex: none; }

.produto__estoque--fora { margin: 6px 0 0; font-size: .8rem; color: var(--cp-alerta); font-weight: 600; }

/*
 * Nivel 1 — o preco e o heroi visual do card.
 *
 * O seletor precisa do ".woocommerce ul.products li.product" porque o CSS do
 * proprio WooCommerce usa exatamente essa cadeia e venceria um ".produto-card
 * .price" simples - deixando o preco em 15px, peso 400 e cor dele.
 */
.woocommerce ul.products li.product .price,
.produto-card .price {
	display: block;
	margin: 0;
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--cp-destaque);
}
/*
 * Em promocao o WooCommerce imprime <del> (preco cheio) e <ins> (preco novo).
 * O riscado vai para uma linha propria, pequeno e apagado: ele existe para dar
 * referencia, nao para competir com o preco que vale.
 */
.woocommerce ul.products li.product .price del,
.produto-card .price del {
	display: block;
	margin-bottom: 1px;
	font-size: .78rem;
	font-weight: 500;
	color: #93a1b0;
	text-decoration: line-through;
}
.woocommerce ul.products li.product .price del::before,
.produto-card .price del::before { content: "De: "; }
.woocommerce ul.products li.product .price ins,
.produto-card .price ins { text-decoration: none; color: var(--cp-destaque); }
.woocommerce ul.products li.product .price ins::before,
.produto-card .price ins::before {
	content: "Por: ";
	font-size: .62em;
	font-weight: 600;
	color: var(--cp-texto-fraco);
}
/* O "R$" nao precisa do mesmo tamanho do numero. */
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
.produto-card .price .woocommerce-Price-currencySymbol {
	font-size: .68em;
	font-weight: 600;
	text-transform: none;
}

/*
 * Sem preco cadastrado, o texto NAO herda o destaque: ele nao e um preco, e um
 * aviso. Cair no nivel 3 evita que o card pareca ter uma oferta que nao existe.
 */
.produto-card .preco-combinar,
.produto-card .price .preco-combinar {
	display: block;
	font-size: .92rem;
	font-weight: 600;
	color: var(--cp-texto-fraco);
	letter-spacing: 0;
}

.preco-bloqueado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--cp-primaria);
}
.preco-bloqueado--analise { color: var(--cp-alerta); }

/*
 * Alinhamento do rodape do card.
 *
 * O WooCommerce abre o <a> do produto dentro de .produto-card__midia e so o
 * fecha dentro de .produto-card__acao. O parser do navegador entao "adota" o
 * .produto-card__corpo para dentro desse <a>, que passa a ser filho direto do
 * card - e o flex:1 do corpo deixa de empurrar o que quer que seja. Resultado:
 * card sem o aviso de estoque ficava com uma folga morta embaixo do botao.
 *
 * Ancorar o bloco do botao com margem automatica resolve independente de onde
 * o parser decidir colocar o corpo.
 */
.produto-card__interno > a.woocommerce-LoopProduct-link {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.produto-card__acao { padding: 0 16px 16px; margin-top: auto; }
/* .woocommerce no seletor para vencer o CSS do proprio WooCommerce. */
.woocommerce .produto-card__acao a.button,
.woocommerce .produto-card__acao button.button,
.produto-card__acao .button,
.produto-card__acao .botao {
	display: flex;
	width: 100%;
	justify-content: center;
	padding: 12px 16px;
	border: 0;
	border-radius: var(--cp-pill);
	background: var(--cp-destaque);
	color: #fff;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
}
.woocommerce .produto-card__acao a.button:hover,
.woocommerce .produto-card__acao button.button:hover,
.produto-card__acao .button:hover { background: color-mix(in srgb, var(--cp-destaque) 85%, #000); color: #fff; }
.produto-card__acao .botao--linha { background: transparent; border: 2px solid var(--cp-primaria); color: var(--cp-primaria); }
.produto-card__acao .botao--linha:hover { background: var(--cp-primaria); color: #fff; }
.produto-card__acao .added_to_cart { display: block; margin-top: 8px; font-size: .82rem; text-align: center; }

/* --------------------------------------------------------- Texto SEO */

.categoria-seo {
	margin-top: 48px;
	padding-top: 30px;
	border-top: 1px solid var(--cp-borda);
}
.categoria-seo .prosa { max-width: 82ch; color: var(--cp-texto-fraco); font-size: .95rem; }
.categoria-seo h2, .categoria-seo h3 { color: var(--cp-texto); }

/* ---------------------------------------------------- Pagina do produto */

.single-product .loja-layout { grid-template-columns: 1fr; }
.single-product .loja-conteudo { grid-column: 1 !important; }

/*
 * A coluna da direita leva mais espaco que a da esquerda: os nomes destes
 * produtos sao longos ("Agua Sanitaria Master Limpeza Maxima 5 Litros - ...")
 * e, em duas colunas iguais, o titulo quebrava em seis linhas.
 */
.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: 42px;
	padding-top: 22px;
	align-items: start;
}
/*
 * O WooCommerce assume layout com float e impoe "width: 48%" na galeria e no
 * resumo (dentro de um @media min-width:768px, por isso o problema so aparecia
 * no computador). Como aqui o layout e grid, essas larguras deixavam a imagem
 * com 226px numa coluna de 471px e o texto com 306px numa de 638px - dai o
 * titulo quebrando em cinco linhas e a foto parecendo miniatura.
 *
 * O seletor do WooCommerce tem especificidade alta (.woocommerce div.product
 * div.images), entao aqui vai !important mesmo - e o que o resto deste arquivo
 * ja faz para vencer o CSS do plugin.
 */
.single-product .woocommerce-product-gallery,
.single-product div.product div.images {
	grid-column: 1;
	width: 100% !important;
	float: none !important;
	/* Trava a moldura para a foto nao crescer demais em tela larga. */
	max-width: 460px;
}
.single-product .summary,
.single-product div.product div.summary {
	grid-column: 2;
	width: 100% !important;
	float: none !important;
	margin: 0 !important;
}

/*
 * Moldura quadrada e imagem contida: as fotos dos galoes tem enquadramentos
 * diferentes, e sem isso cada produto aparecia com uma proporcao.
 */
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper > * { width: 100%; }
.single-product .woocommerce-product-gallery img {
	aspect-ratio: 1;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: #fff;
	padding: 14px;
}
.single-product .woocommerce-tabs,
.single-product .related,
.single-product .up-sells { grid-column: 1 / -1; }

.woocommerce-product-gallery img { border: 1px solid var(--cp-borda); border-radius: var(--cp-raio); }
.flex-control-thumbs { display: flex; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.flex-control-thumbs li { width: 74px; }

/*
 * Titulo menor e mais apertado no entrelinhas: com nome de 8 palavras, o
 * tamanho anterior virava um bloco de texto que empurrava tudo para baixo.
 */
.single-product .product_title {
	font-size: clamp(1.25rem, 1rem + .7vw, 1.6rem);
	line-height: 1.25;
	margin: 0 0 14px;
	text-wrap: balance;
}
.single-product .summary .sku_wrapper { display: block; font-size: .84rem; color: var(--cp-texto-fraco); margin-bottom: 14px; }
/* Respiro constante entre os blocos da coluna da direita. */
.single-product .summary > * + * { margin-top: 16px; }
.single-product .summary .price { margin-top: 0; }
/* Mesma hierarquia do card, em escala maior. O preco e o heroi. */
.single-product .summary .price {
	display: block;
	margin: 0 0 6px;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--cp-destaque);
}
.single-product .summary .price ins { text-decoration: none; color: var(--cp-destaque); }
.single-product .summary .price ins::before {
	content: "Por: ";
	font-size: .5em;
	font-weight: 600;
	color: var(--cp-texto-fraco);
}
.single-product .summary .price del {
	display: block;
	margin-bottom: 2px;
	font-size: .95rem;
	font-weight: 500;
	color: #93a1b0;
	text-decoration: line-through;
}
.single-product .summary .price del::before { content: "De: "; }
.single-product .summary .price .woocommerce-Price-currencySymbol { font-size: .6em; font-weight: 600; }
.single-product .summary .preco-combinar {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--cp-texto-fraco);
	letter-spacing: 0;
}
.single-product .woocommerce-product-details__short-description { color: var(--cp-texto-fraco); margin-bottom: 18px; }

.produto-comercial {
	margin: 24px 0;
	padding: 20px 22px;
	list-style: none;
	background: var(--cp-fundo-alt);
	border-radius: var(--cp-raio);
	font-size: .92rem;
}
.produto-comercial li { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; }

/* Preco ainda nao cadastrado: informa em vez de deixar em branco. */
.preco-combinar {
	display: inline-block;
	font-size: .92rem;
	font-weight: 600;
	color: var(--cp-texto-fraco);
}
.single-product .summary .preco-combinar { font-size: 1.05rem; }

/*
 * A saida para o WhatsApp fica de proposito discreta quando o produto pode
 * ser adicionado: o caminho que interessa e juntar itens no orcamento.
 */
.produto__duvida {
	margin: 14px 0 0;
	font-size: .9rem;
	color: var(--cp-texto-fraco);
}
.produto__duvida a {
	color: var(--cp-primaria);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Botao de WhatsApp da pagina do produto. */
.produto__whatsapp {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 18px;
	border-radius: var(--cp-pill);
	font-weight: 650;
}
.botao--whatsapp { background: #25d366; color: #fff; border: 0; }
.botao--whatsapp:hover { background: #1eb555; color: #fff; }
.produto__whatsapp .icone { flex: none; }
.produto-comercial .icone { color: var(--cp-primaria); margin-top: 3px; }
.produto-comercial strong { font-weight: 600; }

form.cart { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px !important; }
.quantity { display: flex; align-items: center; }
.quantity input[type="number"] {
	width: 100px;
	padding: 14px 10px;
	border: 1px solid var(--cp-borda-forte);
	border-radius: var(--cp-pill);
	font-family: inherit;
	font-size: 1rem;
	text-align: center;
}
.single_add_to_cart_button {
	flex: 1;
	min-width: 220px;
	padding: 16px 32px !important;
	border: 0;
	border-radius: var(--cp-pill);
	background: var(--cp-destaque) !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 1rem !important;
	font-weight: 700;
	cursor: pointer;
}
.single_add_to_cart_button:hover { background: color-mix(in srgb, var(--cp-destaque) 85%, #000) !important; }

.woocommerce-tabs { margin-top: 56px; }
.woocommerce-tabs ul.tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--cp-borda);
}
.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var(--cp-raio) var(--cp-raio) 0 0;
	font-weight: 600;
	color: var(--cp-texto-fraco);
}
.woocommerce-tabs ul.tabs li.active a {
	background: #fff;
	border-color: var(--cp-borda);
	color: var(--cp-texto);
}
/*
 * Quando existe UMA aba so - que e o caso destes produtos, que tem apenas
 * descricao - o visual de pasta com abas nao esta navegando nada: vira uma
 * caixinha solta no meio da pagina. Nesse caso a aba vira simplesmente o
 * titulo da secao.
 */
.woocommerce-tabs ul.tabs li:only-child a,
.woocommerce-tabs ul.tabs li:only-child.active a {
	padding: 0 0 12px;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--cp-texto);
	font-size: 1.15rem;
	font-weight: 700;
}

.woocommerce-tabs .panel { padding-top: 26px; max-width: 82ch; }
.woocommerce-tabs .panel h2:first-child { display: none; }
.shop_attributes { width: 100%; border-collapse: collapse; font-size: .93rem; }
.shop_attributes th, .shop_attributes td { padding: 10px 12px; border: 1px solid var(--cp-borda); text-align: left; }
.shop_attributes th { background: var(--cp-fundo-alt); width: 220px; }

.related > h2, .up-sells > h2 { margin-top: 56px; }

/* --------------------------------------------------------- Carrinho */

.pedido-minimo {
	margin-bottom: 22px;
	padding: 14px 18px;
	background: #fff6e8;
	border: 1px solid #f3ddba;
	border-radius: var(--cp-raio);
}
.pedido-minimo p { margin: 0 0 8px; font-size: .92rem; font-weight: 600; }
.pedido-minimo__barra { height: 7px; background: #eddfc8; border-radius: 100px; overflow: hidden; }
.pedido-minimo__barra span { display: block; height: 100%; background: var(--cp-alerta); transition: width .3s ease; }
.pedido-minimo--ok { background: #eaf7f0; border-color: #bfe4ce; }
.pedido-minimo--ok .pedido-minimo__barra { background: #cfe9da; }
.pedido-minimo--ok .pedido-minimo__barra span { background: var(--cp-destaque); }

.woocommerce-cart-form table.shop_table,
.woocommerce table.shop_table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--cp-borda);
	text-align: left;
	vertical-align: middle;
}
.woocommerce table.shop_table thead th { background: var(--cp-fundo-alt); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.cart_item img { width: 62px; border: 1px solid var(--cp-borda); border-radius: 4px; }

.cart-collaterals { margin-top: 34px; }
.cart_totals { max-width: 460px; margin-left: auto; padding: 22px; border: 1px solid var(--cp-borda); border-radius: var(--cp-raio); background: var(--cp-fundo-alt); }
.cart_totals h2 { font-size: 1.1rem; }
.checkout-button { display: block !important; text-align: center; }

.woocommerce .button, .woocommerce button.button, .woocommerce input.button {
	padding: 13px 26px;
	border: 0;
	border-radius: var(--cp-pill);
	background: var(--cp-primaria);
	color: #fff;
	font-family: inherit;
	font-size: .93rem;
	font-weight: 600;
	cursor: pointer;
}
.woocommerce .button:hover { background: var(--cp-escura); color: #fff; }
.woocommerce .button.alt, .woocommerce button.button.alt {
	background: var(--cp-destaque);
}
.woocommerce .button.alt:hover { background: color-mix(in srgb, var(--cp-destaque) 85%, #000); }

/* ------------------------------------------- Envio da lista (WhatsApp) */

.lista-envio {
	margin-top: 40px;
	padding: 30px;
	background: var(--cp-fundo-alt);
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
}
.lista-envio__cabecalho { max-width: 70ch; margin-bottom: 26px; }
.lista-envio__cabecalho h2 { margin-bottom: .35em; font-size: 1.35rem; }
.lista-envio__cabecalho p { margin: 0; color: var(--cp-texto-fraco); }
.lista-envio__aviso {
	margin-bottom: 24px;
	padding: 12px 16px;
	background: #fff6e8;
	border-left: 4px solid var(--cp-alerta);
	border-radius: var(--cp-raio);
	font-size: .9rem;
}

.form-lista fieldset {
	margin: 0 0 26px;
	padding: 0;
	border: 0;
}
.form-lista legend {
	padding: 0;
	margin-bottom: 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cp-primaria);
}
.form-lista__grade {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px 18px;
}
.form-lista .campo { display: flex; flex-direction: column; margin: 0; grid-column: span 3; }
.form-lista .campo--largo { grid-column: 1 / -1; }
.form-lista .campo--cep,
.form-lista .campo--numero,
.form-lista .campo--uf { grid-column: span 2; }
.form-lista .campo--endereco { grid-column: span 4; }
.form-lista .campo--complemento,
.form-lista .campo--bairro,
.form-lista .campo--cidade { grid-column: span 2; }
.form-lista label { margin-bottom: 6px; font-size: .86rem; font-weight: 600; }
.form-lista label span { color: #c0392b; }
.form-lista input,
.form-lista select,
.form-lista textarea {
	padding: 11px 13px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	font-family: inherit;
	font-size: .95rem;
	background: #fff;
}
.form-lista input:focus,
.form-lista select:focus,
.form-lista textarea:focus { border-color: var(--cp-primaria); outline: none; }
.form-lista textarea { resize: vertical; }
.campo-checkbox { flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: .92rem; }
.form-lista__acao { margin: 0; }
.form-lista__acao button { width: 100%; max-width: 420px; }
.form-lista__acao small { display: block; margin-top: 10px; font-size: .84rem; color: var(--cp-texto-fraco); }

.lista-sucesso {
	margin-top: 40px;
	padding: 32px;
	background: #eaf7f0;
	border: 1px solid #bfe4ce;
	border-radius: var(--cp-raio);
}
.lista-sucesso h2 { margin-bottom: .35em; font-size: 1.35rem; }
.lista-sucesso__obs { margin: 16px 0 0; font-size: .9rem; color: var(--cp-texto-fraco); }
.lista-vazia-cta { margin-top: 18px; }

@media (max-width: 782px) {
	.lista-envio { padding: 20px; }
	.form-lista__grade { grid-template-columns: repeat(2, 1fr); }
	.form-lista .campo,
	.form-lista .campo--endereco,
	.form-lista .campo--complemento,
	.form-lista .campo--bairro,
	.form-lista .campo--cidade { grid-column: 1 / -1; }
	.form-lista .campo--cep,
	.form-lista .campo--numero,
	.form-lista .campo--uf { grid-column: span 1; }
	.form-lista__acao button { max-width: none; }
}

/* --------------------------------------------------- Checkout e conta */

.woocommerce-checkout .col2-set { display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px; }
.woocommerce-checkout #order_review { margin-top: 34px; }
.woocommerce form .form-row { display: flex; flex-direction: column; margin-bottom: 16px; }
.woocommerce form .form-row label { margin-bottom: 5px; font-size: .88rem; font-weight: 600; }
.woocommerce form .form-row .required { color: #c0392b; text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	padding: 11px 13px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	font-family: inherit;
	font-size: .95rem;
	background: #fff;
	height: auto;
}
.woocommerce form .form-row input.input-text:focus { border-color: var(--cp-primaria); outline: none; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { display: inline-flex; width: calc(50% - 8px); }
.woocommerce form .form-row-first { margin-right: 14px; }
.form-aviso { font-size: .85rem; color: var(--cp-texto-fraco); background: var(--cp-fundo-alt); padding: 12px 14px; border-radius: var(--cp-raio); }

/* Carrinho, checkout e conta sao paginas comuns e caem no template de pagina,
   que usa .container.prosa. A largura de leitura da .prosa (78ch) espremia a
   tabela do carrinho e o painel da conta numa coluna estreita centralizada. */
.woocommerce-account .container.prosa,
.woocommerce-cart .container.prosa,
.woocommerce-checkout .container.prosa,
.woocommerce-order-received .container.prosa { max-width: var(--cp-container); }

/* Flex e nao grid de proposito: o WooCommerce injeta um
   .woocommerce-notices-wrapper como primeiro filho, que num grid rouba a
   primeira celula e joga o conteudo para uma coluna estreita. */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 36px;
	padding-block: 30px 60px;
}
.woocommerce-account .woocommerce > .woocommerce-notices-wrapper { flex: 1 0 100%; }
.woocommerce-account .woocommerce-MyAccount-navigation { flex: 0 0 240px; }
.woocommerce-account .woocommerce-MyAccount-content { flex: 1 1 320px; min-width: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation ul { margin: 0; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: var(--cp-raio); color: var(--cp-texto); }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a { background: var(--cp-primaria); color: #fff; }
.woocommerce-account .col2-set { grid-template-columns: repeat(2, 1fr); }
/* Deslogado a pagina so tem os formularios de entrar/cadastrar. */
.woocommerce-account:not(.logged-in) .woocommerce { max-width: 980px; margin-inline: auto; }
.woocommerce-account:not(.logged-in) .woocommerce > .u-column1,
.woocommerce-account:not(.logged-in) .woocommerce > .u-column2 { flex: 1 1 340px; }

/* ==================================================== Area do cliente */

.conta-menu { position: sticky; top: 20px; }

.conta-cartao {
	padding: 20px;
	margin-bottom: 18px;
	border-radius: var(--cp-raio);
	background: linear-gradient(160deg, var(--cp-primaria), var(--cp-escura));
	color: #fff;
}
.conta-cartao__saudacao { margin: 0; font-size: .8rem; opacity: .78; }
.conta-cartao__empresa { margin: 2px 0 4px; font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
.conta-cartao__cnpj { margin: 0; font-size: .78rem; opacity: .7; }
.conta-cartao__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 14px 0 0;
	padding: 4px 10px;
	border-radius: 100px;
	background: rgba(255, 255, 255, .16);
	font-size: .76rem;
	font-weight: 600;
}
.conta-cartao__status.is-ok .icone { color: #7ee2a8; }
.conta-cartao__status.is-pendente .icone { color: #ffc46b; }

.conta-menu__lista { margin: 0; padding: 0; list-style: none; }
.conta-menu__lista li { margin-bottom: 2px; }
.conta-menu__lista a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 11px 14px;
	border-radius: var(--cp-raio);
	color: var(--cp-texto);
	font-size: .93rem;
	font-weight: 500;
	transition: background-color .14s ease, color .14s ease;
}
.conta-menu__lista a:hover { background: var(--cp-fundo-alt); color: var(--cp-primaria); text-decoration: none; }
.conta-menu__lista .icone { color: #9fb0c0; flex: none; }
.conta-menu__lista li.is-active a { background: var(--cp-primaria); color: #fff; font-weight: 600; }
.conta-menu__lista li.is-active .icone { color: #fff; }
.conta-menu__item--customer-logout a { color: var(--cp-texto-fraco); }

.conta-vendedor {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	background: #fff;
	color: var(--cp-texto);
}
.conta-vendedor:hover { border-color: var(--cp-destaque); text-decoration: none; }
.conta-vendedor .icone { color: #25d366; flex: none; }
.conta-vendedor strong { display: block; font-size: .88rem; }
.conta-vendedor small { display: block; font-size: .76rem; color: var(--cp-texto-fraco); }

/* -------------------------------------------------------- Painel */

/* No painel, a saudacao personalizada substitui o titulo generico da pagina,
   senao a tela fica com dois H1 ("Minha conta" e "Ola, fulano"). */
.woocommerce-dashboard .pagina-cabecalho { display: none; }
.woocommerce-dashboard .woocommerce { padding-top: 30px; }

.conta-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.conta-hero h1 { margin: 0 0 2px; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); }
.conta-hero p { margin: 0; color: var(--cp-texto-fraco); font-size: .95rem; }
.conta-hero__lista {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 18px;
	border: 1px solid var(--cp-borda);
	border-radius: 100px;
	background: #fff;
	color: var(--cp-texto);
}
.conta-hero__lista:hover { border-color: var(--cp-destaque); text-decoration: none; }
.conta-hero__lista .icone { color: var(--cp-destaque); }
.conta-hero__lista strong { display: block; font-size: .9rem; }
.conta-hero__lista small { display: block; font-size: .76rem; color: var(--cp-texto-fraco); }

/* Aviso de ciclo de reposicao */
.conta-ciclo {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 18px 22px;
	margin-bottom: 22px;
	border-radius: var(--cp-raio);
	border: 1px solid;
}
.conta-ciclo.is-atrasado { background: #fff7ec; border-color: #f0dcbb; }
.conta-ciclo.is-ok { background: #eef6f1; border-color: #cbe4d6; }
.conta-ciclo__icone {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	flex: none;
}
.conta-ciclo.is-atrasado .icone { color: var(--cp-alerta); }
.conta-ciclo.is-ok .icone { color: var(--cp-destaque); }
.conta-ciclo > div { flex: 1 1 320px; }
.conta-ciclo__titulo { margin: 0 0 2px; font-weight: 700; }
.conta-ciclo__texto { margin: 0; font-size: .9rem; color: var(--cp-texto-fraco); }

.conta-grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 18px;
	margin-bottom: 18px;
	align-items: start;
}

.conta-bloco {
	padding: 24px;
	margin-bottom: 18px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	background: #fff;
}
.conta-grade .conta-bloco { margin-bottom: 0; height: 100%; }
.conta-bloco--destaque { border-left: 4px solid var(--cp-destaque); }
.conta-bloco h2 { font-size: 1.1rem; margin: 0; }
.conta-bloco__topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.conta-bloco__topo p { margin: 0; font-size: .88rem; color: var(--cp-texto-fraco); flex-basis: 100%; }
.conta-bloco__texto { color: var(--cp-texto-fraco); font-size: .93rem; }
.conta-tag {
	padding: 3px 10px;
	border-radius: 100px;
	background: var(--cp-fundo-alt);
	font-size: .76rem;
	font-weight: 600;
	color: var(--cp-texto-fraco);
	white-space: nowrap;
}
.conta-bloco__valor { margin: 16px 0 0; font-size: 1.4rem; font-weight: 700; }
.conta-bloco__valor small { display: block; font-size: .74rem; font-weight: 400; color: var(--cp-texto-fraco); }
.conta-bloco__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 20px 0 0;
}

.conta-itens-resumo {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .92rem;
}
.conta-itens-resumo li {
	display: flex;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--cp-borda);
}
.conta-itens-resumo li:last-child { border-bottom: 0; }
.conta-itens-resumo__qtd { flex: none; min-width: 34px; font-weight: 700; color: var(--cp-primaria); }
.conta-itens-resumo__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-itens-resumo__mais { color: var(--cp-texto-fraco); font-style: italic; border-bottom: 0; }

/* Grafico de barras - CSS puro, sem biblioteca */
.grafico {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	align-items: end;
	height: 150px;
	padding-top: 8px;
}
.grafico__coluna { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.grafico__valor { font-size: .68rem; color: var(--cp-texto-fraco); margin-bottom: 5px; white-space: nowrap; }
.grafico__barra {
	display: block;
	width: 100%;
	max-width: 46px;
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--cp-primaria), color-mix(in srgb, var(--cp-primaria) 72%, #fff));
	transition: filter .15s ease;
}
.grafico__coluna:hover .grafico__barra { filter: brightness(1.12); }
.grafico__barra.is-vazia { background: var(--cp-borda); }
.grafico__mes { margin-top: 7px; font-size: .74rem; color: var(--cp-texto-fraco); text-transform: uppercase; letter-spacing: .03em; }

.conta-metricas {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--cp-borda);
	list-style: none;
}
.conta-metricas strong { display: block; font-size: 1.1rem; line-height: 1.2; }
.conta-metricas strong span { font-size: .7em; font-weight: 600; color: var(--cp-texto-fraco); }
.conta-metricas small { display: block; margin-top: 2px; font-size: .76rem; color: var(--cp-texto-fraco); }
.conta-metricas .woocommerce-Price-amount { font-size: 1.1rem; font-weight: 700; }

/* Itens que o cliente sempre compra */
.frequentes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.frequente {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	transition: border-color .14s ease, background-color .14s ease;
}
.frequente:hover { border-color: var(--cp-primaria); background: var(--cp-fundo-alt); }
.frequente.is-indisponivel { opacity: .62; }
.frequente__imagem {
	display: grid;
	place-items: center;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--cp-raio);
	background: var(--cp-fundo-alt);
	overflow: hidden;
	color: #b6c2cf;
}
.frequente__imagem img { width: 100%; height: 100%; object-fit: contain; }
.frequente__corpo { flex: 1; min-width: 0; }
.frequente__nome {
	margin: 0 0 2px;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.frequente__nome a { color: inherit; }
.frequente__meta { margin: 0; font-size: .76rem; color: var(--cp-texto-fraco); }
.frequente__preco { margin: 3px 0 0; font-size: .88rem; font-weight: 700; }
.frequente__preco del { display: none; }
.frequente__acao { flex: none; }
.frequente__acao .botao { padding: 8px 14px; font-size: .84rem; white-space: nowrap; }
.frequente__aviso { font-size: .76rem; color: var(--cp-texto-fraco); }

.conta-atalhos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.conta-atalho {
	display: block;
	padding: 20px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	background: #fff;
	color: var(--cp-texto);
	transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.conta-atalho:hover {
	border-color: var(--cp-primaria);
	transform: translateY(-2px);
	box-shadow: var(--cp-sombra);
	text-decoration: none;
}
.conta-atalho .icone { color: var(--cp-primaria); margin-bottom: 10px; }
.conta-atalho strong { display: block; font-size: .96rem; }
.conta-atalho small { display: block; margin-top: 2px; font-size: .8rem; color: var(--cp-texto-fraco); }

/* ------------------------------------------------------ Pedidos */

.pedido-card {
	margin-bottom: 16px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	background: #fff;
	overflow: hidden;
}
.pedido-card__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--cp-borda);
	background: var(--cp-fundo-alt);
}
.pedido-card__data {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 3px;
	font-weight: 700;
}
.pedido-card__data .icone { color: #9fb0c0; }
.pedido-card__data span { font-weight: 400; color: var(--cp-texto-fraco); }
.pedido-card__resumo { margin: 0; font-size: .86rem; color: var(--cp-texto-fraco); }
.pedido-card__total { margin: 0; text-align: right; font-size: 1.2rem; font-weight: 700; white-space: nowrap; }
.pedido-card__total small { display: block; font-size: .72rem; font-weight: 400; color: var(--cp-texto-fraco); }

.pedido-card__itens summary {
	padding: 14px 22px;
	font-size: .9rem;
	font-weight: 600;
	color: var(--cp-primaria);
	cursor: pointer;
	list-style: none;
}
.pedido-card__itens summary::-webkit-details-marker { display: none; }
.pedido-card__itens summary::before { content: "+ "; }
.pedido-card__itens[open] summary::before { content: "\2013 "; }
.pedido-card__itens table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pedido-card__itens th, .pedido-card__itens td { padding: 10px 22px; border-top: 1px solid var(--cp-borda); text-align: left; }
.pedido-card__itens th { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-texto-fraco); }
.pedido-card__itens td small { display: block; font-size: .78rem; color: var(--cp-texto-fraco); }
.pedido-card__sku { color: var(--cp-texto-fraco); white-space: nowrap; }
.pedido-card__qtd { font-weight: 700; text-align: right !important; }

.pedido-card__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 18px 22px;
	border-top: 1px solid var(--cp-borda);
}

.conta-vazio {
	padding: 50px 30px;
	text-align: center;
	border: 2px dashed var(--cp-borda);
	border-radius: var(--cp-raio);
}
.conta-vazio .icone { color: #c3ced9; margin: 0 auto 14px; }
.conta-vazio h2 { font-size: 1.2rem; }
.conta-vazio p { max-width: 46ch; margin-inline: auto; color: var(--cp-texto-fraco); }
.conta-vazio .botao { margin-top: 10px; }

/* -------------------------------------------------- Entrar/cadastrar */

.conta-acesso { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: start; }
.conta-acesso--so-login { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.conta-acesso__pitch {
	padding: 30px;
	border-radius: var(--cp-raio);
	background: linear-gradient(160deg, var(--cp-primaria), var(--cp-escura));
	color: #fff;
}
.conta-acesso__pitch h2 { color: #fff; font-size: 1.3rem; }
.conta-acesso__pitch > p { color: rgba(255, 255, 255, .85); font-size: .93rem; }
.conta-acesso__pitch ul { margin: 20px 0 0; padding: 0; list-style: none; font-size: .93rem; }
.conta-acesso__pitch li { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.conta-acesso__pitch .icone { color: #7ee2a8; margin-top: 2px; flex: none; }
.conta-acesso__ajuda { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: .88rem; color: rgba(255, 255, 255, .8); }
.conta-acesso__ajuda a { color: #fff; text-decoration: underline; }

.conta-acesso__formularios { display: grid; gap: 20px; }
.conta-form {
	padding: 26px;
	border: 1px solid var(--cp-borda);
	border-radius: var(--cp-raio);
	background: #fff;
}
.conta-form h2 { font-size: 1.15rem; margin-bottom: .7em; }
.conta-form--cadastro { border-top: 3px solid var(--cp-destaque); }
.conta-form__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	font-size: .88rem;
}
.conta-form__lembrar { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-weight: 400; }
.conta-form .form-aviso { margin-top: 4px; }
.botao--bloco { display: flex; width: 100%; }

@media (max-width: 900px) {
	.conta-menu { position: static; }
	.conta-grade, .conta-atalhos, .frequentes { grid-template-columns: 1fr; }
	.conta-hero { flex-direction: column; align-items: flex-start; }
	.conta-metricas { grid-template-columns: repeat(3, 1fr); gap: 6px; }
	.grafico { height: 130px; }
	.grafico__valor { font-size: .62rem; }
	.conta-acesso { grid-template-columns: 1fr; }
	.conta-acesso__pitch { order: 2; }
	.pedido-card__topo { flex-direction: column; align-items: flex-start; }
	.pedido-card__total { text-align: left; }
	.pedido-card__itens th, .pedido-card__itens td { padding-inline: 16px; }
}

/* ------------------------------------------------------------- Avisos */

.woocommerce-message, .woocommerce-info, .woocommerce-error {
	margin: 0 0 22px;
	padding: 14px 18px;
	border-radius: var(--cp-raio);
	border-left: 4px solid var(--cp-primaria);
	background: var(--cp-fundo-alt);
	list-style: none;
	font-size: .93rem;
}
.woocommerce-message { border-left-color: var(--cp-destaque); background: #eaf7f0; }
.woocommerce-error { border-left-color: #c0392b; background: #fdeeec; }
.woocommerce-message .button, .woocommerce-info .button { float: right; margin-left: 14px; }

/* --------------------------------------------------------- Responsivo */

@media (max-width: 1024px) {
	.loja-layout { grid-template-columns: 1fr; }
	.loja-layout .loja-conteudo, .loja-layout .loja-sidebar { grid-column: 1; }
	.loja-layout .loja-sidebar { grid-row: auto; order: 2; }
	/* A grade principal ja se ajusta sozinha (auto-fill); aqui a lateral sai
	   de cena e sobra largura, entao nao ha o que forcar. */
	.single-product div.product { grid-template-columns: 1fr; gap: 26px; }
	.single-product .woocommerce-product-gallery, .single-product .summary { grid-column: 1; }
	/* Empilhado, a foto fica centrada - encostada a esquerda numa coluna larga
	   ela parecia deslocada. */
	.single-product .woocommerce-product-gallery { margin-inline: auto; }
	.woocommerce-account .woocommerce { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.produto-card__corpo, .produto-card__acao { padding-inline: 12px; }
	.woocommerce-checkout .col2-set, .woocommerce-account .col2-set { grid-template-columns: 1fr; }
	.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; margin-right: 0; }
	.woocommerce table.shop_table thead { display: none; }
	.woocommerce table.shop_table td { display: block; text-align: right; border-bottom: 0; }
	.woocommerce table.shop_table tr { display: block; border-bottom: 1px solid var(--cp-borda); padding: 10px 0; }
	.cart_totals { max-width: none; }
	form.cart .single_add_to_cart_button { min-width: 0; }
}


/* ================================================== Celular - loja */

@media (max-width: 782px) {
	/* Ficha tecnica e itens do pedido tambem precisam de rolagem propria */
	.shop_attributes,
	.pedido-card__itens table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.shop_attributes th { width: auto; min-width: 140px; }

	/* Filtros vao para o fim, depois dos produtos */
	.loja-layout .loja-sidebar { order: 2; margin-top: var(--cp-e6); }

	/* Barra de ordenacao: contagem e select em linhas separadas cabem melhor */
	.listagem-barra { gap: 10px; }
	.woocommerce-ordering, .woocommerce-ordering select { width: 100%; }

	/* Botao de comprar ocupando a largura toda: alvo grande para o polegar */
	.single_add_to_cart_button { width: 100%; flex: 1 1 100%; }
	form.cart { gap: 10px; }
	.quantity input[type="number"] { width: 100%; min-height: 52px; }

	/* Aviso do topo empilha em vez de espremer */
	.aviso-b2b .container { flex-direction: column; align-items: flex-start; gap: 10px; }
	.aviso-b2b .botao--claro { width: 100%; }

	/* Formulario de envio da lista */
	.form-lista__acao button { width: 100%; min-height: 54px; }
	.lista-envio { padding: 18px; }

	/* Area do cliente */
	.conta-menu__lista a { min-height: 48px; }
	.pedido-card__acoes .botao { flex: 1 1 100%; justify-content: center; }
	.frequente { flex-wrap: wrap; }
	.frequente__acao { flex-basis: 100%; }
	.frequente__acao .botao { width: 100%; justify-content: center; min-height: 44px; }
}

@media (max-width: 420px) {
	ul.products { grid-template-columns: 1fr; }
	.produto-card__midia img { aspect-ratio: 16 / 10; }
	.pedido-card__itens th, .pedido-card__itens td { padding-inline: 14px; }
}