/*
 * Product row — a ruled heading over a one-card-at-a-time carousel.
 *
 * The heading's rules are pseudo-elements rather than a border with the text
 * knocked out over a background: the knockout needed a background colour, and
 * --oxa-bg flips to near-black under prefers-color-scheme:dark, which painted a
 * black block behind the title.
 *
 * The track is CSS scroll-snap, so it works by touch, trackpad and keyboard on
 * its own; the arrows just call scrollBy.
 */

.oxa-prow {
  --oxa-prow-per: 6;      /* cards visible at once */
  --oxa-prow-gap: 1.25rem;
  --oxa-prow-rule: #a5a5a5;
  --oxa-prow-arrow-size: 30px;
  --oxa-prow-title-size: 22.65px;   /* measured off the reference heading */
  --oxa-prow-title-color: #131315;
  --oxa-prow-title-weight: 300;
  /* Card + price styling, taken from the reference design. */
  --oxa-prow-card-bg: #ffffff;
  --oxa-prow-card-border: #f2f2f2;
  --oxa-prow-card-radius: 4px;
  --oxa-prow-price-size: 18px;
  --oxa-prow-price-color: #43454b;
  --oxa-prow-price-weight: 400;

  max-width: 1280px;
  margin-inline: auto;
  padding-block: 2.5rem;
  font-family: var(--oxa-font-sans);
  /* The track's cards leak into this box's scrollable overflow, and a visible
   * box propagates that to the document — which is what gave the whole page a
   * horizontal scrollbar. `clip` contains it without creating a scroll
   * container (unlike `hidden`, which would also break position:sticky). */
  overflow-x: clip;
}

/* ---------- Ruled heading ---------- */
.oxa-prow__title {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 0 0 2rem;
  font-size: var(--oxa-prow-title-size);
  font-weight: var(--oxa-prow-title-weight);
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--oxa-prow-title-color);
  text-transform: uppercase;
}
.oxa-prow__title::before,
.oxa-prow__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--oxa-prow-rule);
}
.oxa-prow__title span { white-space: nowrap; }

/* ---------- Carousel ---------- */
.oxa-prow__carousel {
  position: relative;
  display: flex;
  align-items: center;
}

.oxa-prow__track {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Belt-and-braces: a scroll container already gets an automatic minimum size
   * of 0 as a flex item, but stating it means the track can never be sized by
   * the full width of its cards. */
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  /* Each card is an exact fraction of the viewport width, so a step lands
   * cleanly on the next card rather than part-way through one. */
  grid-auto-columns: calc((100% - (var(--oxa-prow-per) - 1) * var(--oxa-prow-gap)) / var(--oxa-prow-per));
  gap: var(--oxa-prow-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  /* Hide the scrollbar without disabling scrolling. */
  scrollbar-width: none;
}
.oxa-prow__track::-webkit-scrollbar { display: none; }

.oxa-prow__card {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
  scroll-snap-align: start;
}

.oxa-prow__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  /* The product photos are cut-outs on white, so the card is a white box with a
   * hairline border rather than a grey fill. */
  background: var(--oxa-prow-card-bg);
  border: 1px solid var(--oxa-prow-card-border);
  border-radius: var(--oxa-prow-card-radius);
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.oxa-prow__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.oxa-prow__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.2rem 0.5rem;
  background: var(--oxa-accent);
  color: var(--oxa-on-primary);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.oxa-prow__brand {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
}

.oxa-prow__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
}
.oxa-prow__name a { color: #1d1d1d; text-decoration: none; }

.oxa-prow__price {
  font-size: var(--oxa-prow-price-size);
  font-weight: var(--oxa-prow-price-weight);
  color: var(--oxa-prow-price-color);
  line-height: 1.25;
}
.oxa-prow__price del { font-weight: inherit; opacity: 0.55; margin-right: 0.375rem; }
/* Sale figure reads red — the accent is black, so pointing this at the accent
 * would make a discount indistinguishable from a normal price. */
.oxa-prow__price ins { text-decoration: none; color: var(--oxa-sale-price); font-weight: var(--oxa-fw-medium); }

/* ---------- Arrows ----------
 * Sit outside the track so they never cover a card. */
.oxa-prow__nav {
  position: absolute;
  z-index: 2;
  /* Centred on the card and sitting over it, rather than parked in outside
   * padding — matches the reference, where the chevrons overlap the artwork. */
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--oxa-prow-arrow-size) + 14px);
  height: calc(var(--oxa-prow-arrow-size) + 14px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Bare chevron: no pill, and deliberately no hover or active styling — the
   * only state it reflects is "there is nothing further this way". The default
   * focus ring is left intact so keyboard users can still see where they are. */
  border: 0;
  background: none;
  color: #1d1d1d;
  cursor: pointer;
  padding: 0;
}
.oxa-prow__nav svg {
  width: var(--oxa-prow-arrow-size);
  height: var(--oxa-prow-arrow-size);
  stroke-width: 1.5;   /* overrides the attribute in the markup */
}
.oxa-prow__nav[disabled] { opacity: 0.25; cursor: default; }
.oxa-prow__nav--prev { left: 4px; }
.oxa-prow__nav--next { right: 4px; }

.oxa-prow__cta-wrap { margin: 2rem 0 0; text-align: center; }
.oxa-prow__cta {
  display: inline-block;
  padding: 0.8rem 2rem;
  border: 1px solid #1d1d1d;
  color: #1d1d1d;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
}
.oxa-prow__cta:hover { background: #1d1d1d; color: #fff; }

@media (max-width: 1024px) {
  .oxa-prow { --oxa-prow-per: 4; }
}
/* Phones: two per page across the whole mobile range, not just ≤520px, so the
 * step size the auto-advance uses is the same on every phone.
 *
 * !important is required here, not sloppiness: template.php writes the `columns`
 * prop onto the section as an INLINE `--oxa-prow-per`, and an inline declaration
 * outranks any stylesheet rule however specific — media query or not. Without it
 * the desktop value (6) applied at every width and phones rendered six hairline
 * cards. The same applies to the other three homepage components. */
@media (max-width: 767px) {
  .oxa-prow { --oxa-prow-per: 2 !important; --oxa-prow-gap: 1rem; }
  .oxa-prow__title { font-size: calc(var(--oxa-prow-title-size) * 0.8); gap: 1rem; }
}