/* Scripps Tweaks: department-scroll-cue. The "Continue Scrolling" cue at the bottom left of a department page's pinned hero is small
   navy text with nothing behind it, so it is hard to see, and the theme's hero script fades it out as soon as the page is scrolled
   (it is invisible by the time the sharp hero image is two thirds up). This gives the cue a gray background with white text and
   arrow and shapes it like a button (a pill), so it reads over any background, and takes the fade over (below).
   Place: the pill sits halfway between the intro text above it and the bottom of the hero. The theme ends the intro text 106px
   above the bottom of the hero (the hero's bottom padding) and the pill is 33.2px tall (the label's 13.2px line and 10px of padding
   above and below), so its bottom is (106 - 33.2) / 2 = 36.4px up and it has 36.4px of space above and below. The pill's left edge
   is where the theme puts the cue's left edge (on the title's left edge), so the arrow and label start 14px further right. The
   cue already paints above the sliding image (it comes later in the markup at the same level); z-index 3 only keeps it there if
   that order ever changes.
   The fade: the theme's script writes an inline opacity (1 down to 0) on every scroll. Here the cue's opacity is
   var(--stw-cue-fade, 1), so it stays fully visible until the section after the hero starts to show, and
   assets/department-scroll-cue.js then sets --stw-cue-fade (1 down to 0) as that section comes up. The !important on opacity is
   there only to beat the theme script's inline style. The size of the type and hiding below 1440px wide (no runway there) are the
   theme's and are not touched. The selector carries the component's tag and the cue's class, so it outweighs the theme's whichever
   stylesheet loads last. */
flynt-component[name='SR_DepartmentHero'] .singleDepartment__scrollCue {
  background: var(--color-gray-600, #666666);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  color: #fff;
  inset-block-end: 36.4px;
  opacity: var(--stw-cue-fade, 1) !important;
  padding: 10px 18px 10px 14px;
  z-index: 3;
}