/* Loja (BeeStore) — classes .bs-*. Espelha o design BeeStore.dc.html. */
.bs-wrap { }
.bs-card { transition: transform .15s, box-shadow .15s; background: #fff; border: 1px solid var(--ink-100); border-radius: 16px; overflow: hidden; box-shadow: 0 3px 0 var(--ink-200); display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.bs-card:hover { transform: translateY(-4px); box-shadow: 0 6px 0 #E6D9BE; }
.bs-cover { position: relative; height: 152px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px 14px; border-bottom: 1px solid rgba(0,0,0,.06); }
.bs-cardbody { padding: 14px; display: flex; flex-direction: column; flex: 1; }
/* Prévia do material PREENCHENDO a capa do card (quando a API manda preview_url).
   `cover` + `top`: corta pelo rodapé da página, preservando o cabeçalho do material,
   que é a parte que identifica. As tarjas ficam por cima via z-index (ver sections/store.php). */
.bs-coverimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; background: #fff; }
.bs-cardtitle { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; line-height: 1.3; letter-spacing: -.01em; margin-bottom: 6px; }

.bs-nav a:hover { background: var(--ink-50); }
.bs-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.bs-scroll { scrollbar-width: none; }
.bs-scroll::-webkit-scrollbar { display: none; }

/* ===== Caixa de filtros no topo ===== */
.bs-filterbox { background: #fff; border: 1px solid var(--ink-100); border-radius: 18px; padding: 14px; margin-bottom: 22px; box-shadow: 0 2px 0 var(--ink-200); }
.bs-row1 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.bs-seg { display: flex; gap: 4px; background: var(--ink-50); border-radius: 12px; padding: 4px; flex-shrink: 0; }
.bs-segbtn { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 9px; cursor: pointer; border: none; white-space: nowrap; background: none; color: var(--ink-500); transition: all .14s; }
.bs-segbtn.is-on { font-weight: 800; background: #fff; color: var(--ink); box-shadow: 0 2px 0 #CFD3E3; }
.bs-field { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14.5px; color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink-200); border-radius: 11px; padding: 12px 15px; transition: all .15s; }
select.bs-field { font-weight: 600; color: #1F2340; padding: 12px 13px; cursor: pointer; }

/* Etapa (nível 1) */
.bs-stagerow { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink-200); }
.bs-stagelabel { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--ink-500); text-transform: uppercase; flex-shrink: 0; }
.bs-stages { display: flex; gap: 8px; flex: 1; min-width: 0; }
.bs-stagebtn { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13.5px; padding: 11px 16px; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap; border: 1.5px solid var(--ink-200); background: #fff; color: #1F2340; transition: all .14s; }
.bs-stagebtn.is-on { font-weight: 800; border-color: var(--accent-shadow); background: var(--blue-600); color: #FFFFFF; box-shadow: 0 2px 0 var(--accent-shadow); }
.bs-caret { font-size: 9px; opacity: .45; transition: transform .15s; }
.bs-stagebtn.is-on .bs-caret { opacity: .75; transform: rotate(180deg); }

/* Anos da etapa (nível 2) */
.bs-years { display: none; margin-top: 10px; padding: 12px; background: var(--blue-50); border: 1px solid var(--blue-200); border-radius: 13px; }
.bs-years.is-open { display: block; }
.bs-yearshead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.bs-yearshead span { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--blue-600); text-transform: uppercase; }
.bs-yearsclose { background: none; border: none; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 12.5px; color: var(--blue-600); cursor: pointer; padding: 2px 4px; }
.bs-yearsgrid { display: flex; flex-wrap: wrap; gap: 7px; }

/* Link "Filtros" — só mobile */
.bs-more { display: none; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 10px; background: none; border: none; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 13.5px; color: var(--blue-600); cursor: pointer; padding: 10px 4px 2px; }
.bs-more .bs-caret { font-size: 10px; opacity: 1; }
.bs-filterbox.is-open .bs-more .bs-caret { transform: rotate(180deg); }

/* Chips (anos) */
.bs-chip { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 13px; padding: 8px 13px; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--ink-200); background: #fff; color: #1F2340; transition: all .14s; }
.bs-chip:hover { background: var(--blue-50); border-color: var(--blue-200); }
.bs-chip.is-on { font-weight: 800; border-color: var(--accent-shadow); background: var(--blue-600); color: #fff; box-shadow: 0 2px 0 var(--accent-shadow); }

/* Cards de momento (scroll horizontal) */
.bs-moment { display: flex; align-items: center; gap: 13px; flex-shrink: 0; min-width: 236px; padding: 16px; border-radius: 16px; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; border: 1.5px solid var(--ink-100); background: var(--paper); box-shadow: 0 3px 0 var(--ink-200); text-align: left; }
.bs-moment.is-on { border-color: var(--blue-200); background: var(--blue-50); box-shadow: 0 3px 0 var(--ink-200); }

/* Responsivo (espelha o design) */
.bs-only-mobile { display: none !important; }
@media (max-width: 1024px) {
  .bs-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 760px) {
  .bs-only-mobile { display: block !important; }
  .bs-only-desktop { display: none !important; }
  .bs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .bs-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .bs-sec { padding-top: 36px !important; padding-bottom: 36px !important; }
  .bs-h1 { font-size: 31px !important; }
  .bs-h2 { font-size: 25px !important; }
  .bs-cover { height: 132px !important; }
  .bs-cardbody { padding: 11px !important; }
  .bs-cardtitle { font-size: 14px !important; }
  .bs-trust { grid-template-columns: 1fr 1fr !important; }
  .bs-hero-cta { flex-direction: column !important; align-items: stretch !important; }

  /* aberto: o card vira coluna para o link "Filtros" ir ao final */
  .bs-filterbox { display: flex !important; flex-direction: column !important; }
  .bs-filterbox .bs-more { order: 9; display: flex !important; }
  .bs-filterbox .bs-stagerow, .bs-filterbox .bs-years { order: 5; }

  /* fechado: só os tipos principais + o link "Filtros" */
  .bs-filterbox:not(.is-open) .bs-type-extra { display: none !important; }
  .bs-filterbox:not(.is-open) .bs-advanced { display: none !important; }
  .bs-filterbox:not(.is-open) .bs-stagerow { display: none !important; }
  .bs-filterbox:not(.is-open) .bs-years { display: none !important; }

  .bs-row1 { gap: 0 !important; }
  .bs-seg { width: 100%; display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bs-segbtn { width: 100%; min-width: 0 !important; white-space: normal !important; padding: 11px 8px !important; font-size: 12.5px !important; }
  .bs-advanced { display: flex !important; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 10px; }
  .bs-advanced input { flex: 1 1 100% !important; }
  .bs-advanced select { flex: 1 1 45% !important; min-width: 0; }
  .bs-stages { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 8px !important; }
  .bs-stagebtn { width: 100%; min-width: 0; padding: 13px 8px !important; font-size: 12.5px !important; white-space: normal !important; }
  .bs-moments { margin: 0 -16px !important; padding-left: 16px !important; padding-right: 16px !important; }
  .bs-yearsgrid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; }
  .bs-yearsgrid .bs-chip { width: 100%; padding: 11px 6px !important; font-size: 12.5px !important; text-align: center; }
}
@media (max-width: 420px) {
  .bs-grid { grid-template-columns: 1fr !important; }
  .bs-cover { height: 168px !important; }
}