/* Homepage "Popular Products" carousel. The section reuses the "See our cheats in action" classes
   (theme-section_videos, header_is-flexrow), so only the badge, arrows and product cards are styled here. */

.dcpop-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.2em; padding: 9px 16px; background: #14161c; border: 1px solid #1f232c; border-radius: 8px; color: #fff; font-weight: 600; font-size: 15px; }
.dcpop-badge i { color: #2b6bff; font-size: 18px; }

/* Same arrows as the videos section. */
.dcpop-arrow { width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background: var(--theme-brand_gradient); color: #fff; cursor: pointer; }
.dcpop-arrow[class*="disabled"] { opacity: 0.2; }

.dcpop-slider.swiper { width: 100%; max-width: 100%; min-width: 0; margin-top: 2.5em; overflow: hidden; }
.dcpop-slider .swiper-wrapper { list-style: none; margin: 0; padding: 0; }
.dcpop-card { position: relative; display: block; aspect-ratio: 500 / 615; border-radius: 14px; overflow: hidden; text-decoration: none !important;
  background: repeating-linear-gradient(118deg, transparent 0 46px, rgba(43, 107, 255, 0.45) 46px 64px, transparent 64px 120px), linear-gradient(180deg, #1d4fd6 0%, #0d1a3a 55%, #0b0d12 100%);
  border: 1px solid rgba(255, 255, 255, 0.06); transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.dcpop-card:hover { transform: translateY(-4px); border-color: #2b6bff; box-shadow: 0 0 34px rgba(43, 107, 255, 0.35); }
.dcpop-card img.dcpop-char { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dcpop-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(5, 7, 12, 0.9) 100%); }
/* Game logos are full-card overlays (same 500x615 canvas as the art, logo drawn at the bottom). */
.dcpop-card img.dcpop-logo { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
/* A plain logo file (not a full-card overlay) sits at the bottom instead. */
.dcpop-card img.dcpop-logo.is-plain { inset: auto auto 7% 50%; transform: translateX(-50%); width: 70%; height: auto; max-height: 20%; object-fit: contain; }
.dcpop-price { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 10px; border-radius: 8px; background: rgba(8, 10, 16, 0.6); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; }
.dcpop-price b { display: block; font-size: 18px; letter-spacing: 0; text-transform: none; }