/* ==========================================================================
   Component: Product Card (livro) + carrossel "Últimos Lançamentos"
   ========================================================================== */

/* --- Carrossel horizontal --- */

ul.products {
  display: flex !important;
  align-items: flex-start; /* cada card com a altura do proprio conteudo */
  gap: var(--space-6);
  margin: 0;
  /* respiro vertical: o overflow-x vira overflow-y clip, entao o padding evita
     que o card cortado no topo/sombra ao subir 4px no hover */
  padding: var(--space-8) 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

ul.products::-webkit-scrollbar {
  display: none;
}

/* mata os clearfix que o WooCommerce injeta na lista */
ul.products::before,
ul.products::after {
  display: none !important;
  content: none !important;
}

/* --- Card --- */

.product-card {
  scroll-snap-align: start;
  position: relative;
  display: flex !important;
  flex-direction: column;
  flex: 0 0 clamp(18rem, 30vw, 25rem);
  max-width: 25rem;    /* 400px */
  height: 31.5rem;     /* 504px — todos os cards com a mesma altura */
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--color-fg);
  background-color: #fff;
  border-radius: 1.5rem; /* 24px */
  /* Figma: X0 Y4 Blur28 Spread0 #000 5% */
  box-shadow: 0 4px 28px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition:
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default);
}

.product-card:hover {
  /* sobe na pilha pra não ir atrás do card vizinho (posterior no DOM) */
  z-index: 2;
  box-shadow: 0 8px 36px 0 rgba(0, 0, 0, 0.09);
  transform: translateY(-0.25rem);
}

/* destaque: só o último lançamento, com a cor cadastrada no livro */
.product-card--featured {
  color: #fff;
  background-color: var(--card-highlight, var(--color-primary));
}

.product-card__link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-6);
  color: inherit;
  text-decoration: none;
}

/* --- Cabeça: título, subtítulo, preço --- */

.product-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1); /* 4px — o line-height completa o respiro */
}

.product-card__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-h4); /* 24.19px */
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: inherit;
}

.product-card__subtitle {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle);
}

.product-card--featured .product-card__subtitle {
  color: rgba(255, 255, 255, 0.82);
}

.product-card__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.product-card__price {
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-medium);
  color: inherit;
}

/* o wc_price traz spans próprios; herdam a cor do card */
.product-card__price .amount,
.product-card__price bdi {
  color: inherit;
}

.product-card__price--free {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.product-card--featured .product-card__price--free {
  color: inherit;
}

.product-card__discount {
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  font-family: var(--font-ui);
  font-size: var(--text-small); /* 11.67px */
  font-weight: var(--font-medium);
  color: #0a0a0a;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* --- Capa --- */

/* espaco ate a capa vem do gap do .product-card__link (space-8) */
.product-card__cover {
  margin-top: 0;
}

.product-card__cover img {
  display: block;
  width: 100% !important;
  max-width: 13rem; /* 208px */
  height: auto !important; /* vence o height="300" do HTML; nunca altura fixa */
  margin: 0 auto !important; /* centra o block (max-width) */
  border-radius: var(--radius-sm); /* 4px */
}

.product-card__cover img.woocommerce-placeholder {
  aspect-ratio: 3 / 4;
  object-fit: contain;
  padding: var(--space-8);
  background-color: var(--color-panel);
}

/* placeholder quando não há capa cadastrada */
.product-card__placeholder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  aspect-ratio: 3 / 4;
  padding: var(--space-6);
  color: var(--color-cream);
  background:
    var(--texture-noise),
    linear-gradient(180deg, var(--color-neutral-950), var(--color-neutral-800));
  border-radius: var(--radius-lg);
  box-shadow: 0 1rem 2.5rem rgba(5, 5, 5, 0.18);
}

.product-card__placeholder-mark {
  width: 4rem;
}

.product-card__placeholder-title {
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
}

/* ==========================================================================
   Seção "Mais vendidos" — mesmo card da home (trilha-card), mas com dados do
   produto e uma foto de destaque full-bleed cobrindo a base.
   ========================================================================== */

.shop-sellers {
  /* sem padding-top: a distancia ate o catalogo ja vem do bottom dele + do
     respiro do carrossel. O bottom aqui separa da proxima seção. */
  padding-bottom: var(--space-24);
}

.shop-sellers__scroll {
  display: flex;
  gap: var(--space-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* respiro vertical pro hover (mesmo motivo do carrossel de lançamentos) */
  padding: var(--space-8) 0;
  /* sangra até a borda direita da página */
  margin-right: calc(-1 * var(--space-20));
  padding-right: var(--space-20);
}

.shop-sellers__scroll::-webkit-scrollbar {
  display: none;
}

.shop-sellers__scroll > * {
  scroll-snap-align: start;
}

.seller-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 19.5rem;  /* 312px — igual ao trilha-card */
  height: 25.5rem; /* 408px */
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-decoration: none;
  box-shadow:
    0 2px 4px -2px rgba(10, 10, 10, 0.06),
    0 14px 30px -18px rgba(10, 10, 10, 0.16);
  transition:
    box-shadow var(--duration-normal) var(--ease-default),
    transform var(--duration-normal) var(--ease-default);
}

.seller-card:hover {
  transform: translateY(-0.25rem);
  box-shadow:
    0 6px 12px -4px rgba(10, 10, 10, 0.08),
    0 22px 44px -20px rgba(10, 10, 10, 0.22);
}

.seller-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
}

.seller-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h5); /* 20.16px */
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

/* duas linhas fixas: mantém o corte da foto na mesma altura em todos os cards */
.seller-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  height: calc(2 * var(--leading-relaxed) * var(--text-p));
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle); /* 6E6E72 */
}

.seller-card__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.seller-card__price {
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-medium);
  color: var(--color-fg);
}

.seller-card__price .amount,
.seller-card__price bdi {
  color: inherit;
}

.seller-card__discount {
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  font-family: var(--font-ui);
  font-size: var(--text-small); /* 11.67px */
  font-weight: var(--font-medium);
  color: #0a0a0a;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Foto: pega o resto da altura do card e cobre a caixa (crop), full-bleed. */
.seller-card__cover {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.seller-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--duration-slow) var(--ease-out);
}

.seller-card:hover .seller-card__cover img {
  transform: scale(1.04);
}

.seller-card__cover--placeholder {
  background: linear-gradient(135deg, var(--color-neutral-100), var(--color-neutral-200));
}

/* ==========================================================================
   Seção "Todos os livros" — grid de cards (fundo branco + contorno), 4 por
   linha, cada card preenchendo a coluna. O filtro de categoria controla o que
   aparece aqui.
   ========================================================================== */

.shop-all {
  padding-bottom: var(--space-24);
}

/* Na página de ebooks não há título de seção, então o grid precisa de respiro
   até o hero. */
.shop-page--ebooks .shop-all,
.shop-page--posteres .shop-all {
  padding-top: var(--space-30); /* 120px */
}

/* Grudados: gap de 1px sobre um fundo na cor do contorno vira divisória única
   entre os cards; a borda do container fecha as bordas externas. Sem radius. */
.shop-all__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-border);
  border: 1px solid var(--color-border);
}

@media (max-width: 900px) {
  .shop-all__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .shop-all__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Section 100%: o grid sangra o padding lateral do container e cola nas bordas
   da tela (o título "Todos os livros" segue alinhado ao conteúdo). Só onde o
   container tem esse padding (>=1024). Remove as bordas laterais, que ficariam
   coladas na borda da viewport. */
@media (min-width: 1024px) {
  .shop-all__grid {
    margin-inline: calc(-1 * var(--container-fluid-padding));
    border-inline: none;
  }
}

/* display:flex faz o link preencher a altura do item (cards iguais na linha) */
.book-item {
  display: flex;
  margin: 0;
}

.book-item__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-6);
  text-align: center;
  text-decoration: none;
  color: inherit;
  background-color: #fff;
  transition: background-color var(--duration-normal) var(--ease-default);
}

.book-item__link:hover {
  background-color: var(--color-panel);
}

/* --- Capa: caixa 3:4 uniforme, menor que o card e centralizada --- */

.book-item__cover {
  width: 100%;
  max-width: 13rem; /* 208px — capa não preenche o card inteiro */
}

/* aspect-ratio 3:4 dá a mesma caixa a todas; contain preenche a largura sem
   cortar a arte (eventual sobra fica branca, invisível sobre o card). */
.book-item__cover img {
  display: block;
  width: 100% !important;
  aspect-ratio: 3 / 4;
  height: auto !important;
  object-fit: contain;
  margin: 0 !important;
  background-color: #fff;
  border-radius: var(--radius-sm);
}

.book-item__cover-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: var(--space-6);
  color: var(--color-cream);
  font-family: var(--font-heading);
  font-size: var(--text-h5);
  font-weight: var(--font-medium);
  line-height: var(--leading-tight);
  text-align: center;
  background:
    var(--texture-noise),
    linear-gradient(180deg, var(--color-neutral-950), var(--color-neutral-800));
  border-radius: var(--radius-sm);
}

/* --- Textos --- */

.book-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-h5); /* 20.16px */
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  color: var(--color-fg);
}

.book-item__subtitle {
  margin-top: calc(-1 * var(--space-2)); /* aproxima do título (gap do link é 16) */
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-medium);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-subtle); /* 6E6E72 */
}

.book-item__price-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.book-item__price {
  font-family: var(--font-ui);
  font-size: var(--text-p); /* 14px */
  font-weight: var(--font-medium);
  color: var(--color-fg);
}

.book-item__price .amount,
.book-item__price bdi {
  color: inherit;
}

.book-item__price--free {
  color: var(--color-primary);
  font-weight: var(--font-semibold);
}

.book-item__discount {
  padding: var(--space-1) var(--space-2); /* 4px 8px */
  font-family: var(--font-ui);
  font-size: var(--text-small); /* 11.67px */
  font-weight: var(--font-medium);
  color: #0a0a0a;
  background-color: var(--color-accent);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* Livro já exibido nos carrosseis: escondido na visão padrão (os "outros").
   Ao filtrar (.is-filtering), ele reaparece — sujeito só ao filtro de categoria. */
.shop-page:not(.is-filtering) .shop-all .book-item--dup {
  display: none;
}

.book-item.is-filtered-out {
  display: none;
}

/* Com um filtro ativo a página vira "só a lista": somem os carrosséis, fica
   só o hero (com o filtro) + o grid "Todos os livros". */
.shop-page.is-filtering .shop-catalog,
.shop-page.is-filtering .shop-sellers {
  display: none;
}