/* Store page (/premium).
 *
 * The digital cards keep the styles they had in v2.css; this sheet adds the
 * store header, the donation block and the printed items. Loaded by this page
 * only, so the shop can be as wide as a shop without touching the game.
 */

.store-page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 20px 20px 56px;
}

.store-head h1 {
  margin: 0 0 4px;
  font-size: 30px;
}

.store-lead {
  max-width: 72ch;
  margin: 0 0 12px;
  color: #444a6d;
  font-size: 14.5px;
  line-height: 1.5;
}

.store-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 12px;
  border: 1px solid #dfe3f5;
  border-radius: 999px;
  background: #fff;
  color: #0a66c2;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.store-jump a:hover {
  border-color: rgba(0, 119, 181, 0.45);
  background: rgba(0, 119, 181, 0.06);
}

.store-section {
  /* Sections are spaced, not ruled off: a hairline between two grids of white
     cards reads as a form to fill in. The heading carries the line instead. */
  padding: 0;
  border-top: 0;
  margin-top: 46px;
}

/* The title runs out to the right in a hairline, so a section has an edge
   rather than a small title floating above a grid. */
.store-section h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 8px;
  font-size: 23px;
  letter-spacing: -0.015em;
}

.store-section h2::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--store-line), rgba(230, 233, 242, 0));
}

.store-section-lead {
  max-width: 74ch;
  margin: 0 0 18px;
  color: var(--store-muted);
  font-size: 14.5px;
  line-height: 1.55;
}

/* --------------------------- the store home ----------------------------- */

/* The store home is a hero, then a grid of product cards, each card a link to
   the page that sells it. The sub-pages carry the back link. */
.store-back {
  margin: 0 0 12px;
}

.store-back a {
  color: #0a66c2;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.store-back a:hover {
  text-decoration: underline;
}

/* The "from" of a printed price, in the visitor's own currency once the
   catalog answers. */
.merch-price__from {
  color: #5f667f;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* The shops's copies of the shared v2 cards. This sheet is loaded after the
   page's own and before v2.css, so anything that has to win is scoped to
   .store-page, which also keeps the game's own cards untouched. */
/* One row of four: the bundle takes a third of the width and each single pack a
   third of what is left (3fr + 2fr × 3 = 9fr, so 3/9 and 2/9 each), which keeps
   the upsell first and the parts readable beside it. */
.store-page .premium-offers {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr);
  gap: 12px;
  margin: 16px 0 0;
}

.store-page .premium-card {
  gap: 8px;
  padding: 16px;
  border-radius: 14px;
}

.store-page .premium-card h3 {
  font-size: 15.5px;
}

.store-page .premium-card .price {
  font-size: 24px;
}

.store-page .premium-card ul {
  padding-left: 16px;
  font-size: 12.5px;
  line-height: 1.45;
}

.store-page .premium-card button {
  padding: 10px 12px;
  font-size: 14px;
}

/* Best value keeps the tint, but takes its place in the row instead of
   stretching over the whole grid. */
.store-page .premium-card--featured {
  grid-column: auto;
  box-shadow: 0 10px 22px rgba(0, 119, 181, 0.12);
}

.store-page .premium-badge {
  top: -0.6rem;
  left: 1rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.66rem;
}

.store-page .premium-save {
  margin: 0;
  color: #5a6280;
  font-size: 12.5px;
  line-height: 1.45;
}

/* "Can't pay right now?" used to sit here as a one-line card of its own. It is
   gone: the free session it offered is still reachable from the game when the
   offline rounds run out. */

/* The store home no longer has sections to jump to, and the tip row it used to
   carry lives in the cart now. */
.store-page .store-donate {
  max-width: none;
}

/* The tip chips are built by store.js from the market's amounts, and only once
   the order holds something: a donation is part of the checkout, not a section
   of its own on a store page. They carry `data-cart-tip`, never `data-buy`,
   which on these pages belongs to the digital offers. */
.merch-tip {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eef0f8;
}

.merch-tip__label {
  margin: 0 0 6px;
  color: #333;
  font-size: 13px;
  font-weight: 700;
}

.merch-tip__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.merch-tip__chip {
  border: 1px solid rgba(0, 119, 181, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  background: #fff;
  color: #0a66c2;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.merch-tip__chip:hover {
  background: rgba(0, 119, 181, 0.08);
}

.merch-tip__chip.is-active {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #fff;
}

.merch-tip__note {
  margin: 8px 0 0;
  color: #6a7086;
  font-size: 12px;
  line-height: 1.4;
}

.store-page .store-note {
  max-width: 74ch;
  margin: 10px 0 0;
  color: #6a7086;
  font-size: 12.5px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  /* Two by two: four cards in a row would leave the packs too narrow to read. */
  .store-page .premium-offers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .store-page .premium-offers {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ------------------------------- merch ---------------------------------- */

/* Four short cards rather than four columns of brochure: the artwork is a
   thumbnail, the name and the price share a line, and the flavour text is
   clamped to two lines so the row stays the same height whatever the language
   does to it. */
.merch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 12px;
}

.merch-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* The last row takes the slack, so the buttons line up across the row of
     cards however long a description runs in the visitor's language. */
  grid-template-rows: auto auto auto auto 1fr;
  align-items: center;
  gap: 8px 10px;
  background: #fff;
  border: 1px solid #dfe3f5;
  border-radius: 14px;
  padding: 12px;
}

.merch-art {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #f5f7fd;
}

/* The printed items, wherever they appear: a photo of the blank product, with
   the print drawn on it. One photo per item in assets/image/merch/, and the
   print sits where that item's print really goes — the numbers are below, and
   the designer's live preview uses the same ones, so the mockup on the site and
   the mockup in the editor agree. */
.item-photo {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  background: #f5f7fd;
}

.item-photo__blank {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The print itself: the profile card that goes on the item, small. A face from
   the game (put there by print-faces.js), the two answers under it drawn as one
   gradient rather than two more elements, and the name line. */
.item-photo__print {
  position: absolute;
  left: var(--print-left);
  top: var(--print-top);
  width: var(--print-width);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  padding: 6%;
  border-radius: 5%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 19, 34, 0.32);
  overflow: hidden;
}

.item-photo__print img {
  order: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8%;
  background: #d7dae2;
}

.item-photo__print::before {
  content: '';
  order: 2;
  height: 9%;
  margin-top: 9%;
  border-radius: 2px;
  background: linear-gradient(90deg, #0077b5 0 47%, #fff 47% 53%, #cf0a2c 53% 100%);
}

.item-photo__print::after {
  content: '';
  order: 3;
  width: 82%;
  height: 5%;
  margin-top: 8%;
  border-radius: 2px;
  background: #c2c6d0;
}

/* Where the print lands on each blank, as a percentage of the photo. */
.item-photo[data-item='tee'],
.design-mockup[data-item='tee'] {
  --print-left: 39.5%;
  --print-top: 31%;
  --print-width: 21%;
}

.item-photo[data-item='hoodie'],
.design-mockup[data-item='hoodie'] {
  --print-left: 39%;
  --print-top: 33%;
  --print-width: 22%;
}

.item-photo[data-item='mug'],
.design-mockup[data-item='mug'] {
  --print-left: 35%;
  --print-top: 31%;
  --print-width: 23%;
}

.item-photo[data-item='tote'],
.design-mockup[data-item='tote'] {
  --print-left: 36%;
  --print-top: 39%;
  --print-width: 28%;
}

.merch-card h3 {
  grid-column: 1;
  margin: 0;
  font-size: 15px;
}

.merch-price {
  grid-column: 2;
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  white-space: nowrap;
}

.merch-desc {
  grid-column: 1 / -1;
  margin: 0;
  color: #5f667f;
  font-size: 12px;
  line-height: 1.45;
}

.merch-options {
  grid-column: 1 / -1;
  display: grid;
  /* Wide enough for the longest value a colour has to show ("Natural"), which
     means three fields wrap onto a second row rather than being clipped. */
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  margin: 0;
}

.merch-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7086;
}

.merch-field .select-field {
  width: 100%;
}

/* fields.js replaces each native select with this widget, so the compact box
   has to be asked for on the widget itself: a shorter trigger, a smaller
   chevron, and thin padding so "Natural" still fits next to the arrow. */
.store-page .merch-field .select-field {
  --widget-height: 32px;
  --widget-radius: 9px;
}

.store-page .merch-field .select-field__trigger {
  gap: 4px;
  padding: 0 6px;
  font-size: 12px;
}

.store-page .merch-field .select-field__chevron {
  width: 12px;
  height: 12px;
}

.merch-add {
  grid-column: 1 / -1;
  align-self: end;
  margin-top: 2px;
  border: 0;
  border-radius: 9px;
  padding: 9px 12px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  background: #0a66c2;
  color: #fff;
  transition: transform 120ms ease, background 120ms ease;
}

.merch-add:hover {
  background: #0957a6;
}

.merch-foot {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 14px;
}

.merch-personalise,
.merch-cart {
  background: #fff;
  border: 1px solid #dfe3f5;
  border-radius: 14px;
  padding: 16px;
}

.merch-personalise h3,
.merch-cart h3 {
  margin: 0 0 6px;
  font-size: 17px;
}

.merch-personalise p {
  color: #444a6d;
  line-height: 1.5;
  font-size: 13px;
}

/* The whole side column follows the scroll, so the card the buyer is building
   and the total they are building it for are never off screen. */
.merch-side {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
}

.merch-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 4px 0 10px;
}

.merch-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.merch-choice input {
  width: 18px;
  height: 18px;
  accent-color: #0a66c2;
}

.merch-photo-label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7086;
}

.merch-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
}

.merch-preview[hidden] {
  display: none;
}

.merch-preview img {
  width: 104px;
  height: 104px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #dfe3f5;
  background: #f5f7fd;
}

.merch-preview figcaption {
  font-size: 12.5px;
  color: #6a7086;
}

.merch-rights {
  margin: 10px 0 0;
  font-size: 13px;
  color: #444a6d;
  line-height: 1.45;
}

.merch-rights label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.merch-rights input {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #0a66c2;
}

/* The cart rides in the sticky column above, so it does not need to stick on
   its own; the flash and the totals keep doing the talking. */
.merch-cart {
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.merch-cart.is-flash {
  border-color: rgba(0, 119, 181, 0.55);
  box-shadow: 0 12px 28px rgba(0, 119, 181, 0.18);
}

.merch-cart-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.merch-cart-items li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.45;
  color: #333;
}

.merch-line-price {
  white-space: nowrap;
  font-weight: 600;
}

.merch-line-remove {
  border: 0;
  background: none;
  color: #6a7086;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
}

.merch-line-remove:hover {
  color: #cf0a2c;
}

.merch-cart-empty {
  margin: 0;
  color: #6a7086;
  font-size: 13.5px;
  line-height: 1.5;
}

.merch-totals {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #eef0f8;
  font-size: 14px;
}

.merch-totals[hidden] {
  display: none;
}

.merch-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.merch-totals dt,
.merch-totals dd {
  margin: 0;
}

.merch-totals dd {
  font-weight: 600;
  white-space: nowrap;
}

.merch-total-row {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #eef0f8;
  font-size: 18px;
}

.merch-shipping-note {
  margin: 12px 0 0;
  color: #6a7086;
  font-size: 12.5px;
  line-height: 1.5;
}

.merch-checkout {
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 10px;
  padding: 13px 16px;
  font-weight: 700;
  font-size: 15.5px;
  cursor: pointer;
  background: #0a66c2;
  color: #fff;
}

.merch-checkout[disabled] {
  opacity: 0.65;
  cursor: default;
}

.merch-clear {
  width: 100%;
  margin-top: 8px;
  border: 0;
  background: none;
  color: #6a7086;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.merch-status {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #1c7c48;
}

.merch-status.is-error {
  color: #d11124;
}

/* ---------------------------- the designer ------------------------------ */

.design-editor h4 {
  margin: 14px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6a7086;
}

.design-photo-status {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-size: 12.5px;
  color: #6a7086;
}

.design-modifiers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

/* A colour treatment and an image treatment, split the way the game's bar
   splits them: one row each, with a divider in between. */
.design-modifier-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.design-modifier-group + .design-modifier-group {
  padding-left: 13px;
  border-left: 1px solid #dfe3f5;
}

.design-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid #dfe3f5;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #444a6d;
  cursor: pointer;
}

.design-chip:hover {
  border-color: rgba(0, 119, 181, 0.45);
}

.design-chip.is-active {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #fff;
}

.design-fields {
  display: grid;
  gap: 9px;
}

.merch-field input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid #dfe3f5;
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #333;
}

.merch-field input[type='text']:focus {
  outline: none;
  border-color: #0a66c2;
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.15);
}

.merch-field input::placeholder {
  color: #9aa2b1;
}

.design-brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

.design-brand {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dfe3f5;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.design-brand input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: #0a66c2;
}

.design-brand__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.design-brand__text strong {
  font-size: 14px;
}

.design-brand__text em {
  font-style: normal;
  font-size: 12.5px;
  color: #6a7086;
}

.design-brand:has(input:checked) {
  border-color: #0a66c2;
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.12);
}

.design-back {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #444a6d;
}

.design-profile {
  padding: 12px;
  border: 1px solid #dfe3f5;
  border-radius: 12px;
  background: #fbfcff;
}

.design-profile label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.design-profile input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: #0a66c2;
}

.design-profile__price {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: #0a66c2;
}

.design-profile__rule {
  margin: 4px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6a7086;
}

.design-back label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.design-back input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: none;
  accent-color: #0a66c2;
}

.merch-side {
  display: grid;
  gap: 16px;
}

.design-preview {
  background: #fff;
  border: 1px solid #dfe3f5;
  border-radius: 14px;
  padding: 14px;
}

.design-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.design-preview__head h3 {
  margin: 0;
  font-size: 16px;
}

.design-preview__switch {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #f3f5f9;
}

.design-preview__switch button {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #5e6773;
  cursor: pointer;
}

.design-preview__switch button.is-active {
  background: #fff;
  color: #0a66c2;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12);
}

/* The card is shown small on purpose: it is a thumbnail of what will be
   printed, not a second page to scroll. */
.design-preview img {
  display: block;
  width: 100%;
  max-width: 280px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: #f3f2ef;
}

.design-preview__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #6a7086;
}

@media (max-width: 900px) {
  .merch-foot {
    grid-template-columns: minmax(0, 1fr);
  }

  /* One column: the preview and the cart are part of the page again, so they
     must stop following the scroll. */
  .merch-side {
    position: static;
  }

  .merch-cart {
    position: static;
  }
}

@media (max-width: 560px) {
  .store-page {
    padding: 24px 16px 64px;
  }

  .store-head h1 {
    font-size: 28px;
  }

  .merch-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

/* Payments, shipping and the policies, in one block of small print instead of
   three loose paragraphs at the foot of the page. */
.store-fineprint {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e9ecf6;
}

.store-fineprint p {
  margin: 0 0 4px;
  color: #6a7086;
  font-size: 12px;
  line-height: 1.45;
}

.store-fineprint p:last-child {
  margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
  .merch-add {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Store refresh: one visual language for the three store pages.

   The store used to be a list of lines and four unbranded cards. Everything
   below gives each product a face: an icon in the product's own colour, a
   real card, a price that reads as a price, and a row of plain promises at the
   foot. Cards are links on the store landing (they lead to the page that
   sells) and stay buttons on the digital page, so no buying hook moves.
   --------------------------------------------------------------------------- */

.store-page {
  --store-ink: #101322;
  --store-muted: #5a6175;
  --store-line: #e6e9f2;
  --store-radius: 18px;
  --store-shadow: 0 1px 2px rgba(16, 19, 34, 0.05), 0 10px 28px rgba(16, 19, 34, 0.06);
  --store-shadow-hover: 0 16px 38px rgba(16, 19, 34, 0.13);
  --store-blue: #0077b5;
  --store-red: #cf0a2c;
  --store-violet: #7b1fa2;
  --store-green: #188038;
}

/* The band at the top of each page: the product's two colours, softened. */
.store-hero {
  position: relative;
  overflow: hidden;
  margin: 6px 0 12px;
  padding: 32px 28px 30px;
  border: 1px solid var(--store-line);
  border-radius: 22px;
  /* A plain white surface, not a gradient wash: the colour belongs in one
     deliberate place (the rule across the top) rather than smeared over the
     whole box, which is what made the hero look dusty. */
  background: #fff;
  box-shadow: var(--store-shadow);
}

/* The game's own two colours, as a single rule across the top of the hero. */
.store-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #0a66c2, #7b1fa2 50%, #cf0a2c);
}

.store-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 34px);
  letter-spacing: -0.02em;
}

.store-hero .store-lead {
  /* A centred column with the text ranged left: the block sits in the middle of
     the hero, but the lines start at the same edge, so a paragraph of prose is
     read as prose rather than as three centred lines. */
  margin: 0 auto;
  max-width: 68ch;
  text-align: left;
}

.store-hero__chips {
  display: flex;
  /* With the lead set as a centred column, a chips row pinned to the left edge
     reads as belonging to nothing. Centred, the hero has one axis. */
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.store-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--store-line);
  border-radius: 999px;
  /* White on white with a hairline: four of them then fit on one line at
     desktop width, instead of three and a straggler. */
  background: #fff;
  color: #3c4664;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.store-chip svg {
  color: var(--store-blue);
}

.store-chip svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

/* Product cards ----------------------------------------------------------- */

.product-grid {
  display: grid;
  /* Four across on a desktop, and the row holds even when a card is the only
     one left: the four digital extras and the four printed items share one
     row each, instead of a straggler card on a line of its own. */
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 14px;
  margin: 18px 0 6px;
  padding: 0;
  list-style: none;
}

.product-grid > li {
  display: flex;
}

.product-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid #e8ebf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--store-shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.product-card:hover,
.product-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(0, 119, 181, 0.35);
  box-shadow: var(--store-shadow-hover);
}

.product-card--featured {
  padding: 22px 22px 20px;
  border-color: rgba(10, 102, 194, 0.28);
  box-shadow: 0 16px 36px rgba(16, 19, 34, 0.1);
}

/* The same two-colour rule as the hero, so the best offer is recognisable as
   the same family rather than an accident of a thicker border. */
.product-card--featured::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #0a66c2, #cf0a2c);
}

/* The best offer reads as the biggest card even before the badge is read:
   more room inside, a larger icon and a larger price. */
.product-card--featured h3 {
  font-size: 19px;
}

.product-card--featured .product-card__price {
  font-size: 26px;
}

.product-card--featured .product-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
}

.product-card--featured .product-icon svg {
  width: 28px;
  height: 28px;
}

/* Two units of the row where a single pack has one, so the bundle is plainly
   the widest card. It is a fifth unit, not a second row: 2 + 1 + 1 + 1 still
   fits on one line, and no card is left on a line of its own. */
@media (min-width: 960px) {
  .product-grid--featured {
    grid-template-columns: 2fr repeat(3, 1fr);
  }
}

/* Narrower than that, two units would squeeze the packs: the bundle takes the
   whole row instead, and the three packs flow two-up beneath it. */
@media (min-width: 620px) and (max-width: 959px) {
  .product-grid--featured {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid--featured > li:first-child {
    grid-column: 1 / -1;
  }
}

.product-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  /* A tinted tile rather than a flat wash: these cards have no photograph, so
     the icon is the whole visual and needs to carry some weight. */
  background: linear-gradient(150deg, rgba(0, 119, 181, 0.18), rgba(0, 119, 181, 0.05));
  color: var(--store-blue);
  flex: 0 0 auto;
}

.product-icon svg {
  width: 27px;
  height: 27px;
}

.product-card[data-product="adfree"] .product-icon {
  background: linear-gradient(150deg, rgba(207, 10, 44, 0.18), rgba(207, 10, 44, 0.05));
  color: var(--store-red);
}

.product-card[data-product="mods"] .product-icon {
  background: linear-gradient(150deg, rgba(123, 31, 162, 0.18), rgba(123, 31, 162, 0.05));
  color: var(--store-violet);
}

.product-card[data-product="bundle"] .product-icon {
  background: linear-gradient(150deg, rgba(0, 119, 181, 0.2), rgba(207, 10, 44, 0.14));
  color: #0a66c2;
}

.product-card h3 {
  margin: 0;
  font-size: 17.5px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.product-card__note {
  margin: 0;
  color: var(--store-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.product-card__price {
  margin: auto 0 0;
  padding-top: 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--store-ink);
}

.product-card__price small {
  font-size: 12px;
  font-weight: 600;
  color: var(--store-muted);
}

/* The "from" of a printed item, and its photo, on the landing page. */
.product-card__art {
  aspect-ratio: 4 / 3;
}

.product-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0a66c2, #cf0a2c);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The promises, under the grid: a card like the ones above it, because they are
   part of the offer and not small print. */
.store-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
  margin: 34px 0 6px;
  padding: 18px 20px;
  border: 1px solid #e8ebf4;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--store-shadow);
}

.store-trust__item {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--store-ink);
}

.store-trust__item svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  box-sizing: content-box;
  border-radius: 50%;
  background: rgba(24, 128, 56, 0.1);
  flex: 0 0 auto;
  color: var(--store-green);
}

/* Icons and ticks on the digital cards ------------------------------------ */

.store-page .premium-card__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(0, 119, 181, 0.1);
  color: var(--store-blue);
}

/* Following a link straight to a card — the in-game ad toast sends visitors to
   one, and the store home does too — has to clear the sticky header bar, which
   is 57px tall and would otherwise sit over the title that was just asked for. */
.store-page .premium-card[id],
.store-page .store-section[id] {
  scroll-margin-top: 76px;
}

.store-page .premium-card__icon svg {
  width: 22px;
  height: 22px;
}

.store-page .premium-card[data-product="adfree"] .premium-card__icon {
  background: rgba(207, 10, 44, 0.1);
  color: var(--store-red);
}

.store-page .premium-card[data-product="mods"] .premium-card__icon {
  background: rgba(123, 31, 162, 0.1);
  color: var(--store-violet);
}

.store-page .premium-card[data-product="bundle"] .premium-card__icon {
  background: linear-gradient(135deg, rgba(0, 119, 181, 0.18), rgba(207, 10, 44, 0.16));
  color: #0a66c2;
}

/* Feature lists read as ticks rather than bullets: the same tick as the
   "owned" line, so the card says "included" in one glance. */
.store-page .premium-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.store-page .premium-card li {
  position: relative;
  margin: 0 0 6px;
  padding-left: 24px;
}

.store-page .premium-card li:last-child {
  margin-bottom: 0;
}

.store-page .premium-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 13px;
  height: 13px;
  background-color: var(--store-green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6 9.6 17.6 19.5 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.6 9.6 17.6 19.5 6.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Merch cards: the artwork gets a tinted plate and the price its own line. */
.merch-card {
  box-shadow: var(--store-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.merch-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 119, 181, 0.3);
  box-shadow: var(--store-shadow-hover);
}

.merch-art {
  background: linear-gradient(160deg, #f2f6ff, #eaf1fb);
}

.merch-price {
  font-weight: 700;
  color: var(--store-ink);
}

.merch-price__from {
  font-size: 12px;
  font-weight: 600;
  color: var(--store-muted);
}

@media (max-width: 620px) {
  .store-hero {
    padding: 20px 16px;
  }

  .product-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-card {
    padding: 16px;
  }

  .store-section {
    margin-top: 34px;
  }

  .store-section h2 {
    font-size: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-card,
  .merch-card {
    transition: none;
  }

  .product-card:hover,
  .product-card:focus-visible,
  .merch-card:hover {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   The print designer: steps, the photo picker, and the mockup.

   The card is drawn by design.js; this is the walk-through around it, so the
   buyer sees one question at a time and the same preview all the way down.
   --------------------------------------------------------------------------- */

.design-wizard__lead {
  margin: 0 0 1rem;
  color: var(--store-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

.design-wizard__count {
  margin: 0 0 8px;
  color: var(--store-muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.design-wizard__rail {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.design-wizard__dot {
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef1f7;
  color: var(--store-muted);
  font-size: 11.5px;
}

.design-wizard__dot.is-done {
  background: #e2e8f5;
  color: #3b4252;
}

.design-wizard__dot.is-current {
  background: var(--store-blue);
  color: #fff;
  font-weight: 700;
}

.design-step h4 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.design-step__lead {
  margin: 0 0 1rem;
  color: var(--store-muted);
  font-size: 13px;
  line-height: 1.55;
}

/* The photo step: an upload, or the game's own pictures. */
.design-upload {
  display: block;
  padding: 16px;
  border: 2px dashed #cfd3e6;
  border-radius: 14px;
  background: #fafbff;
  cursor: pointer;
}

.design-upload strong {
  display: block;
  color: var(--store-ink);
  font-size: 14px;
}

.design-upload em {
  display: block;
  margin-top: 4px;
  color: var(--store-muted);
  font-size: 12.5px;
  font-style: normal;
  line-height: 1.5;
}

.design-upload input {
  margin-top: 10px;
  max-width: 100%;
}

.design-or {
  margin: 14px 0;
  color: #8b90a3;
  font-size: 12px;
  text-align: center;
}

.design-picker {
  padding: 14px;
  border: 1px solid var(--store-line);
  border-radius: 14px;
  background: #fff;
}

.design-search {
  display: block;
  color: #3b4252;
  font-size: 12.5px;
  font-weight: 600;
}

.design-search input {
  box-sizing: border-box;
  width: 100%;
  margin-top: 6px;
  padding: 0.55rem 0.7rem;
  border: 1px solid #cfd3e6;
  border-radius: 10px;
  font: inherit;
}

.design-picker__row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
}

.design-arrow {
  flex: none;
  width: 42px;
  height: 42px;
  border: 1px solid #cfd3e6;
  border-radius: 999px;
  background: #fff;
  color: var(--store-blue);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.design-arrow:hover {
  border-color: var(--store-blue);
  background: #f2f7fd;
}

.design-arrow:focus-visible {
  outline: 2px solid var(--store-blue);
  outline-offset: 2px;
}

.design-picker__card {
  flex: 1;
  margin: 0;
  text-align: center;
}

.design-picker__card img {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: 10px;
  background: #dddddd;
  box-shadow: 0 4px 12px rgba(16, 19, 34, 0.14);
}

.design-picker__who {
  margin: 8px 0 0;
  color: var(--store-muted);
  font-size: 12.5px;
}

.design-picker__use {
  width: 100%;
  padding: 0.6rem 1rem;
  border: 0;
  border-radius: 10px;
  background: var(--dark-gray);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.design-picker__use[disabled] {
  opacity: 0.5;
  cursor: default;
}

.design-picker__use.is-used {
  background: #1c7c48;
}

.design-photo-status.is-picked {
  color: #1c7c48;
  font-weight: 600;
}

/* The walk-through's own buttons. */
.design-wizard__nav {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.design-back,
.design-next {
  flex: 1 1 0;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.design-back {
  border: 1px solid #cfd3e6;
  background: #fff;
  color: var(--dark-gray);
}

.design-back[disabled] {
  opacity: 0.45;
  cursor: default;
}

.design-next {
  border: 0;
  background: var(--store-blue);
  color: #fff;
}

.design-next:hover {
  background: #0069a3;
}

.design-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0 0 16px;
  font-size: 13.5px;
}

.design-summary dt {
  color: var(--store-muted);
}

.design-summary dd {
  margin: 0;
  color: var(--store-ink);
  font-weight: 600;
}

.design-interpol-note.is-free,
#design-interpol-note.is-free {
  color: #1c7c48;
  font-weight: 600;
}

/* The mockup: the photo of the blank item, with the printed card drawn on its
   print area — the same per-item numbers the shop cards use, so what the editor
   shows is what the product page shows, and what gets printed. */
.design-mockup {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: linear-gradient(160deg, #f2f6ff, #eaf1fb);
}

.design-mockup__item {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
}

/* Only the product photo fills the frame; the print is positioned on top of it
   by the rules below, so this must not be a bare `img`. */
.design-mockup__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.design-mockup__print {
  position: absolute;
  left: var(--print-left);
  top: var(--print-top);
  width: var(--print-width);
  height: auto;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(16, 19, 34, 0.24);
}

.design-preview__item {
  margin: 10px 0 0;
  color: var(--store-muted);
  font-size: 12.5px;
  text-align: center;
}

@media (max-width: 620px) {
  .design-picker__card img {
    width: 104px;
    height: 104px;
  }

  .design-arrow {
    width: 38px;
    height: 38px;
  }
}