/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================
   Old School Cards — Design Tokens + Storefront Styles
   Ported from current-design/colors_and_type.css + storefront.css.
   Single source of truth for the public storefront.
   ============================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Neutrals (paper + ink) ---------- */
  --paper:    #F1EADA;
  --paper-2:  #E9E0CB;
  --paper-3:  #DCD0B6;
  --card:     #FAF4E4;
  --card-2:   #FFFCF1;
  --ivory:    #FFFDF5;

  --ink:      #1B140C;
  --ink-2:    #3A2E20;
  --ink-3:    #6B5A45;
  --ink-4:    #9A8B72;
  --ink-5:    #C5B89D;

  --rule-1:   rgba(27, 20, 12, 0.10);
  --rule-2:   rgba(27, 20, 12, 0.16);
  --rule-3:   rgba(27, 20, 12, 0.28);
  --rule-4:   rgba(27, 20, 12, 0.55);

  /* ---------- Brand accents ---------- */
  --red-50:   #FAE7E0; --red-100:  #F2CDBF; --red-300:  #D67C66;
  --red-500:  #B8412C; --red-700:  #82281A; --red-900:  #4F1A12;

  --green-50:  #E2EBDD; --green-100: #C6D6BD; --green-300: #6F9665;
  --green-500: #3F6E3A; --green-700: #2A4D27; --green-900: #182E18;

  --gold-50:  #F7EDD0; --gold-100: #EEDDA6; --gold-300: #D7B96A;
  --gold-500: #B68A2C; --gold-700: #82601A; --gold-900: #4A370E;

  --blue-50:  #DCE6EE; --blue-100: #B9CDDD; --blue-300: #6993B5;
  --blue-500: #2E5A82; --blue-700: #1B3D5C; --blue-900: #0F2438;

  /* ---------- Per-collection accents (data-driven) ---------- */
  --accent-pok:    #E8B923;   /* Pokémon — yellow */
  --accent-dbz:    #E07A1A;   /* Dragon Ball — orange */
  --accent-mar:    #C8302C;   /* Mario — red */
  --accent-ff:     #4F4276;   /* Final Fantasy — indigo */
  --accent-gun:    #4E5A6A;   /* Gundam — gunmetal */
  --accent-ill:    #2A2A2A;   /* Illuminati — graphite */
  --accent-yyh:    #1F6A4A;   /* Yu Yu Hakusho — toushin green */
  --accent-default:#6B5A45;

  /* ---------- Semantic role tokens ---------- */
  --bg:           var(--paper);
  --bg-band:      var(--paper-2);
  --surface:      var(--card);
  --surface-hi:   var(--card-2);
  --photo-bg:     var(--ivory);

  --fg:           var(--ink);
  --fg-soft:      var(--ink-2);
  --fg-muted:     var(--ink-3);
  --fg-faint:     var(--ink-4);

  --border:       var(--rule-2);
  --border-soft:  var(--rule-1);
  --border-strong:var(--rule-3);
  --rule:         var(--rule-4);

  --accent:       var(--ink);
  --accent-fg:    var(--paper);
  --accent-soft:  var(--paper-2);

  --link:         var(--blue-700);
  --link-hover:   var(--red-500);

  --success:      var(--green-500);
  --success-bg:   var(--green-50);
  --warn:         var(--gold-700);
  --warn-bg:      var(--gold-50);
  --error:        var(--red-700);
  --error-bg:     var(--red-50);
  --info:         var(--blue-500);
  --info-bg:      var(--blue-50);

  --collection-accent: var(--accent-default);

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;     --space-1:  4px;  --space-2:  8px;  --space-3:  12px;
  --space-4:  16px;  --space-5:  20px; --space-6:  24px; --space-7:  32px;
  --space-8:  40px;  --space-9:  48px; --space-10: 64px; --space-11: 80px;
  --space-12: 112px;

  /* ---------- Radii ---------- */
  --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px;
  --radius-md: 6px; --radius-lg: 10px; --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-1: 0 1px 2px rgba(27, 20, 12, 0.06), 0 0 0 1px var(--rule-1);
  --shadow-2: 0 6px 16px rgba(27, 20, 12, 0.10), 0 1px 3px rgba(27, 20, 12, 0.06);
  --shadow-3: 0 24px 48px rgba(27, 20, 12, 0.18), 0 4px 8px rgba(27, 20, 12, 0.08);
  --shadow-card: 0 1px 0 rgba(27, 20, 12, 0.05),
                 0 2px 4px rgba(27, 20, 12, 0.06),
                 0 8px 16px -8px rgba(27, 20, 12, 0.10);
  --shadow-photo: 0 4px 14px rgba(27, 20, 12, 0.12),
                  0 1px 2px rgba(27, 20, 12, 0.08);
  --shadow-focus: 0 0 0 3px rgba(184, 65, 44, 0.30);

  /* ---------- Layout ---------- */
  --layout-max-w:        1280px;
  --layout-max-w-narrow: 720px;
  --layout-gutter:       24px;
  --layout-gutter-lg:    40px;
  --layout-header-h:     64px;
  --layout-header-h-sm:  56px;
  --layout-filter-w:     264px;

  --hit-min:             44px;
  --input-h:             40px;
  --input-h-sm:          32px;
  --button-h:            44px;
  --button-h-sm:         36px;
  --button-h-lg:         52px;

  /* ---------- Type ---------- */
  --font-display: "Fraunces", "Source Serif 4", "Iowan Old Style",
                  "Apple Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI",
                  Helvetica, Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo,
                  Consolas, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-15: 15px; --fs-17: 17px; --fs-19: 19px; --fs-22: 22px;
  --fs-26: 26px; --fs-32: 32px; --fs-40: 40px; --fs-52: 52px; --fs-68: 68px;

  --lh-tight: 1.05; --lh-snug: 1.2; --lh-base: 1.5; --lh-loose: 1.7;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --tracking-tightest: -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;
  --tracking-caps:     0.10em;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
}

/* =============================================================
   Base / element defaults
   ============================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  font-feature-settings: "kern", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-52);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tightest);
  line-height: var(--lh-tight);
  font-variation-settings: "opsz" 96;
}
h2 { font-size: var(--fs-26); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--fs-19); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-17); font-weight: var(--fw-semibold); }

.osc-eyebrow,
h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-11);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
  margin: 0;
}

.osc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-52);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tightest);
  font-variation-settings: "opsz" 96;
}
.osc-display--xl { font-size: var(--fs-68); }

p { margin: 0; line-height: var(--lh-base); color: var(--fg-soft); }
small, .osc-caption { font-size: var(--fs-13); color: var(--fg-muted); line-height: var(--lh-snug); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  -webkit-text-decoration-color: var(--rule-2);
          text-decoration-color: var(--rule-2);
  transition: color var(--dur-1) var(--ease-out),
              -webkit-text-decoration-color var(--dur-1) var(--ease-out);
  transition: color var(--dur-1) var(--ease-out),
              text-decoration-color var(--dur-1) var(--ease-out);
  transition: color var(--dur-1) var(--ease-out),
              text-decoration-color var(--dur-1) var(--ease-out),
              -webkit-text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--link-hover); -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; }

code, kbd, .osc-mono, .osc-num, .osc-id {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  font-size: 0.92em;
}

hr { border: 0; border-top: 1px solid var(--rule-2); margin: var(--space-6) 0; }

::selection { background: var(--ink); color: var(--paper); }

img { max-width: 100%; display: block; }

/* =============================================================
   Storefront primitives
   ============================================================= */
.osc-container {
  width: 100%;
  max-width: var(--layout-max-w);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.osc-rule { border: 0; border-top: 1px solid var(--rule-3); margin: 0; }

/* Editorial price — sturdy mono numerics */
.osc-price {
  font-family: var(--font-display);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}

/* Condition pill — NM / LP / MP / HP / DMG only */
.osc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
}
.osc-pill--nm  { background: var(--green-50); color: var(--green-700); border-color: var(--green-100); }
.osc-pill--lp  { background: var(--card-2);   color: var(--ink-2);     border-color: var(--rule-2); }
.osc-pill--mp  { background: var(--gold-50);  color: var(--gold-700);  border-color: var(--gold-100); }
.osc-pill--hp  { background: var(--red-50);   color: var(--red-700);   border-color: var(--red-100); }
.osc-pill--dmg { background: var(--paper-3);  color: var(--ink-3);     border-color: var(--rule-3); }

/* Collection chip */
.osc-chip-collection {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  background: var(--card-2);
  color: var(--ink-2);
  border: 1px solid var(--rule-2);
}
.osc-chip-collection::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--collection-accent);
}

/* Buttons */
.osc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--button-h);
  padding: 0 var(--space-5);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.osc-btn:active { transform: translateY(1px); }
.osc-btn--lg { height: var(--button-h-lg); padding: 0 var(--space-6); font-size: var(--fs-13); }
.osc-btn--sm { height: var(--button-h-sm); padding: 0 var(--space-4); font-size: var(--fs-11); }

.osc-btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.osc-btn--primary:hover { background: #2a2014; }
.osc-btn--primary:disabled { opacity: 0.6; cursor: wait; }

.osc-btn--secondary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.osc-btn--secondary:hover { background: var(--paper-2); }

.osc-btn--accent { background: var(--red-700); color: var(--paper); border-color: var(--red-700); }
.osc-btn--accent:hover { background: var(--red-900); }

.osc-btn--ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.osc-btn--ghost:hover { background: var(--card); }

.osc-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Form inputs */
.osc-input {
  display: block;
  width: 100%;
  height: var(--button-h);
  padding: 0 var(--space-3);
  background: var(--card);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-15);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.osc-input::placeholder { color: var(--fg-faint); }
.osc-input:focus { border-color: var(--ink); box-shadow: var(--shadow-focus); }

/* Card frame */
.osc-card-frame {
  background: var(--photo-bg);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-photo);
  overflow: hidden;
  position: relative;
}

/* Tile grid */
.osc-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: 24px;
  gap: 24px;
}

/* Tile hover */
.osc-tile {
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1);
}
.osc-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(27,20,12,0.14), 0 2px 4px rgba(27,20,12,0.06);
}

/* Franchise hub: grid of set tiles. Two-column default; collapses on
   narrow viewports. */
.osc-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
.osc-set-tile {
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1), border-color var(--dur-1);
}
.osc-set-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(27,20,12,0.14), 0 2px 4px rgba(27,20,12,0.06);
  border-color: var(--collection-accent, var(--border-strong));
}

/* Hub hero stack-on-mobile */
@media (max-width: 720px) {
  .osc-hub-hero { grid-template-columns: 1fr; }
  .osc-hub-stats {
    padding-left: 0; border-left: 0;
    margin-top: 18px;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .osc-set-header-grid { grid-template-columns: 1fr; }
}

/* Shimmer */
@keyframes osc-shimmer {
  0% { background-position: -240px 0; }
  100% { background-position: 240px 0; }
}
.osc-shimmer {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  background-size: 480px 100%;
  animation: osc-shimmer 1.4s linear infinite;
}

/* Focus ring */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Responsive helpers */
.osc-mobile-only { display: none; }
.osc-desktop-only { display: inline-flex; }
@media (max-width: 880px) {
  .osc-mobile-only { display: inline-flex; }
  .osc-desktop-only { display: none !important; }
  .osc-catalog-grid { grid-template-columns: 1fr !important; }
  .osc-pdp-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .osc-footer-grid { grid-template-columns: 1fr !important; }
  .osc-contact-grid { grid-template-columns: 1fr !important; }
}

/* ========================================================================
   LIBRARY — the editorial / reference section. Grids + layout helpers
   ported from the design-system mock (storefront.css). The Library reuses
   all the existing primitives (Button, Pill, CardFrame, …); only these
   layout classes are new.
   ======================================================================== */

/* Checklist thumbnail grid + the per-card "every edition" gallery */
.osc-checklist-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

/* Library two-column layout (main + sticky sidebar) collapses on mobile */
@media (max-width: 880px) {
  .osc-lib-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .osc-lib-sidebar { order: -1; }
  .osc-lib-card {
    grid-template-columns: 1fr !important;
  }
  .osc-lib-card > div:first-child {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule-2);
  }
}
@media (max-width: 560px) {
  .osc-factoid-grid { grid-template-columns: repeat(2, 1fr) !important; }
}