/* ============================================================================
   WooCommerce — reescrita de aparência
   ----------------------------------------------------------------------------
   As folhas gerais do WooCommerce ficam carregadas: dão a estrutura das
   tabelas e dos formulários, e reimplementá-la de raiz seria trocar um risco
   pequeno por um grande. O que se reescreve aqui é tudo o que é aparência —
   sobretudo os botões e o roxo.

   A regra do DESIGN.md que manda neste ficheiro: **não existe um segundo
   desenho de botão**. Tudo o que o WooCommerce chama `.button` passa a ser a
   pílula de terracota do site.
   ========================================================================= */

/* ---- Botões --------------------------------------------------------------- */

.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 0;
	border-radius: 9999px;
	padding: .8125rem 1.625rem;
	background: var(--terracota);
	color: var(--cal);
	font-family: var(--font-body);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.5;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	box-shadow: var(--shadow-warm-sm);
	transition: transform .25s var(--ease-spring), box-shadow .25s ease,
	            background-color .25s ease, color .25s ease;
}

.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
	background: var(--terracota-fundo);
	color: var(--cal);
	transform: translateY(-2px);
	box-shadow: var(--shadow-warm-md);
}

.woocommerce .button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.woocommerce a.button:active,
.woocommerce #place_order:active { transform: translateY(0) scale(.98); }

.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce #place_order:focus-visible {
	outline: 3px solid var(--terracota);
	outline-offset: 3px;
}

/* O botão desactivado do WooCommerce (carrinho vazio, cupão a submeter) */
.woocommerce .button:disabled,
.woocommerce .button[disabled],
.woocommerce button.button:disabled {
	background: var(--cal-quente);
	color: var(--pedra);
	box-shadow: inset 0 0 0 1px rgb(var(--tinta-rgb) / .10);
	cursor: not-allowed;
	transform: none;
}

/* «Actualizar carrinho» e «Aplicar cupão» são acções secundárias e não devem
   competir com «Finalizar compra». Contorno em tinta, sem preenchimento. */
/* O mesmo secundário do tema (`.btn-outline`): pílula de blush com o fio de
   terracota. Era um contorno de 2px em tinta, que ao lado do «Finalizar
   compra» pesava mais do que a acção principal. Não há um segundo desenho de
   botão nesta loja, e isto é a mesma regra aplicada à marcação do WooCommerce. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"] {
	background: var(--blush);
	border: 0;
	color: var(--tinta);
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .7);
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover {
	background: var(--argila);
	color: var(--tinta);
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .9);
}

.woocommerce .checkout-button,
.woocommerce a.checkout-button {
	display: flex;
	width: 100%;
	padding: 1rem 2rem;
	box-shadow: var(--shadow-warm-md);
}

.woocommerce #place_order {
	width: 100%;
	padding: 1rem 2rem;
	font-size: .9375rem;
}

/* ---- Tabelas: carrinho e resumo da encomenda ----------------------------- */

.woocommerce table.shop_table {
	border: 0;
	border-radius: 0;
	border-collapse: collapse;
	width: 100%;
	margin: 0;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-top: 1px solid rgb(var(--tinta-rgb) / .10);
	padding: 1.25rem .75rem;
	vertical-align: middle;
	color: var(--tinta-suave);
	font-size: .9375rem;
}
.woocommerce table.shop_table thead th {
	border-top: 0;
	border-bottom: 1px solid rgb(var(--tinta-rgb) / .15);
	padding-bottom: .875rem;
	font-family: var(--font-body);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pedra);
}
.woocommerce table.shop_table th:first-child,
.woocommerce table.shop_table td:first-child { padding-left: 0; }
.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child { padding-right: 0; text-align: right; }

.woocommerce table.shop_table td.product-name a {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--tinta);
	text-decoration: none;
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--terracota); }

/* A capa inteira, num quadro de 3:4, como nas linhas do catálogo
   (`scf_loja_capa_carrinho()`). A sombra é `drop-shadow` e não `box-shadow`
   para seguir a capa e não o quadro, que sobra dos lados. O seletor é longo
   para passar a regra do WooCommerce que põe as imagens do carrinho a 32 px. */
.woocommerce table.shop_table td.product-thumbnail { width: 5rem; }
.woocommerce table.shop_table td.product-thumbnail .loja-carrinho-capa {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	aspect-ratio: 3 / 4;
}
.woocommerce table.shop_table td.product-thumbnail .loja-carrinho-capa img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 3px;
	box-shadow: none;
	filter: drop-shadow(0 6px 10px rgb(var(--tinta-rgb) / .2)) drop-shadow(0 1px 2px rgb(var(--tinta-rgb) / .14));
}
.woocommerce table.shop_table td.product-thumbnail .loja-capa-digital {
	border-radius: .5rem;
	background: var(--cal-quente);
	box-shadow: inset 0 0 0 1px var(--contorno);
}

.woocommerce table.shop_table .amount {
	font-family: var(--font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--tinta);
}

/* O «x» de remover: cinza-quente, vermelho só ao passar por cima. */
.woocommerce a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 9999px;
	background: transparent;
	color: var(--pedra) !important;
	font-size: 1.25rem;
	line-height: 1;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.woocommerce a.remove:hover {
	background: rgba(179,38,30,.08);
	color: #b3261e !important;
}

/* ---- Quantidade ---------------------------------------------------------- */

.woocommerce .quantity .qty {
	width: 4.5rem;
	height: 2.75rem;
	border: 1px solid rgb(var(--tinta-rgb) / .18);
	border-radius: 9999px;
	background: var(--cartao);
	text-align: center;
	font-family: var(--font-body);
	font-size: .9375rem;
	font-weight: 700;
	color: var(--tinta);
}
.woocommerce .quantity .qty:focus { border-color: var(--terracota); outline-offset: 1px; }

/* ---- Totais e resumo ------------------------------------------------------ */

.woocommerce .cart-collaterals { margin-top: 3.5rem; }
.woocommerce .cart_totals,
.woocommerce-checkout #order_review {
	border-radius: 1.5rem;
	border: 1px solid var(--contorno);
	background: var(--cal);
	padding: 1.875rem;
	box-shadow: var(--shadow-warm-sm);
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3#order_review_heading {
	margin: 0 0 1.25rem;
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--tinta);
	text-transform: none;
}
.woocommerce .cart_totals table.shop_table th { text-align: left; }
.woocommerce .cart_totals tr.order-total th,
.woocommerce .cart_totals tr.order-total td {
	border-top: 1px solid rgb(var(--tinta-rgb) / .15);
	padding-top: 1.125rem;
}
.woocommerce .cart_totals tr.order-total .amount { font-size: 1.5rem; }

/* «(inclui 0,96 € IVA reduzido, 2,41 € IVA)» passa a nota por baixo do
   total, em letra de texto. Herdava o Fraunces e o tamanho do total, e
   lia-se como três totais seguidos. */
.woocommerce table.shop_table small.includes_tax,
.woocommerce table.shop_table small.tax_label {
	display: block;
	margin-top: .25rem;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--pedra);
}
.woocommerce table.shop_table small.includes_tax .amount,
.woocommerce .cart_totals tr.order-total small.includes_tax .amount {
	font-family: var(--font-body);
	font-size: inherit;
	font-weight: 600;
	letter-spacing: normal;
	color: var(--tinta-suave);
}

/* Todos os artigos desta loja são «vendidos individualmente»: não há
   quantidade para mudar. A coluna da quantidade ficava vazia, o preço e o
   subtotal diziam o mesmo número, e o «Actualizar carrinho» ficava
   desactivado para sempre. Só se escondem enquanto não houver nenhum campo de
   quantidade à vista, e voltam sozinhos no dia em que houver. */
/* O `table.cart` no seletor não é enfeite: sem ele, a regra do carrinho em
   telemóvel (lá em baixo, que põe todas as células em `display: block`) era
   mais específica e o preço aparecia duas vezes. */
.woocommerce-cart-form:not(:has(input.qty:not([type="hidden"]))) button[name="update_cart"],
.woocommerce-cart-form:not(:has(input.qty:not([type="hidden"]))) table.cart .product-quantity,
.woocommerce-cart-form:not(:has(input.qty:not([type="hidden"]))) table.cart .product-subtotal { display: none; }
/* Sem o subtotal, o preço passa a ser a última coluna e encosta à direita. */
.woocommerce-cart-form:not(:has(input.qty:not([type="hidden"]))) table.cart .product-price { padding-right: 0; text-align: right; }

/* ---- Cupão ---------------------------------------------------------------
   O sítio onde uma campanha se torna visível para quem compra. Fica desenhado
   como um campo a sério e não escondido num link. */

.woocommerce .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	margin-bottom: 1.5rem;
}
.woocommerce .coupon label { display: none; }
.woocommerce #coupon_code {
	width: auto;
	min-width: 12rem;
	flex: 1 1 12rem;
	height: 2.875rem;
	border: 1px solid rgb(var(--tinta-rgb) / .18);
	border-radius: 9999px;
	background: var(--cartao);
	padding: 0 1.25rem;
	font-family: var(--font-body);
	font-size: .9375rem;
	color: var(--tinta);
}
.woocommerce #coupon_code::placeholder { color: var(--pedra); opacity: 1; }
.woocommerce #coupon_code:focus { border-color: var(--terracota); }

/* ---- Formulários --------------------------------------------------------- */

.woocommerce form .form-row { padding: 0; margin: 0 0 1.25rem; }
.woocommerce form .form-row label {
	display: block;
	margin-bottom: .4375rem;
	font-size: .75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pedra);
}
.woocommerce form .form-row label .required {
	color: var(--terracota);
	text-decoration: none;
	border: 0;
}

/* O `textarea` das notas vem dentro de um `.woocommerce-input-wrapper` e não
   de um `.form-row`, por isso escapava a esta regra e ficava com o contorno
   escuro de 4px de raio do WooCommerce ao lado de campos claros de 12px.
   Os dois selectores a seguir apanham-no onde quer que ele esteja. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form textarea,
.woocommerce form .woocommerce-input-wrapper input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	min-height: 3rem;
	border: 1px solid rgb(var(--tinta-rgb) / .18);
	border-radius: .75rem;
	background: var(--cartao);
	padding: .8125rem 1rem;
	font-family: var(--font-body);
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--tinta);
	transition: border-color .25s ease;
	box-shadow: none;
}
.woocommerce form .form-row textarea,
.woocommerce form textarea { min-height: 7rem; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--terracota); outline-offset: 1px; }
.woocommerce form textarea::placeholder { color: var(--pedra); opacity: 1; }
.woocommerce form .form-row input.input-text::placeholder { color: var(--pedra); opacity: 1; }

.woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: #b3261e; }
.woocommerce form .form-row.woocommerce-validated input.input-text { border-color: rgb(var(--tinta-rgb) / .18); }

.woocommerce-checkout h3 {
	margin: 0 0 1.5rem;
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--tinta);
}

.woocommerce-checkout #customer_details { margin-bottom: 3rem; }

/* Select2, que o WooCommerce usa no país: alinhar com os outros campos. */
.woocommerce .select2-container--default .select2-selection--single {
	border-color: rgb(var(--tinta-rgb) / .18);
	border-radius: .75rem;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding-left: 0;
	color: var(--tinta);
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

/* ---- Caixas de aviso -----------------------------------------------------
   O WooCommerce manda três: message, info, error. Passam todas a ter a
   linguagem dos avisos do site — filete de terracota à esquerda, superfície
   recuada — em vez das três cores dele. */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .875rem 1.25rem;
	margin: 0 0 2rem;
	padding: 1.125rem 1.5rem;
	/* Era um filete de 3px em terracota só à esquerda. O contorno inteiro, fino
	   e na mesma cor, diz o mesmo sem a aba lateral, que é um aviso de outro
	   sistema: nesta identidade os cartões marcam-se com um fio a toda a
	   volta, não com uma pestana colorida de um lado. */
	border: 1px solid rgb(var(--terracota-rgb) / .35);
	border-radius: .75rem;
	background: rgb(var(--terracota-rgb) / .06);
	color: var(--tinta-suave);
	font-size: .9375rem;
	line-height: 1.7;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

/* O contorno é agora a toda a volta (ver acima), e por isso o erro pinta
   `border-color` e não `border-left-color`: a pintar só a esquerda, um aviso
   de erro ficava com o contorno de terracota dos avisos normais e perdia o
   único sinal que o distingue. */
.woocommerce-error {
	border-color: #b3261e;
	background: rgba(179,38,30,.05);
}
.woocommerce-error li { margin: 0; }

.woocommerce-message .button,
.woocommerce-info .button { margin-left: auto; }

/* O WooCommerce põe o foco no aviso para o leitor de ecrã o anunciar. O
   aviso não é um controlo, e o contorno de foco que aparecia à volta dele
   parecia uma caixa seleccionada. */
.woocommerce-message[tabindex="-1"]:focus,
.woocommerce-info[tabindex="-1"]:focus,
.woocommerce-error[tabindex="-1"]:focus { outline: none; }

/* ---- Meios de pagamento no checkout --------------------------------------
   Sem gateway ligado, o WooCommerce escreve aqui a sua frase seca sobre não
   haver métodos disponíveis. Fica desenhada como o resto e não como um erro,
   porque não é um erro: é o estado que esta demonstração existe para mostrar. */

/* O pagamento é uma secção da caixa da encomenda, separada por um filete, e
   não um cartão claro dentro do cartão claro. Com o cartão, e o aviso do
   WooCommerce dentro dele, os meios de pagamento ficavam a quatro caixas de
   fundo e com 191 px de largura num telemóvel de 390. */
.woocommerce-checkout #payment {
	border: 0;
	border-top: 1px solid rgb(var(--tinta-rgb) / .12);
	border-radius: 0;
	background: transparent;
	padding: 1.5rem 0 0;
	margin-top: 1.5rem;
}
.woocommerce-checkout #payment div.form-row { padding: 0; }
.woocommerce-checkout #payment ul.payment_methods .woocommerce-info {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid rgb(var(--tinta-rgb) / .12);
	padding: 0 0 1.25rem;
	margin: 0 0 1.25rem;
	list-style: none;
}
.woocommerce-checkout #payment ul.payment_methods li { margin: 0 0 .75rem; }
.woocommerce-checkout #payment ul.payment_methods label {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--tinta);
}
.woocommerce-checkout #payment div.payment_box {
	background: rgb(var(--cal-rgb) / .75);
	border-radius: .75rem;
	color: var(--tinta-suave);
	font-size: .875rem;
	line-height: 1.7;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment .woocommerce-privacy-policy-text,
.woocommerce-checkout #payment .wc-terms-and-conditions {
	font-size: .8125rem;
	line-height: 1.65;
	color: var(--tinta-suave);
}

/* ---- «Enviar para uma morada diferente?» ---------------------------------
   O WooCommerce mete esta pergunta dentro de um <h3>, com a caixa de selecção
   lá dentro. Com o estilo de título da loja, uma caixa de selecção passava a
   ler-se tão alto como «Detalhes de facturação» — que é a secção inteira. */

.woocommerce-checkout h3#ship-to-different-address {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin: 0 0 1rem;
	font-family: var(--font-body);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--tinta);
}
.woocommerce-checkout h3#ship-to-different-address label { margin: 0; cursor: pointer; }
.woocommerce-checkout h3#ship-to-different-address input[type="checkbox"] {
	width: 1.0625rem;
	height: 1.0625rem;
	accent-color: var(--terracota);
	cursor: pointer;
}

/* ---- A renúncia aos 14 dias ----------------------------------------------
   O ponto legal mais importante do checkout. Fica num painel próprio, com o
   filete de terracota, e não perdido entre a letra pequena — se passar
   despercebido, não cumpre a função que a lei lhe dá. */

.scf-renuncia {
	position: relative;
	overflow: hidden;
	margin: 0 0 1.5rem;
	padding: 1.375rem 1.5rem;
	border-radius: 1rem;
	background: rgb(var(--cal-rgb) / .9);
	box-shadow: inset 0 0 0 1px rgb(var(--terracota-rgb) / .28);
}
.scf-renuncia::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--argila), rgb(var(--argila-rgb) / 0));
}
.scf-renuncia-titulo {
	margin: 0 0 .875rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--terracota-fundo);
}
/* O `woocommerce_review_order_before_submit` dispara DENTRO de
   `<div class="form-row place-order">`. Sem estas linhas, a frase da renúncia
   herdava o estilo de etiqueta de campo do WooCommerce e saía inteira em
   maiúsculas espaçadas — ilegível, e ainda por cima no parágrafo que
   legalmente tem de ser compreendido. */
.scf-renuncia .consentimento,
.scf-renuncia .consentimento span {
	font-family: var(--font-body);
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tinta-suave);
}
.scf-renuncia .consentimento strong { font-weight: 700; color: var(--tinta); }
.scf-renuncia .consentimento a { color: var(--terracota); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Meios de pagamento no checkout --------------------------------------
   Substitui a frase a pedir desculpa do WooCommerce quando não há gateway. */

.scf-pagamentos { padding: .25rem 0; }
.scf-pagamentos-titulo {
	margin: 0 0 .625rem;
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--tinta);
}
.scf-pagamentos-nota {
	margin: 0 0 1.25rem;
	max-width: 34rem;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--tinta-suave);
}
.scf-pagamentos .loja-pag-item { border-bottom-color: rgb(var(--tinta-rgb) / .12); }

/* A lista de pagamentos do WooCommerce herda marcadores da folha dele. */
.woocommerce-checkout #payment ul.payment_methods.scf-vazio { padding: 0; }

/* ---- Encomenda recebida --------------------------------------------------- */

.woocommerce .woocommerce-order-overview {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin: 2.5rem 0;
	padding: 1.75rem;
	border-radius: 1.5rem;
	background: var(--cal);
	border: 1px solid var(--contorno);
	list-style: none;
}
.woocommerce .woocommerce-order-overview li {
	border: 0;
	padding: 0;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--terracota-fundo);
}
.woocommerce .woocommerce-order-overview li strong {
	display: block;
	margin-top: .375rem;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--tinta);
}

/* ---- Escala pequena ------------------------------------------------------- */

@media (max-width: 768px) {
	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td { padding: .875rem .5rem; }
	.woocommerce .cart_totals,
	.woocommerce-checkout #order_review { padding: 1.5rem; }
	.woocommerce .coupon { flex-direction: column; align-items: stretch; }
	.woocommerce .coupon button { width: 100%; }
	/* Em coluna, o `flex: 1 1 12rem` do campo passava a mandar na ALTURA: o
	   campo do cupão tinha 192 px e, com o raio de pílula, era uma oval. */
	.woocommerce .coupon #coupon_code { flex: 0 0 auto; width: 100%; min-width: 0; }

	/* As riscas cinzentas alternadas do WooCommerce em ecrã pequeno: dentro
	   da caixa dos totais eram uma faixa suja por trás do «Total». */
	.woocommerce table.shop_table_responsive tr:nth-child(2n) td { background-color: transparent; }

	/* ---- Carrinho em telemóvel ------------------------------------------
	   O WooCommerce parte cada linha em cinco faixas com rótulo («Produto:»,
	   «Preço:», «Quantidade:»...) e esconde a capa. Passa a ser uma linha
	   só: a capa, o nome e o preço por baixo, e o × à direita. A quantidade
	   e o subtotal, quando existirem, entram por baixo do preço. */
	.woocommerce table.shop_table_responsive.cart tr.cart_item {
		display: grid;
		grid-template-columns: 4rem minmax(0, 1fr) auto;
		grid-template-rows: auto 1fr auto auto;
		column-gap: 1rem;
		padding: 1.125rem 0;
		border-top: 1px solid rgb(var(--tinta-rgb) / .10);
	}
	.woocommerce table.shop_table_responsive.cart tr.cart_item:first-child { border-top: 0; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td {
		display: block;
		padding: 0;
		border: 0;
		background: transparent;
		text-align: left !important;
	}
	.woocommerce table.shop_table_responsive.cart tr.cart_item td::before { display: none; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-thumbnail { display: block; grid-column: 1; grid-row: 1 / 3; width: auto; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-name { grid-column: 2; grid-row: 1; align-self: start; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-price { grid-column: 2; grid-row: 2; align-self: start; margin-top: .375rem; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-quantity { grid-column: 2; grid-row: 3; margin-top: .75rem; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-subtotal { grid-column: 2; grid-row: 4; margin-top: .5rem; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-remove { grid-column: 3; grid-row: 1; align-self: start; margin-top: -.125rem; }
	.woocommerce table.shop_table_responsive.cart tr.cart_item td.product-name a { font-size: 1.0625rem; line-height: 1.3; }
}