/* =========================================================
   DEXHAVEN — SHARED STYLES
   Every page links to this one file, so a change here
   (a color, a spacing value, a font size) updates every
   page at once instead of needing to be edited everywhere.
   ========================================================= */

/* -----------------------------
   1. COLOR PALETTE & TOKENS
   These are CSS "variables" — instead of typing a color
   like #e0202f every time we want red, we type var(--red).
   Change the value once here, and it updates everywhere
   it's used across the whole site.
------------------------------ */
:root {
  /* backgrounds, darkest to lightest */
  --bg: #0b0b10;
  --panel: #15151c;
  --panel-alt: #1c1c26;
  --border: #2a2a36;

  /* brand red, from deep to bright */
  --red-deep: #6e0f18;
  --red: #dc1f2f;
  --red-bright: #ff4757;

  /* accent gold, used sparingly (badges, highlights) */
  --gold: #ffc84d;

  /* card condition scale, most to least pristine — used by the
     condition badge on singles (see section 9a) */
  --cond-nm: #3ecf74;
  --cond-lp: #a4d94d;
  --cond-mp: var(--gold);
  --cond-hp: #ff9a4d;
  --cond-dmg: var(--red-bright);

  /* text */
  --text: #f3f3f7;
  --text-dim: #9a9aa8;
  --text-faint: #5f5f6b;

  /* type */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* shape */
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;

  /* layout */
  --sidebar-width: 300px;
  /* Every .product-tile is pinned to exactly this height, so a row
     of them lines up cleanly no matter how long each name is — and
     so a "one row preview" can clip to exactly this height without
     ever cutting a card in half. See section 12 for how it's used.
     Tall enough for the photo box (a fixed height — see
     --product-photo-height below — rather than the width-based
     aspect-ratio it used to be, specifically so a tall Pokémon card
     photo has room to show in full instead of getting cropped) plus
     a single's extra Variant/Rarity line (section 9a). Non-singles
     cards just have a bit of empty space below their footer, which
     is fine since margin-top: auto still pins that footer to the
     bottom. */
  --product-tile-height: 400px;

  /* How tall the photo area inside a product card is. Fixed in px
     (not an aspect-ratio tied to the card's width) so it stays the
     same regardless of how wide a grid column ends up being — and
     tall enough, paired with object-fit: contain below, to show an
     entire portrait Pokémon card rather than a cropped slice of one. */
  --product-photo-height: 224px;
}

/* -----------------------------
   2. RESET
   Browsers add their own default spacing/sizing to elements.
   This wipes that out so we start from a blank, predictable
   slate and control everything ourselves.
------------------------------ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

/* The browser hides anything with the "hidden" attribute by default,
   but that default is easy to accidentally override — e.g. our own
   ".form-row { display: flex }" rule further down was doing exactly
   that. This makes hidden="" win no matter what, so script.js can
   rely on el.hidden = true/false actually working everywhere. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
}

/* -----------------------------
   3. BASE PAGE STYLE
------------------------------ */
html, body {
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* The page itself never scrolls — the frame is pinned to the
     viewport and only the content inside it scrolls. See the
     overflow-y: auto on .page-content below. */
  overflow: hidden;
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* -----------------------------
   4. PAGE SHELL
   The whole shell — sidebar AND main column together — sits inside
   one shared metal-and-red frame now, instead of just framing the
   main column. A margin floats the frame off the edge of the
   window; the border itself is layered (an inset highlight near
   the top like light catching a raised edge, an inset shadow along
   the bottom for depth, a thin dark outline, a soft red glow
   outside that). overflow: hidden clips the sidebar/topbar/hero's
   own corners to match this outer shape, and keeps the frame's own
   size fixed — it's .page-content that scrolls, not this box.
------------------------------ */
/* The frame around everything (the red device on the left and the
   window frame) is drawn by frame-shell.css + script.js — see the notes
   at the top of frame-shell.css. .main-col sits in the window opening
   UNDER the frame (extending ~1px under the red ring, so no gap shows,
   with rounded corners matching the ring's inner corners), and
   .sidebar sits ABOVE it so the Menu draws on the device's screen. */
.app-shell {
  /* inset (not margin) so there's nothing for this box's top edge to
     collapse into body's — a margin here was making the page render
     18px taller than the actual window, which triggered a native
     scrollbar that cut across the frame's right edge. */
  position: absolute;
  inset: 18px;
}

.topbar { flex-shrink: 0; }

/* -----------------------------
   5. SIDEBAR
   Always full height and flush against the left edge of .app-shell,
   regardless of window size — see the border-image comment above
   .app-shell for how the art stretches to make that possible.
------------------------------ */
.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  /* No background of its own — the device art comes from the shell
     image under it (.app-shell::before). The padding keeps everything
     inside the device's dark screen: below the lens/chamfer at the top,
     inside the bezels at the sides, and above the LED strip at the
     bottom. */
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 104px 26px 160px 80px;
  overflow: hidden;
  z-index: 3;
}

.brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-bottom: 4px;
}

/* The nav (not the sidebar itself) is what scrolls when a window gets
   short enough that all the links don't fit. That keeps the top/bottom
   padding above always clear for the device artwork's ledge and
   control-strip graphics — if .sidebar scrolled instead, an overflowing
   nav list would push straight through that reserved space and render
   on top of the artwork instead of being hidden below the fold. */
.sidebar nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* Same reasoning as .page-content's scrollbar styling below — a
     themed thin scrollbar instead of the stock OS one, just in the
     sidebar's dark palette instead of the content area's light one. */
  scrollbar-width: thin;
  scrollbar-color: var(--red-deep) transparent;
}

.sidebar nav::-webkit-scrollbar {
  width: 8px;
}

.sidebar nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar nav::-webkit-scrollbar-thumb {
  background: var(--red-deep);
  border-radius: 999px;
}

.sidebar nav::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

/* -----------------------------
   5b. MAIN COLUMN
   Fills the window opening in the shell art (see .app-shell above).
   Offsets are the opening's edges x 0.64, pulled ~1px outward so the
   box tucks under the ring; the corner radii match the ring's inner
   corners (35/40/25/25 x 0.64) so the content's corners follow the
   curve instead of poking past it.
------------------------------ */
.main-col {
  position: absolute;
  left: 342px;
  top: 39px;
  right: 44px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-radius: 22px 25px 16px 16px;
  background: var(--bg);
  overflow: hidden;
  z-index: 1;
}

/* The "Card Fan" logo mark — three fanned cards, drawn as inline SVG
   directly in each page's .brand block (see the note on index.html
   about that markup being duplicated across pages) rather than as a
   background image, so its fill colors can reference the site's own
   --gold / --red-deep / --red-bright variables instead of repeating
   hex codes. The favicon (assets/favicon.svg) is the same artwork,
   just as its own standalone file with those colors hardcoded,
   since a favicon has no access to this stylesheet's variables. */
.brand-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(220, 31, 47, 0.45));
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  line-height: 1.25;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}

.brand-tagline {
  font-size: 0.68rem;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  /* Closer to the reference's plain white/light-gray icon+label than
     the default --text-dim, which reads more blue-gray next to this
     much more saturated frame. */
  color: rgba(230, 232, 238, 0.82);
  font-size: 0.87rem;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

/* The small rounded-square badge behind each nav icon, matching the
   reference's boxed-icon treatment. Scoped to .nav-link specifically
   so the topbar's search/cart icons (which also use .icon) are
   untouched. */
.nav-link .icon {
  width: 28px;
  height: 28px;
  padding: 6px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  transition: background 0.15s ease;
}

.nav-link:hover {
  background: var(--panel-alt);
  color: var(--text);
}

.nav-link.active {
  background: linear-gradient(90deg, var(--red), var(--red-deep));
  color: #fff;
}

.nav-link.active .icon {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Sidebar footer card — an octagonal badge above a short line of
   flavor text, sitting below the nav list. .sidebar's own flex-column
   layout (gap: 20px) is what spaces it away from the nav above; it
   just needs to not shrink when the nav is scrolling. */
.sidebar-footer-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}

.sidebar-footer-badge {
  width: 104px;
  height: 104px;
  clip-path: polygon(29% 0%, 71% 0%, 100% 29%, 100% 71%, 71% 100%, 29% 100%, 0% 71%, 0% 29%);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer-badge svg {
  width: 46px;
  height: 46px;
  color: rgba(230, 232, 238, 0.4);
}

.sidebar-footer-text {
  text-align: center;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-dim);
}

/* -----------------------------
   6. TOPBAR
------------------------------ */
.topbar {
  display: flex;
  align-items: center;
  gap: 13px;
  /* Slim 52px bar (was 79px) — everything inside scaled to ~66% to
     match. Side padding stays 32px so the search bar still lines up
     with the page content's left edge below it. */
  height: 52px;
  padding: 0 32px;
  border-bottom: 1px solid var(--border);
}

.topbar .icon {
  width: 14px;
  height: 14px;
}

.search-bar {
  flex: 1;
  max-width: 320px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 11px;
  color: var(--text-dim);
}

.search-bar input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.75rem;
}

.topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.topbar-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.topbar-link:hover {
  color: var(--text);
}

.topbar-link[hidden] {
  display: none;
}

.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: none;
  border: 1px solid transparent;
  color: var(--text-dim);
}

.topbar-icon-btn:hover {
  color: var(--text);
}

/* Account/profile button next to the cart — a generic red/white
   poké-ball-style pictogram (not any specific character or logo
   artwork), matching the reference's circular icon in that slot.
   No functionality behind it yet. */
.topbar-icon-btn.topbar-icon-btn-blank {
  background: none;
  border: none;
}

.topbar-icon-btn-blank svg {
  width: 16px;
  height: 16px;
}

/* Logged in: the poké-ball button shows your profile picture instead
   (set by updateSiteBarUser in script.js). Same spot, same size. */
.topbar-icon-btn.topbar-avatar-btn {
  padding: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.18);
  transition: box-shadow 0.15s ease;
}

.topbar-icon-btn.topbar-avatar-btn:hover {
  box-shadow: 0 0 0 2px var(--red-bright);
}

.topbar-avatar-btn img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}

/* The menu that opens from your profile picture (Profile / Settings /
   Log out). Same dark panel colours as the Menu on the left; hovered
   items get a soft red tint, and Log out is red. */
.topbar-actions {
  position: relative;
}

.user-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: -6px;
  z-index: 50;
  min-width: 184px;
  padding: 6px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-menu[hidden] {
  display: none;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  color: #e6e8ee;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.user-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #8a90a0;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
  background: rgba(220, 31, 47, 0.14);
  color: #ffffff;
  outline: none;
}

.user-menu-item:hover svg,
.user-menu-item:focus-visible svg {
  color: #ffffff;
}

.user-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: rgba(255, 255, 255, 0.08);
}

.user-menu-item.user-menu-logout,
.user-menu-item.user-menu-logout svg {
  color: #ff6b76;
}

/* -----------------------------
   7. PAGE CONTENT (placeholders for now)
   Everything below the topbar switches to a light theme — these
   variables are scoped to .page-content, so every card/tile/text
   color inside it (product cards, quick-action tiles, shop
   sections, and so on) picks up the light palette automatically
   just by cascading, without touching those rules individually.
   The dark sidebar/topbar sit outside .page-content and keep the
   root (dark) values. .hero resets back to light-on-dark text
   below, since it still shows a dark photo, not a white card.
------------------------------ */
.page-content {
  /* Base look for every page: the same dark navy as the Menu's screen
     (the .fs-screen colours in frame-shell.css), with light text.
     Panels, chips, form boxes etc. use the dark --panel colours;
     product cards switch back to light colours (see just below). */
  --bg: #0b121b;
  --panel: #161c26;
  --panel-alt: #1c2330;
  --border: rgba(255, 255, 255, 0.1);
  --text: #f3f3f7;
  --text-dim: #c3c7d1;
  --text-faint: #8a90a0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20, 26, 36, 0.25), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #0d131b 0%, #0c121a 29%, #0b121b 58%, #091119 79%, #070f17 94%, #040d14 100%);
  background-attachment: local;
  /* color is inherited as an already-resolved value, not re-evaluated
     per descendant — without this, anything that doesn't set its own
     "color: var(--text)" (headings, tile labels, etc.) keeps
     inheriting the dark page's light text color from body, instead
     of picking up the light page's dark text set just above. */
  color: var(--text);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* This is what actually scrolls — the frame around it (.app-shell)
     stays a fixed size, so scrolling the page never stretches it. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Whenever a page's content is taller than the window, this WILL
     scroll — that's normal. Left at browser defaults, though, it's a
     thick gray OS scrollbar with square arrow buttons sitting right
     next to hand-drawn red device art, which looks like exactly what
     it is: a stock control bolted onto a themed page. Firefox gets a
     thin themed track/thumb via scrollbar-width/-color; Chrome/Edge/
     Safari need the -webkit- pseudo-elements below for the same look
     (Firefox ignores those, Chrome ignores the properties above, so
     both are needed together, not as fallbacks for each other). */
  scrollbar-width: thin;
  scrollbar-color: var(--red-deep) transparent;
}

.page-content::-webkit-scrollbar {
  width: 10px;
}

.page-content::-webkit-scrollbar-track {
  background: transparent;
}

.page-content::-webkit-scrollbar-thumb {
  background: var(--red-deep);
  border-radius: 999px;
  border: 2px solid var(--bg);
}

.page-content::-webkit-scrollbar-thumb:hover {
  background: var(--red);
}

.section-placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--text-faint);
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* -----------------------------
   8. HERO
   Full-bleed: runs straight from under the Site bar, edge to edge
   across the whole window, with no margin around it. The negative
   margins cancel .page-content's 32px padding on the top and sides.
   The picture is assets/hero.jpg — replace that file to change it.
------------------------------ */
.hero {
  /* Reset back to the dark palette — the Featured card on the hero
     is dark, and the hero text is light, so this opts back out of
     the light values .page-content sets for everything else. */
  --text: #f3f3f7;
  --text-dim: #e6e8ee;
  --text-faint: #9a9aa8;
  --panel: #14141a;
  --panel-alt: #1c1c26;
  --border: #33333e;
  color: var(--text);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  height: 325px;
  margin: -32px -32px 0;
  display: flex;
  align-items: center;
  padding: 0 72px;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: #3f86c9 url('assets/hero.jpg') center 45% / cover no-repeat;
}

.hero-media::after {
  /* Darker on the left, fading out toward the middle, so the white
     title/subtitle stay readable on the bright sky. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 12, 24, 0.72) 0%, rgba(6, 12, 24, 0.45) 32%, rgba(6, 12, 24, 0) 60%);
}

/* The homepage hides .page-content's scrollbar: with the hero running
   edge to edge, the scrollbar's track showed as a pale strip down the
   right side next to it. Scrolling with the mouse wheel / trackpad /
   touch works exactly the same. */
.page-content-home {
  scrollbar-width: none;
}

.page-content-home::-webkit-scrollbar {
  display: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
}

/* Matches the reference's plain "Welcome To" treatment — regular
   weight, same size as the rest, no letterspaced gold eyebrow
   styling. Only used here on the homepage hero. */
.eyebrow {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

.eyebrow strong {
  font-weight: 800;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.05;
}

.hero-subtitle {
  color: var(--text-dim);
  font-size: 0.98rem;
  max-width: 420px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(90deg, var(--red-bright), var(--red));
  color: #fff;
  box-shadow: 0 10px 24px rgba(220, 31, 47, 0.35);
}

.btn-primary:hover {
  filter: brightness(1.08);
}

.hero-featured {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 60px;
  z-index: 2;
  width: 220px;
}

.hero-featured-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.hero-featured-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}

.hero-featured-dots .dot.active {
  background: var(--red-bright);
}

.featured-tag {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-bottom: none;
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

/* The featured card sizes to its own content here instead of the
   shared fixed --product-tile-height (that's tuned for a grid of
   many cards lining up together) — this is a single card floating
   over the hero, and the reference's version is compact, with a
   visible red outline instead of the plain dark border. */
.hero-featured .product-tile {
  height: auto;
  border-color: var(--red);
}

/* Small arrow after the two homepage CTAs, matching the reference —
   scoped to just these two spots rather than every .btn-primary /
   .product-tile-link sitewide, since those get reused on other
   pages (forms, grids) where an arrow wouldn't make sense. */
.hero-content .btn-primary::after,
.hero-featured .product-tile-link::after {
  content: "\2192";
  margin-left: 4px;
}

/* The reference's hero CTA is a flat red pill, not the gradient
   .btn-primary uses everywhere else — scoped to this one button so
   the rest of the site keeps its usual gradient look. */
.hero-content .btn-primary {
  background: var(--red);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.hero-featured .product-tile-media {
  height: 108px;
  padding: 10px;
  background: var(--panel);
}

.hero-featured .product-tile-media img {
  border-radius: 8px;
}

/* -----------------------------
   9. PRODUCT CARD
   One shared look for any card that shows a product — used by
   the hero's featured item now, and by the product grid later.
------------------------------ */
.product-tile {
  height: var(--product-tile-height);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.product-tile-media {
  position: relative;
  height: var(--product-photo-height);
  background: var(--panel-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

/* object-fit: contain is the important part here — it scales the
   photo down to fit inside the box WITHOUT cropping it, whatever its
   real aspect ratio turns out to be (a tall portrait card photo, a
   square keychain photo, a wide booster-box photo). Before this
   existed, a tall image just got centered and clipped by the box's
   overflow: hidden above, which is why full-card Pokémon photos were
   showing as a cropped strip through the middle of the card. */
.product-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-photo-placeholder {
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product-tile-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-height: 0;
}

.product-tile-category {
  color: var(--text-faint);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.product-tile-name {
  font-size: 0.95rem;
  font-weight: 600;
  /* Clamp to 2 lines instead of letting long names grow the card —
     every card needs to be the same height (see --product-tile-height)
     so a "one row preview" can clip cleanly without cutting a card
     in half. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-tile-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Pushes the price/link row to the bottom of the card regardless
     of how many lines the name above took up. */
  margin-top: auto;
}

.product-tile-price {
  font-weight: 700;
}

.product-tile-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red-bright);
}

.product-tile-link:hover {
  color: #fff;
}

/* -----------------------------
   9a. SINGLES: condition/language badges + meta lines
   Only used by renderSingleTile() in script.js — every other
   product type still just shows .product-tile-category.
------------------------------ */
.card-condition-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 6px;
  color: #0b0b10;
  background: var(--cond-nm);
}

.card-condition-badge.cond-nm { background: var(--cond-nm); }
.card-condition-badge.cond-lp { background: var(--cond-lp); }
.card-condition-badge.cond-mp { background: var(--cond-mp); }
.card-condition-badge.cond-hp { background: var(--cond-hp); }
.card-condition-badge.cond-dmg { background: var(--cond-dmg); color: #fff; }

/* Used on the product detail page, where the badge sits inline in
   a spec row instead of overlaid on a photo. */
.card-condition-badge.inline {
  position: static;
  display: inline-block;
}

.card-language-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--text-dim);
  background: rgba(11, 11, 16, 0.72);
  border: 1px solid var(--border);
}

.product-tile-meta {
  color: var(--text-faint);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-tile-subinfo {
  color: var(--text-dim);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* -----------------------------
   10. QUICK-ACTION TILES
   The homepage always renders exactly 6 tiles from QUICK_ACTIONS
   (see data.js), so this is a fixed 6-column grid — matching the
   reference's single unbroken row — rather than an auto-fit that
   would wrap once the dex-panel column narrows things down.
   #quick-actions only exists on index.html, so this is safe to
   pin without touching any other page.
------------------------------ */
.action-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.action-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 18px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.action-tile:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.action-tile-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Plain solid glyph, no badge/circle behind it — the reference's
     Quick Action tiles use bare black icons, not the boxed treatment
     the sidebar nav gets. */
  color: var(--text);
}

.action-tile-icon svg {
  width: 26px;
  height: 26px;
}

.action-tile-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.action-tile-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* -----------------------------
   11. PAGE HEADER (Shop, and other real pages as we build them)
------------------------------ */
.page-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.page-header h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.page-subtitle {
  color: var(--text-dim);
  font-size: 0.9rem;
  max-width: 560px;
}

/* -----------------------------
   12. PRODUCT GRID (a full, unclipped list of products —
   used by the category page, showing every item in one section)
   Reuses the same .product-tile look as the hero's featured card —
   defined once, back in section 9.
------------------------------ */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
}

/* -----------------------------
   12a. PRODUCT ROW (a one-row PREVIEW — used on the Shop page)
   script.js only renders a handful of cards into this (see
   PREVIEW_CARD_LIMIT) rather than every product in the section —
   no point building hundreds of card elements just to hide most of
   them, and a hidden-but-still-clickable card would be a real
   keyboard-navigation trap. This height clip is just a backstop:
   on a narrow screen the preview cards might wrap past one row, and
   on a very wide screen the limit might not quite fill it — either
   way, this guarantees only one full row is ever visible, with no
   partial second row peeking through.
------------------------------ */
.product-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  max-height: var(--product-tile-height);
  overflow: hidden;
}

/* -----------------------------
   12c. HOME GRID (homepage only)
   Everything under the hero is sized to fit the window, so the Home
   page doesn't scroll: the grid takes whatever height is left, the
   two rows (Latest Releases, Upcoming Events) split it evenly, and
   the open slot on the right runs the full height. If a window is
   too short for that, the rows stop shrinking at their min-height
   and the page can still be wheel-scrolled rather than cutting
   anything off.
------------------------------ */
.page-content-home {
  /* The Home page keeps the light card colours it was approved with —
     its own headings are set to light text further down. */
  --panel: #ffffff;
  --panel-alt: #f2f5f8;
  --border: #e1e6eb;
  --text: #171a20;
  --text-dim: #5c6270;
  --text-faint: #9198a3;
  gap: 20px;
  padding-bottom: 22px;
  /* Same dark navy as the Menu's screen in the Frame shell (the
     .fs-screen colours in frame-shell.css), instead of the light
     grey the other pages use. */
  background:
    radial-gradient(ellipse at 50% 30%, rgba(20, 26, 36, 0.25), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, #0d131b 0%, #0c121a 29%, #0b121b 58%, #091119 79%, #070f17 94%, #040d14 100%);
}

.home-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 24px;
}

.home-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Box 3 — kept empty on purpose for now. */
.home-side-slot {
  flex: 0 0 250px;
}

/* The two rows share all the height left under the hero, so the Home
   page always reaches the bottom of the window — the cards grow
   taller (and their pictures bigger) to fill it, rather than leaving
   empty space below. */
.home-panel {
  flex: 1 1 0;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Headings and links sit straight on the dark background, so they're
   light (like the Menu's text); the cards keep their own colours. */
.home-panel-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.home-panel-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
  color: #f3f3f7;
}

.home-panel-header h2 .icon {
  width: 18px;
  height: 18px;
  color: var(--red);
}

.home-panel-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(230, 232, 238, 0.7);
  white-space: nowrap;
}

.home-panel-link:hover {
  color: var(--red);
}

/* One line of cards, no scrolling — script.js sets --cols to however
   many cards fit and only builds that many. */
.home-row {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
}

.home-row .empty-section-note {
  grid-column: 1 / -1;
  padding: 18px;
}

/* Compact product card: small photo on the left, details on the right. */
.mini-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

.mini-card:hover {
  border-color: var(--red);
}

/* Square photo that's as tall as the card allows. */
.mini-card-media {
  flex: 0 0 auto;
  height: 100%;
  max-height: 130px;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  background: var(--panel-alt);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mini-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.mini-card-media .product-photo-placeholder {
  font-size: 0.55rem;
  color: var(--text-faint);
  text-align: center;
}

.mini-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mini-card-meta {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-card-name {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mini-card-price {
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text);
}

/* Compact event card: small red date badge on the left, details on the right. */
.event-card {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s ease;
}

a.event-card:hover {
  border-color: var(--red);
}

.event-date {
  flex: 0 0 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border);
}

.event-date-month {
  width: 100%;
  text-align: center;
  background: var(--red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 0;
}

.event-date-day {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 0 7px;
  color: var(--text);
}

.event-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.event-title {
  max-width: 100%;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-meta {
  max-width: 100%;
  font-size: 0.7rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-price {
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--red-deep);
  background: rgba(220, 31, 47, 0.08);
  border-radius: 999px;
  padding: 1px 7px;
}

.shop-section-footer {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* -----------------------------
   12b. SHOP JUMP NAV + SECTIONS
------------------------------ */
html {
  scroll-behavior: smooth;
}

.shop-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jump-chip {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 500;
}

.jump-chip:hover {
  color: var(--text);
  border-color: var(--red);
}

.shop-sections {
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.shop-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 24px;
}

/* Heading row: section name on the left, "Show all" on the right,
   with the divider line under both. */
.shop-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.shop-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.btn.shop-show-all {
  flex-shrink: 0;
  padding: 7px 16px;
  font-size: 0.8rem;
}

.section-intro {
  color: var(--text-dim);
  font-size: 0.88rem;
  max-width: 560px;
  margin-top: -8px;
}

.empty-section-note {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
}

/* -----------------------------
   12b-2. PRODUCT CARDS KEEP LIGHT COLOURS
   Every page is dark navy (see .page-content), but product cards stay
   white with dark text, like the cards on the Home page.
------------------------------ */
.page-content .product-tile {
  --panel: #ffffff;
  --panel-alt: #f2f5f8;
  --border: #e1e6eb;
  --text: #171a20;
  --text-dim: #5c6270;
  --text-faint: #9198a3;
  color: var(--text);
}

/* -----------------------------
   12b-3. SINGLES TILES
   Dark tile in the same colours as the Shop page's jump buttons
   (--panel background, --border outline). See renderSingleTile() in
   script.js for what goes where.
------------------------------ */
.page-content .single-tile {
  --panel: #161c26;
  --panel-alt: #1c2330;
  --border: rgba(255, 255, 255, 0.1);
  --text: #f3f3f7;
  --text-dim: #c3c7d1;
  --text-faint: #8a90a0;
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: visible;
  color: var(--text);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-content .single-tile:hover,
.page-content .single-tile:focus-within {
  border-color: var(--red);
  background: #1a2130;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

/* The card itself: a real Pokémon card's shape (63 x 88 mm) with
   its rounded corners, so card scans/photos fit edge to edge. */
.single-tile-art {
  position: relative;
  aspect-ratio: 63 / 88;
  border-radius: 4.8% / 3.4%;
  overflow: hidden;
  background: #0b121b;
}

.single-tile-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.single-tile-art .product-photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-faint);
}

/* The whole tile is clickable: the name's link is stretched over the
   entire tile with an invisible layer, so a click anywhere opens the
   product page. */
.single-tile-link {
  color: inherit;
  text-decoration: none;
  outline: none;
}

.single-tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

/* Wishlist (top left) and add-to-cart (top right) buttons, in the
   tiles' own style: rounded square, tile background, and the red
   outline a tile gets on hover. They sit above the stretched link, so
   clicking them doesn't open the page. Hidden until you hover the
   tile; always shown on touch screens, where there's no hover. */
.tile-action {
  position: absolute;
  top: 18px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #f3f3f7;
  background: #161c26;
  border: 1px solid var(--red);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease;
}

.tile-action svg {
  width: 17px;
  height: 17px;
}

.tile-action-wishlist { left: 18px; }
.tile-action-cart { right: 18px; }

.single-tile:hover .tile-action,
.single-tile:focus-within .tile-action {
  opacity: 1;
  transform: scale(1);
}

.tile-action:hover,
.tile-action:focus-visible {
  background: var(--red);
  outline: none;
}

/* Ready for the wishlist: a star button with class "is-active" (the
   product is on the user's wishlist) shows a filled-in star. */
.tile-action-wishlist.is-active svg {
  fill: currentColor;
}

@media (hover: none) {
  .tile-action {
    opacity: 1;
    transform: none;
  }
}

/* The name — the biggest, clearest text on the tile. */
.single-tile-name {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.single-tile-set {
  font-size: 0.68rem;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* margin-top: auto pins this row to the bottom of the tile, so prices
   line up across a row even when one name takes two lines. */
.single-tile-footer {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.single-tile-tags {
  display: flex;
  gap: 5px;
}

.single-tile-cond,
.single-tile-lang {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 6px;
}

.single-tile-cond { color: #0b0b10; background: var(--cond-nm); }
.single-tile-cond.cond-lp { background: var(--cond-lp); }
.single-tile-cond.cond-mp { background: var(--cond-mp); }
.single-tile-cond.cond-hp { background: var(--cond-hp); }
.single-tile-cond.cond-dmg { background: var(--cond-dmg); color: #fff; }

.single-tile-lang {
  color: var(--text-dim);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.single-tile-price {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
}

/* Singles row on the Shop page: tiles are as tall as their card
   needs, so instead of a fixed max-height, any tiles that would wrap
   onto a second line get a zero-height row and stay hidden. */
.product-row.product-row-auto {
  max-height: none;
  grid-template-rows: auto;
  grid-auto-rows: 0;
  row-gap: 0;
}

/* -----------------------------
   12c. CUSTOM BINDERS TEASER (Shop page)

   A compact three-part row: pitch | example images | incentive +
   button. Below the 860px breakpoint further down it drops to a
   single stacked column in that same order, which is why the
   three pieces are just three direct children here rather than
   nested wrappers.
------------------------------ */
.binder-teaser-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(200px, 260px);
  align-items: center;
  gap: 28px;
}

.binder-teaser-pitch {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.binder-example-row {
  display: flex;
  gap: 12px;
}

.binder-example-card {
  width: 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.binder-example-media {
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A different soft gradient per card just so the row doesn't look
     like three identical boxes — swap these for real photos later
     via BINDER_EXAMPLES in data.js. */
  background: linear-gradient(160deg, var(--panel-alt), var(--panel));
}

.binder-example-card:nth-child(2) .binder-example-media {
  background: linear-gradient(160deg, #241722, var(--panel));
}

.binder-example-card:nth-child(3) .binder-example-media {
  background: linear-gradient(160deg, #1a1f2b, var(--panel));
}

.binder-example-placeholder {
  color: var(--text-faint);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  padding: 0 8px;
}

.binder-example-card figcaption {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: center;
}

.binder-teaser-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.binder-teaser-incentive {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.binder-teaser-cta .btn {
  width: 100%;
  text-align: center;
}

@media (max-width: 860px) {
  .binder-teaser-row {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .binder-example-row {
    flex-wrap: wrap;
  }

  .binder-teaser-cta {
    align-items: stretch;
  }

  .binder-teaser-cta .btn {
    width: auto;
  }
}

/* -----------------------------
   12d. CUSTOM BINDER REQUEST FORM (its own page)
------------------------------ */
.custom-binder-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 460px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-row label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
}

.form-row input[type="text"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row input[type="number"],
.form-row textarea {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.form-row textarea {
  resize: vertical;
}

.form-row input[type="file"] {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.field-hint {
  color: var(--text-faint);
  font-size: 0.75rem;
}

.binder-positioner {
  position: relative;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3 / 4;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  touch-action: none;
}

.binder-empty-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.78rem;
}

.binder-drag-image {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  border-radius: var(--radius-sm);
}

.binder-drag-image:active {
  cursor: grabbing;
}

.custom-binder-confirmation {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.custom-binder-confirmation h3 {
  font-family: var(--font-display);
  font-size: 1rem;
}

.custom-binder-confirmation dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 0.85rem;
}

.custom-binder-confirmation dt {
  color: var(--text-dim);
}

.custom-binder-confirmation dd {
  margin: 0;
}

/* -----------------------------
   13. PRODUCT DETAIL PAGE
------------------------------ */
.back-link {
  display: inline-block;
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 20px;
}

.back-link:hover {
  color: var(--text);
}

.product-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 36px;
  align-items: start;
}

.product-detail-media {
  aspect-ratio: 4 / 3;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Same reasoning as .product-tile-media img above — shows the whole
   photo, uncropped, whatever its real aspect ratio is. */
.product-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-detail-info h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 6px 0 14px;
}

/* The Variant/Rarity/Language/Condition breakdown on a single's own
   product page — see singleSpecListHTML() in script.js. Sits
   between the name and the description. */
.product-spec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 220px));
  gap: 10px 24px;
  margin-bottom: 18px;
}

.product-spec-row dt {
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}

.product-spec-row dd {
  font-size: 0.92rem;
  font-weight: 500;
}

.product-detail-desc {
  color: var(--text-dim);
  max-width: 480px;
  margin-bottom: 18px;
}

.product-detail-price {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.product-detail-note {
  color: var(--text-faint);
  font-size: 0.78rem;
  margin-top: 10px;
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-secondary {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
}

.btn-secondary:hover {
  border-color: var(--red);
}

.product-not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .product-detail-layout {
    grid-template-columns: 1fr;
  }

  .product-spec-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Rough interim responsive handling for the hero only — a full
   pass over every section happens later in the build. */
@media (max-width: 720px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
    padding-top: 96px;
  }

  .hero-featured {
    position: static;
    width: 160px;
    margin-bottom: 16px;
  }
}

/* -----------------------------
   14. LEARN PAGE (About Us + legal documents)
------------------------------ */
.about-us {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 640px;
}

.about-us h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.about-us p {
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.6;
}

.legal-docs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-docs h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.legal-doc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.legal-doc {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 4px 18px;
}

.legal-doc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
}

/* Hide the default disclosure triangle so we can draw our own
   (a plus/rotating chevron) via ::after below, consistent with
   the rest of the site's icon style. */
.legal-doc summary::-webkit-details-marker {
  display: none;
}

.legal-doc summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.legal-doc[open] summary::after {
  transform: rotate(-135deg);
}

.legal-doc-title {
  font-weight: 600;
  font-size: 0.92rem;
}

.legal-doc-updated {
  color: var(--text-faint);
  font-size: 0.76rem;
  white-space: nowrap;
}

.legal-doc-body {
  padding: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  margin-top: -1px;
  padding-top: 14px;
}

.legal-doc-body p {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* Terms & policies (renderLegalDocs in script.js): a draft notice,
   then the documents grouped under small headings, each one a
   collapsible panel with the text formatted from its .txt file. */
.legal-doc-list {
  gap: 22px;
}

.legal-draft-notice {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: rgba(242, 191, 44, 0.08);
  border: 1px solid rgba(242, 191, 44, 0.35);
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.6;
}

.legal-draft-notice strong {
  color: #f5d36b;
}

.legal-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-group-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.legal-doc {
  scroll-margin-top: 16px;
}

.legal-doc summary .legal-doc-title {
  margin-right: auto;
}

.legal-doc-tag {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f5d36b;
  background: rgba(242, 191, 44, 0.1);
  border: 1px solid rgba(242, 191, 44, 0.3);
}

.legal-doc-body ul,
.legal-doc-body ol {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.55;
}

.legal-doc-body ul { list-style: disc; }
.legal-doc-body ol { list-style: decimal; }

.legal-doc-body li::marker {
  color: var(--text-faint);
}

.legal-doc-body p.legal-lead {
  color: var(--text);
  font-weight: 600;
  margin-bottom: -4px;
}

.legal-doc-body p.legal-meta {
  color: var(--text-faint);
  font-size: 0.76rem;
}

.legal-pairs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  font-size: 0.85rem;
}

.legal-pairs div {
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  gap: 12px;
}

.legal-pairs dt {
  color: var(--text-faint);
  font-weight: 600;
}

.legal-pairs dd {
  margin: 0;
  color: var(--text);
}

.legal-blank {
  padding: 0 3px;
  border-radius: 4px;
  background: rgba(242, 191, 44, 0.18);
  color: #f5d36b;
  font-weight: 600;
}

/* -----------------------------
   15. STAFF HUB (staff.html — internal landing page)
------------------------------ */
.staff-notice {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  color: var(--text-dim);
  font-size: 0.85rem;
  max-width: 640px;
}

.staff-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.staff-tool-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.staff-tool-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}

.staff-tool-card-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
}

.staff-tool-card-desc {
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* -----------------------------
   16. CARD FINDER (card-finder.html — internal tool)
------------------------------ */
.card-finder-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.card-finder-form .form-row {
  flex: 1 1 200px;
}

.card-finder-form .btn {
  flex-shrink: 0;
}

.card-finder-form .field-hint {
  flex-basis: 100%;
  margin-top: -6px;
}

.card-finder-status {
  color: var(--text-dim);
  font-size: 0.88rem;
}

.card-finder-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
}

.card-finder-result {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
}

.card-finder-result:hover {
  border-color: var(--red);
}

.card-finder-result-media {
  aspect-ratio: 3 / 4;
  background: var(--panel-alt);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-finder-result-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-finder-result-name {
  font-size: 0.85rem;
  font-weight: 600;
}

.card-finder-result-set {
  color: var(--text-faint);
  font-size: 0.72rem;
}

.card-finder-snippet {
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-finder-snippet h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
}

.card-finder-snippet-meta {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-top: -8px;
}

.card-finder-snippet-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.card-finder-snippet-fields .form-row {
  flex: 1 1 160px;
}

.card-finder-snippet select {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.card-finder-code {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.card-finder-copy-status {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin-left: 8px;
}

.card-finder-debug {
  color: var(--text-faint);
  font-size: 0.78rem;
}

.card-finder-debug summary {
  cursor: pointer;
}

.card-finder-debug pre {
  margin-top: 10px;
  max-height: 260px;
  overflow: auto;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: 0.72rem;
  line-height: 1.5;
}

/* -----------------------------
   17. ADD LISTING (add-listing.html — internal tool)
------------------------------ */
.add-listing-connect {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.add-listing-connect .field-hint {
  flex: 1;
}

.add-listing-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.add-listing-form select {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.add-listing-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.add-listing-tcgdex-search {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-listing-search-row {
  display: flex;
  gap: 10px;
}

.add-listing-search-row input {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.add-listing-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.add-listing-checkbox input {
  width: 16px;
  height: 16px;
}

/* -----------------------------
   18. SYNC SINGLES (sync-singles.html — internal tool)
------------------------------ */
.sync-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sync-rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 760px;
}

.sync-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sync-row-label {
  color: var(--text-faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sync-row-current-name {
  font-weight: 600;
  font-size: 1rem;
}

.sync-row-current-meta {
  color: var(--text-dim);
  font-size: 0.82rem;
}

.sync-row-search {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sync-row-results {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sync-row-match {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  align-items: start;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
}

.sync-row-match-media {
  aspect-ratio: 3 / 4;
  background: var(--panel);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sync-row-match-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sync-row-match-name {
  font-weight: 600;
}

.sync-row-match-meta {
  color: var(--text-dim);
  font-size: 0.82rem;
  margin-bottom: 8px;
}

.sync-row-match-info select {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.sync-row-match-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  text-align: right;
}

@media (max-width: 640px) {
  .sync-row-match {
    grid-template-columns: 70px 1fr;
  }
  .sync-row-match-actions {
    grid-column: 1 / -1;
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
  }
}

/* -----------------------------
   19. PRICE CHECKER (price-checker.html — internal tool)
------------------------------ */
.price-checker-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 4px;
}

.price-checker-source {
  flex: 1 1 220px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.price-checker-source h3 {
  font-family: var(--font-display);
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.price-checker-currency {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 6px;
}

.price-checker-variant-label {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 12px;
  margin-bottom: 6px;
}

.price-checker-variant-label:first-of-type {
  margin-top: 0;
}

.price-checker-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 10px;
}

.price-checker-stats dt {
  color: var(--text-faint);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.price-checker-stats dd {
  font-weight: 700;
  font-size: 0.92rem;
}

.price-checker-updated {
  color: var(--text-faint);
  font-size: 0.72rem;
  margin-top: 12px;
}

.price-checker-empty {
  color: var(--text-dim);
  font-size: 0.9rem;
}

/* -----------------------------
   13. SINGLES PRODUCT PAGE
   See renderSingleDetail() in script.js. The page fills the window
   without scrolling: card info on the left, the card big in the
   middle (top to bottom), the Pokémon's info on the right with the
   price and buttons at the bottom.

   Background: a bright colour for the card's type, fading slightly
   deeper towards the bottom, with a big faint Poké Ball shape in the
   top-right corner. Each type's two colours are set just below —
   change them there.
------------------------------ */
.page-content-single {
  --type-top: #3a4a63;
  --type-bottom: #26324a;
  background: linear-gradient(180deg, var(--type-top) 0%, var(--type-bottom) 100%);
  color: #fff;
  overflow-x: hidden;
  /* Fits the window at normal sizes; on a small window it can scroll
     rather than cut anything off. */
  overflow-y: auto;
  scrollbar-width: none;
}

.page-content-single::-webkit-scrollbar {
  display: none;
}

.page-content-single.type-fire      { --type-top: #f9a54f; --type-bottom: #ec6f1f; }
.page-content-single.type-water     { --type-top: #76cffc; --type-bottom: #2f9fe8; }
.page-content-single.type-lightning { --type-top: #f8cc4c; --type-bottom: #eea514; }
.page-content-single.type-grass     { --type-top: #86d67f; --type-bottom: #3ea757; }
.page-content-single.type-psychic   { --type-top: #c890ea; --type-bottom: #9656d0; }
.page-content-single.type-fighting  { --type-top: #e2a26c; --type-bottom: #bb6431; }
.page-content-single.type-darkness  { --type-top: #557287; --type-bottom: #2a3a49; }
.page-content-single.type-metal     { --type-top: #b9c5cf; --type-bottom: #7e8e9c; }
.page-content-single.type-dragon    { --type-top: #d9b84e; --type-bottom: #a98322; }
.page-content-single.type-fairy     { --type-top: #f6a8d2; --type-bottom: #de68a9; }
.page-content-single.type-colorless { --type-top: #d3c7a8; --type-bottom: #a4966f; }

.page-content-single #product-detail {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

.sd-layout {
  flex: 1 1 auto;
  min-height: 0;
  container-type: size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(20px, 2.6cqw, 40px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

/* The faint Poké Ball in the top-right corner (an outline: ring,
   band and centre button), partly off the edge like the reference.
   It sits on the page itself, behind everything. */
.page-content-single {
  position: relative;
}

.sd-watermark {
  position: absolute;
  top: -170px;
  right: -170px;
  width: 560px;
  height: 560px;
  pointer-events: none;
  opacity: 0.15;
  z-index: 0;
}

.sd-watermark svg {
  width: 100%;
  height: 100%;
}

.sd-col {
  position: relative;
  z-index: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Nothing in the side columns gets squashed — on a short window the
   page scrolls a little instead. */
.sd-col > * {
  flex-shrink: 0;
}

/* ---- the card, big in the middle ---- */
/* As tall as the page allows, but never wider than about a third of
   the page, so the side columns keep room on narrower windows. */
.sd-card {
  position: relative;
  z-index: 1;
  align-self: center;
  height: min(100cqh, calc(34cqw * 88 / 63));
  aspect-ratio: 63 / 88;
}

.sd-card-art {
  width: 100%;
  height: 100%;
  border-radius: 4.8% / 3.4%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35), 0 6px 14px rgba(0, 0, 0, 0.2);
}

.sd-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Drag-to-tilt (initCardTilt in script.js). .sd-card gives the 3D
   depth; .sd-card-tilt is what turns. While you hold it, it follows
   your pointer instantly; let go and it springs back with a small
   bounce. The glare is a soft light spot that follows the pointer. */
.sd-card {
  perspective: 1100px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sd-card.is-tilting {
  cursor: grabbing;
}

.sd-card-tilt {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.sd-card.is-tilting .sd-card-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03);
  transition: transform 0.08s linear;
}

.sd-card-art img {
  -webkit-user-drag: none;
  pointer-events: none;
}

.sd-card-glare {
  position: absolute;
  inset: 0;
  border-radius: 4.8% / 3.4%;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy),
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.sd-card.is-tilting .sd-card-glare {
  opacity: 1;
  transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sd-card-tilt {
    transition: transform 0.3s ease;
  }
}

/* ---- shared bits ---- */
.sd-label {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.sd-value {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}

.sd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sd-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  color: #fff;
}

.sd-pill-solid {
  background: #fff;
  color: var(--type-bottom);
  text-shadow: none;
}

/* ---- left: the card's details ---- */
.sd-back {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 18px;
}

.sd-back:hover {
  color: #fff;
  text-decoration: underline;
}

.sd-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}

/* One line only — see fitNameToOneLine() in script.js, which shrinks
   the text to fit. */
.sd-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Set · Number under the name, same style as on the Shop tiles. */
.sd-setline {
  margin-top: 4px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sd-plates {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sd-plate {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sd-plate .sd-value {
  overflow-wrap: anywhere;
}

.sd-plate-wide {
  grid-column: 1 / -1;
}

.sd-cond-abbr {
  font-size: 0.7rem;
  opacity: 0.8;
  margin-left: 4px;
}

/* Condition meter: the five grades, the card's own one lit up. */
.sd-meter {
  margin-top: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}

.sd-meter-step {
  text-align: center;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 3px 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.12);
}

.sd-meter-step.is-current {
  background: #fff;
  color: var(--type-bottom);
  text-shadow: none;
}

/* ---- right: the Pokémon ---- */
.sd-dexno {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 30px;
}

.sd-species {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
}

.sd-genus {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 2px 0 10px;
}

.sd-facts {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}

.sd-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.sd-entry {
  margin-top: 20px;
}

.sd-entry p {
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #fff;
}

/* Price + buttons, pinned to the bottom right. */
.sd-buy {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.sd-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 800;
}

.sd-buy-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.sd-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.sd-btn svg {
  width: 18px;
  height: 18px;
}

.sd-btn-wishlist {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
}

.sd-btn-wishlist:hover {
  background: rgba(255, 255, 255, 0.26);
}

.sd-btn-cart {
  color: var(--type-bottom);
  background: #fff;
  border: 1.5px solid #fff;
  text-shadow: none;
}

.sd-btn-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Add Listing: the "About the Pokémon" group of fields. */
.add-listing-pokemon {
  margin: 8px 0 4px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.add-listing-pokemon legend {
  padding: 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
}


/* -----------------------------
   14. MANAGE LISTINGS (staff tool)
------------------------------ */
.manage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.manage-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 820px;
}

.manage-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.manage-row-media {
  flex: 0 0 40px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel-alt);
}

.manage-row-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.manage-row-media .product-photo-placeholder {
  font-size: 0;
}

.manage-row-info {
  flex: 1 1 auto;
  min-width: 0;
}

.manage-row-name {
  font-weight: 700;
  color: var(--text);
}

.manage-row-name:hover {
  color: var(--red);
}

.manage-row-meta {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.btn.is-armed {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}


/* -----------------------------
   15. ACCOUNT PAGE (Log in / Sign up)
------------------------------ */
.page-content-account {
  align-items: center;
  justify-content: center;
}

.account-panel {
  width: 100%;
  max-width: 420px;
  padding: 26px 28px 28px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.account-tab {
  padding: 9px 0;
  border: none;
  border-radius: 9px;
  background: none;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.account-tab.is-active {
  background: var(--red);
  color: #fff;
}

.account-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-form[hidden] {
  display: none;
}

.account-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

.account-sub {
  margin-top: -8px;
  font-size: 0.88rem;
  color: var(--text-dim);
}

.account-error {
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.85rem;
  color: #ffd9dc;
  background: rgba(220, 31, 47, 0.18);
  border: 1px solid rgba(220, 31, 47, 0.45);
}

.account-submit {
  justify-content: center;
  width: 100%;
}

.account-switch {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-dim);
}

.account-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--red-bright);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.account-link:hover {
  text-decoration: underline;
}

.account-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-details div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.account-details dt {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.account-details dd {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.field-hint.is-good { color: #6fdc97; }
.field-hint.is-bad { color: #ff8f98; }

.account-username-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-username-row .account-link {
  font-size: 0.8rem;
}

.account-username-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.account-username-form[hidden] {
  display: none;
}

.account-username-form input {
  flex: 1 1 140px;
  min-width: 0;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.account-username-form .btn {
  padding: 8px 14px;
}

.account-username-form .account-error {
  flex-basis: 100%;
}

.account-tag {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 0.04em;
}

.account-email-row dd {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.account-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.account-badge.is-good {
  color: #0b2a17;
  background: #6fdc97;
}

.account-badge.is-waiting {
  color: #3a2a00;
  background: var(--gold);
}

.account-verify {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 200, 77, 0.35);
  background: rgba(255, 200, 77, 0.08);
  font-size: 0.85rem;
  color: var(--text-dim);
}

.account-verify[hidden] {
  display: none;
}

.account-verify .account-link {
  margin-top: 4px;
  font-size: 0.85rem;
}

.account-verify-note {
  margin-top: 6px;
  font-size: 0.8rem;
  color: var(--text);
}

.account-details .account-verify {
  display: block;
}

.account-details .account-verify[hidden] {
  display: none;
}

/* -----------------------------
   16. PROFILE PAGE (profile.html)
   Header card (picture, username, Trainer ID, member since), then
   achievements on the left and stats (+ your private account panel)
   on the right.
------------------------------ */
.page-content-profile {
  gap: 20px;
}

#profile-root {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-notice {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.88rem;
  color: #d9f7e4;
  background: rgba(62, 207, 116, 0.14);
  border: 1px solid rgba(62, 207, 116, 0.4);
}

.profile-notice[hidden] {
  display: none;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 12% 50%, rgba(220, 31, 47, 0.22), transparent 55%),
    linear-gradient(135deg, #1a2130 0%, #121822 100%);
}

.profile-avatar-wrap {
  position: relative;
  flex: 0 0 auto;
}

.profile-avatar {
  display: block;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.45);
}

.profile-avatar-edit {
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--red);
  background: #161c26;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
}

.profile-avatar-edit:hover {
  background: var(--red);
}

.profile-identity {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-name {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 2.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
  overflow-wrap: anywhere;
}

.profile-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
}

.profile-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  cursor: pointer;
}

.profile-tag:hover {
  border-color: var(--red);
}

.profile-tag-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.profile-tag-value {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.profile-since {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Picture picker (owner only) */
.profile-avatar-picker {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.profile-avatar-picker[hidden] {
  display: none;
}

.profile-avatar-picker .account-link {
  align-self: flex-start;
}

.profile-avatar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 10px;
  max-width: 720px;
}

.profile-avatar-choice {
  padding: 4px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.profile-avatar-choice img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.profile-avatar-choice:hover {
  transform: scale(1.06);
}

.profile-avatar-choice.is-current {
  border-color: var(--red);
}

/* Columns */
.profile-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 20px;
  align-items: start;
}

.profile-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-panel {
  padding: 18px 20px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.profile-panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.profile-count,
.profile-private-note {
  font-size: 0.78rem;
  color: var(--text-faint);
}

.profile-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.profile-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

/* Achievements */
.profile-achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.achievement {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.55;
}

.achievement.is-earned {
  opacity: 1;
  background: rgba(255, 200, 77, 0.07);
  border-color: rgba(255, 200, 77, 0.35);
}

.achievement-icon {
  flex: 0 0 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.06);
}

.achievement-icon svg,
.achievement-icon .icon {
  width: 20px;
  height: 20px;
}

.achievement.is-earned .achievement-icon {
  color: #3a2a00;
  background: radial-gradient(circle at 35% 30%, #ffe08a, var(--gold) 60%, #c98a14);
  box-shadow: 0 0 12px rgba(255, 200, 77, 0.35);
}

.achievement-text {
  min-width: 0;
}

.achievement-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.achievement-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.achievement-when {
  margin-top: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.achievement.is-earned .achievement-when {
  color: var(--gold);
}

/* Stats */
.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-stat-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
}

.profile-stat-label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.profile-private .btn {
  align-self: flex-start;
}

.profile-missing {
  max-width: 420px;
  margin: 40px auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profile-missing h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
}

@media (max-width: 1100px) {
  .profile-columns {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------
   17. SETTINGS PAGE (placeholder until we decide what goes on it)
------------------------------ */
.settings-placeholder {
  max-width: 620px;
  padding: 28px 30px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.settings-placeholder h1 {
  margin: 0 0 8px;
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 1.6rem;
  color: var(--text);
}

.settings-placeholder p {
  margin: 0;
  color: var(--text-dim);
  line-height: 1.55;
}

/* -----------------------------
   18. MYSTERY PACK TILES (renderPackTile in script.js)
   Three across the full width of the row, 65% as tall as the
   Singles tiles (--single-tile-h is measured by syncPackTileHeight). Left:
   the pack on a glow in its tier colour; right: name, card value
   range and price. Below ~900px wide they stack one per line.
------------------------------ */
/* On the Shop page only the first three packs show (one row) —
   any extra rows get zero height and stay hidden, like the Singles
   row. "Show all" lists every pack. */
.product-row.product-row-packs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto;
  grid-auto-rows: 0;
  row-gap: 0;
  max-height: none;
}

/* The "Show all Mystery Packs" page uses the same three-across grid. */
.product-grid.product-grid-packs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .product-grid.product-grid-packs,
  .product-row.product-row-packs {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked: the first three packs, one per line. */
  .product-row.product-row-packs {
    grid-template-rows: repeat(3, auto);
    row-gap: 18px;
  }
}

.page-content .pack-tile {
  position: relative;
  /* 65% of a Singles tile's height */
  height: calc(var(--single-tile-h, 380px) * 0.65);
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  gap: 16px;
  padding: 10px 14px 10px 10px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #f3f3f7;
  overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.page-content .pack-tile:hover,
.page-content .pack-tile:focus-within {
  border-color: var(--red);
  background: #1a2130;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.pack-tile-art {
  position: relative;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 55%, var(--tier-glow) 0%, transparent 68%),
    #0b121b;
  overflow: hidden;
}

.pack-tile-art img {
  height: 86%;
  max-width: 90%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}

.pack-tile:hover .pack-tile-art img {
  transform: translateY(-4px) rotate(-3deg) scale(1.03);
}

.pack-tile-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

.pack-tile-kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tier-accent);
}

.pack-tile-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.15;
}

.pack-tile-range {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pack-tile-range-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a90a0;
}

/* Can wrap onto two lines on narrow tiles — but only at the dash,
   never inside a number or before "kr". */
.pack-tile-range-value {
  font-size: 0.98rem;
  font-weight: 700;
}

.pack-tile-price {
  margin-top: 4px;
  font-size: 1.5rem;
  font-weight: 800;
}

.pack-tile .tile-action-cart {
  top: 18px;
  right: 18px;
}

.pack-tile:hover .tile-action,
.pack-tile:focus-within .tile-action {
  opacity: 1;
  transform: scale(1);
}

@media (hover: none) {
  .pack-tile .tile-action {
    opacity: 1;
    transform: scale(1);
  }
}

/* -----------------------------
   19. MYSTERY PACK PAGE (renderPackDetail in script.js)
   Uses the Singles page's layout and background style; only the
   colours change per pack. --type-top / --type-bottom are the two
   background colours, --wm-colour and --wm-opacity the faint ball
   in the corner. Change them here.
------------------------------ */
.page-content-pack.pack-page-bronze { --type-top: #f26262; --type-bottom: #cf2222; --wm-colour: #ffffff; --wm-opacity: 0.18; }
.page-content-pack.pack-page-silver { --type-top: #5a82ff; --type-bottom: #2140d2; --wm-colour: #ff3b3b; --wm-opacity: 0.6; }
.page-content-pack.pack-page-gold   { --type-top: #3b3b3d; --type-bottom: #121214; --wm-colour: #f2df3f; --wm-opacity: 0.35; }

.pack-watermark {
  color: var(--wm-colour, #fff);
  opacity: var(--wm-opacity, 0.15);
}

.pd-kicker {
  margin-top: 18px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.page-content-pack.pack-page-gold .pd-kicker {
  color: #f2df3f;
}

/* ---- the 6 x 6 grid of numbered packs in the middle ---- */
.pd-grid {
  position: relative;
  z-index: 1;
  align-self: center;
  /* Six packs across, six down: roughly the shape of one pack. */
  aspect-ratio: 0.62;
  height: min(98cqh, calc(40cqw / 0.62));
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: 1.4%;
  padding: 1.6%;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.pd-slot {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease, filter 0.2s ease;
}

.pd-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
}

/* The number, in the ball's white centre button. */
.pd-slot-number {
  position: absolute;
  left: 50%;
  top: 46.7%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(0.6rem, 1.5cqh, 1.05rem);
  line-height: 1;
  color: #111;
  text-shadow: none;
  pointer-events: none;
}

.pd-slot:not(:disabled):hover {
  transform: translateY(-4px) rotate(-3deg);
}

.pd-slot:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

/* Picked: lifted, white glow, and a tick. */
.pd-slot.is-selected {
  transform: translateY(-4px) scale(1.06);
}

.pd-slot.is-selected img {
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 0 6px rgba(255, 255, 255, 0.95));
}

.pd-slot.is-selected::after {
  content: "✓";
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: #1a8f3c;
  font-size: 0.75rem;
  font-weight: 900;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

/* Sold: grey, faded, can't be clicked. */
.pd-slot.is-sold {
  opacity: 0.25;
  filter: grayscale(1);
  cursor: not-allowed;
}

/* ---- left column: the list of possible cards ---- */
.pd-cards-col {
  min-height: 0;
}

.pd-cards-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pd-cards-count {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.pd-cards {
  flex: 1 1 auto !important;
  flex-shrink: 1 !important;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 4px 6px 12px 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 14px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* One possible card: the picture big, then name, set and value. */
.pd-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pd-card-art {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  padding: 0;
  border: none;
  border-radius: 4.8% / 3.4%;
  overflow: visible;
  background: rgba(0, 0, 0, 0.18);
  cursor: zoom-in;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-card-art:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.pd-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4.8% / 3.4%;
}

.pd-card-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

/* How many of this card are in the pack, as a badge on the picture. */
.pd-card-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 0.68rem;
  font-weight: 900;
  text-shadow: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.pd-card-name {
  margin-top: 6px;
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The set is in the big view's name line and the list is tidier
   without it here. */
.pd-card-set {
  display: none;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-card-value {
  margin-top: 1px;
  font-size: 0.74rem;
  opacity: 0.9;
  font-weight: 800;
}

/* Big view of one card (showCardPreview in script.js). */
.card-preview {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(5, 8, 14, 0.8);
  backdrop-filter: blur(4px);
  cursor: zoom-out;
  animation: card-preview-in 0.18s ease;
}

.card-preview img {
  height: min(78vh, 640px);
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 18px / 13px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.card-preview p {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

@keyframes card-preview-in {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}

.pd-cards-empty {
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ---- right column: pack info at the top, buying at the bottom ---- */
.page-content-pack .sd-right {
  align-items: flex-end;
  text-align: right;
}

.page-content-pack .sd-right .pd-kicker {
  margin-top: 0;
}

.page-content-pack .sd-right .sd-plates {
  width: min(100%, 300px);
  text-align: left;
}

.pd-how {
  margin-top: 14px;
  max-width: 300px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* Small link to the Mystery Products terms (Learn page). */
.pd-terms-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease;
}

.pd-terms-link:hover {
  background: rgba(255, 255, 255, 0.22);
}

.pd-terms-link svg {
  width: 14px;
  height: 14px;
}

.pd-left-count {
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
}

.pd-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.pd-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pd-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
}

.pd-dot.is-selected {
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 2px #fff;
}

.pd-dot.is-sold {
  background: rgba(0, 0, 0, 0.35);
}

.pd-picked {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.pd-picked-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 280px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
}

.pd-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 0.78rem;
  font-weight: 800;
  text-shadow: none;
}

.pd-unit {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: -8px;
}

.sd-btn-cart:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Staff: Pack Bags tool */
/* Grid on the left, the editor for the picked number beside it. */
.pack-bags-panel {
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 420px);
  align-items: start;
  gap: 12px 20px;
  margin-bottom: 32px;
}

.pack-bags-panel > .pack-bags-head,
.pack-bags-panel > .card-finder-status {
  grid-column: 1 / -1;
}

@media (max-width: 1100px) {
  .pack-bags-panel {
    grid-template-columns: minmax(0, 440px);
  }
}

.pack-bags-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pack-bags-head h2 {
  font-size: 1.05rem;
}

.pack-bags-count {
  margin-right: auto;
  color: var(--text-faint);
  font-size: 0.85rem;
}

.pack-bags-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  container-type: inline-size;
}

.pack-bags-grid .pd-slot {
  aspect-ratio: 300 / 509;
}

.pack-bags-grid .pd-slot-number {
  font-size: clamp(0.6rem, 2.2cqw, 1rem);
}

.pack-bags-grid .pd-slot.is-sold {
  cursor: pointer;
}

/* No card set yet: dashed outline. Being edited: red outline. */
.pack-bags-grid .pd-slot.is-empty {
  outline: 1.5px dashed rgba(255, 255, 255, 0.35);
  outline-offset: 2px;
  border-radius: 6px;
}

.pack-bags-grid .pd-slot.is-editing {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

.pack-slot-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--panel);
  border: 1px solid var(--border);
}

.pack-slot-editor h3 {
  font-size: 0.95rem;
}

.pack-slot-editor-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* The pack, big in the middle (same sizing idea as the card). */
.pd-pack {
  position: relative;
  z-index: 1;
  align-self: center;
  height: min(96cqh, calc(34cqw * 883 / 520));
  aspect-ratio: 520 / 883;
}

.pd-pack img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.4));
}

/* Pack names may wrap onto two lines (the grid leaves the left
   column narrower than on the Singles page). */
.page-content-pack .sd-name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.1;
}


/* -----------------------------
   20. OPEN PACKS + MY VAULT (initOpenPacksPage / initVaultPage)
------------------------------ */
.pd-test-buy {
  align-self: flex-end;
  padding: 7px 14px;
  border-radius: 10px;
  border: 1.5px dashed rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.pd-test-buy:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pd-test-note {
  max-width: 280px;
  font-size: 0.78rem;
  color: #fff;
  text-align: right;
}

.vault-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}

.vault-section h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.vault-lead {
  max-width: 640px;
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.55;
}

.vault-lead a,
.vault-banner {
  color: #ff6b76;
  font-weight: 700;
}

.vault-banner {
  display: block;
  margin-bottom: 24px;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  background: rgba(220, 31, 47, 0.1);
  border: 1px solid rgba(220, 31, 47, 0.4);
  text-decoration: none;
}

.vault-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  color: var(--text-dim);
}

.vault-pack-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.vault-pack {
  display: flex;
  gap: 16px;
  padding: 14px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--border);
}

.vault-pack.is-new {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 8px 22px rgba(220, 31, 47, 0.18);
}

.vault-pack-art {
  position: relative;
  flex-shrink: 0;
  width: 72px;
  aspect-ratio: 300 / 509;
}

.vault-pack-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4));
}

.vault-pack-art .pd-slot-number {
  font-size: 0.8rem;
}

.vault-pack-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.vault-pack-name {
  font-weight: 800;
  font-size: 1rem;
}

.vault-pack-number {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.vault-pack-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.vault-pack-buttons .btn {
  padding: 8px 14px;
  font-size: 0.82rem;
}

.vault-pack-note {
  color: var(--text-faint);
  font-size: 0.76rem;
  line-height: 1.45;
}

.vault-test-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: middle;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #f5d36b;
  background: rgba(242, 191, 44, 0.12);
  border: 1px solid rgba(242, 191, 44, 0.35);
}

.vault-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 18px 14px;
}

.vault-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vault-card .pd-card-art {
  background: var(--panel);
}

.vault-card-name {
  margin-top: 8px;
  font-weight: 800;
  font-size: 0.88rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-card-sub {
  font-size: 0.74rem;
  color: var(--text-dim);
}


/* -----------------------------
   21. PACK OPENING (pack-opening.js)
   Full-screen stage. Layers from back to front: sky (dragon), the
   back canvas, the pack + card, the front canvas, the white flash,
   then hint / buttons / card info.
------------------------------ */
html.po-open,
html.po-open body {
  overflow: hidden;
}

.po {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  background: radial-gradient(ellipse at 50% 40%, #1b2536 0%, #0a0f18 70%);
  color: #fff;
  font-family: var(--font-body);
}

.po-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
}

.po-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.po-fx-back { z-index: 1; }
.po-stage { position: absolute; inset: 0; z-index: 2; }
.po-fx-front { z-index: 3; }

.po-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: #fff;
}

/* The pack, big in the middle. */
.po-pack {
  position: absolute;
  left: 50%;
  top: 50%;
  height: min(72vh, 600px);
  aspect-ratio: 300 / 509;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
}

.po-pack.is-torn {
  cursor: default;
}

.po-pack-body,
.po-pack-top {
  position: absolute;
  inset: 0;
}

.po-pack-body img,
.po-pack-top img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}

.po-pack-top {
  transition: transform 0.08s linear;
}

.po-pack-number {
  position: absolute;
  left: 50%;
  top: 46.7%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4.2vh, 2.4rem);
  color: #111;
  pointer-events: none;
}

/* The white torn edge while tearing. */
.po-tear-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.po-tear-line polyline {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.9));
}

/* "Tear here": a dashed line along the top with a light running along it. */
.po-tear-zone {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 11.5%;
  height: 0;
  border-top: 2px dashed rgba(255, 255, 255, 0.75);
  pointer-events: none;
}

.po-tear-zone::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.8);
  animation: po-tear-run 1.6s ease-in-out infinite;
}

@keyframes po-tear-run {
  0% { left: 0; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: calc(100% - 12px); opacity: 0; }
}

.po-pack.is-torn .po-tear-zone {
  display: none;
}

/* The card: faded copy underneath, the real card on top of it. */
.po-card {
  position: absolute;
  left: 50%;
  top: 44%;
  height: min(58vh, 480px);
  aspect-ratio: 63 / 88;
  transform: translate(-50%, -50%);
}

/* Tilting the revealed card (enableTilt in pack-opening.js). */
.po-card {
  perspective: 1100px;
}

.po-card-tilt {
  --rx: 0deg;
  --ry: 0deg;
  --gx: 50%;
  --gy: 50%;
  position: absolute;
  inset: 0;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.po-card.is-tiltable {
  cursor: grab;
  touch-action: none;
}

.po-card.is-tilting {
  cursor: grabbing;
}

.po-card.is-tilting .po-card-tilt {
  transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(1.03);
  transition: transform 0.08s linear;
}

.po-card-glare {
  position: absolute;
  inset: 0;
  border-radius: 4.8% / 3.4%;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0) 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.po-card.is-tilting .po-card-glare {
  opacity: 1;
  transition: opacity 0.15s ease;
}

.po-card-real {
  pointer-events: none;
  -webkit-user-drag: none;
}

.po-card-faded,
.po-card-real {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4.8% / 3.4%;
}

/* The "faded" card: just a card shape in the type's colour, with a
   bold outline and a moving shine — you can't tell which card it is. */
.po-card-faded {
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%) 0 0 / 250% 100%,
    radial-gradient(ellipse at 50% 40%, rgba(255, 255, 255, 0.35), transparent 70%),
    var(--po-colour, #ccc);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 50px 10px var(--po-colour, #fff);
  animation: po-sil-shine 1.4s linear infinite;
}

@keyframes po-sil-shine {
  from { background-position: 120% 0, 0 0, 0 0; }
  to { background-position: -120% 0, 0 0, 0 0; }
}

.po-card-real {
  opacity: 0;
  transition: opacity var(--reveal-ms, 900ms) ease;
}

.po-card.is-revealed .po-card-real {
  opacity: 1;
}

/* Revealed from left to right, following something across the card. */
.po-card.is-wiping .po-card-real {
  opacity: 1;
  transition: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(var(--wipe, 0%) - 14%), transparent var(--wipe, 0%));
  mask-image: linear-gradient(to right, #000 calc(var(--wipe, 0%) - 14%), transparent var(--wipe, 0%));
}

.po-card-blank {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: #1c2330;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
}

.po-card.po-glow-fire .po-card-real {
  box-shadow: 0 0 50px 8px rgba(255, 120, 30, 0.6);
}

.po-card.po-glow-lightning .po-card-real {
  box-shadow: 0 0 50px 8px rgba(255, 225, 80, 0.55);
}

.po-card.po-glow-psychic .po-card-real {
  box-shadow: 0 0 50px 8px rgba(200, 140, 255, 0.5);
}

.po-card.po-glow-metal .po-card-real {
  box-shadow: 0 0 40px 6px rgba(210, 225, 240, 0.35);
}

.po-card.po-glow-dragon .po-card-real {
  box-shadow: 0 0 50px 8px rgba(255, 210, 110, 0.5);
}

/* Text and buttons over everything. */
.po-hint,
.po-tear-button,
.po-skip,
.po-info {
  position: absolute;
  z-index: 5;
}

.po-hint {
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  transition: opacity 0.3s ease;
}

.po-hint.is-hidden {
  opacity: 0;
}

.po-tear-button {
  bottom: 4vh;
  left: 50%;
  transform: translateX(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
}

.po-skip {
  top: 20px;
  right: 24px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

.po-info {
  left: 50%;
  bottom: 5vh;
  transform: translate(-50%, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* The text panel under the card takes the look of the type's scene:
   its colours come from --panel-top / --panel-bottom / --panel-edge,
   set per type just below. */
.po-info {
  --panel-top: rgba(20, 26, 38, 0.9);
  --panel-bottom: rgba(8, 12, 20, 0.9);
  --panel-edge: rgba(255, 255, 255, 0.18);
  --panel-text: #fff;
  --panel-glow: rgba(255, 255, 255, 0.15);
  padding: 14px 26px 16px;
  border-radius: 18px;
  color: var(--panel-text);
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--panel-edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 0 30px var(--panel-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

.po-info > :not(.po-info-deco) {
  position: relative;
}

.po-info-deco {
  position: absolute;
  pointer-events: none;
}

.po-type-grass .po-info     { --panel-top: rgba(26, 78, 30, 0.95); --panel-bottom: rgba(8, 34, 12, 0.95); --panel-edge: rgba(140, 230, 110, 0.45); --panel-glow: rgba(110, 220, 90, 0.3); }
.po-type-fire .po-info      { --panel-top: rgba(52, 20, 12, 0.95); --panel-bottom: rgba(18, 6, 4, 0.96); --panel-edge: rgba(255, 140, 40, 0.6); --panel-glow: rgba(255, 110, 20, 0.45); }
.po-type-water .po-info     { --panel-top: rgba(18, 82, 130, 0.94); --panel-bottom: rgba(4, 26, 52, 0.96); --panel-edge: rgba(140, 215, 245, 0.5); --panel-glow: rgba(60, 170, 230, 0.35); }
.po-type-lightning .po-info { --panel-top: rgba(58, 64, 86, 0.95); --panel-bottom: rgba(16, 18, 30, 0.97); --panel-edge: rgba(255, 225, 80, 0.55); --panel-glow: rgba(200, 210, 255, 0.25); }
.po-type-psychic .po-info   { --panel-top: rgba(224, 206, 170, 0.97); --panel-bottom: rgba(186, 160, 120, 0.97); --panel-edge: #5c3a1e; --panel-glow: rgba(255, 190, 110, 0.3); --panel-text: #3a2414; border-width: 3px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55), 0 0 30px var(--panel-glow), inset 0 0 0 2px rgba(214, 170, 90, 0.7); }
.po-type-fighting .po-info  { --panel-top: rgba(118, 98, 80, 0.97); --panel-bottom: rgba(56, 44, 34, 0.97); --panel-edge: rgba(200, 170, 135, 0.55); --panel-glow: rgba(0, 0, 0, 0.3); }
.po-type-darkness .po-info  { --panel-top: rgba(30, 12, 45, 0.96); --panel-bottom: rgba(4, 2, 10, 0.96); --panel-edge: transparent; --panel-glow: rgba(140, 50, 200, 0.25); }
/* Darkness: no hard edge — smoke drifts round the box (drawn in pack-opening.js) */
.po-type-darkness .po-info { background: radial-gradient(ellipse at 50% 45%, rgba(44, 20, 66, 0.95) 30%, rgba(14, 5, 24, 0.92) 100%); box-shadow: 0 0 40px 10px rgba(6, 2, 10, 0.8); }
.po-type-metal .po-info     { --panel-top: rgba(96, 106, 118, 0.97); --panel-bottom: rgba(34, 39, 47, 0.97); --panel-edge: rgba(210, 220, 230, 0.6); --panel-glow: rgba(0, 0, 0, 0.3); border-width: 2px; border-radius: 6px; }
.po-type-dragon .po-info    { --panel-top: rgba(40, 92, 180, 0.94); --panel-bottom: rgba(88, 140, 210, 0.94); --panel-edge: rgba(255, 236, 190, 0.7); --panel-glow: rgba(255, 230, 170, 0.35); }
.po-type-fairy .po-info     { --panel-top: rgba(255, 205, 236, 0.95); --panel-bottom: rgba(195, 228, 255, 0.95); --panel-edge: rgba(255, 150, 210, 0.7); --panel-glow: rgba(255, 160, 215, 0.45); --panel-text: #5a2450; }
.po-type-colorless .po-info { --panel-top: rgba(250, 250, 253, 0.96); --panel-bottom: rgba(210, 214, 226, 0.96); --panel-edge: rgba(255, 255, 255, 0.9); --panel-glow: rgba(255, 255, 255, 0.5); --panel-text: #2b2f3a; }
.po-type-trainer .po-info   { --panel-top: rgba(150, 110, 25, 0.95); --panel-bottom: rgba(60, 40, 5, 0.95); --panel-edge: rgba(255, 216, 107, 0.6); --panel-glow: rgba(255, 210, 100, 0.35); }

/* The button takes the type's colour too. */
.po-info .po-close {
  background: var(--panel-btn, var(--red));
  color: var(--panel-btn-text, #fff);
  box-shadow: 0 4px 14px var(--panel-glow);
}
.po-type-grass .po-info     { --panel-btn: linear-gradient(180deg, #5cc94a, #2f8f2a); }
.po-type-fire .po-info      { --panel-btn: linear-gradient(180deg, #ff9a2a, #e0450a); }
.po-type-water .po-info     { --panel-btn: linear-gradient(180deg, #5fb4ff, #1f6fd8); }
.po-type-lightning .po-info { --panel-btn: linear-gradient(180deg, #ffe25a, #f0b400); --panel-btn-text: #2a2200; }
.po-type-psychic .po-info   { --panel-btn: linear-gradient(180deg, #b3212e, #6e0f18); }
.po-type-fighting .po-info  { --panel-btn: linear-gradient(180deg, #d98a4a, #9a5222); }
.po-type-darkness .po-info  { --panel-btn: linear-gradient(180deg, #8a4fc8, #4a1f78); }
.po-type-metal .po-info     { --panel-btn: linear-gradient(180deg, #c9d2db, #7e8e9c); --panel-btn-text: #1e242c; }
.po-type-dragon .po-info    { --panel-btn: linear-gradient(180deg, #ffd36b, #d69a1c); --panel-btn-text: #2e2000; }
.po-type-fairy .po-info     { --panel-btn: linear-gradient(180deg, #ff9fd0, #ef5fae); }
.po-type-colorless .po-info { --panel-btn: linear-gradient(180deg, #ffffff, #c9ceda); --panel-btn-text: #2b2f3a; }
.po-type-trainer .po-info   { --panel-btn: linear-gradient(180deg, #ffd86b, #d6a02a); --panel-btn-text: #2e2000; }

.po-type-fairy .po-name, .po-type-colorless .po-name, .po-type-psychic .po-name,
.po-type-fairy .po-sub, .po-type-colorless .po-sub, .po-type-psychic .po-sub {
  color: var(--panel-text);
  text-shadow: none;
}

.po-info.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

.po-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.po-sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: 8px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* Opening Preview (staff) */
.preview-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.preview-row .sd-label {
  width: 50px;
  color: var(--text-faint);
}

.jump-chip.is-active {
  border-color: var(--red);
  color: #fff;
}

/* Fire reveal: the cover burning away (drawn on this canvas). */
.po-burn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 4.8% / 3.4%;
  pointer-events: none;
}

/* Pack Bags: card search results inside the editor */
.pack-slot-results {
  max-height: 320px;
  overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

/* =========================================================
   22. HEAVEN — the special opening for the top card of a pack's pool
   ========================================================= */
.po-card.po-heaven-charge .po-card-faded {
  animation: po-sil-shine 1.4s linear infinite, po-heaven-pulse 0.9s ease-in-out infinite;
}

@keyframes po-heaven-pulse {
  0%, 100% { box-shadow: 0 0 50px 10px rgba(255, 230, 150, 0.8); filter: brightness(1.1); }
  50% { box-shadow: 0 0 110px 30px rgba(255, 240, 190, 1); filter: brightness(1.3); }
}

.po-card.po-glow-heaven .po-card-real {
  box-shadow: 0 0 60px 14px rgba(255, 226, 140, 0.7), 0 0 0 2px rgba(255, 236, 170, 0.9);
}

.po-type-heaven .po-info {
  --panel-top: rgba(255, 253, 245, 0.97);
  --panel-bottom: rgba(246, 232, 196, 0.97);
  --panel-edge: #c9972e;
  --panel-glow: rgba(255, 214, 110, 0.55);
  --panel-text: #5a3d0c;
  --panel-btn: linear-gradient(180deg, #ffe49a, #d59b2c);
  --panel-btn-text: #3a2600;
  border-width: 2px;
  box-shadow: 0 10px 30px rgba(120, 90, 20, 0.35), 0 0 40px var(--panel-glow), inset 0 0 0 3px rgba(255, 255, 255, 0.8), inset 0 0 0 4px rgba(214, 170, 70, 0.6);
}

/* a slow shine sweeping over the panel */
.po-type-heaven .po-info::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, 0.65) 50%, transparent 60%) 0 0 / 250% 100%;
  animation: po-heaven-shine 3.2s ease-in-out infinite;
}

@keyframes po-heaven-shine {
  from { background-position: 130% 0; }
  to { background-position: -130% 0; }
}

.po-type-heaven .po-name,
.po-type-heaven .po-sub {
  color: var(--panel-text);
  text-shadow: none;
}

.po-top-tag {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b07d14;
}

/* Pack Bags: the most valuable card in the pool */
.pack-bags-grid .pd-slot.is-top {
  position: relative;
  outline: 2px solid #e2b33c;
  outline-offset: 1px;
}

.pack-bags-grid .pd-slot.is-top::after {
  content: "★";
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 0.8rem;
  color: #f1c24d;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
}

.pack-slot-editor .field-hint {
  grid-column: 1 / -1;
}

/* =========================================================
   23. SEALED PRODUCTS + ACCESSORIES (renderBoxTile / renderBoxDetail)
   ========================================================= */

/* ---- the tile: the Singles tile's dark panel, a square photo area
   with a soft glow in the product's own colour (--tile-colour). ---- */
.page-content .box-tile {
  --tile-colour: #5b6f96;
}

.page-content .box-tile:hover,
.page-content .box-tile:focus-within {
  border-color: var(--tile-colour);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35), 0 0 22px color-mix(in srgb, var(--tile-colour) 35%, transparent);
}

.box-tile-media {
  --zoom: 1;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--tile-colour) 55%, transparent) 0%, color-mix(in srgb, var(--tile-colour) 18%, transparent) 45%, transparent 72%),
    #121822;
}

.box-tile-media img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  transform: scale(var(--zoom));
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease;
}

.box-tile:hover .box-tile-media img {
  transform: scale(calc(var(--zoom) * 1.04));
}

.box-tile .tile-action { border-color: var(--tile-colour); }
.box-tile .tile-action:hover,
.box-tile .tile-action:focus-visible { background: var(--tile-colour); }

.box-tile-name {
  margin-top: 8px;
  -webkit-line-clamp: 1;
}

.box-tile-kind {
  font-size: 0.75rem;
  color: var(--text-faint);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- the Accessories page: under-category buttons ---- */
.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -4px 0 18px;
}

/* ---- the product page ---- */
.page-content-single.page-content-box {
  --type-top: #1e283b;
  --type-bottom: #10151f;
  --accent: #5b6f96;
}

.bd-kind {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 80%, white 10%);
  text-shadow: none;
}

.bd-desc {
  margin-top: 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 46ch;
}

.bd-contents {
  margin-top: 20px;
}

.bd-contents ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 6px;
}

.bd-contents li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
}

.bd-icon {
  flex: 0 0 24px;
  height: 24px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 45%, transparent);
}

.bd-icon svg {
  width: 16px;
  height: 16px;
}

/* the product itself, big in the middle, floating on a glow */
.bd-art {
  --zoom: 1;
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(34cqw, 96cqh);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bd-art-glow {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 0%, color-mix(in srgb, var(--accent) 16%, transparent) 42%, transparent 70%);
  pointer-events: none;
}

.bd-art-img {
  position: relative;
  width: 92%;
  height: 92%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bd-float 6s ease-in-out infinite;
}

.bd-art-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(var(--zoom));
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.55));
}

.bd-art-floor {
  position: absolute;
  bottom: 2%;
  left: 22%;
  right: 22%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%);
  pointer-events: none;
}

@keyframes bd-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5%); }
}

@media (prefers-reduced-motion: reduce) {
  .bd-art-img { animation: none; }
}

/* top right: more from the same set / under-category */
.bd-more {
  margin-top: 30px;
}

.bd-more-list {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.bd-more-item {
  --tile-colour: #5b6f96;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.bd-more-item:hover {
  border-color: var(--tile-colour);
  background: rgba(255, 255, 255, 0.1);
}

.bd-more-img {
  flex: 0 0 56px;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--tile-colour) 45%, transparent), transparent 70%), rgba(0, 0, 0, 0.25);
}

.bd-more-img img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}

.bd-more-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bd-more-kind {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.bd-more-name {
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bd-more-price {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 800;
}

.bd-more-empty {
  margin-top: 8px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ---- Add Listing: the photo tools and the tile preview ---- */
.al-photo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 18px;
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.al-photo-title {
  font-weight: 700;
  margin-bottom: 8px;
}

.al-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.al-photo-buttons,
.al-colour-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.al-upload-btn {
  cursor: pointer;
}

.al-colour-row input[type="color"] {
  width: 52px;
  height: 38px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.al-tile-preview {
  margin-top: 6px;
  pointer-events: none;
}

.al-tile-preview .tile-action {
  display: none;
}

@media (max-width: 800px) {
  .al-photo { grid-template-columns: 1fr; }
}

/* Manage Listings: the Edit button next to Remove */
.manage-edit {
  margin-left: auto;
}

.manage-edit + .manage-remove {
  margin-left: 0;
}

/* =========================================================
   24. HOME: Latest Releases tiles, Featured and Upcoming Events in
   the Shop tiles' dark style (renderHomeTile / renderHeroFeatured /
   renderUpcomingEvents in script.js)
   ========================================================= */
.home-tile {
  --tile-colour: #5b6f96;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 9px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #f3f3f7;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.home-tile:hover,
.home-tile:focus-visible {
  border-color: var(--tile-colour);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 18px color-mix(in srgb, var(--tile-colour) 30%, transparent);
  transform: translateY(-1px);
  outline: none;
}

/* the square photo spot with the product's glow */
.home-tile-media {
  flex: 0 0 auto;
  height: 100%;
  max-height: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--tile-colour) 55%, transparent) 0%, color-mix(in srgb, var(--tile-colour) 16%, transparent) 48%, transparent 74%),
    #121822;
}

.home-tile-media img {
  width: 84%;
  height: 84%;
  object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5));
}

/* a single card stands upright, with the card's rounded corners */
.home-tile-media.is-card img {
  width: auto;
  height: 88%;
  aspect-ratio: 63 / 88;
  object-fit: cover;
  border-radius: 4.8% / 3.4%;
}

.home-tile-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.home-tile-kind {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tile-colour) 70%, white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-tile-name {
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-tile-detail {
  font-size: 0.66rem;
  color: #8a90a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-tile-price {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: #fff;
}

/* Featured (inside the card frame): the photo on the product's glow */
.box3-content {
  --tile-colour: #5b6f96;
}

.box3-media {
  background:
    radial-gradient(circle at 50% 56%, color-mix(in srgb, var(--tile-colour) 55%, transparent) 0%, color-mix(in srgb, var(--tile-colour) 16%, transparent) 50%, transparent 76%),
    #121822;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.box3-media img {
  max-width: 86%;
  max-height: 88%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55));
}

.box3-media.is-card img {
  border-radius: 4.8% / 3.4%;
}

.box3-meta {
  font-weight: 800;
  color: color-mix(in srgb, var(--tile-colour) 70%, white);
}

.box3-name {
  font-family: var(--font-display);
}

.box3-link {
  background: var(--tile-colour);
}

/* Upcoming Events: the base dark tile colouring */
.page-content-home .event-card {
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
}

.page-content-home a.event-card:hover {
  border-color: var(--red);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.page-content-home .event-date {
  background: #121822;
  border-color: rgba(255, 255, 255, 0.12);
}

.page-content-home .event-date-day,
.page-content-home .event-title {
  color: #f3f3f7;
}

.page-content-home .event-meta {
  color: #8a90a0;
}

.page-content-home .event-price {
  color: #ff8a93;
  background: rgba(220, 31, 47, 0.18);
}

/* The menu has 8 buttons now: on shorter windows the badge under it
   gets smaller and the buttons a little tighter, so all 8 fit. */
@media (max-height: 940px) {
  .sidebar-footer-badge { width: 70px; height: 70px; }
  .sidebar-footer-card { gap: 8px; }
  .nav-link { padding-top: 5px; padding-bottom: 5px; }
}

@media (max-height: 800px) {
  .sidebar-footer-card { display: none; }
}

/* -----------------------------
   25. REWARDS — Settings pickers, "Reward unlocked!" pop-ups, the
   reward line on achievements, locked reward pictures.
------------------------------ */
.settings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.settings-head h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
}

.settings-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
}

.settings-note {
  margin-bottom: 16px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 200, 77, 0.08);
  border: 1px solid rgba(255, 200, 77, 0.35);
  color: #f5d98a;
  font-size: 0.86rem;
}

.settings-note[hidden] {
  display: none;
}

.settings-panel {
  margin-bottom: 20px;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-panel-head {
  margin-bottom: 14px;
}

.settings-panel-head h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
}

.settings-panel-head p,
.settings-subhead {
  color: var(--text-dim);
  font-size: 0.84rem;
}

.settings-subhead {
  margin: 16px 0 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--gold);
}

.dex-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.avatar-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}

.reward-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.reward-choice:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.25);
}

.reward-choice.is-current {
  border-color: var(--gold);
  background: rgba(255, 200, 77, 0.08);
  box-shadow: 0 0 16px rgba(255, 200, 77, 0.2);
}

.reward-choice.is-locked {
  cursor: help;
}

.reward-choice.is-locked > img,
.reward-choice.is-locked .dex-swatch {
  filter: grayscale(1) brightness(0.55);
}

.reward-choice.is-locked .reward-choice-name {
  color: var(--text-faint);
}

.avatar-choice img {
  width: 64px;
  height: 64px;
}

.reward-choice-name {
  font-size: 0.8rem;
  font-weight: 800;
}

.reward-choice-how {
  font-size: 0.68rem;
  line-height: 1.35;
  color: var(--text-faint);
}

.reward-choice.is-current .reward-choice-how {
  color: var(--gold);
  font-weight: 700;
}

.reward-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  padding: 4px;
  border-radius: 50%;
  color: #1b1405;
  background: var(--gold);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.reward-lock svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A tiny Pokédex in the reward colour — the same colour maths as the
   Frame shell (turn the red by --h, colourfulness by --s). */
.dex-swatch {
  --dex-red: oklch(from #d8303a l calc(c * var(--s)) calc(h + var(--h)));
  --dex-dark: oklch(from #7d1a1f l calc(c * var(--s)) calc(h + var(--h)));
  display: flex;
  flex-direction: column;
  width: 76px;
  height: 58px;
  padding: 5px;
  gap: 4px;
  border-radius: 9px 9px 12px 12px;
  background: linear-gradient(180deg, var(--dex-red), var(--dex-dark));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.dex-swatch-top {
  display: flex;
  align-items: center;
  gap: 3px;
}

.dex-swatch-lens {
  width: 13px;
  height: 13px;
  margin-right: 3px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: radial-gradient(circle at 35% 35%, #bff0ff, #2a9ee0 60%, #0c4e7c);
}

.dex-swatch-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd84a;
}

.dex-swatch-dot + .dex-swatch-dot {
  background: #6ee07a;
}

.dex-swatch-screen {
  flex: 1;
  border-radius: 4px;
  background: linear-gradient(135deg, #b8e6c9, #7fc79d);
  border: 2px solid rgba(0, 0, 0, 0.35);
}

.dex-swatch-bottom {
  height: 4px;
  border-radius: 2px;
  background: var(--dex-dark);
  opacity: 0.8;
}

/* Profile page: locked reward pictures and the gold ring */
.profile-avatar-choice {
  position: relative;
}

.profile-avatar-choice.is-locked {
  cursor: help;
  opacity: 0.8;
}

.profile-avatar-choice.is-locked img {
  filter: grayscale(1) brightness(0.55);
}

.profile-avatar-choice.is-locked:hover {
  transform: none;
}

.profile-avatar-choice .reward-lock {
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
}

.profile-picker-hint {
  font-size: 0.78rem;
  color: var(--text-faint);
}

.profile-picker-hint a {
  color: var(--gold);
  font-weight: 700;
}

.achievement-reward {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #c9a6ff;
}

.achievement-reward svg {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
}

.achievement.is-earned .achievement-reward {
  color: var(--gold);
}

/* "Reward unlocked!" pop-ups */
.reward-toasts {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.reward-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 330px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #22190a, #161c26 60%);
  border: 1px solid rgba(255, 200, 77, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(255, 200, 77, 0.22);
  color: #fff;
  animation: reward-toast-in 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) backwards;
}

.reward-toast.is-leaving {
  animation: reward-toast-out 0.5s ease forwards;
}

@keyframes reward-toast-in {
  from { opacity: 0; transform: translateY(24px) scale(0.9); }
}

@keyframes reward-toast-out {
  to { opacity: 0; transform: translateX(40px); }
}

.reward-toast-icon {
  flex: 0 0 auto;
  display: flex;
}

.reward-toast-icon img {
  width: 52px;
  height: 52px;
}

.reward-toast-icon .dex-swatch {
  width: 58px;
  height: 46px;
}

.reward-toast-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.reward-toast-kicker {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.reward-toast-name {
  font-weight: 800;
  font-size: 0.92rem;
}

.reward-toast-link {
  font-size: 0.76rem;
  font-weight: 700;
  color: #9fd0ff;
}

.reward-toast-close {
  align-self: flex-start;
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--text-faint);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

/* -----------------------------
   26. MY VAULT — overview, item tiles with the two standout buttons
   (Ship this / Sell to Dexhaven), the Dexhaven van and its inside,
   and "On their way".
------------------------------ */
.vault-overview {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(110px, 0.7fr)) minmax(240px, 1.5fr);
  gap: 12px;
  margin-bottom: 26px;
}

.vault-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vault-stat-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
}

.vault-stat-label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-dim);
}

.vault-stat.is-worth {
  background: radial-gradient(ellipse at 20% 0%, rgba(255, 200, 77, 0.2), transparent 70%), #161c26;
  border-color: rgba(255, 200, 77, 0.4);
}

.vault-stat.is-worth .vault-stat-label {
  order: -1;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
}

.vault-stat.is-worth .vault-stat-value {
  font-size: 1.9rem;
}

.vault-stat-hint {
  font-size: 0.68rem;
  color: var(--text-faint);
}

.vault-best {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.vault-best-media {
  flex: 0 0 44px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vault-best-media img {
  max-width: 100%;
  max-height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
}

.vault-best-media.is-card img {
  border-radius: 3px;
}

.vault-best-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vault-best-name {
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-best-value {
  font-weight: 800;
  color: var(--gold);
}

/* Filters, sorting and the van — stays at the top while scrolling */
.vault-toolbar {
  position: sticky;
  top: -32px; /* the page's top padding, so nothing shows above it */
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: -22px;
  padding: 32px 0 12px;
  border-bottom: 1px solid var(--border);
  background: #0c131c;
  box-shadow: 0 10px 14px -10px rgba(0, 0, 0, 0.7);
}

.vault-toolbar .vault-sort {
  margin-left: auto;
}

.vault-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vault-filter-count {
  margin-left: 4px;
  opacity: 0.65;
}

.vault-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-dim);
}

.vault-sort select {
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #121822;
  color: var(--text);
  font: inherit;
}

.vault-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 14px;
}

.vault-item {
  --tile-colour: #8a93a6;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vault-item:hover {
  border-color: color-mix(in srgb, var(--tile-colour) 60%, transparent);
}

.vault-item.is-new {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red), 0 8px 22px rgba(220, 31, 47, 0.2);
}

.vault-item.is-in-van {
  border-color: #ffcf3a;
  box-shadow: 0 0 0 1px #ffcf3a, 0 8px 22px rgba(255, 207, 58, 0.15);
}

.vault-item-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 190px;
  padding: 14px;
  background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--tile-colour) 38%, transparent), transparent 70%), #0f141c;
}

.vault-item-media .vault-item-card {
  height: 100%;
  width: auto;
  aspect-ratio: 63 / 88;
  background: none;
}

.vault-item-media .pack-art,
.vault-item-media .vault-pack-art {
  height: 100%;
  width: auto;
}

.vault-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px 8px;
  min-width: 0;
}

.vault-item-kind {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tile-colour) 75%, white);
}

.vault-item-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-item-sub {
  font-size: 0.74rem;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vault-item-value {
  margin-top: 4px;
  font-weight: 800;
  font-size: 1.02rem;
  color: #fff;
}

.vault-item-value-note {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-faint);
}

.vault-item-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding: 6px 12px 12px;
}

.vault-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.vault-open-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vault-open-btn svg,
.vault-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.vault-standout {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The two standout buttons */
.vault-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 11px;
  border: 0;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
}

.vault-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.vault-btn:active {
  transform: translateY(1px);
}

/* red and white like the van, with the black band */
.vault-btn-ship {
  color: #fff;
  background: linear-gradient(180deg, #ff5a62, #d41f2c 78%, #1d1d24 78%, #1d1d24 86%, #f4f5f8 86%);
  box-shadow: 0 0 0 2px #1d1d24, 0 4px 12px rgba(227, 38, 47, 0.35);
  padding-bottom: 12px;
}

.vault-btn-ship[aria-pressed="true"] {
  padding-bottom: 8px;
  background: #ffcf3a;
  color: #1d1d24;
  text-shadow: none;
  box-shadow: 0 0 0 2px #1d1d24, 0 4px 14px rgba(255, 207, 58, 0.4);
}

.vault-btn-sell {
  color: #102a12;
  background: linear-gradient(180deg, #8ff08c, #3fbf5a);
  box-shadow: 0 0 0 2px #0f2b14, 0 4px 12px rgba(63, 191, 90, 0.3);
}

.vault-item-note {
  padding: 0 14px 12px;
  font-size: 0.76rem;
  color: #ff8a93;
}

.vault-item-note[hidden] {
  display: none;
}

.vault-van-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 16px 5px 8px;
  border-radius: 16px;
  border: 2px solid #1d1d24;
  background: linear-gradient(180deg, #2a2f3b, #161a22);
  color: #fff;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.15s ease;
}

.vault-van-btn:hover {
  transform: translateY(-2px);
}

.vault-van-btn:not(.is-empty) {
  border-color: #ffcf3a;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 207, 58, 0.3);
}

.vault-van-art {
  width: 82px;
  display: flex;
}

.vault-van-art .van-svg {
  width: 100%;
  height: auto;
}

.vault-van-btn:not(.is-empty) .van-wheel-spin {
  animation: van-idle 0.9s ease-in-out infinite;
}

.vault-van-btn.is-bump .vault-van-art {
  animation: van-bump 0.5s ease;
}

@keyframes van-bump {
  30% { transform: translateY(-8px) rotate(-3deg); }
  60% { transform: translateY(2px) rotate(1deg); }
}

@keyframes van-idle {
  50% { transform: translateY(-0.6px); }
}

.vault-van-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.vault-van-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}

.vault-van-sub {
  font-size: 0.76rem;
  color: var(--text-dim);
}

.vault-van-btn:not(.is-empty) .vault-van-sub {
  color: #ffcf3a;
  font-weight: 700;
}

.vault-van-badge {
  position: absolute;
  top: -10px;
  left: -8px;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e3262f;
  border: 2px solid #fff;
  font-weight: 900;
  font-size: 0.8rem;
}

.van-wheel-spin {
  transform-box: fill-box;
  transform-origin: center;
}

/* On their way */
.vault-shipment {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vault-shipment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.vault-shipment-van {
  width: 74px;
  display: flex;
}

.vault-shipment-van .van-svg {
  width: 100%;
  height: auto;
}

.vault-shipment-title {
  font-family: var(--font-display);
  font-weight: 800;
}

.vault-shipment-date {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.vault-steps {
  display: flex;
  gap: 4px;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
}

.vault-steps li {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.05);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%);
}

.vault-steps li:first-child {
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  border-radius: 6px 0 0 6px;
}

.vault-steps li.is-done {
  color: #1d1d24;
  background: #7fd68f;
}

.vault-steps li.is-now {
  background: #ffcf3a;
}

.vault-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vault-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.8rem;
  font-weight: 700;
}

.vault-chip img {
  height: 34px;
  width: auto;
}

.vault-chip img.is-card {
  border-radius: 2px;
}

/* Pop-up windows */
.vault-modal {
  position: fixed;
  inset: 0;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 6, 10, 0.72);
  backdrop-filter: blur(3px);
  animation: vault-fade 0.2s ease;
}

@keyframes vault-fade {
  from { opacity: 0; }
}

.vault-modal-box {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  border-radius: 20px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  animation: vault-pop 0.3s cubic-bezier(0.2, 1.3, 0.4, 1);
}

@keyframes vault-pop {
  from { transform: scale(0.92); opacity: 0; }
}

.sell-modal .vault-modal-box {
  width: min(420px, 100%);
  padding: 26px 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.sell-modal-icon {
  width: 58px;
  height: 58px;
  padding: 12px;
  border-radius: 50%;
  color: #102a12;
  background: linear-gradient(180deg, #8ff08c, #3fbf5a);
  box-shadow: 0 0 0 3px #0f2b14, 0 0 24px rgba(63, 191, 90, 0.4);
}

.sell-modal-icon svg {
  width: 100%;
  height: 100%;
}

.sell-modal h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.sell-modal-item {
  font-weight: 800;
  color: #8ff08c;
}

.sell-modal p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Inside the van: dark red walls, ceiling lights, a wooden floor and
   the items as parcels on the shelves. */
.van-modal .vault-modal-box {
  width: min(620px, 100%);
  border: 3px solid #1d1d24;
}

.van-inside {
  position: relative;
  padding: 34px 22px 20px;
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 120px),
    linear-gradient(180deg, #5b1319 0%, #3a0d12 55%, #2a0a0e 100%);
}

.van-ceiling {
  position: absolute;
  inset: 0 0 auto 0;
  height: 16px;
  display: flex;
  justify-content: space-around;
  background: #1d1d24;
}

.van-ceiling span {
  width: 90px;
  height: 7px;
  margin-top: 5px;
  border-radius: 4px;
  background: #fff6d6;
  box-shadow: 0 0 22px 8px rgba(255, 238, 180, 0.35), 0 16px 60px 20px rgba(255, 238, 180, 0.12);
}

.van-inside-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.van-inside-head h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
}

.van-close {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.van-parcels {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.van-parcel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #d8b27a, #b98a4f);
  color: #2a1a08;
  box-shadow: 0 3px 0 #7a5528, 0 6px 14px rgba(0, 0, 0, 0.35);
  position: relative;
}

.van-parcel::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 26px;
  transform: translateX(-50%);
  background: rgba(255, 238, 190, 0.35);
  pointer-events: none;
}

.van-parcel-media {
  position: relative;
  flex: 0 0 40px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}

.van-parcel-media img {
  max-width: 100%;
  max-height: 100%;
}

.van-parcel-text {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.van-parcel-name {
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.van-parcel-sub {
  font-size: 0.74rem;
  font-weight: 700;
  opacity: 0.75;
}

.van-parcel-value {
  position: relative;
  font-weight: 900;
}

.van-parcel-remove {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 7px;
  border-radius: 50%;
  border: 0;
  background: rgba(42, 26, 8, 0.2);
  color: #2a1a08;
  cursor: pointer;
}

.van-parcel-remove:hover {
  background: rgba(42, 26, 8, 0.35);
}

.van-close svg,
.van-parcel-remove svg {
  display: block;
  width: 100%;
  height: 100%;
}

.van-floor {
  height: 14px;
  margin: 12px -22px 14px;
  background: repeating-linear-gradient(90deg, #6b4a2a 0 58px, #5a3d22 58px 60px);
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35);
}

.van-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}

.van-summary > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}

.van-summary-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffb3b8;
}

.van-summary-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
}

.van-note {
  font-size: 0.8rem;
  color: #f1c9cc;
  line-height: 1.45;
  margin-bottom: 6px;
}

.van-error {
  color: #ffd84a;
  font-weight: 700;
  font-size: 0.85rem;
}

.van-error[hidden] {
  display: none;
}

.van-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.van-confirm {
  min-height: 46px;
  padding: 10px 22px;
  font-size: 0.95rem;
}

.van-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #f1c9cc;
}

.van-empty p:first-child {
  font-weight: 800;
  color: #fff;
  font-size: 1.05rem;
}

/* After confirming: the van drives off */
.van-drive {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: linear-gradient(180deg, #7cc8ff, #cdeeff 70%);
}

.van-drive-sky::before,
.van-drive-sky::after {
  content: "";
  position: absolute;
  top: 26px;
  left: 60%;
  width: 90px;
  height: 26px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 30px -12px 0 4px #fff;
  animation: van-cloud 3s linear infinite;
}

.van-drive-sky::after {
  top: 60px;
  left: 20%;
  transform: scale(0.7);
  animation-duration: 4.2s;
}

@keyframes van-cloud {
  to { translate: -140px 0; }
}

.van-drive-road {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44px;
  background: #3a3f4a;
  border-top: 5px solid #5dbb63;
}

.van-drive-road span {
  position: absolute;
  top: 18px;
  left: 0;
  width: 200%;
  height: 4px;
  background: repeating-linear-gradient(90deg, #ffe07a 0 36px, transparent 36px 72px);
  animation: van-road 0.5s linear infinite;
}

@keyframes van-road {
  to { transform: translateX(-72px); }
}

.van-drive-van {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 210px;
  transform: translateX(-50%);
  animation: van-drive-off 2.6s cubic-bezier(0.5, 0, 0.75, 0) 1.1s forwards;
}

.van-drive-van .van-svg {
  display: block;
  width: 100%;
  height: auto;
  animation: van-rumble 0.25s ease-in-out infinite;
}

.van-drive-van .van-wheel-spin {
  animation: van-spin 0.35s linear infinite;
}

@keyframes van-spin {
  to { transform: rotate(360deg); }
}

@keyframes van-rumble {
  50% { transform: translateY(-1.5px); }
}

@keyframes van-drive-off {
  to { transform: translateX(260%); }
}

.van-drive-lines {
  position: absolute;
  right: 100%;
  top: 30%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.van-drive-lines i {
  display: block;
  width: 50px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.9);
  animation: van-lines 0.4s linear infinite;
}

.van-drive-lines i:nth-child(2) {
  width: 70px;
  animation-delay: 0.12s;
}

@keyframes van-lines {
  from { transform: translateX(20px); opacity: 0; }
  50% { opacity: 1; }
  to { transform: translateX(-30px); opacity: 0; }
}

.van-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px 24px 22px;
}

.van-done h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
}

.van-done p {
  color: var(--text-dim);
  line-height: 1.5;
}

@media (max-width: 1300px) {
  .vault-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vault-stat.is-worth,
  .vault-best {
    grid-column: span 3;
  }
}

@media (max-width: 700px) {
  .vault-overview {
    grid-template-columns: 1fr 1fr;
  }
  .vault-stat.is-worth,
  .vault-best {
    grid-column: span 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .van-drive-van,
  .van-drive-van .van-svg,
  .van-drive-van .van-wheel-spin,
  .van-drive-road span,
  .vault-van-btn .van-wheel-spin {
    animation: none;
  }
}

/* Staff: Shipments page */
.ship-filters {
  margin-bottom: 14px;
}

.ship-staff {
  margin-bottom: 12px;
}

.ship-staff .vault-shipment-title a {
  color: #9fd0ff;
}

.ship-tag {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 0.75rem;
  color: var(--text-faint);
}

.ship-status {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

.ship-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: 0.86rem;
  color: var(--text-dim);
}

.ship-items strong {
  color: var(--text);
}

.ship-from {
  color: var(--text-faint);
}

/* -----------------------------
   27. PRODUCT TYPES — the dropdown in Add Listing and the Staff
   Hub's Product Types page.
------------------------------ */
.al-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.al-edit-types {
  font-size: 0.78rem;
  font-weight: 700;
  color: #9fd0ff;
}

.pt-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.pt-group {
  margin-bottom: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #161c26;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.pt-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pt-group-name,
.pt-type-name,
.pt-add input,
.pt-move,
.pt-contents {
  padding: 7px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f141c;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
}

.pt-group-name {
  flex: 0 1 300px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
}

.pt-count {
  margin-right: auto;
  font-size: 0.76rem;
  color: var(--text-faint);
}

.pt-types {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.pt-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
}

.pt-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pt-type-name {
  flex: 1 1 220px;
  min-width: 0;
}

.pt-uses {
  min-width: 78px;
  font-size: 0.74rem;
  color: var(--text-faint);
}

.pt-uses.is-used {
  color: #7fd68f;
  font-weight: 700;
}

.pt-contents-btn,
.pt-icon,
.pt-remove {
  padding: 6px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.pt-contents-btn span {
  margin-left: 4px;
  opacity: 0.7;
}

.pt-contents-btn.is-open {
  border-color: var(--gold);
  color: var(--gold);
}

.pt-icon {
  width: 32px;
  padding: 6px 0;
}

.pt-icon:disabled {
  opacity: 0.3;
  cursor: default;
}

.pt-remove:hover,
.pt-remove.is-confirm {
  border-color: var(--red);
  color: #fff;
  background: rgba(220, 31, 47, 0.35);
}

.pt-move {
  padding: 6px 8px;
  font-size: 0.78rem;
  max-width: 170px;
}

.pt-contents {
  width: 100%;
  resize: vertical;
  line-height: 1.45;
}

.pt-add {
  display: flex;
  gap: 8px;
}

.pt-add input {
  flex: 0 1 320px;
}

.pt-add-group {
  margin: 6px 0 90px;
}

.pt-savebar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 -8px;
  padding: 12px 16px;
  border-radius: 14px 14px 0 0;
  background: #121822;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
}

.pt-savebar.is-dirty {
  border-color: var(--gold);
}

.pt-status {
  margin-right: auto;
  font-size: 0.86rem;
  color: var(--text-dim);
}

.pt-savebar.is-dirty .pt-status {
  color: var(--gold);
  font-weight: 700;
}