/*
  PriceArk — Deep Vault Foundation
  Slice 0, final cross-viewport fidelity pass.

  Every value below is copied VERBATIM from the approved design source
  (docs/priceark/design-reference/*.dc.html), not approximated. Where the
  approved design legitimately uses different values for the same concept
  on different surfaces (e.g. filter chips are 12px on the Phase 02
  catalogue and 11px on the Phase 03 offer list), both are represented as
  contextual variants rather than averaged into one token.

  Sources read directly, line-referenced in
  docs/priceark/implementation/SLICE_0_DEEP_VAULT_FOUNDATION.md:
    Brand Book  §04 components, §05 mobile, §07 desktop shell
    Phase 02    §10 catalogue — mobile list AND desktop 1360 composition
    Phase 03    §19 buy box (configs A and B), §20 offer comparison
                (mobile cards AND desktop table)

  Visual only — no business logic. Class names describe visual role, never
  commercial meaning; see PRODUCT_CONTRACT.md for the rules themselves.

  FONT AXIS NOTE: the approved source loads JetBrains Mono at 400;500;700
  only. Several of its components declare font-weight:600 on mono text,
  which therefore font-matches UP to the 700 face. Loading a real 600 face
  would render those lighter than approved, so the 600 mono axis is
  deliberately NOT requested.

  SHELL-2: the typefaces now come from static/css/fonts.css, served by
  PriceArk itself. This file used to carry a second, live
  `@import url(fonts.googleapis.com/...)` — the shell was fetching Google
  Fonts twice, so removing only the <link> in base.html would have left the
  remote dependency fully active. Both are gone; the faces are local and
  the 400/500/700 mono contract is now enforced by a test rather than by a
  comment. See static/fonts/README.md.
*/

/* ==========================================================================
   TOKENS — the full graphite/text scale as it actually appears in source
   ========================================================================== */

:root {
  /* Surfaces */
  --pa-bg:            oklch(0.13  0.010 250); /* page ground */
  --pa-s-footer:      oklch(0.16  0.012 250); /* desktop table footer bar */
  --pa-s-panel:       oklch(0.175 0.013 250); /* card / panel / disclosure */
  --pa-s-row:         oklch(0.185 0.013 250); /* list row, table header bar */
  --pa-s-field:       oklch(0.19  0.014 250); /* desktop search field */
  --pa-s-field-m:     oklch(0.20  0.014 250); /* mobile search field */
  --pa-s-raised:      oklch(0.21  0.014 250); /* best offer card */
  --pa-s-cover:       oklch(0.22  0.014 250); /* cover art placeholder */
  --pa-s-skel-cover:  oklch(0.24  0.014 250); /* skeleton cover */
  --pa-s-tag:         oklch(0.26  0.015 250); /* platform tag fill */
  --pa-s-tile:        oklch(0.28  0.014 250); /* store logo tile, standard */
  --pa-s-tile-best:   oklch(0.30  0.014 250); /* store logo tile, best row */

  /* Skeleton bars */
  --pa-skel-a:        oklch(0.25  0.014 250);
  --pa-skel-b:        oklch(0.23  0.014 250);

  /* Borders */
  --pa-b-row:         oklch(0.22  0.014 250); /* row separator inside a table */
  --pa-b-hair:        oklch(0.24  0.014 250); /* section hairline, header rule */
  --pa-b-head:        oklch(0.26  0.014 250); /* under a table header bar */
  --pa-b-panel:       oklch(0.28  0.014 250); /* table/panel outer border */
  --pa-b-card:        oklch(0.30  0.014 250); /* card border */
  --pa-b-chip:        oklch(0.32  0.015 250); /* chip / expander outline */
  --pa-b-dash:        oklch(0.34  0.015 250); /* dashed / muted outline */
  --pa-b-cta:         oklch(0.38  0.015 250); /* secondary CTA outline */
  --pa-b-field:       oklch(0.40  0.015 250); /* active input border */
  --pa-b-tier:        oklch(0.42  0.015 250); /* marketplace badge outline */

  /* Text */
  --pa-t-hi:          oklch(0.96  0.006 250); /* inherited near-white */
  --pa-t-query:       oklch(0.94  0.006 250); /* search query text */
  --pa-t-cta:         oklch(0.90  0.008 250); /* secondary CTA label */
  --pa-t-90:          oklch(0.90  0.008 250);
  --pa-t-88:          oklch(0.88  0.008 250); /* expander label, back arrow */
  --pa-t-82:          oklch(0.82  0.012 250); /* chip label, sidebar option */
  --pa-t-80:          oklch(0.80  0.012 250); /* marketplace badge text */
  --pa-t-76:          oklch(0.76  0.012 250); /* fact value, nav link */
  --pa-t-74:          oklch(0.74  0.012 250); /* body copy, table cell */
  --pa-t-72:          oklch(0.72  0.012 250); /* rule body, rank text */
  --pa-t-70:          oklch(0.70  0.012 250); /* buy-box freshness */
  --pa-t-66:          oklch(0.66  0.012 250); /* meta line 1, count, stock */
  --pa-t-62:          oklch(0.62  0.014 250); /* header count, deck */
  --pa-t-60:          oklch(0.60  0.014 250); /* meta line 2, fact label */
  --pa-t-58:          oklch(0.58  0.014 250); /* clear glyph, col header */
  --pa-t-56:          oklch(0.56  0.014 250); /* desktop col header */
  --pa-t-55:          oklch(0.55  0.014 250); /* struck price, em-dash */
  --pa-t-50:          oklch(0.50  0.014 250); /* disabled option */
  --pa-t-invert:      oklch(0.16  0.012 250); /* text ON a filled chip/CTA */
  --pa-fill-invert:   oklch(0.90  0.008 250); /* near-white filled chip */

  /* Brass — logo, primary commercial CTA, best-price marker. Nothing else. */
  --pa-brass:         oklch(0.78  0.13 78);
  --pa-brass-light:   oklch(0.86  0.09 78);
  --pa-brass-b-buy:   oklch(0.48  0.08 78);  /* buy box border */
  --pa-brass-b-card:  oklch(0.44  0.07 78);  /* best offer card border */
  --pa-brass-hair:    oklch(0.34  0.030 78); /* warm divider under brass */
  --pa-brass-glow:    0 8px 26px oklch(0.78 0.13 78 / 0.22);
  --pa-brass-wash:    linear-gradient(150deg, oklch(0.26 0.045 78 / 0.5), oklch(0.185 0.013 250) 62%);
  --pa-brass-rowwash: linear-gradient(90deg, oklch(0.26 0.045 78 / 0.26), transparent 62%);

  /* Cyan — metadata, provenance, freshness, audit, links, Official tier */
  --pa-cyan:          oklch(0.78  0.13 200); /* fill / icon */
  --pa-cyan-text:     oklch(0.82  0.10 200); /* link, sort, authorised text */
  --pa-cyan-hover:    oklch(0.86  0.10 200);
  --pa-cyan-border:   oklch(0.52  0.09 200); /* authorised outline, chip */

  /* Green / red — price arithmetic only */
  --pa-green:         oklch(0.78  0.14 155);
  --pa-green-text:    oklch(0.82  0.11 155);
  --pa-red:           oklch(0.70  0.15 30);
  --pa-red-text:      oklch(0.82  0.11 30);
  --pa-red-border:    oklch(0.42  0.09 30);

  --pa-shadow-lg:     0 30px 70px oklch(0 0 0 / 0.45);

  --pa-font:          'Archivo', system-ui, sans-serif;
  --pa-mono:          'JetBrains Mono', ui-monospace, monospace;

  --pa-gutter: 16px;
}

/* ==========================================================================
   BASE
   ========================================================================== */

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

.pa-root {
  background: var(--pa-bg);
  color: var(--pa-t-hi);
  font-family: var(--pa-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.pa-root p { margin: 0; }
.pa-root h1, .pa-root h2, .pa-root h3 { margin: 0; }
.pa-root a { color: var(--pa-cyan-text); text-decoration: none; }
.pa-root a:hover { color: var(--pa-cyan-hover); }
.pa-root ::selection { background: var(--pa-brass); color: var(--pa-t-invert); }
.pa-root :focus-visible { outline: 2px solid var(--pa-cyan); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   TYPOGRAPHY — fixed sizes, not viewport-responsive. The approved mobile
   artboards are 390px compositions; a viewport media query would wrongly
   fire inside a 390px frame shown on a desktop screen.
   ========================================================================== */

.pa-h2         { font: 700 44px/1 var(--pa-font); letter-spacing: -0.03em; }
.pa-h3         { font: 700 26px/1 var(--pa-font); letter-spacing: -0.025em; }
.pa-h3-panel   { font: 700 19px/1 var(--pa-font); letter-spacing: -0.02em; }
.pa-panel-title{ font: 700 15px/1 var(--pa-font); }

.pa-title-row  { font: 600 15px/1.2 var(--pa-font); }   /* catalogue row title */
.pa-title-store{ font: 600 15px/1.1 var(--pa-font); }   /* offer/buy-box store */
.pa-title-cell { font: 600 14px/1.2 var(--pa-font); }   /* desktop table title */

.pa-body       { font: 400 15px/1.6 var(--pa-font); color: var(--pa-t-74); }
.pa-body-sm    { font: 400 14px/1.6 var(--pa-font); color: var(--pa-t-74); }
.pa-body-xs    { font: 400 13px/1.55 var(--pa-font); color: var(--pa-t-66); }

.pa-eyebrow    { font: 500 10px/1 var(--pa-mono); letter-spacing: 0.16em; color: var(--pa-t-60); }
.pa-eyebrow-brass { font: 500 10px/1 var(--pa-mono); letter-spacing: 0.16em; color: var(--pa-brass); }
.pa-section-idx{ font: 500 12px/1 var(--pa-mono); letter-spacing: 0.2em; color: var(--pa-brass); }

/* Prices — tabular mono */
.pa-price-hero { font: 700 40px/1 var(--pa-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.pa-price-strip{ font: 700 20px/1 var(--pa-mono); font-variant-numeric: tabular-nums; }
.pa-price-card { font: 700 19px/1 var(--pa-mono); font-variant-numeric: tabular-nums; }
.pa-price-cell { font: 700 16px/1 var(--pa-mono); font-variant-numeric: tabular-nums; }
.pa-price-was  { font: 400 10px/1 var(--pa-mono); color: var(--pa-t-55); text-decoration: line-through; }
.pa-price-none { color: var(--pa-t-55); }

/* Meta / audit — no letter-spacing: wide tracking belongs to chrome labels */
.pa-meta       { font: 400 10px/1.3 var(--pa-mono); color: var(--pa-t-66); } /* offer card meta line 1 */
.pa-meta-2     { font: 400 10px/1.3 var(--pa-mono); color: var(--pa-t-60); } /* offer card meta line 2 */
.pa-meta-cat   { font: 400 10px/1.3 var(--pa-mono); color: var(--pa-t-62); } /* catalogue row meta */
.pa-meta-cell  { font: 400 10px/1   var(--pa-mono); color: var(--pa-t-60); } /* desktop table cell meta */
.pa-meta-flat  { font: 400 10px/1   var(--pa-mono); color: var(--pa-t-66); } /* stock/availability */
.pa-count      { font: 400 11px/1   var(--pa-mono); color: var(--pa-t-66); } /* "128 RESULTS · 0.04 S" */
.pa-count-62   { font: 400 11px/1   var(--pa-mono); color: var(--pa-t-62); } /* "9 VALID · 14 STORES" */
.pa-sort       { font: 500 11px/1   var(--pa-mono); color: var(--pa-cyan-text); }
.pa-fresh-hero { font: 400 9px/1    var(--pa-mono); color: var(--pa-t-66); }
.pa-fresh      { font: 400 9px/1    var(--pa-mono); color: var(--pa-t-60); }
.pa-delta-down { font: 600 10px/1   var(--pa-mono); color: var(--pa-green-text); }
.pa-delta-up   { font: 400 10px/1   var(--pa-mono); color: var(--pa-t-60); }

/* ==========================================================================
   BUTTONS / CTAs — geometry comes from the surface, not a global min-height.
   The approved CTAs are 40px tall; a forced 48px target would silently
   diverge from every artboard.
   ========================================================================== */

/* Approved CTA geometry is 40px tall in both variants, reached differently:
   the filled hero has NO border and 13px padding; the outlined variants have
   a 1px border and 12px padding. Both must resolve to 40px. */
.pa-cta {
  display: block; width: 100%;
  border: none;
  border-radius: 9px;
  padding: 13px;
  text-align: center;
  font: 700 14px/1 var(--pa-font);
  cursor: pointer;
}
.pa-cta-primary { background: var(--pa-brass); color: var(--pa-t-invert); }
.pa-cta-primary:hover { background: var(--pa-brass-light); }

.pa-cta-secondary {
  background: transparent;
  color: var(--pa-t-cta);
  border: 1px solid var(--pa-b-cta);
  padding: 12px;
  font-weight: 600;
}
.pa-cta-muted {
  background: transparent;
  color: var(--pa-t-72);
  border: 1px solid var(--pa-b-dash);
  padding: 12px;
  font-weight: 600;
}
.pa-expander {
  display: block; width: 100%;
  background: transparent;
  border: 1px solid var(--pa-b-chip);
  border-radius: 11px;
  padding: 13px;
  text-align: center;
  font: 600 14px/1 var(--pa-font);
  color: var(--pa-t-88);
  cursor: pointer;
}

/* Buy box CTA — the one place the brass glow belongs */
.pa-buybox__cta {
  display: block; width: 100%;
  margin-top: 14px;
  background: var(--pa-brass);
  color: var(--pa-t-invert);
  border: none;
  border-radius: 11px;
  padding: 16px;
  text-align: center;
  font: 700 16px/1 var(--pa-font);
  box-shadow: var(--pa-brass-glow);
  cursor: pointer;
}
.pa-buybox__cta:hover { background: var(--pa-brass-light); }

/* Desktop table action buttons */
/* Desktop table action cells — filled variant has no border (11px padding),
   outlined variants carry a 1px border with 10px padding; both = 35px. */
.pa-cell-btn {
  display: block; width: 100%;
  border-radius: 8px;
  padding: 11px;
  text-align: center;
  font: 700 13px/1 var(--pa-font);
  background: var(--pa-brass);
  color: var(--pa-t-invert);
  border: none;
  cursor: pointer;
}
.pa-cell-btn--outline {
  background: transparent;
  color: var(--pa-t-90);
  border: 1px solid var(--pa-b-cta);
  padding: 10px;
  font-weight: 600;
}
.pa-cell-btn--muted {
  background: transparent;
  color: var(--pa-t-72);
  border: 1px solid var(--pa-b-dash);
  padding: 10px;
  font-weight: 600;
}

/* ==========================================================================
   SEARCH — mobile (Phase 02 §10) and desktop (Brand Book §07 / Phase 02)
   ========================================================================== */

.pa-searchrow { display: flex; align-items: center; gap: 12px; }
.pa-back { flex: none; font: 400 18px/1 var(--pa-mono); color: var(--pa-t-88); }

.pa-search {
  flex: 1;
  /* Âncora do dropdown de sugestões, que é position:absolute. Sem isto o
     painel colava-se ao viewport em vez de ao campo. */
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--pa-s-field-m);
  border: 1px solid var(--pa-b-field);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 0;
}
/* Um controlo, um contorno.
   Isto foi corrigido em duas etapas, porque eram dois problemas com o mesmo
   sintoma.

   Primeiro (R2A.1) acendiam dois ELEMENTOS: o contentor mudava a borda para
   cyan e, por dentro, o <input> ganhava o anel de 2px da regra global
   `.pa-root :focus-visible`. O `outline: none` que o .pa-search__text já
   declarava não chegava — a regra global tem mais especificidade (0,2,0
   contra 0,1,0) — daí a linha 'pa-search .pa-search__text:focus-visible'
   logo abaixo, que continua a ser necessária.

   Depois (R2A.2) sobrava um segundo traço no MESMO elemento: esta regra
   pintava a borda de cyan e, por cima, um outline de 2px afastado 2px.
   Medido no browser com o campo focado: border 1px solid oklch(0.78 0.13
   200) E outline solid 2px da mesma cor com outline-offset 2px. Duas linhas
   cyan separadas por 2px de fundo — um anel dentro de outro, bem visível a
   390px.

   A correcção mantém um único mecanismo e um único traço: a borda do
   próprio controlo acende, e o `inset` de 1px encosta-se-lhe por dentro
   para o traço ter os 2px que um indicador de foco precisa de ter. Sem
   intervalo, não se lê como dois contornos; sem blur, não é glow; sem mexer
   em border-width, não há salto de layout. A regra global de acessibilidade
   fica intacta para todos os outros componentes — o contentor é um <form>,
   não é focável, e nunca chega a corresponder a :focus-visible. */
.pa-search:focus-within {
  border-color: var(--pa-cyan);
  box-shadow: inset 0 0 0 1px var(--pa-cyan);
}
.pa-search .pa-search__text:focus-visible { outline: none; }
.pa-search__icon  { flex: none; font: 400 15px/1 var(--pa-mono); color: var(--pa-cyan); }
/* padding:0 + matching line-height keeps a real <input> the same height as
   the approved design's static mock (12+15+12+2 = 41px). Left to the UA
   default the field renders ~3px taller. */
.pa-search__text  { flex: 1; min-width: 0; font: 500 15px/1 var(--pa-font); color: var(--pa-t-query);
                    background: transparent; border: none; outline: none;
                    padding: 0; margin: 0; height: 15px; }
.pa-search__text::placeholder { color: var(--pa-t-60); }
.pa-search__clear { flex: none; font: 400 14px/1 var(--pa-mono); color: var(--pa-t-58); }
/* Keyboard-shortcut affordance. Present in the approved Brand Book §04
   search component; added in Slice 1A because no Slice 0 specimen used it.
   Values verbatim from that component — not a new invention. */
.pa-search__hint {
  flex: none;
  font: 500 10px/1 var(--pa-mono);
  /* SHELL-4 accessibility baseline amendment (2026-10-06): --pa-t-55 on
     this field surface measured 3.81:1, below AA for normal text. Raised
     to the lowest existing token that clears 4.5 on the SAME background
     (measured in-browser: 0.58 -> 4.32, 0.60 -> 4.69). The token itself is
     unchanged, so no other surface moves. */
  color: var(--pa-t-60);
  border: 1px solid var(--pa-b-dash);
  border-radius: 4px;
  padding: 5px 6px;
}

.pa-search--desktop {
  background: var(--pa-s-field);
  border-radius: 10px;
  padding: 10px 14px;
  gap: 11px;
  max-width: 560px;
}
.pa-search--desktop .pa-search__text { font-size: 14px; }

/* ==========================================================================
   CHIPS — contextual scales. Catalogue (Phase 02 §10) runs 12px; the offer
   list (Phase 03 §20) runs 11px. Both are approved; neither is "the" value.
   ========================================================================== */

.pa-chiprow { display: flex; gap: 7px; overflow: hidden; }

.pa-chip           { flex: none; border-radius: 999px; border: 1px solid transparent; cursor: pointer; }
.pa-chip--filled   { font: 600 12px/1 var(--pa-font); color: var(--pa-t-invert);
                     background: var(--pa-fill-invert); padding: 10px 13px; }
.pa-chip--applied  { font: 500 12px/1 var(--pa-font); color: var(--pa-cyan-text);
                     background: transparent; border-color: var(--pa-cyan-border); padding: 9px 13px; }
.pa-chip--plain    { font: 500 12px/1 var(--pa-font); color: var(--pa-t-82);
                     background: transparent; border-color: var(--pa-b-chip); padding: 9px 13px; }

/* Offer-list scale */
.pa-chip--sm-filled { font: 600 11px/1 var(--pa-font); color: var(--pa-t-invert);
                      background: var(--pa-fill-invert); padding: 9px 12px; }
.pa-chip--sm-plain  { font: 500 11px/1 var(--pa-font); color: var(--pa-t-82);
                      background: transparent; border-color: var(--pa-b-chip); padding: 8px 12px; }

/* Desktop sort chips (Phase 02 §10 desktop) — square-ish, 7px radius */
.pa-sortchip        { flex: none; border-radius: 7px; border: 1px solid transparent; cursor: pointer;
                      font: 500 11px/1 var(--pa-font); color: var(--pa-t-82);
                      border-color: var(--pa-b-chip); background: transparent; padding: 7px 11px; }
.pa-sortchip--active{ color: var(--pa-t-invert); background: var(--pa-fill-invert);
                      border-color: transparent; padding: 8px 11px; }

/* Sugestões — SearchSuggest. Só Jogos, sem preço, sem Loja, sem CTA. */
.pa-ac {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 50;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--pa-s-panel);
  border: 1px solid var(--pa-b-panel);
  border-radius: 14px;
  box-shadow: var(--pa-shadow-lg);
  max-height: 62vh;
  overflow-y: auto;
}
.pa-ac[hidden] { display: none; }

.pa-ac__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  color: var(--pa-t-82);
}
.pa-ac__item--ativo, .pa-ac__item:hover { background: var(--pa-s-row); color: var(--pa-t-hi); }

/* PUBLIC-MEDIA-1 §O: capa vertical também aqui, 2:3 exacto (34x51). O suggest
   mantém o resto do contrato: só jogos, sem preço e sem loja. A linha continua
   nos 48px mínimos — é a capa que cresce dentro dela, não a linha. */
.pa-ac__img {
  flex: none;
  width: 34px; height: 51px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--pa-s-cover);
}
.pa-ac__nome {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 500;
}
.pa-ac__item--vazio { color: var(--pa-t-58); font-size: 13px; cursor: default; }
.pa-ac__item--todos {
  margin-top: 4px;
  border-top: 1px solid var(--pa-b-hair);
  color: var(--pa-cyan-text);
  font-size: 13px;
}

/* ==========================================================================
   BADGES — trust tier, platform tag, rank
   ========================================================================== */

.pa-trust {
  display: inline-flex; align-items: center; flex: none;
  font: 600 8px/1 var(--pa-mono);
  letter-spacing: 0.1em;
  border-radius: 4px;
  padding: 4px 5px;
}
.pa-trust--official    { color: var(--pa-t-invert); background: var(--pa-cyan); }
.pa-trust--authorised  { color: var(--pa-cyan-text); background: transparent; border: 1px solid var(--pa-cyan-border); }
.pa-trust--marketplace { color: var(--pa-t-80); background: transparent; border: 1px solid var(--pa-b-tier); }

/* Buy-box hero scale — 9px, roomier padding (Phase 03 §19 only) */
.pa-trust--hero                       { font-size: 9px; padding: 5px 6px; }
.pa-trust--hero.pa-trust--marketplace { padding: 4px 6px; }

/* Platform tag — neutral grey fill always, by rule */
.pa-tag {
  display: inline-flex; align-items: center;
  font: 600 9px/1 var(--pa-mono);
  letter-spacing: 0.08em;
  color: oklch(0.86 0.008 250);
  background: var(--pa-s-tag);
  border-radius: 4px;
  padding: 5px 6px;
}

/* Rank / emphasis markers */
.pa-rank        { font: 600 9px/1 var(--pa-mono); letter-spacing: 0.1em; color: var(--pa-t-72); }
.pa-rank--status{ color: var(--pa-t-66); }
.pa-badge-best  { display: inline-flex; align-items: center; font: 700 9px/1 var(--pa-mono);
                  letter-spacing: 0.1em; color: var(--pa-t-invert); background: var(--pa-brass);
                  border-radius: 4px; padding: 5px 6px; }
.pa-badge-official { display: inline-flex; align-items: center; font: 600 8px/1 var(--pa-mono);
                  letter-spacing: 0.1em; color: var(--pa-t-invert); background: var(--pa-cyan);
                  border-radius: 4px; padding: 4px 5px; }
/* Buy box uses a larger, wider-tracked BEST PRICE pill than the table does */
.pa-badge-best--buybox { font-size: 10px; letter-spacing: 0.14em; border-radius: 5px; padding: 6px 8px; }

/* ==========================================================================
   FRESHNESS DOT
   ========================================================================== */

.pa-fresh-group { display: flex; align-items: center; gap: 7px; }
.pa-fresh-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pa-green);
  box-shadow: 0 0 0 3px oklch(0.78 0.14 155 / 0.18);
}
.pa-fresh-dot--stale { background: var(--pa-red); box-shadow: 0 0 0 3px oklch(0.70 0.15 30 / 0.18); }
.pa-fresh-text { font: 400 10px/1 var(--pa-mono); color: var(--pa-t-70); }

/* ==========================================================================
   COVER ART PLACEHOLDER
   Two variants: the design applies a horizontal scanline overlay on
   in-stock covers, and a hatch-only cover (no overlay) on the dimmed row.
   ========================================================================== */

.pa-cover {
  background: var(--pa-s-cover);
  background-image: repeating-linear-gradient(118deg, transparent 0 7px, oklch(0.99 0 0 / 0.05) 7px 8px);
}
.pa-cover--scan { position: relative; overflow: hidden; }
.pa-cover--scan::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to bottom, oklch(0.99 0 0 / 0.05) 0 1px, transparent 1px 3px);
}
/* desktop table thumbnails use a tighter 6px hatch */
.pa-cover--sm {
  background-image: repeating-linear-gradient(118deg, transparent 0 6px, oklch(0.99 0 0 / 0.05) 6px 7px);
}

/* ==========================================================================
   A · MOBILE CATALOGUE ROW (Phase 02 §10)
   ========================================================================== */

.pa-catrow {
  display: flex; gap: 12px;
  background: var(--pa-s-row);
  border: 1px solid var(--pa-b-panel);
  border-radius: 12px;
  padding: 11px;
}
.pa-catrow--dim { opacity: 0.62; }
.pa-catrow--skel { border: none; }
.pa-catrow__cover { width: 56px; height: 76px; border-radius: 7px; flex: none; }
.pa-catrow__body  { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.pa-catrow__tags  { display: flex; gap: 5px; }
.pa-catrow__price { flex: none; text-align: right; display: flex; flex-direction: column;
                    justify-content: space-between; align-items: flex-end; }
/* dimmed row: plain top-aligned wrapper, no column distribution */
.pa-catrow__price--flat { flex: none; text-align: right; display: block; }

/* Skeleton row internals */
.pa-skel-cover { width: 56px; height: 76px; border-radius: 7px; flex: none; background: var(--pa-s-skel-cover); }
.pa-skel-lines { flex: 1; display: grid; gap: 9px; align-content: center; }
.pa-skel-bar-a { height: 12px; width: 62%; border-radius: 3px; background: var(--pa-skel-a); }
.pa-skel-bar-b { height: 9px;  width: 42%; border-radius: 3px; background: var(--pa-skel-b); }
.pa-skel-price { width: 62px; height: 20px; border-radius: 4px; background: var(--pa-skel-a); align-self: center; }

/* ==========================================================================
   B · MOBILE OFFER CARD (Phase 03 §20)
   ========================================================================== */

.pa-offerstack { display: grid; gap: 9px; margin-top: 14px; }

.pa-offercard {
  background: var(--pa-s-row);
  border: 1px solid var(--pa-b-panel);
  border-radius: 13px;
  padding: 13px;
}
.pa-offercard--best {
  background: var(--pa-s-raised);
  border-color: var(--pa-brass-b-card);
  position: relative;
  overflow: hidden;
}
.pa-offercard--best::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pa-brass);
}
.pa-offercard--dim { opacity: 0.6; }

.pa-offercard__top   { display: flex; align-items: center; justify-content: space-between; }
.pa-offercard__main  { margin-top: 10px; display: flex; align-items: center; gap: 11px; }
.pa-offercard--best .pa-offercard__main { margin-top: 12px; }
.pa-offercard__logo  { width: 34px; height: 34px; border-radius: 7px; flex: none; background: var(--pa-s-tile); }
.pa-offercard--best .pa-offercard__logo { background: var(--pa-s-tile-best); }
.pa-offercard__store { flex: 1; min-width: 0; }
.pa-offercard__storeline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pa-offercard__price { flex: none; text-align: right; }
.pa-offercard__cta   { margin-top: 11px; }
.pa-offercard--best .pa-offercard__cta { margin-top: 12px; }

/* ==========================================================================
   C · BUY BOX (Phase 03 §19)
   ========================================================================== */

.pa-buybox {
  border: 1px solid var(--pa-brass-b-buy);
  border-radius: 16px;
  overflow: hidden;
  background: var(--pa-brass-wash);
}
.pa-buybox__body { padding: 18px; }
.pa-buybox__top  { display: flex; align-items: center; justify-content: space-between; }
.pa-buybox__price{ margin-top: 16px; }
.pa-buybox__storerow { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.pa-buybox__logo { width: 34px; height: 34px; border-radius: 7px; flex: none; background: var(--pa-s-tile-best); }

.pa-facts { margin-top: 14px; display: grid; gap: 7px; background: var(--pa-s-panel);
            border-radius: 9px; padding: 12px 13px; }
.pa-facts__row   { display: flex; justify-content: space-between; font: 400 11px/1 var(--pa-mono); color: var(--pa-t-76); }
.pa-facts__label { color: var(--pa-t-60); }

.pa-buybox__disclosure { margin-top: 9px; text-align: center; font: 400 10px/1.4 var(--pa-mono); color: oklch(0.64 0.012 250); }

.pa-buybox__strip {
  border-top: 1px solid var(--pa-brass-hair);
  padding: 14px 18px;
  background: var(--pa-s-panel);
  display: flex; align-items: center; justify-content: space-between;
}
.pa-buybox__strip-label { font: 400 10px/1 var(--pa-mono); letter-spacing: 0.12em; color: var(--pa-t-62); }
.pa-buybox__strip-store { margin-top: 7px; display: flex; align-items: center; gap: 7px;
                          font: 600 14px/1 var(--pa-font); }
.pa-buybox__strip-meta  { margin-top: 6px; font: 400 10px/1 var(--pa-mono); color: var(--pa-t-66); }

/* ==========================================================================
   DESKTOP SHELL (Brand Book §07 / Phase 02 §10 desktop)
   ========================================================================== */

.pa-desktop {
  width: 1360px;
  border: 1px solid var(--pa-b-card);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pa-bg);
  box-shadow: var(--pa-shadow-lg);
}
.pa-appbar {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--pa-b-hair);
}
.pa-logo { display: flex; align-items: center; gap: 10px; }
.pa-logo__word { font: 800 18px/1 var(--pa-font); letter-spacing: -0.04em; }
.pa-appbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pa-locale { font: 600 11px/1 var(--pa-mono); color: var(--pa-t-76);
             border: 1px solid var(--pa-b-chip); border-radius: 999px; padding: 8px 11px; }
.pa-signin { font: 600 13px/1 var(--pa-font); color: var(--pa-t-88); }

/* ==========================================================================
   D · DESKTOP CATALOGUE (Phase 02 §10 desktop 1360)
   ========================================================================== */

.pa-dsplit { display: grid; grid-template-columns: 250px 1fr; gap: 0; }

.pa-sidebar { border-right: 1px solid var(--pa-b-hair); padding: 24px;
              display: grid; gap: 24px; align-content: start; }
.pa-fgroup__ctl { margin-top: 14px; }
.pa-range { height: 5px; border-radius: 3px; background: var(--pa-b-panel); position: relative; }
.pa-range__fill  { position: absolute; left: 0; right: 52%; top: 0; bottom: 0; border-radius: 3px; background: var(--pa-cyan); }
.pa-range__thumb { position: absolute; left: 46%; top: -5px; width: 15px; height: 15px; border-radius: 50%; background: oklch(0.92 0.006 250); }
.pa-range__scale { margin-top: 10px; display: flex; justify-content: space-between;
                   font: 400 11px/1 var(--pa-mono); color: var(--pa-t-62); }

.pa-optlist { display: grid; gap: 9px; font: 400 13px/1 var(--pa-font); color: var(--pa-t-82); }
.pa-opt     { display: flex; align-items: center; gap: 10px; }
.pa-opt--off{ color: var(--pa-t-50); }
.pa-box     { width: 15px; height: 15px; border-radius: 4px; border: 1px solid oklch(0.36 0.015 250); flex: none; }
.pa-box--on { background: var(--pa-fill-invert); border-color: transparent; }
.pa-box--dash { border-style: dashed; border-color: var(--pa-b-chip); }

.pa-results { padding: 22px 32px 32px; }
.pa-results__head { display: flex; align-items: baseline; justify-content: space-between; }
.pa-results__title { display: flex; align-items: baseline; gap: 14px; }
.pa-results__count { font: 400 12px/1 var(--pa-mono); color: var(--pa-t-62); }

.pa-table { margin-top: 18px; border: 1px solid var(--pa-b-panel); border-radius: 12px; overflow: hidden; }
.pa-ctable__head, .pa-ctable__row {
  display: grid; grid-template-columns: 1fr 140px 120px 130px 110px; gap: 14px;
}
.pa-ctable__head {
  padding: 11px 16px;
  background: var(--pa-s-row);
  border-bottom: 1px solid var(--pa-b-head);
  font: 500 10px/1 var(--pa-mono); letter-spacing: 0.12em; color: var(--pa-t-58);
}
.pa-ctable__row { padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--pa-b-row); }
.pa-ctable__row--last { border-bottom: none; }
.pa-ctable__row--dim  { opacity: 0.6; border-bottom: none; }
.pa-ctable__title { display: flex; align-items: center; gap: 12px; }
.pa-ctable__cover { width: 34px; height: 46px; border-radius: 5px; flex: none; }
.pa-ctable__cell  { font: 400 11px/1 var(--pa-mono); color: var(--pa-t-74); }
.pa-ctable__cell--n { font-size: 12px; }

.pa-pagemark { margin-top: 14px; display: flex; align-items: center; gap: 14px; }
.pa-pagemark__rule { flex: 1; height: 1px; background: var(--pa-b-hair); }
.pa-pagemark__label { font: 400 10px/1 var(--pa-mono); letter-spacing: 0.14em; color: oklch(0.52 0.014 250); }

/* ==========================================================================
   E · DESKTOP OFFER TABLE (Phase 03 §20 desktop)
   ========================================================================== */

.pa-otable { border: 1px solid var(--pa-b-panel); border-radius: 12px; overflow: hidden; }
.pa-otable__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px;
  background: var(--pa-s-row);
  border-bottom: 1px solid var(--pa-b-head);
}
.pa-otable__bar-left { display: flex; align-items: baseline; gap: 12px; }
.pa-otable__hint { font: 400 11px/1 var(--pa-mono); color: var(--pa-cyan-text); }

.pa-otable__head, .pa-otable__row {
  display: grid;
  grid-template-columns: 36px minmax(200px, 1.4fr) 132px 112px 88px 104px 100px;
  gap: 10px;
}
.pa-otable__head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--pa-b-hair);
  font: 500 10px/1.3 var(--pa-mono); letter-spacing: 0.1em; color: var(--pa-t-56);
}
.pa-otable__row { padding: 12px 16px; align-items: center; border-bottom: 1px solid var(--pa-b-row); }
.pa-otable__row--best {
  background: var(--pa-brass-rowwash);
  position: relative;
}
.pa-otable__row--best::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--pa-brass);
}
.pa-otable__row--dim { opacity: 0.58; border-bottom: none; }

.pa-otable__rank      { font: 500 12px/1 var(--pa-mono); color: var(--pa-t-62); }
.pa-otable__rank--best{ font-weight: 700; color: var(--pa-brass-light); }
.pa-otable__rank--none{ color: var(--pa-t-55); }
.pa-otable__store { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pa-otable__logo  { width: 28px; height: 28px; border-radius: 6px; flex: none; background: var(--pa-s-tile); }
.pa-otable__logo--best { background: var(--pa-s-tile-best); }
.pa-otable__nameline { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pa-otable__name { font: 600 14px/1 var(--pa-font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-otable__seller { margin-top: 5px; font: 400 10px/1 var(--pa-mono); color: var(--pa-t-62);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-otable__seller--dim { color: var(--pa-t-58); }
.pa-otable__cell  { font: 400 11px/1.3 var(--pa-mono); color: var(--pa-t-74); }
.pa-otable__age   { margin-top: 4px; font: 400 9px/1 var(--pa-mono); color: var(--pa-t-60); }
.pa-otable__oos   { font: 700 16px/1 var(--pa-mono); color: var(--pa-t-55); }
.pa-otable__oos-sub { margin-top: 4px; font: 400 9px/1 var(--pa-mono); color: var(--pa-t-58); }

.pa-otable__foot {
  padding: 12px 16px;
  background: var(--pa-s-footer);
  border-top: 1px solid var(--pa-b-hair);
  display: flex; align-items: center; justify-content: space-between;
}
.pa-otable__foot-left  { font: 400 11px/1.5 var(--pa-mono); color: var(--pa-t-66); }
.pa-otable__foot-right { font: 500 12px/1 var(--pa-font); color: var(--pa-cyan-text); }

/* ==========================================================================
   SHARED PANELS / STATES
   ========================================================================== */

.pa-rulecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.pa-rulecard  { background: var(--pa-s-panel); border: 1px solid var(--pa-b-card);
                border-radius: 14px; padding: 22px 24px; }
.pa-rulecard__title { margin-top: 11px; font: 600 16px/1.35 var(--pa-font); }
.pa-rulecard__body  { margin-top: 8px; font: 400 14px/1.6 var(--pa-font); color: var(--pa-t-72); }

.pa-info { margin-top: 12px; display: flex; gap: 9px; align-items: flex-start;
           background: var(--pa-s-panel); border-radius: 10px; padding: 12px; }
.pa-info__icon { flex: none; font: 400 12px/1.3 var(--pa-mono); color: var(--pa-cyan); }
.pa-info__text { font: 400 11px/1.5 var(--pa-font); color: var(--pa-t-72); }

.pa-empty { background: var(--pa-s-row); border: 1px dashed var(--pa-b-dash); border-radius: 12px;
            padding: 22px; text-align: center; }
.pa-empty__title  { font: 600 16px/1.3 var(--pa-font); }
.pa-empty__detail { margin-top: 8px; font: 400 13px/1.5 var(--pa-font); color: var(--pa-t-74); }

.pa-alert { background: var(--pa-s-row); border: 1px solid var(--pa-red-border); border-radius: 12px; padding: 16px; }
.pa-alert__title  { font: 600 14px/1.3 var(--pa-font); color: var(--pa-red-text); }
.pa-alert__detail { margin-top: 6px; font: 400 13px/1.5 var(--pa-font); color: var(--pa-t-74); }

/* ==========================================================================
   MOBILE BOTTOM NAV (Phase 02 §10 — the approved 4-destination bar)
   ========================================================================== */

.pa-mobilenav {
  position: sticky; bottom: 0;
  background: oklch(0.145 0.011 250);
  border-top: 1px solid var(--pa-b-panel);
  padding: 10px 8px 22px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.pa-mobilenav__item {
  display: grid; justify-items: center; gap: 6px; padding: 6px 0;
  font: 500 9px/1 var(--pa-mono); color: var(--pa-t-62);
}
.pa-mobilenav__item--active { color: var(--pa-brass-light); }
.pa-mobilenav__icon { font: 400 17px/1 var(--pa-mono); }