/* ============================================================
   Shop cards + Snipcart skin.
   Tokens only — checkout should feel like Seven Tuning, not a
   third-party overlay. Snipcart CSS itself is lazy-loaded.
   ============================================================ */

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}

.shop-pay {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.shop-card__act {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.shop-card__photo img {
  object-fit: cover;
  background: #0a0d14;
}

.shop-cart {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
  flex: none;
  cursor: pointer;
  z-index: 1;
  transition: color 0.16s, border-color 0.16s, background-color 0.16s;
}
.shop-cart[hidden] {
  display: none !important;
}

.shop-cart:hover,
.shop-cart.has-items {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.shop-cart svg {
  width: 14px;
  height: 14px;
}

.shop-cart__n {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}

.shop-cart--head {
  width: 36px;
  height: 36px;
  z-index: 2;
  flex: none;
}
.shop-cart--head svg {
  width: 16px;
  height: 16px;
}

.shop-cart-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 50px + 12px + 44px + 12px + env(safe-area-inset-bottom, 0px));
  z-index: 71;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
}
.shop-cart-float svg {
  width: 22px;
  height: 22px;
}
.shop-cart-float .shop-cart__n {
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  background: var(--text-inverse);
  color: var(--accent);
}
.shop-cart-float[hidden] {
  display: none;
}
.shop-cart-float.is-bump {
  animation: cartBump 0.42s var(--ease);
}
@keyframes cartBump {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@media (max-width: 899px) {
  .shop-cart-float {
    right: calc(6px + 42px + 8px);
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }
}

html.snipcart-modal--opened .shop-cart-float,
html.snipcart-cart--opened .shop-cart-float {
  display: none !important;
}

.shop-cart--lg {
  width: auto;
  height: 36px;
  padding: 0 var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 520;
  color: var(--text);
}

.shop-cart--lg svg {
  width: 16px;
  height: 16px;
}

.shop-cart--lg .shop-cart__n {
  position: static;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  font-size: 10px;
}

.chip--warn {
  border-color: color-mix(in oklab, var(--warn) 45%, transparent);
  color: var(--warn);
  background: color-mix(in oklab, var(--warn) 10%, transparent);
}

@media (max-width: 520px) {
  .shop-card__act {
    grid-template-columns: 1fr;
  }
}

html.snipcart-modal--opened .dock,
html.snipcart-cart--opened .dock,
html.snipcart-modal--opened .wa-float,
html.snipcart-cart--opened .wa-float,
html.snipcart-modal--opened .deal-float,
html.snipcart-cart--opened .deal-float,
html.snipcart-modal--opened .lang-float,
html.snipcart-cart--opened .lang-float,
html.snipcart-modal--opened .to-top,
html.snipcart-cart--opened .to-top,
html.snipcart-modal--opened .cookie-bar,
html.snipcart-cart--opened .cookie-bar {
  display: none !important;
}

/* Site reset (svg max-width) must not crush checkout icons, but forcing
   height:auto on every svg backfires for icons that have no intrinsic
   width/height of their own (e.g. payment-brand logos): both axes become
   "auto" and the element falls back to the UA default replaced-element size
   (~300x150), which is exactly the big blank box some users saw at the
   bottom of the cart. Cap it instead of leaving it unbounded. */
#snipcart svg {
  display: inline-block;
  max-width: none;
  height: auto;
  max-height: 28px;
}
#snipcart img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Official Snipcart tokens — follow the site theme.
   NOTE: Snipcart v3's real token names are --bgColor-default / --bgColor-modal /
   --borderColor-default / --borderColor-input. The bare --bgColor / --borderColor
   names below do not exist in Snipcart's stylesheet, so anything reading them
   silently fell back to Snipcart's hardcoded light-mode colours (white cards,
   light-grey modal) even while the rest of the page was in dark theme. */
#snipcart {
  --font-default: var(--font-ui);
  --font-alt: var(--font-mono);
  --border-radius: var(--r-md);
  --color-default: var(--text);
  --color-alt: var(--text-2);
  --color-icon: var(--accent);
  --color-link: var(--accent);
  --color-success: var(--ok);
  --color-error: var(--danger);
  --color-disabled: var(--text-3);
  --bgColor-default: var(--bg);
  --bgColor-modal: var(--bg);
  --bgColor-alt: var(--surface);
  --bgColor-input: var(--surface-2);
  --borderColor-default: var(--border);
  --borderColor-input: var(--border);
  --color-buttonPrimary: var(--accent);
  --color-buttonPrimary-hover: var(--accent-dim);
  --color-buttonPrimary-text: var(--accent-ink);
  --color-buttonSecondary: var(--surface-3);
  --color-buttonSecondary-text: var(--text);
  --color-badge-background: var(--accent);
  --color-badge-text: var(--accent-ink);
}

html.snipcart-cart--opened .snipcart-modal,
html.snipcart-modal--opened .snipcart-modal,
.snipcart-modal,
.snipcart-layout,
.snipcart-modal__container,
.snipcart-layout__footer {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
/* Empty when no payment gateway logo has anything to show — keep it
   transparent rather than a distinct surface tone, so it doesn't read as a
   stray blank box under the order summary. */
.snipcart-featured-payment-methods {
  background: transparent !important;
  color: var(--text) !important;
}

#snipcart .snipcart-button-primary,
#snipcart .snipcart-cart-button--highlight {
  background: var(--color-buttonPrimary);
  color: var(--color-buttonPrimary-text);
  border-radius: var(--r-md);
  font-weight: 560;
  text-transform: none;
  box-shadow: none;
}