/* ======================================================================
   DESKTOP MARQUEE + SCROLL-TO-TOP FIX V5
   - Desktop announcement text loops seamlessly with no empty end gap.
   - Desktop-only scroll-to-top control appears after the page is scrolled.
   - Mobile layout remains unchanged.
   ====================================================================== */

@media (min-width: 768px) {
  /* Seamless ticker: two identical groups move as one continuous rail.
     At -50% the second group is in the exact position of the first one,
     so the animation restarts without any visible blank space or jump. */
  .desktop-announcement-bar {
    position: relative;
    overflow: hidden !important;
  }

  .desktop-announcement-track {
    display: flex !important;
    align-items: center !important;
    width: max-content !important;
    min-width: 0 !important;
    height: 48px !important;
    transform: translate3d(0,0,0);
    will-change: transform;
    animation: carpartAnnouncementSeamless 24s linear infinite !important;
  }

  .desktop-announcement-group {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    height: 48px !important;
  }

  .desktop-announcement-group > span {
    flex: 0 0 auto !important;
  }

  @keyframes carpartAnnouncementSeamless {
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); }
  }

  /* Desktop scroll-up button. */
  .desktop-scroll-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9997;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ef233c;
    color: #fff;
    box-shadow: 0 10px 28px rgba(239,35,60,.30);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background-color .2s ease;
  }

  .desktop-scroll-top:hover,
  .desktop-scroll-top:focus-visible {
    background: #d91f36;
  }

  .desktop-scroll-top:focus-visible {
    outline: 3px solid rgba(239,35,60,.25);
    outline-offset: 4px;
  }

  .desktop-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .desktop-scroll-top {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desktop-announcement-track {
    animation: none !important;
  }

  .desktop-scroll-top {
    transition: none !important;
  }
}