/*
 * Category listings, restyled.
 *
 * Loaded after modern-theme.css so what it replaces stays visible in one place.
 * Three changes, all asked for:
 *
 *   1. Four products a row on a phone, two rows in the first screenful. It was
 *      two a row, so a listing showed four products above the fold and felt
 *      empty however much stock there was.
 *   2. The breadcrumb at the top is now a strip of sibling / child categories
 *      with icons, scrolling sideways, with the same names sticking under the
 *      header once it scrolls away — the home page's pattern.
 *   3. Sort and filters live behind one small button at the *end* of that
 *      strip, which gives back the whole row they used to occupy.
 *
 * The app's twin: mobile/src/screens/CategoryScreen.js.
 */

/* ── four a row ─────────────────────────────────────────────────────── */

/*
 * The card has to get small for four to fit a 360px screen — about 78px of
 * content each — so everything inside it shrinks with it. A 4-up grid with
 * cards styled for 2-up is how you get clipped names and a cut-off price.
 */
.ff-product-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/*
 * The listing's card IS the home page's card.
 *
 * `ProductListItem` renders `BlinkitProductCard` (`bk-prod-*`) — one component
 * for both places. All this does is make it small enough for four to a row: at
 * about 84px of content each, type and padding sized for a 156px rail card
 * simply will not fit, and a 4-up grid full of cards still sized for a rail is
 * how you get clipped names and a cut-off price.
 */

/*
 * A cell takes its width from the grid, not from the card.
 *
 * The card's own 156px is for a horizontal rail, where a fixed width is what
 * makes the row scroll. In a grid or a Bootstrap column it has to give that up,
 * or four of them overflow a phone. The older collection layouts
 * (collection-metro, collection-full-width, product-listing) lay their products
 * out in columns rather than `.ff-product-grid`, hence the second selector.
 */
.ff-product-grid .bk-prod-card,
.isotopeSelector > .bk-prod-card,
.col-grid-box > .bk-prod-card {
  min-width: 0;
  max-width: none;
  width: 100%;
  flex-shrink: 1;
}

@media (max-width: 575.98px) {
  .ff-product-grid { gap: 6px; }
  .ff-product-grid .bk-prod-card {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .ff-product-grid .bk-prod-body { padding: 5px 6px 6px; }
  .ff-product-grid .bk-prod-name {
    font-size: 11px;
    line-height: 1.25;
    /* Two lines, so every card in a row is the same height */
    min-height: 27px;
    -webkit-line-clamp: 2;
  }
  .ff-product-grid .bk-prod-weight { font-size: 9.5px; }
  .ff-product-grid .bk-prod-price-row { gap: 3px; margin: 3px 0 6px; flex-wrap: wrap; }
  .ff-product-grid .bk-prod-price { font-size: 12px; }
  .ff-product-grid .bk-prod-mrp { font-size: 9.5px; }
  .ff-product-grid .bk-add-btn { height: 28px; font-size: 10.5px; border-radius: 7px; }
  .ff-product-grid .bk-qty-stepper { height: 28px; border-radius: 7px; }
  .ff-product-grid .bk-qty-btn { width: 26px; height: 28px; font-size: 15px; }
  .ff-product-grid .bk-qty-num { font-size: 11px; }
  .ff-product-grid .bk-discount-badge { font-size: 8.5px; padding: 2px 5px; }
  .ff-product-grid .bk-out-badge { font-size: 8.5px; padding: 2px 3px; }
  .ff-product-grid .bk-notify-btn,
  .ff-product-grid .bk-notified { height: 28px; font-size: 9.5px; gap: 3px; }
}

/* Roomier screens can carry more than four */
@media (min-width: 992px) { .ff-product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1280px) { .ff-product-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ── the category strip ─────────────────────────────────────────────── */

.ff-subcat {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 10px 0 10px 10px;
  background: var(--bk-surface);
  border-bottom: 1px solid var(--bk-border);
}

/*
 * A leaf category has no sub-categories, so the row carries only the filter
 * button. Right-aligned and shallower, so an almost-empty bar does not read as
 * something that failed to load.
 */
.ff-subcat.is-bare { padding: 6px 10px; justify-content: flex-end; }
.ff-subcat.is-bare .ff-subcat-scroll { display: none; }
.ff-subcat.is-bare .ff-subcat-filter { margin-right: 0; }

.ff-subcat-scroll {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  flex: 1 1 auto;
  min-width: 0;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.ff-subcat-scroll::-webkit-scrollbar { display: none; }

.ff-subcat-item {
  flex: 0 0 auto;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--bk-dark);
  scroll-snap-align: start;
}
.ff-subcat-box {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ff-img-bg, rgba(0, 0, 0, 0.04));
  transition: box-shadow 0.18s ease;
}
.ff-subcat-box img { width: 100%; height: 100%; object-fit: cover; }
.ff-subcat-box i { font-size: 19px; color: var(--ff-purple); opacity: 0.85; }
.ff-subcat-label {
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  /* Two lines, then clipped: a third line makes the tiles different heights */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.75;
}
/* The one you are on, so the strip says where you are as well as where else */
.ff-subcat-item.is-current .ff-subcat-box {
  box-shadow: 0 0 0 2px var(--ff-purple);
}
.ff-subcat-item.is-current .ff-subcat-label { opacity: 1; font-weight: 700; color: var(--ff-purple); }

/*
 * The filter button, pinned at the end.
 *
 * Outside the scroller on purpose: a shopper who has scrolled to the last
 * category still needs the filters, and having to scroll back for them is the
 * one thing putting them in a row like this could make worse.
 */
.ff-subcat-filter {
  flex: 0 0 auto;
  position: relative;
  flex-direction: column;
  gap: 1px;
  width: 46px;
  margin-right: 10px;
  border: 1px solid var(--bk-border);
  border-radius: 12px;
  background: var(--bk-surface);
  color: var(--bk-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  height: 46px;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.ff-subcat-filter i { font-size: 16px; }
/* How many products this listing is showing. On the button because the row the
 * count used to live on is gone, and it is the number that tells a shopper
 * whether a short list is short or filtered. */
.ff-subcat-filter-count {
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
.ff-subcat-filter:hover { border-color: var(--ff-purple); }
.ff-subcat-filter.is-on {
  border-color: var(--ff-purple);
  background: rgba(107, 33, 168, 0.08);
  color: var(--ff-purple);
}
.ff-subcat-filter-dot {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ff-purple);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* ── the names, stuck under the header ─────────────────────────────── */

.ff-subcat-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 8;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 8px 10px;
  background: var(--bk-surface);
  border-bottom: 1px solid var(--bk-border);
  scrollbar-width: none;
  /* Out of the way until it is wanted, and not focusable while hidden */
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.ff-subcat-bar::-webkit-scrollbar { display: none; }
.ff-subcat-bar.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.ff-subcat-bar-item {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ff-surface-2, rgba(0, 0, 0, 0.04));
  color: var(--bk-dark);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.ff-subcat-bar-item.is-current { background: var(--ff-purple); color: #fff; }

/* ── the filter sheet now carries sort too ─────────────────────────── */

.ff-sidebar-inner .ff-sort-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  padding: 0 0 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--bk-border);
}
/*
 * The count and the ✕ on one row, pushed to the right.
 *
 * The ✕ is the row's anchor — a dismiss belongs in the corner a thumb already
 * reaches for — and the count sits just inside it rather than on a line of its
 * own, which is the row this saves.
 */
.ff-sort-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 5px 8px;
  border-bottom: 1px solid var(--bk-border);
}
.ff-sidebar-inner .ff-sidebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: var(--ff-surface-2, rgba(0, 0, 0, 0.05));
  color: var(--bk-dark);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.ff-sidebar-inner .ff-sidebar-close:hover { background: rgba(0, 0, 0, 0.1); }

/* 5px of breathing room each side, so the control is not flush to the sheet */
.ff-sidebar-inner .ff-sort-right { width: 100%; padding: 0 5px; box-sizing: border-box; }
.ff-sidebar-inner .ff-sort-select { width: 100%; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; }
/* `display` as well as the sizes: modern-theme.css hides the count outright
   below 480px, where it used to sit above the grid and compete for the row.
   In the sheet it is the row's content, so it stays. */
.ff-sidebar-inner .ff-sort-count { display: inline; font-size: 12px; opacity: 0.6; }

/* ── tablet and up: the sidebar is on screen ────────────────────────── */

/*
 * The filter button goes away once the filter panel itself is visible.
 *
 * Above this width the sidebar is permanently open beside the products, so the
 * button opened a drawer over a panel that was already there — two ways to the
 * same controls, one of which looked broken. The count goes with it; the
 * sidebar carries its own.
 */
@media (min-width: 768px) {
  .ff-subcat-filter { display: none; }
  /* Nothing pinned at the end any more, so the strip uses the full width */
  .ff-subcat { padding-right: 10px; }
  /* And the names stuck under the header are a phone affordance */
  .ff-subcat-bar { display: none; }
  /*
   * So is the ✕. Up here the panel is a column of the page, not a sheet over
   * it, and there is nothing to dismiss — the count keeps the row.
   */
  .ff-sidebar-inner .ff-sidebar-close { display: none; }
  .ff-sort-head { justify-content: flex-start; padding-left: 14px; }
}