/* V151 public shop, warm, playful Pokémon-shop theme
   (the admin dashboard keeps its dark command-centre look; this is the shop window) */
:root {
  color-scheme: light;
  --page: #faf6ec;
  --card: #ffffff;
  --ink: #2b2a33;
  --ink-2: #5d5b66;
  --muted: #8d8a96;
  --line: #e8e2d2;
  --ring: rgba(43,42,51,.08);
  --ink-dark: #2b2a33;        /* the one dark used by header, ticker, footer */
  --ink-soft: #37363f;        /* a step lighter, for blocks that sit on the footer */
  --poke-red: #e3350d;
  --poke-red-dark: #c22a08;
  --poke-yellow: #ffcb05;
  --poke-blue: #2a75bb;
  --poke-blue-dark: #1f5a92;
  --leaf: #4dad5b;
  --leaf-dark: #3c8c48;
  --shadow: 0 4px 18px rgba(90, 70, 20, .08);
  --shadow-lg: 0 14px 34px rgba(90, 70, 20, .16);
  --r: 16px;
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { overflow-x: clip; }
/* Must stay: overlays (3D viewer, drawers) rely on the hidden attribute, and
   their own display rules would otherwise win and cover the whole shop. */
[hidden] { display: none !important; }
h1, h2, h3, .logo, .price, .cart-btn, .btn, .offer-total, .total-row, .chip, .topnav a {
  font-family: "Outfit", ui-rounded, system-ui, sans-serif;
}
body {
  margin: 0; color: var(--ink); font-size: 15px;
  background:
    radial-gradient(600px 380px at 8% -5%, rgba(255,203,5,.14), transparent 65%),
    radial-gradient(700px 420px at 96% 4%, rgba(42,117,187,.10), transparent 65%),
    radial-gradient(520px 380px at 50% 108%, rgba(227,53,13,.06), transparent 65%),
    var(--page);
  min-height: 100vh;
}
/* Paper texture: a translucent grid, like binder/graph stock, plus a whisper
   of grain so the lattice never looks mechanically perfect. Fixed, so it sits
   still while the page scrolls over it. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(112,88,40,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112,88,40,.055) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: 34px 34px, 34px 34px, 200px 200px;
  mix-blend-mode: multiply; opacity: .5;
}
/* edge vignette so long pages don't go flat at the sides */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(125% 85% at 50% -10%, transparent 58%, rgba(92,64,18,.08) 100%);
}
.wrap, .topbar, footer, .hero, .announce { position: relative; z-index: 1; }

/* announcement ribbon */
.announce {
  /* same ink as the header so the top of the page reads as one block */
  background: var(--ink-dark); color: #f5edd8;
  border-bottom: 1px solid rgba(255,255,255,.07); text-align: center; font-size: 12.5px; font-weight: 650;
  padding: 7px 14px; letter-spacing: .2px; position: relative;
}
.announce a { color: var(--poke-yellow); }
a { color: var(--poke-blue); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- header ---------- */
/* Flat dark. The wordmark's "VAULT" is cream so the bar has to be dark, and it
   belongs to a family that recurs down the page: announce bar, sold ticker,
   mailing band and footer all use this same ink. */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--ink-dark);
  box-shadow: 0 4px 16px rgba(20,18,26,.20);
}
.topbar-in { position: relative; z-index: 1; }
.topbar-in { display: flex; align-items: center; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 12px 22px; }
.logo { display: flex; align-items: center; }
.logo-img { height: 38px; width: auto; display: block; }
.logo:hover .logo-img { filter: brightness(1.08); }
/* small pokéball kept for the footer */
.logo-ball { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(180deg, var(--poke-red) 47%, #2b2a33 47%, #2b2a33 56%, #fff 56%);
  box-shadow: 0 2px 6px rgba(0,0,0,.25); position: relative; }
.logo-ball::after { content:""; position:absolute; inset:9px; border-radius:50%; background:#fff; border:3px solid #2b2a33; }
.topnav { display: flex; gap: 4px; margin-left: 6px; }
.topnav a { color: #cfcbd8; padding: 8px 14px; border-radius: 99px; font-size: 14px; font-weight: 650; transition: background .15s, color .15s; }
.topnav a:hover { background: rgba(255,255,255,.10); color: #fff; }
.topnav a.on { background: var(--poke-yellow); color: #4a3a00; box-shadow: inset 0 -2px 0 rgba(0,0,0,.12); }
.top-search { margin-left: auto; width: min(320px, 32vw); background: #fff;
  border: 2px solid var(--line); border-radius: 99px; padding: 9px 16px; color: var(--ink); outline: none; }
.top-search:focus { border-color: var(--poke-blue); box-shadow: 0 0 0 3px rgba(42,117,187,.15); }
.top-search::placeholder { color: var(--muted); }
.cart-btn { position: relative; background: var(--poke-blue); border: 0; color: #fff;
  border-radius: 99px; padding: 10px 18px; cursor: pointer; font-weight: 750;
  box-shadow: 0 3px 0 var(--poke-blue-dark); transition: transform .1s; }
.cart-btn:hover { filter: brightness(1.08); }
.cart-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--poke-blue-dark); }
.cart-count { position: absolute; top: -7px; right: -5px; background: var(--poke-red); color: #fff;
  border: 2px solid #fff; border-radius: 99px; font-size: 11px; font-weight: 800; padding: 1px 6px; }
/* phone header: logo + basket on row one, nav + search below */
@media (max-width: 720px) {
  .topbar-in { flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; }
  .logo-img { height: 30px; }
  .cart-btn { order: 2; margin-left: auto; padding: 9px 14px; font-size: 14px; }
  .topnav { order: 3; margin-left: -6px; overflow-x: auto; max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { padding: 7px 11px; font-size: 13px; white-space: nowrap; flex: none; }
  .top-search { order: 4; flex: 1; width: auto; min-width: 0; margin-left: 0; padding: 8px 14px; }
}

/* ---------- hero ---------- */
/* pokéball hero, red top, dark seam band, fades into the cream page (matches the gift page) */
.hero { text-align: center; padding: 48px 20px 92px; position: relative; overflow: hidden;
  /* Near-flat red: just enough shift to avoid looking like a printed block.
     It ends transparent so the page's own paper shows through and there is no
     second cream meeting the first. */
  background: linear-gradient(178.2deg,
    #e5390f 0%, var(--poke-red) 48%, #d8320c 76%,
    #2b2a33 76.3%, #2b2a33 78.1%, transparent 78.4%);
  color: #fff; }
/* The seam is drawn by the hero's own gradient so it spans the full width and
   exits both edges. A shallower angle plus extra room at the bottom is what
   stops it clipping at the corner, and the final stop is transparent so the
   page's paper continues underneath with no second cream edge. */
.hero h1 { margin: 0 0 10px; font-size: clamp(28px, 5vw, 44px); font-weight: 850; letter-spacing: -.5px;
  position: relative; z-index: 2; text-shadow: 0 2px 14px rgba(120, 20, 0, .4); }
.hero h1 .zap { background: linear-gradient(120deg, #ffe066, var(--poke-yellow));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.hero p { color: #ffe3d6; margin: 0; font-size: 16px; position: relative; z-index: 2; }
/* floating solid pokéballs + sparks */
.deco { position: absolute; pointer-events: none; }
.deco.ball { width: 70px; height: 70px; border-radius: 50%; opacity: .9;
  background: linear-gradient(180deg, #fff 0 46%, #2b2a33 46% 54%, #f5edd8 54% 100%);
  box-shadow: inset 0 0 0 3px #2b2a33, 0 10px 26px rgba(0,0,0,.25);
  animation: bob 6s ease-in-out infinite; }
.deco.ball::after { content:""; position: absolute; inset: 0; margin: auto; width: 26%; height: 26%; border-radius: 50%; background: #fff; border: 3px solid #2b2a33; }
.deco.b1 { left: 5%; top: 34px; transform: rotate(-16deg); }
.deco.b2 { right: 7%; top: 78px; width: 44px; height: 44px; animation-delay: 1.6s; transform: rotate(12deg); }
.deco.spark { font-size: 22px; color: var(--poke-yellow); animation: twinkle 2.8s ease-in-out infinite; z-index: 1; }
.deco.s1 { left: 16%; top: 120px; }
.deco.s2 { right: 19%; top: 36px; animation-delay: 1.1s; }
.deco.s3 { right: 30%; top: 150px; font-size: 15px; animation-delay: 2s; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -14px; } }
@keyframes twinkle { 0%,100% { opacity: .25; transform: scale(.8) rotate(0deg); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }

/* hero extras */
.hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; position: relative; z-index: 2; }
.cta-main { background: linear-gradient(180deg, #ffe066, var(--poke-yellow)); color: #4a3a00; padding: 13px 26px; border-radius: 99px;
  font-weight: 900; font-size: 15.5px; box-shadow: 0 4px 0 #cfa000, 0 10px 26px rgba(0,0,0,.22); transition: transform .1s; }
.cta-main:hover { filter: brightness(1.05); }
.cta-main:active { transform: translateY(3px); box-shadow: 0 1px 0 #cfa000; }
.cta-sell { background: #fff; border: 2px solid var(--leaf); color: var(--leaf-dark); padding: 11px 24px;
  border-radius: 99px; font-weight: 800; font-size: 15.5px; box-shadow: 0 4px 0 rgba(61,140,72,.3); }
.cta-sell:hover { background: #f2faf3; }
.hero-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.stat-chip { background: rgba(255,255,255,.75); border: 1px solid var(--line); border-radius: 99px;
  padding: 7px 16px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); backdrop-filter: blur(4px); }
.stat-chip b { color: var(--ink); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px; }

/* section headers & toolbar */
.sec-head { display: flex; align-items: center; gap: 12px; margin: 38px 0 16px; scroll-margin-top: 96px; }
.sec-head .spacer { flex: 1; }
.sec-head h2 { margin: 0; font-size: 22px; font-weight: 850; letter-spacing: -.3px; }
.sec-sub { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.sort { background: #fff; border: 2px solid var(--line); border-radius: 99px; padding: 8px 14px;
  font-size: 13px; font-weight: 700; color: var(--ink-2); outline: none; cursor: pointer; }
.sort:focus { border-color: var(--poke-blue); }

/* featured chase cards, bright holo treatment */
.featured { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 8px; }
.fcard { position: relative; border-radius: var(--r); padding: 20px 18px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: linear-gradient(#fffdf7, #fffdf7) padding-box,
              linear-gradient(130deg, var(--poke-yellow), #ff8a3d 30%, var(--poke-red) 55%, #b48ff0 80%, var(--poke-blue)) border-box;
  border: 3px solid transparent;
  box-shadow: 0 10px 28px rgba(90,70,20,.16); overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease; }
.fcard:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(90,70,20,.24); }
.fcard::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .6;
  background: radial-gradient(260px 150px at 85% -10%, rgba(255,203,5,.28), transparent 70%),
              radial-gradient(240px 160px at 8% 108%, rgba(42,117,187,.14), transparent 70%); }
.fcard img { width: 100%; border-radius: 10px; filter: drop-shadow(0 12px 18px rgba(60,40,10,.35)); position: relative; display: block; }
/* Chase cards open the 3D viewer like every other tile, so the tap target has
   to be the image itself rather than the whole card (the Add button sits inside). */
.fcard .f-img { position: relative; width: 76%; cursor: zoom-in; }
.fcard .f-img .flip-badge { opacity: 0; transition: opacity .16s; }
.fcard:hover .f-img .flip-badge { opacity: 1; }
@media (hover: none) { .fcard .f-img .flip-badge { opacity: 1; } }
.fcard .f-name { font-weight: 800; font-size: 14.5px; text-align: center; line-height: 1.3; position: relative; color: var(--ink); }
.fcard .f-set { color: var(--muted); font-size: 12px; font-weight: 650; margin-top: -6px; position: relative; }
.fcard .f-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; position: relative; }
.fcard .price { font-size: 16px; }
.fcard .add { background: linear-gradient(180deg, #f3452a, var(--poke-red-dark)); color: #fff; border: 0; border-radius: 99px;
  padding: 9px 16px; font-weight: 800; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 3px 0 #96200a; transition: transform .1s; }
.fcard .add:hover { filter: brightness(1.08); }
.fcard .add:active { transform: translateY(2px); box-shadow: 0 1px 0 #96200a; }
.fcard .add:disabled { background: #d9d3c2; color: #8d8a80; box-shadow: none; }

/* shop layout with sidebar */
.shop-layout { display: grid; grid-template-columns: 232px 1fr; gap: 22px; align-items: start; }
.filters-toggle { display: none; }
.mob-chips { display: none; }
@media (max-width: 860px) {
  /* one-tap set filter row, always visible above the grid */
  .mob-chips { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 2px 6px; scrollbar-width: none; }
  .mob-chips::-webkit-scrollbar { display: none; }
  .mob-chips[hidden] { display: none; }
  .mob-chips .chip { flex: none; white-space: nowrap; }
  .mob-chips .chip .cn { opacity: .6; font-weight: 700; font-size: 11.5px; }
  /* sort gets full prominence next to the section title */
  .sec-head .sort { flex: 1 1 100%; order: 5; padding: 11px 14px; font-size: 14px; }
}
@media (max-width: 860px) {
  .shop-layout { grid-template-columns: 1fr; gap: 14px; }
  .shop-layout .side { position: static !important; display: none; }
  .shop-layout .side.open { display: flex; }
  .filters-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 11px 14px;
    font-weight: 750; font-size: 14px; color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow); }
  .filters-toggle .ft-count { background: var(--poke-red); color: #fff; border-radius: 99px;
    font-size: 11.5px; font-weight: 800; padding: 2px 9px; }
  .filters-toggle .ft-count:empty { display: none; }
}
.side { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 14px; }
.side-card { background: #fff; border: 1px solid var(--ring); border-radius: var(--r); padding: 15px 16px;
  box-shadow: var(--shadow); font-size: 13px; }
.side-card h3 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); }
.side-list { display: flex; flex-direction: column; gap: 4px; }
.side-scroll { max-height: 240px; overflow-y: auto; }
.side-list button { text-align: left; background: none; border: 0; border-radius: 9px; padding: 8px 11px;
  font-size: 13.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; display: flex; justify-content: space-between; }
.side-list button:hover { background: #f6f1e3; color: var(--ink); }
.side-list button.on { background: linear-gradient(90deg, rgba(227,53,13,.12), rgba(255,138,61,.08));
  color: var(--poke-red); box-shadow: inset 2.5px 0 0 var(--poke-red); }
.side-list button .n { color: var(--muted); font-weight: 600; font-size: 12px; }
.sell-promo { display: flex; flex-direction: column; gap: 6px; color: #eafcef; text-decoration: none;
  background: linear-gradient(140deg, var(--leaf), var(--leaf-dark)); border: 0;
  box-shadow: 0 8px 22px rgba(61,140,72,.35); }
.sell-promo b { font-size: 15px; font-family: "Outfit", ui-rounded, system-ui, sans-serif; }
.sell-promo .promo-cta { font-weight: 800; color: #fff; margin-top: 2px; }
.sell-promo:hover { filter: brightness(1.05); }
.vault-why span { display: block; padding: 3px 0; color: var(--ink-2); font-weight: 600; }
.hint-mob { color: var(--muted); font-size: 12.5px; font-weight: 650; }

/* skeleton shimmer while the catalogue loads */
.skel { border-radius: 18px; background: #efe9d8; position: relative; overflow: hidden; aspect-ratio: 63/110; }
.skel::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%);
  animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: #fff; border: 2px solid var(--line); border-radius: 99px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 650; color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: #d7cfba; }
.chip.on { background: var(--poke-red); border-color: var(--poke-red); color: #fff; box-shadow: 0 2px 0 var(--poke-red-dark); }

/* ---------- product grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .featured { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fcard { padding: 12px 10px 12px; }
  .fcard .f-name { font-size: 13px; }
  .pcard .info { padding: 10px 10px 11px; gap: 6px; }
  .pcard .price { font-size: 13.5px; padding: 3px 9px; }
  .wrap { padding: 14px; }
  .hero { padding: 28px 16px 34px; }
  .sec-head { flex-wrap: wrap; row-gap: 6px; margin: 26px 0 12px; }
  .sec-head h2 { font-size: 19px; }
  .announce { font-size: 11.5px; padding: 6px 10px; }
  .hero h1 { font-size: clamp(26px, 8vw, 34px); }
  .hero p { font-size: 14px; }
  .hero p br { display: none; }
  .hero-ctas { margin-top: 16px; flex-direction: column; align-items: center; }
  .cta-main, .cta-sell { width: 100%; max-width: 320px; text-align: center; padding: 12px 20px; font-size: 15px; }
  .hero-stats { margin-top: 18px; gap: 7px; }
  .stat-chip { font-size: 11.5px; padding: 6px 12px; }
  .deco.spark, .deco.b1 { display: none; }
  .deco.b2 { display: block; width: 36px; height: 36px; right: 10px; top: 10px; opacity: .85; }
  .trust { grid-template-columns: 1fr 1fr; gap: 10px; margin: 30px 0 8px; }
  .trust-tile { padding: 13px; font-size: 12.5px; }
  footer { padding: 30px 16px 20px; margin-top: 36px; }
}
.pcard { background: linear-gradient(180deg, #fff 0%, #fdfbf6 100%); border: 1px solid var(--ring); border-radius: var(--r);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.pcard:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: var(--shadow-lg); }
.pcard .imgbox { aspect-ratio: 63/88; background: linear-gradient(160deg, #f4f0e4, #eae4d2);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 10px; }
.pcard img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.22)); }
.pcard .noimg { font-size: 64px; opacity: .5; filter: saturate(.7); }
/* holo-foil sweep on hover */
.pcard .imgbox::after { content: ""; position: absolute; inset: -40%; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.7) 46%, rgba(130,220,255,.45) 50%, rgba(255,180,240,.45) 54%, transparent 62%);
  transition: opacity .2s; transform: translateX(-30%); }
.pcard:hover .imgbox::after { opacity: 1; animation: holo 1.1s ease forwards; }
@keyframes holo { to { transform: translateX(30%); } }
.pcard .info { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pcard .name { font-size: 13.5px; font-weight: 750; line-height: 1.3; }
.pcard .set { font-size: 11.5px; color: var(--muted); font-weight: 650; flex: 1; }
/* Stock count and scan badge share the top-right corner, stacked rather than
   side by side — "Actual Card Photo" is wide enough to collide with a
   left-anchored stock pill on narrower cards. */
.low-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--poke-red); color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 99px; box-shadow: 0 2px 8px rgba(227,53,13,.4);
  letter-spacing: .3px; }
/* When a scan badge is present it takes the top slot and stock drops beneath.
   The markup deliberately renders the scan badge first so this plain sibling
   selector works without needing :has(). */
.scan-badge ~ .low-badge { top: 37px; }
.pcard .meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
/* nowrap keeps "from £2.50" on one line — it used to break across two, which
   turned the price pill into a tall yellow blob on multi-copy cards */
.pcard .price { font-size: 15px; font-weight: 850; color: #4a3a00; white-space: nowrap;
  background: linear-gradient(160deg, #ffd84d, #f5b800);
  padding: 3px 11px; border-radius: 99px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.14); }
.pcard .stock { font-size: 11px; color: var(--muted); font-weight: 650; }
.pcard .add { background: linear-gradient(180deg, #f3452a, var(--poke-red-dark)); border: 0; border-radius: 11px;
  padding: 10px; color: #fff; font-weight: 750; font-size: 13.5px; cursor: pointer;
  box-shadow: 0 3px 0 #96200a; transition: transform .1s; }
.pcard .add:hover { filter: brightness(1.08); }
.pcard .add:active { transform: translateY(2px); box-shadow: 0 1px 0 #96200a; }
.pcard .add:disabled { background: #d9d3c2; color: #8d8a80; box-shadow: none; cursor: default; }
.empty { color: var(--muted); text-align: center; padding: 60px 0; font-weight: 650; }
.empty-ball { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; opacity: .45;
  background: linear-gradient(180deg, var(--poke-red) 47%, #2b2a33 47%, #2b2a33 56%, #fff 56%);
  position: relative; }
.empty-ball::after { content:""; position:absolute; inset:18px; border-radius:50%; background:#fff; border:4px solid #2b2a33; }

/* trust strip */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 46px 0 8px; }
.trust-tile { background: linear-gradient(180deg, #fff 0%, #fdfbf6 100%); border: 1px solid var(--ring); border-radius: var(--r); padding: 18px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); font-size: 13px; color: var(--ink-2); }
.trust-tile b { font-size: 14.5px; color: var(--ink); font-family: "Outfit", ui-rounded, system-ui, sans-serif; }
.trust-tile .t-ico { font-size: 24px; }

/* ---------- cart drawer ---------- */
.drawer-mask { position: fixed; inset: 0; background: rgba(43,42,51,.4); z-index: 30; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 94vw); z-index: 31;
  background: var(--card); border-left: 1px solid var(--ring); display: flex; flex-direction: column;
  box-shadow: -12px 0 40px rgba(43,42,51,.18); animation: slidein .18s ease; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px;
  border-bottom: 3px solid var(--poke-yellow); }
.drawer-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 18px; }
.cart-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.cart-row img { width: 42px; border-radius: 4px; }
.cart-row .cr-name { flex: 1; font-size: 13px; font-weight: 650; min-width: 0; }
.cart-row .qty { display: flex; align-items: center; gap: 7px; font-weight: 700; }
.cart-row .qty button { width: 26px; height: 26px; border-radius: 99px; border: 2px solid var(--line);
  background: #fff; cursor: pointer; line-height: 1; font-weight: 800; color: var(--ink-2); }
.cart-row .qty button:hover { border-color: var(--poke-blue); color: var(--poke-blue); }
.cart-row .cr-price { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.drawer-foot { padding: 16px 18px; border-top: 1px solid var(--line); background: #fdfbf5; }
.total-row { display: flex; justify-content: space-between; font-size: 17px; font-weight: 850; margin-bottom: 6px; }
.ship-note { color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.btn { width: 100%; border: 0; border-radius: 13px; padding: 13px; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .1s; }
.btn.primary { background: linear-gradient(180deg, #f3452a, var(--poke-red-dark)); color: #fff; box-shadow: 0 3px 0 #96200a; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--poke-red-dark); }
.btn.ghost { background: #fff; border: 2px solid var(--line); color: var(--ink-2); margin-top: 8px; }
.btn.ghost:hover { border-color: var(--poke-blue); color: var(--poke-blue); }
.iconbtn { background: none; border: 0; color: var(--muted); font-size: 17px; cursor: pointer; }
.iconbtn:hover { color: var(--poke-red); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 10px; }
.field input, .field textarea, .field select { background: #fff; border: 2px solid var(--line);
  border-radius: 10px; padding: 9px 12px; color: var(--ink); outline: none; width: 100%; font-weight: 500; }
.field input:focus, .field textarea:focus { border-color: var(--poke-blue); box-shadow: 0 0 0 3px rgba(42,117,187,.12); }
.msg { font-size: 13px; font-weight: 650; min-height: 18px; margin: 6px 0; }
.msg.err { color: var(--poke-red); }
.msg.ok { color: var(--leaf-dark); }

/* footer */
footer { margin-top: 56px; background: var(--ink-dark); border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--poke-red), var(--poke-yellow), var(--poke-blue)) 1; color: #b9b6c9; font-size: 13px; padding: 40px 24px 26px; }
.foot-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 30px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid b { color: #fff; display: block; margin-bottom: 8px; font-family: "Outfit", ui-rounded, system-ui, sans-serif; }
.foot-grid a, .foot-grid span { display: block; color: #b9b6c9; padding: 3px 0; }
.foot-grid a:hover { color: var(--poke-yellow); }
.foot-grid p { margin: 0; line-height: 1.6; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.foot-brand b { margin: 0; font-size: 16px; }
.foot-ball { width: 34px; height: 34px; margin: 28px auto 12px; border-radius: 50%; opacity: .85;
  background: linear-gradient(180deg, var(--poke-red) 47%, #16151c 47%, #16151c 56%, #fff 56%);
  position: relative; }
.foot-ball::after { content:""; position:absolute; inset:11px; border-radius:50%; background:#fff; border:3px solid #16151c; }
.foot-legal { text-align: center; color: #7a7789; font-size: 11.5px; }

/* ---------- sell page ---------- */
.sell-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .sell-grid { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1px solid var(--ring); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow); }
.panel h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.panel .sub { color: var(--ink-2); font-size: 13.5px; margin: 0 0 14px; }
.big-search { width: 100%; font-size: 17px; padding: 13px 17px; border-radius: 14px; border: 2px solid var(--line);
  background: #fff; color: var(--ink); outline: none; margin-bottom: 14px; }
.big-search:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px rgba(77,173,91,.15); }
.result { display: flex; gap: 13px; align-items: center; background: #fdfbf5; border: 1px solid var(--line);
  border-radius: 14px; padding: 11px; margin-bottom: 10px; }
.result img { width: 62px; border-radius: 5px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.2)); }
.result .r-info { flex: 1; min-width: 0; }
.result .r-name { font-weight: 800; font-size: 14.5px; }
.result .r-set { color: var(--muted); font-size: 12px; margin: 1px 0 6px; font-weight: 600; }
.offer-tag { font-size: 16px; font-weight: 850; color: var(--leaf-dark); }
.offer-tag small { color: var(--muted); font-weight: 550; }
.result .addbtn { background: var(--leaf); border: 0; border-radius: 12px;
  padding: 10px 14px; color: #fff; font-weight: 750; cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 0 var(--leaf-dark); transition: transform .1s; }
.result .addbtn:hover { filter: brightness(1.06); }
.result .addbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--leaf-dark); }
.spin { color: var(--muted); padding: 8px 2px; font-weight: 600; }
.mode-seg { display: inline-flex; background: #f3eee0; border: 2px solid var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.mode-seg button { border: 0; background: none; padding: 8px 18px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; font-weight: 700; border-radius: 99px; }
.mode-seg button.on { background: var(--leaf); color: #fff; box-shadow: 0 2px 0 var(--leaf-dark); }
.offer-total { font-size: 26px; font-weight: 850; margin: 10px 0 2px; color: var(--leaf-dark); }

/* quote items with condition + photos */
.q-item { background: #fdfbf5; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.q-top { display: flex; gap: 12px; align-items: center; }
.q-top img { width: 42px; border-radius: 4px; }
.q-mkt { color: var(--muted); font-size: 11px; font-weight: 600; }
.q-ctrl { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.cond-sel { background: #fff; border: 2px solid var(--line); border-radius: 9px; padding: 6px 9px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-2); outline: none; cursor: pointer; }
.cond-sel:focus { border-color: var(--leaf); }
.photo-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 2px dashed var(--line);
  border-radius: 9px; padding: 5px 10px; font-size: 12px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.photo-btn:hover { border-color: var(--poke-blue); color: var(--poke-blue); }
.photo-btn.has { border-style: solid; border-color: var(--leaf); color: var(--leaf-dark); }
.photo-btn img { width: 22px; height: 30px; object-fit: cover; border-radius: 3px; }
.q-warn { margin-top: 8px; font-size: 11.5px; font-weight: 650; color: #a3660a;
  background: rgba(255,203,5,.18); border-radius: 8px; padding: 6px 10px; }
.photo-note { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: rgba(42,117,187,.08);
  border: 1px solid rgba(42,117,187,.2); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.ref-note { font-size: 12.5px; font-weight: 650; color: #a3660a; background: rgba(255,203,5,.18);
  border: 1px solid rgba(201,158,0,.3); border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; }
.ref-toggle { display: block; background: none; border: 0; color: var(--poke-blue); font-size: 13px;
  font-weight: 750; cursor: pointer; padding: 0 0 12px; text-decoration: underline; text-underline-offset: 3px; }
.ref-toggle.on { color: var(--leaf-dark); }
.small-print { color: var(--muted); font-size: 11.5px; line-height: 1.55; margin-top: 14px; font-weight: 550; }

/* ---------- 3D card viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 60; background: rgba(30,28,36,.85);
  backdrop-filter: blur(9px); display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; touch-action: none; cursor: grab; }
.viewer:active { cursor: grabbing; }
.v3-x { position: absolute; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 12px;
  border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; cursor: pointer; }
.v3-stage { perspective: 1200px; }
.card3d { position: relative; width: min(330px, 74vw); aspect-ratio: 63/88;
  transform-style: preserve-3d; will-change: transform; }
.card3d img, .card3d .v3-noback { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 16px; backface-visibility: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.55); }
.v3b { transform: rotateY(180deg); }
.v3-noback { display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #2b2a33, #1c1b22); color: #6d6a7a; font-size: 54px; }
.v3-name { color: #fff; font-weight: 800; font-size: 17px; font-family: "Outfit", sans-serif; }
.v3-hint { color: rgba(255,255,255,.6); font-size: 12.5px; text-align: center; padding: 0 20px; }
.pcard .imgbox[data-vid] { cursor: zoom-in; }
.flip-badge { position: absolute; bottom: 8px; right: 8px; z-index: 2; background: rgba(43,42,51,.72);
  color: #fff; font-size: 10px; font-weight: 750; padding: 3px 8px; border-radius: 99px; backdrop-filter: blur(4px); }
/* branded reverse face for cards awaiting a real back scan */
.v3-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255,138,61,.35), transparent 60%),
    radial-gradient(100% 80% at 50% 115%, rgba(42,117,187,.3), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px),
    linear-gradient(160deg, #35333f, #201f28);
  border: 6px solid #17161d; }
.v3-brand b { color: #f5edd8; font-family: "Outfit", sans-serif; font-size: 26px; letter-spacing: -.5px; }
.v3-brand i { color: rgba(245,237,216,.5); font-size: 11px; font-style: normal; letter-spacing: .6px; text-transform: uppercase; }
.v3-brand .vb-ball { width: 74px; height: 74px; border-radius: 50%;
  background: linear-gradient(180deg, var(--poke-red) 47%, #17161d 47%, #17161d 56%, #f5edd8 56%);
  box-shadow: 0 8px 24px rgba(0,0,0,.45); position: relative; }
.v3-brand .vb-ball::after { content: ""; position: absolute; inset: 24px; border-radius: 50%;
  background: #f5edd8; border: 5px solid #17161d; }

/* actual-scan badge + copy chooser */
.scan-badge { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--leaf);
  color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 99px;
  box-shadow: 0 2px 8px rgba(61,140,72,.4); letter-spacing: .2px; }
.scan-badge.on-img { top: 8px; right: 8px; }
.low-badge.multi { background: var(--poke-blue); box-shadow: 0 2px 8px rgba(42,117,187,.4); }
.copies-modal { cursor: default; align-items: center; justify-content: center; padding: 18px; }
.copies-box { background: var(--card); border-radius: 20px; padding: 20px; width: min(680px, 96vw);
  max-height: 86vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.copies-box h3 { margin: 0; font-size: 19px; font-weight: 850; }
.copies-box .hint { color: var(--muted); font-size: 12.5px; margin: 4px 0 16px; }
.copies-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.copy-tile { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.copy-img { position: relative; width: 100%; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 63/88; background: #f0ebdd; display: flex; align-items: center; justify-content: center; }
.copy-img img { width: 100%; height: 100%; object-fit: cover; }
.copy-img .noimg { font-size: 40px; opacity: .5; }
.copy-tile .price { font-size: 13.5px; }
.copy-tile .add { width: 100%; padding: 9px; font-size: 12.5px; border-radius: 10px; border: 0;
  background: linear-gradient(180deg, #f3452a, var(--poke-red-dark)); color: #fff; font-weight: 750;
  cursor: pointer; box-shadow: 0 3px 0 #96200a; }
.copy-tile .add:disabled { background: #d9d3c2; color: #8d8a80; box-shadow: none; }

/* gift cards + basket upsell */
.gift-box { text-align: center; }
.gift-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.gift-amt { border: 0; border-radius: 14px; padding: 18px 8px; font-size: 18px; font-weight: 850; cursor: pointer;
  font-family: "Outfit", sans-serif; color: #4a3a00;
  background: linear-gradient(160deg, #ffd84d, #f5b800); box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.gift-amt:hover { filter: brightness(1.05); }
.gift-amt:active { transform: translateY(2px); box-shadow: none; }
.gc-row { display: flex; gap: 8px; margin-bottom: 6px; }
.gc-row input { flex: 1; background: #fff; border: 2px solid var(--line); border-radius: 10px; padding: 9px 12px;
  text-transform: uppercase; font-size: 13px; outline: none; }
.gc-row input:focus { border-color: var(--poke-blue); }
.gc-apply { border: 0; border-radius: 10px; padding: 0 16px; background: var(--poke-blue); color: #fff;
  font-weight: 750; cursor: pointer; }
.gc-line span:last-child { color: var(--leaf-dark); }
#gc-msg { color: var(--leaf-dark); }
.upsell { margin-bottom: 12px; }
.upsell-head { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 8px; }
.upsell-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.upsell-row::-webkit-scrollbar { display: none; }
.up-tile { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 92px;
  background: #fff; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 6px; cursor: pointer; }
.up-tile:hover { border-color: var(--poke-red); }
.up-tile img { width: 40px; height: 40px; object-fit: contain; }
.up-emoji { font-size: 26px; }
.up-name { font-size: 10.5px; font-weight: 700; color: var(--ink-2); text-align: center; line-height: 1.2;
  max-height: 26px; overflow: hidden; }
.up-price { font-size: 11px; font-weight: 800; color: var(--poke-red); }
@media (max-width: 560px) { .gift-amounts { grid-template-columns: repeat(2, 1fr); } }

/* ---- recently-sold ticker ---- */
.sold-ticker { margin: -6px 0 14px; font-size: 13.5px; color: #cfcbd8; background: var(--ink-dark); border: 0; border-radius: 999px; padding: 9px 17px; display: inline-block; box-shadow: 0 3px 12px rgba(20,18,26,.18); }
.sold-ticker b { color: #fff; }

/* ---- free-shipping nudge in the basket ---- */
.ship-nudge { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.ship-nudge b { color: var(--ink); }
.sn-bar { display: block; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sn-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--poke-yellow), var(--leaf)); transition: width .35s ease; }
.sn-done { color: var(--leaf-dark); font-weight: 750; }

/* ---- deep-link highlight (/p/<id> → ?p=) ---- */
.pcard.hl { animation: hlpulse 1.1s ease 3; }
@keyframes hlpulse { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 4px var(--poke-yellow), var(--shadow-lg); } }

/* ---- mailing-list band ---- */
/* Sits straight on top of the footer, one step lighter, with the footer's
   rainbow rule as the divider. The cream gap between them read as a mistake. */
.ml-band { background: var(--ink-soft); color: #f5edd8; padding: 34px 20px 38px; }
.ml-band + footer { margin-top: 0; }
.ml-in { max-width: 860px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: center; }
.ml-copy { display: flex; flex-direction: column; gap: 4px; max-width: 380px; }
.ml-copy b { font-size: 18px; }
.ml-copy span { font-size: 13.5px; color: #c9c2b2; }
.ml-form { display: flex; gap: 8px; }
.ml-form input { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 11px 14px; color: #fff; font: inherit; min-width: 220px; }
.ml-form input::placeholder { color: #9a94a5; }
.ml-form button { background: linear-gradient(180deg, var(--poke-yellow), #e6b400); border: 0; border-radius: 10px; padding: 11px 18px; font-weight: 800; color: #2b2a33; cursor: pointer; font-size: 14px; }
.ml-form button:hover { filter: brightness(1.06); }
.ml-msg { flex-basis: 100%; text-align: center; font-size: 14px; min-height: 18px; color: #9fe0a7; }
.ml-code { background: rgba(255,203,5,.15); border: 1px dashed var(--poke-yellow); border-radius: 8px; padding: 2px 10px; letter-spacing: 1px; user-select: all; }
@media (max-width: 560px) { .ml-form { flex-direction: column; width: 100%; } .ml-form input { min-width: 0; } }

/* ---- toast ---- */
#v-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: #2b2a33; color: #f5edd8; padding: 11px 20px; border-radius: 99px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .25s; z-index: 300; box-shadow: var(--shadow-lg); }
#v-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- share button on product cards ---- */
.meta .share { margin-left: auto; border: 0; background: none; cursor: pointer; font-size: 14px; opacity: .45; padding: 2px 4px; transition: opacity .15s, transform .15s; }
.meta .share:hover { opacity: 1; transform: scale(1.15); }

/* ---- build-a-bundle ---- */
.bundle-open { border: 1.5px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: var(--shadow); }
.bundle-open:hover { border-color: var(--poke-yellow); }
.bundler-box { max-width: 560px; width: min(560px, 94vw); }
.bd-controls { display: flex; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.bd-controls select { flex: 1; min-width: 180px; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-weight: 600; background: var(--card); }
.bd-controls input { flex: 1.2; min-width: 180px; border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 700; letter-spacing: 1px; }
.bd-controls input:focus { outline: none; border-color: var(--poke-yellow); }
.bd-results { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bd-empty { color: var(--muted); font-size: 13.5px; padding: 14px 4px; }
.bd-row { display: flex; align-items: center; gap: 12px; background: var(--page); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.bd-img { width: 44px; height: 60px; border-radius: 6px; overflow: hidden; flex: none; cursor: zoom-in; background: #eee; display: flex; align-items: center; justify-content: center; }
.bd-img img { width: 100%; height: 100%; object-fit: cover; }
.bd-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.bd-info b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-info span { font-size: 12.5px; color: var(--ink-2); }
.bd-row .add { flex: none; padding: 8px 14px; }
.bd-miss { font-size: 13px; color: var(--ink-2); background: #fdf3f0; border: 1px dashed #eac3b8; border-radius: 10px; padding: 10px 12px; margin-top: 4px; line-height: 1.9; }
.bd-miss span { background: #fff; border: 1px solid #eac3b8; border-radius: 6px; padding: 2px 7px; font-weight: 700; margin-right: 2px; }
.bd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; font-size: 14px; }
.bd-foot .add { padding: 10px 18px; }
@media (max-width: 560px) { .bundle-open { order: 5; } }