/* Fixed gaming side-tab; the cart state and href remain owned by app.js/index.html. */
.floating-cart {
  position: fixed;
  z-index: 25;
  top: clamp(max(120px, calc(env(safe-area-inset-top) + 20px)), 50vh, calc(100vh - 92px));
  left: max(0px, env(safe-area-inset-left));
  bottom: auto;
  box-sizing: border-box;
  width: 64px;
  height: 88px;
  min-width: 64px;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 8px 10px 5px;
  overflow: visible;
  border: 1px solid rgb(184 155 255 / 38%);
  border-left: 0;
  border-radius: 0 46px 46px 0;
  color: #fff;
  background: linear-gradient(155deg, #7842d9 0%, #4a68e8 64%, #258ac7 100%);
  box-shadow: 0 10px 28px rgb(27 22 61 / 27%), inset 0 1px rgb(255 255 255 / 24%), 2px 0 16px rgb(75 211 255 / 14%);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(-50%);
  transition: width .2s ease, min-width .2s ease, padding .2s ease, box-shadow .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.floating-cart[hidden] { display: none !important; }
.floating-cart-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 13px;
  color: #fff;
  background: rgb(255 255 255 / 13%);
  box-shadow: inset 0 1px rgb(255 255 255 / 20%);
}
.floating-cart-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.floating-cart-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.floating-cart-count {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #382c79;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(145deg, #ff527c, #e52f67);
  box-shadow: 0 3px 10px rgb(12 12 25 / 30%);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.floating-cart-count[hidden] { display: none !important; }
.floating-cart:focus-visible { outline: 3px solid #71dfff; outline-offset: 3px; }
.floating-cart:active { filter: brightness(1.08); }
.floating-cart.is-updated { animation: floating-cart-pop .48s cubic-bezier(.2,.85,.3,1); }
.floating-cart.is-entering { animation: floating-cart-enter .3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes floating-cart-enter {
  from { opacity: 0; transform: translate(-12px, -50%) scale(.94); }
  to { opacity: 1; transform: translate(0, -50%) scale(1); }
}
@keyframes floating-cart-pop {
  0% { transform: translateY(-50%) scale(1); }
  38% { transform: translateY(-50%) scale(1.07); }
  72% { transform: translateY(-50%) scale(.98); }
  100% { transform: translateY(-50%) scale(1); }
}
html[data-theme="light"] .floating-cart {
  border-color: rgb(255 255 255 / 55%);
  background: linear-gradient(155deg, #7941da 0%, #4268e9 64%, #1688bd 100%);
  box-shadow: 0 10px 26px rgb(74 65 138 / 23%), inset 0 1px rgb(255 255 255 / 28%), 2px 0 13px rgb(43 190 228 / 14%);
}
html[data-theme="light"] .floating-cart-count { border-color: #4f55bc; }
body:has(#search-panel:not(.hidden)) .floating-cart { display: none; }

@media (min-width: 641px) and (max-width: 1024px) {
  .floating-cart { width: 70px; min-width: 70px; height: 94px; min-height: 94px; }
  .floating-cart-icon { width: 40px; height: 40px; flex-basis: 40px; }
}
@media (min-width: 1025px) {
  .floating-cart { width: 60px; min-width: 60px; height: 82px; min-height: 82px; }
  .floating-cart-icon { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .floating-cart:hover,
  .floating-cart:focus-visible {
    width: 154px;
    min-width: 154px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 9px;
    padding: 10px 14px 10px 8px;
    border-color: rgb(218 202 255 / 76%);
    box-shadow: 0 14px 34px rgb(47 37 99 / 32%), inset 0 1px rgb(255 255 255 / 26%), 2px 0 18px rgb(75 211 255 / 18%);
  }
  .floating-cart:hover .floating-cart-label,
  .floating-cart:focus-visible .floating-cart-label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 12px;
  }
}
@media (max-height: 500px) {
  .floating-cart { top: 50%; height: 64px; min-height: 64px; }
  .floating-cart-icon { width: 34px; height: 34px; flex-basis: 34px; }
  @media (max-width: 640px) { .floating-cart { width: 54px; min-width: 54px; } }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cart { transition: none; }
  .floating-cart.is-entering,
  .floating-cart.is-updated { animation: none; }
}