@font-face {
  font-family: "LL Riforma Bold";
  src: url("/fonts/LL-Riforma-Bold.woff2") format("woff2"), url("/fonts/LL-Riforma-Bold.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LL Riforma Medium";
  src: url("/fonts/LL-Riforma-Medium.woff2") format("woff2"), url("/fonts/LL-Riforma-Medium.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LL Riforma Regular";
  src: url("/fonts/LL-Riforma-Regular.woff2") format("woff2"), url("/fonts/LL-Riforma-Regular.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LL Riforma Lighter";
  src: url("/fonts/LL-Riforma-Light.woff2") format("woff2"), url("/fonts/LL-Riforma-Light.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

li {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

:root {
  --branco: #f7f7f7;
  --brancoContraste: #ebebeb;
  --preto: #222222;
  --pretoalpha: #2222228d;
  --tamanho: 40px;
  --tamanhoMin: calc(var(--tamanho) / 2);
  --tamanhoMin2x: calc(var(--tamanho) / 4);
  --tamanhoMax: calc(var(--tamanho) * 2);
  --fontL: "LL Riforma Lighter";
  --fontR: "LL Riforma Regular";
  --fontM: "LL Riforma Medium";
  --fontB: "LL Riforma Bold";
  --fontTCorpo: 1rem;
  --fontTTitulo: 1.4rem;
  --tamanhoProduto: 60vh;
  --aspectRatioImagemproduto: 0.8259840825984083;
  --tamanhoHeader: calc(40px + var(--tamanhoMax));
  --borda: 1px solid var(--preto);
}

h1, h2, h3, h4, h5, h6, p, a, span {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2em;
  font-weight: normal;
  transform: translateY(0.2em);
}

button, select, input {
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2em;
  font-weight: normal;
  background: transparent;
  border: none;
  outline: none;
}
button::placeholder, select::placeholder, input::placeholder {
  color: var(--pretoalpha);
}

body {
  font-family: var(--fontL);
  color: var(--preto);
  font-size: var(--fontTCorpo);
  background: var(--branco);
}
body #smooth-content {
  display: flex;
  flex-direction: column;
}

p {
  max-width: 320px;
}

.botao {
  background: var(--preto);
  color: var(--branco);
  padding: var(--tamanhoMin2x) var(--tamanhoMin);
  text-transform: uppercase;
  border-radius: var(--tamanhoMin);
  cursor: pointer;
  width: fit-content;
  text-wrap: nowrap;
}
.botao span {
  display: block;
}
.botao.claro {
  background: var(--brancoContraste);
  color: var(--preto);
}
.botao.selecionado.claro {
  background: var(--preto);
  color: var(--branco);
}

.quantidade-caixa {
  gap: var(--tamanhoMin2x);
}
.quantidade-caixa .numero-caixa {
  display: flex;
  background: var(--brancoContraste);
  align-items: center;
  height: 30px;
  border-radius: var(--tamanhoMin);
}
.quantidade-caixa .numero-caixa [class*=decrementar], .quantidade-caixa .numero-caixa [class*=incrementar], .quantidade-caixa .numero-caixa .numero {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quantidade-caixa .numero-caixa [class*=decrementar] span, .quantidade-caixa .numero-caixa [class*=incrementar] span, .quantidade-caixa .numero-caixa .numero span {
  transform: translateY(0.1em);
}
.quantidade-caixa .numero-caixa [class*=incrementar] span {
  transform: translateY(0.04em);
}

.campos {
  display: flex;
  gap: var(--tamanhoMin2x);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 30%;
}
.campo.email, .campo.endereco, .campo.nome, .campo.pais {
  flex: 1;
}
.campo label {
  display: none;
}
.campo input {
  background: var(--brancoContraste);
  color: var(--preto);
  padding: var(--tamanhoMin2x) var(--tamanhoMin);
  border-radius: var(--tamanhoMin);
}

#perfil {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background: var(--branco);
  padding: var(--tamanho);
  border: var(--borda);
}
#perfil .titulo {
  font-size: var(--fontTTitulo);
  font-family: var(--fontB);
  text-transform: uppercase;
  margin-bottom: var(--tamanhoMin);
}
#perfil form {
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin2x);
  width: 16vw;
  min-width: 300px;
  align-items: end;
}
#perfil form .campos {
  width: 100%;
}
#perfil form .campos .campo {
  flex: 1;
}

#header {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--tamanho);
  z-index: 9;
  border-bottom: var(--borda);
  background: var(--branco);
}
#header .logo {
  height: 40px;
}
#header .navegacao {
  flex: 1;
}
#header .links {
  display: flex;
  gap: var(--tamanhoMin);
  text-transform: uppercase;
  font-family: var(--fontL);
  padding-left: var(--tamanho);
}
#header .links li {
  cursor: pointer;
}
#header .links li a {
  display: block;
}
#header .links li a img {
  height: 30px;
  width: 30px;
}
#header .links li.ativo {
  font-family: var(--fontB);
}
#header #carrinho {
  position: absolute;
  width: 50%;
  height: 100vh;
  top: 0;
  right: -50%;
  background: var(--branco);
  border-left: var(--borda);
  z-index: -1;
  display: flex;
  flex-direction: column;
}
#header #carrinho > * {
  padding: var(--tamanho);
}
#header #carrinho .produtos {
  padding-top: var(--tamanhoHeader);
  padding-bottom: 0;
  min-height: 0;
  flex: 1;
}
#header #carrinho .produtos .produtos-caixa {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tamanhoMin);
  overflow-y: scroll;
  align-content: flex-start;
}
#header #carrinho .produtos .produtos-caixa .produto {
  width: calc((100% - (var(--tamanhoMin) * 2)) / 3);
  position: relative;
}
#header #carrinho .produtos .produtos-caixa .produto .imagem {
  width: 100%;
  aspect-ratio: var(--aspectRatioImagemproduto);
  z-index: -1;
  position: relative;
}
#header #carrinho .produtos .produtos-caixa .produto .info {
  display: contents;
}
#header #carrinho .produtos .produtos-caixa .produto .info .dados {
  display: flex;
  justify-content: space-between;
  padding-top: var(--tamanhoMin);
}
#header #carrinho .produtos .produtos-caixa .produto .info .dados .nome {
  font-family: var(--fontB);
  text-transform: uppercase;
}
#header #carrinho .produtos .produtos-caixa .produto .info .seletores {
  display: flex;
  justify-content: space-between;
  padding-top: var(--tamanhoMin2x);
  align-items: center;
}
#header #carrinho .produtos .produtos-caixa .produto .info .seletores > * {
  display: flex;
  align-items: center;
}
#header #carrinho .faturacao, #header #carrinho .entrega {
  background: var(--branco);
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin2x);
  height: 0;
  padding: 0;
  overflow: hidden;
}
#header #carrinho .faturacao .titulo, #header #carrinho .entrega .titulo {
  font-family: var(--fontB);
  text-transform: uppercase;
  padding-bottom: var(--tamanhoMin);
}
#header #carrinho .precificacao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
  padding-top: var(--tamanhoMin);
}
#header #carrinho .precificacao .preco {
  display: flex;
  align-items: end;
  gap: var(--tamanhoMin2x);
  font-size: var(--fontTTitulo);
}
#header #carrinho .precificacao .preco .total {
  text-transform: uppercase;
  font-family: var(--fontB);
}
#header #carrinho .precificacao .preco .iva {
  font-size: var(--fontTCorpo);
  transform: translateY(0.1em);
  color: var(--pretoalpha);
}
#header #carrinho .precificacao .navegacao {
  display: flex;
  justify-content: flex-end;
  gap: var(--tamanhoMin2x);
}
#header #carrinho .precificacao .navegacao button {
  place-self: end;
}
#header #carrinho .precificacao .navegacao button.botao-carrinho-anterior {
  display: none;
}

.header-dedicado {
  height: var(--tamanhoHeader);
}

.carrinho-aberto #carrinho {
  right: 0 !important;
}
.carrinho-aberto #header > .links {
  flex: 0 0 50%;
  position: relative;
}
.carrinho-aberto #header > .links::after {
  content: "";
  background-image: url("/img/fechar.svg");
  background-repeat: no-repeat;
  background-size: contain;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  aspect-ratio: 1/1;
  pointer-events: none;
}
.carrinho-aberto #header > .links .botao-perfil {
  display: none;
}
.carrinho-aberto #header > .links .botao-carrinho {
  font-family: var(--fontB);
  width: 100%;
}

.faturacao-aberta #header #carrinho .produtos-caixa {
  padding-bottom: var(--tamanho);
}
.faturacao-aberta #header #carrinho .faturacao {
  border-top: var(--borda);
  height: 100%;
  padding: var(--tamanho);
  padding-bottom: var(--tamanhoMin);
  height: fit-content;
}
.faturacao-aberta #header #carrinho button.botao-carrinho-anterior {
  display: block !important;
}

.entrega-aberta #header #carrinho .faturacao {
  padding-bottom: var(--tamanho);
}
.entrega-aberta #header #carrinho .entrega {
  border-top: var(--borda);
  height: 100%;
  padding: var(--tamanho);
  padding-bottom: var(--tamanhoMin);
  height: fit-content;
}

#produtos {
  display: flex;
  flex-wrap: wrap;
  will-change: transform;
}
#produtos .produto {
  flex: 0 0 calc((100% / 4));
  height: 60vh;
  max-height: 648px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#produtos .produto a {
  display: contents;
}
#produtos .produto a .imagens {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  overflow: hidden;
  position: relative;
}
#produtos .produto a .imagens .imagem {
  width: 100%;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  transition: clip-path 0.6s ease;
  overflow: hidden;
  will-change: clip-path;
}
#produtos .produto a .imagens .imagem:nth-child(2) {
  clip-path: inset(0% 100% 0% 0%);
}
#produtos .produto a .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fontTTitulo);
  text-transform: uppercase;
  padding: var(--tamanhoMin);
}
#produtos .produto a .info .nome {
  font-family: var(--fontB);
}
#produtos .produto:hover .imagens .imagem:nth-child(2) {
  clip-path: inset(0% 0% 0% 0%);
}

#produto-pagina {
  display: flex;
  position: relative;
}
#produto-pagina .galeria {
  flex: 0 0 60%;
}
#produto-pagina .galeria .imagem {
  aspect-ratio: var(--aspectRatioImagemproduto);
}
#produto-pagina > * {
  flex: 1;
}
#produto-pagina .conteudo {
  font-size: var(--fontTTitulo);
  padding: var(--tamanho);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--tamanho);
  height: calc(100vh - var(--tamanhoHeader));
}
#produto-pagina .conteudo .grupo {
  display: flex;
  flex-direction: column;
  gap: var(--tamanho);
}
#produto-pagina .conteudo .dados {
  display: flex;
  flex-direction: column;
  gap: var(--tamanho);
}
#produto-pagina .conteudo .dados .nome {
  text-transform: uppercase;
  font-family: var(--fontB);
  font-size: 5rem;
}
#produto-pagina .conteudo .dados .preco {
  font-size: 3.2rem;
  text-wrap: nowrap;
}
#produto-pagina .conteudo .dados .preco span {
  color: var(--pretoalpha);
  font-size: var(--fontTTitulo);
}
#produto-pagina .conteudo .dados .descricao p {
  max-width: 100%;
}
#produto-pagina .conteudo #variacoes {
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
}
#produto-pagina .conteudo #variacoes .variacao-grupo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#produto-pagina .conteudo #variacoes .variacao-grupo .opcoes-variacao-grupo {
  display: flex;
  gap: var(--tamanhoMin2x);
  font-size: var(--fontTCorpo);
}
#produto-pagina .conteudo #variacoes .variacao-grupo .opcoes-variacao-grupo .opcao-variacao-grupo {
  text-transform: initial;
}
#produto-pagina .conteudo .adicionar {
  display: flex;
  justify-content: space-between;
}
#produto-pagina .conteudo .adicionar .quantidade-caixa {
  display: flex;
  align-items: center;
  gap: var(--tamanhoMin);
  width: 100%;
}
#produto-pagina .conteudo .adicionar .quantidade-caixa .numero-caixa {
  height: 100%;
}
#produto-pagina .conteudo .adicionar .quantidade-caixa .numero-caixa [class*=decrementar], #produto-pagina .conteudo .adicionar .quantidade-caixa .numero-caixa [class*=incrementar], #produto-pagina .conteudo .adicionar .quantidade-caixa .numero-caixa .numero {
  aspect-ratio: 1/1;
  width: initial;
  height: 100%;
}
#produto-pagina .conteudo .adicionar .restam {
  color: var(--pretoalpha);
  font-size: var(--fontTCorpo);
}

#contactos-pagina {
  padding: var(--tamanho);
  display: flex;
  flex-direction: column;
  gap: var(--tamanhoMin);
}
#contactos-pagina .links .categoria {
  font-family: var(--fontB);
  text-transform: uppercase;
  margin-bottom: var(--tamanhoMin2x);
}

#footer {
  display: flex;
  flex-direction: column;
  border-top: var(--borda);
  z-index: 1;
}
#footer > * {
  padding: var(--tamanho);
}
#footer .info {
  display: flex;
}
#footer .info .links {
  flex: 1;
  text-align: center;
}
#footer .info .links .categoria {
  font-family: var(--fontB);
  text-transform: uppercase;
}
#footer .copys {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: var(--borda);
  text-transform: uppercase;
}
#footer .copys .apoios {
  width: 600px;
}
#footer .copys .bynhdesign > * {
  display: inline;
}