/* gs-cmstiles: homepage promo tiles (cp_cmsbanner1) in gs_preorderhero style */
#cpcmsbanner1.gs-tiles{font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:default}
#cpcmsbanner1.gs-tiles>.container{padding:0}
#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1,#cpcmsbanner1.gs-tiles #cpcmsbanner1_block2{gap:20px}
#cpcmsbanner1.gs-tiles #cpcmsbanner1_block2{margin-top:20px}
#cpcmsbanner1.gs-tiles .main-content{flex:1 1 0;min-width:0;float:none!important;width:auto}
#cpcmsbanner1.gs-tiles .cms_content{display:block;position:relative;width:100%;height:200px;background:#fff;border-radius:20px;box-shadow:0 1px 2px rgba(17,17,26,.04),0 12px 40px rgba(17,17,26,.08);overflow:hidden;transition:box-shadow .2s ease,transform .2s ease}
#cpcmsbanner1.gs-tiles .cms_content:hover{box-shadow:0 2px 4px rgba(17,17,26,.05),0 16px 44px rgba(17,17,26,.12);transform:translateY(-1px)}
#cpcmsbanner1.gs-tiles .cms_content>br{display:none}
/* old composed banner image -> hidden; packshot via ::after */
#cpcmsbanner1.gs-tiles .cms_content>a:first-child{position:absolute;inset:0;z-index:1;font-size:0}
#cpcmsbanner1.gs-tiles .cms_content>a:first-child img{display:none}
#cpcmsbanner1.gs-tiles .cms_content::after{content:'';position:absolute;right:12px;bottom:12px;width:var(--tile-shot,84px);height:var(--tile-shot,84px);background:var(--tile-img) no-repeat center/contain;mix-blend-mode:multiply;pointer-events:none;z-index:0;transition:transform .5s ease}
#cpcmsbanner1.gs-tiles .cms_content:hover::after{transform:scale(1.06)}
#cpcmsbanner1_block1 .first-content .cms_content{--tile-img:url(/50-medium_default/ultimate-spider-man-playstation-2.jpg)}
#cpcmsbanner1_block1 .second-content .cms_content{--tile-img:url(/10781-medium_default/xenoblade-chronicles-x-definitive-edition-.jpg)}
#cpcmsbanner1_block2 .first-content .cms_content{--tile-img:url(/414-medium_default/darkman-gameboy-dmg.jpg);--tile-shot:150px}
/* text */
#cpcmsbanner1.gs-tiles .cms_content .cms-block{position:absolute!important;inset:18px 18px 18px 20px!important;width:auto!important;z-index:2;pointer-events:none;display:flex;flex-direction:column;align-items:flex-start;text-transform:none!important;font-weight:400!important;color:#111!important;text-align:left}
#cpcmsbanner1.gs-tiles .cms-block a{pointer-events:auto;color:inherit!important;text-decoration:none}
#cpcmsbanner1.gs-tiles .cms-block .offer-text1{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d6246e!important;background:#fde7f0;border-radius:999px;padding:4px 10px;margin:0 0 8px;line-height:1.3}
#cpcmsbanner1.gs-tiles .cms-block .offer-text2{font-size:20px;line-height:1.1;font-weight:800!important;letter-spacing:-.02em;color:#111!important}
#cpcmsbanner1.gs-tiles .cms-block .offer-text3{font-size:14px!important;font-weight:500;color:#6b7280!important;margin-top:4px;line-height:1.25}
#cpcmsbanner1.gs-tiles .cms-block .offer-text4{font-size:20px!important;font-weight:800!important;letter-spacing:-.01em;margin:6px 0 0!important;color:#111!important}
#cpcmsbanner1.gs-tiles .cms-block .offer-button{margin-top:auto}
#cpcmsbanner1.gs-tiles .cms-block .offer-button a{display:inline-flex;align-items:center;gap:6px;background:#111;color:#fff!important;font-size:14px!important;font-weight:700!important;padding:9px 18px;border-radius:999px;transition:background .2s ease,box-shadow .2s ease,transform .2s ease}
#cpcmsbanner1.gs-tiles .cms-block .offer-button a::after{content:'→'!important;font-family:inherit!important;background:none!important;color:inherit!important;width:auto!important;height:auto!important;margin:0!important;line-height:1!important;font-weight:700;transition:transform .2s ease}
#cpcmsbanner1.gs-tiles .cms_content:hover .offer-button a,#cpcmsbanner1.gs-tiles .offer-button a:focus-visible{background:#d6246e;box-shadow:0 8px 20px rgba(214,36,110,.28)}
#cpcmsbanner1.gs-tiles .cms_content:hover .offer-button a::after{transform:translateX(3px)}
#cpcmsbanner1.gs-tiles a:focus-visible{outline:2px solid #d6246e;outline-offset:3px}
/* wide Darkman tile: larger title */
#cpcmsbanner1_block2 .cms-block .offer-text2{font-size:26px!important}
@media (max-width:1199px){#cpcmsbanner1.gs-tiles .cms_content{height:180px}#cpcmsbanner1.gs-tiles .cms-block .offer-text2{font-size:18px}#cpcmsbanner1.gs-tiles .cms_content::after{--tile-shot:70px}#cpcmsbanner1_block2 .cms_content{--tile-shot:130px!important}}
@media (max-width:991px){#cpcmsbanner1.gs-tiles .cms_content{height:200px}}
@media (max-width:767px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1{gap:12px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block2{margin-top:12px}#cpcmsbanner1.gs-tiles .cms_content{border-radius:16px;height:190px}#cpcmsbanner1.gs-tiles .cms_content .cms-block{inset:14px 14px 14px 14px!important}#cpcmsbanner1.gs-tiles .cms-block .offer-text2{font-size:17px}#cpcmsbanner1.gs-tiles .cms-block .offer-text1{font-size:10px;padding:3px 8px}#cpcmsbanner1.gs-tiles .cms-block .offer-text4{font-size:18px!important}#cpcmsbanner1.gs-tiles .cms-block .offer-button a{padding:8px 14px;font-size:13px!important}#cpcmsbanner1.gs-tiles .cms_content::after{--tile-shot:64px;right:10px;bottom:10px}#cpcmsbanner1_block2 .cms_content{--tile-shot:110px!important}#cpcmsbanner1_block2 .cms-block .offer-text2{font-size:22px!important}}
@media (prefers-reduced-motion:reduce){#cpcmsbanner1.gs-tiles .cms_content,#cpcmsbanner1.gs-tiles .cms_content::after{transition:none}}
@media (max-width:991px){#cpcmsbanner1.gs-tiles{display:block;text-align:left;padding-block-start:0;margin-bottom:20px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1,#cpcmsbanner1.gs-tiles #cpcmsbanner1_block2{display:flex;width:100%}}
#cpcmsbanner1.gs-tiles{overflow:visible}
@media (max-width:991px){#cpcmsbanner1.gs-tiles .cms_content{height:180px}}
@media (max-width:767px){#cpcmsbanner1.gs-tiles .cms_content{height:170px}}
/* v2 (2026-10-10): clean corners, brand gradient, fixed white packshot frame */
#cpcmsbanner1.gs-tiles .main-content,#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1,#cpcmsbanner1.gs-tiles #cpcmsbanner1_block2{overflow:visible!important;background:none!important;border-radius:20px}
#cpcmsbanner1.gs-tiles .cms_content{background:linear-gradient(90deg,#fdeaf2 0%,#fff5f9 45%,#fff 100%);border:1px solid #f6dbe7;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black)}
#cpcmsbanner1.gs-tiles .cms_content:hover{transform:none}
#cpcmsbanner1.gs-tiles .cms_content::after{--tile-shot:92px;width:var(--tile-shot);height:var(--tile-shot);right:14px;bottom:14px;box-sizing:border-box;padding:6px;background-color:#fff;background-image:var(--tile-img);background-repeat:no-repeat;background-position:center;background-size:contain;background-origin:content-box;background-clip:padding-box;border:1px solid #fff;border-radius:12px;box-shadow:0 1px 2px rgba(17,17,26,.06),0 6px 16px rgba(17,17,26,.10);mix-blend-mode:normal}
#cpcmsbanner1_block2 .cms_content::after{--tile-shot:140px!important;padding:8px;border-radius:14px}
@media (max-width:1199px){#cpcmsbanner1.gs-tiles .cms_content::after{--tile-shot:80px}#cpcmsbanner1_block2 .cms_content::after{--tile-shot:124px!important}}
@media (max-width:767px){#cpcmsbanner1.gs-tiles .cms_content::after{--tile-shot:72px;right:10px;bottom:10px;padding:5px;border-radius:10px}#cpcmsbanner1_block2 .cms_content::after{--tile-shot:110px!important}}
#cpcmsbanner1.gs-tiles .cms_content{background:linear-gradient(90deg,#fbdbe8 0%,#fdedf4 40%,#fff 85%)}
@media (min-width:992px){#cpcmsbanner1_block1 .cms_content::after{--tile-shot:76px;right:12px;bottom:12px;padding:5px}}
#cpcmsbanner1.gs-tiles .cms_content{background:linear-gradient(90deg,#fce4ee 0%,#fef1f6 45%,#fff 85%)}
#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a{padding:8px 14px}
@media (min-width:992px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:68px;right:10px;bottom:10px;padding:4px;border-radius:10px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content .cms-block{inset:16px 12px 14px 16px!important}}
@media (max-width:767px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:62px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a{padding:7px 12px;font-size:13px!important}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content .cms-block{inset:14px 10px 12px 12px!important}}
/* v3 (2026-10-10): longer CTA label ("Bekijk product") - single line; on small tiles the photo frame sits above the button */
#cpcmsbanner1.gs-tiles .cms-block .offer-button a{white-space:nowrap}
#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a{padding:7px 12px;font-size:13px!important;gap:4px}
#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a::after{display:none}
#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:60px!important;right:10px;bottom:50px;padding:4px;border-radius:10px}
@media (max-width:991px) and (min-width:768px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:76px!important;bottom:14px;right:14px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a::after{display:inline}}
@media (max-width:767px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content{height:190px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:56px!important;bottom:48px;right:8px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a{padding:7px 11px;font-size:12.5px!important}}
@media (min-width:992px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{bottom:60px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a{line-height:1.2}}
@media (min-width:992px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:52px!important;right:8px;bottom:56px;padding:3px;border-radius:9px}}
@media (min-width:992px) and (max-width:1199px){#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content{height:210px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms_content::after{--tile-shot:46px!important;bottom:52px}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-button a{padding:7px 10px;font-size:12px!important}#cpcmsbanner1.gs-tiles #cpcmsbanner1_block1 .cms-block .offer-text3{font-size:13px!important}}