/*
 * Home, restyled.
 *
 * Same sections in the same order, same data, same links — this only changes
 * how it reads. Loaded after modern-theme.css so what it replaces stays
 * visible in one place.
 *
 * What was dated about it:
 *
 *   one weight of title  18px/800 for every section, with nothing to say which
 *                        rail mattered
 *   no edge-to-edge      rails were padded in from both sides, which hides the
 *                        fact that they scroll
 *   loose vertical rhythm 16px between sections whatever the section was
 *
 * The product cards' own sizing is in modern-theme.css (they are shared with
 * listings and the cart); the app's twin is mobile/src/screens/HomeScreen.js.
 */

:root {
  --ff-home-gutter: 14px;
  --ff-home-radius: 18px;
}

.bk-home { background: var(--bk-bg); }

/* ── sections ───────────────────────────────────────────────────────── */

/*
 * The section's own tint is left alone.
 *
 * It comes from `sectionTints` in shared/src/content/home.js and is applied
 * inline by both apps, so it is a deliberate token rather than something this
 * file should fight. Overriding it here would also have silently changed the
 * app's twin's reference point, which is what the parity rule exists to stop.
 * What changes is the shape around it: a softer radius, a hairline edge so a
 * pale tint still reads as a card, and padding that lets the rail reach the
 * edge.
 */
.bk-home .bk-section {
  margin: 10px var(--ff-home-gutter) 0;
  border-radius: var(--ff-home-radius);
  padding: 14px 0 16px;
  border: 1px solid rgba(16, 15, 26, 0.06);
  overflow: hidden;
}

.bk-home .bk-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 14px;
}

/*
 * `!important` only because the rule being replaced already uses it
 * (modern-theme.css `.bk-section-title`). Matching it is the smaller evil:
 * dropping it here would leave the old 17px/800 winning and the restyle
 * looking as though it had not applied.
 */
.bk-home .bk-section-title {
  font-size: 16.5px !important;
  font-weight: 750 !important;
  letter-spacing: -0.012em !important;
  line-height: 1.25 !important;
  /* Long section names wrap rather than shove "See all" off the row */
  text-wrap: balance;
  min-width: 0;
}

.bk-home .bk-see-all {
  flex-shrink: 0;
  gap: 3px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ff-surface-2, rgba(107, 33, 168, 0.07));
  color: var(--ff-purple);
  font-size: 12px;
  font-weight: 700;
  transition: background 0.18s ease;
}
.bk-home .bk-see-all:hover {
  background: rgba(107, 33, 168, 0.13);
  color: var(--ff-purple);
}

/*
 * The rail runs to the card's edge.
 *
 * Padded in from both sides, a horizontal list looks like a list that ends.
 * Bleeding it to the right edge — with the padding moved inside as scroll
 * padding — is what tells a thumb there is more to come.
 */
.bk-home .bk-product-scroll {
  padding: 2px 14px 2px;
  gap: 10px;
  scroll-padding-left: 14px;
  scroll-snap-type: x proximity;
}
.bk-home .bk-product-scroll > * { scroll-snap-align: start; }

/* ── hot categories ────────────────────────────────────────────────── */

.bk-home .bk-hot-strip {
  gap: 6px;
  padding: 12px var(--ff-home-gutter) 12px;
  background: var(--bk-surface);
  border-bottom: 1px solid var(--bk-border);
}

/* ── the service strip ─────────────────────────────────────────────── */

.bk-home .bk-service-strip {
  margin: 14px var(--ff-home-gutter) 0;
  border-radius: var(--ff-home-radius);
  border: 1px solid var(--bk-border);
  background: var(--bk-surface);
  padding: 12px 10px;
}
.bk-home .bk-service-item { gap: 6px; }
.bk-home .bk-service-item i { color: var(--ff-purple); opacity: 0.9; }
.bk-home .bk-service-item span { font-size: 11px; line-height: 1.35; opacity: 0.7; }

/* ── phones ────────────────────────────────────────────────────────── */

@media (max-width: 575.98px) {
  :root { --ff-home-gutter: 10px; --ff-home-radius: 16px; }
  .bk-home .bk-section { padding: 12px 0 14px; }
  .bk-home .bk-section-header { margin-bottom: 10px; padding: 0 10px; }
  .bk-home .bk-section-title { font-size: 15px !important; }
  .bk-home .bk-see-all { font-size: 11.5px; padding: 4px 9px; }
  .bk-home .bk-product-scroll { padding: 2px 10px; gap: 8px; scroll-padding-left: 10px; }
  .bk-home .bk-hot-strip { padding: 10px var(--ff-home-gutter); }
}

/* ── wider screens ─────────────────────────────────────────────────── */

@media (min-width: 992px) {
  :root { --ff-home-gutter: 0px; }
  .bk-home .bk-section { margin: 14px 0 0; padding: 18px 0 20px; }
  .bk-home .bk-section-header { padding: 0 20px; }
  .bk-home .bk-section-title { font-size: 19px !important; }
  .bk-home .bk-product-scroll { padding: 2px 20px; scroll-padding-left: 20px; }
  .bk-home .bk-service-strip { margin: 18px 0 0; }
}