/* ============================================================================
   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 latão 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(--azul);
	color: var(--cream);
	font-family: 'Open Sans', sans-serif;
	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(--azul-deep);
	color: var(--cream);
	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(--azul);
	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(--powder);
	color: var(--stone);
	box-shadow: none;
	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. */
.woocommerce button[name="update_cart"],
.woocommerce button[name="apply_coupon"] {
	background: transparent;
	border: 2px solid var(--ink);
	color: var(--ink);
	padding: .6875rem 1.5rem;
	box-shadow: none;
}
.woocommerce button[name="update_cart"]:hover,
.woocommerce button[name="apply_coupon"]:hover {
	background: var(--ink);
	color: var(--cream);
	box-shadow: none;
}

.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 rgba(41,36,44,.10);
	padding: 1.25rem .75rem;
	vertical-align: middle;
	color: var(--ink-soft);
	font-size: .9375rem;
}
.woocommerce table.shop_table thead th {
	border-top: 0;
	border-bottom: 1px solid rgba(41,36,44,.15);
	padding-bottom: .875rem;
	font-family: 'Open Sans', sans-serif;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--stone);
}
.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: 'Playfair Display', serif;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
	text-decoration: none;
}
.woocommerce table.shop_table td.product-name a:hover { color: var(--azul); }

.woocommerce table.shop_table td.product-thumbnail { width: 5rem; }
.woocommerce table.shop_table td.product-thumbnail img {
	width: 4.5rem;
	height: auto;
	border-radius: .5rem;
	background: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	box-shadow: var(--shadow-warm-sm);
}

.woocommerce table.shop_table .amount {
	font-family: 'Playfair Display', serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}

/* 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(--stone) !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 rgba(41,36,44,.18);
	border-radius: 9999px;
	background: #FFFFFF;
	text-align: center;
	font-family: 'Open Sans', sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--ink);
}
.woocommerce .quantity .qty:focus { border-color: var(--azul); 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 rgba(41,36,44,.08);
	background: var(--paper);
	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: 'Playfair Display', serif;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--ink);
	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 rgba(41,36,44,.15);
	padding-top: 1.125rem;
}
.woocommerce .cart_totals tr.order-total .amount { font-size: 1.5rem; }

/* ---- 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 rgba(41,36,44,.18);
	border-radius: 9999px;
	background: #FFFFFF;
	padding: 0 1.25rem;
	font-family: 'Open Sans', sans-serif;
	font-size: .9375rem;
	color: var(--ink);
}
.woocommerce #coupon_code::placeholder { color: var(--stone); opacity: 1; }
.woocommerce #coupon_code:focus { border-color: var(--azul); }

/* ---- 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(--stone);
}
.woocommerce form .form-row label .required {
	color: var(--azul);
	text-decoration: none;
	border: 0;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection--single {
	width: 100%;
	height: auto;
	min-height: 3rem;
	border: 1px solid rgba(41,36,44,.18);
	border-radius: .75rem;
	background: #FFFFFF;
	padding: .8125rem 1rem;
	font-family: 'Open Sans', sans-serif;
	font-size: .9375rem;
	line-height: 1.4;
	color: var(--ink);
	transition: border-color .25s ease;
	box-shadow: none;
}
.woocommerce form .form-row textarea { min-height: 7rem; }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus { border-color: var(--azul); outline-offset: 1px; }
.woocommerce form .form-row input.input-text::placeholder { color: var(--stone); 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: rgba(41,36,44,.18); }

.woocommerce-checkout h3 {
	margin: 0 0 1.5rem;
	font-family: 'Playfair Display', serif;
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -.03em;
	color: var(--ink);
}

.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: rgba(41,36,44,.18);
	border-radius: .75rem;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 1.4;
	padding-left: 0;
	color: var(--ink);
}
.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 latão à 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;
	border: 1px solid rgba(41,36,44,.10);
	border-top: 0;
	border-right: 0;
	border-bottom: 0;
	border-left: 3px solid var(--azul);
	border-radius: .75rem;
	background: rgba(138,109,51,.06);
	color: var(--ink-soft);
	font-size: .9375rem;
	line-height: 1.7;
	list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { display: none; }

.woocommerce-error {
	border-left-color: #b3261e;
	background: rgba(179,38,30,.05);
}
.woocommerce-error li { margin: 0; }

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

/* ---- 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. */

.woocommerce-checkout #payment {
	border-radius: 1.25rem;
	background: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	padding: 1.5rem;
	margin-top: 1.5rem;
}
.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid rgba(41,36,44,.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(--ink);
}
.woocommerce-checkout #payment div.payment_box {
	background: rgba(255,248,241,.75);
	border-radius: .75rem;
	color: var(--ink-soft);
	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(--ink-soft);
}

/* ---- «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: 'Open Sans', sans-serif;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: normal;
	color: var(--ink);
}
.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(--azul);
	cursor: pointer;
}

/* ---- A renúncia aos 14 dias ----------------------------------------------
   O ponto legal mais importante do checkout. Fica num painel próprio, com o
   filete de latão, 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: rgba(255, 248, 241, .9);
	box-shadow: inset 0 0 0 1px rgba(138, 109, 51, .28);
}
.scf-renuncia::before {
	content: '';
	position: absolute;
	inset: 0 auto auto 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, var(--brass), rgba(184, 149, 90, 0));
}
.scf-renuncia-titulo {
	margin: 0 0 .875rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--azul-deep);
}
/* 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: 'Open Sans', sans-serif;
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.7;
	letter-spacing: normal;
	text-transform: none;
	color: var(--ink-soft);
}
.scf-renuncia .consentimento strong { font-weight: 700; color: var(--ink); }
.scf-renuncia .consentimento a { color: var(--azul); 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: 'Playfair Display', serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
}
.scf-pagamentos-nota {
	margin: 0 0 1.25rem;
	max-width: 34rem;
	font-size: .875rem;
	line-height: 1.7;
	color: var(--ink-soft);
}
.scf-pagamentos .loja-pag-item { border-bottom-color: rgba(41, 36, 44, .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: linear-gradient(158deg, var(--ice) 0%, var(--powder) 100%);
	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(--azul-deep);
}
.woocommerce .woocommerce-order-overview li strong {
	display: block;
	margin-top: .375rem;
	font-family: 'Playfair Display', serif;
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: none;
	color: var(--ink);
}

/* ---- 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%; }
}