/** Shopify CDN: Minification failed

Line 10:18 Unexpected "*"

**/
/* =========================================================================
   gx-interactions.css
   Z2QSTORE — new interaction layer (cart animation, notification, card
   hover reveal, product tabs, wishlist page). Purely additive: reuses the
   --pcard-*/--gx-* tokens already defined in component-card-gaming.css and
   theme-gaming-design-system.css, so colors/shadows/radii match exactly.
   Upload to: assets/gx-interactions.css
   ---------------------------------------------------------------------- */

/* Product page wishlist toggle (next to buy buttons — not a floating circle) */
.gx-product-wishlist-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding: 0.75em 1em;
  border: 1px solid var(--gx-border-strong, rgba(255, 255, 255, 0.14));
  border-radius: var(--gx-radius-pill, 999px);
  color: var(--gx-text, #fff);
  font-weight: 700;
  font-size: 1.2rem;
  cursor: pointer;
  position: relative;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.gx-product-wishlist-btn:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.gx-product-wishlist-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.gx-product-wishlist-btn svg {
  width: 16px;
  height: 16px;
}

.gx-product-wishlist-btn .pcard__heart-filled {
  display: none;
  color: #ef4444;
}

.gx-product-wishlist-btn input:checked ~ .pcard__heart-outline {
  display: none;
}

.gx-product-wishlist-btn input:checked ~ .pcard__heart-filled {
  display: block;
}

/* =========================================================================
   1) Add-to-cart button success / error animation
   ---------------------------------------------------------------------- */
[name="add"],
.quick-add__submit {
  position: relative;
  overflow: hidden;
}

.gx-btn-check {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.gx-btn-check svg {
  width: 22px;
  height: 22px;
}

.gx-btn-success {
  background: linear-gradient(180deg, #4ade80, #22c55e) !important;
  color: #052e16 !important;
  border-color: transparent !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.gx-btn-success > *:not(.gx-btn-check) {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.gx-btn-success .gx-btn-check {
  opacity: 1;
  transform: scale(1);
}

.gx-btn-error {
  animation: gx-shake 0.5s ease;
  background: #ef4444 !important;
  color: #fff !important;
}

@keyframes gx-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* =========================================================================
   2) Floating success notification + progress bar
   ---------------------------------------------------------------------- */
.gx-notif {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -24px);
  z-index: 9999;
  width: min(380px, calc(100vw - 24px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.gx-notif--visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

.gx-notif__card {
  position: relative;
  background: var(--pcard-bg-elevated, #17171f);
  border: 1px solid var(--pcard-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--pcard-radius-lg, 18px);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(182, 156, 255, 0.15);
  padding: 16px 16px 0;
  overflow: hidden;
}

.gx-notif__close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--pcard-text-muted, #a1a1aa);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.gx-notif__close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--pcard-text, #fff);
}

.gx-notif__close svg {
  width: 14px;
  height: 14px;
}

.gx-notif__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 26px;
  margin-bottom: 12px;
}

.gx-notif__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #22c55e);
  color: #052e16;
  flex-shrink: 0;
  animation: gx-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gx-notif__check svg {
  width: 13px;
  height: 13px;
}

@keyframes gx-pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.gx-notif__headline {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--pcard-text, #fff);
}

.gx-notif__body {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pcard-border, rgba(255, 255, 255, 0.08));
}

.gx-notif__thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--pcard-radius-md, 12px);
  background: var(--pcard-bg, #0b0b10);
  flex-shrink: 0;
}

.gx-notif__info {
  min-width: 0;
}

.gx-notif__title {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--pcard-text, #fff);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gx-notif__meta {
  margin: 0;
  font-size: 1.05rem;
  color: var(--pcard-text-muted, #a1a1aa);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gx-notif__actions {
  display: flex;
  gap: 8px;
  padding: 12px 0;
}

.gx-notif__actions .button {
  flex: 1;
  font-size: 1.15rem;
  padding: 0.7em 0.8em;
}

.gx-notif__progress {
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 -16px;
}

.gx-notif__progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--pcard-gold, #b69cff), var(--pcard-gold-dark, #8b5cf6));
}

@media screen and (max-width: 749px) {
  .gx-notif {
    top: 10px;
  }

  .gx-notif__actions {
    flex-direction: column;
  }
}

/* =========================================================================
   3) Card floating actions — hidden until hover / long-press
   ---------------------------------------------------------------------- */
.pcard__action-btn {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease;
}

.pcard:hover .pcard__action-btn,
.pcard:focus-within .pcard__action-btn,
.pcard.gx-pressed .pcard__action-btn {
  opacity: 1;
  transform: scale(1);
}

/* Always show on touch devices that can't hover, so the feature isn't lost */
@media (hover: none) {
  .pcard__action-btn {
    opacity: 1;
    transform: scale(1);
  }
}

/* =========================================================================
   4) Product page tabs
   ---------------------------------------------------------------------- */
.gx-tabs {
  margin-top: 20px;
}

.gx-tabs__list {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--gx-border, rgba(255, 255, 255, 0.08));
  scrollbar-width: none;
}

.gx-tabs__list::-webkit-scrollbar {
  display: none;
}

.gx-tabs__tab {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--gx-text-muted, #a1a1aa);
  font-weight: 700;
  font-size: 1.2rem;
  padding: 10px 16px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.gx-tabs__tab::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: var(--gx-gold, #b69cff);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.gx-tabs__tab:hover {
  color: var(--gx-text, #fff);
}

.gx-tabs__tab[aria-selected="true"] {
  color: var(--gx-text, #fff);
}

.gx-tabs__tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.gx-tabs__panels {
  padding-top: 16px;
}

.gx-tabs__panel {
  animation: gx-fade-in 0.3s ease;
}

@keyframes gx-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.gx-tabs__panel .product__accordion.accordion {
  border: none;
}

.gx-tabs__panel details {
  border: none;
}

.gx-tabs__panel .accordion__content {
  padding: 0;
}

/* =========================================================================
   5) Wishlist page grid
   ---------------------------------------------------------------------- */
.gx-wishlist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 24px 0;
}

.gx-wishlist-card {
  background: var(--gx-surface, #17171f);
  border: 1px solid var(--gx-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--gx-radius-lg, 18px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.gx-wishlist-card:hover {
  transform: translateY(-4px);
  border-color: rgba(182, 156, 255, 0.4);
  box-shadow: var(--gx-shadow-md, 0 10px 24px -12px rgba(0, 0, 0, 0.55));
}

.gx-wishlist-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--gx-bg, #0b0b10);
}

.gx-wishlist-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gx-wishlist-card__info {
  padding: 12px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gx-wishlist-card__title {
  color: var(--gx-text, #fff);
  font-weight: 700;
  font-size: 1.2rem;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gx-wishlist-card__price {
  color: var(--gx-gold, #b69cff);
  font-weight: 800;
  font-size: 1.3rem;
}

.gx-wishlist-card__actions {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  margin-top: auto;
}

.gx-wishlist-card__actions .button {
  flex: 1;
  font-size: 1.1rem;
  padding: 0.6em 0.7em;
}

.gx-wishlist-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--gx-text-muted, #a1a1aa);
}

.gx-wishlist-empty svg {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
  color: var(--gx-text-faint, #71717a);
}

/* =========================================================================
   Reduced motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .gx-notif,
  .gx-btn-check,
  .gx-tabs__tab::after,
  .gx-tabs__panel,
  .pcard__action-btn,
  .gx-wishlist-card {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   FIX 1 — price showing twice when a product has no discount.
   Explicit safety-net: only ONE of .price__regular / .price__sale may be
   visible at a time, driven strictly by whether the outer .price element
   carries .price--on-sale. This overrides any other rule, ours or Dawn's.
   ---------------------------------------------------------------------- */
.price__regular {
  display: flex !important;
}

.price--on-sale .price__regular {
  display: none !important;
}

.price__sale {
  display: none !important;
}

.price--on-sale .price__sale {
  display: flex !important;
}

/* =========================================================================
   FIX 2 — wishlist removed (hidden) per request. The underlying feature
   files are left in place and harmless; this just hides every wishlist
   entry point site-wide. Delete this block later to bring it back.
   ---------------------------------------------------------------------- */
.pcard__wishlist-btn,
.gx-product-wishlist-btn,
[data-gx-wishlist-count] {
  display: none !important;
}

/* =========================================================================
   FIX 3 — stop Dawn's own native cart popup from also appearing.
   Keeps our custom .gx-notif as the only add-to-cart confirmation.
   If clicking the header cart icon relied on this element for a preview
   (rather than navigating straight to /cart), tell me and I'll swap this
   for a more surgical JS-based fix instead of a blanket hide.
   ---------------------------------------------------------------------- */
cart-notification,
#cart-notification {
  display: none !important;
}

/* =========================================================================
   FIX 4 — Add to Cart button: force the premium gold/purple pill look
   regardless of which Dawn button class it happens to carry, and make
   sure the quantity +/- buttons are always clickable (not covered by
   another element / not accidentally non-interactive).
   ---------------------------------------------------------------------- */
[name="add"] {
  background: linear-gradient(180deg, var(--gx-gold-light, #c9b5ff), var(--gx-gold, #b69cff)) !important;
  color: var(--gx-gold-text, #1a1625) !important;
  border-color: transparent !important;
}

[name="add"]:hover {
  filter: brightness(1.06);
}

[name="add"][disabled] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--gx-text-faint, #71717a) !important;
}

.gx-quantity,
.gx-quantity .quantity,
.gx-quantity .quantity__button {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

.gx-quantity .quantity__button {
  cursor: pointer;
}

/* =========================================================================
   FIX 5 — cart page styling (/cart). Uses Dawn's standard, stable cart
   class names, so no Liquid changes are needed here — but this CSS file
   must actually be LOADED on the cart page for this to take effect. See
   the install note at the end of this file.
   ---------------------------------------------------------------------- */
.cart {
  color: var(--gx-text, #fff);
}

.cart .title,
.cart__title {
  color: var(--gx-text, #fff);
  font-weight: 800;
}

.cart-items,
table.cart-items {
  background: transparent;
}

.cart-item {
  background: var(--gx-surface, #17171f);
  border: 1px solid var(--gx-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--gx-radius-md, 12px);
  margin-bottom: 10px;
}

.cart-item__media,
.cart-item__image {
  border-radius: var(--gx-radius-sm, 8px);
  overflow: hidden;
}

.cart-item__name {
  color: var(--gx-text, #fff);
  font-weight: 700;
}

.cart-item__price-wrapper,
.cart-item .price {
  color: var(--gx-gold, #b69cff);
  font-weight: 800;
}

.cart-item__quantity .quantity {
  border: 1px solid var(--gx-border-strong, rgba(255, 255, 255, 0.14));
  border-radius: var(--gx-radius-pill, 999px);
  background: var(--gx-surface, #17171f);
  overflow: hidden;
}

.cart__footer,
.cart__blocks,
.cart__ctas {
  background: var(--gx-surface, #17171f);
  border: 1px solid var(--gx-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--gx-radius-lg, 18px);
  padding: 16px;
}

.totals__total-value,
.cart__ctas totals-value {
  color: var(--gx-gold, #b69cff) !important;
  font-weight: 800;
}

.cart__ctas [name="checkout"],
.cart__ctas .button--primary {
  background: linear-gradient(180deg, var(--gx-gold-light, #c9b5ff), var(--gx-gold, #b69cff)) !important;
  color: var(--gx-gold-text, #1a1625) !important;
  border-color: transparent !important;
  border-radius: var(--gx-radius-pill, 999px) !important;
  font-weight: 800;
}

/* =========================================================================
   INSTALL NOTE — required for FIX 5 (and for full site-wide consistency)
   ---------------------------------------------------------------------- *
   This stylesheet currently only loads on the product page and on pages
   that render a product card. The cart page (/cart) renders neither, so
   none of this file's rules — including FIX 5 above — reach it yet.

   To fix this once and for all, open layout/theme.liquid, find the line
   that loads base.css inside <head> (something like):
     {{ 'base.css' | asset_url | stylesheet_tag }}
   and add these three lines right after it:
     {{ 'component-card-gaming.css' | asset_url | stylesheet_tag }}
     {{ 'theme-gaming-design-system.css' | asset_url | stylesheet_tag }}
     {{ 'gx-interactions.css' | asset_url | stylesheet_tag }}
   That guarantees every page — cart, search, home, everything — gets the
   full design system, not just the pages that happen to load it already.
   ------------------------------------------------------------------- */