/* Bichos & Cia 9.0.1 · /petshop/todos
   Até a 9.0.0 a página era uma lista de texto sem foto nem botão de compra.
   Agora: barra fixa com filtro e atalhos por categoria, cartões compactos com
   foto e "Adicionar", e os esgotados recolhidos no fim de cada categoria.
   Usa as cores da store-v840.css. */

.bc-site .shop-all-v901 {
  max-width: 1450px; margin: 0 auto 90px; padding: 0 max(3vw, 18px);
  --all-ink: var(--store-ink, #0b2a42);
  --all-teal: var(--store-teal, #078f91);
  --all-teal-dark: var(--store-teal-dark, #056b72);
  --all-mint: var(--store-mint, #e7f6f3);
  --all-line: var(--store-line, #dde8e4);
  --all-muted: var(--store-muted, #5d7180);
}

/* ---------- Barra fixa: filtro, estoque e categorias ---------- */
.bc-site .shop-all-toolbar-v901 {
  position: sticky; top: 92px; z-index: 6;
  margin: 26px 0 8px; padding: 12px;
  display: grid; grid-template-columns: minmax(220px, 380px) auto 1fr; gap: 10px 14px; align-items: center;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 22px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 14px 40px rgba(7, 29, 53, .10);
}
.bc-site .shop-all-search-v901 {
  position: relative; display: flex; align-items: center; height: 46px; margin: 0;
  border: 1px solid var(--all-line); border-radius: 14px; background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.bc-site .shop-all-search-v901:focus-within { border-color: var(--all-teal); box-shadow: 0 0 0 4px rgba(7, 143, 145, .12); }
.bc-site .shop-all-search-v901 svg {
  width: 18px; height: 18px; margin: 0 4px 0 14px; flex: 0 0 auto;
  fill: none; stroke: var(--all-teal-dark); stroke-width: 2.2; stroke-linecap: round;
}
.bc-site .shop-all-search-v901 input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px 0 6px; border: 0; outline: 0;
  background: transparent; color: var(--all-ink); font: 600 .92rem/1 inherit;
}
.bc-site .shop-all-sr-v901 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bc-site .shop-all-toggle-v901 {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; margin: 0;
  border: 1px solid var(--all-line); border-radius: 14px; background: #fff; cursor: pointer;
  color: var(--all-ink); font-size: .84rem; font-weight: 750; white-space: nowrap;
}
.bc-site .shop-all-toggle-v901 input { width: 18px; height: 18px; margin: 0; accent-color: var(--all-teal); }
.bc-site .shop-all-chips-v901 {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.bc-site .shop-all-chips-v901::-webkit-scrollbar { display: none; }
.bc-site .shop-all-chips-v901 a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px;
  border: 1px solid var(--all-line); border-radius: 999px; background: #fff;
  color: var(--all-ink); font-size: .8rem; font-weight: 750; text-decoration: none; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.bc-site .shop-all-chips-v901 a span {
  min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--all-mint);
  color: var(--all-teal-dark); font-size: .7rem; text-align: center;
}
.bc-site .shop-all-chips-v901 a:hover,
.bc-site .shop-all-chips-v901 a.is-active { border-color: var(--all-teal); background: var(--all-ink); color: #fff; }
.bc-site .shop-all-chips-v901 a.is-active span,
.bc-site .shop-all-chips-v901 a:hover span { background: rgba(255, 255, 255, .16); color: #fff; }

.bc-site .shop-all-empty-v901 {
  margin: 30px 0; padding: 22px; border-radius: 18px; text-align: center;
  background: #fff; border: 1px dashed var(--all-line); color: var(--all-muted);
}
.bc-site .shop-all-empty-v901 button {
  margin-left: 6px; border: 0; background: none; color: var(--all-teal-dark); font-weight: 800; text-decoration: underline; cursor: pointer;
}

/* ---------- Categoria ---------- */
.bc-site .shop-all-group-v901 { padding-top: 34px; scroll-margin-top: 190px; }
.bc-site .shop-all-group-v901 > header {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--all-line);
}
.bc-site .shop-all-group-v901 h2 {
  margin: 0; color: var(--all-ink); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.15;
}
.bc-site .shop-all-group-v901 > header > span {
  color: var(--all-muted); font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.bc-site .shop-all-group-v901 > header > a {
  margin-left: auto; color: var(--all-teal-dark); font-size: .84rem; font-weight: 800; text-decoration: none;
}
.bc-site .shop-all-group-v901 > header > a:hover { text-decoration: underline; }

.bc-site .shop-all-grid-v901 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px;
}

/* ---------- Cartão compacto ---------- */
.bc-site .mini-card-v901 {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--all-line); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 6px 18px rgba(7, 29, 53, .05);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .25s;
}
.bc-site .mini-card-v901:hover { transform: translateY(-3px); border-color: #b9dcd6; box-shadow: 0 16px 34px rgba(7, 29, 53, .10); }
.bc-site .mini-card-media-v901 {
  position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 12px;
  background: radial-gradient(circle at 50% 40%, #fff 0%, #f3f7f5 72%);
}
.bc-site .mini-card-media-v901 img { width: 100%; height: 100%; object-fit: contain; transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.bc-site .mini-card-v901:hover .mini-card-media-v901 img { transform: scale(1.04); }
.bc-site .mini-card-media-v901 > span {
  position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 999px;
  background: #e2462f; color: #fff; font-size: .62rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
}
.bc-site .mini-card-body-v901 { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.bc-site .mini-card-body-v901 small {
  color: var(--all-teal-dark); font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bc-site .mini-card-body-v901 h3 {
  margin: 0; min-height: 2.6em; font-family: inherit; font-size: .86rem; font-weight: 700; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-site .mini-card-body-v901 h3 a { color: var(--all-ink); text-decoration: none; }
.bc-site .mini-card-body-v901 h3 a:hover { color: var(--all-teal-dark); }
.bc-site .mini-card-price-v901 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-top: auto; padding-top: 6px; }
.bc-site .mini-card-price-v901 strong { color: var(--all-ink); font-size: 1.08rem; font-weight: 850; }
.bc-site .mini-card-price-v901 del { color: #8a99a6; font-size: .74rem; }
.bc-site .mini-card-body-v901 button {
  margin-top: 8px; min-height: 40px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--all-teal); color: #fff; font-size: .82rem; font-weight: 800;
  transition: background .2s, transform .15s;
}
.bc-site .mini-card-body-v901 button:hover { background: var(--all-teal-dark); }
.bc-site .mini-card-body-v901 button:active { transform: scale(.97); }
.bc-site .mini-card-out-v901 {
  margin-top: 8px; display: grid; place-items: center; min-height: 40px; border-radius: 12px;
  background: #f1f4f3; color: #7d8b96; font-size: .78rem; font-weight: 800;
}
.bc-site .mini-card-v901.is-sold-out .mini-card-media-v901 img { opacity: .55; filter: grayscale(.6); }

/* ---------- Esgotados recolhidos ---------- */
.bc-site .shop-all-soldout-v901 { margin-top: 16px; border: 1px dashed var(--all-line); border-radius: 18px; background: rgba(255, 255, 255, .55); }
.bc-site .shop-all-soldout-v901 > summary {
  cursor: pointer; list-style: none; padding: 14px 18px; color: var(--all-ink); font-size: .88rem; font-weight: 800;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
}
.bc-site .shop-all-soldout-v901 > summary::-webkit-details-marker { display: none; }
.bc-site .shop-all-soldout-v901 > summary::before {
  content: "+"; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--all-mint); color: var(--all-teal-dark); font-weight: 900;
}
.bc-site .shop-all-soldout-v901[open] > summary::before { content: "–"; }
.bc-site .shop-all-soldout-v901 > summary small { color: var(--all-muted); font-weight: 600; }
.bc-site .shop-all-soldout-v901 > .shop-all-grid-v901 { padding: 0 14px 14px; }

/* ---------- Filtro ativo ---------- */
.bc-site [data-shop-all-item][hidden],
.bc-site [data-shop-all-group][hidden] { display: none !important; }

/* ---------- Telas menores ---------- */
@media (max-width: 1220px) {
  .bc-site .shop-all-toolbar-v901 { top: 86px; }
}
@media (max-width: 900px) {
  .bc-site .shop-all-toolbar-v901 { grid-template-columns: minmax(0, 1fr) auto; top: 80px; }
  .bc-site .shop-all-chips-v901 { grid-column: 1 / -1; }
  .bc-site .shop-all-group-v901 { scroll-margin-top: 200px; }
}
@media (max-width: 640px) {
  .bc-site .shop-all-toolbar-v901 { top: 72px; margin: 14px -6px 4px; padding: 9px; border-radius: 18px; gap: 8px; }
  .bc-site .shop-all-search-v901, .bc-site .shop-all-toggle-v901 { height: 42px; }
  .bc-site .shop-all-toggle-v901 { padding: 0 10px; gap: 6px; font-size: .74rem; }
  .bc-site .shop-all-search-v901 svg { margin-left: 10px; }
  .bc-site .shop-all-search-v901 input { padding-right: 8px; font-size: .86rem; }
  .bc-site .shop-all-chips-v901 a { padding: 8px 12px; font-size: .76rem; }
  .bc-site .shop-all-group-v901 { padding-top: 26px; }
  .bc-site .shop-all-group-v901 > header > a { margin-left: 0; width: 100%; }
  .bc-site .shop-all-grid-v901 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bc-site .mini-card-body-v901 { padding: 9px 10px 11px; }
  .bc-site .mini-card-body-v901 h3 { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-site .mini-card-v901, .bc-site .mini-card-media-v901 img, .bc-site .shop-all-chips-v901 a { transition: none; }
  .bc-site .mini-card-v901:hover, .bc-site .mini-card-v901:hover .mini-card-media-v901 img { transform: none; }
}
