/* Space Vanta Theme 1.0 | Home Scene + Bundle | Bundle symbol (port) | HOME-SCENE-BUNDLE-004
   The global Bundle symbol: a floating set that opens and lifts its items out. This is a port of the .sv-bx rules on the
   standalone Product Collection page (scene-stage.css, 2026-11-04 version, final-state values), plus a numbered tag per item,
   a highlight for the ledger row that is pointed at, and a pause when the symbol is off screen.
   When the symbol moves into one shared file, replace this file and set-symbol.js; hsb.css does not depend on the internals. */
.sv-bx { --b: clamp(7.5rem, 13vw, 9.5rem); --t: calc(var(--b) * .56); --ease: var(--sv-pc-ease, cubic-bezier(.2,.8,.2,1)); --mx: 0; --my: 0; --sp: .5;
  position: relative; width: var(--b); height: var(--b); perspective: 900px; }
.sv-bx__float { position: absolute; inset: 0; transform-style: preserve-3d; animation: sv-bxfloat 6s ease-in-out infinite; }
@keyframes sv-bxfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.7rem); } }
.sv-bx.is-off .sv-bx__float { animation-play-state: paused; }
.sv-bx__cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(-24deg + var(--my) * -3deg)) rotateY(calc(-32deg + var(--mx) * 5deg)); transition: transform 1s var(--ease); }
.sv-bx.is-open .sv-bx__cube { transform: rotateX(calc(-32deg + var(--my) * -3deg)) rotateY(calc(-22deg + var(--mx) * 5deg)); }
.sv-bx__f { position: absolute; left: 0; top: 0; width: var(--b); height: var(--b); display: block; }
.sv-bx__f--front { transform: translateZ(calc(var(--b) / 2)); background: linear-gradient(180deg, #dfe5e8 0 78%, #506c80 78% 86%, #dfe5e8 86%); }
.sv-bx__f--front::after { content: ""; position: absolute; right: 0; top: 0; width: 34%; height: 34%; background: #506c80; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.sv-bx__f--back { transform: rotateY(180deg) translateZ(calc(var(--b) / 2)); background: #93a4b0; }
.sv-bx__f--left { transform: rotateY(-90deg) translateZ(calc(var(--b) / 2)); background: #b7c3cb; }
.sv-bx__f--right { transform: rotateY(90deg) translateZ(calc(var(--b) / 2)); background: #a9b8c1; }
.sv-bx__f--bottom { transform: rotateX(-90deg) translateZ(calc(var(--b) / 2)); background: #7f919d; }
.sv-bx__items { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: 0; padding: 0; list-style: none; transform-style: preserve-3d; }
.sv-bx__item { position: absolute; left: calc(var(--t) / -2); top: calc(var(--t) / -2); width: var(--t); height: var(--t); background: #fff; overflow: hidden;
  box-shadow: 0 10px 18px -8px rgba(38,50,58,.5); transform: translate3d(0, 0, calc(var(--i) * 2px)) scale(.86);
  transition: transform .9s var(--ease), opacity .35s ease; transition-delay: 0ms; }
.sv-bx__item img { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.sv-bx__itembtn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.sv-bx:not(.is-open) .sv-bx__itembtn { pointer-events: none; }
.sv-bx__shard { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #f4f5f6 0 46%, #506c80 46% 54%, #dfe3e6 54%); }
.sv-bx__no { position: absolute; left: 0; top: 0; min-width: 1.15rem; height: 1.15rem; display: grid; place-items: center; pointer-events: none; font: 600 .66rem/1 var(--sv-font-display, sans-serif); color: #fff; background: var(--sv-blue-ink, #1F55D6); }
.sv-bx.is-open .sv-bx__item { transform: translate3d(calc((var(--i) - (var(--n) - 1) / 2) * var(--b) * var(--sp)), calc(var(--b) * -.9), calc(var(--i) * 6px))
  rotateZ(calc((var(--i) - (var(--n) - 1) / 2) * 8deg)); transition-delay: calc(260ms + var(--i) * 90ms); }
.sv-bx.is-swap .sv-bx__item { opacity: 0; transition-delay: 0ms; }
.sv-bx__item.is-hot { outline: 2px solid var(--sv-blue, #2F6BFF); outline-offset: 2px; z-index: 2; }
.sv-bx.is-open .sv-bx__item.is-hot { transform: translate3d(calc((var(--i) - (var(--n) - 1) / 2) * var(--b) * var(--sp)), calc(var(--b) * -1), calc(var(--i) * 6px + 30px)) rotateZ(0deg); transition-delay: 0ms; }
.sv-bx__hinge { position: absolute; left: 0; top: 0; width: var(--b); height: 0; transform: translateZ(calc(var(--b) / -2)); transform-style: preserve-3d; }
.sv-bx__lid { position: absolute; left: 0; top: 0; width: var(--b); height: var(--b); display: block; transform-origin: 50% 0; transform: rotateX(90deg);
  background: linear-gradient(135deg, #f2f5f6, #d4dce1); transition: transform .9s var(--ease); }
.sv-bx__lid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #506c80; }
.sv-bx.is-open .sv-bx__lid { transform: rotateX(196deg); }
.sv-bx__floor { position: absolute; left: -30%; right: -30%; bottom: -1.6rem; height: 1.2rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(38,50,58,.28), rgba(38,50,58,0)); transition: transform .9s var(--ease), opacity .9s var(--ease); }
.sv-bx.is-open .sv-bx__floor { transform: scale(1.1); opacity: .85; }

/* the small card that opens when an item is picked (same content as the standalone page) */
.sv-bx-mini { position: absolute; left: 50%; bottom: 3.6rem; transform: translateX(-50%); z-index: 6; width: min(14rem, 88%); padding: .8rem .9rem .9rem;
  background: #fff; border: 1px solid rgba(67,84,96,.3); box-shadow: 0 18px 30px -16px rgba(27,32,38,.5); color: #26323a; }
.sv-bx-mini[hidden] { display: none; }
.sv-bx-mini img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #fff; margin-bottom: .6rem; }
.sv-bx-mini p { margin: 0 0 .6rem; font-weight: 500; font-size: .88rem; padding-right: 1.2rem; }
.sv-bx-mini a { font-size: .84rem; color: inherit; text-underline-offset: 3px; }
.sv-bx-mini button { position: absolute; top: .2rem; right: .45rem; font-size: 1.3rem; line-height: 1; cursor: pointer; background: none; border: 0; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .sv-bx__float { animation: none !important; }
  .sv-bx__item, .sv-bx__lid, .sv-bx__cube, .sv-bx__floor { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}

/* v6: the Bundle box on its own warm amber palette (same variables as the Product Collection page) */
.sv-bx { --bx-front: #e6bc7b; --bx-stripe: #26323a; --bx-back: #a87a3c; --bx-left: #c99b59; --bx-right: #b98b4a; --bx-bottom: #8c6232; --bx-lid1: #f3d9ac; --bx-lid2: #deb87d; }
.sv-bx__f--front { background: linear-gradient(180deg, var(--bx-front) 0 78%, var(--bx-stripe) 78% 86%, var(--bx-front) 86%); }
.sv-bx__f--front::after { background: var(--bx-stripe); }
.sv-bx__f--back { background: var(--bx-back); } .sv-bx__f--left { background: var(--bx-left); } .sv-bx__f--right { background: var(--bx-right); } .sv-bx__f--bottom { background: var(--bx-bottom); }
.sv-bx__lid { background: linear-gradient(135deg, var(--bx-lid1), var(--bx-lid2)); }
.sv-bx__lid::after { background: var(--bx-stripe); }
