/*
 * Mesato Core — personalização das páginas WooCommerce (cart, checkout, conta,
 * obrigado). Foco: checkout simples, sem ruído, com a identidade Mesato.
 * A cor da marca chega por --mst-brand (inline, da opção mesato_core_brand_color).
 */
.woocommerce-page {
	--mst-brand: #B0703E;
	--mst-brand-dark: #8a5630;
	--mst-ink: #2c2420;
	--mst-muted: #857c70;
	--mst-line: #e7ddcf;
	--mst-glass: rgba(255,255,255,.7);
}

/* 1) Layout: tira o sidebar e o ruído, conteúdo a toda a largura (Divi). */
body.woocommerce-checkout #sidebar,
body.woocommerce-cart #sidebar,
body.woocommerce-account #sidebar,
body.woocommerce-order-received #sidebar,
body.woocommerce-page #sidebar {
	display: none !important;
}
body.woocommerce-checkout #left-area,
body.woocommerce-cart #left-area,
body.woocommerce-account #left-area,
body.woocommerce-order-received #left-area,
body.woocommerce-page #left-area {
	width: 100% !important;
	max-width: 920px;
	margin: 0 auto;
	float: none !important;
	padding: 0 !important;
}
/* Divisor vertical do Divi (desenhado na fronteira do sidebar) — remover. */
body.woocommerce-page #main-content .container::before,
body.woocommerce-page #main-content .container::after {
	display: none !important;
	content: none !important;
}
/* Carrinho: totais alinhados à direita, sem o layout de duas colunas. */
body.woocommerce-cart .cart-collaterals { width: 100%; }
body.woocommerce-cart .cart-collaterals .cart_totals {
	width: 420px;
	max-width: 100%;
	float: none;
	margin-left: auto;
}

/* 2) Tipografia / espaçamento dos títulos. */
.woocommerce-page #left-area > .entry-title,
.woocommerce-page .entry-title {
	font-size: 30px;
	margin-bottom: 22px;
}
.woocommerce h3, .woocommerce-checkout h3 { font-size: 19px; }

/* 3) Cupão discreto (em vez do banner azul gigante). */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 0 6px;
	color: var(--mst-muted);
	font-size: 13px;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before { display: none; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
	color: var(--mst-brand-dark);
	text-decoration: underline;
	font-weight: 600;
}

/* 4) Campos do formulário — limpos e consistentes. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-checkout .select2-container .select2-selection {
	border: 1px solid var(--mst-line);
	border-radius: 12px;
	padding: 14px 16px;
	min-height: 52px;
	background: #fff;
	box-shadow: none;
	font-size: 16px;
}
.woocommerce form .form-row label { font-weight: 600; font-size: 14px; color: var(--mst-ink); }
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--mst-brand);
	outline: none;
	box-shadow: 0 0 0 3px color-mix( in srgb, var(--mst-brand) 22%, transparent );
}

/* 5) Caixa de revisão da encomenda (glass card). */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
	background: var(--mst-glass);
	border: 1px solid var(--mst-line);
	border-radius: 16px;
	padding: 18px 20px;
}
.woocommerce-checkout #order_review_heading { margin-top: 0; }

/* 6) Botões com a cor da marca. */
.woocommerce-page .button,
.woocommerce-page button.button,
.woocommerce #place_order,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	background: var(--mst-brand) !important;
	color: #fff !important;
	border-radius: 11px !important;
	font-weight: 700 !important;
	padding: 13px 22px !important;
	border: 0 !important;
	text-shadow: none !important;
}
.woocommerce-page .button:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
	background: var(--mst-brand-dark) !important;
}

/* 7) Seletor de tipo de encomenda (Order_Context) — alinhado à marca. */
.mst-oc-types { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.mst-oc-type { border: 1px solid var(--mst-line); border-radius: 11px; padding: 11px 16px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; background: #fff; }
.mst-oc-type:has(input:checked) { border-color: var(--mst-brand); background: rgba(176,112,62,.08); color: var(--mst-brand-dark); }
.mst-oc-field { margin-bottom: 12px; }

/* 8) Esconde a morada quando NÃO é entrega (classe posta pelo storefront.js). */
body:not(.mst-co-delivery) #billing_address_1_field,
body:not(.mst-co-delivery) #billing_address_2_field,
body:not(.mst-co-delivery) #billing_city_field,
body:not(.mst-co-delivery) #billing_postcode_field,
body:not(.mst-co-delivery) #billing_state_field,
body:not(.mst-co-delivery) #billing_country_field,
body:not(.mst-co-delivery) #billing_company_field {
	display: none !important;
}

/* 9) Limpeza geral. */
.woocommerce-page .woocommerce-additional-fields { margin-top: 6px; }
.woocommerce-checkout .woocommerce-billing-fields h3 { margin-bottom: 12px; }

/*
 * 10) Reforço de especificidade (o Divi estiliza os campos do checkout com
 * regras próprias mais específicas; estas vencem-nas). Visual alinhado ao
 * formulário de reservas: campos brancos, arredondados, com a cor da marca.
 */
body.woocommerce-checkout .woocommerce form .form-row input.input-text,
body.woocommerce-checkout .woocommerce form .form-row textarea,
body.woocommerce-checkout .woocommerce form .form-row select,
body.woocommerce-checkout .woocommerce-checkout input.input-text,
body.woocommerce-checkout .woocommerce-checkout textarea {
	background: #fff !important;
	border: 1px solid var(--mst-line) !important;
	border-radius: 11px !important;
	padding: 13px 14px !important;
	box-shadow: none !important;
	color: var(--mst-ink) !important;
	font-size: 15px !important;
}
body.woocommerce-checkout .woocommerce form .form-row input.input-text:focus,
body.woocommerce-checkout .woocommerce form .form-row textarea:focus {
	border-color: var(--mst-brand) !important;
	box-shadow: 0 0 0 3px rgba(176, 112, 62, .14) !important;
	outline: none !important;
}
body.woocommerce-checkout .woocommerce form .form-row label {
	font-weight: 600 !important;
	font-size: 13.5px !important;
	color: var(--mst-ink) !important;
}

/* Caixa "Como queres a tua encomenda?" e "Os teus dados" — cartões com respiro. */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	background: var(--mst-glass);
	border: 1px solid var(--mst-line);
	border-radius: 16px;
	padding: 22px 22px 8px;
	margin-bottom: 18px;
}
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-additional-fields h3,
.woocommerce-checkout #order_review_heading {
	font-size: 19px;
	margin: 0 0 16px;
}

/* Caixa de pagamento — fora do cinzento default do WooCommerce. */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods {
	background: transparent !important;
	border: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 0 8px !important;
	border-bottom: 1px solid var(--mst-line) !important;
}
.woocommerce-checkout #payment div.payment_box {
	background: rgba(176, 112, 62, .06) !important;
	border-radius: 11px !important;
	color: var(--mst-muted) !important;
	font-size: 13.5px !important;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(176, 112, 62, .06) !important; }
.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: 12.5px;
	color: var(--mst-muted);
}

/* Cupão discreto — link pequeno, sem o banner azul gigante. */
.woocommerce-checkout .checkout_coupon { border-radius: 12px; border: 1px solid var(--mst-line); }
.woocommerce-checkout .woocommerce-form-coupon-toggle { margin-bottom: 14px; }

/*
 * 11) Notas do WooCommerce (info/aviso/mensagem). O Divi pinta-as com a sua
 * "accent color" como FUNDO — e como a Marca sincroniza o accent com a cor
 * primária, ficavam caixas castanhas sólidas. Aqui devolvemos um estilo
 * discreto e branded (vence o Divi por especificidade + !important).
 */
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-error,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message {
	background: #fbf6f0 !important;
	color: var(--mst-ink) !important;
	border: 1px solid var(--mst-line) !important;
	border-left: 3px solid var(--mst-brand) !important;
	border-radius: 11px !important;
	box-shadow: none !important;
}
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-error::before { color: var(--mst-brand) !important; }
.woocommerce-page .woocommerce-info a,
.woocommerce-page .woocommerce-message a { color: var(--mst-brand-dark) !important; }

/* Toggles de cupão e de login: link discreto, sem caixa. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 0 6px !important;
	margin: 0 0 8px !important;
	color: var(--mst-muted) !important;
	font-size: 13px !important;
}
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a {
	color: var(--mst-brand-dark) !important;
	text-decoration: underline;
	font-weight: 600;
}

/*
 * 12) "Encomenda recebida" — bloco de resumo (nº, data, email, total, método).
 * Por defeito o WooCommerce alinha os <li> em colunas com separadores tracejados,
 * o que fica apertado e ilegível em telemóvel. Transformamos num cartão glass com
 * linhas espaçadas (label + valor) que empilham em mobile.
 */
.woocommerce-page ul.woocommerce-order-overview.order_details,
.woocommerce-page ul.order_details {
	display: block !important;
	list-style: none !important;
	margin: 0 0 30px !important;
	padding: 4px 0 !important;
	background: var(--mst-glass) !important;
	border: 1px solid var(--mst-line) !important;
	border-radius: 14px !important;
	overflow: hidden;
}
.woocommerce-page ul.woocommerce-order-overview.order_details li,
.woocommerce-page ul.order_details li {
	float: none !important;
	width: auto !important;
	border: 0 !important;
	border-bottom: 1px solid var(--mst-line) !important;
	margin: 0 !important;
	padding: 13px 18px !important;
	font-size: 14.5px !important;
	letter-spacing: 0;
	text-transform: none;
	color: var(--mst-muted) !important;
	font-family: Inter, system-ui, -apple-system, sans-serif !important;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	line-height: 1.35;
}
.woocommerce-page ul.woocommerce-order-overview.order_details li:last-child,
.woocommerce-page ul.order_details li:last-child { border-bottom: 0 !important; }
.woocommerce-page ul.woocommerce-order-overview.order_details li strong,
.woocommerce-page ul.order_details li strong {
	display: inline-block;
	font-size: 15px !important;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 700;
	color: var(--mst-ink) !important;
	text-align: right;
}

@media (max-width: 600px) {
	.woocommerce-page ul.woocommerce-order-overview.order_details li,
	.woocommerce-page ul.order_details li {
		flex-direction: column;
		align-items: flex-start;
		gap: 3px;
		padding: 12px 16px !important;
	}
	.woocommerce-page ul.woocommerce-order-overview.order_details li strong,
	.woocommerce-page ul.order_details li strong { text-align: left; }
}

/*
 * 13) DESIGN SYSTEM — tabelas de info das páginas de encomenda e conta.
 * Vale para qualquer página onde estes blocos aparecem (obrigado / ver encomenda
 * / conta): resumo, detalhes da encomenda, contexto Mesato e morada partilham a
 * mesma linguagem — cartão glass, fonte Inter, caixa normal (sem maiúsculas
 * dispersas), títulos com respiro. Scoping por container (não por página) para
 * ser reutilizável. A morada de faturação só faz sentido na entrega.
 */

/* Títulos de secção coerentes e com respiro (resolve o "muito junto"). */
.woocommerce-order-details .woocommerce-order-details__title,
.woocommerce-customer-details .woocommerce-column__title,
.mst-order-context-summary h2 {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 25px !important;
	font-weight: 700 !important;
	margin: 36px 0 14px !important;
	color: var(--mst-ink) !important;
}

/* Tabelas de info como cartões glass (detalhes da encomenda + contexto Mesato). */
.woocommerce-order-details table.shop_table,
.mst-order-context-summary table {
	border: 1px solid var(--mst-line) !important;
	border-radius: 14px !important;
	overflow: hidden;
	background: var(--mst-glass) !important;
	font-family: Inter, system-ui, -apple-system, sans-serif !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	width: 100%;
}
.woocommerce-order-details table.shop_table th,
.woocommerce-order-details table.shop_table td,
.mst-order-context-summary table th,
.mst-order-context-summary table td {
	border: 0 !important;
	border-bottom: 1px solid var(--mst-line) !important;
	padding: 13px 18px !important;
	font-size: 14.5px !important;
	color: var(--mst-ink) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.woocommerce-order-details table.shop_table tr:last-child th,
.woocommerce-order-details table.shop_table tr:last-child td,
.mst-order-context-summary table tr:last-child th,
.mst-order-context-summary table tr:last-child td { border-bottom: 0 !important; }
/* Labels (coluna esquerda) discretas; valores em tom de tinta. */
.mst-order-context-summary table th { color: var(--mst-muted) !important; font-weight: 600 !important; }

/* Morada de faturação: mesmo cartão glass (quando aparece, i.e. entrega). */
.woocommerce-customer-details address {
	border: 1px solid var(--mst-line) !important;
	border-radius: 14px !important;
	background: var(--mst-glass) !important;
	padding: 16px 18px !important;
	font-family: Inter, system-ui, -apple-system, sans-serif !important;
	font-size: 14.5px !important;
	color: var(--mst-ink) !important;
	font-style: normal !important;
	line-height: 1.7;
}

/* Sem morada: esconde o bloco de faturação no levantamento / na mesa. */
body.mst-otype-takeaway .woocommerce-customer-details,
body.mst-otype-dine_in .woocommerce-customer-details { display: none !important; }

/*
 * 14) Cesto com itens — tabela + totais como cartões glass (design system).
 * Mesmo vocabulário visual do checkout e da página de obrigado.
 */
.woocommerce-cart .woocommerce-cart-form table.cart,
.woocommerce-cart .cart_totals table.shop_table {
	border: 1px solid var(--mst-line) !important;
	border-radius: 16px !important;
	overflow: hidden;
	background: var(--mst-glass) !important;
	font-family: Inter, system-ui, -apple-system, sans-serif !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}
.woocommerce-cart .woocommerce-cart-form table.cart th,
.woocommerce-cart .woocommerce-cart-form table.cart td,
.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	border: 0 !important;
	border-bottom: 1px solid var(--mst-line) !important;
	padding: 16px 18px !important;
	font-size: 14.5px !important;
	color: var(--mst-ink) !important;
	background: transparent !important;
}
.woocommerce-cart .woocommerce-cart-form table.cart thead th {
	font-size: 12px !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--mst-muted) !important;
	font-weight: 600 !important;
}
.woocommerce-cart .cart_totals h2 {
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-size: 24px !important;
	margin: 0 0 14px !important;
}
.woocommerce-cart .woocommerce-cart-form table.cart tr:last-child td {
	border-bottom: 0 !important;
	background: rgba(255, 255, 255, .4) !important;
}
.woocommerce-cart .product-thumbnail img {
	border-radius: 10px !important;
	width: 56px !important;
	height: 56px !important;
	object-fit: cover;
}
.woocommerce-cart td.product-name a { color: var(--mst-ink) !important; font-weight: 600; text-decoration: none; }
.woocommerce-cart td.product-remove a.remove {
	color: var(--mst-muted) !important;
	border: 1px solid var(--mst-line) !important;
	background: #fff !important;
}
.woocommerce-cart td.product-remove a.remove:hover { color: #b3261e !important; border-color: #b3261e !important; background: #fff !important; }
.woocommerce-cart .quantity input.qty {
	border: 1px solid var(--mst-line) !important;
	border-radius: 10px !important;
	min-height: 44px;
	background: #fff !important;
}
/* Botão de cupão discreto na linha de ações do cesto. */
.woocommerce-cart table.cart td.actions .coupon .button { border-radius: 10px !important; }