/* css-product-strip.css — styles that only matter when one of these sections is on the page:
 * recently-viewed, recommendations.
 * Linked from each of them (see the first line of the section file); theme.css
 * holds the common styles. */

/* ---- Product strips: frequently bought, recently viewed ------------------
 *
 * Native horizontal scrolling with snap points, not a scripted track. It
 * swipes, it takes a trackpad's sideways gesture, the scrollbar stays real for
 * anyone who navigates by it, and it works with the script switched off. The
 * arrows only add a click target for a mouse.
 */
.strip-section { padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); }

.strip__head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.strip__title { margin: 0; flex: 1; font-size: clamp(1.2rem, 2.4vw, 1.6rem); }

.strip__nav { display: flex; gap: 0.4rem; }

.strip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), opacity 0.15s var(--ease);
}

.strip__btn:hover { border-color: var(--line-2); }

/* Disabled rather than hidden at the ends: a control that disappears moves
 * the one beside it, and the row's edges are exactly when someone is
 * clicking repeatedly. */
.strip__btn[disabled] { opacity: 0.35; cursor: default; }

.strip__track {
  list-style: none;
  margin: 0;
  padding: 0 0 0.5rem;
  display: flex;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Room for a card's hover lift and shadow, which a scroll container would
   * otherwise clip. */
  padding-block-start: 0.25rem;
  scrollbar-width: none;
}

.strip__track::-webkit-scrollbar { display: none; }

/* Each card takes an equal share of the visible width, gaps accounted for, so
 * `--strip-cols: 4` really does show four. `flex: none` because a flex item's
 * default is to shrink, which would fit them all in and defeat the strip. */
.strip__item {
  flex: none;
  width: calc((100% - (var(--strip-cols) - 1) * clamp(0.75rem, 2vw, 1.5rem)) / var(--strip-cols));
  scroll-snap-align: start;
}

.strip__item > .product-card { height: 100%; }

@media (max-width: 63.99rem) {
  /* Two and a bit on a tablet, one and a half on a phone — the part-card at
     * the edge is what says the row continues. */
  .strip__item { width: calc((100% - 1rem) / 2.2); }
}
@media (max-width: 30rem) {
  .strip__item { width: calc((100% - 0.75rem) / 1.4); }
}