@charset "UTF-8";
/* =========================================================================
   YLLIME — Favoritos e comparação
   Duas páginas, o mesmo cabeçalho de lista. Só carrega nelas.
   ========================================================================= */

.list-page{padding-bottom:var(--section-y)}

.list-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  padding-bottom:var(--s-4);
  margin-bottom:var(--s-6);
  border-bottom:var(--hairline);
}
.list-bar__count{margin:0;max-width:none;font-size:var(--t-sm);color:var(--c-muted)}
.list-bar__count strong{color:var(--c-ink);font-weight:500}

.list-bar__clear{
  border:0;padding:0;
  background:none;
  font-family:inherit;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease);
}
.list-bar__clear:hover{color:var(--c-error)}


/* -------------------------------------------------------------------------
   Lista vazia
   ------------------------------------------------------------------------- */
.list-empty{
  padding:var(--s-9) var(--s-5);
  border:1px dashed var(--c-line);
  text-align:center;
  color:var(--c-line);
}
.list-empty__title{font-size:var(--t-lg);color:var(--c-ink);margin:var(--s-4) 0 var(--s-2)}
.list-empty p{max-width:46ch;margin-inline:auto;color:var(--c-muted)}
.list-empty .btn{margin-top:var(--s-5)}


/* -------------------------------------------------------------------------
   Tabela de comparação

   O primeiro campo de cada linha fica grudado na esquerda enquanto a tabela
   rola: sem ele visível, três colunas adiante ninguém sabe mais se está
   olhando preço ou material.
   ------------------------------------------------------------------------- */
.compare-scroll{overflow-x:auto;overscroll-behavior-x:contain}

.compare{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:var(--t-sm);
}

.compare th,
.compare td{
  padding:var(--s-4);
  border-bottom:1px solid var(--c-line-soft);
  text-align:left;
  vertical-align:top;
}

.compare__label{
  position:sticky;
  left:0;
  z-index:1;
  width:150px;
  background:var(--c-surface);
  font-weight:400;
  font-size:var(--t-xs);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  color:var(--c-muted);
}

.compare__head{position:relative;width:200px;font-weight:400}

.compare__remove{
  position:absolute;
  top:var(--s-2);right:var(--s-2);
  z-index:2;
  display:grid;place-items:center;
  width:28px;height:28px;
  border:0;
  background:var(--c-surface);
  color:var(--c-muted);
  cursor:pointer;
  transition:color var(--dur-fast) var(--ease);
}
.compare__remove:hover{color:var(--c-error)}

/* Teto de largura na coluna do produto: numa tabela, o espaço que sobra vai
   todo para as colunas existentes, e com um só produto a foto crescia até
   ocupar a página inteira. */
.compare__product{display:block;max-width:180px;color:var(--c-ink)}
.compare__media{display:block;margin-bottom:var(--s-3)}
.compare__name{
  display:block;
  font-size:var(--t-sm);
  letter-spacing:var(--ls-wide);
  text-transform:uppercase;
  line-height:var(--lh-snug);
}
.compare__product:hover .compare__name{color:var(--c-green-700)}

/* Na tabela o preço já está dentro de uma célula estreita — sem margem. */
.compare .price{margin-top:0}