/* Recommended products slider.

   Colours here reproduce what the live product page actually computes. Two of
   live's rules are missing from this theme's distilled style.css, so they are
   restored below, scoped to this section only:

   1. Live carries an inline
      `.btn, .btn--primary, button[type="submit"] { background-color:#d1ff05
      !important; color:#0a1bf4 !important; border:none !important;
      border-radius:100px !important }`
      Because it is !important it outranks `.arrows-style--no-bg .gridy-arrow`,
      which is why live's slider arrows are lime with a blue chevron. Kept to
      this section so the amber PDP and buy-bar buttons are unaffected.

   2. Live's "non-homepage black text" rule is
      `html:not(.template-index) body a { color:#000 !important }`. This theme's
      copy adds `:not(.template-product)`, so on a product page the card title
      link fell through to `body.template-product a { color:#fff }` and came out
      white. Live resolves it black (specificity 0,1,3 beats 0,1,2).

   Everything else in the card — vendor, price — stays white via
   `body.template-product span { color:#fff !important }`, which both
   stylesheets share. That is deliberate; do not override it. */

.para-recommendations .gridy-arrows .gridy-arrow,
.para-recommendations .gridy-arrows .gridy-arrow:hover,
.para-recommendations .gridy-arrows .gridy-arrow:focus-visible {
  background-color: #d1ff05 !important;
  color: #0a1bf4 !important;
  border: none !important;
  border-radius: 100px !important;
  box-shadow: none !important;
}

.para-recommendations .card--product .card-title,
.para-recommendations .card--product .card-title a,
.para-recommendations .card--product .card-title a:visited {
  color: #000 !important;
}

/* ---------- Dead arrows --------------------------------------------------
   GridySlider always renders its arrows, even when the whole track already
   fits; clicking them then does nothing, which reads as a broken carousel.
   product-recommendations.js measures the track and sets `para-fits`. */
.para-recommendations .gridy-slider.para-fits .gridy-arrows {
  display: none !important;
}

.para-recommendations .gridy-slider.para-fits .gridy-track {
  justify-content: start;
}

/* The arrow strip spans the slider, so only the buttons themselves may take
   clicks — otherwise it swallows taps meant for the cards underneath. */
.para-recommendations .gridy-arrows {
  pointer-events: none;
}

.para-recommendations .gridy-arrows .gridy-arrow {
  pointer-events: auto;
}

/* ---------- Responsive ---------------------------------------------------
   Column counts come from the section settings (1 / 3 / 4, matching live).
   These rules cover only what the counts do not: snap alignment against the
   edge-to-edge mobile container, touch targets, and card proportions. None of
   them change a colour. */
.para-recommendations .gridy-track {
  scroll-padding-left: var(--container-margin, 16px);
}

.para-recommendations .card--product .card-body {
  padding-top: 12px;
}

.para-recommendations .card-title {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Phones: the section runs edge to edge, so inset the track rather than the
   section, keeping the cards aligned with the rest of the page. */
@media only screen and (max-width: 767px) {
  .para-recommendations .gridy-track {
    padding-left: var(--container-margin, 16px);
    padding-right: var(--container-margin, 16px);
  }

  .para-recommendations .gridy-arrow {
    min-width: 40px;
    min-height: 40px;
  }

  .para-recommendations .card-title {
    font-size: 1.6rem;
    line-height: 1.3;
  }

  .para-recommendations .card-vendor {
    display: block;
    margin-bottom: 2px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .para-recommendations .card-title {
    font-size: 1.7rem;
  }
}