/* Rocayol proposal 2026. Scoped to the draft campaign. Editable in Creative Slider > CSS Editor. */
.roc-cs-campaign{background:#101a15;font-family:Arial,Helvetica,sans-serif}
.roc-cs-campaign .roc-cs-pad{width:100%;box-sizing:border-box;padding-left:clamp(32px,6vw,120px);padding-right:32px;pointer-events:none}
.roc-cs-campaign .roc-cs-scrim{width:100%;height:100%;background:linear-gradient(90deg,#101a15 0%,#101a15f7 27%,#101a15d9 43%,#101a1570 58%,#101a1500 80%)}
.roc-cs-campaign .roc-cs-scrim-industrial{background:linear-gradient(90deg,#101a15 0%,#101a15 35%,#101a15f2 43%,#101a1599 53%,#101a1500 72%)}
.roc-cs-campaign .roc-cs-scrim-delivery{background:linear-gradient(90deg,#131a17 0%,#131a17 53%,#131a17ee 57%,#131a1700 70%)}
.roc-cs-campaign .roc-cs-eyebrow{display:flex;align-items:center;gap:13px;color:#fff;font-size:14px;line-height:22px;letter-spacing:2px;font-weight:700}
.roc-cs-campaign .roc-cs-eyebrow>span{width:30px;height:3px;display:inline-block;flex-shrink:0}
.roc-cs-campaign .roc-cs-title{font-family:Arial,Helvetica,sans-serif;font-size:clamp(54px,5.8vw,84px);line-height:1.05;font-weight:750;letter-spacing:-3px;white-space:nowrap;color:#fff}
.roc-cs-campaign .roc-cs-description{max-width:510px;font-size:20px;line-height:1.65;color:#e4eae6;white-space:normal}
.roc-cs-campaign .roc-cs-actions{display:flex;align-items:center;gap:27px;flex-wrap:wrap;pointer-events:auto}
.roc-cs-campaign .roc-cs-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:16px 22px;min-height:54px;box-sizing:border-box;border-radius:7px;font-family:Arial,Helvetica,sans-serif;font-size:16px;font-weight:700;line-height:1.3;text-decoration:none;color:#12251a;white-space:nowrap;transition:filter .2s}
.roc-cs-campaign .roc-cs-button svg{width:20px;height:20px;flex-shrink:0}
.roc-cs-campaign .roc-cs-button:hover{filter:brightness(1.08)}
.roc-cs-campaign .roc-cs-secondary{font-size:16px;font-weight:600;line-height:1.5;color:#fff;text-decoration:none;border-bottom:1px solid #ffffff70;padding:8px 0}
.roc-cs-campaign a:focus-visible{outline:3px solid #fff;outline-offset:5px}
.roc-cs-campaign .roc-cs-detail{display:flex;align-items:center;gap:14px;color:#d0dcd4;font-size:14px;line-height:20px;font-weight:700;letter-spacing:1.2px}
.roc-cs-campaign .roc-cs-detail b{font-size:16px;line-height:20px;color:#fff}
.roc-cs-campaign .roc-cs-detail>span{height:1px;width:42px;background:#ffffff55}
.roc-cs-campaign.ls-v6 .ls-nav-prev,.roc-cs-campaign.ls-v6 .ls-nav-next{display:block!important;top:auto!important;bottom:29px;left:auto!important;width:44px;height:44px;border:1px solid #ffffff80;border-radius:50%;opacity:1!important;background-color:#10231b88;background-position:center;background-size:21px;background-repeat:no-repeat;z-index:1000;text-decoration:none}
.roc-cs-campaign.ls-v6 .ls-nav-prev{right:96px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E")}
.roc-cs-campaign.ls-v6 .ls-nav-next{right:40px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E")}
.roc-cs-campaign.ls-v6 .ls-nav-prev:hover,.roc-cs-campaign.ls-v6 .ls-nav-next:hover{background-color:#112c20}
.roc-cs-campaign .ls-bar-timer{height:3px!important;background:#d8b66f!important;opacity:.9!important;border:0!important;bottom:0!important;top:auto!important}
.roc-cs-campaign .ls-bottom-nav-wrapper{display:none!important}
@media(max-width:1023px) and (min-width:768px){
 .roc-cs-campaign .roc-cs-description{max-width:420px;font-size:18px}
 .roc-cs-campaign .roc-cs-actions{max-width:430px;gap:16px}
 .roc-cs-campaign .roc-cs-title{font-size:58px}
}
@media(max-width:767px){
 .roc-cs-campaign .roc-cs-pad{padding-left:24px;padding-right:24px;position:relative}
 .roc-cs-campaign .roc-cs-scrim,.roc-cs-campaign .roc-cs-scrim-industrial,.roc-cs-campaign .roc-cs-scrim-delivery{background:linear-gradient(180deg,#101a15 0%,#101a15 54%,#101a15e8 61%,#101a1530 77%,#101a1540 100%)}
 .roc-cs-campaign .roc-cs-eyebrow-layer .roc-cs-pad{top:-53px}
 .roc-cs-campaign .roc-cs-title-one .roc-cs-pad{top:-74px}
 .roc-cs-campaign .roc-cs-title-two .roc-cs-pad{top:-112px}
 .roc-cs-campaign .roc-cs-description-layer .roc-cs-pad{top:-137px}
 .roc-cs-campaign .roc-cs-actions-layer .roc-cs-pad{top:-135px}
 .roc-cs-campaign .roc-cs-title{font-size:clamp(34px,10vw,46px);letter-spacing:-1.4px;line-height:1.12}
 .roc-cs-campaign .roc-cs-eyebrow{font-size:14px;line-height:20px;letter-spacing:1px;gap:9px}
 .roc-cs-campaign .roc-cs-eyebrow>span{width:19px}
 .roc-cs-campaign .roc-cs-description{font-size:16px;line-height:1.65;max-width:390px}
 .roc-cs-campaign .roc-cs-actions{display:flex;align-items:flex-start;flex-direction:column;gap:12px}
 .roc-cs-campaign .roc-cs-button{min-height:50px;padding:14px 18px;font-size:16px;gap:18px}
 .roc-cs-campaign .roc-cs-secondary{font-size:16px;padding:6px 0}
 .roc-cs-campaign .roc-cs-detail-layer{visibility:hidden!important}
 .roc-cs-campaign.ls-v6 .ls-nav-next{right:24px!important;bottom:22px}
 .roc-cs-campaign.ls-v6 .ls-nav-prev{right:80px!important;bottom:22px}
}
@media(prefers-reduced-motion:reduce){.roc-cs-campaign *{transition:none!important}}

.roc-cs-campaign.ls-v6 .ls-nav-prev:after,.roc-cs-campaign.ls-v6 .ls-nav-next:after{display:none!important}
.roc-cs-campaign.ls-v6 .ls-nav-prev:hover,.roc-cs-campaign.ls-v6 .ls-nav-next:hover{transform:none}

.roc-cs-campaign .roc-cs-mobile-photo{display:none}
@media(max-width:767px){
 .roc-cs-campaign .roc-cs-mobile-photo{display:block;position:absolute;left:0;right:0;bottom:0;height:250px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%);background-size:cover;background-position:80% 50%;background-repeat:no-repeat}
 .roc-cs-campaign .roc-cs-mobile-photo-industrial{background-position:67% 50%}
 .roc-cs-campaign .roc-cs-scrim,.roc-cs-campaign .roc-cs-scrim-industrial,.roc-cs-campaign .roc-cs-scrim-delivery{background:linear-gradient(180deg,#101a15 0%,#101a15 54%,#101a15f5 59%,#101a1500 72%,#101a1522 100%)}
 .roc-cs-campaign .roc-cs-button{max-width:100%;white-space:normal}
}

/* Updated delivery campaign photo: keep its full branding visible. */
@media(min-width:768px){.roc-cs-campaign .roc-cs-scrim-delivery{background:linear-gradient(90deg,#101a15 0%,#101a15f5 30%,#101a15d9 45%,#101a1540 63%,#101a1500 80%)}}
@media(max-width:767px){.roc-cs-campaign .roc-cs-mobile-photo-delivery{background-position:80% 0%}}

@media(max-width:767px){.roc-cs-campaign .ls-slide-backgrounds,.roc-cs-campaign .ls-slide-transition{opacity:0!important;visibility:hidden!important}}

/* App Rocayol: a separate, bright composition with the real app screen. */
.roc-cs-campaign .roc-app-canvas{position:absolute;inset:0;background:#f5f2ea url('/themes/sp_onemall/assets/img/rocayol-app-escenario-v1.webp') center/cover no-repeat}
.roc-cs-campaign .roc-app-badge-stage{display:flex;justify-content:center}
.roc-cs-campaign .roc-app-badge{display:inline-flex;align-items:center;gap:11px;padding:5px 17px 5px 7px;border-radius:30px;background:#ffffffdb;border:1px solid #ffffff;box-shadow:0 4px 18px #2949360a;color:#194c31;font:700 14px/1.3 Arial,Helvetica,sans-serif;letter-spacing:1.4px}
.roc-cs-campaign .roc-app-badge img{display:block;width:36px;height:36px;border-radius:10px}
.roc-cs-campaign .roc-app-heading-stage{text-align:center;padding:0 28px}
.roc-cs-campaign .roc-app-heading-stage h2{font-family:Arial,Helvetica,sans-serif;font-size:clamp(40px,4.4vw,64px);font-weight:750;line-height:1.05;letter-spacing:-2.6px;color:#142d21;margin:0;white-space:nowrap}
.roc-cs-campaign .roc-app-heading-stage h2 span{color:#087b47}
.roc-cs-campaign .roc-app-intro-stage{text-align:center;padding:0 24px}
.roc-cs-campaign .roc-app-intro-stage p{font:400 18px/1.6 Arial,Helvetica,sans-serif;color:#506457;margin:0}
.roc-cs-campaign .roc-app-phone-stage{display:flex;justify-content:center;position:relative;pointer-events:none}
.roc-cs-campaign .roc-app-phone{width:220px;height:394px;box-sizing:border-box;padding:7px;border:1px solid #65796a;border-radius:29px;background:linear-gradient(135deg,#6b7a6d,#0a160f 24%,#15251b 76%,#7c8d80);box-shadow:0 24px 42px #173d302d,0 3px 8px #163d3433;position:relative}
.roc-cs-campaign .roc-app-phone:before{content:'';position:absolute;left:-3px;top:65px;width:2px;height:32px;background:#3b4f40;border-radius:2px}
.roc-cs-campaign .roc-app-screen{width:100%;height:100%;overflow:hidden;border-radius:21px;background:#fff}
.roc-cs-campaign .roc-app-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.roc-cs-campaign .roc-app-left-stage{width:240px;margin-left:clamp(40px,13vw,250px)}
.roc-cs-campaign .roc-app-benefit-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #bed2c4;border-radius:12px;color:#177748;background:#ffffffb0;margin-bottom:15px}
.roc-cs-campaign .roc-app-benefit-icon svg{width:22px;height:22px}
.roc-cs-campaign .roc-app-benefit h3{font:700 28px/1.13 Arial,Helvetica,sans-serif;letter-spacing:-.6px;color:#183e28;margin:0 0 13px}
.roc-cs-campaign .roc-app-benefit p{font:400 16px/1.6 Arial,Helvetica,sans-serif;color:#425b49;max-width:225px;margin:0}
.roc-cs-campaign .roc-app-store-stage{position:relative;width:100%}
.roc-cs-campaign .roc-app-stores{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-left:clamp(40px,13vw,250px);width:180px}
.roc-cs-campaign .roc-app-store{display:flex;align-items:center;justify-content:center;width:170px;min-height:58px;text-decoration:none;background:transparent;border:0;padding:0;pointer-events:auto}
.roc-cs-campaign .roc-app-store img{display:block;width:170px;height:64px;object-fit:contain}
.roc-cs-campaign .roc-app-right-stage{width:235px;margin-left:calc(50% + 220px)}
.roc-cs-campaign .roc-app-qr-eyebrow{display:block;font:700 13px/1.5 Arial,Helvetica,sans-serif;letter-spacing:1.1px;color:#54745e;margin-bottom:12px}
.roc-cs-campaign .roc-app-qr-panel h3{font:700 26px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.5px;color:#183e28;margin:0 0 18px}
.roc-cs-campaign .roc-app-qr-panel>a{display:block;width:116px;height:116px;border-radius:8px;overflow:hidden;box-shadow:0 8px 22px #284f3410;pointer-events:auto}
.roc-cs-campaign .roc-app-qr-panel img{display:block;width:116px;height:116px}
.roc-cs-campaign .roc-app-qr-panel p{font:400 14px/1.5 Arial,Helvetica,sans-serif;color:#486350;margin:12px 0 0}
.roc-cs-campaign.roc-cs-app-active .ls-bar-timer{background:#137849!important}
.roc-cs-campaign.roc-cs-app-active a:focus-visible{outline:3px solid #9a6f16;outline-offset:4px}
.roc-cs-campaign.roc-cs-app-active.ls-v6 .ls-nav-prev,.roc-cs-campaign.roc-cs-app-active.ls-v6 .ls-nav-next{border-color:#496b5750;background-color:#ffffffcc}
.roc-cs-campaign.roc-cs-app-active.ls-v6 .ls-nav-prev{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5538' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5m7-7-7 7 7 7'/%3E%3C/svg%3E")}
.roc-cs-campaign.roc-cs-app-active.ls-v6 .ls-nav-next{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d5538' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E")}
@media(max-width:1100px) and (min-width:768px){
 .roc-cs-campaign .roc-app-phone-stage{padding-left:30%}
 .roc-cs-campaign .roc-app-qr-layer{visibility:hidden!important}
 .roc-cs-campaign .roc-app-heading-stage h2{font-size:44px;letter-spacing:-1.7px}
 .roc-cs-campaign .roc-app-intro-stage p{font-size:17px}
 .roc-cs-campaign .roc-app-left-stage{margin-left:44px;width:235px}
 .roc-cs-campaign .roc-app-stores{margin-left:44px}
}
@media(max-width:767px){
 .roc-cs-campaign .roc-app-canvas{background-position:50% 100%;background-size:auto 660px}
 .roc-cs-campaign .roc-app-badge-stage{position:relative;top:-8px}
 .roc-cs-campaign .roc-app-badge{font-size:13px;letter-spacing:1.1px;padding:4px 14px 4px 6px;gap:8px}
 .roc-cs-campaign .roc-app-badge img{width:30px;height:30px;border-radius:8px}
 .roc-cs-campaign .roc-app-heading-stage{position:relative;top:-13px;padding:0 20px}
 .roc-cs-campaign .roc-app-heading-stage h2{font-size:clamp(34px,9.8vw,42px);line-height:1.08;letter-spacing:-1.4px;white-space:normal}
 .roc-cs-campaign .roc-app-heading-stage h2 span{display:block}
 .roc-cs-campaign .roc-app-intro-stage{position:relative;top:11px;padding:0 24px}
 .roc-cs-campaign .roc-app-intro-stage p{font-size:16px;line-height:1.55;max-width:350px;margin:0 auto}
 .roc-cs-campaign .roc-app-phone-stage{top:96px}
 .roc-cs-campaign .roc-app-phone{width:170px;height:300px;padding:5px;border-radius:21px;box-shadow:0 15px 28px #173d3028,0 2px 5px #163d3433}
 .roc-cs-campaign .roc-app-screen{border-radius:15px}
 .roc-cs-campaign .roc-app-benefit-layer,.roc-cs-campaign .roc-app-qr-layer{visibility:hidden!important}
 .roc-cs-campaign .roc-app-store-stage{top:-196px}
 .roc-cs-campaign .roc-app-stores{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:calc(100% - 40px);max-width:340px;margin:0 auto}
 .roc-cs-campaign .roc-app-store{width:100%;min-width:0;min-height:54px}
 .roc-cs-campaign .roc-app-store img{width:100%;max-width:170px;height:60px}
 .roc-cs-campaign.roc-cs-app-active.ls-v6 .ls-nav-prev{left:24px!important;right:auto!important}
 .roc-cs-campaign.roc-cs-app-active.ls-v6 .ls-nav-next{right:24px!important}
}
@media(max-width:1023px){
 .roc-cs-campaign[data-roc-cs-os="ios"] .roc-app-google,.roc-cs-campaign[data-roc-cs-os="android"] .roc-app-apple{display:none}
 .roc-cs-campaign[data-roc-cs-os="ios"] .roc-app-stores,.roc-cs-campaign[data-roc-cs-os="android"] .roc-app-stores{display:flex;align-items:center}
 .roc-cs-campaign[data-roc-cs-os="ios"] .roc-app-store,.roc-cs-campaign[data-roc-cs-os="android"] .roc-app-store{width:170px}
}

.roc-cs-campaign .roc-app-benefit,.roc-cs-campaign .roc-app-qr-panel{box-sizing:border-box;background:#fffffff0;border:1px solid #fff;border-radius:18px;padding:18px;box-shadow:0 10px 32px #274d3410;backdrop-filter:blur(10px)}
.roc-cs-campaign .roc-app-benefit-icon{width:34px;height:34px;margin-bottom:12px}
.roc-cs-campaign .roc-app-benefit h3{font-size:26px;line-height:1.15;margin:0}
.roc-cs-campaign .roc-app-qr-panel h3{font-size:22px;line-height:1.2;margin-bottom:16px}
@media(max-width:767px){.roc-cs-campaign .roc-app-phone{border-radius:23px}.roc-cs-campaign .roc-app-screen{border-radius:17px}}

/* Full-canvas decorative layers must not intercept the download links. */
.roc-cs-campaign .ls-wrapper,.roc-cs-campaign .ls-layer{pointer-events:none}
.roc-cs-campaign .ls-wrapper a,.roc-cs-campaign .ls-layer a{pointer-events:auto}

/* App: symmetric panels, iPhone capture and equal store controls. */
.roc-cs-campaign .roc-app-phone{width:190px;height:394px}
.roc-cs-campaign .roc-app-screen img{object-fit:contain}
.roc-cs-campaign .roc-app-left-stage{width:240px;margin-left:calc(50% - 460px)}
.roc-cs-campaign .roc-app-right-stage{width:240px;margin-left:calc(50% + 220px)}
.roc-cs-campaign .roc-app-benefit,.roc-cs-campaign .roc-app-qr-panel{width:240px;height:282px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px}
.roc-cs-campaign .roc-app-benefit-icon{flex-shrink:0;margin:0 auto 10px}
.roc-cs-campaign .roc-app-benefit h3{font-size:25px;line-height:1.15;margin:0 0 16px}
.roc-cs-campaign .roc-app-stores{align-items:center;gap:10px;width:180px;margin:0 auto}
.roc-cs-campaign .roc-app-store{position:relative;box-sizing:border-box;flex-shrink:0;width:180px;height:54px;min-height:54px;border:1px solid #888;border-radius:8px;background:#000;overflow:hidden}
.roc-cs-campaign .roc-app-store img{position:absolute;max-width:none;object-fit:fill;clip-path:inset(22% 9%)}
.roc-cs-campaign .roc-app-google img{width:169.19px;height:65.48px;left:calc(50% - 84.46px);top:calc(50% - 32.61px)}
.roc-cs-campaign .roc-app-apple img{width:153.21px;height:65.48px;left:calc(50% - 76.08px);top:calc(50% - 32.61px)}
.roc-cs-campaign .roc-app-qr-eyebrow{letter-spacing:.8px;margin:0 0 10px}
.roc-cs-campaign .roc-app-qr-panel h3{margin:0 0 16px}
.roc-cs-campaign .roc-app-qr-panel>a{flex-shrink:0;margin:0 auto}
.roc-cs-campaign .roc-app-qr-panel p{margin:12px 0 0}
@media(min-width:768px){.roc-cs-campaign .roc-app-store-stage{display:none}}
@media(min-width:768px) and (max-width:1100px){.roc-cs-campaign .roc-app-left-stage{margin-left:44px}}
@media(max-width:767px){
 .roc-cs-campaign .roc-app-phone{width:144px;height:300px}
 .roc-cs-campaign .roc-app-benefit .roc-app-stores{display:none}
 .roc-cs-campaign .roc-app-store-stage>.roc-app-stores{width:calc(100% - 40px);max-width:370px;justify-content:center}
 .roc-cs-campaign .roc-app-store{width:100%;height:54px}
 .roc-cs-campaign[data-roc-cs-os="ios"] .roc-app-store,.roc-cs-campaign[data-roc-cs-os="android"] .roc-app-store{width:180px}
}