/* ==========================================================================
   μRPG — shared stylesheet
   The dark sibling of assets/jek.css. Same five-colour spectrum, same
   structural conventions (rem type scale, visible focus, spectrum rule),
   but tuned for a dark ground.

   Background colours are deliberately left exactly as they were: the page
   ground stays #0a0a0a (#0041ba on the Echo Station page), the masthead
   bars keep their colours, panels stay unfilled and the footer stays
   transparent. Structure here is carried by borders, spacing and type
   rather than by surface fills.
   ========================================================================== */

:root {
  /* Brand spectrum — shared with the JEK side */
  --urpg-amber:  #ffb347;
  --urpg-orange: #f47742;
  --urpg-red:    #db3550;
  --urpg-sky:    #73b9ca;
  --urpg-cyan:   #0092b2;

  /* Ground — unchanged from the original pages */
  --urpg-bg:  #0a0a0a;
  --urpg-bar: #000000;

  /* Ink on a dark ground */
  --urpg-ink:      #ffffff;
  --urpg-ink-soft: rgba(255, 255, 255, 0.64);

  /* Hairlines. On dark, structure comes from borders, not fills. */
  --urpg-line:   rgba(255, 255, 255, 0.16);
  --urpg-line-2: rgba(255, 255, 255, 0.34);

  /* Amber is the μRPG accent — distinct from JEK's cyan, same palette */
  --urpg-accent: #ffb347;
  --urpg-focus:  0 0 0 3px rgba(255, 179, 71, 0.45);

  --urpg-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --urpg-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo,
               Consolas, "Liberation Mono", monospace;

  --urpg-measure: 44rem;
  --urpg-radius: 10px;
}

/* The Echo Station page keeps its own blue ground */
body.ground-echo { --urpg-bg: #0041ba; }

/* The Singer page carries the module's own artwork as its ground. The art
   sits on a fixed layer behind the content, under a scrim dark enough to
   keep body text at the same contrast it has on the flat pages. */
body.ground-singer {
  --urpg-bg: #080b11;
  /* transparent so the fixed art layer below is not painted over */
  background: transparent;
}

body.ground-singer::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom,
      rgba(6, 9, 14, 0.34) 0%,
      rgba(6, 9, 14, 0.22) 34%,
      rgba(6, 9, 14, 0.52) 100%),
    url("/urpg/assets/img/the-singer-bg.svg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center bottom;
  background-size: cover, cover;
}

/* Anomalies: pixel-art alpine valley, fixed behind the page.
   The image is drawn at 1872 x 1053 (16:9). It is never shown smaller than
   that: downscaling pixel art makes the dithering shimmer and drops pixels.
   Big screens scale it up just enough to cover; smaller screens (laptops,
   tablets, phones) show it at 1:1 and crop into the middle, so the edge
   cryptids only turn up once the window is big enough. */
body.ground-anomalies {
  --urpg-bg: #1d4f8c;               /* matches the flat zenith at the top of the image */
  isolation: isolate;
}
body.ground-anomalies::before {
  content: "";
  position: fixed;
  top: 0; right: 0; left: 0;
  height: 100vh;
  height: 100lvh;                   /* stays put while mobile toolbars slide in and out */
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(10, 30, 50, 0.35), rgba(10, 30, 50, 0) 35%),
    url("/urpg/assets/img/anomalies-bg.png") center bottom / cover no-repeat,
    #1d4f8c;
  /* cover, but never below native size (browsers without max() keep plain cover) */
  background-size: auto, max(100vw, 177.78vh, 1872px) auto, auto;
  background-size: auto, max(100vw, 177.78lvh, 1872px) auto, auto;
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}
body.ground-anomalies .page-title,
body.ground-anomalies .page-lede {
  text-shadow: 0 1px 3px rgba(0, 20, 40, 0.55);
}
/* Each label is a yellow luggage tag hanging from its stamp on a string:
   clipped top corners, a punched and reinforced hole, a slight tilt. The
   tag's shape is drawn on ::after so the string on ::before isn't clipped. */
body.ground-anomalies .tag {
  --tag-yellow: #f3c94b;
  --tag-hole-y: 16px;
  position: relative;
  margin-top: 26px;
  padding: 34px 16px 16px;
  color: #231c0e;
  transform-origin: 50% var(--tag-hole-y);
  transform: rotate(-1.5deg);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
body.ground-anomalies .image-item:nth-child(even) .tag { transform: rotate(1.5deg); }

body.ground-anomalies .tag::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% var(--tag-hole-y),
      #0000 5.5px, #d4a62a 6px 9px, #0000 9.5px),
    var(--tag-yellow);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px,
                     100% 100%, 0 100%, 0 22px);
  -webkit-mask: radial-gradient(circle at 50% var(--tag-hole-y), #0000 5.5px, #000 6px);
  mask: radial-gradient(circle at 50% var(--tag-hole-y), #0000 5.5px, #000 6px);
}

/* The string, from the bottom of the stamp through the hole */
body.ground-anomalies .tag::before {
  content: "";
  position: absolute;
  left: calc(50% - 1px);
  top: -26px;
  width: 2px;
  height: calc(26px + var(--tag-hole-y));
  background: #e8e0cc;
  border-radius: 1px;
}

body.ground-anomalies .tag .info-line {
  margin: 0;
  padding: 0 0 0.55rem;
  border-top: 0;
  border-bottom: 1px dashed rgba(35, 28, 14, 0.45);
}
body.ground-anomalies .tag .price { color: #9b2a1c; }
body.ground-anomalies .tag .title { color: #231c0e; }
body.ground-anomalies .tag .description {
  margin: 0.55rem 0 0;
  color: rgba(35, 28, 14, 0.82);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--urpg-bg);
  font-family: var(--urpg-sans);
  color: var(--urpg-ink);
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-size: 16px;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Masthead
   -------------------------------------------------------------------------- */

.top-container {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 72px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.bar  { flex: 1; min-height: 7px; }
.bar1 { background: var(--urpg-amber); }
.bar2 { background: var(--urpg-orange); }
.bar3 { background: var(--urpg-red); }
.bar4 { background: var(--urpg-sky); }
.bar5 { background: var(--urpg-cyan); }

.bar6 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.1rem;
  min-height: 34px;
  padding: 0.35rem 0.75rem;
  background: var(--urpg-bar);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  max-width: 100vw;
  overflow-x: hidden;
}

.bar6 a {
  margin: 0 0.45rem;
  padding: 0.15rem 0.1rem;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
}

.bar6 a:hover { border-bottom-color: var(--urpg-accent); text-decoration: none; }

.bar6 a:focus-visible {
  outline: 2px solid var(--urpg-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* μRPG wordmark over the spectrum bars */
.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(1rem, 0.85rem + 0.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  z-index: 20;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.main-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2rem) clamp(2rem, 5vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--urpg-ink);
  text-align: center;
}

.page-title {
  margin: 0 0 1.75rem;
  max-width: 26ch;
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--urpg-ink);
  text-align: center;
}

/* The spectrum rule, as on the JEK side */
.page-title::after {
  content: "";
  display: block;
  width: 88px;
  height: 3px;
  margin: 0.75rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg,
    var(--urpg-amber) 0%, var(--urpg-amber) 20%,
    var(--urpg-orange) 20%, var(--urpg-orange) 40%,
    var(--urpg-red) 40%, var(--urpg-red) 60%,
    var(--urpg-sky) 60%, var(--urpg-sky) 80%,
    var(--urpg-cyan) 80%, var(--urpg-cyan) 100%);
}

/* One-line page lede, sitting under the title and its spectrum rule */
.main-content > .page-lede {
  margin: -0.85rem 0 2rem;
  max-width: 52ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--urpg-ink-soft);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Prose — one reading column, matching the JEK side's measure
   -------------------------------------------------------------------------- */

.main-content > h2,
.main-content > h3 {
  width: 100%;
  max-width: var(--urpg-measure);
  margin: 1.75rem 0 0.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--urpg-ink);
  text-align: left;
}

.main-content > h2 {
  padding-bottom: 0.4rem;
  font-size: 1.25rem;
  border-bottom: 1px solid var(--urpg-line);
}

.main-content > h3 {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--urpg-accent);
}

.main-content > p,
.main-content p {
  width: 100%;
  max-width: var(--urpg-measure);
  margin: 0 0 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.main-content a { color: var(--urpg-accent); }
.main-content a:hover { text-decoration: underline; }

.main-content a:focus-visible {
  outline: 2px solid var(--urpg-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Catalogue / For Makers grid
   -------------------------------------------------------------------------- */

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(233px, 1fr));
  gap: 1.75rem;
  width: 100%;
  max-width: 760px;
}

/* A short row (For Makers) keeps the width of one column of three, centred,
   rather than stretching across the whole grid */
.image-grid:not(:has(> .image-item:nth-child(3))) {
  grid-template-columns: repeat(auto-fit, minmax(0, 234px));
  justify-content: center;
}

/* On Anomalies (and anywhere .stamp is used) each product is a postage stamp: the cover sits on a paper border with
   perforated edges, and the title, price and description sit underneath
   like a label in a stamp album. No card box around the whole tile. */
.image-item {
  display: flex;
  flex-direction: column;
}

body.ground-anomalies .image-item > a,
.stamp {
  --perf: 4px;                          /* perforation hole radius */
  position: relative;
  display: block;
  padding: 14px;                        /* the paper border */
  isolation: isolate;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
  transition: transform 0.18s ease, filter 0.18s ease;
}

/* The paper, drawn on a layer behind the cover so the perforations can be
   cut out of it with a mask while the drop shadow on the link still shows. */
body.ground-anomalies .image-item > a::before,
.stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #f3eee2;
  /* One strip of holes per edge, each a fixed-size tile repeated from the
     middle of its edge, so the holes keep their shape whatever the stamp's
     size (phones give fractional sizes). The plain rectangle fills the
     middle; the corners are left solid. */
  --holes-top:    radial-gradient(circle at 50% 0,    #0000 var(--perf), #000 calc(var(--perf) + 0.5px));
  --holes-bottom: radial-gradient(circle at 50% 100%, #0000 var(--perf), #000 calc(var(--perf) + 0.5px));
  --holes-left:   radial-gradient(circle at 0 50%,    #0000 var(--perf), #000 calc(var(--perf) + 0.5px));
  --holes-right:  radial-gradient(circle at 100% 50%, #0000 var(--perf), #000 calc(var(--perf) + 0.5px));
  -webkit-mask:
    var(--holes-top)    50% 0    / calc(3 * var(--perf)) calc(1.5 * var(--perf)) repeat-x,
    var(--holes-bottom) 50% 100% / calc(3 * var(--perf)) calc(1.5 * var(--perf)) repeat-x,
    var(--holes-left)   0 50%    / calc(1.5 * var(--perf)) calc(3 * var(--perf)) repeat-y,
    var(--holes-right)  100% 50% / calc(1.5 * var(--perf)) calc(3 * var(--perf)) repeat-y,
    linear-gradient(#000 0 0) 50% 50% /
      calc(100% - 2.5 * var(--perf)) calc(100% - 2.5 * var(--perf)) no-repeat;
  mask:
    var(--holes-top)    50% 0    / calc(3 * var(--perf)) calc(1.5 * var(--perf)) repeat-x,
    var(--holes-bottom) 50% 100% / calc(3 * var(--perf)) calc(1.5 * var(--perf)) repeat-x,
    var(--holes-left)   0 50%    / calc(1.5 * var(--perf)) calc(3 * var(--perf)) repeat-y,
    var(--holes-right)  100% 50% / calc(1.5 * var(--perf)) calc(3 * var(--perf)) repeat-y,
    linear-gradient(#000 0 0) 50% 50% /
      calc(100% - 2.5 * var(--perf)) calc(100% - 2.5 * var(--perf)) no-repeat;
}

/* Lifted off the page: a small tilt and a longer shadow */
@media (hover: hover) {
  body.ground-anomalies .image-item > a:hover {
    transform: translateY(-3px) rotate(-1.25deg);
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45));
  }
}

/* Donation stamps stay put on hover and grey out instead */
.stamp:hover { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)) grayscale(1) brightness(0.7); }

/* Core and For Makers: the cover in a plain white border */
.image-item > a { display: block; }
body:not(.ground-anomalies) .image-item > a { border: 6px solid #fff; }

.image-item > a:focus-visible {
  outline: 2px solid var(--urpg-accent);
  outline-offset: 4px;
}

.image-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.info-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  width: 100%;
  margin: 0.75rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--urpg-line);
}

.info-line .price {
  font-family: var(--urpg-mono);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--urpg-accent);
}

.info-line .title {
  width: 100%;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--urpg-ink);
  text-align: left;
}

.description {
  width: 100%;
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--urpg-ink-soft);
  text-align: left;
}

/* --------------------------------------------------------------------------
   Character builder
   -------------------------------------------------------------------------- */

.character-display {
  position: relative;
  width: 1in;
  height: 1in;
  margin-bottom: 2rem;
  flex-shrink: 0;
  flex-grow: 0;
  background: #0a0a0a;
  border: 2px solid var(--urpg-line-2);
  border-radius: 6px;
  overflow: hidden;
}

.character-display img {
  position: absolute;
  top: 0;
  left: 0;
  width: 1in;
  height: 1in;
  image-rendering: pixelated;
}

.options-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.9rem 1.75rem;
  justify-items: center;
  width: 100%;
  max-width: 700px;
  margin-bottom: 2rem;
}

.option-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 2.4in;
  min-height: 2.9rem;
  padding: 0.5rem 0.9rem;
  background: #0a0a0a;
  border: 1px solid var(--urpg-line-2);
  border-radius: 999px;
  box-shadow: none;
}

.option-group.centered { grid-column: 1 / -1; justify-self: center; }

.option-group h3 {
  flex-grow: 1;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--urpg-ink);
}

.arrow-button {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1;
  color: #fff;
  background: #0a0a0a;
  border: 1px solid var(--urpg-line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.arrow-button:hover { background: #ffffff; color: #0a0a0a; border-color: #ffffff; }
.arrow-button:focus-visible { outline: none; box-shadow: var(--urpg-focus); }

.button-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

.action-button {
  padding: 0.6rem 1.4rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  background: #db3550;
  border: 2px solid #db3550;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.action-button:hover { background: #f47742; border-color: #f47742; }
.action-button:active { transform: translateY(1px); }
.action-button:focus-visible { outline: none; box-shadow: var(--urpg-focus); }

/* --------------------------------------------------------------------------
   Donations — each Stripe button sits in its own stamp
   -------------------------------------------------------------------------- */

.donate-stamps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.75rem;
  margin-top: 1rem;
}

.donate-stamps stripe-buy-button { display: block; }

/* --------------------------------------------------------------------------
   Footer — stays transparent
   -------------------------------------------------------------------------- */

footer {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1.25rem 1.5rem 1.75rem;
  background: transparent;
}

footer .bottom-image {
  height: auto;
  width: auto;
  max-height: 62px;
  max-width: 30vw;
  border: 3px solid #fff;
  border-radius: 50%;
  display: block;
}

footer a:focus-visible {
  outline: 2px solid var(--urpg-accent);
  outline-offset: 3px;
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
  .bar6 { font-size: 0.75rem; }
  .bar6 a { margin: 0 0.3rem; }
  .image-grid { gap: 1.25rem; }
  .option-group { width: 100%; max-width: 18rem; }
  footer { justify-content: center; padding: 1.25rem 1rem 1.5rem; }
  footer .bottom-image { max-width: 45vw; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   Product page — image gallery (left) + buy panel (right)
   Used by uRPG/TerrorofEchoStationProductPage.html
   -------------------------------------------------------------------------- */

.product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  width: 100%;
  max-width: 1000px;
  text-align: left;
}

/* --- Left: gallery ------------------------------------------------------- */

.gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 559 / 795;      /* the cover's ratio; edit if art differs */
  border: 1px solid var(--urpg-line);
  border-radius: var(--urpg-radius);
  overflow: hidden;
}

.gallery-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.gallery-stage img.is-active { opacity: 1; }

.gallery-pips {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.gallery-pips[hidden] { display: none; }

.pip {
  width: 12px;
  height: 12px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--urpg-line-2);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pip:hover { border-color: #fff; }

.pip[aria-selected="true"] {
  background: var(--urpg-accent);
  border-color: var(--urpg-accent);
}

.pip:focus-visible { outline: none; box-shadow: var(--urpg-focus); }

/* --- Right: buy panel ---------------------------------------------------- */

.product-detail { display: flex; flex-direction: column; }

.product-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--urpg-ink);
  text-align: left;
}

.product-price {
  margin: 0 0 1.25rem;
  font-family: var(--urpg-mono);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--urpg-accent);
}

.main-content .buy-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.9rem 1.5rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: #0a0a0a;
  background: var(--urpg-accent);
  border: 2px solid var(--urpg-accent);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease,
              color 0.12s ease, transform 0.06s ease;
}

.main-content .buy-button:hover {
  background: var(--urpg-orange);
  border-color: var(--urpg-orange);
  color: #fff;
  text-decoration: none;
}

.main-content .buy-button:active { transform: translateY(1px); }
.main-content .buy-button:focus-visible { outline: none; box-shadow: var(--urpg-focus); }

.buy-note {
  margin: 0.7rem 0 0;
  font-family: var(--urpg-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--urpg-ink-soft);
  text-align: left;
}

.product-description {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--urpg-line);
}

.product-description h2 {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--urpg-accent);
  text-align: left;
}

.product-description h2:first-child { margin-top: 0; }

.product-description p {
  margin: 0 0 0.9rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.product-description ul {
  margin: 0 0 0.9rem;
  padding-left: 1.15rem;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  text-align: left;
}

.product-description li { margin-bottom: 0.35rem; }

.product-back {
  width: 100%;
  max-width: 1000px;
  margin: 2.25rem 0 0;
  font-size: 0.875rem;
  text-align: left;
}

@media (max-width: 860px) {
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .gallery-stage  { max-width: 380px; margin: 0 auto; }
  .gallery-pips   { margin-bottom: 0.5rem; }
}