/* GameZone store product descriptions (served from the wallet: /store/product.css).
   One file for every product: change the theme here and all product pages follow. */
.gzpd, .gzpd * { box-sizing: border-box; }
.gzpd {
  --gzpd-accent: #8b0000;      /* EDIT: the game's colour (Onimusha: crimson) */
  --gzpd-accent-2: #ff6b5b;    /* EDIT: lighter shade for the title */
  --gzpd-y: #ffff33; --gzpd-ink: #08090d; --gzpd-dark: #0a0e1c; --gzpd-dark-2: #121a2e;
  --gzpd-text: #2b3142; --gzpd-muted: #5b6275; --gzpd-line: #e3e6ef; --gzpd-soft: #f6f7fb;
  max-width: 980px; margin: 0 auto; color: var(--gzpd-text);
  font-family: Montserrat, "Segoe UI", Arial, sans-serif; font-size: 15px; line-height: 1.65;
}
.gzpd h2, .gzpd h3, .gzpd p, .gzpd ul { margin: 0; }
.gzpd a { color: inherit; }

/* Trust strip */
.gzpd-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--gzpd-ink); border-radius: 14px 14px 0 0; overflow: hidden; }
.gzpd-trust span { padding: 11px 6px; text-align: center; color: #fff; font-size: 12.5px; font-weight: 800; }
.gzpd-trust span.is-y { color: var(--gzpd-y); }

/* Hero */
.gzpd-hero { position: relative; overflow: hidden; background: #14070a; color: #fff; padding: 26px 24px 24px; border-radius: 0 0 14px 14px; }
.gzpd-hero::before { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; right: -90px; top: -130px; background: var(--gzpd-accent); opacity: .55; }
.gzpd-hero > * { position: relative; }
.gzpd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gzpd-chip { font-size: 11px; font-weight: 800; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; background: #1b2838; color: #fff; }
.gzpd-chip.is-y { background: var(--gzpd-y); color: var(--gzpd-ink); }
.gzpd-hero h2 { margin-top: 12px; font-size: clamp(26px, 4vw, 38px); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.gzpd-hero h2 span { color: var(--gzpd-accent-2); }
.gzpd-hero p { margin-top: 8px; max-width: 620px; color: #e2d6d6; font-size: 15px; }
.gzpd-earn { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: var(--gzpd-y); color: var(--gzpd-ink); font-size: 13.5px; font-weight: 800; }
.gzpd-earn b { font-size: 17px; font-weight: 900; }

/* Sections */
.gzpd-sec { margin-top: 28px; }
.gzpd-sec > h3 { font-size: 19px; font-weight: 900; color: var(--gzpd-ink); border-left: 5px solid var(--gzpd-accent); padding-left: 10px; margin-bottom: 12px; }
.gzpd-sec p { color: var(--gzpd-text); }
.gzpd details { margin-top: 10px; }
.gzpd summary { cursor: pointer; font-weight: 800; color: var(--gzpd-ink); list-style: none; display: inline-block; border-bottom: 3px solid var(--gzpd-y); }
.gzpd summary::-webkit-details-marker { display: none; }
.gzpd details[open] summary { margin-bottom: 8px; }

/* Feature cards */
.gzpd-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.gzpd-feat { background: var(--gzpd-soft); border-radius: 14px; padding: 14px; }
.gzpd-feat b { display: block; color: var(--gzpd-ink); font-size: 14.5px; }
.gzpd-feat span { display: block; margin-top: 3px; color: var(--gzpd-muted); font-size: 13px; line-height: 1.5; }

/* Trailer: no autoplay, loads when scrolled near */
.gzpd-video { border-radius: 16px; overflow: hidden; background: #14070a; padding: 8px; box-shadow: 0 10px 28px rgba(8, 9, 13, .18); }
.gzpd-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; }

/* How you get it */
.gzpd-how { background: var(--gzpd-dark); border-radius: 16px; padding: 18px; color: #fff; }
.gzpd-how > h3 { color: #fff; border-left-color: var(--gzpd-y); }
.gzpd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.gzpd-step { background: var(--gzpd-dark-2); border-radius: 12px; padding: 12px; }
.gzpd-step i { font-style: normal; display: block; color: var(--gzpd-y); font-size: 20px; font-weight: 900; line-height: 1; }
.gzpd-step b { display: block; margin-top: 6px; font-size: 14px; color: #fff; }
.gzpd-step span { display: block; margin-top: 2px; font-size: 12.5px; color: #9aa3bf; line-height: 1.45; }
.gzpd-step.is-y { background: var(--gzpd-y); }
.gzpd-step.is-y i, .gzpd-step.is-y b, .gzpd-step.is-y span { color: var(--gzpd-ink); }

/* Requirements */
.gzpd-req { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gzpd-req > div { border: 1px solid var(--gzpd-line); border-radius: 14px; padding: 14px 16px; }
.gzpd-req > div.is-rec { background: #fffbd1; border-color: #f0d66a; }
.gzpd-req h4 { margin: 0 0 6px; font-size: 15px; font-weight: 900; color: var(--gzpd-ink); }
.gzpd-req ul { padding-left: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.gzpd-req li b { color: var(--gzpd-ink); }

/* Reviews */
.gzpd-reviews { overflow: hidden; border-radius: 14px; background: var(--gzpd-soft); padding: 10px 0; }
.gzpd-track { display: flex; gap: 12px; width: max-content; animation: gzpd-scroll 80s linear infinite; }
.gzpd-track img { height: 190px; width: auto; border-radius: 10px; box-shadow: 0 6px 16px rgba(8, 9, 13, .12); }
@keyframes gzpd-scroll { to { transform: translateX(-50%); } }
.gzpd-reviews:hover .gzpd-track { animation-play-state: paused; }

/* FAQ */
.gzpd-faq details { margin-top: 8px; border: 1px solid var(--gzpd-line); border-radius: 12px; padding: 12px 14px; }
.gzpd-faq summary { display: flex; justify-content: space-between; gap: 10px; border: 0; width: 100%; }
.gzpd-faq summary::after { content: "+"; font-weight: 900; }
.gzpd-faq details[open] summary::after { content: "–"; }
.gzpd-faq p { font-size: 14px; color: var(--gzpd-muted); }

/* Phones */
@media (max-width: 640px) {
  .gzpd { font-size: 14px; }
  .gzpd-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gzpd-hero { padding: 20px 16px; }
  .gzpd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gzpd-req { grid-template-columns: 1fr; }
  .gzpd-track img { height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .gzpd-track { animation: none; } }
/* Live cashback line: filled by /store/product.js; keeps its fallback text if the wallet can't be reached. */
.gzpd-earn small { flex-basis: 100%; font-size: 11.5px; font-weight: 700; opacity: .8; }

/* ======================================================================================
   Themes. A product picks one in the Description builder (class on .gzpd).
   No class = "Brand mix" (above). gzpd-t-a = Full dark, gzpd-t-b = Clean light,
   gzpd-t-c = Cover poster (uses the game cover and screenshots).
   ====================================================================================== */
.gzpd-cover, .gzpd-shots { display: none; }
.gzpd-hero-text { min-width: 0; }

/* ---------- A · Full dark gaming ---------- */
.gzpd.gzpd-t-a { background: #07080d; color: #c9cede; border: 1px solid #1f2436; border-radius: 16px; overflow: hidden; padding-bottom: 22px; }
.gzpd-t-a .gzpd-trust { background: transparent; border-radius: 0; border-bottom: 1px solid #1f2436; }
.gzpd-t-a .gzpd-trust span { color: #9aa3bf; }
.gzpd-t-a .gzpd-trust span.is-y { color: var(--gzpd-y); }
.gzpd-t-a .gzpd-hero { background: transparent; border-radius: 0; padding: 28px 22px 10px; }
.gzpd-t-a .gzpd-hero::before { opacity: .28; width: 420px; height: 420px; }
.gzpd-t-a .gzpd-chip { background: transparent; border: 1px solid var(--gzpd-accent-2); color: var(--gzpd-accent-2); }
.gzpd-t-a .gzpd-chip.is-y { border-color: var(--gzpd-y); color: var(--gzpd-y); background: transparent; }
.gzpd-t-a .gzpd-hero h2 { text-transform: uppercase; letter-spacing: .02em; }
.gzpd-t-a .gzpd-hero h2 span { display: block; }
.gzpd-t-a .gzpd-hero p { color: #b9bfd0; }
.gzpd-t-a .gzpd-earn { background: rgba(255, 255, 51, .06); border: 1.5px solid var(--gzpd-y); color: var(--gzpd-y); }
.gzpd-t-a .gzpd-sec { padding: 0 22px; }
.gzpd-t-a .gzpd-sec > h3 { color: var(--gzpd-accent-2); border: 0; padding: 0; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.gzpd-t-a .gzpd-sec p { color: #c9cede; }
.gzpd-t-a summary { color: #fff; }
.gzpd-t-a .gzpd-video { background: #121522; box-shadow: none; border: 1px solid #262b40; }
.gzpd-t-a .gzpd-how { background: #0d1019; border: 1px solid #262b40; margin: 26px 22px 0; padding: 18px; }
.gzpd-t-a .gzpd-step { background: #121522; border: 1px solid #262b40; }
.gzpd-t-a .gzpd-step i { color: var(--gzpd-accent-2); }
.gzpd-t-a .gzpd-step.is-y { background: #121522; border-color: var(--gzpd-y); }
.gzpd-t-a .gzpd-step.is-y i { color: var(--gzpd-y); }
.gzpd-t-a .gzpd-step.is-y b { color: #fff; }
.gzpd-t-a .gzpd-step.is-y span { color: #9aa3bf; }
.gzpd-t-a .gzpd-req > div { background: #121522; border-color: #262b40; }
.gzpd-t-a .gzpd-req > div.is-rec { background: #17160d; border-color: #3a3a12; }
.gzpd-t-a .gzpd-req h4, .gzpd-t-a .gzpd-req li b { color: #fff; }
.gzpd-t-a .gzpd-reviews { background: #121522; }
.gzpd-t-a .gzpd-faq details { background: #121522; border-color: #262b40; }
.gzpd-t-a .gzpd-faq p { color: #8f96ad; }

/* ---------- B · Clean light ---------- */
.gzpd-t-b .gzpd-trust { background: transparent; border-radius: 0; gap: 6px; }
.gzpd-t-b .gzpd-trust span { background: #f1f3f8; color: var(--gzpd-text); border-radius: 10px; font-weight: 700; }
.gzpd-t-b .gzpd-trust span.is-y { background: #fffbd1; color: var(--gzpd-ink); }
.gzpd-t-b .gzpd-hero { background: #fff; color: var(--gzpd-text); border-top: 6px solid var(--gzpd-accent); border-radius: 0; padding: 18px 2px 4px; margin-top: 12px; }
.gzpd-t-b .gzpd-hero::before { display: none; }
.gzpd-t-b .gzpd-chip, .gzpd-t-b .gzpd-chip.is-y { background: transparent; color: var(--gzpd-text); border: 1px solid #d8dbe6; }
.gzpd-t-b .gzpd-hero h2 { color: var(--gzpd-ink); font-weight: 800; }
.gzpd-t-b .gzpd-hero h2 span { color: var(--gzpd-accent); }
.gzpd-t-b .gzpd-hero p { color: var(--gzpd-muted); }
.gzpd-t-b .gzpd-earn { background: #fffbd1; border: 1px solid #f0d66a; }
.gzpd-t-b .gzpd-sec > h3 { border: 0; padding: 0; font-weight: 800; }
.gzpd-t-b .gzpd-video { background: transparent; padding: 0; box-shadow: none; }
.gzpd-t-b .gzpd-how { background: #fff; color: var(--gzpd-text); border: 1px solid var(--gzpd-line); }
.gzpd-t-b .gzpd-how > h3 { color: var(--gzpd-ink); }
.gzpd-t-b .gzpd-step { background: var(--gzpd-soft); }
.gzpd-t-b .gzpd-step i { color: var(--gzpd-accent); }
.gzpd-t-b .gzpd-step b { color: var(--gzpd-ink); }
.gzpd-t-b .gzpd-step span { color: var(--gzpd-muted); }
.gzpd-t-b .gzpd-step.is-y { background: #fffbd1; }

/* ---------- C · Cover poster ---------- */
.gzpd-t-c .gzpd-trust { background: transparent; border-radius: 0; gap: 8px; margin-bottom: 14px; }
.gzpd-t-c .gzpd-trust span { border: 2px solid var(--gzpd-ink); border-radius: 10px; color: var(--gzpd-ink); }
.gzpd-t-c .gzpd-trust span.is-y { background: var(--gzpd-y); }
.gzpd-t-c .gzpd-hero { background: var(--gzpd-y); color: var(--gzpd-ink); border: 2px solid var(--gzpd-ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--gzpd-ink);
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: center; }
.gzpd-t-c .gzpd-hero::before { display: none; }
.gzpd-t-c .gzpd-cover { display: block; }
.gzpd-t-c .gzpd-cover img { display: block; width: 100%; border-radius: 10px; border: 2px solid var(--gzpd-ink); }
.gzpd-t-c .gzpd-chip { background: var(--gzpd-ink); color: #fff; }
.gzpd-t-c .gzpd-chip.is-y { background: #fff; color: var(--gzpd-ink); }
.gzpd-t-c .gzpd-hero h2 { color: var(--gzpd-ink); }
.gzpd-t-c .gzpd-hero h2 span { color: var(--gzpd-accent); }
.gzpd-t-c .gzpd-hero p { color: #2b2b12; }
.gzpd-t-c .gzpd-earn { background: var(--gzpd-ink); color: var(--gzpd-y); }
.gzpd-t-c .gzpd-sec > h3 { display: inline-block; background: var(--gzpd-ink); color: #fff; border: 0; padding: 4px 12px; border-radius: 8px; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.gzpd-t-c .gzpd-shots { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.gzpd-t-c .gzpd-shots img { height: 150px; width: auto; border-radius: 10px; border: 2px solid var(--gzpd-ink); }
.gzpd-t-c .gzpd-video { background: var(--gzpd-ink); }
.gzpd-t-c .gzpd-how { background: #fff; color: var(--gzpd-text); border: 2px solid var(--gzpd-ink); }
.gzpd-t-c .gzpd-step { background: #fff; border: 2px solid var(--gzpd-ink); }
.gzpd-t-c .gzpd-step i { color: var(--gzpd-accent); }
.gzpd-t-c .gzpd-step b { color: var(--gzpd-ink); }
.gzpd-t-c .gzpd-step span { color: var(--gzpd-muted); }
.gzpd-t-c .gzpd-step.is-y { background: var(--gzpd-y); }
.gzpd-t-c .gzpd-req > div { border: 2px solid var(--gzpd-ink); }
.gzpd-t-c .gzpd-faq details { border: 2px solid var(--gzpd-ink); }

@media (max-width: 640px) {
  .gzpd-t-a .gzpd-sec { padding: 0 14px; }
  .gzpd-t-a .gzpd-how { margin: 22px 14px 0; }
  .gzpd-t-c .gzpd-hero { grid-template-columns: 1fr; }
  .gzpd-t-c .gzpd-shots img { height: 110px; }
}

/* ======================================================================================
   Smooth scrolling and light pages
   ====================================================================================== */
/* Parts below the screen are only drawn when you scroll near them. */
.gzpd-sec { content-visibility: auto; contain-intrinsic-size: auto 420px; }
.gzpd-hero, .gzpd-trust { contain: layout paint; }
/* Trailer: a picture until tapped, then the YouTube player (product.js). */
.gzpd-yt { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #000; }
.gzpd-yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gzpd-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%;
  background: var(--gzpd-y); color: var(--gzpd-ink); display: grid; place-items: center; font-size: 24px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.gzpd-yt:hover .gzpd-play { transform: scale(1.06); }
.gzpd-video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 10px; }
/* Reviews strip: its own layer, paused while off screen (product.js), swipe when still. */
.gzpd-track { will-change: transform; }
.gzpd-track img { width: auto; }
.gzpd-reviews.is-off .gzpd-track { animation-play-state: paused; }
.gzpd-track.is-still { animation: none; overflow-x: auto; width: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 10px; }
.gzpd-track.is-still img { scroll-snap-align: start; }
@media (hover: none) { .gzpd-reviews .gzpd-track:active { animation-play-state: paused; } }

/* Badge strip with 1–4 badges (chosen per product in the Description builder). */
.gzpd-trust[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.gzpd-trust[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gzpd-trust[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .gzpd-trust[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gzpd-trust[data-n="3"] span:last-child { grid-column: 1 / -1; }
}

/* ---------- Readable About / Story text ---------- */
/* Space between paragraphs, comfortable line length and size (the store's own p styles are reset). */
.gzpd .gzpd-sec > p, .gzpd details > p {
  margin: 0 !important; max-width: none !important; font-size: 15px !important; line-height: 1.75 !important;
  text-align: left !important; letter-spacing: normal; word-break: normal; overflow-wrap: break-word;
}
.gzpd .gzpd-sec > p + p, .gzpd details > p + p { margin-top: 12px !important; }
.gzpd .gzpd-sec > h3 + p { margin-top: 2px !important; }
/* "Read the story": a clear gap under the button, and the story set off with a coloured line. */
.gzpd .gzpd-sec details { margin-top: 14px; }
.gzpd .gzpd-sec details[open] summary { margin-bottom: 12px; }
.gzpd .gzpd-sec details > p { padding-left: 14px; border-left: 3px solid var(--gzpd-accent); }
.gzpd .gzpd-sec details > p + p { padding-top: 0; }
.gzpd-t-a .gzpd-sec details > p { border-left-color: var(--gzpd-accent-2); }
@media (max-width: 640px) {
  .gzpd .gzpd-sec > p, .gzpd details > p { font-size: 14.5px !important; line-height: 1.7 !important; }
}