/* The store: Community favourites, the catalog, the product popup, reviews and checkout, as
   shop.js renders them. Loaded after site.css (tokens, header, buttons, fields, dialogs) and
   landing.css. shop.js is older than this design; this file styles everything it renders. */

/* ---- Store sections ------------------------------------------------------------------------ */
.store { position: relative; z-index: 2; padding-bottom: clamp(60px, 8vw, 116px); border-top: 1px solid var(--line); background: var(--bg); }
/* The top padding clears the fixed header, so a link to a section lands with its heading in view. */
.catalog-section { max-width: 1480px; margin: 0 auto; padding: clamp(96px, 9vw, 128px) var(--gutter) 0; }
/* Tall enough that a link to the catalog always lands on its heading, however few products a category has. */
#catalog { min-height: 100vh; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.section-heading h2 {
  margin: 14px 0 0;
  font: 800 clamp(30px, 4.2vw, 60px)/.96 var(--sans);
  font-stretch: 125%;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.rating-summary { color: #ffd166; font: 500 13px/1.5 var(--mono); letter-spacing: .08em; text-align: right; text-transform: uppercase; }

/* Community favourites: the same twelve products and actions, as a ranked list instead of a wall of boxes. */
.top-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
.top-product {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  grid-template-areas: "rank name stars action" "rank meta stars action";
  align-items: center;
  column-gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  transition: border-color .25s var(--ease);
}
.top-product-actionable { cursor: pointer; }
.top-product:hover,
.top-product:focus-visible { border-top-color: #ffd166; outline: none; }
.top-rank { grid-area: rank; color: var(--ink-faint); font: 500 13px/1 var(--mono); letter-spacing: .08em; }
.top-product h3 { grid-area: name; margin: 0; overflow: hidden; font: 600 17px/1.35 var(--sans); text-overflow: ellipsis; white-space: nowrap; transition: color .25s var(--ease); }
.top-product:hover h3,
.top-product:focus-visible h3 { color: #ffd166; }
.top-product small { grid-area: meta; color: var(--ink-faint); font: 500 12px/1.5 var(--mono); letter-spacing: .06em; }
.top-product .stars { grid-area: stars; font-size: 13px; }
.top-product .top-product-buy {
  grid-area: action;
  min-width: 164px;
  min-height: 36px;
  padding: 0 14px;
  border-color: var(--line-strong);
  background: none;
  color: var(--ink);
  font-size: 14px;
  pointer-events: none;
}
.top-product:hover .top-product-buy,
.top-product:focus-visible .top-product-buy { border-color: var(--ink); background: var(--ink); color: #06080b; }

/* Catalog controls. */
.category-tabs,
.payment-tabs { display: flex; flex-wrap: wrap; gap: 0 28px; margin-bottom: 30px; border-bottom: 1px solid var(--line); }
.tab {
  margin-bottom: -1px;
  padding: 14px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--ink-dim);
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.tab:hover,
.tab:focus-visible { color: var(--ink); outline: none; }
.tab { position: relative; }
.tab::after { content: ""; position: absolute; right: 0; bottom: -2px; left: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.tab.active { color: var(--ink); }
.tab.active::after { transform: none; animation: tab-underline .45s var(--ease); }
@keyframes tab-underline { from { transform: scaleX(0); } }
.mobile-category-picker { display: none; color: var(--ink-dim); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.mobile-category-picker select {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 14px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: #0a0d12;
  color: var(--ink);
  color-scheme: dark;
  font: 500 16px var(--sans);
  letter-spacing: 0;
  text-transform: none;
}

/* Changing family replays the catalog: landing.js marks the grid while the new cards rise in one
   after another, and the chosen tab draws its underline. Searching does not replay it.
   Arriving at a section does the same for the whole section (landing.js marks it "is-arriving"):
   after a click on a link to it, from the journey or the header, and the first time it is scrolled
   up into view. Its heading comes forward out of the depth, as a page's does (page-arrive,
   site.css), its controls rise, and its rows or cards follow one after another. The cards use
   one rule for both marks, so a family chosen from the journey does not start them twice. */
.catalog-grid.is-switching .product-card,
.catalog-section.is-arriving .product-card { animation: card-in .55s var(--ease) both; animation-delay: calc(var(--n, 0) * 40ms); }
.catalog-section.is-arriving .top-product { animation: card-in .55s var(--ease) both; animation-delay: calc(var(--n, 0) * 40ms + 120ms); }
.catalog-section.is-arriving .section-heading { transform-origin: 50% 100%; animation: page-arrive .7s var(--ease) backwards; }
.catalog-section.is-arriving .category-tabs,
.catalog-section.is-arriving .mobile-category-picker { animation: card-in .6s var(--ease) backwards .12s; }
@keyframes card-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } }
@media (prefers-reduced-motion: reduce) {
  .catalog-grid.is-switching .product-card,
  .catalog-section.is-arriving .product-card,
  .catalog-section.is-arriving .top-product,
  .catalog-section.is-arriving .section-heading,
  .catalog-section.is-arriving .category-tabs,
  .catalog-section.is-arriving .mobile-category-picker,
  .tab.active::after { animation: none; }
}

/* ---- The board behind the store ---------------------------------------------------------------
   With the 3D scene on, the board goes on behind the store sections as it does behind the inner
   pages (landing.js keeps it running there, at a backdrop's pace). It shows through behind the
   headings, under a shade that deepens towards where the lists are read, and the cards are dark
   glass. The shade is fixed to the window, so it is the same wherever the page has been scrolled
   to. Without the scene the sections keep their plain ground. */
.scene-on .store {
  border-top-color: transparent;
  background:
    linear-gradient(90deg, rgba(6, 8, 11, .55) 0%, rgba(6, 8, 11, .3) 45%, rgba(6, 8, 11, .1) 78%) fixed,
    linear-gradient(180deg, rgba(6, 8, 11, .45) 0, rgba(6, 8, 11, .76) 300px, rgba(6, 8, 11, .92) 640px) fixed;
}
.scene-on .product-card { background: rgba(10, 13, 18, .82); }
.scene-on .product-card:hover { background: rgba(14, 19, 26, .9); }
/* Past the journey the header is glass over the board, as on the inner pages. */
.scene-on:not(.over-journey) .top { background: rgba(6, 8, 11, .68); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Product cards. */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 236px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a0d12;
}
.product-card { cursor: pointer; transition: border-color .25s var(--ease), background-color .25s var(--ease); }
.product-card:hover { border-color: var(--line-strong); background: #0e131a; }
.product-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 6px;
  background: #131a23;
  color: var(--ink-dim);
  font: 800 18px var(--sans);
}
.product-icon img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.product-card:hover .product-icon img { transform: scale(1.07); }
.status {
  position: absolute;
  top: 22px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.online { color: #4be0a4; }
.status.updated { color: #67d8ff; }
.status.testing { color: #ffd166; }
.status.updating { color: #ffad42; }
.status.offline { color: #ff5d73; }
.product-card h3 { margin: 20px 0 6px; font: 600 18px/1.3 var(--sans); }
.product-card p { margin: 0; color: var(--ink-faint); font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
/* Every card is the same size, whatever its title, reviews or description: the rows of the grid share
   one height, the name always takes two lines and the family one, and the review line and the row of
   headings keep their place when a product has neither yet. */
.catalog-grid { grid-auto-rows: 1fr; }
.product-card h3 { display: -webkit-box; min-height: 2.6em; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.product-card p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The review score: small stars, the average and how many vouches it comes from. */
.card-rating { display: flex; align-items: center; gap: 8px; height: 18px; margin-top: 12px; color: var(--ink-dim); font: 500 12.5px/1 var(--sans); white-space: nowrap; }
.card-rating .stars { color: #ffd166; font-size: 12px; letter-spacing: 1px; }
.card-rating strong { color: var(--ink); font-weight: 600; }
.card-rating small { color: var(--ink-faint); font-size: 12px; }
/* The headings of the product's description, at most three on one line, then how many more. */
/* A heading that does not fit wraps onto a second line, which is cut off; shop.js then hides it and counts it in "+N". */
.card-pills { display: flex; flex-wrap: wrap; gap: 6px; height: 24px; margin: 12px 0 0; padding: 0; overflow: hidden; list-style: none; }
.card-pills li { flex: 0 0 auto; max-width: 13em; overflow: hidden; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-dim); font: 500 11.5px/22px var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.card-pills .card-pills-more { flex: none; color: var(--ink-faint); }
.product-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 20px; }
.price-from small { display: block; color: var(--ink-faint); font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.price-from strong { display: block; margin-top: 7px; font: 700 22px/1 var(--sans); font-stretch: 112%; font-variant-numeric: tabular-nums; }
.product-card .button { min-height: 38px; padding: 0 14px; border-color: var(--line-strong); background: none; color: var(--ink); font-size: 14px; }
.product-card:hover .button-primary { border-color: var(--ink); background: var(--ink); color: #06080b; }
.unavailable { opacity: .6; }

/* Payment data includes intentionally unbroken IDs, keys, addresses, and TXIDs. */
#checkoutDialog { max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); overflow-x: hidden; overflow-y: auto; }
#checkoutDialogBody,
#checkoutDialog .modal-content,
#checkoutDialog .modal-top,
#checkoutDialog .modal-top > div,
#checkoutDialog .summary,
#checkoutDialog .payment-tabs,
#checkoutDialog #paymentBody,
#checkoutDialog .notice,
#checkoutDialog .field { min-width: 0; max-width: 100%; }
#checkoutDialog .modal-content { overflow-x: hidden; }
#checkoutDialog .modal-top .eyebrow { display: block; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
#checkoutDialog .summary > *,
#checkoutDialog .notice,
#checkoutDialog .field,
#checkoutDialog .key-box,
#checkoutDialog .address { min-width: 0; overflow-wrap: anywhere; }
#checkoutDialog input,
#checkoutDialog select,
#checkoutDialog button,
#checkoutDialog a { max-width: 100%; }

.media-lightbox { width: min(1180px, calc(100% - 28px)); max-width: 1180px; }
.media-lightbox-content { padding: 18px; }
.media-lightbox-content .modal-top { align-items: center; margin-bottom: 12px; }
.media-lightbox-content .modal-top h2 { margin: 0; font-size: clamp(16px, 2vw, 22px); }
.media-lightbox-image,
.media-lightbox-video { display: block; width: 100%; max-height: 82vh; border: 1px solid var(--line-strong); border-radius: 6px; background: #05070a; object-fit: contain; }
.media-lightbox-frame { display: block; width: 100%; max-height: 82vh; aspect-ratio: 16 / 9; border: 1px solid var(--line-strong); border-radius: 6px; background: #05070a; }
/* A product's screenshots in the full-size viewer: arrows at its sides (and the arrow keys, and a swipe
   on touch screens) step through them; the count sits beside the title. */
.media-lightbox-content .modal-top h2 { flex: 1; min-width: 0; }
.lightbox-count { flex: none; color: var(--ink-dim); font: 500 12px/1 var(--mono); letter-spacing: .1em; font-variant-numeric: tabular-nums; }
.lightbox-stage { position: relative; touch-action: pan-y; }
.lightbox-stage .media-lightbox-image { user-select: none; -webkit-user-drag: none; }
.lightbox-control { position: absolute; top: 50%; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(6, 8, 11, .72); color: #fff; cursor: pointer; transform: translateY(-50%); transition: background-color .15s ease, border-color .15s ease; }
.lightbox-control:hover,
.lightbox-control:focus-visible { border-color: var(--accent); background: rgba(14, 32, 56, .92); outline: none; }
.lightbox-control svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox-previous { left: 14px; }
.lightbox-next { right: 14px; }
@media (max-width: 620px) {
  .lightbox-control { width: 40px; height: 40px; }
  .lightbox-previous { left: 8px; }
  .lightbox-next { right: 8px; }
}
.review-modal { width: min(980px, calc(100% - 28px)); max-width: 980px; overflow-x: hidden; }
.review-modal .modal-content { max-height: min(88vh, 920px); overflow-x: hidden; overflow-y: auto; }

/* Formatted product text (the safe Discord-style renderer in chat-attachments.js). */
.product-description { display: block; color: #c5d0dc; font-size: 17px; overflow-wrap: anywhere; }
.product-description .discord-text-line,
.product-description .discord-heading,
.product-description .discord-subtext,
.product-description .discord-list-item,
.product-description .discord-quote { display: block; }
.product-description .discord-empty-line { height: .55em; }
.product-description .discord-heading { margin: .55em 0 .25em; color: var(--ink); font-weight: 700; line-height: 1.2; }
.product-description .discord-heading-1 { font-size: 1.45em; }
.product-description .discord-heading-2 { font-size: 1.25em; }
.product-description .discord-heading-3 { font-size: 1.1em; }
.product-description .discord-list-item { display: grid; grid-template-columns: 1.35em minmax(0, 1fr); padding-left: calc(.35em + var(--discord-list-depth, 0) * 1.2em); }
.product-description .discord-quote { margin: .25em 0; padding: .3em .7em; border-left: 4px solid #b5bac1; background: #3f4147; color: #f2f3f5; }
.product-description .discord-quote + .discord-quote { margin-top: -.25em; }
.product-description .discord-subtext { color: var(--ink-dim); font-size: .86em; }
.product-description .discord-code-block { position: relative; display: block; max-width: 100%; padding: 12px; overflow: auto; border: 1px solid var(--line-strong); border-radius: 4px; background: #05070a; font-family: var(--mono); white-space: pre-wrap; }
.product-description .discord-code-language { display: block; margin: -4px 0 8px; color: var(--ink-faint); font-size: 11px; text-transform: uppercase; }
.product-description .discord-spoiler { padding: 0 .18em; border: 0; border-radius: 3px; background: #17191c; color: transparent; font: inherit; cursor: pointer; }
.product-description .discord-spoiler.revealed { background: #2b2d31; color: inherit; }

/* The Launcher's built-in store view: straight to the catalog, with no journey and no scene. */
body.launcher-mode .journey,
body.launcher-mode .world,
body.launcher-mode .social-proof,
body.launcher-mode .foot,
body.launcher-mode .top-quick,
body.launcher-mode .top-avatar,
body.launcher-mode .site-header nav,
body.launcher-mode .mobile-nav-toggle { display: none; }
body.launcher-mode .site-header { position: sticky; background: var(--bg); }
body.launcher-mode .site-menu-panel { position: static; display: contents; }
body.launcher-mode #accountActions { flex-direction: row; align-items: center; gap: 8px; margin-left: auto; }
body.launcher-mode #accountActions .button { justify-content: center; min-height: 38px; }
body.launcher-mode .account-chip { padding: 0 14px 0 8px; border: 1px solid var(--line-strong); background: #0a0d12; color: var(--ink); }
body.launcher-mode .store { border-top: 0; }
body.launcher-mode .catalog-section { padding-top: 28px; scroll-margin-top: var(--header); }

@media (max-width: 900px) {
  .top-products { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .section-heading { flex-direction: column; align-items: stretch; }
  .rating-summary { text-align: left; }
  .search { width: 100%; }
  .category-tabs { display: none; }
  .mobile-category-picker { display: block; margin-bottom: 22px; }
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
  /* The product name takes the full row so long names stay readable. */
  .top-product { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "rank name name" "rank meta action" "rank stars action"; row-gap: 2px; }
  .top-product h3 { margin-bottom: 4px; white-space: normal; }
  .top-product .top-product-buy { min-width: 0; }
}
@media (max-width: 620px) {
  #checkoutDialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); margin-inline: auto; }
  #checkoutDialog .modal-content { padding: 18px 14px; }
  #checkoutDialog .modal-top { gap: 10px; }
  #checkoutDialog .modal-top h2 { font-size: clamp(20px, 6vw, 26px); overflow-wrap: anywhere; }
  #checkoutDialog .summary { grid-template-columns: minmax(0, 1fr) auto; padding: 13px; }
  #checkoutDialog .summary strong:last-child { font-size: 16px; }
  #checkoutDialog .payment-tabs .tab { flex: 1 1 auto; }
}

/* ---- Reviews and the product sheet -----------------------------------------------------------
   Carried over from the stylesheet this design replaced (shop-extra.css) with this design’s
   typefaces, surfaces and corners. The markup and behaviour are shop.js. */
/* Verified reviews, shared by the product sheet and the family review dialog. */
.review-list { display: grid; min-width: 0; }
.review-list > .notice { margin: 0; }
.review-modal .review-list { margin-top: 22px; }
.review-summary { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; }
.review-score { display: grid; gap: 4px; }
.review-score strong { font: 700 30px/1 var(--sans); font-stretch: 118%; }
.review-score .stars, .review-head .stars { font-size: 14px; white-space: nowrap; }
.review-summary-text { display: grid; gap: 2px; min-width: 0; }
.review-range { color: var(--muted); }
.review { min-width: 0; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.review-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; min-width: 0; }
.review p { margin: 6px 0 0; color: #c5d0dc; white-space: pre-wrap; overflow-wrap: anywhere; }
.review small { color: var(--muted); }
.review-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 14px; }
.review-media { display: block; width: fit-content; max-width: min(100%, 340px); margin-top: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .24); border-radius: 4px; background: #05070a; }
.review-media img, .review-media video { display: block; max-width: 100%; max-height: 210px; }
.review-media-image { padding: 0; color: inherit; cursor: zoom-in; transition: border-color .15s ease; }
.review-media-image:hover, .review-media-image:focus-visible { border-color: var(--blue); outline: none; }
.review-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .1); }
.review-pagination .button { min-width: 38px; padding: 6px 12px; font-size: 14px; }
.review-page-gap { color: var(--muted); padding: 0 2px; }

/* Product sheet: media and details scroll beside a fixed purchase panel. */
#productDialog.product-sheet {
  --sheet-surface: #0a0d12;
  --sheet-panel: #0d1117;
  --sheet-field: #07090c;
  --sheet-line: rgba(255, 255, 255, .1);
  --sheet-muted: #a3aebb;
  --sheet-dim: #67737f;
  --sheet-buy-width: 372px;
  --sheet-viewport: 100vh;
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  min-height: min(600px, calc(var(--sheet-viewport) - 32px));
  max-height: min(900px, calc(var(--sheet-viewport) - 32px));
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--sheet-surface);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .7);
}
@supports (height: 100dvh) {
  #productDialog.product-sheet { --sheet-viewport: 100dvh; }
}
/* Scoped to [open] so a closed dialog keeps the browser's display: none. */
#productDialog.product-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: product-sheet-in .18s ease-out;
}
@keyframes product-sheet-in {
  from { opacity: 0; transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
  #productDialog.product-sheet[open] { animation: none; }
}
.product-sheet #productDialogBody,
.product-sheet .sheet {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}
.product-sheet svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-sheet svg.filled { fill: currentColor; stroke: none; }

.product-sheet .sheet-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 20px 18px 24px;
  border-bottom: 1px solid var(--sheet-line);
}
.product-sheet .sheet-art {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 60px;
  height: 60px;
  overflow: hidden;
  border: 1px solid var(--sheet-line);
  border-radius: 6px;
  background: #131a23;
  color: #a3aebb;
  font: 800 18px var(--sans); font-stretch: 118%;
}
.product-sheet .sheet-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-sheet .sheet-heading { flex: 1 1 auto; min-width: 0; }
.product-sheet .sheet-eyebrow {
  display: block;
  color: var(--sheet-muted);
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.product-sheet .sheet-heading h2 {
  margin: 3px 0 7px;
  font: 700 clamp(19px, 2.3vw, 25px)/1.2 var(--sans); font-stretch: 118%;
  overflow-wrap: anywhere;
}
.product-sheet .sheet-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  font-size: 15px;
  line-height: 1.3;
}
.product-sheet .sheet-status {
  --status: var(--sheet-muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--status);
  font-weight: 700;
}
.product-sheet .sheet-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status);
}
.product-sheet .sheet-status.online { --status: var(--green); }
.product-sheet .sheet-status.updated { --status: #67d8ff; }
.product-sheet .sheet-status.testing { --status: #ffd166; }
.product-sheet .sheet-status.updating { --status: var(--orange); }
.product-sheet .sheet-status.offline { --status: var(--red); }
.product-sheet .sheet-rating {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sheet-muted);
  font: 600 15px var(--sans);
  cursor: pointer;
}
.product-sheet .sheet-rating:hover,
.product-sheet .sheet-rating:focus-visible { color: #fff; text-decoration: underline; outline: none; }
.product-sheet .sheet-rating .stars { letter-spacing: 0; }

/* One row sized by the taller column, so a long order form can extend the sheet up to its maximum. */
.product-sheet .sheet-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr) var(--sheet-buy-width);
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.product-sheet .sheet-main {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.product-sheet .sheet-label {
  margin: 0 0 12px;
  color: var(--sheet-dim);
  font: 700 12px/1.3 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.product-sheet .sheet-section { padding: 22px 24px; border-top: 1px solid var(--sheet-line); }
.product-sheet .sheet-section:first-child,
.product-sheet .media-viewer + .sheet-section { border-top: 0; }
.product-sheet .product-description { color: #c5d0dc; font-size: 17px; line-height: 1.55; }
.product-sheet .sheet-section > .product-description { max-width: 70ch; }
/* Overview: prose, plus one card per "Heading:" block of the description with its lines as chips. */
.product-sheet .sheet-overview { display: grid; gap: 16px; min-width: 0; }
.product-sheet .feature-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}
.product-sheet .feature-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--sheet-line);
  border-radius: 6px;
  background: var(--sheet-panel);
}
.product-sheet .feature-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
.product-sheet .feature-group header { display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; }
.product-sheet .feature-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(47, 157, 255, .3);
  border-radius: 8px;
  background: rgba(47, 157, 255, .1);
  color: var(--cyan);
}
.product-sheet .feature-group h4 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font: 700 17px/1.25 var(--sans);
  overflow-wrap: anywhere;
}
.product-sheet .feature-count { color: var(--sheet-dim); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.product-sheet .feature-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* The radius is half a one-line chip, so short items read as pills and wrapped ones as rounded boxes. */
.product-sheet .feature-chips li {
  max-width: 100%;
  padding: 5px 12px;
  border: 1px solid rgba(47, 157, 255, .2);
  border-radius: 16px;
  background: rgba(47, 157, 255, .07);
  color: #d5dde6;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.product-sheet .feature-group.collapsed .feature-extra { display: none; }
.product-sheet .feature-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px;
  border: 1px solid rgba(47, 157, 255, .45);
  border-radius: 999px;
  background: rgba(47, 157, 255, .12);
  color: #7fd0ff;
  font: 700 15px var(--sans);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.product-sheet .feature-toggle::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.product-sheet .feature-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.product-sheet .feature-toggle:hover,
.product-sheet .feature-toggle:focus-visible { border-color: var(--blue); color: #fff; outline: none; }
.product-sheet .sheet-requirements { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.product-sheet .sheet-requirements li { position: relative; padding-left: 22px; font-size: 16px; }
.product-sheet .sheet-requirements li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

.product-sheet .media-viewer { padding: 20px 24px 0; }
.product-sheet .media-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--sheet-line);
  border-radius: 6px;
  background: #05070a;
}
.product-sheet .media-stage-slot,
.product-sheet .media-stage-player { position: absolute; inset: 0; }
.product-sheet .media-stage-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.product-sheet .media-stage-image:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
/* A blurred copy of the screenshot fills the letterbox around any aspect ratio. */
.product-sheet .media-stage-backdrop {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(40px) brightness(.5) saturate(1.2);
}
.product-sheet .media-stage-picture {
  position: absolute;
  inset: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  object-fit: contain;
}
.product-sheet .media-stage-player iframe,
.product-sheet .media-stage-player video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}
.product-sheet .media-control {
  position: absolute;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(6, 12, 22, .72);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.product-sheet .media-control:hover,
.product-sheet .media-control:focus-visible { border-color: var(--blue); background: rgba(20, 44, 78, .94); outline: none; }
.product-sheet .media-previous { top: 50%; left: 12px; transform: translateY(-50%); }
.product-sheet .media-next { top: 50%; right: 12px; transform: translateY(-50%); }
.product-sheet .media-expand { top: 12px; right: 12px; }
.product-sheet .media-count {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(6, 12, 22, .72);
  color: #dbe7f5;
  font: 700 13px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* Hosted players draw their own title bar and fullscreen control in these corners. */
.product-sheet .media-stage.is-video .media-expand,
.product-sheet .media-stage.is-video .media-count { display: none; }
.product-sheet .media-thumbs {
  position: relative;
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-sheet .media-thumbs::-webkit-scrollbar { display: none; }
.product-sheet .media-thumb {
  flex: 0 0 auto;
  width: 96px;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--sheet-line);
  border-radius: 4px;
  background: #05070a;
  color: var(--sheet-muted);
  cursor: pointer;
  opacity: .55;
  transition: opacity .15s ease, border-color .15s ease;
}
.product-sheet .media-thumb:hover,
.product-sheet .media-thumb:focus-visible { border-color: rgba(255, 255, 255, .45); opacity: 1; outline: none; }
.product-sheet .media-thumb.active { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); opacity: 1; }
.product-sheet .media-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-sheet .media-thumb-video {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
  font: 700 12px var(--sans);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-sheet .sheet-buy {
  display: flex;
  flex-direction: column;
  grid-row: 1;
  grid-column: 2;
  min-height: 0;
  border-left: 1px solid var(--sheet-line);
  background: var(--sheet-panel);
}
/* Does not grow, so the total follows the options and only pins to the bottom when they overflow. */
.product-sheet .buy-scroll {
  flex: 0 1 auto;
  min-height: 0;
  padding: 22px 20px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.product-sheet .buy-footer { flex: 0 0 auto; padding: 16px 20px 18px; border-top: 1px solid var(--sheet-line); }
.product-sheet .plan-list { display: grid; gap: 8px; margin-bottom: 22px; }
.product-sheet .plan-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 4px;
  background: var(--sheet-field);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.product-sheet .plan-option:hover { border-color: rgba(255, 255, 255, .45); }
.product-sheet .plan-option.selected { border-color: var(--blue); background: rgba(47, 157, 255, .1); }
.product-sheet .plan-option input {
  display: grid;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
.product-sheet .plan-option input::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
  transform: scale(0);
  transition: transform .12s ease;
}
.product-sheet .plan-option input:checked { border-color: var(--blue); }
.product-sheet .plan-option input:checked::before { transform: scale(1); }
.product-sheet .plan-option input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.product-sheet .plan-name { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
.product-sheet .plan-price { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.product-sheet .notice { margin: 0 0 18px; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.product-sheet .notice .product-description { margin-top: 6px; color: inherit; font-size: inherit; line-height: inherit; }
.product-sheet .notice .button { width: 100%; margin-top: 12px; }
.product-sheet .field { margin: 0 0 14px; color: var(--sheet-muted); font-size: 15px; font-weight: 600; }
.product-sheet .field input,
.product-sheet .field select {
  border-color: rgba(255, 255, 255, .24);
  background: var(--sheet-field);
  color-scheme: dark;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.product-sheet .field input:focus,
.product-sheet .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 157, 255, .18); outline: none; }
.product-sheet .checkbox-field { margin: 0 0 18px; font-size: 15px; line-height: 1.4; cursor: pointer; }
.product-sheet .buy-link {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sheet-muted);
  font: 600 15px var(--sans);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .34);
  text-underline-offset: 3px;
  cursor: pointer;
}
.product-sheet .buy-link:hover,
.product-sheet .buy-link:focus-visible { color: #fff; outline: none; }
.product-sheet .buy-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.product-sheet .buy-total span { min-width: 0; color: var(--sheet-muted); font-size: 15px; font-weight: 600; line-height: 1.3; }
.product-sheet .buy-total small { display: block; color: var(--text); font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.product-sheet .buy-total strong { font: 700 26px/1 var(--sans); font-stretch: 118%; white-space: nowrap; }
.product-sheet #checkoutButton {
  width: 100%;
  min-height: 50px;
  border-color: var(--ink);
  background: var(--ink);
  color: #06080b;
  box-shadow: none;
  font-size: 17px;
}
.product-sheet #checkoutButton:hover:not(:disabled) { border-color: var(--accent); background: var(--accent); }
.product-sheet #checkoutButton:disabled { border-color: var(--line); background: #12161c; color: var(--sheet-muted); opacity: 1; }
.product-sheet .buy-note { margin: 10px 0 0; color: var(--sheet-dim); font-size: 14px; text-align: center; }

@media (max-width: 900px) {
  #productDialog.product-sheet {
    width: calc(100vw - 16px);
    min-height: 0;
    max-height: calc(var(--sheet-viewport) - 16px);
    border-radius: 14px;
  }
  .product-sheet .sheet-header { gap: 12px; padding: 14px 12px 14px 16px; }
  .product-sheet .sheet-art { width: 48px; height: 48px; border-radius: 4px; }
  /* One scrolling column. The main wrapper dissolves so the purchase panel can sit between the media and the details. */
  .product-sheet .sheet-body { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .product-sheet .sheet-main { display: contents; }
  .product-sheet .media-viewer { flex: 0 0 auto; order: 1; padding: 14px 16px 16px; border-bottom: 1px solid var(--sheet-line); }
  .product-sheet .sheet-buy { flex: 0 0 auto; order: 2; min-height: auto; border-bottom: 1px solid var(--sheet-line); border-left: 0; }
  .product-sheet .sheet-section { flex: 0 0 auto; order: 3; }
  .product-sheet .buy-scroll { padding: 18px 16px 2px; overflow: visible; }
  .product-sheet .buy-footer { padding: 14px 16px 18px; }
  .product-sheet .sheet-section { padding: 20px 16px; }
}
@media (max-width: 620px) {
  .product-sheet .media-thumb { width: 76px; }
}

/* Labels in the carried-over sheet use the monospace face, like every other label here. */
.product-sheet .sheet-eyebrow,
.product-sheet .sheet-label { font-family: var(--mono); font-weight: 500; }