/* ByAnhStudio — shop "Load more" and link chips (01.10.2026). */

/* Chips are links now (they carry the filter in the URL). Same look as the
   pressed button chips. */
a.chip--tab { text-decoration: none; }
/* design-v2.css sets every chip with !important (to beat the block theme),
   so the active state has to match that. */
.byanh-page .chip--tab[aria-current="true"],
.chip--tab[aria-current="true"] {
  background: var(--brand-primary) !important;
  color: var(--text-on-primary) !important;
  border-color: var(--brand-primary) !important;
}
.byanh-page a.chip--tab:not([aria-current]):hover { border-color: var(--color-ink-400) !important; }

/* While a new search or filter loads, dim the old results. */
[data-shop].is-loading [data-shop-grid] {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

.shop-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  text-align: center;
}
.shop-more__note { font-size: var(--text-body-sm-size); margin: 0; }
.shop-more__bar {
  width: min(240px, 70%);
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--border-subtle);
  overflow: hidden;
}
.shop-more__bar span {
  display: block;
  height: 100%;
  background: var(--brand-primary);
  transition: width 0.3s ease-out;
}
.shop-more .btn { min-width: 220px; margin-top: var(--space-2); }
.shop-more .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

@media (max-width: 599px) {
  .shop-more .btn { width: 100%; }
}