/* Shop: bag button and bag window (js/shop.js). Only new class names, so nothing of the existing design changes.
   Nothing here shows while the shop is closed: js/shop.js then never adds these elements. */
.shop-add { margin-top: .25rem; }
/* Bag button, bottom right; above the page, below the hover zoom copy (z-index 40) and the windows */
.shop-pill {
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  display: flex; align-items: center; gap: .6rem; padding: .6rem 1.1rem .6rem 1.3rem;
  border: 0; border-radius: 999px; background: var(--gold); color: var(--void); cursor: pointer;
  font: 700 .8rem/1.4 var(--classic); letter-spacing: .16em; text-transform: uppercase;
  box-shadow: 0 0 22px rgba(227, 196, 102, .45); transition: box-shadow .2s, transform .2s;
}
.shop-pill:hover { transform: translateY(-1px); box-shadow: 0 0 26px rgba(227, 196, 102, .7); }
.shop-count { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; border-radius: 999px; background: var(--void); color: var(--gold); font: 700 .75rem/1 var(--display); letter-spacing: 0; }
/* Bag window: the product window's look, narrower */
dialog.shop-dialog { width: min(94vw, 36rem); }
.shop-inner { display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.25rem, 4vw, 2rem); }
.shop-inner h3 { margin: 0; padding-right: 2.5rem; font: 700 1rem/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--lilac); }
.shop-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; max-height: 44dvh; overflow-y: auto; }
.shop-line { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; align-items: center; gap: .5rem .9rem; padding: .6rem .8rem .6rem .6rem; border: 1px solid var(--glass-edge); border-radius: 1.25rem; background: var(--glass); }
.shop-line img { width: 4.25rem; height: 4.25rem; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .6)); }
.shop-what { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.shop-name { font: 700 .66rem/1.5 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); }
.shop-meta { font-size: .9rem; color: var(--mist); font-variant-numeric: tabular-nums; }
.shop-qty { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.shop-qty button:not(.shop-remove) { width: 2rem; height: 2rem; display: grid; place-items: center; padding: 0; border: 1px solid var(--glass-edge); border-radius: 50%; background: transparent; color: var(--star); font: 500 1.1rem/1 var(--body); cursor: pointer; }
.shop-qty button:not(.shop-remove):hover { background: rgba(255, 255, 255, .12); }
.shop-qty button[disabled] { opacity: .35; cursor: default; }
.shop-qty span { min-width: 1.4em; text-align: center; }
.shop-remove { margin-left: .3rem; padding: 0; border: 0; background: none; color: var(--mist); font: 400 .85rem/1.4 var(--body); text-decoration: underline; cursor: pointer; }
.shop-remove:hover { color: var(--star); }
.shop-field select { width: 100%; padding: .65rem .85rem; border: 1px solid var(--glass-edge); border-radius: .7rem; background: rgba(7, 6, 15, .55); color: var(--star); font: 400 1rem/1.5 var(--body); }
.shop-totals { display: grid; grid-template-columns: 1fr auto; row-gap: .3rem; margin: 0; font-variant-numeric: tabular-nums; }   /* no column gap: the line above the total runs unbroken */
.shop-totals dt { color: var(--mist); }
.shop-totals dd { margin: 0; padding-left: 1rem; text-align: right; }
.shop-totals .shop-total { margin-top: .35rem; padding-top: .55rem; border-top: 1px solid var(--glass-edge); font: 700 1.05rem/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--star); }
/* Ways to pay, as small pills (names only: the payment brands' own logos appear on Stripe's page) */
.shop-pay { display: flex; flex-direction: column; gap: .5rem; }
.shop-pay-title { font: 500 .75rem/1.4 var(--classic); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.shop-pay-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.shop-pay-list li { padding: .2rem .65rem; border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); font: 500 .8rem/1.5 var(--body); letter-spacing: .03em; color: var(--star); white-space: nowrap; }
.shop-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.shop-actions .close { align-self: center; }
.shop-status:empty { display: none; }
/* Phones: the amount buttons go under the name */
@media (max-width: 480px) {
  .shop-line { grid-template-columns: 3.5rem minmax(0, 1fr); }
  .shop-line img { width: 3.5rem; height: 3.5rem; grid-row: span 2; }
  .shop-qty { grid-column: 2; }
}
.shop-add.volt .volt-line { filter: url("#volt-glow-bag"); }

/* Checkout celebration (js/celebrate.js) */
.qe-celebrate { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }
.qe-check { display: inline-block; width: 1.05em; height: 1em; margin-right: .5em; vertical-align: -0.1em; fill: none; stroke: #6bfeff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qe-check polyline { stroke-dasharray: 20; stroke-dashoffset: 20; animation: qe-draw .35s ease-in-out .1s forwards; }
@keyframes qe-draw { to { stroke-dashoffset: 0; } }

/* Checkout button: three bouncing dots while the payment page is being opened */
.shop-actions .cta { position: relative; }
.shop-actions .cta .qe-dots { display: none; }
.shop-actions .cta.is-loading { color: transparent; }
.shop-actions .cta.is-loading .qe-dots { display: flex; gap: .3rem; position: absolute; inset: 0; align-items: center; justify-content: center; }
.qe-dots i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--void); animation: qe-bounce 1s infinite; }
.qe-dots i:nth-child(2) { animation-delay: .1s; }
.qe-dots i:nth-child(3) { animation-delay: .2s; }
@keyframes qe-bounce { 0%, 50%, 100% { transform: translateY(0); } 25% { transform: translateY(-.4rem); } }

@media (prefers-reduced-motion: reduce) {
  .qe-check polyline { animation: none; stroke-dashoffset: 0; }
  .qe-dots i { animation: none; }
}