/* =========================================================
   HEADER
   ========================================================= */

.site-header {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);

  display: flex;
  align-items: center;

  background: rgba(10, 10, 10, 0.97);
  border-bottom: var(--border-width) solid var(--color-line);
}

/*
 * Sem width: 100% aqui. O elemento carrega .container--wide, que é o que
 * alinha o header exatamente na mesma coluna das seções e do hero. Um
 * width: 100% neste bloco venceria o do .container--wide por ordem de
 * cascata e jogaria o logo para a borda da tela, fora de alinhamento.
 */
.site-header__inner {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* Marca */
.site-brand {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 0.7rem;

  color: var(--color-off-white);
}

/*
 * Logotipo horizontal (leão + "LION ART CONFECÇÕES" em uma linha, ver
 * CLAUDE.md seção 14). Ao contrário do emblema redondo antigo, a altura
 * não acompanha --header-height por calc: como a peça é larga (proporção
 * ~2.7:1), amarrar na altura do header deixava a marca dominando o header
 * inteiro. Altura fixa por breakpoint, abaixo.
 */
.site-brand__mark {
  width: auto;
  height: 36px;

  transition: transform var(--transition-base);
}

.site-brand:hover .site-brand__mark {
  transform: scale(1.05);
}

/* Ações do header */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.header-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  color: var(--color-gray);

  transition: color var(--transition-fast);
}

.header-menu:hover {
  color: var(--color-off-white);
}

.header-menu__icon {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;

  width: 24px;
  height: 20px;
}

.header-menu__icon span {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;

  transition:
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

/* Estado aberto: ícone hambúrguer vira X */
.header-menu[aria-expanded="true"] .header-menu__icon span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.header-menu[aria-expanded="true"] .header-menu__icon span:nth-child(2) {
  opacity: 0;
}

.header-menu[aria-expanded="true"] .header-menu__icon span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/*
 * Só o ícone, sem o texto "Menu"/"Fechar" ao lado (pedido do Rodrigo). O
 * nome acessível do botão continua vindo do aria-label, e o próprio ícone
 * já morfa de hambúrguer pra X no estado aberto, então a leitura visual do
 * estado não se perde.
 */
.header-menu__label--closed,
.header-menu__label--open {
  display: none;
}

.header-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;
  padding-inline: 0.85rem;

  border: 1px solid var(--color-gold);

  color: var(--color-off-white);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast);
}

.header-order:hover {
  background: var(--color-off-white);
  border-color: var(--color-off-white);
  color: var(--color-black);
}


/* =========================================================
   EYEBROW — rótulo curto de seção
   O traço dourado de 1px foi substituído pela coroa do
   logotipo, desenhada como SVG inline (nunca emoji).
   ========================================================= */

.eyebrow__crown {
  flex: 0 0 auto;

  width: 1.15rem;
  height: auto;

  color: var(--color-gold);
}


/* =========================================================
   RÓTULO VERTICAL — régua lateral das seções
   ========================================================= */

.vertical-label {
  color: var(--color-gray);

  font-size: clamp(0.8rem, 0.92vw, 1rem);
  font-weight: 500;

  letter-spacing: 0.26em;
  line-height: 1;

  text-transform: uppercase;

  writing-mode: vertical-rl;
  transform: rotate(180deg);
}


/* =========================================================
   OVERLAY DE MENU
   ========================================================= */

.menu-overlay {
  position: fixed;
  z-index: 900;
  inset: 0;

  display: flex;
  flex-direction: column;

  padding-top: var(--header-height);

  background: var(--color-black);

  visibility: hidden;
  opacity: 0;

  transition:
    opacity var(--transition-base),
    visibility 0s linear var(--transition-base);
}

/*
 * Fundo fotográfico do menu. Antes era uma imagem cobrindo a tela inteira,
 * atrás do texto, tão escurecida (quase preta) pra sustentar os links
 * grandes por cima que a foto praticamente sumia — "faltava espaço pra
 * imagem". Agora ela ganha uma área própria, sem nenhum texto sobreposto:
 * uma faixa no topo no mobile (coluna .menu-overlay é flex-column) e um
 * painel dedicado à direita a partir de 768px (.menu-overlay vira
 * flex-row, ver abaixo). Como nada é lido por cima dela, o escurecimento
 * cai bastante — só o suficiente pra manter a linguagem escura do site e
 * fazer a costura com o fundo preto (gradiente no ::after).
 */
.menu-overlay__backdrop {
  position: relative;
  z-index: 0;

  flex: 0 0 auto;

  width: 100%;
  height: 30vh;

  overflow: hidden;
}

.menu-overlay__backdrop img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  /*
   * Foto real do menu (2026-09-24): já é escura de origem (oficina à noite,
   * tinta dourada), então o escurecimento pesado de antes, pensado pra um
   * placeholder claro, só apagava o dourado. Sem grayscale e com brilho
   * quase cheio, o dourado da foto conversa com o do site.
   */
  filter:
    brightness(0.88)
    contrast(1.04);
}

.menu-overlay__backdrop::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 10, 0) 55%,
      rgba(10, 10, 10, 0.96) 100%
    );
}

.menu-overlay__inner {
  position: relative;
  z-index: 1;
}

.menu-overlay.is-open {
  visibility: visible;
  opacity: 1;

  transition:
    opacity var(--transition-base),
    visibility 0s linear;
}

.menu-overlay__inner {
  flex: 1;

  display: grid;
  grid-template-columns: minmax(0, 1fr);

  width: 100%;
  height: 100%;
  overflow-y: auto;

  padding-block: var(--space-8) var(--space-6);
}

.menu-overlay__primary {
  display: flex;
  flex-direction: column;
}

.menu-overlay__link {
  padding-block: 0.15em;

  color: var(--color-body);

  font-family: var(--font-family);
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  font-weight: 800;

  letter-spacing: -0.04em;
  line-height: 1.08;
  text-transform: uppercase;

  transition: color var(--transition-fast);
}

.menu-overlay__link:hover,
.menu-overlay__link:focus-visible,
.menu-overlay__link[aria-current="page"] {
  color: var(--color-gold-light);
}

.menu-overlay__secondary {
  display: flex;
  flex-direction: column;

  margin-top: var(--space-8);
  padding-top: var(--space-7);

  border-top: 1px solid var(--color-line);
}

.menu-overlay__group + .menu-overlay__group {
  margin-top: var(--space-7);
}

.menu-overlay__group-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  margin-bottom: var(--space-4);

  color: var(--color-gray);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu-overlay__group-label::before {
  content: "\2022";

  color: var(--color-gold);
  font-size: 1em;
  line-height: 1;
}

.menu-overlay__group-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.menu-overlay__group-link {
  color: var(--color-off-white);
  font-size: var(--text-lg);
  font-weight: 500;

  transition: color var(--transition-fast);
}

.menu-overlay__group-link:hover {
  color: var(--color-gold-light);
}

.menu-overlay__location {
  margin-top: var(--space-8);

  color: var(--color-body);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Trava o scroll do body quando o overlay está aberto */
body.menu-is-open {
  overflow: hidden;
}


/* =========================================================
   MAIN
   ========================================================= */

main {
  display: block;
  min-height: 100vh;
  padding-top: var(--header-height);
}


/* =========================================================
   RODAPÉ
   ========================================================= */

.site-footer {
  border-top: var(--border-width) solid var(--color-line);
  background: var(--color-surface);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);

  padding-block: var(--space-8);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/*
 * Coluna da marca no rodapé: mesmo logotipo horizontal do header
 * (logo-lion-art-horizontal.png). Chegou a virar uma caixa com wordmark
 * de texto numa rodada anterior, o Rodrigo pediu pra voltar a ser o
 * logotipo de verdade.
 */
.site-footer__logo {
  display: inline-flex;
  align-items: center;
}

.site-footer__mark-horizontal {
  width: auto;
  height: 52px;
}

.site-footer__signature {
  margin-top: var(--space-6);

  color: var(--color-off-white);
  font-family: var(--font-family);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

.site-footer__description {
  max-width: 26rem;
  margin-top: var(--space-4);

  color: var(--color-body);
  font-size: var(--text-xs);
  line-height: 1.6;
}

/*
 * Cada coluna (Ocasiões/O site/Contato, e a marca) ganha um divisor de 1px
 * antes dela — linha em cima no mobile (empilhado), à esquerda a partir de
 * 768px (lado a lado). Antes o rodapé empilhado no mobile era só texto
 * flutuando com espaço vazio entre os blocos, sem nenhuma estrutura
 * visual; os divisores dão a mesma leitura de "ficha técnica" que o resto
 * do site já usa (ver .menu-overlay__inner::before).
 */
.site-footer__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-line);
}

.site-footer__label {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  margin-bottom: var(--space-4);

  color: var(--color-gray);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer__label::before {
  content: "\2022";

  color: var(--color-gold);
  font-size: 1em;
  line-height: 1;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.site-footer__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;

  color: var(--color-body);
  font-size: var(--text-sm);
  font-weight: 700;
  transition: color var(--transition-fast);
}

.site-footer__link:hover {
  color: var(--color-gold-light);
}

.site-footer__link-icon {
  flex: 0 0 auto;

  width: 1rem;
  height: 1rem;

  color: var(--color-gold);
}

.footer-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  margin-top: var(--space-5);
  padding-inline: 1rem;

  border: 1px solid var(--color-gold);

  color: var(--color-off-white);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.footer-order:hover {
  background: var(--color-off-white);
  color: var(--color-black);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);

  padding-block: var(--space-5);

  border-top: var(--border-width) solid var(--color-line);

  color: var(--color-gray-muted);
  font-size: var(--text-xs);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;

  gap: var(--space-2) var(--space-5);

  color: var(--color-gray);
}

.site-footer__legal a,
.site-footer__legal button {
  padding: 0;

  color: inherit;

  font: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;

  transition: color var(--transition-fast);
}

.site-footer__legal a:hover,
.site-footer__legal button:hover {
  color: var(--color-off-white);
}

.site-footer__credit {
  transition: color var(--transition-fast);
}

.site-footer__credit:hover {
  color: var(--color-gray);
}


/* =========================================================
   BREAKPOINT — 768px
   ========================================================= */

@media (min-width: 768px) {

  .site-brand__mark {
    height: 44px;
  }

  .site-footer__mark-horizontal {
    height: 60px;
  }

  .site-footer__main {
    grid-template-columns: 1.8fr 1fr 1fr 1fr;
    gap: var(--space-7);
  }

  .site-footer__column {
    padding-top: 0;
    padding-left: var(--space-6);

    border-top: 0;
    border-left: var(--border-width) solid var(--color-line);
  }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  /*
   * A partir daqui o overlay vira duas colunas reais: texto à esquerda,
   * painel de imagem dedicado à direita (.menu-overlay__backdrop, ver
   * acima). .menu-overlay__inner deixa de ser um container--wide
   * centralizado de tela inteira e passa a ser só o item flex da esquerda,
   * então a centralização/max-width do utilitário container--wide é
   * neutralizada aqui e trocada por um padding-left que reproduz a mesma
   * matemática (borda esquerda sempre na mesma coluna do logo, em
   * qualquer largura), sem tentar competir por espaço com o painel.
   */
  .menu-overlay {
    flex-direction: row;
    align-items: stretch;
  }

  .menu-overlay__backdrop {
    order: 2;

    flex: 0 0 36%;

    width: 36%;
    height: auto;
  }

  .menu-overlay__backdrop img {
    filter:
      brightness(0.95)
      contrast(1.04);
  }

  .menu-overlay__backdrop::after {
    background:
      linear-gradient(
        90deg,
        rgba(10, 10, 10, 0.92) 0%,
        rgba(10, 10, 10, 0) 18%
      );
  }

  .menu-overlay__inner {
    order: 1;

    flex: 1 1 auto;

    width: auto;
    max-width: none;
    margin-inline: 0;

    grid-template-columns: minmax(0, 1.35fr) 1px minmax(0, 0.85fr);
    column-gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;

    padding-left: calc(
      var(--container-padding) + max(0px, calc((100vw - var(--container-wide)) / 2))
    );
    padding-right: clamp(2rem, 4vw, 3.5rem);
  }

  .menu-overlay__inner::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    width: 1px;
    background: var(--color-line);
  }

  .menu-overlay__secondary {
    margin-top: 0.5rem;
    padding-top: 0;
    border-top: 0;
  }
}


/* =========================================================
   BREAKPOINT — 1200px
   ========================================================= */

@media (min-width: 1200px) {

  .site-brand__mark {
    height: 56px;
  }

  .site-footer__mark-horizontal {
    height: 68px;
  }

  .site-header__actions {
    gap: var(--space-5);
  }

  .site-footer__main {
    grid-template-columns: 2.2fr 1fr 1fr 1fr;
    gap: var(--space-9);
  }
}

@media (max-width: 767px) {

  .site-header__inner {
    gap: var(--space-3);
  }

  .header-order {
    min-height: 34px;
    padding-inline: 0.7rem;
  }

  /*
   * Rodapé em 2 colunas no mobile, lado a lado numa única linha depois da
   * marca (era 3 blocos empilhados: marca / Para quem+O site / Contato
   * sozinho ocupando a linha toda, cada um com sua própria borda superior
   * picada). Agora: marca em cima com UM divisor de 1px contínuo por baixo
   * (atravessando as 2 colunas de uma vez, em vez de cada coluna picar sua
   * própria linha), "Para quem" na coluna esquerda, "O site" e "Contato"
   * empilhados juntos na coluna direita (mesmo divisor vertical de 1px
   * descendo por trás dos dois) — é ali, logo abaixo dos ícones de
   * WhatsApp/Instagram/E-mail, que o botão "Montar pedido" cai.
   */
  .site-footer__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    row-gap: var(--space-6);
  }

  .site-footer__brand {
    grid-column: 1 / -1;

    padding-bottom: var(--space-6);
    border-bottom: var(--border-width) solid var(--color-line);
  }

  .site-footer__column {
    padding-top: 0;
    border-top: 0;
  }

  /* "O site" — coluna direita, ao lado de "Para quem". */
  .site-footer__column:nth-of-type(3) {
    grid-column: 2;

    padding-left: var(--space-6);
    border-left: var(--border-width) solid var(--color-line);
  }

  /*
   * "Contato" (WhatsApp/Instagram/E-mail) empilha embaixo de "Para quem",
   * na coluna ESQUERDA — e o botão "Montar pedido", que no HTML mora
   * dentro dessa mesma div, precisa ficar sozinho na coluna DIREITA, ao
   * lado dela, não junto dos ícones. display: contents faz a div de
   * "Contato" parar de gerar caixa própria só no mobile (o desktop, onde
   * label + ícones + botão empilhados na mesma coluna já está aprovado,
   * nem entra nesse media query) — os 3 filhos (rótulo, nav dos ícones,
   * botão) passam a ser itens do grid do rodapé cada um por si, e cada um
   * ganha sua própria célula abaixo.
   */
  .site-footer__column:nth-of-type(4) {
    display: contents;
  }

  .site-footer__column:nth-of-type(4) .site-footer__label {
    grid-column: 1;
    grid-row: 3;
  }

  .site-footer__column:nth-of-type(4) nav {
    grid-column: 1;
    grid-row: 4;
  }

  .site-footer__column:nth-of-type(4) .footer-order {
    grid-column: 2;
    grid-row: 3;

    margin-top: 0;
  }

  .site-footer__bottom {
    align-items: center;

    text-align: center;
  }

  .menu-overlay__inner {
    padding-inline: var(--container-padding);
  }

  .menu-overlay__secondary {
    padding-bottom: var(--space-8);
  }
}


/* =========================================================
   BANNER DE COOKIES (LGPD, ver assets/js/consentimento.js)
   RECUSAR e ACEITAR são o mesmo botão em tudo (tamanho, cor,
   peso): recusar não pode custar mais que aceitar.
   ========================================================= */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;

  max-height: 90svh;
  overflow-y: auto;

  border-top: 1px solid var(--color-gold);
  background: var(--color-surface);

  animation: cookie-banner-in 420ms ease-out;
}

.cookie-banner[hidden] {
  display: none;
}

.cookie-banner:focus {
  outline: none;
}

@keyframes cookie-banner-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.cookie-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: var(--space-5);

  padding-block: var(--space-4);
}

.cookie-banner__text {
  display: flex;
  align-items: flex-start;

  gap: var(--space-3);
}

.cookie-banner__icon {
  flex: 0 0 auto;

  width: 1.6rem;
  height: 1.6rem;

  color: var(--color-gold);
}

.cookie-banner__text p {
  max-width: 62ch;

  color: var(--color-body);

  font-size: var(--text-sm);
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--color-off-white);

  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cookie-banner__text a:hover {
  color: var(--color-gold-light);
}

.cookie-banner__actions {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: var(--space-3);
}

.cookie-banner__button {
  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 3rem;
  padding-inline: 1.75rem;

  border: 1px solid var(--color-off-white);

  background: var(--color-off-white);
  color: var(--color-black);

  font-size: var(--text-xs);
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.cookie-banner__button:hover {
  border-color: var(--color-gold);

  background: var(--color-gold);
}

.cookie-banner__link {
  min-height: 3rem;
  padding-inline: 0.5rem;

  color: var(--color-body);

  font-size: var(--text-xs);
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.3em;

  transition: color var(--transition-fast);
}

.cookie-banner__link:hover {
  color: var(--color-gold-light);
}

/* Painel de preferências: abre embaixo do aviso. */
.cookie-banner__panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;

  gap: var(--space-5);

  padding-block: var(--space-5);

  border-top: 1px solid var(--color-line);
}

.cookie-banner__panel[hidden] {
  display: none;
}

.cookie-banner__cats {
  flex: 1 1 28rem;

  display: grid;
  gap: var(--space-4);

  margin: 0;
  padding: 0;

  list-style: none;
}

.cookie-cat strong {
  display: block;

  color: var(--color-off-white);

  font-size: var(--text-sm);
  font-weight: 700;
}

.cookie-cat small {
  display: block;

  margin-top: 0.2rem;

  color: var(--color-body);

  font-size: var(--text-xs);
  line-height: 1.5;
}

.cookie-cat--fixa {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: var(--space-4);
}

.cookie-cat__fixa {
  flex: 0 0 auto;

  color: var(--color-gray);

  font-size: var(--text-xs);
  font-weight: 700;

  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Chave liga/desliga, cantos retos (design system). Marcada = borda
   dourada e botão claro; desligada = tudo cinza. */
.cookie-switch {
  display: flex;
  align-items: flex-start;

  gap: var(--space-4);

  cursor: pointer;
}

.cookie-switch input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
}

.cookie-switch__track {
  flex: 0 0 auto;

  position: relative;

  width: 2.75rem;
  height: 1.5rem;

  border: 1px solid var(--color-gray);
  background: var(--color-black);

  transition: border-color var(--transition-fast);
}

.cookie-switch__track::after {
  content: "";

  position: absolute;
  top: 3px;
  left: 3px;

  width: calc(1.5rem - 8px);
  height: calc(1.5rem - 8px);

  background: var(--color-gray);

  transition: transform var(--transition-fast), background-color var(--transition-fast);
}

.cookie-switch input:checked + .cookie-switch__track {
  border-color: var(--color-gold);
}

.cookie-switch input:checked + .cookie-switch__track::after {
  transform: translateX(1.25rem);

  background: var(--color-off-white);
}

.cookie-switch input:focus-visible + .cookie-switch__track {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

@media (max-width: 767px) {

  .cookie-banner__inner {
    flex-direction: column;
    align-items: stretch;

    gap: var(--space-4);
  }

  .cookie-banner__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cookie-banner__actions .cookie-banner__button {
    padding-inline: 0.75rem;
  }

  .cookie-banner__actions .cookie-banner__link {
    grid-column: 1 / -1;
  }

  .cookie-banner__panel {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-banner__panel .cookie-banner__button {
    width: 100%;
  }
}


/* =========================================================
   PALETA DE CORES (assets/js/cores.js)
   Página de produto e montador. A cor de cada amostra vem
   de --chip: é cor real do tecido (exceção declarada do
   design system, amostra estilizada engana o cliente).
   ========================================================= */

.lion-paleta {
  min-width: 0;
}

.lion-paleta__topo {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  gap: 0.35rem 0.85rem;

  margin-bottom: 1rem;
}

.lion-paleta__rotulo {
  color: var(--color-gray);

  font-size: var(--text-xs);
  font-weight: 700;

  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lion-paleta__nome {
  color: var(--color-off-white);

  font-size: var(--text-base);
  font-weight: 700;

  letter-spacing: -0.01em;
}

.lion-paleta__conta {
  margin-left: auto;

  color: var(--color-gray);

  font-size: var(--text-xs);

  letter-spacing: 0.06em;
}

.lion-paleta__chips {
  display: flex;
  flex-wrap: wrap;

  gap: 0.5rem;
}

.lion-paleta__chip {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--chip-size, 2.75rem);
  height: var(--chip-size, 2.75rem);

  padding: 3px;

  border: 1px solid var(--color-line);
  border-radius: 0;

  background: transparent;

  cursor: pointer;

  transition: border-color var(--transition-fast);
}

.lion-paleta__cor {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--chip);

  /* Fio interno quase invisível: o preto continua lendo como amostra no fundo preto. */
  box-shadow: inset 0 0 0 1px rgba(244, 244, 242, 0.1);
}

.lion-paleta__chip svg {
  position: absolute;

  width: 42%;
  height: 42%;

  color: var(--color-white);

  opacity: 0;

  transition: opacity var(--transition-fast);
}

.lion-paleta__chip.is-claro svg {
  color: var(--color-black);
}

.lion-paleta__chip:hover {
  border-color: var(--color-gray);
}

.lion-paleta__chip.is-selected {
  border-color: var(--color-gold);
}

.lion-paleta__chip.is-selected svg {
  opacity: 1;
}

.lion-paleta__chip:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
}

.lion-paleta__aviso {
  margin: 0.9rem 0 0;

  color: var(--color-body);

  font-size: var(--text-sm);
  line-height: 1.45;
}

.lion-paleta__aviso a {
  color: var(--color-off-white);

  font-weight: 700;

  text-decoration: underline;
  text-decoration-color: var(--color-gold);
  text-underline-offset: 3px;

  transition: color var(--transition-fast);
}

.lion-paleta__aviso a:hover {
  color: var(--color-gold-light);
}

/* Foto sendo trocada pela versão na cor escolhida (cores.js). */
img[data-tinta-vez] {
  transition: opacity 0.25s ease;
}

img.is-tingindo {
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {

  img[data-tinta-vez],
  .lion-paleta__chip,
  .lion-paleta__chip svg {
    transition: none;
  }
}