/* Product worlds: the game is the focal point, while copy keeps a solid, readable surface. */
.cbx-modern.cs-premium .cs-fivem-page .cs-fivem-hero { background:#0a1724!important; padding:58px 0!important; }
.cbx-modern.cs-premium .cs-fivem-hero:before { background:radial-gradient(ellipse at 85% 30%,#21485b70,transparent 65%); opacity:1; }
.cbx-modern.cs-premium .cs-fivem-hero:after { background:radial-gradient(ellipse at 7% 100%,#924d271c,transparent 52%); }
.cs-fivem-stage { grid-template-columns:1fr 1fr; gap:54px; }
.cs-fivem-kicker { color:#ffd1a7; }
.cs-fivem-kicker>span { border-color:#ffad72; }
.cbx-modern.cs-premium .cs-fivem-hero h1 { font-size:clamp(38px,4vw,58px)!important; margin-top:24px; }
.cbx-modern.cs-premium .cs-fivem-hero .lead { color:#f0d9c5; font-size:20px; }
.cs-fivem-render { height:420px; border-color:#53677b; border-radius:20px 20px 0 0; background:#152233; isolation:isolate; }
.cs-fivem-render picture { display:block; position:absolute; inset:0; }
.cs-fivem-render picture img { width:100%; height:100%; max-width:none; object-fit:cover; object-position:58% center; filter:none; animation:none; }
.cs-fivem-render:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#061322a6,transparent 44%,transparent 75%,#061322c9); pointer-events:none; }
.cs-fivem-worldmark { position:absolute; inset-block-start:26px; inset-inline-start:28px; display:flex; flex-direction:column; align-items:flex-start; z-index:2; }
.cs-fivem-worldmark strong { color:#fff; font:700 clamp(48px,5.5vw,76px)/1 'Space Grotesk',sans-serif; letter-spacing:-.06em; text-shadow:0 3px 18px #0007; }
.cs-fivem-worldmark>span { color:#fff0df; font-size:10px; letter-spacing:.28em; margin-top:10px; font-weight:700; }
.cs-fivem-world-footer { position:absolute; inset-inline:25px; bottom:20px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; font-size:11px; font-weight:600; letter-spacing:.08em; }
.cs-fivem-world-footer>span:first-child { border:1px solid #bd916b; background:#1d252fea; border-radius:5px; padding:6px 9px; color:#ffcfaa; }
.cs-fivem-inclusion { background:#102f3c; padding:18px 24px; border-color:#486571; }
.cs-fivem-inclusion strong { font-size:14px; }
.cs-fivem-inclusion span { margin-top:2px; }
.cs-fivem-inclusion svg { width:30px; height:30px; flex-basis:30px; }
.cs-fivem-discovery { padding:19px 24px; background:#112331; border-color:#486571; gap:20px; }
.cs-fivem-discovery>div { display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:center; }
.cs-fivem-discovery strong { grid-row:1/3; grid-column:1; margin:0; color:#ffd0a6; font-size:38px; }
.cs-fivem-discovery>div>span { grid-column:2; max-width:140px; line-height:1.5; }
.cs-fivem-discovery .btn { font-size:12px; padding:13px 18px; }
.cs-fivem-visual>.cbx-promo-details { font-size:11px; margin-top:12px; }
.cs-fivem-page table.cs-plans-as-cards tr:after { background:linear-gradient(90deg,#d58450,#efc69b); }
/* Explicit game art stays visible instead of being concealed by a background overlay. */
.cs-world-offer { min-width:0; }
.cbx-modern.cs-premium .cs-product-scene { position:relative; margin:0; background:#112331; border:1px solid #4c647a; border-radius:18px; overflow:hidden; isolation:isolate; }
.cs-product-scene>img { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; object-position:center; }
.cs-product-scene figcaption { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 20px; background:#112331; border-top:1px solid #4c647a; color:#f1f8ff; }
.cs-product-scene figcaption strong { color:#f1f8ff; font-size:16px; line-height:1.5; font-weight:600; }
.cs-product-scene figcaption>span { color:#b7d2df; font-size:10px; white-space:nowrap; }
.cs-product-scene .cs-scene-protection { display:flex; align-items:center; gap:7px; color:#a4eadc; }
.cs-scene-protection svg { width:20px; height:20px; flex-shrink:0; }
.cbx-modern.cs-premium .cs-world-offer>.cs-product-scene { border-bottom:0; border-radius:18px 18px 0 0; }
.cbx-modern.cs-premium .cs-world-offer>.cs-product-scene:last-child { border-bottom:1px solid #4c647a; border-radius:18px; }
.cbx-modern.cs-premium .main .cs-world-hero .cs-world-offer :is(.offer-tag-wrap,.offer-box) { max-width:none; width:100%; margin:0!important; border:1px solid #4c647a!important; border-top:0!important; border-radius:0 0 18px 18px!important; box-shadow:none!important; min-height:0; padding:22px!important; background:#122c3e!important; }
.cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-price-tag { font-size:42px; letter-spacing:-.04em; }
.cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-tag { display:grid; grid-template-columns:1fr 1fr; align-items:center; column-gap:18px; text-align:start!important; }
.cbx-modern.cs-premium .cs-world-hero .cs-world-offer .ribbon-2 { grid-column:1/-1; margin-bottom:14px; }
.cbx-modern.cs-premium .cs-world-hero .cs-world-offer .ribbon-2 span { font-size:9px; }
.cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-tag .btn { margin:0!important; padding:12px; justify-self:end; }
.cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-price-tag p { font-size:11px!important; line-height:1.6!important; margin-top:6px; }
.cs-world-offer .cbx-promo-details { display:block; margin:17px auto 0; font-size:10px; }
.cbx-modern.cs-premium .main .cs-world-hero .offer-box>.h5 { font-size:14px; }
.cbx-modern.cs-premium .main .cs-world-hero .offer-box>.h3 { font-size:27px; margin-bottom:12px; }
.cbx-modern.cs-premium .main .cs-world-hero .offer-box .action-btns { margin-top:14px!important; }
.cbx-modern.cs-premium .cs-protected-world .cs-world-offer .offer-box>img { display:none; }
.cbx-modern.cs-premium .cs-protected-world .cs-world-offer .offer-box>.h3 { display:block; }
.cs-world-hero .hero-content-wrap { padding-inline-end:25px; }
/* The unavailable games still show their own universe, with their existing availability notice. */
.cs-upcoming-world>.container>.row { align-items:center; justify-content:space-between!important; }
.cs-upcoming-world .cs-product-scene>img { aspect-ratio:4/5; }
.cs-upcoming-world .cs-product-scene figcaption { flex-wrap:wrap; }
@media(min-width:992px) and (prefers-reduced-motion:no-preference) {
 .cs-fivem-render picture img { animation:cs-world-arrive 1.2s cubic-bezier(.2,.7,.2,1) both; }
 .cs-product-scene>img { animation:cs-world-arrive 1s cubic-bezier(.2,.7,.2,1) both; }
}
@keyframes cs-world-arrive { from { opacity:.5; transform:scale(1.035); } to { opacity:1; transform:scale(1); } }
@media(max-width:1199px) {
 .cs-fivem-stage { gap:30px; }
 .cs-fivem-render { height:390px; }
 .cs-fivem-discovery>div { column-gap:10px; }
 .cs-fivem-discovery { padding:18px; gap:12px; }
 .cs-fivem-discovery .btn { padding:12px; }
 .cs-product-scene figcaption { padding:13px 15px; flex-wrap:wrap; gap:6px 14px; }
 .cs-product-scene figcaption strong { font-size:14px; }
 .cs-world-hero .hero-content-wrap { padding-inline-end:8px; }
}
@media(max-width:991px) {
 .cs-fivem-stage { grid-template-columns:1fr; }
 .cs-fivem-visual { max-width:680px; }
 .cs-fivem-render { height:380px; }
 .cs-upcoming-world .cs-product-scene { max-width:680px; margin:28px auto 0!important; }
 .cs-upcoming-world .cs-product-scene>img { aspect-ratio:16/9; }
 .cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-tag { grid-template-columns:1fr; }
 .cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-tag .btn { justify-self:start; margin-top:14px!important; }
}
@media(max-width:767px) {
 .cbx-modern.cs-premium .cs-fivem-page .cs-fivem-hero { padding:30px 0!important; }
 .cs-fivem-stage { display:flex; flex-direction:column; gap:0; align-items:stretch; }
 .cs-fivem-copy,.cs-fivem-visual { display:contents; }
 .cs-fivem-kicker { order:0; line-height:1.7; font-size:9px; }
 .cbx-modern.cs-premium .cs-fivem-hero h1 { order:1; font-size:clamp(31px,8.5vw,42px)!important; margin:18px 0 24px; }
 .cs-fivem-render { order:2; height:auto; aspect-ratio:16/10; border-radius:13px; margin-bottom:22px; }
 .cs-fivem-render picture img { object-position:center; }
 .cs-fivem-worldmark { top:18px; inset-inline-start:20px; }
 .cs-fivem-worldmark strong { font-size:43px; }
 .cs-fivem-worldmark>span { font-size:8px; margin-top:6px; letter-spacing:.18em; }
 .cs-fivem-world-footer { inset-inline:17px; bottom:13px; font-size:9px; }
 .cs-fivem-world-footer>span:first-child { padding:4px 7px; }
 .cbx-modern.cs-premium .cs-fivem-hero .lead { order:3; font-size:18px; }
 .cs-fivem-hero .cbx-product-actions { order:4; margin-top:20px; }
 .cbx-modern.cs-premium .cs-fivem-hero .cs-fivem-description { order:5; margin:22px 0 0; }
 .cs-fivem-facts { order:6; margin:23px 0; padding-top:20px; }
 .cs-fivem-inclusion { order:7; border-radius:12px 12px 0 0; padding:18px; }
 .cs-fivem-discovery { order:8; border-radius:0 0 12px 12px; }
 .cs-fivem-discovery>div { grid-template-columns:1fr; }
 .cs-fivem-discovery strong { grid-row:auto; grid-column:1; order:0; font-size:32px; margin:3px 0; }
 .cs-fivem-discovery>div>span { grid-column:1; }
 .cs-fivem-visual>.cbx-promo-details { order:9; margin:15px auto 0; }
 .cs-world-hero .hero-content-wrap { padding-inline-end:0; }
 .cs-world-offer { margin-top:26px; }
 .cs-product-scene>img { aspect-ratio:16/9; }
 .cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-tag { grid-template-columns:1fr 1fr; }
 .cbx-modern.cs-premium .cs-world-hero .cs-world-offer .offer-tag .btn { justify-self:end; margin-top:0!important; }
 .cbx-modern.cs-premium .main .cs-world-hero .cs-world-offer :is(.offer-tag-wrap,.offer-box) { padding:20px!important; }
}
@media(prefers-reduced-motion:reduce) { .cs-fivem-render picture img,.cs-product-scene>img { animation:none!important; transform:none!important; } }
/* A game's artwork appears just after its title on phones, before long feature lists. */
@media(max-width:767px) {
 .cs-world-hero>.container>.row { display:flex; flex-direction:column; align-items:stretch!important; margin:0; }
 .cs-world-hero>.container>.row>[class*="col-"],.cs-world-hero>.container>.row>[class*="col-"]>.hero-content-wrap { display:contents; }
 .cs-world-hero .cbx-product-eyebrow { order:0; align-self:flex-start; }
 .cs-world-hero h1 { order:1; }
 .cbx-modern.cs-premium .cs-world-hero .cs-product-scene { order:2; margin:4px 0 24px; border:1px solid #4c647a; border-radius:13px; }
 .cs-world-hero .hero-content-wrap>.lead { order:3; }
 .cs-world-hero .hero-content-wrap>.cbx-product-actions { order:4; }
 .cs-world-hero .hero-content-wrap>p:not(.lead) { order:5; }
 .cs-world-hero .hero-content-wrap>ul { order:6; }
 .cs-world-hero .hero-content-wrap>.action-btns { order:7; }
 .cbx-modern.cs-premium .main .cs-world-hero .cs-world-offer :is(.offer-box,.offer-tag-wrap) { order:8; border:1px solid #4c647a!important; border-radius:13px!important; margin-top:20px!important; }
 .cs-world-hero .hero-content-wrap>.cbx-promo-details { order:9; }
}
.cs-fivem-hero bdi { white-space:nowrap; }