/* ==========================================================================
   Viola — Products page (shared .page-hero lives in components.css)
   Sticky category nav: food-app pattern. The bar sticks right under the
   site header; js/products.js toggles .is-hidden on downward scroll (only
   while actually stuck) and removes it on the first upward scroll. Active
   tab follows the section in view (scroll spy).
   ========================================================================== */

.category-nav {
  position: sticky;
  inset-block-start: var(--header-height);
  z-index: 30; /* under the site header (40), above page content */
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-end: 2px solid var(--color-border-soft);
  padding-block: var(--space-2);
  transition: transform var(--dur-base) var(--ease-brand);
  will-change: transform;
}

/* slide fully up behind/above the header — smooth, like Amazon's bar */
.category-nav.is-hidden {
  transform: translateY(calc(-100% - var(--header-height)));
}

/* Horizontal scrollable tabs (no wrap). The ::before/::after auto-margin
   spacers center the row when it fits and still allow scrolling to both
   ends when it overflows (plain justify-content:center would clip). */
.category-nav .category-tabs {
  margin-block-end: 0;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 4px; /* room for the tabs' focus ring inside the scroller */
}

.category-nav .category-tabs::-webkit-scrollbar {
  display: none;
}

.category-nav .category-tabs::before,
.category-nav .category-tabs::after {
  content: "";
  margin-inline: auto;
}

.category-nav .category-tab {
  flex: none;
}

/* ---- Category sections (stacked; scroll spy targets) ---- */
/* anchor lands clear of the header + sticky bar */
.category-section {
  scroll-margin-block-start: calc(var(--header-height) + 92px);
}

.category-section + .category-section {
  margin-block-start: var(--space-6);
}

/* Wide promo strip under each category head (products-<id>.png, 2360×520).
   The <img> removes itself via onerror until the client uploads the file. */
.category-section__banner {
  display: block;
  inline-size: 100%;
  aspect-ratio: 59 / 13;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow);
  margin-block-end: var(--space-4);
}

.category-section__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
}

.category-section__head img {
  inline-size: 56px;
  block-size: 56px;
  object-fit: contain;
}

.category-section__head h2 {
  font-size: var(--fs-xl);
  line-height: 1.4;
}

/* narrow screens: the mascot + count chip leave the h2 ~160px, so 30px
   type wrapped «بزرگ» onto its own line — a slightly smaller size keeps
   «کوکی های بزرگ» on one line (client orphan-word fix 2026-07-15) */
@media (max-width: 480px) {
  .category-section__head h2 {
    font-size: 1.6rem;
  }
}

.category-section__count {
  margin-inline-start: auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--chip-text);
  background: var(--chip-bg);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}