/* Galaxyboxx singles binders: "Binder pages and card inspector" (design Singles-3, chosen 14 October 2026) for the
   Pokémon, Magic, One Piece and Yu-Gi-Oh singles and the Pokémon graded cards. The banner with the search box, the
   filter bar (listing.css), the binder of pockets beside the card inspector, the page steps.
   Markup: theme/inc/binder.php; behaviour: assets/js/binder.js (and listing.js for the bar and "Add to cart"). */

.gb-binder-page .wp-site-blocks > main{padding-block:0}
.gb-bpage{--gb-soft:#CBD5E1;--gb-control:rgba(255,255,255,.16);--gb-display:var(--wp--preset--font-family--display);--gb-body:var(--wp--preset--font-family--body)}
.gb-bpage.gb-bpage{margin-block:0}
.gb-bpage > *{margin-block:0 !important}
.wp-block-post-content .gb-bpage :is(h1, h2, h3, p, dl, dd, ul, figure){margin:0}

/* ---------- The banner: label, title and intro over the page's own picture; the search box on the right ---------- */
.gb-bhero{position:relative;overflow:hidden;background:var(--wp--preset--color--panel);border-bottom:1px solid var(--wp--custom--line)}
.gb-bhero__inner{
  position:static;box-sizing:border-box;width:100%;max-width:calc(var(--gb-measure) + 2 * var(--gb-gutter));margin-inline:auto;padding:28px var(--gb-gutter);
  min-height:200px;display:flex;align-items:center;justify-content:space-between;gap:48px;
}
.gb-bhero .gb-bhero__art{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:.25;pointer-events:none}
.gb-bhero__words{display:flex;flex-direction:column;gap:10px;min-width:0}
.gb-bhero__words > :not(.gb-bhero__art), .gb-bhero__search{position:relative}
.gb-bhero .gb-kicker{font-family:var(--gb-body);font-size:12px;line-height:16px;font-weight:700}
.gb-bhero__title{font-family:var(--gb-display);font-weight:700;font-size:clamp(34px,3.4vw,48px);line-height:1.12;letter-spacing:-.01em;color:var(--wp--preset--color--text);text-wrap:balance}
.gb-bhero__lede{max-width:620px;font-size:16px;line-height:24px;color:var(--gb-soft)}
.gb-bhero__search{flex:none;display:flex;flex-direction:column;gap:6px}
.gb-bhero__search label{font-size:14px;font-weight:700;color:var(--wp--preset--color--text)}
.gb-bhero__field{display:flex;gap:8px}
.gb-bhero__field input{
  box-sizing:border-box;width:320px;height:48px;padding:0 14px;background:var(--wp--preset--color--canvas);color:var(--wp--preset--color--text);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--wp--custom--radius--small);font:inherit;font-size:15px;font-weight:500;
}
.gb-bhero__field input::placeholder{color:var(--wp--preset--color--muted);opacity:1}
.gb-bhero__field input:focus-visible{outline:2px solid var(--wp--preset--color--cyan);outline-offset:1px;border-color:var(--wp--preset--color--cyan)}
.gb-bhero__field button{
  height:48px;min-height:48px;padding:0 20px;border:0;border-radius:var(--wp--custom--radius--small);background:var(--wp--preset--color--cyan);
  color:var(--wp--preset--color--canvas);font-family:var(--gb-body);font-size:14px;font-weight:700;cursor:pointer;
}
.gb-bhero__field button:hover{background:var(--wp--preset--color--cyan-hi)}

/* ---------- The filter bar (listing.css), with the binder page and its arrows on the right ---------- */
.gb-bbody{padding-bottom:40px}
.gb-bnotices{padding-top:16px}
.gb-btool{min-height:72px;padding-block:14px;border-bottom:1px solid var(--wp--custom--line)}
.gb-btool .gb-lbar__sort select{min-width:180px}
.gb-btool__pager{margin-left:auto;display:flex;align-items:center;gap:8px}
.gb-btool__label{margin-right:4px;font-size:14px;font-weight:600;color:var(--gb-soft);white-space:nowrap}
.gb-arrow{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;
  border:1px solid var(--gb-control);border-radius:var(--wp--custom--radius--small);color:var(--wp--preset--color--text);text-decoration:none;
}
.gb-arrow:hover{border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--cyan)}
.gb-arrow.is-off{border-color:var(--wp--custom--line);color:var(--wp--preset--color--muted);pointer-events:none}

/* ---------- The binder beside the inspector ---------- */
.gb-bwrap{display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:32px;align-items:start;padding-top:32px}
.gb-binder{padding:24px;background:var(--wp--preset--color--panel);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium);scroll-margin-top:96px}
.gb-binder__head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:32px;margin-bottom:16px}
.gb-binder__title{font-family:var(--gb-display);font-size:18px;line-height:24px;font-weight:600;color:var(--wp--preset--color--text)}
.gb-binder__long, .gb-binder__step{display:none}
.gb-binder__count{font-size:14px;font-weight:500;color:var(--wp--preset--color--muted);text-align:right}
.gb-binder__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}

/* Before binder.js has laid out the pages, a phone shows the first six pockets (a computer shows all 30) */
.gb-pocket[hidden]{display:none !important}

/* ---------- A pocket ---------- */
.gb-pocket{
  display:flex;flex-direction:column;min-width:0;padding:8px;background:var(--wp--preset--color--well);
  border:2px solid transparent;border-radius:var(--wp--custom--radius--medium);
}
.gb-pocket.is-selected{border-color:var(--wp--preset--color--cyan)}
.gb-pocket__photo{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:3 / 4;padding:8px;background:#FFFFFF;border-radius:6px;overflow:hidden;cursor:pointer}
.gb-pocket__face{display:block;height:100%;aspect-ratio:5 / 7;border-radius:6px;overflow:hidden}
.gb-pocket__face--back{display:none}
.gb-pocket.is-flipped .gb-pocket__face--front{display:none}
.gb-pocket.is-flipped .gb-pocket__face--back{display:block;animation:gb-flip .35s var(--wp--custom--ease)}
@keyframes gb-flip{from{transform:perspective(600px) rotateY(-90deg)}to{transform:none}}
/* a card's photo is a square with the card in the middle: it is cropped to the card's own shape */
.gb-pocket .gb-pocket__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.gb-pocket.is-out .gb-pocket__face{opacity:.55}
/* a graded card's photo is the whole slab: shown whole */
.gb-pocket--graded .gb-pocket__face{aspect-ratio:auto;width:100%}
.gb-pocket--graded .gb-pocket__img{object-fit:contain}
.gb-inspect__photos.is-graded .gb-inspect__img{aspect-ratio:auto;width:100%;object-fit:contain}
.gb-pocket__tag{
  position:absolute;top:8px;left:8px;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--wp--custom--radius--small);
  background:var(--wp--preset--color--cyan);color:var(--wp--preset--color--canvas);font-size:12px;font-weight:700;line-height:1;
}
.gb-pocket__tag--sold{background:#3A1A10;color:#FFB199}
.gb-pocket__tag--grade{left:auto;right:8px;background:var(--wp--preset--color--canvas);color:var(--wp--preset--color--gold)}
.gb-pocket__name{margin-top:10px !important;height:40px;overflow:hidden;font-family:var(--gb-body);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0}
.gb-pocket__name a{color:var(--wp--preset--color--text);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gb-pocket__name a:hover{color:var(--wp--preset--color--cyan)}
.gb-pocket__line{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 12px}
.gb-pocket__price{font-family:var(--gb-display);font-size:18px;line-height:24px;font-weight:600;color:var(--wp--preset--color--cyan)}
.gb-pocket__price del{margin-right:6px;font-size:14px;color:var(--wp--preset--color--muted)}
.gb-pocket__price ins{text-decoration:none}
.gb-pocket.is-out .gb-pocket__price{color:var(--wp--preset--color--muted);text-decoration:line-through}
.gb-pocket__selected{display:none;font-size:12px;font-weight:700;color:var(--wp--preset--color--cyan)}
.gb-pocket.is-selected .gb-pocket__selected{display:inline}
.gb-pocket__act{margin-top:auto;display:flex;gap:8px}
.gb-pocket__flip{
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;padding:0;
  border:1px solid var(--gb-control);border-radius:var(--wp--custom--radius--small);background:transparent;color:var(--wp--preset--color--text);cursor:pointer;
}
.gb-pocket__flip:hover{border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--cyan)}
.gb-pocket__flip[aria-pressed="true"]{background:rgba(0,229,255,.12);border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--cyan)}
.gb-binder:not(.is-js) .gb-pocket__flip{display:none}
.gb-pocket__buy{flex:1;min-width:0;margin:0}
.gb-pocket .gb-item__btn{width:100%}
.gb-pocket .gb-item__btn--added{font-size:13px}
.gb-pocket__detail{display:none}

/* ---------- The inspector ---------- */
.gb-inspect{
  position:sticky;top:96px;display:flex;flex-direction:column;gap:14px;padding:24px;
  background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium);
}
.gb-inspect .gb-kicker{font-family:var(--gb-body);font-size:12px;line-height:16px;font-weight:700}
.gb-inspect__body{display:flex;flex-direction:column;gap:14px}
.gb-inspect__photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gb-inspect__photos.is-single{grid-template-columns:minmax(0,1fr)}
.gb-inspect__face{display:flex;flex-direction:column;gap:6px}
.gb-inspect__frame{display:flex;align-items:center;justify-content:center;height:220px;padding:10px;background:#FFFFFF;border-radius:6px}
.gb-inspect .gb-inspect__img{display:block;height:100%;width:auto;aspect-ratio:5 / 7;max-width:100%;object-fit:cover;border-radius:5px}
.gb-inspect__face figcaption{font-size:12px;font-weight:600;color:var(--wp--preset--color--muted);text-align:center}
.gb-inspect__name{font-family:var(--gb-display);font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.005em;color:var(--wp--preset--color--text);overflow-wrap:anywhere}
.gb-inspect__price{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gb-inspect__amount{font-family:var(--gb-display);font-size:26px;line-height:32px;font-weight:700;color:var(--wp--preset--color--cyan)}
.gb-inspect__amount del{margin-right:6px;font-size:16px;color:var(--wp--preset--color--muted)}
.gb-inspect__amount ins{text-decoration:none}
.gb-inspect__price.is-out .gb-inspect__amount{color:var(--wp--preset--color--muted);text-decoration:line-through}
.gb-stock--one{background:rgba(178,102,255,.16);color:#C79BFF}
.gb-inspect__buy{margin:0}
.gb-lbody .gb-inspect .gb-item__btn{height:48px;min-height:48px;font-size:15px}
.gb-inspect__sold{padding:12px 14px;border-radius:var(--wp--custom--radius--small);background:rgba(255,77,0,.16);color:#FFB199;font-size:14px;font-weight:600;line-height:20px}
.gb-inspect__open{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;
  border:1px solid var(--gb-control);border-radius:var(--wp--custom--radius--small);color:var(--wp--preset--color--text);font-size:14px;font-weight:700;text-decoration:none;
}
.gb-inspect__open:hover{border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--cyan)}
.gb-inspect__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;padding-top:14px !important;border-top:1px solid var(--wp--custom--line)}
.gb-inspect__facts dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--wp--preset--color--muted)}
.gb-inspect__facts dd{margin:2px 0 0;font-size:14px;line-height:20px;font-weight:600;color:var(--wp--preset--color--text);overflow-wrap:anywhere}
.gb-inspect__ticks{display:flex;flex-direction:column;gap:10px;margin:0;padding:14px 0 0;list-style:none;border-top:1px solid var(--wp--custom--line);font-size:14px;line-height:20px;font-weight:500;color:var(--gb-soft)}
.gb-inspect__ticks li{display:flex;gap:10px}
.gb-inspect__ticks svg{flex:none;margin-top:1px;color:var(--wp--preset--color--cyan)}

/* ---------- The page steps under the binder ---------- */
.gb-bpager{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:32px}
.gb-bpager__pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.gb-bpager__n{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:48px;padding:0 10px;
  border:1px solid rgba(255,255,255,.12);border-radius:var(--wp--custom--radius--small);color:var(--wp--preset--color--text);font-size:15px;font-weight:600;text-decoration:none;
}
.gb-bpager__n:hover{border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--cyan)}
.gb-bpager__n[aria-current="page"]{background:var(--wp--preset--color--cyan);border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--canvas);font-weight:700}
.gb-bpager__gap{width:28px;text-align:center;color:var(--wp--preset--color--muted)}
.gb-bpager__step{
  box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;flex:none;
  border:1px solid rgba(255,255,255,.16);border-radius:var(--wp--custom--radius--small);color:var(--wp--preset--color--text);font-size:15px;font-weight:700;text-decoration:none;
}
.gb-bpager__step:hover{border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--cyan)}
.gb-bpager__step--next{padding:0 24px;background:var(--wp--preset--color--cyan);border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--canvas)}
.gb-bpager__step--next:hover{background:var(--wp--preset--color--cyan-hi);color:var(--wp--preset--color--canvas)}
.gb-bpager__step.is-off{background:transparent;border-color:var(--wp--custom--line);color:var(--wp--preset--color--muted);pointer-events:none}

.gb-bempty{margin-top:32px}

/* ---------- Narrower screens: the binder alone, each pocket leads to the card's page ---------- */
@media (max-width:1099px){
  .gb-bwrap{grid-template-columns:minmax(0,1fr)}
  .gb-inspect{display:none}
  .gb-pocket.is-selected{border-color:transparent}
  .gb-pocket.is-selected .gb-pocket__selected{display:none}
}

/* ---------- Phones: two pockets across, 30 to a binder page like every screen ---------- */
@media (max-width:860px){
  .gb-bhero{position:static;border-bottom:0}
  .gb-bhero__inner{display:block;min-height:0;padding:0}
  .gb-bhero__words{position:relative;overflow:hidden;justify-content:center;gap:8px;min-height:160px;padding:20px var(--gb-gutter);border-bottom:1px solid var(--wp--custom--line)}
  .gb-bhero .gb-kicker{font-size:11px}
  .gb-bhero .gb-kicker::before{width:24px}
  .gb-bhero__title{font-size:30px;line-height:36px}
  .gb-bhero__lede{font-size:14px;line-height:20px}
  .gb-bhero__search{padding:12px var(--gb-gutter) 0}
  .gb-bhero__search label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gb-bhero__field input{flex:1;width:auto;min-width:0;background:var(--wp--preset--color--surface)}
  .gb-bhero__field button{padding:0 16px}

  /* (the binder runs nearer the edge than the search box and the bar, as drawn) */
  .gb-btool{min-height:0;margin-inline:calc(var(--gb-gutter) - 12px) !important;padding-block:8px 12px;gap:8px}
  .gb-btool .gb-lbar__toggle{flex:1 1 0;justify-content:center;height:48px;font-weight:700}
  .gb-btool .gb-lbar__sort{flex:1 1 0;min-width:0}
  .gb-btool .gb-lbar__sort-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .gb-btool .gb-lbar__sort select{width:100%;min-width:0;height:48px;padding-left:10px}
  .gb-btool__pager{display:none}
  .gb-btool .gb-lbar__filters{order:3;flex:1 1 100%;padding:12px;background:var(--wp--preset--color--surface);border:1px solid var(--wp--custom--line);border-radius:var(--wp--custom--radius--medium)}
  .gb-btool.is-js .gb-lbar__filters:not(.is-open){display:none}

  .gb-bbody{padding-inline:12px}
  .gb-bwrap{padding-top:12px}
  .gb-binder{padding:10px}
  .gb-binder__head{min-height:56px;margin-bottom:0;padding:0 2px 8px}
  .gb-binder__long{display:inline}
  .gb-binder__short, .gb-binder__count{display:none}
  .gb-binder__title{font-size:16px}
  .gb-binder__step{display:inline-flex}
  .gb-arrow--go:not(.is-off){background:var(--wp--preset--color--cyan);border-color:var(--wp--preset--color--cyan);color:var(--wp--preset--color--canvas)}
  .gb-binder__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gb-pocket{padding:8px}
  .gb-pocket__photo{height:200px;aspect-ratio:auto;padding:12px 8px}
  .gb-pocket__tag{top:6px;left:6px;height:22px;padding:0 7px;font-size:11px}
  .gb-pocket__tag--grade{left:auto;right:6px}
  .gb-pocket__name{margin-top:8px !important;height:36px;font-size:13px;line-height:18px}
  .gb-pocket__line{margin:2px 0 10px}
  .gb-pocket__price{font-size:16px;line-height:22px}
  .gb-pocket__act{gap:6px}
  .gb-pocket__wide{display:none}
  .gb-lbody .gb-pocket .gb-item__btn{padding:0 8px}

  .gb-bpager{gap:10px;padding:12px 8px 0}
  .gb-bpager__pages{display:none}
  .gb-bpager__step{flex:1;padding:0 12px;font-size:14px}
  .gb-bpager__step svg{display:none}
}