/* ==========================================================================
   STORE PAGE — /loja/{slug}
   Design source: PriceArk Phase 02.dc.html, section 11 (lines 426-555),
   sha256 df2f98378719ef316d65bf3c13aded03437322c4bc7c5007f7862e7d1bcce7c7.

   This file carries the Store Page's own architecture: the instrumented
   hero band, the chamfered data strip, the two-column main/sidebar
   composition, the commercial list panel and the trust panels. Everything
   that already exists as an approved primitive comes from
   deep-vault-foundation.css instead — .pa-trust--official/--authorised/
   --marketplace, .pa-tag, .pa-empty, .pa-eyebrow, .pa-body. No token is
   redefined here and no foundation rule is overridden.

   Two values are written out rather than taken from a token, because the
   foundation has no token for them and both are copied verbatim from the
   design source: the hero's 2%-opacity instrument grid, and the 118deg
   cover hatch (the same one .pa-cover--sm defines).

   WEIGHT IS A DESIGN CONSTRAINT HERE. /loja/steam renders over twelve
   thousand rows in a single document, so anything per-row is multiplied
   twelve thousand times. Hence: no per-cell data-label attributes, no
   `content: attr()` mobile labels, no second markup block for mobile, and
   the cover placeholder is a pseudo-element on the existing link rather
   than a span of its own. The mobile composition is positional, and costs
   nothing per row.
   ========================================================================== */

/* ── Hero band ───────────────────────────────────────────────────────────
   Phase 02 §11 gives the store its own surface, bounded by a hairline,
   with a very quiet instrument grid behind it. That band is what makes the
   page read as an entity page rather than a list with a title on top. */

.pa-store__hero {
  position: relative;
  overflow: hidden;
  padding: 30px 0 26px;
  border-bottom: 1px solid var(--pa-b-hair);
}
.pa-store__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(oklch(0.99 0 0 / 0.02) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.99 0 0 / 0.02) 1px, transparent 1px);
  background-size: 44px 44px;
}
.pa-store__hero > .pa-wrap { position: relative; }

.pa-store__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font: 400 11px/1 var(--pa-mono);
  letter-spacing: 0.08em;
  color: var(--pa-t-58);
}
.pa-store__crumbs a { color: var(--pa-t-74); text-decoration: none; }
.pa-store__crumbs a:hover { color: var(--pa-t-90); }
.pa-store__crumbs a:focus-visible { outline: 2px solid var(--pa-cyan); outline-offset: 2px; }
/* The separator deliberately has no colour rule: it inherits the crumb
   colour. The pre-SHELL-4 template painted it with the border colour,
   which left it at 1.22:1 — effectively invisible. */

.pa-store__ident {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}

/* PriceArk holds no store logo anywhere, and fetching one from the open web
   would publish a brand asset nobody authorised. The design's tile is a
   plain surface; a monogram is the least that can fill it without
   pretending to be a mark. */
.pa-store__tile {
  flex: none;
  width: 82px;
  height: 82px;
  border-radius: 16px;
  background: var(--pa-s-tile);
  border: 1px solid var(--pa-b-dash);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 32px/1 var(--pa-font);
  letter-spacing: -0.03em;
  color: var(--pa-t-72);
}

.pa-store__id { min-width: 0; flex: 1; }

.pa-store__titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pa-store__name {
  margin: 0;
  font: 700 34px/1 var(--pa-font);
  letter-spacing: -0.032em;
  overflow-wrap: anywhere;
}
.pa-store__desc {
  margin: 12px 0 0;
  max-width: 680px;
  text-wrap: pretty;
}

/* ── Body grid: main + sidebar (Phase 02 §11 uses 1fr / 380px) ───────────
   The DOM order is strip, sidebar, list. On a narrow screen that reads in
   that order with no `order` tricks, which matters: the list is twelve
   thousand rows long, so a sidebar placed after it would be unreachable in
   practice. On desktop the sidebar is simply placed into column two. */

.pa-store__body { padding-top: 26px; padding-bottom: 34px; }

.pa-store__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1000px) {
  .pa-store__grid {
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px 32px;
  }
  .pa-store__strip { grid-column: 1; grid-row: 1; }
  .pa-store__side  { grid-column: 2; grid-row: 1 / span 2; }
  .pa-store__main  { grid-column: 1; grid-row: 2; }
}

/* ── Data strip ──────────────────────────────────────────────────────────
   Phase 02 shows four chamfered panels. Three of those four are sample
   numbers with no source in PriceArk, so only the one real metric is
   rendered — the panel language is the part that is approved, not the
   count of panels. The chamfer clips the top-right corner, which also
   clips the border along that diagonal; that is how the design draws it. */

.pa-store__strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 210px));
  gap: 12px;
}
.pa-store__fact {
  background: var(--pa-s-panel);
  border: 1px solid var(--pa-b-panel);
  padding: 14px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.pa-store__fact-label {
  font: 400 9px/1 var(--pa-mono);
  letter-spacing: 0.14em;
  color: var(--pa-t-60);
}
.pa-store__fact-value {
  margin-top: 9px;
  font: 700 21px/1 var(--pa-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Main commercial panel ───────────────────────────────────────────── */

.pa-store__panel {
  border: 1px solid var(--pa-b-panel);
  border-radius: 12px;
  overflow: hidden;
}
.pa-store__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  background: var(--pa-s-row);
  border-bottom: 1px solid var(--pa-b-head);
}
.pa-store__panel-title { font: 700 15px/1.2 var(--pa-font); }
.pa-store__panel-meta {
  flex: none;
  font: 400 11px/1 var(--pa-mono);
  letter-spacing: 0.06em;
  color: var(--pa-t-62);
}

/* The filter lives inside the panel, immediately above the listing, rather
   than floating between the hero and the table as a full-width field. */
.pa-store__tools {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--pa-b-hair);
}
.pa-store__tools input {
  flex: 1;
  min-width: 0;
  background: var(--pa-s-field);
  border: 1px solid var(--pa-b-chip);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--pa-t-90);
  font: 400 13px/1.2 var(--pa-font);
  -webkit-appearance: none;
  appearance: none;
}
.pa-store__tools input::placeholder { color: var(--pa-t-58); }
.pa-store__tools input:focus-visible {
  outline: 2px solid var(--pa-cyan);
  outline-offset: 1px;
  border-color: transparent;
}
.pa-store__count {
  flex: none;
  margin-left: auto;
  font: 400 11px/1 var(--pa-mono);
  color: var(--pa-t-62);
  font-variant-numeric: tabular-nums;
}
.pa-store__tools-btn {
  flex: none;
  background: var(--pa-s-tag);
  border: 1px solid var(--pa-b-chip);
  border-radius: 8px;
  padding: 9px 13px;
  color: var(--pa-t-90);
  font: 600 12px/1 var(--pa-font);
  cursor: pointer;
}
.pa-store__tools-btn:hover { border-color: var(--pa-b-cta); }
.pa-store__tools-btn:focus-visible,
.pa-store__tools-limpar:focus-visible {
  outline: 2px solid var(--pa-cyan);
  outline-offset: 2px;
}
.pa-store__tools-limpar {
  flex: none;
  color: var(--pa-cyan-text);
  text-decoration: none;
  font: 400 12px/1 var(--pa-font);
}
.pa-store__tools-limpar:hover { color: var(--pa-cyan-hover); }

/* ── Marcador e navegação de blocos ──────────────────────────────────────
   Phase 02 §10 pede um marcador auditável. Vive no rodapé do painel, com a
   navegação ao lado: quem lê sabe sempre onde está dentro do total, e quem
   não tem JavaScript continua a ter links verdadeiros. */

.pa-store__paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 16px;
  background: var(--pa-s-row);
  border-top: 1px solid var(--pa-b-head);
}
.pa-store__marcador {
  font: 500 11px/1 var(--pa-mono);
  letter-spacing: 0.08em;
  color: var(--pa-t-66);
  font-variant-numeric: tabular-nums;
}
.pa-store__paginacao-ctl { display: flex; align-items: center; gap: 10px; }
.pa-store__pag {
  color: var(--pa-cyan-text);
  text-decoration: none;
  font: 600 13px/1 var(--pa-font);
  border: 1px solid var(--pa-cyan-border);
  border-radius: 9px;
  padding: 9px 13px;
}
.pa-store__pag:hover { color: var(--pa-cyan-hover); border-color: var(--pa-cyan); }
.pa-store__pag:focus-visible { outline: 2px solid var(--pa-cyan); outline-offset: 2px; }

/* Estado de carregamento: discreto, sem spinner nem salto de layout. O
   marcador continua legível enquanto o bloco seguinte não chega. */
.pa-store__paginacao--ocupado .pa-store__pag {
  opacity: 0.55;
  pointer-events: none;
}
.pa-store__paginacao--ocupado .pa-store__marcador::after {
  content: " \2026";
  color: var(--pa-t-58);
}

/* ── Listing ─────────────────────────────────────────────────────────────
   No row-index column: Phase 02's store listing has none, and numbering
   twelve thousand offers tells a visitor nothing. */

.pa-store__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.pa-store__table thead th {
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--pa-b-hair);
  font: 500 10px/1 var(--pa-mono);
  letter-spacing: 0.12em;
  color: var(--pa-t-58);
  text-transform: uppercase;
}
.pa-store__table tbody tr { border-bottom: 1px solid var(--pa-b-row); }
.pa-store__table tbody tr:last-child { border-bottom: none; }
.pa-store__table td { padding: 12px 16px; vertical-align: middle; }

.pa-c-plat  { width: 150px; }
.pa-c-price { width: 120px; text-align: right;
              font: 700 16px/1 var(--pa-mono); font-variant-numeric: tabular-nums; }
.pa-c-game  { overflow-wrap: anywhere; }

/* The cover slot is a pseudo-element on the link that is already there, not
   a span per row: at twelve thousand rows an extra element would add about
   a third of a megabyte of HTML for pure decoration. Values are the
   approved .pa-cover / .pa-cover--sm pair, which cannot be applied as a
   class without an element to put it on. */
.pa-c-game a {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--pa-t-90);
  text-decoration: none;
  font: 600 14px/1.25 var(--pa-font);
}
.pa-c-game a::before {
  content: '';
  flex: none;
  width: 30px;
  height: 40px;
  border-radius: 5px;
  background: var(--pa-s-cover);
  background-image: repeating-linear-gradient(118deg, transparent 0 6px,
                                              oklch(0.99 0 0 / 0.05) 6px 7px);
}
.pa-c-game a:hover { color: var(--pa-cyan-text); }
.pa-c-game a:focus-visible { outline: 2px solid var(--pa-cyan); outline-offset: 2px; }

/* ── Sidebar panels ─────────────────────────────────────────────────── */

.pa-store__side {
  display: grid;
  gap: 16px;
  align-content: start;
}
.pa-store__card {
  background: var(--pa-s-panel);
  border: 1px solid var(--pa-b-card);
  border-radius: 12px;
  padding: 20px;
}
.pa-store__cardbody {
  margin-top: 14px;
  display: grid;
  gap: 11px;
  font: 400 14px/1.55 var(--pa-font);
  color: var(--pa-t-74);
}
.pa-store__cardnote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pa-b-head);
  font: 400 13px/1.55 var(--pa-font);
  color: var(--pa-t-66);
}

/* ── Mobile: the same single DOM, recomposed ─────────────────────────────
   Not a second markup block — a screen reader would otherwise read every
   row twice. The column header carries nothing the cells do not, so it is
   dropped rather than repeated as a label per cell. */

@media (max-width: 719px) {
  .pa-store__hero { padding: 20px 0 18px; }
  .pa-store__crumbs { margin-bottom: 14px; }
  .pa-store__ident { gap: 14px; }
  .pa-store__tile { width: 60px; height: 60px; border-radius: 13px; font-size: 24px; }
  .pa-store__name { font-size: 25px; }
  .pa-store__desc { margin-top: 9px; }
  .pa-store__strip { grid-template-columns: minmax(0, 1fr); }

  /* The listing is the commercial content, and on a phone it sits behind
     the hero, the data panel and two explainer cards. The order is
     deliberate — a sidebar placed after twelve thousand rows would never be
     read — so the space is bought back from padding and gaps rather than by
     hiding anything. Same copy, same blocks, tighter rhythm. */
  .pa-store__body { padding-top: 18px; padding-bottom: 26px; }
  .pa-store__grid { gap: 16px; }
  .pa-store__side { gap: 12px; }
  .pa-store__card { padding: 16px; }
  .pa-store__cardbody { margin-top: 11px; gap: 8px; }
  .pa-store__cardnote { margin-top: 12px; padding-top: 11px; }

  .pa-store__tools { flex-wrap: wrap; }
  .pa-store__tools input { flex: 1 1 100%; }

  .pa-store__table,
  .pa-store__table tbody,
  .pa-store__table td { display: block; width: auto; }

  .pa-store__table thead { display: none; }

  /* Title across the top, tag and price side by side under it. A grid, not
     floats: the price anchors right without a clearing element per row. */
  .pa-store__table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 8px;
    padding: 12px 14px;
    width: auto;
  }

  /* Specificity has to beat `.pa-store__table td` (0,1,1), or that rule's
     display:block wins and every cell drops onto its own line. */
  .pa-store__table td.pa-c-game  { grid-column: 1 / -1; padding: 0; }
  .pa-store__table td.pa-c-plat  { padding: 0; justify-self: start; }
  .pa-store__table td.pa-c-price { padding: 0; justify-self: end;
                                   text-align: right; font-size: 16px; }

  .pa-c-game a { font-size: 15px; }
}