/* =============================================================================
   ZARINNA — componentes
   -----------------------------------------------------------------------------
   Peças reutilizáveis: cabeçalho, navegação, gaveta, tiles de categoria, cards
   de produto, sacola, formulários e rodapé.
   Mobile-first. Depende de tokens.css e base.css.
   Cantos vivos, sem sombra pesada, hierarquia por espaço e filete.
   ========================================================================== */

/* ── Cabeçalho ────────────────────────────────────────────────────────────── */
.z-header {
  position: sticky;
  top: 0;
  z-index: var(--z-z-header);
  background-color: var(--z-bg-raised);
  border-bottom: var(--z-hairline);
  transition: transform var(--z-dur) var(--z-ease),
              background-color var(--z-dur) var(--z-ease);
}

/* Cabeçalho compacto depois de rolar */
.z-header[data-rolado="true"] .z-header__interno { padding-block: var(--z-sp-3); }
.z-header[data-rolado="true"] .z-marca img { height: 1.75rem; }
@media (min-width: 768px) {
  .z-header[data-rolado="true"] .z-marca img { height: 2rem; }
}

.z-header__interno {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--z-sp-4);
  padding-block: var(--z-sp-4);
  transition: padding-block var(--z-dur) var(--z-ease);
}
.z-marca img { transition: height var(--z-dur) var(--z-ease); }

/* Ações à direita (busca + sacola) */
.z-header__acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--z-sp-4);
}

.z-icone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid transparent;
  color: var(--z-text-display);
  transition: border-color var(--z-dur) var(--z-ease),
              color var(--z-dur) var(--z-ease);
}
.z-icone-btn:hover,
.z-icone-btn:focus-visible { border-color: var(--z-border-strong); }
.z-icone-btn svg { width: 1.25rem; height: 1.25rem; }

/* Contador da sacola */
.z-sacola-contador {
  position: absolute;
  top: 0.35rem;
  right: 0.25rem;
  min-width: 1.05rem;
  height: 1.05rem;
  padding-inline: 0.2rem;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--z-orange);
  color: var(--z-yellow);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.z-sacola-contador[data-visivel="true"] { display: inline-flex; }
.z-icone-btn--sacola { position: relative; }

/* Marca (logotipo) — sempre centralizado */
.z-marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.z-marca img {
  width: auto;
  height: 2rem;
}
@media (min-width: 768px) {
  .z-marca img { height: 2.5rem; }
}

/* Botão hambúrguer (mobile) */
.z-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--z-text-display);
}
.z-menu-btn svg { width: 1.35rem; height: 1.35rem; }
@media (min-width: 1024px) { .z-menu-btn { display: none; } }

/* ── Navegação ────────────────────────────────────────────────────────────── */
/* Desktop: links distribuídos ao redor do logotipo */
.z-nav { display: none; }
@media (min-width: 1024px) {
  .z-nav {
    display: flex;
    align-items: center;
    gap: var(--z-sp-7);
  }
}

.z-nav__link {
  position: relative;
  font-size: var(--z-fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-display);
  padding-block: var(--z-sp-2);
  white-space: nowrap;
  transition: color var(--z-dur) var(--z-ease);
}
.z-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--z-dur) var(--z-ease);
}
.z-nav__link:hover::after,
.z-nav__link:focus-visible::after,
.z-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.z-nav__link:hover,
.z-nav__link:focus-visible { color: var(--z-orange-deep); }

/* O cabeçalho tem duas faixas de nav no desktop: esquerda e direita */
.z-header__esq {
  display: flex;
  align-items: center;
  gap: var(--z-sp-4);
}
@media (min-width: 1024px) {
  .z-header__esq .z-nav { gap: var(--z-sp-6); }
}

/* ── Gaveta de navegação (mobile) ─────────────────────────────────────────── */
.z-gaveta {
  position: fixed;
  inset: 0;
  z-index: var(--z-z-drawer);
  display: grid;
  grid-template-columns: 1fr;
  visibility: hidden;
  pointer-events: none;
}
.z-gaveta[data-aberta="true"] {
  visibility: visible;
  pointer-events: auto;
}

.z-gaveta__fundo {
  position: absolute;
  inset: 0;
  background-color: var(--z-orange-deep);
  opacity: 0;
  transition: opacity var(--z-dur-slow) var(--z-ease);
}
.z-gaveta[data-aberta="true"] .z-gaveta__fundo { opacity: 0.35; }

.z-gaveta__painel {
  position: relative;
  width: min(88vw, 26rem);
  height: 100%;
  background-color: var(--z-bg-raised);
  border-right: var(--z-hairline);
  padding: var(--z-sp-5) var(--z-sp-6) var(--z-sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--z-sp-6);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--z-dur-slow) var(--z-ease-out);
}
.z-gaveta[data-aberta="true"] .z-gaveta__painel { transform: translateX(0); }

.z-gaveta__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* `width: auto` mantém a proporção real do logotipo: sem ele o atributo
   `width` do HTML (368) brigaria com a altura forçada e o desenho distorce. */
.z-gaveta__topo img { height: 2rem; width: auto; }

.z-gaveta__links { display: grid; gap: var(--z-sp-2); }
.z-gaveta__links a {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h3);
  color: var(--z-text-display);
  padding-block: var(--z-sp-3);
  border-bottom: var(--z-hairline);
  transition: padding-left var(--z-dur) var(--z-ease),
              color var(--z-dur) var(--z-ease);
}
.z-gaveta__links a:hover,
.z-gaveta__links a:focus-visible {
  padding-left: var(--z-sp-3);
  color: var(--z-orange-deep);
}

.z-gaveta__pe {
  margin-top: auto;
  display: grid;
  gap: var(--z-sp-3);
}

/* ── Tiles de categoria ───────────────────────────────────────────────────── */
.z-tiles {
  display: grid;
  gap: var(--z-sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .z-tiles { grid-template-columns: 1fr 1fr; gap: var(--z-sp-5); }
}

.z-tile {
  display: grid;
  gap: var(--z-sp-4);
}

/* A legenda fica FORA da foto: as fotos da loja já trazem texto e preço
   impressos na própria imagem, e sobrepor texto a texto briga com elas. */
.z-tile__midia {
  position: relative;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 4 / 5;
}
.z-tile__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--z-dur-reveal) var(--z-ease-out);
}
.z-tile:hover .z-tile__midia img,
.z-tile:focus-visible .z-tile__midia img { transform: scale(1.04); }

.z-tile__info { display: grid; gap: var(--z-sp-2); }
.z-tile__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h2);
  line-height: 1.05;
  color: var(--z-text-display);
}
.z-tile__meta {
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
}
.z-tile__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--z-sp-2);
  margin-top: var(--z-sp-2);
  font-size: var(--z-fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-orange);
  border-bottom: 1px solid var(--z-orange-α40);
  padding-bottom: 2px;
  justify-self: start;
}
.z-tile__acao svg { width: 1rem; height: 1rem; transition: transform var(--z-dur) var(--z-ease); }
.z-tile:hover .z-tile__acao svg { transform: translateX(0.25rem); }

/* ── Card de produto ──────────────────────────────────────────────────────── */
.z-vitrine {
  display: grid;
  gap: var(--z-sp-3) var(--z-sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .z-vitrine { gap: var(--z-sp-6) var(--z-sp-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .z-vitrine { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Vitrine editorial de 2 colunas em telas largas (destaque) */
.z-vitrine--dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) {
  .z-vitrine--dupla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--z-sp-7) var(--z-sp-6); }
}

.z-card {
  display: flex;
  flex-direction: column;
  gap: var(--z-sp-3);
}

.z-card__midia {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 3 / 4;
}
.z-card__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--z-dur-reveal) var(--z-ease-out),
              opacity var(--z-dur) var(--z-ease);
}
/* Segunda imagem revelada suavemente no hover */
.z-card__midia img + img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.z-card:hover .z-card__midia img,
.z-card:focus-within .z-card__midia img { transform: scale(1.04); }
.z-card:hover .z-card__midia img + img,
.z-card:focus-within .z-card__midia img + img { opacity: 1; }

/* Peça sem foto: reserva discreta, nunca a foto de outra peça no lugar */
.z-card__midia--vazia {
  display: grid;
  place-items: center;
  border: var(--z-hairline);
  background-color: var(--z-bg);
}
.z-card__midia--vazia .z-card__reserva {
  color: var(--z-orange-ink);
  text-align: center;
  padding-inline: var(--z-sp-4);
}

.z-card__selo {
  position: absolute;
  top: var(--z-sp-3);
  left: var(--z-sp-3);
  background-color: var(--z-yellow);
  color: var(--z-orange-ink);
  padding: 0.25rem var(--z-sp-2);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  line-height: 1.4;
}
.z-card__selo--status { background-color: var(--z-orange); color: var(--z-yellow); }

.z-card__info {
  display: grid;
  gap: 0.15rem;
}
.z-card__nome {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h4);
  line-height: 1.2;
  color: var(--z-text);
}
.z-card__preco {
  font-size: var(--z-fs-small);
  color: var(--z-text);
  font-variant-numeric: tabular-nums;
}
.z-card__preco--consulta {
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  font-size: var(--z-fs-label);
  color: var(--z-text-muted);
}
/* Cores como TEXTO, nunca como amostra: a paleta do site é fechada em duas
   matizes e uma amostra colorida traria cor concorrente para a interface. */
.z-card__variacoes {
  margin-top: var(--z-sp-1);
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
  line-height: 1.5;
}

/* Lista de produtos em linhas (categoria) */
.z-lista {
  display: grid;
  gap: var(--z-sp-6);
}
.z-linha {
  display: grid;
  gap: var(--z-sp-4);
  grid-template-columns: 1fr;
  padding-bottom: var(--z-sp-6);
  border-bottom: var(--z-hairline);
}
@media (min-width: 768px) {
  .z-linha { grid-template-columns: 340px 1fr; gap: var(--z-sp-6); align-items: start; }
}
.z-linha__midia {
  position: relative;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
  aspect-ratio: 3 / 4;
}
.z-linha__midia img { width: 100%; height: 100%; object-fit: cover; }
.z-linha__midia--vazia {
  display: grid;
  place-items: center;
  border: var(--z-hairline);
  background-color: var(--z-bg);
}
.z-linha__midia--vazia .z-script { color: var(--z-orange-ink); }
.z-linha__corpo { display: grid; gap: var(--z-sp-3); align-content: start; }
.z-linha__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h2);
  line-height: 1.05;
  color: var(--z-text-display);
}

/* ── Sacola (gaveta lateral direita) ──────────────────────────────────────── */
.z-bag {
  position: fixed;
  inset: 0;
  z-index: var(--z-z-bag);
  visibility: hidden;
  pointer-events: none;
}
.z-bag[data-aberta="true"] { visibility: visible; pointer-events: auto; }

.z-bag__fundo {
  position: absolute;
  inset: 0;
  background-color: var(--z-orange-deep);
  opacity: 0;
  transition: opacity var(--z-dur-slow) var(--z-ease);
}
.z-bag[data-aberta="true"] .z-bag__fundo { opacity: 0.35; }

.z-bag__painel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(92vw, 30rem);
  background-color: var(--z-bg-raised);
  border-left: var(--z-hairline);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--z-dur-slow) var(--z-ease-out);
}
.z-bag[data-aberta="true"] .z-bag__painel { transform: translateX(0); }

.z-bag__topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--z-sp-5) var(--z-sp-5);
  border-bottom: var(--z-hairline);
}
.z-bag__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h4);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-display);
}

.z-bag__corpo {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.z-bag__lista {
  padding: var(--z-sp-4) var(--z-sp-5);
  display: grid;
  gap: var(--z-sp-4);
  align-content: start;
}

.z-bag__vazia {
  display: grid;
  gap: var(--z-sp-4);
  justify-items: center;
  text-align: center;
  padding: var(--z-sp-8) var(--z-sp-4);
  color: var(--z-text-muted);
}

.z-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--z-sp-3);
  align-items: start;
  padding-bottom: var(--z-sp-4);
  border-bottom: var(--z-hairline);
}
.z-item__midia {
  width: 72px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: var(--z-bg-sunken);
}
.z-item__midia img { width: 100%; height: 100%; object-fit: cover; }
.z-item__midia--vazia { border: var(--z-hairline); background-color: var(--z-bg); }
.z-item__corpo { display: grid; gap: 0.2rem; }
.z-item__nome {
  font-family: var(--z-font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--z-text-display);
}
.z-item__variacao {
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
}
.z-item__preco {
  font-size: var(--z-fs-small);
  font-variant-numeric: tabular-nums;
}

/* Controle de quantidade */
.z-qtd {
  display: inline-flex;
  align-items: center;
  border: var(--z-hairline-strong);
  height: 2.25rem;
}
.z-qtd button {
  width: 2.25rem;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--z-text-display);
  transition: background-color var(--z-dur-fast) var(--z-ease);
}
.z-qtd button:hover,
.z-qtd button:focus-visible { background-color: var(--z-yellow-deep); }
.z-qtd span {
  min-width: 2rem;
  text-align: center;
  font-size: var(--z-fs-small);
  font-variant-numeric: tabular-nums;
}

.z-item__remover {
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text-muted);
  border-bottom: 1px solid transparent;
  transition: color var(--z-dur) var(--z-ease), border-color var(--z-dur) var(--z-ease);
  margin-top: var(--z-sp-2);
}
.z-item__remover:hover,
.z-item__remover:focus-visible { color: var(--z-orange-deep); border-color: currentColor; }

.z-bag__pe {
  border-top: var(--z-hairline);
  padding: var(--z-sp-5);
  display: grid;
  gap: var(--z-sp-4);
  background-color: var(--z-bg);
}
.z-bag__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.z-bag__total dt {
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
}
.z-bag__total dd {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h3);
  font-variant-numeric: tabular-nums;
  color: var(--z-text-display);
}
.z-bag__nota {
  font-size: var(--z-fs-small);
  color: var(--z-text-muted);
}
/* Entrega e pagamento — a informação que importa na hora de fechar. Por isso
   vem antes da nota e com um filete próprio, acima das ressalvas. */
.z-bag__aviso {
  border-top: var(--z-hairline);
  padding-top: var(--z-sp-4);
  font-size: var(--z-fs-small);
  color: var(--z-text);
}

/* ── Formulários ──────────────────────────────────────────────────────────── */
.z-campo { display: grid; gap: var(--z-sp-2); }
.z-campo > label {
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  color: var(--z-text);
}
.z-input,
.z-select,
.z-textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--z-sp-3) var(--z-sp-4);
  background-color: var(--z-yellow-soft);
  border: 1px solid var(--z-border-strong);
  border-radius: var(--z-radius);
  color: var(--z-text);
  font-size: var(--z-fs-body);
  transition: border-color var(--z-dur) var(--z-ease),
              background-color var(--z-dur) var(--z-ease);
}
.z-textarea { min-height: 7rem; resize: vertical; }
.z-input:focus,
.z-select:focus,
.z-textarea:focus {
  outline: none;
  border-color: var(--z-orange);
  background-color: var(--z-yellow);
}
.z-input::placeholder,
.z-textarea::placeholder { color: var(--z-text-muted); }

/* Grupo de opções (tamanho, cor, pagamento) */
.z-opcoes { display: flex; flex-wrap: wrap; gap: var(--z-sp-2); }
.z-opcao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  min-height: 2.75rem;
  padding-inline: var(--z-sp-4);
  border: 1px solid var(--z-border-strong);
  background-color: transparent;
  color: var(--z-text);
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  cursor: pointer;
  transition: border-color var(--z-dur) var(--z-ease),
              background-color var(--z-dur) var(--z-ease),
              color var(--z-dur) var(--z-ease);
}
.z-opcao:hover { border-color: var(--z-orange); }
.z-opcao[aria-pressed="true"],
.z-opcao[data-selecionado="true"] {
  background-color: var(--z-orange);
  border-color: var(--z-orange);
  color: var(--z-yellow);
}

/* ── Rodapé ───────────────────────────────────────────────────────────────── */
.z-rodape {
  background-color: var(--z-orange);
  color: var(--z-yellow);
  padding-block: var(--z-sp-9) var(--z-sp-6);
}
.z-rodape__grade {
  display: grid;
  gap: var(--z-sp-7);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .z-rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--z-sp-8); }
}
.z-rodape__marca img { height: 3rem; width: auto; }
.z-rodape__texto {
  margin-top: var(--z-sp-4);
  color: var(--z-yellow);
  font-size: var(--z-fs-small);
  max-width: 34ch;
}
/* Título de coluna do rodapé. É um `h2` de propósito: o rodapé fecha QUALQUER
   página, e níveis mais fundos (h4) quebrariam a ordem em telas que terminam
   num h1 ou h2 (o Lighthouse marca "heading-order"). */
.z-rodape h2 {
  color: var(--z-yellow);
  font-family: var(--z-font-body);
  font-size: var(--z-fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
  margin-bottom: var(--z-sp-4);
}
.z-rodape__links { display: grid; gap: var(--z-sp-3); }
.z-rodape__links a {
  color: var(--z-yellow);
  font-size: var(--z-fs-small);
}
.z-rodape__links a:hover,
.z-rodape__links a:focus-visible { text-decoration: underline; }
.z-rodape__base {
  margin-top: var(--z-sp-8);
  padding-top: var(--z-sp-5);
  border-top: 1px solid var(--z-yellow-α60);
  display: flex;
  flex-wrap: wrap;
  gap: var(--z-sp-3) var(--z-sp-5);
  justify-content: space-between;
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
}

/* ── Faixa de informações (pagamento / entrega) ───────────────────────────── */
.z-info {
  display: grid;
  gap: var(--z-sp-6);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .z-info { grid-template-columns: repeat(3, 1fr); gap: var(--z-sp-7); }
}
.z-info__item { display: grid; gap: var(--z-sp-3); align-content: start; }
.z-info__item svg { width: 1.75rem; height: 1.75rem; color: var(--z-text-display); }
.z-info__titulo {
  font-family: var(--z-font-display);
  font-size: var(--z-fs-h4);
  color: var(--z-text);
}
.z-info__texto { font-size: var(--z-fs-small); color: var(--z-text); max-width: 34ch; }
.z-info__lista { display: flex; flex-wrap: wrap; gap: var(--z-sp-2); }
.z-info__tag {
  border: 1px solid var(--z-border-strong);
  padding: 0.3rem var(--z-sp-3);
  font-size: var(--z-fs-label);
  text-transform: uppercase;
  letter-spacing: var(--z-ls-label);
}

/* ── Aviso de status / vazio ──────────────────────────────────────────────── */
.z-aviso {
  border: var(--z-hairline-strong);
  padding: var(--z-sp-4) var(--z-sp-5);
  font-size: var(--z-fs-small);
  color: var(--z-text);
  background-color: var(--z-yellow-soft);
}
.z-aviso--laranja {
  background-color: var(--z-orange);
  border-color: var(--z-orange);
  color: var(--z-yellow);
}

/* ── Bloqueio de scroll quando gaveta/sacola aberta ───────────────────────── */
body[data-travado="true"] { overflow: hidden; }