/* v18: existing app screens, photographic shopping channels and floating prizes.
   Admin-uploaded creative banners still replace these default compositions. */
.campaign-loyalty-art,.campaign-car-stage,.shop-destinations-art{position:relative;width:100%;height:100%;min-width:0;isolation:isolate}
.campaign-carousel .loyalty-campaign-visual{height:550px}
.campaign-loyalty-art:before{content:'';position:absolute;inset:8% 3%;border:1px solid #f9d89155;border-radius:50%;background:radial-gradient(ellipse,#ffe3aa22,transparent 68%);z-index:-1}
.loyalty-device-pair{position:absolute;inset:0}
.reward-device{position:absolute;width:59%;height:91%;object-fit:contain;filter:drop-shadow(0 20px 20px #43001855);transform-origin:50% 85%}
.membership-device{left:0;top:1%;transform:rotate(-9deg);z-index:2}
.offers-device{right:0;top:5%;transform:rotate(8deg);z-index:1}
.loyalty-benefit{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:var(--essenzi-cta-gradient);color:#49290e;border:1px solid #f9e6b8;border-radius:10px;padding:13px 16px;box-shadow:0 10px 24px #4b001c40;max-width:52%}
.loyalty-benefit svg{width:21px;height:21px;flex-shrink:0;color:#a40b2c}
.loyalty-benefit strong{display:block;font:700 12px/1.3 var(--heading);white-space:nowrap}
.loyalty-benefit small{display:block;font:500 9px/1.45 var(--sans);margin-top:3px}
.benefit-points{left:-3%;top:14%;transform:rotate(-5deg)}
.benefit-cashback{right:-2%;top:53%;transform:rotate(4deg)}
.benefit-offers{left:12%;bottom:0;transform:rotate(-3deg)}

/* Gift presentation and a real 3D gold emblem. */
.campaign-carousel .banner-car{background:radial-gradient(ellipse at 80% 40%,#bd1b37,transparent 65%),linear-gradient(120deg,#820020,#a50027 55%,#60001b)}
.campaign-carousel .prize-campaign-visual{height:500px}
.campaign-car-stage{display:flex;align-items:center;padding-top:20px;padding-bottom:46px}
.campaign-car-scene{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:24px;border:1px solid #edc47766;box-shadow:0 22px 44px #45001745}
.campaign-prize-emblem{position:absolute;right:-4%;top:-22px;width:150px;text-align:center;z-index:2;filter:drop-shadow(0 10px 10px #3a001a55)}
.campaign-prize-emblem>img{width:100%;height:auto;display:block;animation:prize-float 2.4s ease-in-out 2}
.campaign-prize-emblem>span{display:inline-block;font:800 8px/1.4 var(--heading);letter-spacing:1.4px;padding:7px 11px;border:1px solid #d3a04d;border-radius:4px;background:var(--essenzi-cta-gradient);color:#501c10;margin-top:-8px;position:relative}
.campaign-car-caption{position:absolute;bottom:5px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:13px;color:#ffe7b5}
.campaign-car-caption strong{font:800 19px/1.3 var(--heading)}
.campaign-car-caption span{font-size:9px;border-left:1px solid #e3b36a88;padding-left:13px}

/* Two real shopping destinations, framed as a store window and a browser. */
.campaign-carousel .shopping-showcase{height:510px}
.shop-destinations-art:before{content:'';position:absolute;inset:0 0 8%;border:1px solid #e3bd6855;border-radius:50%;transform:rotate(-17deg);z-index:-1}
.shop-photo-card{position:absolute;border:2px solid #e4c07c;border-radius:13px;background:#fff8eb;overflow:hidden;box-shadow:0 20px 38px #42001455;color:#4e2118}
.shop-store-photo{top:0;left:0;width:87%;transform:rotate(-4deg);z-index:1}
.shop-online-photo{bottom:38px;right:0;width:82%;transform:rotate(5deg);z-index:2}
.shop-photo-card>img{display:block;width:100%;height:auto;aspect-ratio:2.057;object-fit:cover}
.shop-online-photo>img{aspect-ratio:2.116;object-fit:contain}
.shop-channel-label{display:flex;gap:9px;align-items:center;padding:12px 17px;background:var(--essenzi-cta-gradient)}
.shop-channel-label>svg{width:20px;height:20px;color:#ab1236}
.shop-channel-label>span{font:800 10px/1.4 var(--heading);letter-spacing:1.4px}
.shop-channel-label small{display:block;font:500 9px/1.5 var(--sans);letter-spacing:0;margin-top:2px}
.shop-browser-bar{display:flex;align-items:center;gap:4px;padding:10px 14px;background:#f9efdb;border-bottom:1px solid #e4c995}
.shop-browser-bar i{display:block;width:5px;height:5px;border-radius:50%;background:#c29955}
.shop-browser-bar>span{flex:1;text-align:center;color:#76583f;font:600 8px var(--sans)}
.shop-browser-bar>svg{width:11px;height:11px;color:#9d7337}
.shop-channel-bridge{position:absolute;left:2%;top:50%;z-index:3;display:grid;place-items:center;width:60px;height:60px;border:1px solid #fff5d0;border-radius:50%;background:var(--essenzi-cta-gradient);color:#960d2d;font:800 34px var(--heading);box-shadow:0 6px 15px #3d001a44}
.shop-destinations-note{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#ffe8bb;font:600 11px/1.5 var(--sans)}

/* PNG cutouts retain their true alpha; no sticker borders or opaque image boxes. */
.prize-podium{padding-top:270px}
.podium-symbol{width:160px;height:160px;bottom:calc(100% + 18px)}
.podium-grand .podium-symbol{width:230px;height:230px;bottom:calc(100% + 15px)}
.real-prize{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 9px #83492324);animation:prize-float 2.4s ease-in-out 2}
.podium-cash-right .real-prize{animation-delay:.3s}
.podium-grand .real-prize{animation-delay:.15s}
.podium-symbol:after{content:'';position:absolute;width:52%;height:11px;left:24%;bottom:-5px;border-radius:50%;background:#8d3c2730;filter:blur(4px);z-index:-1}
@media(hover:hover){
 .campaign-banner:hover .campaign-prize-emblem>img,.prize-podium>div:hover .real-prize{animation:prize-hover-v18 1.25s ease-in-out 1}
}
.campaign-banner:focus-within .campaign-prize-emblem>img,.prize-podium>div:focus-within .real-prize{animation:prize-hover-v18 1.25s ease-in-out 1}
@keyframes prize-hover-v18{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-6deg)}55%{transform:translateY(-6px) rotate(5deg)}80%{transform:translateY(-9px) rotate(-3deg)}}
@media(min-width:701px) and (max-width:1100px){
 .campaign-carousel .banner-grid{gap:25px;grid-template-columns:1fr 1.12fr}
 .campaign-carousel .banner-copy .banner-title{font-size:clamp(32px,4.1vw,45px)}
 .campaign-carousel .loyalty-campaign-visual{height:450px}
 .loyalty-benefit{padding:10px;gap:6px;max-width:64%}
 .loyalty-benefit strong{font-size:10px}.loyalty-benefit small{font-size:8px}
 .benefit-cashback{right:0}.benefit-points{left:-2%}
 .campaign-carousel .prize-campaign-visual{height:390px}
 .campaign-prize-emblem{width:125px;top:-8px;right:-2%}
 .campaign-car-caption{gap:8px;flex-wrap:wrap;bottom:4px}.campaign-car-caption strong{font-size:17px}
 .campaign-carousel .shopping-showcase{height:390px}
 .shop-channel-label{padding:9px 11px}.shop-channel-label small{font-size:8px}
 .shop-online-photo{bottom:36px;width:90%}.shop-store-photo{width:94%}
 .shop-channel-bridge{top:44%;width:45px;height:45px;font-size:26px}
}
@media(max-width:700px){
 /* Same 5:6 canvas as every mobile banner; artwork gets its own fixed rows. */
 .banner-loyalty .mobile-promo,.banner-car .mobile-promo,.banner-shopping .mobile-promo{padding:6cqw;gap:3cqw}
 .banner-loyalty .mobile-promo h2,.banner-shopping .mobile-promo h2{font-size:7.2cqw}
 .banner-loyalty .mobile-promo-art{padding-top:0}
 .campaign-loyalty-art{width:100%;height:100%}
 .reward-device{height:98%;width:58%}.membership-device{top:0;left:2%}.offers-device{right:0;top:1%}
 .loyalty-benefit{padding:1.8cqw 2cqw;gap:1.5cqw;border-radius:1.4cqw;max-width:49%}
 .loyalty-benefit svg{width:4cqw;height:4cqw}
 .loyalty-benefit strong{font-size:2.6cqw}.loyalty-benefit small{font-size:1.8cqw;line-height:1.35;margin-top:.5cqw}
 .benefit-points{left:0;top:10%}.benefit-cashback{right:-1%;top:56%}.benefit-offers{left:4%;bottom:0}
 .banner-car .mobile-promo-art{background:none;border-radius:0;padding:0}
 .campaign-car-stage{padding:6cqw 0 9cqw}
 .campaign-car-scene{height:auto;max-height:100%;width:100%;object-fit:contain;border-radius:3cqw}
 .campaign-prize-emblem{width:25cqw;top:-3cqw;right:-1cqw}
 .campaign-prize-emblem>span{font-size:1.6cqw;letter-spacing:.2cqw;padding:1.2cqw 2cqw;margin-top:-2cqw}
 .campaign-car-caption{bottom:0;gap:2cqw}.campaign-car-caption strong{font-size:4cqw}
 .campaign-car-caption span{font-size:2cqw;padding-left:2cqw}
 .shop-destinations-art{height:100%;width:100%}
 .shop-store-photo{top:0;left:1%;width:82%}.shop-online-photo{bottom:5cqw;right:0;width:78%}
 .shop-photo-card{border-width:1px;border-radius:2cqw}
 .shop-channel-label{padding:1.5cqw 2.2cqw;gap:1.5cqw}.shop-channel-label>svg{width:3.5cqw;height:3.5cqw}
 .shop-channel-label>span{font-size:2.2cqw;letter-spacing:.25cqw}.shop-channel-label small{font-size:1.8cqw;margin-top:0}
 .shop-browser-bar{padding:1.5cqw 2cqw;gap:.7cqw}.shop-browser-bar i{width:1cqw;height:1cqw}
 .shop-browser-bar>span{font-size:1.7cqw}.shop-browser-bar>svg{width:2cqw;height:2cqw}
 .shop-channel-bridge{width:10cqw;height:10cqw;left:0;top:46%;font-size:6cqw}
 .shop-destinations-note{font-size:2.4cqw;bottom:0}
 .prize-podium{padding-top:calc(clamp(112px,33vw,200px) + 35px)}
 .podium-symbol{width:clamp(76px,23vw,140px);height:clamp(76px,23vw,140px)}
 .podium-grand .podium-symbol{width:clamp(112px,33vw,200px);height:clamp(112px,33vw,200px)}
 .podium-symbol:after{height:7px;bottom:-3px}
}
@media(prefers-reduced-motion:reduce){
 .real-prize,.campaign-prize-emblem>img,.campaign-banner:hover .campaign-prize-emblem>img,.prize-podium>div:hover .real-prize,.campaign-banner:focus-within .campaign-prize-emblem>img,.prize-podium>div:focus-within .real-prize{animation:none!important}
}