/* Product page: "More Games / More Gift Cards" and "<Game> News" below the FAQ (filled by Suprimx.SeoModule).
   Light design (2026-10-15): same card as Description / FAQ, header like the FAQ title, list like the home page product lists. */
html body .ProductContentSection .Content > .ProductRelated { background: #fff !important; color: #1A1D24 !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 0 0 1px #E6E8EC !important; border-bottom-color: #E6E8EC !important; }
html body .ProductContentSection .Content > .ProductRelated ul { list-style: none; margin: 0; padding: 0; }

/* Header: gold glow strip like the FAQ title */
html body .ProductContentSection .Content > .ProductRelated .RelatedHead { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; position: relative; margin: -30px -30px 22px; padding: 16px 30px; background: radial-gradient(240px 110px at 0% 50%, rgba(255,176,0,.30), transparent 70%), linear-gradient(90deg, rgba(255,190,40,.12), transparent 65%); border-bottom: 1px solid #EEF0F3; }
html body .ProductContentSection .Content > .ProductRelated .RelatedHead::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, #F2B32A, rgba(242,179,42,.25) 50%, transparent); pointer-events: none; }
html body .ProductContentSection .Content > .ProductRelated .RelatedHead .ContentTitle { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 15px !important; font-weight: 800 !important; color: #1A1D24 !important; text-transform: none !important; letter-spacing: -.02em !important; }
html body .ProductContentSection .Content > .ProductRelated .RelatedHead .ContentTitle::before,
html body .ProductContentSection .Content > .ProductRelated .RelatedHead .ContentTitle::after { content: none !important; display: none !important; }

/* "View More" + gold ring arrow, same as the home page */
html body .ProductContentSection .Content > .ProductRelated .RelatedMore { display: flex; align-items: center; gap: 8px; height: 21px; font-size: 12px; font-weight: 600; color: #1A1D24; text-decoration: none; }
html body .ProductContentSection .Content > .ProductRelated .RelatedMore::after { content: "\f101"; font-family: "Font Awesome 6 Free"; font-weight: 800; font-size: 10.8px; display: flex; align-items: center; justify-content: center; height: 21px; padding: 0 5.4px; box-sizing: border-box; border-radius: 999px; border: 2px solid transparent; background: linear-gradient(#FFFBF1, #FFFBF1) padding-box, linear-gradient(110deg, #FFD24A 0%, #FFB400 35%, #E08A00 70%, #9C5A00 100%) border-box; color: #F29A00; transition: transform .22s cubic-bezier(.2,.8,.2,1); }
html body .ProductContentSection .Content > .ProductRelated .RelatedMore:hover::after { transform: translateX(2px); }

/* More Games / More Gift Cards */
html body .ProductRelated .RelatedProductList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 24px; }
html body .ProductRelated .RelatedProductList a { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; color: #1A1D24; text-decoration: none; }
html body .ProductRelated .RelatedIcon { width: 54px; height: 54px; border-radius: 25%; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 0 0 1px #E6E8EC; }
html body .ProductRelated .RelatedIcon img { width: 100%; height: 100%; display: block; transition: transform .2s; }
html body .ProductRelated .RelatedProductList a:hover .RelatedIcon img, html body .ProductRelated .RelatedProductList a:focus-visible .RelatedIcon img { transform: scale(1.06); }
html body .ProductRelated .RelatedText { display: flex; flex-direction: column; gap: 6px; align-items: start; min-width: 0; }
html body .ProductRelated .RelatedName { font-size: 12px; line-height: 18px; font-weight: 600; color: #1A1D24; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
html body .ProductRelated .RelatedRegion { font-size: 11px !important; line-height: 16.5px; white-space: nowrap; }

/* <Game> News */
html body .ProductRelated .RelatedNewsList { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
html body .ProductRelated .RelatedNewsList a { display: block; color: #1A1D24; text-decoration: none; }
html body .ProductRelated .RelatedCover { border-radius: 12px; overflow: hidden; background: #F3F4F6; aspect-ratio: 2 / 1; box-shadow: 0 0 0 1px #E6E8EC; }
html body .ProductRelated .RelatedCover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
html body .ProductRelated .RelatedNewsList a:hover .RelatedCover img, html body .ProductRelated .RelatedNewsList a:focus-visible .RelatedCover img { transform: scale(1.04); }
html body .ProductRelated .RelatedNewsList .RelatedText { padding: 10px 2px 0; gap: 4px; }
html body .ProductRelated .RelatedNewsTitle { font-size: 12px; line-height: 18px; font-weight: 600; color: #1A1D24; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
html body .ProductRelated .RelatedNewsList time { display: block; font-size: 11px; line-height: 16px; font-weight: 400; color: #6B7280; }

@media (max-width: 767px) {
    html body .ProductContentSection .Content > .ProductRelated .RelatedHead { margin: -30px -24px 22px; padding: 16px 24px; }
    html body .ProductContentSection .Content > .ProductRelated .RelatedMore span { display: none; }
    html body .ProductRelated .RelatedProductList { grid-template-columns: 1fr; gap: 14px; }
    html body .ProductRelated .RelatedNewsList { grid-template-columns: 1fr; gap: 14px; }
    html body .ProductRelated .RelatedNewsList a { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; }
    html body .ProductRelated .RelatedCover { aspect-ratio: 16 / 10; border-radius: 10px; }
    html body .ProductRelated .RelatedNewsList .RelatedText { padding: 0; }
    html body .ProductRelated .RelatedNewsTitle { -webkit-line-clamp: 3; }
}
@media (min-width: 768px) and (max-width: 1199px) {
    html body .ProductRelated .RelatedProductList { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Guides pinned before news (2026-10-15): small "Guide" label above the title */
html body .ProductRelated .RelatedGuideTag { align-self: start; display: inline-block; font-size: 11px; line-height: 16.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: #FFF4D6; color: #8A5A00; }