/* ==================================================================
   home-v2.css — layout experiment for the home page.

   Structure borrowed from bedrock-computers.co.uk at Daz's request:
   promo ticker, trust bar, hero, 4-up value bar, 4-up
   category tiles, best-seller cards with spec tables, full bleed
   photo band, wide promo banner, range accordion.

   Everything is rendered in the existing Fosse dark-glass theme and
   the existing Fraunces / Inter type system. No new colours, no new
   fonts. Loaded ONLY by home-v2.php, so nothing here can affect the
   live home page.
   ================================================================== */

/* The site header is `position: fixed`, so anything at the very top of the
   page renders underneath it. On the live home page the hero simply carries
   enough top padding to clear it. Here the first thing on the page is the
   ticker, so the whole page is offset by the header's height instead. */
/* --v2-gut must sit on :root, not on .page-homev2. The pages added on
   2026-07-25 reuse .v2-wrap but do not carry that body class, so the variable
   was undefined there, which made `min(1320px, 100% - (var(--v2-gut) * 2))`
   invalid and collapsed the wrapper to full width. Every image on those pages
   ran to the edge of the screen as a result. */
:root { --v2-gut: clamp(1.25rem, 4vw, 4.5rem); }
.page-homev2 { --v2-head: 96px; }
.page-homev2 main { padding-top: var(--v2-head); }
@media (max-width: 900px) { .page-homev2 { --v2-head: 84px; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.v2-wrap {
  width: min(1320px, 100% - (var(--v2-gut) * 2));
  margin-inline: auto;
}

/* ---------- 1. promo ticker ---------- */

.v2-ticker {
  background: linear-gradient(90deg, var(--violet) 0%, var(--blue) 50%, var(--violet-hot) 100%);
  color: #fff;
  overflow: hidden;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.v2-ticker__track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  animation: v2-ticker 38s linear infinite;
}
.v2-ticker__item {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}
@keyframes v2-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .v2-ticker__track { animation: none; }
}

/* ---------- 2. trust bar ---------- */

.v2-trust {
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid var(--glass-line);
  font-size: 0.82rem;
}
.v2-trust__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  flex-wrap: wrap;
}
.v2-trust__score { display: flex; align-items: center; gap: 0.6rem; color: var(--paper2-dim); }
.v2-trust__score strong { color: var(--paper2); }
.v2-trust__score .stars { display: inline-flex; }
.v2-trust__links { display: flex; gap: 1.4rem; color: var(--paper2-dim); }
.v2-trust__links a { text-decoration: none; }
.v2-trust__links a:hover { color: var(--paper2); }
@media (max-width: 720px) { .v2-trust__links { display: none; } }

/* ---------- 3. hero ----------
   Two columns: the 3D machine and its option panel on the left, the
   headline on the right. Bedrock splits its hero on a hard diagonal
   and this once did too, but that shape had to go. See the note on
   .v2-hero__cut below. */

.v2-hero {
  position: relative;
  isolation: isolate;
  background: var(--void);
  overflow: hidden;
}
/* HERO BACKGROUND — the diagonal is gone, 2026-07-25.

   It used to be a hard clip-path wedge. stoneygatecomputers.co.uk opens with a
   diagonal light split on near black behind a violet lit PC, and this was the
   same idea in a different construction, on the one screen every visitor sees
   first. Daz picked option C of three shown to him: keep the two columns and
   the colour, lose the edge. The violet now arrives as a soft gradient from
   the right with no boundary anywhere, so there is nothing to compare.

   Colours are unchanged. Daz was explicit that the palette stays. */
.v2-hero__cut {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(65% 90% at 88% 30%, rgba(139, 92, 246, 0.34), transparent 70%),
    linear-gradient(90deg, transparent 38%, rgba(42, 21, 102, 0.55) 100%);
}

/* Left column carries the machine with its panel underneath it, right column
   the headline. Explicit areas because the panel is a third grid child and
   auto placement would drop it into the headline's column. */
.v2-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "stage body" "cfg body";
  /* `auto auto`, not `1fr auto`. A 1fr first row let the machine's box grow to
     fill whatever height the hero had, so on a short laptop viewport the rig
     rendered far larger than intended and pushed the panel off the fold. */
  grid-template-rows: auto auto;
  /* same variable the wedge's position is derived from, so the two stay in step */
  gap: 1rem var(--v2-hgap);
  align-items: center;
  align-content: center;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  min-height: min(64vh, 620px);
}

/* fixed height, so the machine is the same size on every viewport and never
   grows into the panel underneath it */
.v2-hero__stage {
  grid-area: stage;
  position: relative;
  /* option B of the three sizes shown to Daz on 2026-07-25 */
  height: clamp(340px, 52vh, 470px);
}
/* site.css gives .hero-rig3d a fixed `width: min(400px, 82vw)` and
   `height: min(540px, 64vh)`. Explicit dimensions beat `inset: 0`, so the
   canvas kept its own 540px height inside a shorter stage and rendered the
   machine larger than the box it sits in.

   The box has to stay PORTRAIT. Clearing the width to fill the column gave a
   649x250 landscape canvas, and because the rig frames itself to whichever
   axis is tighter, a tall tower in a short wide box is scaled right down and
   stranded in the middle of a lot of empty black. Constrain the width and
   centre it instead. */
.v2-hero__stage .hero-rig3d {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(360px, 100%);
  height: 100%;
}
.v2-hero__body { grid-area: body; }
.v2-rigcfg { grid-area: cfg; }

.v2-hero__body { max-width: 34rem; }
.v2-hero__title {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  margin: 0.5rem 0 0;
}
.v2-hero__lede {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 1.15vw, 1.12rem);
  color: var(--paper2-dim);
  margin: 1.4rem 0 0;
}
.v2-hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.v2-hero__note {
  margin: 1.4rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--paper2-faint);
}

/* The panel sits under the machine, inside the left column, and is widened so
   the option groups lay out in five columns instead of three. The tall
   three-column version was what ran off the bottom of the fold and left the
   colour swatches cut in half. */
/* Sized to the machine it controls, not to the column it sits in.
   At 640px it was 97% of the column and 178% of the machine's width, which is
   what made it look oversized. Now roughly the width of the machine with a
   little room either side. Narrower means taller, so the chips and swatches
   shrink to compensate and it stays a two row panel. */
.v2-hero .v2-rigcfg {
  width: min(440px, 100%);
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem 0.6rem;
  padding: 0.7rem 0.8rem;
  justify-self: center;
  margin-top: 0;
}
.v2-hero .v2-rigcfg .rigcfg__label { font-size: 0.56rem; letter-spacing: 0.13em; }
.v2-hero .v2-rigcfg .chip { font-size: 0.66rem; padding: 0.26rem 0.46rem; }
.v2-hero .v2-rigcfg .rigcfg__opts,
.v2-hero .v2-rigcfg .rigcfg__swatches { gap: 0.28rem; }
.v2-hero .v2-rigcfg .sw { width: 16px; height: 16px; }

/* Lighting has five chips and needs the room; Colour has twelve swatches and
   takes the rest of the row. */
.v2-hero .v2-rigcfg .rigcfg__group:nth-last-child(2) { grid-column: span 2; }
.v2-hero .v2-rigcfg .rigcfg__group:last-child { grid-column: span 2; }

@media (max-width: 700px) {
  .v2-hero .v2-rigcfg { grid-template-columns: repeat(2, 1fr); }
  .v2-hero .v2-rigcfg .rigcfg__group:nth-last-child(2),
  .v2-hero .v2-rigcfg .rigcfg__group:last-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .v2-hero__cut { inset: 0; }
  .v2-hero__inner {
    grid-template-columns: 1fr;
    grid-template-areas: "body" "stage" "cfg";
    grid-template-rows: auto;
    min-height: 0;
    gap: 1.5rem 0;
  }
  .v2-hero__body { max-width: none; }
  .v2-hero__stage { min-height: 300px; }
}

/* ---------- 4. value bar ---------- */

.v2-values {
  background: rgba(255, 255, 255, 0.035);
  border-block: 1px solid var(--glass-line);
  padding: clamp(1.4rem, 2.4vw, 2rem) 0;
}
.v2-values__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.4vw, 2.4rem);
}
.v2-value { display: flex; gap: 0.9rem; align-items: flex-start; }
.v2-value svg { width: 26px; height: 26px; flex: none; color: var(--cyan); margin-top: 2px; }
.v2-value h3 {
  margin: 0 0 0.2rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper2);
}
.v2-value p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--paper2-dim); }
@media (max-width: 900px) { .v2-values__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .v2-values__grid { grid-template-columns: 1fr; } }

/* ---------- shared section furniture ---------- */

.v2-section { padding: clamp(3.5rem, 6vw, 6rem) 0; }
.v2-section__head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 3.5vw, 3rem); }
.v2-section__head h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
.v2-section__head p { color: var(--paper2-dim); margin: 1rem 0 0; }

/* ---------- 5. category tiles ---------- */

.v2-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.8vw, 1.6rem); }
.v2-cat {
  display: block;
  text-decoration: none;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--panel);
  padding: 0.75rem 0.75rem 1.2rem;
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-cat:hover { border-color: var(--glass-hi); transform: translateY(-4px); }
.v2-cat__media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  margin-bottom: 1rem;
}
.v2-cat__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04) brightness(0.9); transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.v2-cat:hover .v2-cat__media img { filter: saturate(0.95) brightness(1); transform: scale(1.04); }
.v2-cat__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 12, 0.78), rgba(5, 6, 12, 0) 55%);
}
.v2-cat h3 { margin: 0 0 0.4rem; padding: 0 0.4rem; font-family: var(--body); font-size: 1.02rem; font-weight: 600; color: var(--paper2); }
.v2-cat p { margin: 0 0 0.9rem; padding: 0 0.4rem; font-size: 0.87rem; line-height: 1.55; color: var(--paper2-dim); }
.v2-cat__go { padding: 0 0.4rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; color: var(--cyan); }
@media (max-width: 900px) { .v2-cats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .v2-cats { grid-template-columns: 1fr; } }

/* ---------- 6. best sellers, spec-table cards ---------- */

.v2-sellers { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 1.6vw, 1.4rem); }
.v2-seller {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--panel);
  padding: 0.9rem 0.9rem 1.1rem;
  position: relative;
  transition: border-color 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.v2-seller:hover { border-color: var(--glass-hi); transform: translateY(-4px); }
.v2-seller--pop { border-color: rgba(168, 85, 247, 0.55); }
.v2-seller__flag {
  position: absolute;
  top: -0.65rem; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--violet), var(--violet-hot));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.v2-seller__media {
  aspect-ratio: 4 / 3.4;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  margin-bottom: 0.9rem;
}
.v2-seller__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(1.04) brightness(0.9); }
.v2-seller__name {
  margin: 0 0 0.8rem;
  text-align: center;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper2);
}
.v2-spec { list-style: none; margin: 0 0 1rem; padding: 0; font-size: 0.78rem; }
.v2-spec li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.34rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.v2-spec .k { color: var(--paper2-faint); letter-spacing: 0.04em; flex: none; }
.v2-spec .v { color: var(--paper2); text-align: right; }
/* margin-top:auto pushes the price and button to the card's bottom edge, so a
   spec row that wraps onto two lines does not knock that card's footer out of
   line with the other three. */
.v2-seller__price { margin: auto 0 0.9rem; text-align: right; font-size: 1.3rem; font-family: var(--display); font-weight: 600; color: var(--cyan); }
.v2-seller__price span { font-size: 0.72rem; font-family: var(--body); font-weight: 400; color: var(--paper2-faint); display: block; letter-spacing: 0.1em; text-transform: uppercase; }
.v2-seller .btn { width: 100%; justify-content: center; text-align: center; }
@media (max-width: 1000px) { .v2-sellers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .v2-sellers { grid-template-columns: 1fr; } }

/* ---------- 7. full bleed photo band ---------- */

.v2-band { position: relative; overflow: hidden; border-block: 1px solid var(--glass-line); }
.v2-band__mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: clamp(300px, 34vw, 420px);
}
.v2-band__mosaic img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) brightness(0.42) contrast(1.05); }
.v2-band__mosaic img:nth-child(n+5) { display: none; }
@media (min-width: 900px) { .v2-band__mosaic img:nth-child(n+5) { display: block; } }
.v2-band__over {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--v2-gut);
  background: radial-gradient(70% 90% at 50% 50%, rgba(5, 6, 12, 0.55), rgba(5, 6, 12, 0.9));
}
.v2-band__over h2 { font-size: clamp(1.9rem, 3.6vw, 3.1rem); }
.v2-band__over p { max-width: 40rem; margin: 1rem auto 1.6rem; color: var(--paper2-dim); }

/* ---------- 8. wide promo banner ---------- */

.v2-promo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(90% 140% at 12% 30%, rgba(139, 92, 246, 0.30), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
}
.v2-promo__media { aspect-ratio: 4 / 2.7; }
.v2-promo__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) brightness(0.86); }
.v2-promo__body { padding: clamp(1.5rem, 3vw, 2.8rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.8rem) 0; }
.v2-promo__body h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
.v2-promo__body p { color: var(--paper2-dim); margin: 1rem 0 1.6rem; }
@media (max-width: 860px) {
  .v2-promo { grid-template-columns: 1fr; }
  .v2-promo__body { padding: 0 1.4rem 1.8rem; }
}

/* ---------- 9. range accordion ----------
   Bedrock's is four panels, one open and the rest collapsed to a
   vertical tab with a rotated label. Same idea here, driven by a
   radio group so it works without JavaScript. */

.v2-range { display: flex; gap: 0.8rem; height: clamp(340px, 40vw, 480px); }
.v2-range__item {
  position: relative;
  flex: 0 0 74px;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  overflow: hidden;
  transition: flex-basis 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.v2-range__item img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.7) brightness(0.5);
}
.v2-range__item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(5, 6, 12, 0.92), rgba(5, 6, 12, 0.25));
}
.v2-range__radio { position: absolute; opacity: 0; pointer-events: none; }
/* `flex: 1 1 auto`, not `flex-basis: 100%`. The collapsed panels are
   `flex: 0 0 74px` and cannot shrink, so a 100% basis on the open one pushed
   the last panels off the right hand edge. Growing into whatever is left
   keeps all four inside the row. */
.v2-range__radio:checked + .v2-range__item { flex: 1 1 auto; }

.v2-range__hit { position: absolute; inset: 0; z-index: 3; cursor: pointer; }
.v2-range__radio:checked + .v2-range__item .v2-range__hit { display: none; }
.v2-range__radio:focus-visible + .v2-range__item { outline: 2px solid var(--cyan); outline-offset: 3px; }

.v2-range__tab {
  position: absolute;
  top: 1rem; left: 1rem;
  z-index: 2;
  writing-mode: vertical-rl;
  background: linear-gradient(180deg, var(--violet), var(--violet-hot));
  color: #fff;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.8rem 0.45rem;
  border-radius: 7px;
  white-space: nowrap;
}
.v2-range__card {
  position: absolute;
  left: 3.6rem; right: 1.4rem; bottom: 1.4rem;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease 0.15s, transform 0.5s ease 0.15s;
  pointer-events: none;
  background: rgba(9, 11, 21, 0.78);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  max-width: 30rem;
}
.v2-range__radio:checked + .v2-range__item .v2-range__card { opacity: 1; transform: none; pointer-events: auto; }
.v2-range__card h3 { margin: 0 0 0.4rem; font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
.v2-range__card p { margin: 0 0 0.9rem; font-size: 0.88rem; color: var(--paper2-dim); }

@media (max-width: 860px) {
  .v2-range { flex-direction: column; height: auto; }
  .v2-range__item { flex-basis: 210px; }
  .v2-range__radio:checked + .v2-range__item { flex-basis: 330px; }
  .v2-range__card { left: 1.4rem; }
  .v2-range__tab { writing-mode: horizontal-tb; }
}

@media (prefers-reduced-motion: reduce) {
  .v2-range__item, .v2-range__card, .v2-cat, .v2-seller { transition: none; }
}


/* ==================================================================
   Pages added with the 2026-07-25 navigation rebuild:
   built-for-your-game.php, creator-workstation.php, parts-extras.php.
   They reuse the v2 furniture above, so this file is loaded on them
   too; only what is genuinely new to those pages lives here.
   ================================================================== */

/* ---------- built-for-your-game: alternating rows ---------- */

.game-row {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) 0;
  border-bottom: 1px solid var(--glass-line);
}
.game-row:last-of-type { border-bottom: 0; }
.game-row--flip .game-row__media { order: 2; }

.game-row__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-line);
  box-shadow: 0 40px 80px -44px rgba(0, 0, 0, 0.95);
}
.game-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.04) brightness(0.9);
}

.game-row__title { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin: 0.4rem 0 0.9rem; }
.game-row__body > p { color: var(--paper2-dim); margin: 0 0 1.2rem; }

.game-row__points { list-style: none; margin: 0 0 1.6rem; padding: 0; }
.game-row__points li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: var(--paper2-dim);
}
.game-row__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--cyan), var(--violet-hot));
}

.game-row__pick {
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
}
.game-row__picklabel {
  margin: 0 0 0.35rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper2-faint);
}
.game-row__pickname {
  margin: 0 0 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--paper2);
}
.game-row__pickname span {
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--cyan);
  margin-left: 0.6rem;
}
.game-row__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; }

@media (max-width: 900px) {
  .game-row { grid-template-columns: 1fr; }
  .game-row--flip .game-row__media { order: 0; }
}

/* ---------- creator-workstation: icon on a tile ---------- */

.disc__icon {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  margin: 0.3rem 0.4rem 0.9rem;
  border-radius: 12px;
  border: 1px solid var(--glass-line);
  background: rgba(139, 92, 246, 0.14);
  color: var(--cyan);
}
.disc__icon svg { width: 22px; height: 22px; }

/* ---------- parts-extras: category jump bar and lists ---------- */

.parts-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
}
.parts-jump a {
  text-decoration: none;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--glass-line);
  color: var(--paper2-dim);
  background: var(--panel);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.parts-jump a:hover { color: #fff; border-color: var(--glass-hi); }

.parts-grp { margin-bottom: clamp(2rem, 3.5vw, 3rem); scroll-margin-top: 120px; }
.parts-grp__head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--glass-line);
}
.parts-grp__icon {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 1px solid var(--glass-line);
  color: var(--cyan);
}
.parts-grp__icon svg { width: 18px; height: 18px; }
.parts-grp__title { font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin: 0; }
.parts-grp__count {
  margin-left: auto;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper2-faint);
}

.parts-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.4rem;
}
.parts-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--glass-line);
  background: var(--panel);
}
.parts-item__main { min-width: 0; }
.parts-item__name { margin: 0; font-size: 0.9rem; color: var(--paper2); }
.parts-item__note { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--paper2-faint); }
.parts-item__price {
  margin: 0;
  flex: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cyan);
  white-space: nowrap;
}
@media (max-width: 800px) { .parts-list { grid-template-columns: 1fr; } }


/* ---------- reviews and FAQ ----------
   Carried across when this layout became the home page. Both are managed in
   admin and rendered on no other page, so they had to come with it. */

.v2-reviews__score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
  color: var(--paper2-dim);
  font-size: 0.9rem;
}
.v2-reviews__score strong { color: var(--paper2); }

.v2-reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.v2-review {
  margin: 0;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--glass-line);
  border-radius: 14px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.v2-review blockquote {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--paper2);
}
.v2-review figcaption {
  margin-top: auto;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper2-faint);
}
@media (max-width: 950px) { .v2-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .v2-reviews { grid-template-columns: 1fr; } }

.v2-faq { max-width: 62rem; margin-inline: auto; }
.v2-faq__item {
  border: 1px solid var(--glass-line);
  border-radius: 12px;
  background: var(--panel);
  margin-bottom: 0.6rem;
  overflow: hidden;
}
.v2-faq__item summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.3rem;
  font-weight: 600;
  color: var(--paper2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.v2-faq__item summary::-webkit-details-marker { display: none; }
.v2-faq__item summary::after {
  content: "+";
  font-size: 1.3rem;
  line-height: 1;
  color: var(--cyan);
  flex: none;
  transition: transform 0.25s ease;
}
.v2-faq__item[open] summary::after { transform: rotate(45deg); }
.v2-faq__item summary:hover { background: rgba(255, 255, 255, 0.04); }
.v2-faq__answer { padding: 0 1.3rem 1.2rem; }
.v2-faq__answer p { margin: 0; color: var(--paper2-dim); }