/* ── Cart, checkout, account ─────────────────────────── */
.cos-woo.woocommerce-cart,
.cos-woo.woocommerce-checkout,
.cos-woo.woocommerce-account { background: var(--paper); }
.cos-woo .woocommerce { padding: 24px var(--gutter) 80px; }

.cos-woo table.shop_table,
.cos-woo table.cart,
.cos-woo .cart-collaterals .cart_totals table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	background: transparent;
	margin: 0 0 32px;
}
.cos-woo table.shop_table th {
	font-family: var(--sans);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	text-align: left;
	padding: 16px 12px;
	border-bottom: 1px solid var(--line-strong);
	color: var(--stone);
	background: transparent;
}
.cos-woo table.shop_table td {
	padding: 20px 12px;
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink);
	background: transparent;
}
.cos-woo table.shop_table .product-name a {
	font-family: var(--sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}
.cos-woo table.shop_table .product-thumbnail img {
	width: 80px; height: 100px;
	object-fit: cover;
	background: var(--sand);
}
.cos-woo .product-remove a {
	color: var(--stone);
	font-family: var(--mono);
	font-size: 14px;
}
.cos-woo .product-remove a:hover { color: var(--ink); }

.cos-woo .cart-collaterals {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	margin-top: 16px;
}
@media (max-width: 720px) { .cos-woo .cart-collaterals { grid-template-columns: 1fr; } }
.cos-woo .cart_totals h2 {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 16px;
}
.cos-woo .cart_totals .order-total .amount { font-size: 18px; font-weight: 500; }

.cos-woo .checkout {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
}
@media (max-width: 960px) { .cos-woo .checkout { grid-template-columns: 1fr; } }
.cos-woo h3 {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
}

.cos-woo form .form-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
}
.cos-woo form .form-row label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-woo input[type="text"],
.cos-woo input[type="email"],
.cos-woo input[type="password"],
.cos-woo input[type="tel"],
.cos-woo input[type="number"],
.cos-woo textarea,
.cos-woo select {
	width: 100%;
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	border-radius: 0;
}
.cos-woo select {
	appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111' d='M0 0h10L5 6z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.cos-woo input:focus,
.cos-woo select:focus,
.cos-woo textarea:focus { outline: none; border-color: var(--ink); }

/* Select2 (Woo's country / state pickers) — bring in line with our inputs */
.cos-woo .select2-container .select2-selection--single,
.cos-woo .select2-container--default .select2-selection--single {
	height: 44px;
	border: 1px solid var(--line-strong);
	border-radius: 0;
	background: var(--paper);
	box-shadow: none;
	outline: none;
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 42px;
	padding: 0 36px 0 12px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.02em;
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--stone);
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 42px;
	width: 32px;
	right: 4px;
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__arrow b {
	border: 0;
	width: 10px;
	height: 6px;
	margin: -3px 0 0 -5px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23111' d='M0 0h10L5 6z'/></svg>") no-repeat center / contain;
}
.cos-woo .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--ink);
}
.cos-woo .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	transform: rotate(180deg);
}
.cos-woo .select2-container--default .select2-selection--single .select2-selection__clear {
	color: var(--stone);
	margin-right: 24px;
}

/* Dropdown panel */
.cos-woo .select2-container--default .select2-dropdown,
.select2-container--default .select2-dropdown {
	border: 1px solid var(--ink);
	border-radius: 0;
	background: var(--paper);
	box-shadow: var(--shadow-dropdown);
}
.cos-woo .select2-container--default .select2-search--dropdown,
.select2-container--default .select2-search--dropdown { padding: 8px; }
.cos-woo .select2-container--default .select2-search--dropdown .select2-search__field,
.select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--line-strong);
	background: var(--paper);
	padding: 8px 10px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	border-radius: 0;
	outline: none;
}
.cos-woo .select2-container--default .select2-search--dropdown .select2-search__field:focus,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--ink);
}
.cos-woo .select2-container--default .select2-results__option,
.select2-container--default .select2-results__option {
	padding: 10px 14px;
	font-family: var(--mono);
	font-size: 12px;
	color: var(--ink);
	letter-spacing: 0.02em;
	background: transparent;
}
.cos-woo .select2-container--default .select2-results__option--highlighted[aria-selected],
.cos-woo .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background: var(--ink);
	color: var(--paper);
}
.cos-woo .select2-container--default .select2-results__option[aria-selected="true"],
.cos-woo .select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
	background: var(--paper-soft);
	color: var(--ink);
}

.cos-woo #payment {
	background: transparent;
	border: 0;
	padding: 0;
}
.cos-woo #payment ul.payment_methods {
	padding: 0;
	margin: 0 0 16px;
	list-style: none;
	background: transparent;
}
.cos-woo #payment ul.payment_methods li {
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	background: transparent;
}
.cos-woo #payment ul.payment_methods li:last-child { border-bottom: 0; }
.cos-woo #payment label {
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 500;
}
.cos-woo #payment .payment_box {
	font-family: var(--mono);
	font-size: 12px;
	line-height: 1.6;
	padding: 12px 0 0;
	color: var(--ink-soft);
	background: transparent;
}
.cos-woo #place_order { width: 100%; margin-top: 12px; }

/* My Account navigation — estilos editoriais vivem agora no bloco
   "Painel da conta (cos-account*)" no fim deste ficheiro. */

/* ── Newsletter strip ─────────────────────────────────── */
/* Faixa escura que arranca o bloco de fecho da página: funde-se com o rodapé
   (também escuro) num único bloco, deixando a CTA clara "Descobre tudo na loja"
   isolada por cima — assim as duas secções deixam de parecer gémeas. */
.cos-newsletter {
	padding: clamp(64px, 8vw, 104px) var(--gutter) clamp(48px, 6vw, 72px);
	background: var(--ink);
	color: var(--paper);
	/* Hairline a separar a newsletter das colunas do rodapé dentro da faixa escura. */
	border-bottom: 1px solid var(--paper-15);
	/* Full-bleed, a par do footer: a faixa de fundo rompe o cap de 1800px da
	   .cos-shell. O conteúdo já é centrado (max-width 720), por isso basta o
	   fundo correr edge-to-edge — não precisa da fórmula de alinhamento. */
	width: 100vw;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.cos-newsletter__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.cos-newsletter__title {
	font-family: var(--sans);
	font-size: clamp(24px, 2.6vw, 36px);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--paper);
	margin-bottom: 14px;
}
.cos-newsletter__copy {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.65);
	max-width: 48ch;
	margin: 0 auto 26px;
	line-height: 1.6;
}
/* Label só para leitores de ecrã (oculto visualmente, mantém acessibilidade). */
.cos-newsletter .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
/* Formulário inline: campo de email + botão, com um ligeiro espaço entre eles. */
.cos-newsletter__form {
	display: flex;
	gap: 10px;
	max-width: 460px;
	margin: 0 auto;
}
/* Input: fundo da própria faixa (transparente), apenas uma border na cor de
   linha sobre fundo escuro do site (--paper-15, a mesma do divisor do rodapé).
   Texto branco em mono, igual ao tratamento dos inputs do resto do site.

   Prefixo .cos-shell .cos-newsletter (especificidade 0,3,0) para vencer a regra
   genérica `.cos-woo input[type="email"]` (0,2,1), que noutras páginas Woo (loja,
   produto, conta…) pintava este input de branco. A newsletter está no footer,
   dentro do <body class="cos-woo">, por isso herdava esse estilo. Assim o
   componente fica IGUAL em todo o site, como na home. */
.cos-shell .cos-newsletter .cos-newsletter__input {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	background: transparent;
	border: 1px solid var(--paper-15);
	border-radius: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 13px;
	padding: 15px 18px;
}
.cos-shell .cos-newsletter .cos-newsletter__input::placeholder { color: rgba(255, 255, 255, 0.45); }
/* Mesma especificidade reforçada no focus: vence também a regra global de focus
   em 10-utilities.css, que punha border-color: var(--ink) (invisível na faixa). */
.cos-shell .cos-newsletter .cos-newsletter__input:focus {
	outline: none;
	border-color: var(--paper);
}
/* Autofill: o Chrome insiste em pintar o campo. Forçamos a cor da faixa por baixo
   (--ink) e texto branco, para o input continuar a parecer transparente. */
.cos-shell .cos-newsletter .cos-newsletter__input:-webkit-autofill,
.cos-shell .cos-newsletter .cos-newsletter__input:-webkit-autofill:hover,
.cos-shell .cos-newsletter .cos-newsletter__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--paper);
	-webkit-box-shadow: 0 0 0 1000px var(--ink) inset;
	box-shadow: 0 0 0 1000px var(--ink) inset;
}
.cos-newsletter__cta.cta {
	flex: 0 0 auto;
	width: auto;
	white-space: nowrap;
	background: var(--paper);
	color: var(--ink);
	padding: 15px 28px;
}
.cos-newsletter__cta.cta:hover { background: var(--sand); }
@media (max-width: 540px) {
	/* Empilha campo + botão no telemóvel (mantém o mesmo gap). */
	.cos-newsletter__form { flex-direction: column; }
	.cos-newsletter__cta.cta { justify-content: center; }
}

/* Slot de integração por plugin (Customizer → Rodapé → shortcode). Damos aos
   inputs/botões do output do plugin (MC4WP, Brevo, Klaviyo…) o mesmo aspeto do
   nosso formulário na faixa escura, para a aparência ficar coerente sem editar
   o plugin. Prefixo .cos-shell .cos-newsletter para vencer o `.cos-woo input…`. */
.cos-newsletter__embed { max-width: 460px; margin: 0 auto; }
.cos-shell .cos-newsletter .cos-newsletter__embed input[type="email"],
.cos-shell .cos-newsletter .cos-newsletter__embed input[type="text"] {
	width: 100%;
	background: transparent;
	border: 1px solid var(--paper-15);
	border-radius: 0;
	color: var(--paper);
	font-family: var(--mono);
	font-size: 13px;
	padding: 15px 18px;
}
.cos-shell .cos-newsletter .cos-newsletter__embed input::placeholder { color: rgba(255, 255, 255, 0.45); }
.cos-shell .cos-newsletter .cos-newsletter__embed input:focus { outline: none; border-color: var(--paper); }
.cos-shell .cos-newsletter .cos-newsletter__embed input[type="submit"],
.cos-shell .cos-newsletter .cos-newsletter__embed button[type="submit"] {
	background: var(--paper);
	color: var(--ink);
	border: 0;
	border-radius: 0;
	font-family: var(--sans);
	font-size: 13px;
	letter-spacing: 0.2em;
	font-weight: 500;
	text-transform: uppercase;
	padding: 15px 28px;
	margin-top: 10px;
	cursor: pointer;
}
/* Mensagens de sucesso/erro dos plugins, legíveis na faixa escura. */
.cos-newsletter__embed .mc4wp-response,
.cos-newsletter__embed .wpcf7-response-output { color: var(--paper); margin-top: 12px; font-size: 13px; }

/* Safety: never let any container cause horizontal scroll */
img, video, iframe, table { max-width: 100%; }
.cos-shell > * { max-width: 100%; }

/* Default page (.cos-main--default) — give the article a horizontal gutter
   so titles and free-form content line up with the rest of the site
   (header nav, shop grid, footer). WC special pages (`cos-main--woo`) ship
   their own gutter via the .woocommerce wrapper, so they're excluded. */
.cos-main--default:not(.cos-main--woo) .cos-page-title,
.cos-main--default:not(.cos-main--woo) .cos-page__content {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}