/*
 * Rolex servicing page: "View our servicing prices" button.
 * It sits at the top right of the hero, 12px under the Rolex header, and sticks under the store header on scroll.
 * The section's wrappers are display: contents so the sticky wrapper is positioned against the whole page.
 */

[data-pagebuilder="section"].rolex-servicing-cta-section {
    display: contents;
}

[data-pagebuilder="section"].rolex-servicing-cta-section div:not(.rolex-servicing-cta-wrap):not(.link-container) {
    display: contents;
}

.rolex-servicing-cta-wrap {
    position: sticky;
    top: 78px;
    z-index: 1030;
    height: 0;
    padding-right: 30px;
    text-align: right;
}

@media (min-width: 575px) {
    .rolex-servicing-cta-wrap {
        top: 80px;
        padding-right: 8vw;
    }
}

@media (max-width: 767px) {
    /* the store hides horizontal overflow with overflow-x: hidden, which makes body a scroll container and stops
       position: sticky; clip hides the same overflow without one */
    html:has(.rolex-servicing-cta-wrap),
    body:has(.rolex-servicing-cta-wrap) {
        overflow-x: clip !important;
    }
}

.rolex-servicing-cta-wrap .link-container {
    /* the platform wraps links in a centered block */
    text-align: right !important;
}

.rolex-servicing-cta-wrap .rolex-servicing-cta {
    position: relative;
    top: 12px;
    display: inline-block;
    height: 32px;
    padding: 0 14px;
    background: #127849;
    border: 1px solid #127849;
    border-radius: 6px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    text-decoration: none;
    /* the store's .btn rules set uppercase and wide tracking with !important */
    text-transform: none !important;
    letter-spacing: normal !important;
    text-indent: 0 !important;
}

.rolex-servicing-cta-wrap .rolex-servicing-cta:hover,
.rolex-servicing-cta-wrap .rolex-servicing-cta:focus-visible {
    background: #0b3e27;
    border-color: #0b3e27;
    color: #fff;
}

.rolex-servicing-cta-wrap .rolex-servicing-cta:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(18, 120, 73, 0.5);
    outline: 0;
}
