/* SEKUREX — home-page features inside the CATALOGUE: the 1997 Bustin' Out cards door
   (owner, 1 Nov 2026; it replaced the FIRST OVERALL door) and the Yoda BO-YO band,
   shown as a sold record since 10 Oct 2026. Renamed from features-v2.css on 1 Nov 2026.

   Its own file rather than more of shop.css: the zone rewrites /css/* to a 4-hour
   browser cache (see public/_headers), so a returning visitor could pair the new
   markup with a stale shop.css. A new URL is always fetched fresh. Every rule here
   is scoped to .band--bo or .band--spot, so nothing else on the site changes. */

/* ---------- Bustin' Out door ----------
   The heading copies the card: a silver-foil plate, the navy starburst as the title
   bar and the red stamp lettering on it, so the card a buyer holds is the one they
   clicked. */
.bo-title{
  display:block;max-width:440px;margin:0 0 20px;padding:11px 12px 10px;border-radius:3px;
  background:linear-gradient(135deg,#d9dbe0 0%,#a9adb6 38%,#eceef1 55%,#9a9ea8 100%);color:#15161c;
  box-shadow:0 0 0 1px rgba(255,255,255,0.18),0 24px 54px rgba(0,0,0,0.55),0 0 46px rgba(36,58,140,0.35);
}
.bo-title-top{
  display:flex;justify-content:space-between;gap:12px;padding:0 4px 8px;
  font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:0.24em;
  text-transform:uppercase;color:#23252e;
}
.bo-title-main{
  display:block;padding:14px 16px 13px;border-radius:2px;
  background:radial-gradient(circle at 30% 40%,#2b3f8f 0%,#18235a 60%,#10173d 100%);color:#e2413f;
  font-family:var(--font-display);font-weight:800;font-size:clamp(28px,8vw,50px);
  line-height:1;letter-spacing:0.02em;text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 0 #7d1517,0 2px 0 #5c0f11,0 0 18px rgba(226,65,63,0.35);
}
.bo-title-sub{
  display:block;padding:9px 4px 0;text-align:center;
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:#23252e;
}
.band--bo .bo-build{color:var(--silver);}

/* The buy box: the price reads first, then the two buttons, then what covers the
   purchase. One framed plate so the decision sits in one place. */
.bo-buy{
  max-width:520px;margin:4px 0 24px;padding:18px 18px 16px;
  border:1px solid var(--hair-strong);border-radius:3px;background:rgba(5,5,11,0.6);
  box-shadow:inset 0 0 0 3px rgba(5,5,11,0.6),inset 0 0 0 4px var(--hair),0 18px 44px rgba(0,0,0,0.4);
}
@media (min-width:520px){.bo-buy{padding:22px 24px 18px;}}
.bo-tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-bottom:18px;}
.bo-tag-amt{
  display:flex;align-items:flex-start;font-family:var(--font-display);font-weight:800;
  font-size:clamp(44px,11vw,58px);line-height:0.9;letter-spacing:-0.01em;color:var(--bone);
}
.bo-tag-cur,.bo-tag-cents{font-size:0.42em;line-height:1;margin-top:0.18em;color:var(--gold-300);}
.bo-tag-cur{margin-right:3px;}
.bo-tag-terms{display:flex;flex-direction:column;gap:5px;}
.bo-tag-terms b{
  font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--gold-300);
}
.bo-tag-terms span{font-size:13px;color:var(--ash);}
.band--bo .bo-actions{margin-bottom:12px;}
@media (max-width:519.98px){.band--bo .bo-actions .mox-btn{flex:1 1 100%;justify-content:center;text-align:center;}}
.bo-assure{
  margin:0;font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--slate);
}

/* Mosaic: fifteen fronts full width, the two sealed stacks under them. Both are
   landscape, so each keeps its own frame instead of the house 3:4 crop. */
.band-mosaic--bo{grid-template-columns:1fr;}
.band-mosaic--bo a:nth-child(even){margin-top:0;}
.band-mosaic--bo .bo-wide img{aspect-ratio:4 / 3;}
.band-mosaic--bo .bo-sealed img{aspect-ratio:800 / 435;}
/* On one column the set leads, as the Yoda card does in its band below. */
@media (max-width:899.98px){.band--bo .band-visual-cards{order:-1;}}

/* Three Hall of Fame fronts. Framed tiles with no edge mask, captions under the photo. */
.bo-proof-label{margin-top:22px;}
.bo-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
@media (min-width:520px){.bo-proof{gap:14px;}}
.bo-proof a{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--hair);border-radius:2px;background:#06060c;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.bo-proof a:hover{
  border-color:var(--gold-400);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.55),0 0 24px rgba(217,164,65,0.14);
}
@media (prefers-reduced-motion:reduce){.bo-proof a:hover{transform:none;}}
.bo-proof img{display:block;width:100%;height:auto;aspect-ratio:480 / 624;object-fit:cover;}
.bo-proof span{
  padding:7px 8px 6px;border-top:1px solid var(--hair);background:rgba(5,5,11,0.9);
  font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;line-height:1.3;color:var(--bone);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Yoda BO-YO single-card band ----------
   Its own framed plate so it reads as a separate spot, not a third category door.
   Compact bands carry no bottom margin, so this one restores the band spacing
   before the next single lot. */
.band--spot{
  margin-bottom:56px;padding:26px 16px;
  border:1px solid var(--hair);border-radius:4px;background:var(--plate);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04),0 30px 80px rgba(0,0,0,0.45);
}
@media (min-width:520px){.band--spot{padding:32px 26px;}}
@media (min-width:900px){.band--spot{margin-bottom:68px;padding:46px 48px;}}
/* On one column the card leads, so the numbers in the copy have something to point at. */
@media (max-width:899.98px){.band--spot .spot-visual{order:-1;}}

/* The hook: the two numbers Topps printed, set as plates you can compare to the photos. */
.spot-numbers{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:6px 0 20px;}
@media (max-width:419.98px){.spot-numbers{grid-template-columns:1fr;}}
.spot-numbers > div{padding:14px 14px 12px;border:1px solid var(--hair-strong);border-radius:3px;background:rgba(5,5,11,0.55);}
.spot-numbers dt{
  margin-bottom:8px;font-family:var(--font-mono);font-size:9px;
  letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-400);
}
.spot-numbers dd{
  margin:0 0 6px;font-family:var(--font-mono);font-weight:500;
  font-size:clamp(17px,2.3vw,22px);letter-spacing:0.04em;color:var(--bone);white-space:nowrap;
}
.spot-numbers dd.spot-num-note{
  margin:0;font-family:var(--font-sans);font-weight:400;font-size:11.5px;
  letter-spacing:0;line-height:1.5;color:var(--ash);white-space:normal;
}

/* The card and its two proof close-ups. The front keeps the band-visual edge mask;
   the close-ups are framed tiles instead, since a soft edge would blur the very
   numbers they exist to show. */
.spot-visual > a img{max-height:none;}
.spot-proof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.spot-proof a{
  position:relative;display:block;overflow:hidden;border:1px solid var(--hair);border-radius:2px;background:#06060c;
  transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);
}
.spot-proof a:hover{
  filter:none;border-color:var(--gold-400);transform:translateY(-3px);
  box-shadow:0 18px 40px rgba(0,0,0,0.55),0 0 24px rgba(217,164,65,0.14);
}
@media (prefers-reduced-motion:reduce){.spot-proof a:hover{transform:none;}}
.spot-proof img{
  display:block;width:100%;max-height:none;height:auto;aspect-ratio:16 / 7;object-fit:cover;
  -webkit-mask-image:none;mask-image:none;
}
.spot-proof span{
  position:absolute;left:8px;bottom:7px;padding:3px 7px;border:1px solid var(--hair-strong);border-radius:2px;
  background:rgba(5,5,11,0.8);font-family:var(--font-mono);font-size:9px;letter-spacing:0.12em;color:var(--bone);
}

/* ---------- Sold record (Yoda, 10 Oct 2026) ----------
   Authority by restraint: one engraved SOLD plate with its date, and the Authenticity
   Guarantee seal beside it. Gold stays in hairlines and small caps; nothing is filled. */
.spot-sold{
  display:flex;flex-wrap:wrap;align-items:stretch;max-width:540px;margin:4px 0 22px;
  border:1px solid var(--hair-strong);border-radius:3px;background:rgba(5,5,11,0.6);
  box-shadow:inset 0 0 0 3px rgba(5,5,11,0.6),inset 0 0 0 4px var(--hair),0 18px 44px rgba(0,0,0,0.4);
}
.spot-sold-stamp{
  display:flex;flex-direction:column;justify-content:center;gap:6px;
  padding:16px 22px 14px;border-right:1px solid var(--hair);
}
.spot-sold-word{
  font-family:var(--font-display);font-weight:800;font-size:clamp(26px,6vw,34px);line-height:0.9;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-300);
  text-shadow:0 0 22px rgba(217,164,65,0.28);
}
.spot-sold-date{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.22em;text-transform:uppercase;color:var(--silver);
}
.spot-sold-ag{display:flex;align-items:center;gap:14px;flex:1 1 220px;padding:14px 18px;}
.spot-sold-seal{
  display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--hair-strong);background:radial-gradient(circle at 50% 35%,rgba(217,164,65,0.14),rgba(5,5,11,0) 70%);
}
.spot-sold-seal svg{width:24px;height:24px;fill:none;stroke:var(--gold-300);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.spot-sold-ag-text{display:flex;flex-direction:column;gap:4px;}
.spot-sold-ag-text strong{
  font-family:var(--font-mono);font-weight:500;font-size:10.5px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--bone);
}
.spot-sold-ag-text span{font-size:12px;line-height:1.45;color:var(--ash);}
@media (max-width:419.98px){
  .spot-sold-stamp{flex:1 1 100%;border-right:0;border-bottom:1px solid var(--hair);flex-direction:row;align-items:baseline;justify-content:space-between;}
}

/* The card keeps its colour; a small engraved plate on the photo says it has gone. */
.band--spot.is-sold .spot-visual{position:relative;}
.spot-sold-tag{
  position:absolute;z-index:2;top:14px;left:14px;padding:6px 12px 5px;
  border:1px solid var(--hair-strong);border-radius:2px;background:rgba(5,5,11,0.82);
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold-300);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}