/**
 * Rolex RCPO Landing — CMS HTML (blockManagement/rolexrcpo/landing/*).
 * CMS blocks are NOT wrapped in .rolex-index-banner / .rolex-index-contact;
 * rules here mirror rolex-index-banners.css + rolex-index-contact.css under .rolex-wrapper.rolexrcpo.
 */

/* —— Responsive images —— */
@media only screen and (max-width: 767px) {
    .rolex-wrapper.rolexrcpo .hide-mobile {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .rolex-wrapper.rolexrcpo .hide-tablet {
        display: none !important;
    }
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .hide-desktop {
        display: none !important;
    }
}

/* —— Typography (headline16 not in rolex-index-welcome.css) —— */
.rolex-wrapper.rolexrcpo .rolex-collection-headline16,
.rolex-wrapper.rolexrcpo .rolex-collection-headline20,
.rolex-wrapper.rolexrcpo .rolex-collection-headline24,
.rolex-wrapper.rolexrcpo .rolex-collection-headline36,
.rolex-wrapper.rolexrcpo .rolex-collection-headline50 {
    color: #472b20;
    font-weight: 700;
}

.rolex-wrapper.rolexrcpo .rolex-collection-headline16:first-child,
.rolex-wrapper.rolexrcpo .rolex-collection-headline20:first-child,
.rolex-wrapper.rolexrcpo .rolex-collection-headline24:first-child,
.rolex-wrapper.rolexrcpo .rolex-collection-headline36:first-child,
.rolex-wrapper.rolexrcpo .rolex-collection-headline50:first-child {
    padding-top: 0;
}

/* CMS push labels only — do not hit .rolexrcpo-landing-products carousel cards */
.rolex-wrapper.rolexrcpo .rolexrcpo-landing-top .rolex-collection-headline16,
.rolex-wrapper.rolexrcpo .rolexrcpo-landing-content .rolex-collection-headline16 {
    font-size: clamp(0.75rem, calc(0.625rem + 0.3125vw), 1rem);
    line-height: 1.375;
}

.rolex-wrapper.rolexrcpo .rolexrcpo-landing-top .rolex-collection-headline16 *,
.rolex-wrapper.rolexrcpo .rolexrcpo-landing-content .rolex-collection-headline16 *,
.rolex-wrapper.rolexrcpo .rolex-collection-headline36 * {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* CON-5c: block noPadding* → rolex-collection.css */

.rolex-wrapper.rolexrcpo .rolex-collection-block .rolex-collection-image,
.rolex-wrapper.rolexrcpo .rolex-collection-block .rolex-collection-text {
    padding-top: max(7vh, 60px);
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .rolex-collection-block .rolex-collection-image,
    .rolex-wrapper.rolexrcpo .rolex-collection-block .rolex-collection-text {
        padding-top: max(10vh, 90px);
    }
}

.rolex-wrapper.rolexrcpo .rolex-collection-block .rolex-collection-image:first-child,
.rolex-wrapper.rolexrcpo .rolex-collection-block .rolex-collection-text:first-child {
    padding-top: 0;
}

.rolex-wrapper.rolexrcpo .rolex-collection-image.fullWidth {
    width: 100%;
    display: block;
}

.rolex-wrapper.rolexrcpo .rolex-collection-image img,
.rolex-wrapper.rolexrcpo .rolex-contactus-contactGrid-item .imageWrapper img {
    display: block;
    width: 100%;
    height: auto;
}

.rolex-wrapper.rolexrcpo .rolex-collection-text.large,
.rolex-wrapper.rolexrcpo .rolex-collection-block.large.noPadding,
.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel.large {
    max-width: 1620px;
    width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
}

@media only screen and (min-width: 768px) {
    .rolex-wrapper.rolexrcpo .rolex-collection-text.large,
    .rolex-wrapper.rolexrcpo .rolex-collection-block.large.noPadding,
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel.large {
        width: 84.375%;
    }
}

.rolex-wrapper.rolexrcpo .rolexrcpo-landing-top .rolex-collection-block:first-child .rolex-collection-image:first-child {
    padding-top: 0;
}

/* —— Discover push rows (landing_content programme / certification) —— */
.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent.rolex-collection-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-color: #f9f7f4;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent.rolex-collection-block:not(.noPaddingTop):not(.noPadding) {
    padding-top: max(7vh, 60px);
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent.rolex-collection-block:not(.noPadding):not(.noPaddingBottom) {
    padding-bottom: max(7vh, 60px);
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent.rolex-collection-block:not(.noPaddingTop):not(.noPadding) {
        padding-top: max(10vh, 90px);
    }

    .rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent.rolex-collection-block:not(.noPadding):not(.noPaddingBottom) {
        padding-bottom: max(10vh, 90px);
    }
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent.rolex-collection-block > .rolex-collection-text:first-child {
    padding-top: 0;
}

/* Inner blocks only — push card also has .noPadding but needs gap below headline */
.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-collection-block.noPadding:not(.rolex-common-pushComponent) {
    padding-top: 0;
    padding-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .rolex-wrapper.rolexrcpo .rolexrcpo-landing-content .rolex-discoverRolex-topContent:not(:last-child) {
        padding-bottom: max(4vh, 40px);
    }
}

/* Last discover row has no headline above — no extra gap on push (certification block) */
.rolex-wrapper.rolexrcpo .rolexrcpo-landing-content .rolex-discoverRolex-topContent:last-child .rolex-common-pushComponent {
    padding-top: 0;
}

/* Headline36 → image: gap via push padding (old site rolex.min.css) */
.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent.rolex-collection-block.noPadding {
    padding-top: 24px;
    padding-bottom: 0;
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent.rolex-collection-block.noPadding {
        padding-top: 24px;
    }
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent {
    display: block;
    text-decoration: none;
    color: inherit;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent .pushComponent-block {
    display: block;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent .pushComponent-kv {
    overflow: hidden;
    display: block;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-discoverRolex-topContent-image {
    padding-top: 24px;
    padding-bottom: 0;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent .pushComponent-kv img {
    transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1);
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-common-pushComponent:hover .pushComponent-kv img {
    transform: scale3d(1.1, 1.1, 1);
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-discoverRolex-topContent-info {
    padding-top: 16px;
    padding-bottom: 0;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-discoverRolex-topContent-info > * {
    padding-top: 0;
}

.rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-discoverRolex-topContent-info .learnMoreBtn {
    margin-top: 8px;
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .rolex-discoverRolex-topContent .rolex-discoverRolex-topContent-info .learnMoreBtn {
        padding-top: 8px;
    }
}

/* —— Contact us grid (landing_content) —— */
.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel {
    margin: 0 auto;
    position: relative;
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel > .rolex-collection-headline36 {
    padding-top: 0;
    margin: 0;
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid {
        display: flex;
        gap: 8px;
    }
}

@media only screen and (max-width: 767px) {
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid .rolex-contactus-contactGrid-item {
        margin-top: 24px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid .rolex-contactus-contactGrid-item {
        margin-top: 24px;
    }
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid .rolex-contactus-contactGrid-item:first-child {
    margin-top: 0;
}

@media only screen and (min-width: 1024px) {
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid .rolex-contactus-contactGrid-item {
        flex-basis: calc((100% - 8px) / 2);
        width: calc((100% - 8px) / 2);
    }

    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid .rolex-contactus-contactGrid-item.fullWidth {
        flex-basis: 100%;
        width: 100%;
    }
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-common-pushComponent {
    display: block;
    text-decoration: none;
    color: inherit;
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-common-pushComponent .pushComponent-block {
    display: block;
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid-item .rolex-common-pushComponent {
    padding-top: 16px;
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid-item .rolex-common-pushComponent > :not(:first-child) {
    padding-top: 16px;
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-common-pushComponent .pushComponent-kv,
.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-common-pushComponent .imageWrapper {
    overflow: hidden;
    display: block;
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-common-pushComponent:hover .pushComponent-kv img,
.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-common-pushComponent:hover .imageWrapper img {
    transform: scale3d(1.1, 1.1, 1);
}

.rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid-item .imageWrapper img {
    transition: transform 0.7s cubic-bezier(0, 0, 0.2, 1);
}

@media only screen and (max-width: 767px) {
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid-item .rolex-common-pushComponent .learnMoreBtn {
        padding-top: 4px;
    }
}

@media only screen and (min-width: 768px) {
    .rolex-wrapper.rolexrcpo .rolex-contactus-contactPanel .rolex-contactus-contactGrid-item .rolex-common-pushComponent .learnMoreBtn {
        padding-top: 8px;
    }
}

/* —— Learn more CTA (discover + contact) —— */
.rolex-wrapper.rolexrcpo .learnMoreBtn .rolex-common-secondaryCTA {
    position: relative;
    display: inline-block;
    color: #127749;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1em;
}

.rolex-wrapper.rolexrcpo .learnMoreBtn .rolex-common-secondaryCTA:hover {
    text-decoration: underline;
}

.rolex-wrapper.rolexrcpo .learnMoreBtn .icon {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: -16px;
    top: 0;
}

.rolex-wrapper.rolexrcpo .learnMoreBtn .icon img {
    display: block;
    width: 100%;
    height: auto;
}

/* —— Send a message CTA (contact top CMS · sendAMessageBtn) —— */
.rolex-wrapper.rolexrcpo .sendAMessageBtn {
    display: inline-block;
    margin-top: 16px;
    text-decoration: none;
}

.rolex-wrapper.rolexrcpo a.sendAMessageBtn.rolex-common-secondaryCTA,
.rolex-wrapper.rolexrcpo .sendAMessageBtn .rolex-common-secondaryCTA {
    position: relative;
    display: inline-block;
    color: #127749;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.1em;
}

.rolex-wrapper.rolexrcpo a.sendAMessageBtn.rolex-common-secondaryCTA:hover,
.rolex-wrapper.rolexrcpo .sendAMessageBtn .rolex-common-secondaryCTA:hover {
    text-decoration: underline;
}

.rolex-wrapper.rolexrcpo a.sendAMessageBtn .icon,
.rolex-wrapper.rolexrcpo .sendAMessageBtn .icon {
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    right: -16px;
    top: 0;
}

.rolex-wrapper.rolexrcpo a.sendAMessageBtn .icon img,
.rolex-wrapper.rolexrcpo .sendAMessageBtn .icon img {
    display: block;
    width: 100%;
    height: auto;
}