/* Quality pass, 18 September 2026. Unlayered and linked last so it wins ties
   with the layered bundles. Four jobs: one header offset instead of two,
   phone landing geometry that keeps the tier chooser readable and the CTA on
   the first screen, a franchise identity on every pack render, and a vending
   control deck that fits its stage. */

/* 1. The fixed header is compensated once. Pages with padded content were
   also carrying the live-packs banner's own 64px margin: a dead band. */
@media (max-width: 1080px) {
  .shell:not(.shell--home) .content > .provider-commerce-banner { margin-top: 0; }
}

/* 2. Franchise identity: a printed tag over the pack header, colour-coded
   per franchise, on the landing hero, showcase, catalogue, rail and detail. */
.pv-franchise-tag {
  position: absolute; left: 50%; top: 6.5%; z-index: 2; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 6px; max-width: 88%;
  padding: 4px 9px 3px; border-radius: 3px;
  background: var(--franchise-ink, #1a1a1a); color: var(--franchise-text, #fff);
  font: 400 12px/1 "Pack Vault Condensed", var(--pf-sans, sans-serif);
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .5); pointer-events: none;
}
.pv-franchise-tag::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--franchise-accent, #fff); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .3);
}
.pv-franchise-tag[data-franchise="pokemon"] { --franchise-accent: #ffcb05; --franchise-ink: #2a3f9e; }
.pv-franchise-tag[data-franchise="onepiece"] { --franchise-accent: #f6c945; --franchise-ink: #b5191f; }
.pv-franchise-tag[data-franchise="riftbound"] { --franchise-accent: #5ce8d6; --franchise-ink: #0f4f5e; }
.pv-franchise-tag[data-franchise="dragonball"] { --franchise-accent: #ffca65; --franchise-ink: #833411; }
.pv-franchise-tag[data-franchise="soccer"] { --franchise-accent: #ffffff; --franchise-ink: #1e7b3b; }
.pv-franchise-tag[data-franchise="baseball"] { --franchise-accent: #e63946; --franchise-ink: #efebe0; --franchise-text: #1b263b; }
.pv-franchise-tag[data-franchise="basketball"] { --franchise-accent: #ffc66d; --franchise-ink: #cf5410; }
.pv-franchise-tag[data-franchise="football"] { --franchise-accent: #ffffff; --franchise-ink: #6a3d1d; }
.shell .pv-showcase-art, .shell .pack-card .pack-art, .shell .pvh-live-art, .shell .pack-detail-art { position: relative; }
.shell .pv-showcase-art { display: block; }
.shell .pv-showcase-art .pv-franchise-tag, .shell .pvh-live-art .pv-franchise-tag, .shell .pack-card .pv-franchise-tag { font-size: 10.5px; padding: 3px 7px 2px; letter-spacing: .14em; }
.shell .pv-showcase-art .pv-franchise-tag::before, .shell .pvh-live-art .pv-franchise-tag::before, .shell .pack-card .pv-franchise-tag::before { width: 6px; height: 6px; }
/* Only the legacy Vault fallback reuses Grail. Authored collection prints
   already have their own Vault object/color and must not be recolored. */
.shell img[data-pack-slug="vault-mystery-pack"][data-pack-art-source="legacy"],
.shell .pv-entry-pack img[data-pack-slug="vault-mystery-pack"][data-pack-art-source="legacy"] { filter: grayscale(1) brightness(.58) contrast(1.45) saturate(.4) drop-shadow(10px 20px 15px #0008); }
.shell .machine-digital-tier img[data-pack-slug="vault-mystery-pack"][data-pack-art-source="legacy"] { filter: grayscale(1) brightness(.6) contrast(1.4); }

/* 3. The complete landing composition lives in landing-product.css. */

/* 4. Vending control deck: no status-readout chrome, tighter type, one row
   for the two side links, and less empty stage above it on phones. */
.shell #machine-console-ui { padding: 12px; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.shell #machine-console-ui > * { grid-column: 1 / -1; }
.shell #machine-console-ui .machine-digital-head { display: none; }
.shell #machine-console-ui .machine-digital-readout { padding: 0 0 4px; }
.shell #machine-console-ui #machine-console-title { font-size: 22px; line-height: 1.1; }
.shell #machine-console-ui #machine-console-series { font-size: 11px; }
.shell #machine-console-ui #machine-console-price { font-size: 20px; }
.shell #machine-console-ui #machine-console-settlement { font-size: 10px; }
.shell #machine-console-ui .machine-franchise { min-height: 48px; padding: 8px 10px; font-size: 12px; }
.shell #machine-console-ui .machine-franchise small { display: none; }
.shell #machine-console-ui .machine-tier-rail { gap: 5px; }
.shell #machine-console-ui .machine-digital-tier { min-height: 44px; padding: 5px 8px; font-size: 12px; gap: 1px; }
.shell #machine-console-ui .machine-digital-tier b { font-size: 12px; }
.shell #machine-console-ui .machine-digital-tier small { font-size: 10px; }
.shell #machine-console-ui .machine-selected-facts { font-size: 12px; }
.shell #machine-console-ui .machine-selected-facts dt { font-size: 10px; }
.shell #machine-console-ui .machine-published-odds { font-size: 13px; }
.shell #machine-console-ui .machine-published-odds summary { min-height: 36px; }
.shell #machine-console-ui .machine-digital-vend { min-height: 46px; font-size: 14px; }
.shell #machine-console-ui .machine-review-note { font-size: 11.5px; margin: 0; }
.shell #machine-console-ui .machine-golden-preview { grid-column: auto; display: grid; gap: 2px; min-height: 40px; padding: 6px 0 0; border-top: 0; font-size: 12px; }
.shell #machine-console-ui .machine-golden-preview span { font-size: 10.5px; }
@media (max-width: 760px) {
  .shell.shell--home .page .pvh-hero.pvh-vending-stage { padding-top: 28px; }
  .shell.shell--home .page .machine-wrap .machine-visual, .shell.shell--home .page .machine-wrap .machine-stage { height: 280px; }
}

/* 5. Collection choices wrap without edge fades. The tier rail keeps its
   compact desktop grid independently of the collection chooser. */
@media (min-width: 761px) {
  .shell #machine-console-ui .machine-tier-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shell #machine-console-ui .machine-tier-thumbnail { width: 24px; height: 36px; }
}

/* 6. Provider pack page: the pack, its franchise and the price row sit
   together instead of a bare heading with a button overlapping the price. */
.shell .pv-provider-hero { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 18px; }
.shell .pv-provider-art { position: relative; margin: 0; padding: 0; }
.shell .pv-provider-art img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; filter: drop-shadow(8px 16px 14px #0008); }
.shell .pv-provider-copy .page-head, .shell .pv-provider-copy header { margin-top: 0; }
.shell .pv-provider-buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.shell .pv-provider-buy strong { font-size: 26px; line-height: 1; }
.shell .pv-provider-buy .gold-button { min-height: 46px; padding-inline: 22px; }
@media (max-width: 760px) {
  .shell .pv-provider-hero { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; }
  .shell .pv-provider-buy strong { font-size: 22px; }
}

/* 7. Legal pages: readable, one column, no chrome. */
.shell .pv-legal { max-width: 720px; margin: 0 auto; padding: 8px 0 48px; line-height: 1.55; }
.shell .pv-legal h1 { margin: 6px 0 4px; font-size: clamp(28px, 4vw, 38px); }
.shell .pv-legal__updated { margin: 0 0 24px; color: rgba(255, 255, 255, .55); font-size: 13px; }
.shell .pv-legal section { margin: 22px 0; }
.shell .pv-legal h2 { margin: 0 0 8px; font-size: 18px; }
.shell .pv-legal p, .shell .pv-legal li { color: rgba(255, 255, 255, .82); font-size: 15px; }
.shell .pv-legal ul { padding-left: 20px; display: grid; gap: 8px; }
.shell .pv-legal a { color: #d9b55c; }
.shell .pv-legal__cross { margin-top: 32px; }
.shell .site-footer-links a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }