/* Product rail slider - phone only. Desktop keeps the bootstrap grid.
   JS (product-rail-slider.js) rebuilds .js-product-rail rows into Splide
   sliders on phone and puts the .hr-rail-nav arrows into the section
   heading (grouped with the "view all" link in .hr-rail-tools) or, when
   no heading exists (index tabs), right-aligned above the rail.
   Also styles the ideas-grid arrows injected by hr-ui.js. */

.hr-rail-nav { display: none; }

/* Any heading hosting the arrows becomes a flex row: title left,
   tools (view-all link + arrows) right. Designs already flex (hr3/hr5)
   keep their own alignment, this only fills the gap for the rest. */
.has-rail-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hr-rail-tools {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

@media (max-width: 767.98px) {
  .js-product-rail.is-slider {
    display: block;
    margin-left: 0;
    margin-right: 0;
  }

  .hr-rail-nav {
    display: inline-flex;
    gap: 6px;
  }

  /* Fallback placement inside the rail (no heading): row above, right */
  .js-product-rail > .hr-rail-nav {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }

  .hr-rail-nav button {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
    transition: opacity .15s ease;
  }

  .hr-rail-nav button:hover { opacity: 1; }

  .hr-rail-nav button:disabled { opacity: .25; cursor: default; }

  /* Product card fills its slide - bootstrap col sizing neutralized */
  .js-product-rail.is-slider .splide__slide > [class*='col-'] {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
}