/*
Theme Name: HeadShot
Theme URI: https://headshot.pt
Description: Tema da loja HeadShot, child theme do Blocksy.
Author: HeadShot
Template: blocksy
Version: 0.1.0
Requires PHP: 8.0
Text Domain: headshot
*/

/* Tokens

   As cores e a tipografia não estão escritas aqui. Estão nas opções do
   Blocksy (Aparência → Personalizar), que é onde uma pessoa as vai mudar.
   O Blocksy publica-as como --theme-palette-color-1..8; este ficheiro só
   lhes dá nomes com significado para o resto do CSS do projeto.

   Mexer numa cor: Personalizar → Cores → Paleta global. Nunca aqui.
*/

:root {
	/* A "System Default" do Blocksy passa a ser a pilha do POC. */
	--theme-font-stack-default: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	--hs-ink: var(--theme-palette-color-1);    /* #000000, acento e links   */
	--hs-cinza: var(--theme-palette-color-2);  /* #737373, texto secundário */
	--hs-linha: var(--theme-palette-color-5);  /* #E5E5E5, bordas           */
	--hs-card: var(--theme-palette-color-6);   /* #F3F3F3, fundo de card    */
	--hs-fundo: var(--theme-palette-color-8);  /* #FFFFFF, página           */

	/* Fora da paleta de 8 do Blocksy: estados de produto. */
	--hs-novo: #0a8f3c;
	--hs-promo: #d62828;

	/* Margem lateral do POC (px-4 / lg:px-10). O contentEdgeSpacing do
	   Blocksy só aceita vw, por isso a medida em px vive aqui. */
	--hs-edge: 16px;
}

@media (min-width: 1024px) {
	:root {
		--hs-edge: var(--hs-cab-margem, 40px);
	}
}

/* Fundações, tiradas de poc/ref-carhartt/*.html */

::selection {
	background: var(--hs-ink);
	color: var(--hs-fundo);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--hs-ink);
	outline-offset: 2px;
}

/* Escala tipográfica

   Os mesmos valores que o Customizer aplica aos h1–h6 e ao corpo, aqui
   como classes, para o texto que não é título: nav, nome de produto,
   preço, legais. Nomes iguais aos do POC.
*/

.t11 {
	font-size: 11px;
	line-height: 1.4;
	font-weight: 400;
}

.t14 {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 700;
}

.t14r {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 400;
}

.t20 {
	font-size: 20px;
	line-height: 1.4;
	font-weight: 700;
}

.t48 {
	font-size: 32px;
	line-height: 1.1;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.t48 {
		font-size: 48px;
	}
}

.txt-cinza {
	color: var(--hs-cinza);
}

/* Movimento, com as durações e curvas do POC */

.btn,
.wp-element-button,
.wc-block-components-button,
[data-products] .ct-woo-card-actions .button {
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease,
		transform 0.12s ease;
}

.btn:active,
.wp-element-button:active,
[data-products] .ct-woo-card-actions .button:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Cabeçalho

   Marcação nossa, em inc/cabecalho.php. A navegação é o menu do lugar
   Principal, a marca vem da Identidade do site. */

/* A barra fica colada ao topo, como no POC; na página inicial passa a fixa,
   sobre o hero, mais abaixo. */
.hs-cab {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--hs-cab-fundo, #fff);
	color: var(--hs-cab-tinta, #000);
	box-shadow: 0 1px 0 var(--hs-linha);
}

.hs-cab-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: var(--height, 49px); /* --height vem do Design do Blocksy */
	padding-inline: var(--hs-edge);
}

.hs-cab-lado {
	display: flex;
	align-items: center;
	gap: 32px;
}

.hs-cab-direita {
	gap: 24px;
}

.hs-marca {
	display: flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.hs-marca-sinal {
	width: var(--hs-cab-sinal, 24px);
	height: var(--hs-cab-sinal, 24px);
	object-fit: contain;
}

.hs-marca-nome {
	font-size: var(--hs-cab-marca, 17px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.025em;
}

.hs-nav-lista,
.hs-menu-movel-lista {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-nav-lista a,
.hs-cab-link,
.hs-menu-movel-lista a {
	font-size: var(--hs-cab-texto, 14px);
	font-weight: 700;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
}

.hs-nav-lista a:hover,
.hs-cab-link:hover,
.hs-menu-movel-lista a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* A pesquisa é um botão que abre a janela, mas lê-se como os links ao lado. */
button.hs-cab-link {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
}

/* A janela de pesquisa.
   É a do Blocksy, com o formulário e os resultados ao vivo dele, desenhada
   com a loja por cima: fundo branco, o campo com uma linha por baixo e os
   resultados em lista, com a foto, o nome e o preço. As cores entram pelas
   variáveis que o tema-base lê. Vale tanto para a janela do nosso elemento
   como para a do Search do Blocksy, que sem isto sai sem fundo, porque o
   CSS dele está preso ao cabeçalho dele. Os selectores levam o id porque é
   com ele que o Blocksy escreve os dele. */
#search-modal {
	--theme-icon-color: var(--hs-ink);
	--theme-icon-hover-color: var(--hs-cinza);
	--theme-link-initial-color: var(--hs-ink);
	--theme-link-hover-color: var(--hs-ink);
	--theme-form-text-initial-color: var(--hs-ink);
	--theme-form-text-focus-color: var(--hs-ink);
	--theme-form-field-border-width: 0;
	--theme-form-max-width: 800px;
	--panel-padding: var(--hs-edge);
	--vertical-alignment: flex-start;
	background: var(--hs-fundo);
	color: var(--hs-ink);
}

/* O x fica onde a barra tem o carrinho, à mesma altura. */
#search-modal .ct-panel-actions {
	justify-content: flex-end;
	min-height: 49px;
	padding-block: 0;
	box-shadow: 0 1px 0 var(--hs-linha);
}

#search-modal .ct-toggle-close {
	--theme-icon-color: var(--hs-ink);
}

#search-modal .ct-panel-content {
	overflow-y: auto;
	padding-block: 48px;
}

#search-modal .ct-search-form {
	--theme-form-font-size: 32px;
	--theme-form-field-height: 64px;
	--theme-button-text-initial-color: var(--hs-ink);
	--theme-button-text-hover-color: var(--hs-cinza);
	--theme-button-background-initial-color: transparent;
	--theme-button-background-hover-color: transparent;
}

#search-modal .ct-search-form-inner {
	--theme-form-inner-spacing: 0;
	margin-bottom: 32px;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--hs-linha);
	border-radius: 0;
	outline: 0;
	background: none;
}

#search-modal .ct-search-form-inner:has(input:focus) {
	border-bottom-color: var(--hs-ink);
}

#search-modal .ct-search-form input[type="search"] {
	padding: 0;
	font-size: var(--theme-form-font-size);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

#search-modal .ct-search-form input[type="search"]::placeholder {
	color: var(--hs-cinza);
	opacity: 1;
}

#search-modal .ct-search-form input[type="search"]:focus-visible {
	outline: 0;
}

/* Uma coluna, como a lista do carrinho; a foto é o quadrado do cartão. */
#search-modal .ct-panel-content .ct-search-results {
	grid-template-columns: 1fr;
	gap: 0;
	--items-spacing: 16px;
}

#search-modal .ct-panel-content .ct-search-results a {
	padding-block: 12px;
	border-bottom: 1px solid var(--hs-linha);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

#search-modal .ct-panel-content .ct-search-results a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

#search-modal .ct-panel-content .ct-search-results .ct-media-container {
	--search-image-size: 56px;
	--search-image-radius: 0;
	background: var(--hs-card);
}

#search-modal .ct-panel-content .ct-search-results .product-search-meta small {
	font-size: 14px;
	font-weight: 400;
	color: var(--hs-cinza);
}

#search-modal .ct-panel-content .ct-search-results .ct-search-more {
	justify-content: flex-start;
	border-bottom: 0;
	color: var(--hs-cinza);
}

@media (max-width: 1023.98px) {
	#search-modal .ct-search-form {
		--theme-form-font-size: 24px;
		--theme-form-field-height: 48px;
	}

	#search-modal .ct-panel-content {
		padding-block: 32px;
	}
}

.hs-carrinho {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* A bolha do contador inverte-se com o estado da barra: é da cor do texto, com
   o número da cor do fundo. */
.hs-contador {
	display: grid;
	place-items: center;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--hs-ink);
	color: var(--hs-fundo);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.hs-menu-botao {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* O painel abre debaixo da barra, com uma linha a separá-lo dela. Ao abrir, a
   barra fica sempre branca, por isso as linhas são as do resto da loja e não a
   cor do texto. */
.hs-menu-movel {
	border-top: 1px solid var(--hs-linha);
	padding-inline: var(--hs-edge);
}

.hs-menu-movel-lista {
	flex-direction: column;
	gap: 0;
}

.hs-menu-movel-lista a {
	display: block;
	padding: 12px 0;
	border-bottom: 1px solid var(--hs-linha);
}

/* A última entrada fecha o painel sem linha, como no POC. */
.hs-menu-movel-lista li:last-child a {
	border-bottom: 0;
}

.hs-cab-ecra[data-ecra="mobile"] {
	display: none;
}

@media (max-width: 1023px) {
	.hs-cab-ecra[data-ecra="desktop"] {
		display: none;
	}

	.hs-cab-ecra[data-ecra="mobile"] {
		display: block;
	}

	.hs-nav,
	.hs-so-grande {
		display: none;
	}

	.hs-menu-botao {
		display: block;
	}
}

/* Telemóvel a sério: ficam o menu, a marca e o carrinho. A pesquisa e a
   sessão só se lêem a partir dos 640, que é onde o POC as acende. */
@media (max-width: 639.98px) {
	.hs-cab-ecra[data-ecra="mobile"] [data-id="headshot-pesquisa"],
	.hs-cab-ecra[data-ecra="mobile"] [data-id="headshot-botao"],
	.hs-cab-ecra[data-ecra="mobile"] [data-id="headshot-conta"],
	.hs-cab-ecra[data-ecra="mobile"] [data-id="search"],
	.hs-cab-ecra[data-ecra="mobile"] [data-id="button"] {
		display: none;
	}
}

.hs-cab-widgets {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
	line-height: 1.4;
}

/* Na página inicial a barra fica por cima do hero, transparente, e passa a
   branca com o rato em cima, com foco de teclado ou depois de o hero sair do
   ecrã. Nunca fica preta. */

body.home .hs-cab[data-transparente="sim"] {
	/* Curta e a chegar cedo: o fundo vai de transparente a branco por alfa
	   sobre uma foto escura, e com uma curva lenta ao início parecia ficar
	   atrás do texto, mesmo andando ao mesmo tempo. */
	--hs-cab-mudanca: 0.15s ease-out;

	position: fixed;
	inset: 0 0 auto 0;
	background: transparent;
	color: var(--hs-cab-tinta-hero, #fff);
	box-shadow: none;
	transition: background-color var(--hs-cab-mudanca), color var(--hs-cab-mudanca),
		box-shadow var(--hs-cab-mudanca);

	/* O nome da marca é pintado pelo Blocksy, que lê esta variável. Damos-lhe
	   a tinta do hero para o nome acompanhar o resto da barra. */
	--theme-link-initial-color: var(--hs-cab-tinta-hero, #fff);
}

/* Quem herda a cor da barra acompanha-a quadro a quadro, e por isso não pode
   ter transição própria: o Blocksy dá "all 0.12s" aos links e à marca, e com
   ela ficavam a perseguir uma cor que já estava a mudar, chegando atrasados. */
body.home .hs-cab[data-transparente="sim"] *:not(.site-title):not(.hs-contador) {
	transition: none;
}

/* Estes dois não herdam: o nome da marca é pintado pela variável do Blocksy,
   que muda de golpe, e o contador tem cores próprias. Levam a transição da
   barra, para arrancarem e chegarem com ela. */
body.home .hs-cab[data-transparente="sim"] .site-title,
body.home .hs-cab[data-transparente="sim"] .hs-contador {
	transition: background-color var(--hs-cab-mudanca), color var(--hs-cab-mudanca);
}

body.home .hs-cab[data-transparente="sim"][data-estado="branco"] {
	background: var(--hs-cab-fundo, #fff);
	color: var(--hs-cab-tinta, #000);
	box-shadow: 0 1px 0 var(--hs-linha);
	--theme-link-initial-color: var(--hs-cab-tinta, #000);
}

/* O logótipo tem duas versões: a do costume e a que se lê sobre o hero. A que
   está a mais fica escondida, sem sair da marcação. */
.hs-marca-sinal[data-estado] {
	display: none;
}

.hs-cab[data-estado="branco"] .hs-marca-sinal[data-estado="branco"],
.hs-cab[data-estado="transp"] .hs-marca-sinal[data-estado="transp"] {
	display: inline-block;
}

body.home .hs-cab[data-transparente="sim"][data-estado="transp"] .hs-contador {
	background: #fff;
	color: #000;
}

/* Grelha da loja

   A composição do cartão é do construtor, em Personalizar, WooCommerce. Aqui
   fica só o aspecto do POC: nome a negrito, cor e preço em texto normal e
   cinzento, tudo a catorze. */

.woocommerce-loop-product__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

[data-products] .entry-meta,
[data-products] .price {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
	text-transform: none;
	letter-spacing: 0;
}

[data-products] .entry-meta a,
[data-products] .price {
	color: var(--hs-cinza);
}

[data-products] .entry-meta a {
	text-decoration: none;
}

[data-products] .entry-meta a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* A segunda foto entra devagar, como no POC. */
[data-products] .ct-media-container img:last-child {
	transition: opacity 0.35s ease;
}

/* O botão de compra do cartão, quando uma grelha o pede: o do carrinho no
   POC, a 50 de altura, com linha à volta e de ponta a ponta do cartão, 16
   abaixo do preço. Ao passar o rato só o fundo muda, para o cinzento do
   cartão; a linha fica. */
[data-products] .ct-woo-card-actions {
	margin-top: 16px;
}

[data-products] .ct-woo-card-actions .button {
	display: flex;
	width: 100%;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border: 1px solid var(--hs-linha);
	border-radius: 0;
	background: var(--hs-fundo);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-ink);
	text-align: center;
	text-decoration: none;
}

[data-products] .ct-woo-card-actions .button:hover,
[data-products] .ct-woo-card-actions .button:focus-visible {
	border-color: var(--hs-linha);
	background: var(--hs-card);
	color: var(--hs-ink);
}

/* A loja

   Marcação do Blocksy. Aqui fica o aspecto do POC: de ponta a ponta com a
   margem do costume, o título grande, e a descrição em cinzento e curta de
   medida, para se ler numa vista de olhos.

   A largura de ponta a ponta não tem opção no painel — a do Blocksy é global e
   vale para as páginas de texto, onde uma medida curta se lê melhor. Por isso
   fica aqui, só para a loja. */

.woocommerce-shop .ct-container,
.tax-product_cat .ct-container,
.tax-product_tag .ct-container {
	/* A caixa do Blocksy é uma percentagem do ecrã, centrada. Aqui vai de
	   ponta a ponta, e a margem é a mesma do cabeçalho e do rodapé. */
	width: 100%;
	max-width: none;
	padding-inline: var(--hs-edge);
}

/* A faixa do título traz uma medida própria por dentro da caixa:
   width e max-width, e não só max-width. */
.woocommerce-shop .hero-section.is-width-constrained,
.tax-product_cat .hero-section.is-width-constrained,
.tax-product_tag .hero-section.is-width-constrained {
	width: 100%;
	max-width: none;
}

.hero-section[data-type="type-1"] .page-title {
	max-width: 12ch;
	margin: 0;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.woocommerce-shop [data-products],
.tax-product_cat [data-products],
.tax-product_tag [data-products] {
	margin-top: 0;
}

/* A descrição tanto vem em parágrafos, da página da loja, como em texto solto,
   na pesquisa sem resultados; a letra vai na caixa para servir aos dois. */
.hero-section[data-type="type-1"] .page-description {
	max-width: 46ch;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hero-section[data-type="type-1"] .page-description p {
	margin: 0;
}

@media (min-width: 768px) {
	.hero-section[data-type="type-1"] .page-title {
		font-size: 60px;
	}
}

@media (min-width: 1024px) {
	.hero-section[data-type="type-1"] .page-title {
		font-size: 80px;
	}
}

/* Barra de filtros da loja

   Marcação do plugin, em inc/filtros. Pílulas com painel ancorado, e por baixo
   o que está aplicado, à maneira do POC. */

.hs-filtros {
	/* A barra sai dentro da caixa que o Blocksy põe antes da grelha, e essa
	   encolhe-se ao conteúdo. Sem isto o "Ordenar" não chega à direita. */
	flex: 1 1 100%;
	width: 100%;
	margin-bottom: 30px;
}

/* A caixa do Blocksy separa-se da grelha por 25, com :not(:empty). O espaço
   passa a ser o da barra, para haver um número só a mandar. */
.woocommerce-shop .woo-listing-top:not(:empty),
.tax-product_cat .woo-listing-top:not(:empty),
.tax-product_tag .woo-listing-top:not(:empty) {
	display: block;
	margin-bottom: 0;
}

.hs-filtros-linha {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.hs-filtros-tiras {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 8px;
}

.hs-filtro {
	position: relative;
}

.hs-filtro-pilula {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 36px;
	padding-inline: 16px;
	border: 1px solid var(--hs-linha);
	border-radius: 999px;
	background: none;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.hs-filtro-pilula:hover {
	border-color: var(--hs-ink);
}

/* Aberta, a pílula fica da cor do painel que abriu, sem linha à volta. */
.hs-filtro-pilula[aria-expanded="true"] {
	border-color: var(--hs-card);
	background: var(--hs-card);
}

.hs-filtro-conta {
	display: grid;
	place-items: center;
	min-width: 16px;
	height: 16px;
	padding-inline: 4px;
	border-radius: 999px;
	background: var(--hs-ink);
	color: var(--hs-fundo);
	font-size: 10px;
}

.hs-filtro-painel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 8px);
	inset-inline-start: 0;
	min-width: 220px;
	max-height: 320px;
	overflow-y: auto;
	padding: 12px 0;
	border-radius: 18px;
	background: var(--hs-card);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.hs-filtro-ordem .hs-filtro-painel {
	inset-inline: auto 0;
}

.hs-filtro-painel ul {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-filtro-opcao {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px;
	color: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.hs-filtro-opcao:hover {
	background: rgba(0, 0, 0, 0.05);
}

.hs-filtro-caixa {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--hs-linha);
}

.hs-filtro-opcao.esta-activa {
	font-weight: 700;
}

.hs-filtro-opcao.esta-activa .hs-filtro-caixa {
	border-color: var(--hs-ink);
	background: var(--hs-ink);
	box-shadow: inset 0 0 0 3px var(--hs-fundo);
}

/* No computador o painel abre por baixo da pílula, e nem o cabeçalho nem o
   fundo escuro fazem falta. */
.hs-filtro-topo,
.hs-filtros-fundo {
	display: none;
}

/* Telemóvel: as pílulas ficam numa fila só, que desliza para o lado, e o
   painel sobe do fundo do ecrã. É o que o POC faz, e é por isso que uma coisa
   não vai sem a outra: numa fila que desliza, um painel preso à pílula ficava
   cortado pela própria fila. */
@media (max-width: 767px) {
	.hs-filtros-tiras {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.hs-filtros-tiras::-webkit-scrollbar {
		display: none;
	}

	.hs-filtros-fundo {
		position: fixed;
		z-index: 60;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.hs-filtros.tem-painel .hs-filtros-fundo {
		display: block;
	}

	.hs-filtro-painel,
	.hs-filtro-ordem .hs-filtro-painel {
		position: fixed;
		z-index: 61;
		inset: auto 0 0;
		max-height: 70vh;
		padding: 16px 0 20px;
		/* Encostado ao fundo do ecrã, só arredonda em cima. */
		border-radius: 18px 18px 0 0;
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
	}

	.hs-filtro-topo {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16px 12px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
	}

	.hs-filtro-fechar {
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		line-height: 0;
		cursor: pointer;
	}

	.hs-filtro-opcao {
		padding: 10px 16px;
	}
}

.hs-filtros-aplicados {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-top: 16px;
}

.hs-filtros-fichas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.hs-ficha {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	padding-inline: 12px;
	border: 1px solid var(--hs-linha);
	border-radius: 999px;
	background: var(--hs-card);
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.hs-ficha:hover {
	border-color: var(--hs-ink);
}

.hs-ficha .amount {
	font-weight: 700;
}

/* Paginação da loja

   Marcação do plugin. Uma linha de fecho da grelha, com um traço por cima,
   como no POC. As setas ficam apagadas quando não há para onde ir. */

.hs-paginacao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
	padding-block: 24px;
	border-top: 1px solid var(--hs-linha);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-paginacao-passo {
	color: inherit;
	text-decoration: none;
}

a.hs-paginacao-passo:hover {
	color: var(--hs-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hs-paginacao-passo.esta-quieta {
	opacity: 0.45;
}

/* Secção de produtos

   A marcação é do plugin, em inc/produtos. Aqui fica o aspecto do POC: o
   título e a ligação numa linha, um em cada ponta, e a grelha por baixo. */

.hs-produtos-topo,
.hs-comunidade-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
}

.hs-produtos-titulo,
.hs-comunidade-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-produtos-ver,
.hs-comunidade-ver {
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

.hs-produtos-ver:hover,
.hs-comunidade-ver:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.hs-produtos [data-products] {
	--shop-columns: repeat(var(--hs-produtos-colunas, 4), minmax(0, 1fr));

	margin: 0;
}

/* Fora do ecrã largo são sempre dois, como no POC: com quatro os cartões
   ficavam com 75 pixels de largura e o nome partia-se em três linhas. O
   número que o bloco pede vale do tablet para cima. No widget do Elementor
   manda o campo Colunas de cada ecrã, que já traz dois no tablet e no
   telemóvel. */
@media (max-width: 999.98px) {
	.hs-produtos:not(.hs-produtos-por-ecra) [data-products] {
		--shop-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Rodapé

   Marcação nossa, em inc/rodape.php. O texto de cada caixa vem das áreas de
   widgets, em blocos. */

.hs-rod {
	color: var(--hs-rod-tinta, #000);
	font-size: var(--hs-rod-texto, 14px);
}

.hs-rod-faixa {
	padding-inline: var(--hs-edge);
}

/* O separador Design do Blocksy escreve estas variáveis nas linhas e nas
   colunas. Lê-las é o que faz o painel mandar no espaçamento e na altura. */
.hs-rod-grelha {
	padding-block: var(--container-spacing, 36px);
}

/* As colunas vêm das variáveis que o Blocksy lê, escritas em linha pelo tema.
   O resto depende do que a linha tem lá dentro, não de qual das linhas é:
   mover um elemento de linha no construtor leva o desenho com ele. */

@media (min-width: 1024px) {
	/* Numa linha de selos, o último grupo encosta à direita da sua coluna: dá
	   os dois grupos nas pontas, como no POC, sem mexer nas colunas que o
	   painel definiu. */
	.hs-rod-grelha:has(.hs-rod-selos) .hs-rod-coluna:last-child:not(:first-child) {
		justify-self: end;
	}

	/* Nas outras, como no POC: a do meio ao centro, a última à direita. */
	.hs-rod-grelha:not(:has(.hs-rod-selos)) .hs-rod-coluna:not(:first-child):not(:last-child) {
		text-align: center;
	}

	.hs-rod-grelha:not(:has(.hs-rod-selos)) .hs-rod-coluna:last-child:not(:first-child) {
		text-align: right;
	}
}

.hs-rod-titulo,
.hs-rod h4 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-rod p {
	margin: 0 0 12px;
	font-size: var(--hs-rod-texto, 14px);
	line-height: 1.4;
}

.hs-rod-lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--hs-rod-texto, 14px);
}

.hs-rod a {
	color: inherit;
	text-decoration: none;
}

.hs-rod a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Cada bloco do rodapé é um widget seu, para se poder editar um a um no
   painel. O espaço entre widgets é o do Blocksy, e é esta a variável dele. */
.hs-rod-caixa {
	--widgets-gap: 12px;
}

.hs-rod-caixa .ct-widget > * {
	margin: 0;
}

/* Uma fila de selos: seja texto ou imagem, cada um leva a mesma moldura. A
   moldura é daqui, não do conteúdo — o elemento do construtor desenha sempre
   esta marcação, por isso não há maneira de a perder a editar. */
.hs-rod-selos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.hs-rod-selos-titulo,
.hs-rod-nav-titulo {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* Ao lado dos selos o título não leva margem: quem separa é o gap. */
.hs-rod-selos .hs-rod-selos-titulo {
	margin: 0;
}

.hs-selos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.hs-selos > * {
	display: flex;
	align-items: center;
	height: 36px;
	margin: 0;
	padding-inline: 12px;
	border: 1px solid var(--hs-linha);
	background: var(--hs-fundo);
	font-size: 11px;
	line-height: 1.4;
}

.hs-selos img {
	width: 36px;
	height: auto;
}

/* A linha legal é a faixa de baixo, a fechar o rodapé. */
.hs-rod-legal {
	text-align: center;
}

.hs-rod-legal p {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-rod-legal a {
	text-decoration: underline;
}

.hs-rod .hs-assinatura {
	margin: 0 0 12px;
	font-size: 34px;
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.15);
}

/* A página de produto

   Duas colunas: a galeria em mosaico à esquerda e a caixa de compra à direita,
   nas medidas do POC — 913 e 450 de 1360, com 20 de intervalo. A percentagem
   da galeria é opção do painel (Personalizar → WooCommerce → Página de
   produto), e não um número escrito aqui.

   Em telemóvel as duas passam a uma coluna só, e a galeria vira carrossel. */

.single-product .ct-container-full > article {
	padding-inline: var(--hs-edge);
}

.single-product .product-entry-wrapper,
.single-product .hero-section.is-width-constrained {
	width: 100%;
	max-width: none;
}

/* As migalhas, por cima da galeria: 14/400 em cinzento, com a página onde se
   está em preto. O tema-base põe-nas em maiúsculas; o POC não. */
.single-product .ct-breadcrumbs {
	padding-block: 16px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: var(--hs-cinza);
}

.single-product .ct-breadcrumbs .last-item {
	color: var(--hs-ink);
}

.single-product .hero-section {
	margin-bottom: 0;
}

@media (min-width: 1024px) {
	/* A coluna da esquerda não acaba na galeria: continua com tudo o que vem
	   por baixo, e a caixa de compra acompanha do lado direito até ao fim.

	   Para isso a caixa que o tema-base põe à volta da galeria e do resumo
	   desaparece da grelha, e as duas passam a ser filhas directas do produto,
	   ao lado das secções seguintes. */
	.single-product .product-entry-wrapper {
		display: contents;
	}

	.single-product .product {
		display: grid;
		grid-template-columns: var(--product-gallery-width, 50%) minmax(0, 1fr);
		/* Só entre colunas. O espaço entre as secções da esquerda é a margem
		   de cada uma, como no POC, e assim as linhas por onde a caixa de
		   compra se estica não acrescentam altura nenhuma. */
		column-gap: 20px;
		row-gap: 0;
		align-items: start;
	}

	/* Tudo fica na coluna da esquerda; só o resumo é que vai para a direita. */
	.single-product .product > * {
		grid-column: 1;
		min-width: 0;
	}

	.single-product .hs-galeria-caixa {
		grid-row: 1;
	}

	/* A primeira secção por baixo da galeria fica à distância do POC. */
	.single-product .woocommerce-tabs {
		margin-top: 20px;
	}

	.single-product .entry-summary {
		grid-column: 2;
		/* Da primeira linha até à última: o número é um tecto largo, porque as
		   linhas nascem das secções que a página tiver. */
		grid-row: 1 / span 100;
		margin: 0;
	}

	/* A caixa de compra acompanha a leitura, como no POC. */
	.single-product.sticky-summary .entry-summary {
		position: sticky;
		top: calc(var(--hs-cab-altura, 76px) + 8px);
	}
}

/* Carrossel em telemóvel e tablet

   Um contentor do Elementor com a opção Carrossel (HeadShot) ligada, que o
   plugin traduz na classe hs-carrossel, deixa de empilhar os filhos abaixo dos
   1024: ficam numa fila que se arrasta com o dedo (e com o rato, por
   assets/carrossel.js), cada um a 100% menos 40px para o seguinte espreitar à
   direita, com 10px entre eles, e cada filho em 3:4. As duas medidas vêm do
   painel, nas variáveis; sem elas valem as da Carhartt. É a secção das duas
   estampas da página inicial. A partir dos 1024 fica como o Elementor o
   desenha. */

@media (max-width: 1023.98px) {
	.hs-carrossel.e-con {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--hs-carrossel-intervalo, 10px);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--hs-edge);
		scrollbar-width: none;
	}

	/* A margem da página vai nos filhos das pontas e não no contentor: com
	   folga no contentor o snap ignorava-a e o primeiro colava à esquerda. */
	.hs-carrossel.e-con > .e-con:first-child {
		margin-left: var(--hs-edge);
	}

	.hs-carrossel.e-con > .e-con:last-child {
		margin-right: var(--hs-edge);
	}

	.hs-carrossel.e-con::-webkit-scrollbar {
		display: none;
	}

	.hs-carrossel.e-con > .e-con {
		flex: 0 0 var(--hs-carrossel-quadro, calc(100% - 40px));
		width: auto;
		min-width: 0;
		max-width: none;
		min-height: 0;
		aspect-ratio: 3 / 4;
		scroll-snap-align: start;
	}
}

/* Galeria em mosaico

   No computador é uma grelha de quadrados: a primeira foto ocupa quatro
   lugares e as outras fecham o rectângulo. O número de colunas muda com o
   número de fotos para não sobrar um buraco no fim. */

.hs-galeria {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.hs-galeria::-webkit-scrollbar {
	display: none;
}

.hs-galeria-foto {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	background: var(--hs-card);
}

.hs-galeria-img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* A conta e as setas só existem enquanto houver carrossel. */
.hs-galeria-passos {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-galeria-setas {
	display: flex;
	gap: 8px;
}

.hs-galeria-seta {
	padding: 4px 12px;
	border: 1px solid var(--hs-linha);
	background: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-ink);
	cursor: pointer;
}

.hs-galeria-seta:hover {
	border-color: var(--hs-ink);
}

@media (min-width: 1024px) {
	.hs-galeria {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		/* Duas linhas iguais: sem isto a grelha reparte a altura da foto
		   grande pelas duas e a de baixo fica mais estreita do que a de cima. */
		grid-template-rows: repeat(2, 1fr);
		gap: 20px;
		overflow: visible;
	}

	.hs-galeria-foto {
		cursor: zoom-in;
	}

	.hs-galeria-foto:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	/* Com quatro fotos sobra um lugar. Em vez de o deixar vazio, a segunda
	   foto fica em pé e ocupa a coluna toda — corta bem, porque as fotos de
	   modelo já são verticais. O quadrado do lenço aberto continua quadrado. */
	.hs-galeria[data-fotos="4"] .hs-galeria-foto:nth-child(2) {
		position: relative;
		grid-row: span 2;
	}

	/* Em pé, a foto sai do fluxo para a caixa não ficar com a altura dela —
	   quem manda na linha é a foto grande, que ocupa as duas. */
	.hs-galeria[data-fotos="4"] .hs-galeria-foto:nth-child(2) .hs-galeria-img {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		height: 100%;
	}

	.hs-galeria[data-fotos="3"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hs-galeria[data-fotos="2"],
	.hs-galeria[data-fotos="1"] {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
	}

	.hs-galeria[data-fotos="2"] .hs-galeria-foto:first-child,
	.hs-galeria[data-fotos="1"] .hs-galeria-foto:first-child {
		grid-column: auto;
		grid-row: auto;
	}

	.hs-galeria-passos {
		display: none;
	}
}

/* Da nossa comunidade

   Os vídeos e as fotos de rede social de quem usa o lenço, cada um com a
   sua proporção, sem cortes. Colunas da mesma largura, duas no telemóvel e
   quatro no computador, e cada quadro com a altura que a proporção lhe dá,
   como um mural. A proporção vem do ficheiro, em --proporcao.

   Para os quadros se encaixarem por baixo uns dos outros, a grelha tem linhas
   de 4px e o comunidade.js diz a cada quadro quantas ocupa. Sem JavaScript
   ficam em filas simples, com a proporção certa na mesma.

   Cada quadro mostra a imagem parada e o vídeo por cima, apagado. Quando o
   vídeo começa a tocar, aparece. Quem não o vê a tocar fica com a imagem, que
   é a mesma coisa quieta. */

.hs-comunidade {
	margin-top: 40px;
}

.hs-comunidade-topo {
	/* O POC dá vinte a esta e vinte e quatro à das grelhas de produto. */
	margin-bottom: 20px;
}

.hs-comunidade-mosaico {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: 20px;
}

.hs-comunidade-mosaico.esta-montado {
	grid-auto-rows: 4px;
	row-gap: 0;
}

.hs-comunidade-quadro {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--proporcao);
	margin: 0;
	background: var(--hs-card);
}

.hs-comunidade-capa {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hs-comunidade-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.hs-comunidade-video.esta-a-tocar {
	opacity: 1;
}

/* O botão é o quadro todo: carrega-se em qualquer sítio para expandir. */
.hs-comunidade-expandir {
	position: absolute;
	inset: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hs-comunidade-expandir-etiqueta {
	position: absolute;
	right: 8px;
	bottom: 8px;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	background: rgba(0, 0, 0, 0.55);
	font-size: 11px;
	line-height: 1.4;
	color: #fff;
	transition: background-color 0.2s ease;
}

.hs-comunidade-expandir:hover .hs-comunidade-expandir-etiqueta,
.hs-comunidade-expandir:focus-visible .hs-comunidade-expandir-etiqueta {
	background: #000;
}

@media (min-width: 1024px) {
	.hs-comunidade-mosaico {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* O vídeo em grande, ao alto, limitado pela altura do ecrã. A foto fica com a
   sua proporção, dentro do mesmo limite. */

.hs-comunidade-fundo:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.85);
}

.hs-comunidade-janela:not([hidden]) {
	position: fixed;
	inset: 0;
	z-index: 101;
	display: grid;
	place-items: center;
	padding: 16px;
}

.hs-comunidade-palco {
	position: relative;
}

.hs-comunidade-alvo {
	position: relative;
	aspect-ratio: 9 / 16;
	height: min(84vh, 155vw);
	background: #000;
}

.hs-comunidade-alvo video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hs-comunidade-alvo.e-foto {
	aspect-ratio: auto;
	height: auto;
	background: none;
}

.hs-comunidade-alvo img {
	display: block;
	width: auto;
	max-width: calc(100vw - 32px);
	height: auto;
	max-height: 84vh;
}

.hs-comunidade-fechar {
	position: absolute;
	top: -36px;
	right: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	cursor: pointer;
}

.hs-comunidade-fechar:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.hs-comunidade-video {
		transition-duration: 0.01ms;
	}
}

/* A caixa de compra

   A coluna da direita é feita das camadas do tema-base, na ordem que estiver no
   painel. O quadro com linha à volta são as linhas laterais das camadas que vão
   do título até à última antes do botão, e essa parte é escrita pelo plugin,
   que é quem sabe onde o botão está.

   Aqui ficam as medidas de cada peça, tiradas do POC. */

.single-product .entry-summary > * {
	margin-bottom: 0;
}

/* O título e o botão de copiar a ligação, na mesma linha. */
.hs-linha-titulo {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 12px;
}

.hs-linha-titulo .entry-title {
	margin: 0;
	/* 24/30, a entrelinha do POC para o nome do produto. */
	line-height: 1.25;
}

.hs-titulo-accoes {
	display: flex;
	flex-shrink: 0;
	gap: 12px;
	padding-top: 4px;
}

.hs-copiar {
	padding: 0;
	border: 0;
	background: none;
	color: var(--hs-cinza);
	cursor: pointer;
	line-height: 0;
}

.hs-copiar:hover,
.hs-copiar.esta-copiada {
	color: var(--hs-ink);
}

/* O preço, e a referência com o stock encostada à direita. */
.hs-linha-preco {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 16px;
}

.hs-linha-preco .price {
	margin: 0;
	line-height: 1.4;
}

.hs-ref {
	flex-shrink: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

/* O tamanho e a quantidade, lado a lado. É a última camada do quadro, e a
   folga de baixo é a do quadro. */
.hs-tamanho {
	display: flex;
	gap: 12px;
}

/* Com um tamanho só não há o que escolher: é texto, à altura da quantidade. */
.hs-tamanho-unico {
	min-width: 0;
	flex: 1 1 auto;
	align-self: center;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-ink);
}

.hs-tamanho-escolha {
	min-width: 0;
	flex: 1 1 auto;
	/* A altura sai da folga e da letra, e não da medida que o tema-base dá aos
	   campos de formulário. */
	height: auto;
	padding: 12px;
	border: 1px solid var(--hs-linha);
	border-radius: 0;
	/* A seta do lado direito é a que o browser desenha, como no POC. O tema-base
	   apaga-a com `appearance: none` e desenha uma sua por cima do fundo: sem
	   estas duas linhas ficavam as duas setas, uma ao lado da outra. */
	appearance: auto;
	background-color: var(--hs-fundo);
	background-image: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-ink);
}

.hs-qtd {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 12px;
	/* A altura é a da lista de tamanhos, 12 de folga por cima e por baixo da
	   letra, para ficar igual quer a lista esteja ao lado quer seja só texto. */
	padding: 12px;
	border: 1px solid var(--hs-linha);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.hs-qtd-passo {
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-ink);
	cursor: pointer;
}

/* As escolhas de um produto variável: uma fila de botões por atributo, com a
   mecânica e as medidas da Carhartt (computed, 1440): rótulo 14/400 a preto
   e 10 até aos botões; botões de 58 por 40 numa grelha com 10 de intervalo,
   sobre o cinzento dos cartões; 20 entre grupos. A escolhida inverte para
   preto; a que não existe na combinação fica riscada e a cinzento, sem
   clique. Os valores são curtos para caberem nos 58: H, M, 55 cm. */
.hs-escolhas {
	display: grid;
	gap: 20px;
}

.hs-opcoes {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* A margem é escrita inteira: o tema-base puxa as legendas 15px para fora. */
.hs-opcoes-titulo {
	padding: 0;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-ink);
}

.hs-opcoes-lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, 58px);
	gap: 10px;
}

.hs-opcao {
	height: 40px;
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: var(--hs-card);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-ink);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.hs-opcao:hover {
	outline: 1px solid var(--hs-ink);
	outline-offset: -1px;
}

.hs-opcao.esta-escolhida {
	background: var(--hs-ink);
	color: var(--hs-fundo);
}

.hs-opcao.esta-indisponivel {
	color: var(--hs-cinza);
	text-decoration: line-through;
	cursor: default;
}

.hs-opcao.esta-indisponivel:hover {
	outline: 0;
}

/* A quantidade, numa linha só dela por baixo das escolhas, com o rótulo
   igual ao dos grupos. */
.hs-qtd-linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.hs-qtd-titulo {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-ink);
}

/* As listas do WooCommerce ficam no formulário, a mandar, mas escondidas: são
   os botões que se vêem. O preço e o stock da variação também, porque a
   linha do preço lá em cima é que muda. */
.single-product .entry-summary form.variations_form table.variations,
.single-product .entry-summary form.variations_form .reset_variations,
.single-product .entry-summary form.variations_form .woocommerce-variation.single_variation {
	display: none;
}

/* O botão: preto, de ponta a ponta da coluna. A quantidade do formulário fica
   escondida, porque a que se vê está no quadro e manda nesta. O important é
   para o script das variações do WooCommerce, que a volta a mostrar por
   estilo em linha quando acha a variação. */
.single-product .entry-summary form.cart .quantity {
	display: none !important;
}

.single-product .entry-summary .ct-cart-actions {
	display: block;
}

.single-product .entry-summary form.cart {
	margin: 0;
}

.single-product .entry-summary .single_add_to_cart_button {
	/* A altura é a da folga com a letra, como no POC, e não a medida mínima
	   que o tema-base dá aos botões. */
	--theme-button-min-height: 0;

	width: 100%;
	border-radius: 0;
	padding-block: 16px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* Enquanto falta escolher, o botão fica cinzento e diz o que falta, como na
   Carhartt. O mesmo para o da barra de telemóvel. */
.single-product .entry-summary .single_add_to_cart_button:disabled,
.single-product .entry-summary .single_add_to_cart_button.disabled,
.hs-barra-movel-botao:disabled {
	background: var(--hs-card);
	color: var(--hs-cinza);
	cursor: not-allowed;
	opacity: 1;
}

/* A nota, e a compra em conjunto. */
.hs-envio {
	/* O espaço até ao botão é a folga da camada dele, no painel. */
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-conjunto {
	margin-top: 24px;
}

.hs-conjunto-titulo {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-cinza);
}

/* O cartão é um botão: abre a janela em vez de ir ao outro lenço. */
.hs-par {
	display: flex;
	width: 100%;
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid var(--hs-linha);
	background: var(--hs-fundo);
	font-family: inherit;
	text-align: left;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}

.hs-par + .hs-par {
	margin-top: 12px;
}

.hs-par:hover {
	border-color: var(--hs-ink);
}

.hs-par-fotos {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.hs-par-fotos img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
	background: var(--hs-card);
}

.hs-par-mais {
	padding-inline: 4px;
	font-size: 14px;
	line-height: 1.4;
}

.hs-par-nomes {
	min-width: 0;
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-par-precos {
	flex-shrink: 0;
	text-align: right;
}

.hs-par-selo {
	display: block;
	margin-bottom: 4px;
	padding: 2px 6px;
	background: var(--hs-ink);
	font-size: 11px;
	line-height: 1.4;
	color: var(--hs-fundo);
}

.hs-par-antes {
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-par-agora {
	display: block;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

/* A janela da compra em conjunto, com a mecânica das ofertas da Prozis: por
   cima da página, os dois lenços lado a lado com as escolhas de cada um, a
   faixa com o desconto e o código, o total e os dois botões. O desenho é o
   da loja: branco, linhas, preto no que conta. */
.hs-janela-aberta {
	overflow: hidden;
}

.hs-conjunto-janela {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.6);
}

.hs-conjunto-janela[hidden] {
	display: none;
}

.hs-conjunto-palco {
	width: min(920px, 100%);
	max-height: 100%;
	overflow-y: auto;
	padding: 24px;
	background: var(--hs-fundo);
	color: var(--hs-ink);
}

.hs-conjunto-cabeca {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.hs-conjunto-janela-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-conjunto-fechar {
	flex-shrink: 0;
	margin: -4px -4px 0 0;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: var(--hs-ink);
	cursor: pointer;
}

.hs-conjunto-lencos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.hs-conjunto-lenco {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 16px;
	padding: 16px;
	border: 1px solid var(--hs-linha);
}

.hs-conjunto-lenco-foto img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--hs-card);
}

.hs-conjunto-lenco-nome {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-conjunto-lenco-preco {
	margin: 2px 0 12px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-conjunto-lenco-escolhas {
	display: grid;
	gap: 14px;
}

/* Quando a escolha deste lenço já está no carrinho, a janela diz e não o
   junta outra vez. */
.hs-conjunto-lenco-nota {
	margin: -8px 0 12px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--hs-novo);
}

/* Dentro do cartão os grupos ficam mais juntos e as legendas mais leves. */
.hs-conjunto-lenco .hs-opcoes-titulo {
	margin-bottom: 6px;
	color: var(--hs-cinza);
}

.hs-conjunto-faixa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin-top: 20px;
	padding: 16px 20px;
	background: var(--hs-ink);
	color: var(--hs-fundo);
}

.hs-conjunto-faixa p {
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.hs-conjunto-faixa-texto {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.hs-conjunto-faixa-desconto {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}

.hs-conjunto-faixa-codigo {
	display: flex;
	align-items: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.8);
}

.hs-conjunto-codigo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background: none;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.4;
	color: var(--hs-fundo);
	cursor: pointer;
}

.hs-conjunto-codigo:hover,
.hs-conjunto-codigo.esta-copiado {
	background: var(--hs-fundo);
	color: var(--hs-ink);
}

.hs-conjunto-fim {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
}

.hs-conjunto-total {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	line-height: 1.4;
}

.hs-conjunto-antes {
	color: var(--hs-cinza);
}

.hs-conjunto-agora {
	font-size: 20px;
	font-weight: 700;
}

.hs-conjunto-accoes {
	display: flex;
	gap: 12px;
}

.hs-conjunto-cancelar,
.hs-conjunto-comprar {
	padding: 14px 24px;
	border: 1px solid var(--hs-ink);
	border-radius: 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

.hs-conjunto-cancelar {
	background: var(--hs-fundo);
	color: var(--hs-ink);
}

.hs-conjunto-comprar {
	background: var(--hs-ink);
	color: var(--hs-fundo);
}

/* Como o botão da caixa: cinzento enquanto falta escolher. */
.hs-conjunto-comprar:disabled {
	border-color: var(--hs-card);
	background: var(--hs-card);
	color: var(--hs-cinza);
	cursor: not-allowed;
}

.hs-conjunto-erro {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-promo);
}

@media (max-width: 767.98px) {
	.hs-conjunto-janela {
		padding: 0;
		align-items: end;
	}

	.hs-conjunto-palco {
		padding: 20px 16px;
	}

	.hs-conjunto-lencos {
		grid-template-columns: minmax(0, 1fr);
	}

	.hs-conjunto-lenco {
		grid-template-columns: 96px minmax(0, 1fr);
		padding: 12px;
	}

	.hs-conjunto-accoes {
		width: 100%;
	}

	.hs-conjunto-cancelar,
	.hs-conjunto-comprar {
		flex: 1 1 0;
		padding-inline: 12px;
	}
}

/* O aviso de "juntou ao carrinho", com as medidas da Carhartt (computed,
   1440): fixo por baixo da barra, encostado à margem da direita, 390 de
   largura, branco com a linha da loja e 20 de folga; o título e o nome a
   14/700, a cor e o tamanho a cinzento, a foto 61 por 92 (2:3); dois botões
   de 50, o carrinho com contorno e a finalização a preto. No telemóvel vai
   de ponta a ponta. O "Ver carrinho" que o WooCommerce põe por baixo do
   botão fica escondido, que é o balão que o substitui. */

.single-product .entry-summary .added_to_cart {
	display: none;
}

.hs-aviso-carrinho {
	position: fixed;
	top: calc(var(--height, 49px) + 10px);
	right: var(--hs-edge);
	z-index: 900;
	width: 390px;
	padding: 20px;
	border: 1px solid var(--hs-linha);
	background: var(--hs-fundo);
	color: var(--hs-ink);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.hs-aviso-carrinho[hidden] {
	display: none;
}

.hs-aviso-carrinho-cabeca {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}

.hs-aviso-carrinho-titulo {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-aviso-carrinho-fechar {
	margin: -6px -6px 0 0;
	padding: 2px 6px;
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: var(--hs-cinza);
	cursor: pointer;
}

.hs-aviso-carrinho-fechar:hover {
	color: var(--hs-ink);
}

.hs-aviso-carrinho-artigo {
	display: flex;
	gap: 20px;
}

.hs-aviso-carrinho-foto {
	display: block;
	flex-shrink: 0;
	width: 61px;
	height: 92px;
	object-fit: cover;
	background: var(--hs-card);
}

.hs-aviso-carrinho-texto p {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-aviso-carrinho-detalhes {
	color: var(--hs-cinza);
}

.hs-aviso-carrinho-preco {
	margin-top: 4px !important;
}

.hs-aviso-carrinho-accoes {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 20px;
}

.hs-aviso-carrinho-ver,
.hs-aviso-carrinho-finalizar {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 12px;
	border: 1px solid var(--hs-linha);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}

.hs-aviso-carrinho-ver {
	background: var(--hs-fundo);
	color: var(--hs-ink);
}

.hs-aviso-carrinho-ver:hover {
	border-color: var(--hs-ink);
}

.hs-aviso-carrinho-finalizar {
	border-color: var(--hs-ink);
	background: var(--hs-ink);
	color: var(--hs-fundo);
}

@media (max-width: 767.98px) {
	.hs-aviso-carrinho {
		right: 0;
		left: 0;
		width: auto;
		padding: 16px;
	}
}

/* Páginas

   O carrinho, a finalização, a conta e as páginas de texto (FAQ, envios,
   termos). Todas têm a caixa da loja: de ponta a ponta com a margem do
   cabeçalho e do rodapé, em vez da caixa centrada do tema-base, onde o título
   e o conteúdo vinham com larguras diferentes e ficavam desencontrados por
   uns pixels, e nada alinhava com a barra. O título é o do carrinho no POC, a
   32, e não o da loja. A página inicial é do Elementor e a loja é arquivo:
   não passam por aqui. */

.page-template-default .ct-container-full {
	padding-inline: var(--hs-edge);
}

.page-template-default .hero-section.is-width-constrained,
.page-template-default .entry-content > .alignwide {
	width: 100%;
	max-width: none;
}

.page-template-default .hero-section[data-type="type-1"] .page-title {
	max-width: none;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: 0;
}

/* Os 20 do POC entre o título e o que vem a seguir, em vez dos 40 do
   tema-base. */
.page-template-default .hero-section[data-type="type-1"] {
	margin-bottom: 20px;
}

/* Nas páginas de texto o conteúdo encosta à margem, por baixo do título, e
   fica com a largura da coluna do carrinho no POC, para as linhas não irem
   de ponta a ponta. As do WooCommerce (carrinho, finalização, conta) têm
   colunas próprias e ficam de fora. */
/* O WordPress centra cada bloco com margens automáticas e important; só o
   important lhe ganha. O tema-base ainda lhe dá 90 % de largura, que aqui
   passa a toda. */
.page-template-default:not(.woocommerce-page) .entry-content > :not(.alignwide):not(.alignfull) {
	width: 100%;
	max-width: 700px;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* As do WooCommerce só encostam à margem, com a largura toda. */
.page-template-default.woocommerce-page .entry-content > :not(.alignwide):not(.alignfull) {
	width: 100%;
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Entrar, criar conta e repor a palavra-passe

   A marcação é do tema, em woocommerce/myaccount/form-login.php e
   form-lost-password.php, e serve dois sítios: a página da conta e o painel
   que abre da barra (#conta-painel, do plugin). O desenho é o da Carhartt
   (carhartt-wip.com/pt-pt, o painel de sessão medido a 1440): uma coluna de
   480 encostada à margem na página, e de 400 dentro do painel, sem título de
   página, com o título a 20 e o subtítulo a 20 em cinzento; etiquetas a 14 a
   negrito, caixas de 50 com linha cinzenta, 20 entre campos; o botão a 50 de
   ponta a ponta, cinzento enquanto faltam campos e preto quando está tudo.
   Vê-se uma forma de cada vez: na página, a de criar conta só com
   .esta-a-registar; no painel, a que o data-estado disser. As duas coisas
   põe-nas o conta.js do plugin. Os selectores levam o corpo da página, ou o
   painel, à frente para passarem às regras do tema-base para a conta, que
   carregam depois das nossas. */

.woocommerce-account:not(.logged-in) .hero-section[data-type="type-1"] {
	display: none;
}

.woocommerce-account .ct-woo-unauthorized form.woocommerce-form-login,
.woocommerce-account .ct-woo-unauthorized form.woocommerce-form-register {
	max-width: none;
	margin-inline: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.woocommerce-account .hs-conta,
.woocommerce-account .ct-woo-unauthorized > .woocommerce-ResetPassword {
	max-width: 480px;
	margin-inline: 0;
}

.woocommerce-account .hs-conta-criar-conta,
.woocommerce-account .hs-conta.esta-a-registar .hs-conta-entrar {
	display: none;
}

.woocommerce-account .hs-conta.esta-a-registar .hs-conta-criar-conta {
	display: block;
}

/* No painel a forma é a que o estado disser. */
#conta-painel .hs-conta-entrar,
#conta-painel .hs-conta-criar-conta,
#conta-painel .hs-conta-esqueceu {
	display: none;
}

#conta-painel [data-estado="entrar"] .hs-conta-entrar,
#conta-painel [data-estado="criar"] .hs-conta-criar-conta,
#conta-painel [data-estado="esqueceu"] .hs-conta-esqueceu {
	display: block;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-titulo:focus {
	outline: 0;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-sub {
	margin: 5px 0 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-cinza);
}

/* Do título, ou do subtítulo, até ao primeiro campo. */
:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-form,
:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-ResetPassword,
.woocommerce-account .ct-woo-unauthorized > .woocommerce-ResetPassword p:first-of-type {
	margin-top: 40px;
}

/* As três vantagens de ter conta, com um visto à frente de cada uma. */
:is(.woocommerce-account, #conta-painel) .hs-conta-vantagens {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-vantagens li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-vantagens li + li {
	margin-top: 10px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-vantagens li::before {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7"/></svg>') center / contain no-repeat;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-vantagens + .woocommerce-form {
	margin-top: 40px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .form-row,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .form-row {
	margin: 0;
	padding: 0;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .form-row + .form-row,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .form-row + .form-row {
	margin-top: 20px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta label,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword label {
	display: block;
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .input-text,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .input-text {
	width: 100%;
	height: 50px;
	padding: 0 20px;
	border: 1px solid var(--hs-cinza);
	border-radius: 0;
	background: var(--hs-fundo);
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-ink);
	box-shadow: none;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .input-text:focus,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .input-text:focus {
	border-color: var(--hs-ink);
	outline: 0;
}

/* O medidor da palavra-passe e o texto de privacidade do WooCommerce, na
   letra secundária, como a nota da Carhartt. */
:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-password-strength,
:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-password-hint,
:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-privacy-policy-text,
:is(.woocommerce-account, #conta-painel) .hs-conta-nota,
.woocommerce-account .ct-woo-unauthorized > .woocommerce-ResetPassword > p:first-child {
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
	text-align: left;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-privacy-policy-text {
	margin-top: 40px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-privacy-policy-text p {
	margin: 0;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-privacy-policy-text a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .lost_password {
	margin-top: 20px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .lost_password a {
	color: var(--hs-ink);
	text-decoration: underline;
	text-underline-offset: 4px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .form-row.hs-conta-accao,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .form-row:last-of-type {
	margin-top: 20px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .woocommerce-privacy-policy-text + .hs-conta-accao {
	margin-top: 40px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .button,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .button,
:is(.woocommerce-account, #conta-painel) .hs-conta-trocar {
	display: flex;
	width: 100%;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 0 24px;
	border: 0;
	border-radius: 0;
	background: var(--hs-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-fundo);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

:is(.woocommerce-account, #conta-painel) .hs-conta .button:hover,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .button:hover,
:is(.woocommerce-account, #conta-painel) .hs-conta-trocar:hover {
	background: var(--hs-cinza);
	color: var(--hs-fundo);
}

:is(.woocommerce-account, #conta-painel) .hs-conta .button:disabled,
:is(.woocommerce-account, #conta-painel) .woocommerce-ResetPassword .button:disabled {
	background: var(--hs-card);
	color: var(--hs-cinza);
	opacity: 1;
	cursor: not-allowed;
}

/* "Ainda não és cliente?" e "Já tens conta?", 40 depois do botão da forma. */
:is(.woocommerce-account, #conta-painel) .hs-conta-outra {
	margin-top: 40px;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-outra + .hs-conta-trocar {
	margin-top: 20px;
}

/* O aviso do envio sem sair da página: o erro em vermelho, o que correu bem
   na cor do texto. Fica onde o WooCommerce põe os avisos dele, por cima do
   primeiro campo. */
:is(.woocommerce-account, #conta-painel) .hs-conta-aviso {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-promo);
}

:is(.woocommerce-account, #conta-painel) .hs-conta-aviso:focus {
	outline: 0;
}

:is(.woocommerce-account, #conta-painel) .hs-conta-aviso.correu-bem {
	color: var(--hs-ink);
}

/* Depois de o email de repor seguir, a forma dá lugar ao aviso. */
#conta-painel form.esta-feita > :not(.hs-conta-aviso) {
	display: none;
}

/* O painel da conta

   O painel do Blocksy a abrir da direita, como o da Carhartt: 480 de largura
   à altura toda, o resto da página a preto a 35 %. O cabeçalho do painel (14
   a negrito, em cinzento) e o x ficam a 40 do topo e das margens; o conteúdo
   começa 40 abaixo, com 40 de margem, o que dá os 400 de largura da
   Carhartt. Em telemóvel o painel é a largura toda, com 20 de margem. */
#conta-painel {
	--side-panel-width: 480px;
	--panel-padding: 40px;
	--theme-box-shadow: none;
	--theme-icon-color: var(--hs-ink);
	--theme-icon-hover-color: var(--hs-cinza);
	background: rgba(0, 0, 0, 0.35);
	color: var(--hs-ink);
}

#conta-painel .ct-panel-inner {
	display: flex;
	flex-direction: column;
	background: var(--hs-fundo);
}

#conta-painel .ct-panel-actions {
	justify-content: space-between;
	padding: 40px var(--panel-padding) 0;
}

#conta-painel .ct-panel-heading {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-cinza);
}

/* O x a 16, como o da Carhartt. O Blocksy dá-lhe 10 de folga a toda a volta
   e puxa-a para fora com margens negativas, por isso a folga não conta. */
#conta-painel .ct-toggle-close {
	--theme-icon-size: 16px;
	--theme-icon-color: var(--hs-ink);
}

#conta-painel .ct-panel-content {
	overflow-y: auto;
	padding: 40px var(--panel-padding);
}

@media (max-width: 639.98px) {
	#conta-painel {
		--panel-padding: 20px;
	}

	#conta-painel .ct-panel-actions {
		padding-top: 20px;
	}

	#conta-painel .ct-panel-content {
		padding-top: 24px;
	}
}

/* O que fica a seguir é o que sai fora da escala da loja: o cupão aplicado
   vinha num chip com a letra a 0,75 da linha, 9,6px, e em minúsculas, como o
   WooCommerce o guarda. Passa a ler-se como o resto da linha, com a forma das
   pílulas da loja. */

.wc-block-components-totals-discount .wc-block-components-chip {
	padding: 4px 6px 4px 12px;
	border: 1px solid var(--hs-linha);
	border-radius: 999px;
	background: var(--hs-fundo);
	font-size: 14px;
	line-height: 1.4;
	color: var(--hs-ink);
}

.wc-block-components-totals-discount .wc-block-components-chip .wc-block-components-chip__text {
	font-size: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.wc-block-components-totals-discount .wc-block-components-chip__remove {
	margin-left: 4px;
}

.wc-block-components-totals-discount .wc-block-components-chip__remove-icon {
	width: 16px;
	height: 16px;
}

/* As linhas do carrinho e o resumo da finalização: a foto em 2:3 e a 76 de
   largura, como no POC do carrinho, em vez do quadrado de 70 do bloco. A
   miniatura já vem recortada a 2:3 da loja; o cover é só para o caso de uma
   foto antiga ainda quadrada. */
/* A célula da foto leva 16 de folga à direita, por dentro da largura. */
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
	width: 92px;
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	display: block;
	width: 76px;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	background: var(--hs-card);
}

/* Os sugeridos no carrinho são a grelha do plugin, com o cartão da loja: a
   mesma com o carrinho vazio e com artigos. O bloco vive na página Carrinho,
   dentro do bloco do WooCommerce, nos dois estados. Fica a 40 da lista. */

.wp-block-woocommerce-cart .hs-produtos {
	margin-top: 40px;
}

/* Com o carrinho vazio não há coluna de totais, e a grelha ficava de ponta a
   ponta, com cartões do dobro do tamanho. Fica com a largura da coluna dos
   artigos, que é 65 % menos a folga da direita, para os cartões terem o mesmo
   tamanho nos dois estados. A medida é do WooCommerce, a partir dos 700 do
   próprio bloco. */
@container (min-width: 700px) {
	.wp-block-woocommerce-empty-cart-block .hs-produtos {
		width: 60.4717%;
	}
}

/* O NIF, que o plugin regista como campo de morada, vai às duas moradas da
   finalização. Na de envio, que é a principal, fica; quando a pessoa abre a
   morada de faturação diferente, o campo dela chega e este esconde-se, para
   o NIF ficar só na faturação, que é onde faz sentido. */
.wc-block-checkout__form:has(.wc-block-checkout__billing-fields) .wc-block-checkout__shipping-fields .wc-block-components-address-form__headshot-nif {
	display: none;
}

/* Acordeões

   No lugar dos separadores do WooCommerce. Cada um é uma caixa com linha à
   volta, cabeçalho em cinzento e um sinal que roda ao abrir. */

.hs-acordeoes {
	margin-top: 20px;
}

.hs-acordeao {
	border: 1px solid var(--hs-linha);
}

.hs-acordeao + .hs-acordeao {
	margin-top: 20px;
}

.hs-acordeao-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 20px;
	background: var(--hs-card);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.hs-acordeao-topo::-webkit-details-marker {
	display: none;
}

.hs-acordeao-sub {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-acordeao-sub [aria-hidden] {
	color: var(--hs-ink);
}

.hs-acordeao-sinal {
	flex-shrink: 0;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	transition: transform 0.2s ease;
}

.hs-acordeao[open] .hs-acordeao-sinal {
	transform: rotate(45deg);
}

.hs-acordeao-dentro {
	padding: 20px;
	border-top: 1px solid var(--hs-linha);
}

/* Os blocos cinzentos por dentro de um acordeão. */
.hs-bloco {
	padding: 16px 20px;
	background: var(--hs-card);
}

.hs-bloco + .hs-bloco {
	margin-top: 20px;
}

.hs-bloco p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.hs-bloco-historia p {
	margin-top: 12px;
	color: var(--hs-cinza);
}

.hs-bloco-nome {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-bloco-nome + .hs-bloco-valor {
	margin: 0;
}

.hs-bloco-valor {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-bloco-valor + .hs-bloco-nome {
	margin-top: 12px;
}

/* Os símbolos de conservação. */
.hs-cuidados {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.hs-cuidado {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--hs-linha);
	border-radius: 100%;
	background: var(--hs-fundo);
}

.hs-cuidado svg {
	width: 20px;
	height: 20px;
}

.hs-cuidados-nota {
	width: 100%;
}

/* Guia de medidas */

.hs-medidas-intro {
	max-width: 60ch;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.hs-medidas {
	display: grid;
	gap: 32px;
	margin-top: 32px;
}

.hs-medidas-desenho {
	width: 100%;
	max-width: 300px;
}

.hs-medidas-tabela {
	overflow-x: auto;
}

.hs-medidas-tabela table {
	width: 100%;
	min-width: 420px;
	border-collapse: collapse;
	/* O WordPress desenha uma grelha inteira à volta das células. No POC a
	   tabela só tem as linhas deitadas, e são as das filas. */
	border: 0;
}

.hs-medidas-tabela th,
.hs-medidas-tabela td {
	border: 0;
	padding-inline: 0;
}

/* A linha que explica a tabela quando há vários tamanhos: lado e diagonal. */
.hs-medidas-tabela .hs-medidas-legenda {
	font-size: 12px;
	color: var(--hs-cinza);
}

.hs-medidas-tabela thead tr {
	border-bottom: 1px solid var(--hs-ink);
}

.hs-medidas-tabela th {
	padding-block: 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
}

.hs-medidas-tabela tbody tr {
	border-bottom: 1px solid var(--hs-linha);
}

.hs-medidas-tabela tbody th {
	font-weight: 400;
}

.hs-medidas-tabela td {
	padding-block: 8px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.hs-medidas-como {
	margin: 32px 0 0;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--hs-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.hs-medidas-passos {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.hs-medidas-passos li {
	display: flex;
	gap: 12px;
}

.hs-medidas-passos li + li {
	margin-top: 16px;
}

.hs-medidas-numero {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 100%;
	background: var(--hs-ink);
	font-size: 11px;
	line-height: 1;
	color: var(--hs-fundo);
}

.hs-medidas-passos h4 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-medidas-passos p {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-medidas-fim {
	margin: 24px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

@media (min-width: 1024px) {
	.hs-medidas {
		grid-template-columns: 300px minmax(0, 1fr);
	}
}

/* Avaliações */

.hs-nota {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	background: var(--hs-card);
}

.hs-nota-media {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-nota-conta {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-barras {
	display: grid;
	gap: 8px;
	margin-top: 20px;
	padding: 20px;
	background: var(--hs-card);
}

.hs-barra {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.4;
}

.hs-barra-nome {
	flex-shrink: 0;
	width: 32px;
}

.hs-barra-risco {
	flex: 1 1 auto;
	height: 8px;
	background: var(--hs-linha);
}

.hs-barra-risco > span {
	display: block;
	height: 8px;
	background: var(--hs-ink);
}

.hs-barra-conta {
	flex-shrink: 0;
	width: 24px;
	text-align: right;
	color: var(--hs-cinza);
}

.hs-avaliacoes {
	margin-top: 20px;
}

/* Newsletter e mosaicos de característica */

.hs-tira {
	display: grid;
	gap: 20px;
	margin-top: 20px;
}

.hs-news {
	padding: 20px;
	background: var(--hs-card);
}

.hs-news-titulo {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.hs-news-texto {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-news-form {
	margin-top: 16px;
}

.hs-news-form input {
	width: 100%;
	height: auto;
	padding: 8px 12px;
	border: 1px solid var(--hs-linha);
	border-radius: 0;
	background: var(--hs-fundo);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
}

.hs-news-botao {
	--theme-button-min-height: 0;

	margin-top: 12px;
	padding: 8px 20px;
	border: 0;
	border-radius: 0;
	background: var(--hs-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-fundo);
	cursor: pointer;
}

.hs-news-aviso {
	margin: 8px 0 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

/* Cada mosaico: a fotografia e, por cima, o que já está no catálogo. */
.hs-facto {
	position: relative;
	margin: 0;
	background: var(--hs-card);
}

.hs-facto img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

/* O texto é branco sobre fotografia: leva o mesmo esbatimento da página
   inicial, para se ler venha a foto que vier. */
.hs-facto::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 60%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0));
	pointer-events: none;
}

.hs-facto figcaption {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	padding: 16px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 1px 18px rgba(0, 0, 0, 0.5);
}

@media (min-width: 640px) {
	.hs-tira {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hs-tira {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* A série completa, a fechar a coluna. */
.single-product .hs-produtos {
	margin-top: 40px;
}

/* A barra de compra em telemóvel

   Entra quando o botão da caixa sai do ecrã, e sai quando ele volta. */

.hs-barra-movel {
	position: fixed;
	inset: auto 0 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-top: 1px solid var(--hs-linha);
	background: var(--hs-fundo);
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
}

.hs-barra-movel.esta-fora {
	transform: translateY(100%);
	opacity: 0;
	pointer-events: none;
}

.hs-barra-movel-texto {
	min-width: 0;
}

.hs-barra-movel-nome {
	margin: 0;
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hs-barra-movel-preco {
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--hs-cinza);
}

.hs-barra-movel-preco .price {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.hs-barra-movel-botao {
	--theme-button-min-height: 0;

	flex-shrink: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: var(--hs-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--hs-fundo);
	cursor: pointer;
}

/* Em telemóvel a barra fica por cima do fim da página: o rodapé leva folga por
   baixo para não ficar texto escondido. */
@media (max-width: 1023px) {
	.single-product .ct-footer {
		padding-bottom: 96px;
	}
}

@media (min-width: 1024px) {
	.hs-barra-movel {
		display: none;
	}
}