:root {
  --purple: #4b1f83;
  --purple-dark: #32135d;
  --purple-light: #f4effa;
  --text: #202020;
  --muted: #6d6875;
  --border: #e5e0eb;
  --bg: #faf9fc;
  --white: #fff;
  --success: #176b3a;
  --warning: #8a5a00;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
}
.site-header {
  min-height: 76px;
  padding: 12px 5%;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-link { text-decoration: none; color: inherit; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand h1 { font-size: 18px; margin: 0; color: var(--purple); }
.brand p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }
.cart-button, .primary-button, .secondary-button {
  border-radius: 9px;
  padding: 11px 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 0;
  display: inline-block;
}
.cart-button, .primary-button { background: var(--purple); color: white; }
.cart-button:hover, .primary-button:hover { background: var(--purple-dark); }
.secondary-button { background: white; color: var(--purple); border: 1px solid var(--purple); }
.text-link { color: var(--purple); text-decoration: none; font-weight: 700; }
.hero {
  padding: 70px 5%;
  background: linear-gradient(135deg, #f3edf9, #fff);
}
.hero h2 { max-width: 720px; font-size: clamp(32px, 6vw, 58px); margin: 8px 0 15px; color: var(--purple-dark); }
.hero p:not(.eyebrow) { max-width: 600px; color: var(--muted); font-size: 17px; line-height: 1.6; }
.eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: 800; color: var(--purple); margin: 0 0 8px; }
.shop-section, .checkout-page, .receipt-page { max-width: 1200px; margin: 0 auto; padding: 45px 5%; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 25px; }
.section-heading h2, .card h2 { margin: 0 0 8px; color: var(--purple-dark); }
select, input {
  width: 100%;
  padding: 12px;
  border: 1px solid #d8d2df;
  border-radius: 8px;
  background: white;
  font: inherit;
}
#categoryFilter { width: auto; min-width: 180px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.product-card { background: white; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 3px 15px rgba(30,20,50,.04); }
.product-image { width: 100%; height: 220px; object-fit: cover; background: #f1edf5; }
.product-info { padding: 17px; }
.product-info h3 { margin: 0 0 7px; }
.product-info p { color: var(--muted); line-height: 1.5; font-size: 14px; }
.price { font-size: 20px; font-weight: 800; color: var(--purple); margin: 12px 0; }
.stock { font-size: 12px; color: var(--muted); margin-bottom: 12px; }
.add-button { width: 100%; padding: 11px; border: 0; border-radius: 8px; background: var(--purple); color: white; font-weight: 700; cursor: pointer; }
.add-button:disabled { opacity: .5; cursor: not-allowed; }
.card { background: white; border: 1px solid var(--border); border-radius: 14px; padding: 25px; box-shadow: 0 3px 15px rgba(30,20,50,.04); }
.checkout-layout { display: grid; grid-template-columns: 1.6fr .9fr; gap: 24px; }
.muted { color: var(--muted); line-height: 1.5; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin-top: 25px; }
label { display: flex; flex-direction: column; gap: 7px; font-weight: 700; font-size: 14px; }
.form-grid label:last-child { }
.actions { margin-top: 25px; }
.payment-panel { margin-top: 25px; padding: 20px; background: var(--purple-light); border: 1px solid #ded0ee; border-radius: 12px; }
.payment-panel h3 { margin-top: 0; color: var(--purple-dark); }
.payment-panel label { margin-top: 17px; }
.qr-wrap { text-align: center; margin: 18px 0; }
.qr-wrap img { width: min(300px, 100%); max-height: 400px; object-fit: contain; background: white; border-radius: 10px; }
.amount-box { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-radius: 9px; background: white; }
.amount-box strong { font-size: 24px; color: var(--purple); }
.warning { color: var(--warning); font-size: 13px; }
.hidden { display: none !important; }
.order-summary { position: sticky; top: 20px; height: fit-content; }
.cart-row { border-bottom: 1px solid var(--border); padding: 13px 0; }
.cart-row:last-child { border-bottom: 0; }
.cart-row-title { font-weight: 700; }
.cart-row-meta { color: var(--muted); font-size: 13px; margin-top: 4px; }
.cart-row-bottom { display: flex; justify-content: space-between; margin-top: 9px; }
.qty-control { display: flex; align-items: center; gap: 7px; }
.qty-control button { border: 1px solid var(--border); background: white; border-radius: 6px; width: 27px; height: 27px; cursor: pointer; }
.summary-total { display: flex; justify-content: space-between; border-top: 2px solid var(--text); margin-top: 15px; padding-top: 15px; font-size: 19px; }
.receipt-page { max-width: 850px; }
.receipt-actions { display: flex; justify-content: space-between; margin-bottom: 20px; }
.receipt { padding: 40px; }
.receipt-header { display: flex; gap: 20px; align-items: center; border-bottom: 2px solid var(--purple); padding-bottom: 20px; }
.receipt-header img { width: 90px; height: 90px; object-fit: contain; }
.receipt-header h1 { margin: 0; color: var(--purple-dark); }
.receipt-header h2 { margin: 12px 0 0; }
.receipt-table { width: 100%; border-collapse: collapse; margin: 25px 0; }
.receipt-table th, .receipt-table td { padding: 10px; border-bottom: 1px solid var(--border); text-align: left; }
.receipt-table th:last-child, .receipt-table td:last-child { text-align: right; }
.receipt-total { text-align: right; font-size: 22px; font-weight: 800; color: var(--purple); }
.status-badge { display: inline-block; padding: 7px 10px; border-radius: 20px; background: #fff4d8; color: var(--warning); font-weight: 700; font-size: 12px; }
footer { text-align: center; padding: 30px; color: var(--muted); font-size: 13px; }
.empty { padding: 40px; text-align: center; color: var(--muted); background: white; border: 1px dashed var(--border); border-radius: 12px; }
@media (max-width: 800px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-summary { position: static; grid-row: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: stretch; flex-direction: column; }
  #categoryFilter { width: 100%; }
  .receipt { padding: 20px; }
}
@media print {
  body { background: white; }
  .no-print { display: none !important; }
  .receipt-page { padding: 0; max-width: none; }
  .receipt { border: 0; box-shadow: none; }
}

/* =========================================================
   JNX PHOTObooth RECEIPT PRINTING
   ========================================================= */


.print-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 20, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.print-overlay.show {
  opacity: 1;
  visibility: visible;
}

.printer-scene {
  width: min(420px, 90vw);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 30px;
}

/* =========================
   PRINTER
========================= */

.printer {
  position: relative;
  width: 330px;
  z-index: 3;
}

.printer-top {
  height: 48px;
  background: linear-gradient(
    to bottom,
    #303038 0%,
    #202027 100%
  );
  border-radius: 18px 18px 8px 8px;
  box-shadow:
    0 8px 20px rgba(0,0,0,.35),
    inset 0 2px rgba(255,255,255,.08);
}

.printer-screen {
  position: absolute;
  top: 13px;
  left: 22px;
  width: 72px;
  height: 22px;
  border-radius: 6px;
  background: #101014;
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  padding-left: 8px;
}

.printing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7df6a5;
  box-shadow: 0 0 10px rgba(125,246,165,.8);
  animation: printerBlink 1s infinite;
}

@keyframes printerBlink {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

.printer-slot {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 39px;
  height: 11px;
  z-index: 6;
  background: #08080b;
  border-radius: 0 0 7px 7px;
  box-shadow:
    inset 0 3px 5px rgba(0,0,0,.8),
    0 2px 5px rgba(0,0,0,.5);
}

/* =========================
   PAPER
========================= */

.printed-paper {
  position: absolute;
  z-index: 2;

  top: 43px;
  left: 34px;
  width: 262px;

  background:
    linear-gradient(
      to right,
      rgba(0,0,0,.025),
      transparent 8%,
      transparent 92%,
      rgba(0,0,0,.025)
    ),
    #fffdf8;

  color: #17171c;

  padding: 25px 22px 28px;
  box-sizing: border-box;

  transform: translateY(0);
  clip-path: inset(0 0 100% 0);

  box-shadow:
    0 8px 20px rgba(0,0,0,.18);

  opacity: 1;
}

/*
  The paper itself stays anchored to the printer.
  Only the visible portion grows downward.
*/
.print-overlay.printing .printed-paper {
  animation: paperFeedDown 3.8s cubic-bezier(.22,.61,.36,1) forwards;
}

@keyframes paperFeedDown {
  0% {
    clip-path: inset(0 0 100% 0);
  }

  8% {
    clip-path: inset(0 0 94% 0);
  }

  25% {
    clip-path: inset(0 0 76% 0);
  }

  45% {
    clip-path: inset(0 0 55% 0);
  }

  65% {
    clip-path: inset(0 0 34% 0);
  }

  82% {
    clip-path: inset(0 0 16% 0);
  }

  94% {
    clip-path: inset(0 0 4% 0);
  }

  100% {
    clip-path: inset(0 0 0% 0);
  }
}

/* Paper texture */
.printed-paper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.018) 0px,
      rgba(0,0,0,.018) 1px,
      transparent 1px,
      transparent 4px
    );

  opacity: .45;
}

/* =========================
   PRINTED RECEIPT
========================= */

.paper-content {
  position: relative;
  z-index: 2;
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.55;
}

.paper-logo {
  text-align: center;
  font-weight: 900;
  font-size: 17px;
  letter-spacing: 2px;
  margin-bottom: 3px;
}

.paper-subtitle {
  text-align: center;
  font-size: 9px;
  letter-spacing: 1.5px;
  margin-bottom: 14px;
}

.paper-line {
  border-top: 1px dashed #555;
  margin: 10px 0;
}

.paper-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0;
}

.paper-item {
  margin: 8px 0;
}

.paper-item-name {
  font-weight: 700;
}

.paper-item-meta {
  font-size: 10px;
  opacity: .75;
}

.paper-total {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 900;
  margin-top: 12px;
}

.paper-footer {
  text-align: center;
  margin-top: 18px;
  font-size: 9px;
  opacity: .7;
}

/* =========================
   STATUS
========================= */

.printing-status {
  position: absolute;
  top: calc(100% + 22px);
  left: 0;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: .85;
}

.printing-status::after {
  content: "";
  display: inline-block;
  width: 18px;
  text-align: left;
  animation: printingDots 1.2s infinite;
}

@keyframes printingDots {
  0%   { content: ""; }
  33%  { content: "."; }
  66%  { content: ".."; }
  100% { content: "..."; }
}

/* =========================
   REALISTIC END MOVEMENT
========================= */

.print-overlay.finished .printed-paper {
  animation:
    paperWobble .65s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes paperWobble {
  0% {
    transform: translateX(0) rotate(0);
  }

  20% {
    transform: translateX(-2px) rotate(-.4deg);
  }

  40% {
    transform: translateX(2px) rotate(.35deg);
  }

  60% {
    transform: translateX(-1px) rotate(-.2deg);
  }

  80% {
    transform: translateX(1px) rotate(.1deg);
  }

  100% {
    transform: translateX(0) rotate(0);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 520px) {
  .printer {
    width: 290px;
  }

  .printed-paper {
    left: 29px;
    width: 232px;
  }
}

@media print {

  .print-overlay {
    display: none !important;
  }

}


/* JNX ORDER TRACKING - FORCE REFRESH BUTTON CLICKABLE */
#refreshStatusButton {
  position: relative !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

#refreshStatusButton:disabled {
  cursor: wait !important;
  pointer-events: auto !important;
}

/* ============================================================
   JNX MEMBER DISCOUNT
   ============================================================ */

.member-box {
  margin: 24px 0;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.025);
}

.member-box h3 {
  margin: 4px 0 6px;
}

.member-verify-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.member-verify-row input {
  flex: 1;
}

.member-message {
  margin-top: 10px;
  min-height: 20px;
  font-size: 14px;
}

.member-message.success {
  color: #18794e;
}

.member-message.error {
  color: #b42318;
}

.member-price-label {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .08);
}

@media (max-width: 600px) {
  .member-verify-row {
    flex-direction: column;
  }
}


/* =========================================================
   JNX MODERN E-COMMERCE SHOP
   Homepage redesign
========================================================= */

.shop-home {
  --shop-purple: #4b1f83;
  --shop-purple-dark: #291047;
  --shop-purple-soft: #f5f0fa;
  --shop-black: #151219;
  --shop-gray: #706b77;
  --shop-border: #e8e3ec;
  --shop-white: #ffffff;

  background: #faf9fc;
  color: var(--shop-black);
}


/* =========================
   HEADER
========================= */

.store-header {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255,255,255,.94);
  backdrop-filter: blur(18px);

  border-bottom: 1px solid var(--shop-border);
}

.store-header-inner {
  width: min(1320px, 92%);
  min-height: 78px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;
}

.store-brand {
  display: flex;
  align-items: center;
  gap: 12px;

  color: inherit;
  text-decoration: none;

  min-width: 220px;
}

.store-brand img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

.store-brand strong {
  display: block;

  color: var(--shop-purple-dark);

  font-size: 15px;
  letter-spacing: 1.5px;
}

.store-brand span {
  display: block;

  margin-top: 3px;

  color: var(--shop-gray);

  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
}

.store-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.store-nav a {
  color: #4c4652;
  text-decoration: none;

  font-size: 14px;
  font-weight: 700;

  transition: color .2s ease;
}

.store-nav a:hover {
  color: var(--shop-purple);
}

.store-cart {
  display: flex;
  align-items: center;
  gap: 8px;

  padding: 11px 15px;

  background: var(--shop-black);
  color: white;

  text-decoration: none;

  border-radius: 12px;

  font-size: 13px;
  font-weight: 800;

  transition:
    transform .2s ease,
    background .2s ease;
}

.store-cart:hover {
  background: var(--shop-purple);
  transform: translateY(-2px);
}

.cart-icon {
  font-size: 16px;
}

.store-cart b {
  min-width: 21px;
  height: 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: white;
  color: var(--shop-black);

  border-radius: 50%;

  font-size: 11px;
}


/* =========================
   HERO
========================= */

.store-hero {
  position: relative;
  overflow: hidden;

  min-height: 590px;

  background:
    radial-gradient(
      circle at 75% 40%,
      rgba(111,61,168,.22),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #f8f4fb 0%,
      #ffffff 55%,
      #f1eaf8 100%
    );
}

.hero-glow {
  position: absolute;

  width: 450px;
  height: 450px;

  right: -120px;
  top: -140px;

  border-radius: 50%;

  background: rgba(93,42,145,.09);

  filter: blur(5px);
}

.hero-content {
  position: relative;
  z-index: 2;

  width: min(1320px, 92%);
  min-height: 590px;

  margin: auto;

  display: grid;
  grid-template-columns: 1.05fr .95fr;

  align-items: center;

  gap: 50px;
}

.hero-copy {
  max-width: 680px;
}

.hero-badge {
  display: inline-flex;

  padding: 8px 13px;

  border-radius: 100px;

  background: rgba(75,31,131,.08);
  color: var(--shop-purple);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 2px;
}

.hero-copy h1 {
  margin: 20px 0 20px;

  max-width: 680px;

  color: var(--shop-purple-dark);

  font-size: clamp(44px, 6vw, 76px);
  line-height: .98;
  letter-spacing: -3px;
}

.hero-copy h1 span {
  display: block;
  color: var(--shop-purple);
}

.hero-copy p {
  max-width: 570px;

  margin: 0;

  color: var(--shop-gray);

  font-size: 17px;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  align-items: center;

  gap: 22px;

  margin-top: 32px;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  gap: 15px;

  padding: 15px 21px;

  border-radius: 12px;

  background: var(--shop-purple);
  color: white;

  text-decoration: none;

  font-size: 14px;
  font-weight: 800;

  box-shadow: 0 12px 30px rgba(75,31,131,.20);

  transition:
    transform .2s ease,
    background .2s ease;
}

.hero-button:hover {
  background: var(--shop-purple-dark);
  transform: translateY(-2px);
}

.hero-button span {
  font-size: 19px;
}

.hero-link {
  color: var(--shop-black);

  text-decoration: none;

  font-size: 14px;
  font-weight: 800;

  border-bottom: 1px solid #aaa2b1;

  padding-bottom: 4px;
}


/* HERO PRODUCT */

.hero-product {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-product-card {
  position: relative;

  width: min(390px, 85%);

  aspect-ratio: .84;

  border-radius: 28px;

  padding: 25px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background:
    linear-gradient(
      145deg,
      #2b1247,
      #5c2a87 55%,
      #8b5bb1
    );

  box-shadow:
    0 35px 70px rgba(45,20,70,.22),
    inset 0 1px rgba(255,255,255,.2);

  transform: rotate(3deg);

  transition: transform .4s ease;
}

.hero-product-card:hover {
  transform: rotate(0deg) translateY(-8px);
}

.hero-product-top,
.hero-product-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: rgba(255,255,255,.8);
}

.hero-product-top {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
}

.hero-product-card img {
  width: 58%;

  align-self: center;

  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 15px 20px rgba(0,0,0,.25));

  opacity: .95;
}

.hero-product-bottom {
  display: block;
}

.hero-product-bottom strong {
  display: block;

  color: white;

  font-size: 18px;
  letter-spacing: 2px;
}

.hero-product-bottom span {
  display: block;

  margin-top: 4px;

  font-size: 9px;
  letter-spacing: 2px;
}


/* =========================
   FEATURES
========================= */

.store-features {
  width: min(1200px, 92%);

  margin: -35px auto 0;

  position: relative;
  z-index: 10;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  background: white;

  border: 1px solid var(--shop-border);

  border-radius: 18px;

  box-shadow: 0 15px 40px rgba(30,20,50,.07);

  overflow: hidden;
}

.feature-item {
  min-height: 100px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 20px;

  border-right: 1px solid var(--shop-border);
}

.feature-item:last-child {
  border-right: 0;
}

.feature-icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;

  background: var(--shop-purple-soft);

  font-size: 18px;
}

.feature-item strong {
  display: block;

  font-size: 12px;
}

.feature-item span {
  display: block;

  margin-top: 4px;

  color: var(--shop-gray);

  font-size: 10px;
}


/* =========================
   SHOP
========================= */

.store-shop {
  width: min(1200px, 92%);

  margin: auto;

  padding: 110px 0 80px;
}

.store-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;

  margin-bottom: 30px;
}

.section-label {
  display: block;

  margin-bottom: 8px;

  color: var(--shop-purple);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 2px;
}

.store-section-heading h2 {
  margin: 0;

  color: var(--shop-purple-dark);

  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -1px;
}

.store-section-heading p {
  margin: 8px 0 0;

  color: var(--shop-gray);

  font-size: 14px;
}


/* SEARCH */

.shop-controls {
  display: flex;
  gap: 12px;

  margin-bottom: 30px;
}

.shop-search {
  flex: 1;

  position: relative;
}

.shop-search > span {
  position: absolute;

  left: 15px;
  top: 50%;

  transform: translateY(-50%);

  color: #89818f;

  font-size: 21px;

  pointer-events: none;
}

.shop-search input {
  width: 100%;

  height: 48px;

  padding: 0 16px 0 44px;

  border: 1px solid var(--shop-border);
  border-radius: 12px;

  background: white;

  outline: none;

  font-size: 13px;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.shop-search input:focus {
  border-color: var(--shop-purple);

  box-shadow:
    0 0 0 4px rgba(75,31,131,.08);
}

.shop-controls select {
  width: 190px;
  height: 48px;

  border-radius: 12px;

  border: 1px solid var(--shop-border);

  padding: 0 14px;

  font-size: 13px;

  cursor: pointer;
}


/* =========================
   PRODUCTS
========================= */

.modern-product-grid {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;
}

.modern-product-card {
  position: relative;

  background: white;

  border: 1px solid var(--shop-border);

  border-radius: 18px;

  overflow: hidden;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.modern-product-card:hover {
  transform: translateY(-5px);

  border-color: #d7c9e2;

  box-shadow:
    0 18px 45px rgba(30,20,50,.10);
}

.modern-product-image-wrap {
  position: relative;

  height: 275px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      145deg,
      #f7f3fa,
      #eee7f3
    );

  overflow: hidden;
}

.modern-product-image {
  width: 100%;
  height: 100%;

  object-fit: contain;

  padding: 28px;

  transition: transform .35s ease;
}

.modern-product-card:hover .modern-product-image {
  transform: scale(1.06);
}

.product-category-tag {
  position: absolute;

  top: 13px;
  left: 13px;

  padding: 6px 9px;

  border-radius: 7px;

  background: rgba(255,255,255,.9);

  color: var(--shop-purple);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1px;
}

.product-stock-tag {
  position: absolute;

  top: 13px;
  right: 13px;

  padding: 6px 9px;

  border-radius: 7px;

  background: rgba(21,18,25,.88);

  color: white;

  font-size: 9px;
  font-weight: 800;
}

.product-stock-tag.out {
  background: #e7e3e8;
  color: #756f7a;
}

.modern-product-info {
  padding: 18px;
}

.modern-product-info h3 {
  margin: 0;

  color: var(--shop-black);

  font-size: 16px;
}

.modern-product-description {
  min-height: 40px;

  margin: 7px 0 12px;

  color: var(--shop-gray);

  font-size: 12px;
  line-height: 1.55;
}

.modern-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;

  margin-bottom: 10px;
}

.modern-price {
  color: var(--shop-purple);

  font-size: 20px;
  font-weight: 900;
}

.member-price {
  color: #19804a;

  font-size: 10px;
  font-weight: 800;
}

.member-price strong {
  font-size: 12px;
}

.modern-product-info label {
  margin-bottom: 10px;

  color: #55505b;

  font-size: 10px;
  font-weight: 800;
}

.modern-product-info select {
  margin-top: 5px;

  height: 39px;

  padding: 0 10px;

  border: 1px solid var(--shop-border);

  border-radius: 9px;

  font-size: 12px;
}

.modern-add-button {
  width: 100%;

  height: 42px;

  border: 0;

  border-radius: 10px;

  background: var(--shop-black);
  color: white;

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

.modern-add-button:hover {
  background: var(--shop-purple);

  transform: translateY(-1px);
}

.modern-add-button:disabled {
  opacity: .45;

  cursor: not-allowed;

  transform: none;
}


/* =========================
   TRACK ORDER
========================= */

.track-section {
  width: min(1200px, 92%);

  margin: auto;

  padding: 30px 0 100px;
}

.track-card {
  position: relative;

  display: flex;
  align-items: center;

  gap: 25px;

  padding: 38px;

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      135deg,
      #241035,
      #4b1f83
    );

  box-shadow:
    0 25px 50px rgba(54,22,87,.18);
}

.track-card::after {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  right: -100px;
  top: -120px;

  border-radius: 50%;

  border: 60px solid rgba(255,255,255,.04);
}

.track-icon {
  position: relative;
  z-index: 2;

  width: 68px;
  height: 68px;

  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  background: rgba(255,255,255,.1);

  font-size: 28px;
}

.track-content {
  position: relative;
  z-index: 2;

  flex: 1;
}

.track-content .section-label {
  color: #cdb6e1;
}

.track-content h2 {
  margin: 0;

  color: white;

  font-size: 26px;
}

.track-content p {
  max-width: 650px;

  margin: 7px 0 20px;

  color: rgba(255,255,255,.7);

  font-size: 13px;
  line-height: 1.6;
}

.track-form {
  display: flex;

  max-width: 650px;

  gap: 9px;
}

.track-form input {
  height: 45px;

  border: 0;

  border-radius: 9px;

  padding: 0 14px;

  outline: none;
}

.track-form button {
  height: 45px;

  padding: 0 18px;

  border: 0;

  border-radius: 9px;

  background: white;
  color: var(--shop-purple-dark);

  font-size: 12px;
  font-weight: 900;

  cursor: pointer;

  white-space: nowrap;
}

.track-form button span {
  margin-left: 7px;
}


/* =========================
   FOOTER
========================= */

.store-footer {
  background: #151219;

  color: white;

  padding: 28px 0;
}

.footer-inner {
  width: min(1200px, 92%);

  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-brand img {
  width: 38px;
  height: 38px;

  object-fit: contain;
}

.footer-brand strong {
  display: block;

  font-size: 11px;
  letter-spacing: 1.5px;
}

.footer-brand span {
  display: block;

  margin-top: 3px;

  color: #99939f;

  font-size: 9px;
}

.footer-copy {
  color: #817b87;

  font-size: 10px;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 1050px) {

  .modern-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .store-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .feature-item:nth-child(2) {
    border-right: 0;
  }

  .feature-item:nth-child(1),
  .feature-item:nth-child(2) {
    border-bottom: 1px solid var(--shop-border);
  }

}


@media (max-width: 850px) {

  .store-nav {
    display: none;
  }

  .hero-content {
    grid-template-columns: 1fr;

    padding: 70px 0;
  }

  .store-hero,
  .hero-content {
    min-height: auto;
  }

  .hero-product {
    display: none;
  }

  .hero-copy h1 {
    font-size: clamp(44px, 12vw, 64px);
  }

  .modern-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}


@media (max-width: 600px) {

  .store-header-inner {
    min-height: 68px;
  }

  .store-brand {
    min-width: auto;
  }

  .store-brand img {
    width: 38px;
    height: 38px;
  }

  .store-brand strong {
    font-size: 12px;
  }

  .store-brand span {
    font-size: 7px;
  }

  .store-cart {
    padding: 9px 11px;
  }

  .store-cart > span:not(.cart-icon) {
    display: none;
  }

  .store-features {
    grid-template-columns: 1fr;
  }

  .feature-item {
    border-right: 0;
    border-bottom: 1px solid var(--shop-border);
  }

  .feature-item:last-child {
    border-bottom: 0;
  }

  .store-shop {
    padding-top: 75px;
  }

  .shop-controls {
    flex-direction: column;
  }

  .shop-controls select {
    width: 100%;
  }

  .modern-product-grid {
    grid-template-columns: 1fr;
  }

  .modern-product-image-wrap {
    height: 300px;
  }

  .track-card {
    flex-direction: column;
    align-items: flex-start;

    padding: 28px 22px;
  }

  .track-form {
    flex-direction: column;
  }

  .track-form input,
  .track-form button {
    width: 100%;
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* =========================
   CART TOAST
========================= */

.shop-toast {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 9999;

  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 250px;

  padding: 14px 16px;

  border-radius: 13px;

  background: #17141b;
  color: white;

  box-shadow:
    0 20px 45px rgba(0,0,0,.22);

  transform:
    translateY(20px);

  opacity: 0;

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.shop-toast.show {
  opacity: 1;

  transform:
    translateY(0);
}

.shop-toast > span {
  width: 29px;
  height: 29px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;

  background: #4b1f83;

  font-weight: 900;
}

.shop-toast strong {
  display: block;

  font-size: 12px;
}

.shop-toast small {
  display: block;

  margin-top: 3px;

  color: #aaa4b0;

  font-size: 10px;
}

.modern-empty {
  grid-column: 1 / -1;

  padding: 70px 20px;

  border-radius: 18px;
}

.modern-empty strong {
  display: block;

  color: #33283d;

  font-size: 17px;
}

.modern-empty p {
  margin: 7px 0 0;

  font-size: 12px;
}


@media (max-width: 600px) {

  .shop-toast {
    left: 15px;
    right: 15px;
    bottom: 15px;

    min-width: 0;
  }

}

/* =========================================================
   JNX CART ANIMATIONS
   ========================================================= */

.cart-button-smash {
  animation: jnxButtonSmash .45s cubic-bezier(.2,.8,.2,1);
}

@keyframes jnxButtonSmash {
  0% { transform: scale(1); }
  20% { transform: scale(.88); }
  42% { transform: scale(1.08); }
  65% { transform: scale(.96); }
  100% { transform: scale(1); }
}

.cart-count-pop {
  animation: jnxCartCountPop .5s cubic-bezier(.2,.8,.2,1);
}

@keyframes jnxCartCountPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.45) rotate(-8deg); }
  55% { transform: scale(.88) rotate(5deg); }
  75% { transform: scale(1.15) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* =========================================================
   CHECKOUT CART DASHBOARD
   ========================================================= */

.order-summary {
  position: sticky;
  top: 24px;
  align-self: start;
}

#cartItems {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.cart-row {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--white);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.cart-row:hover {
  transform: translateY(-2px);
  border-color: rgba(109,40,217,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.cart-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
}

.qty-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  background: var(--white);
}

.qty-control button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  transition:
    background .15s ease,
    transform .15s ease;
}

.qty-control button:hover {
  background: rgba(109,40,217,.07);
}

.qty-control button:active {
  transform: scale(.88);
}

.qty-control span {
  min-width: 32px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.summary-total strong {
  font-weight: 900;
}

#cartTotal {
  font-size: 22px;
}

#discountRow {
  color: var(--purple);
}

#cartItems .empty {
  padding: 30px 20px;
  text-align: center;
  border: 1px dashed var(--line);
}

/* =========================================================
   PLACE ORDER SMASH EFFECT
   ========================================================= */

.primary-button.order-smash {
  animation:
    jnxOrderSmash .55s cubic-bezier(.2,.8,.2,1),
    jnxOrderGlow .7s ease;
}

@keyframes jnxOrderSmash {
  0% { transform: scale(1); }
  18% { transform: scale(.90); }
  35% { transform: scale(1.07); }
  52% { transform: scale(.96); }
  70% { transform: scale(1.025); }
  100% { transform: scale(1); }
}

@keyframes jnxOrderGlow {
  0% {
    box-shadow: 0 0 0 rgba(109,40,217,0);
  }

  35% {
    box-shadow:
      0 0 0 8px rgba(109,40,217,.08),
      0 12px 35px rgba(109,40,217,.22);
  }

  100% {
    box-shadow: 0 0 0 rgba(109,40,217,0);
  }
}

.checkout-page.order-impact {
  animation: jnxCheckoutImpact .45s ease;
}

@keyframes jnxCheckoutImpact {
  0% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* PROCESSING STATE */

.primary-button.order-processing {
  position: relative;
  cursor: wait;
  opacity: .85;
}

.primary-button.order-processing::before {
  content: "";
  width: 14px;
  height: 14px;
  margin-right: 9px;
  display: inline-block;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: jnxSpinner .7s linear infinite;
}

@keyframes jnxSpinner {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 700px) {
  .order-summary {
    position: static;
  }

  .cart-row-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =========================================================
   JNX FORCE CART ANIMATIONS
   These animations intentionally use high z-index and
   !important rules so existing shop styles cannot hide them.
   ========================================================= */

/* BUTTON SMASH */

@keyframes jnxButtonSmashForce {
  0% {
    transform: scale(1) !important;
  }

  15% {
    transform: scale(.78) rotate(-2deg) !important;
  }

  30% {
    transform: scale(1.16) rotate(2deg) !important;
  }

  45% {
    transform: scale(.90) rotate(-1deg) !important;
  }

  65% {
    transform: scale(1.07) !important;
  }

  82% {
    transform: scale(.97) !important;
  }

  100% {
    transform: scale(1) !important;
  }
}


/* FLOATING +1 */

.jnx-floating-plus {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;

  color: #111 !important;
  background: #fff !important;

  font-family:
    Arial,
    Helvetica,
    sans-serif !important;

  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  padding: 7px 11px !important;
  border-radius: 999px !important;

  box-shadow:
    0 8px 24px rgba(0,0,0,.22) !important;

  transform:
    translate(-50%, 0)
    scale(.6) !important;

  transition:
    transform .75s cubic-bezier(.2,.8,.2,1),
    opacity .75s ease !important;
}

.jnx-floating-plus-show {
  opacity: 0 !important;

  transform:
    translate(-50%, -90px)
    scale(1.35) !important;
}


/* FLYING PRODUCT */

/* CART COUNT */

@keyframes jnxCartCountPopForce {
  0% {
    transform: scale(1) !important;
  }

  20% {
    transform: scale(1.65) rotate(-8deg) !important;
  }

  40% {
    transform: scale(.78) rotate(8deg) !important;
  }

  60% {
    transform: scale(1.25) rotate(-4deg) !important;
  }

  80% {
    transform: scale(.95) !important;
  }

  100% {
    transform: scale(1) !important;
  }
}


/* CARD IMPACT */

.cart-card-impact {
  animation:
    jnxCardImpactForce
    .65s
    cubic-bezier(.2,.8,.2,1) !important;
}

@keyframes jnxCardImpactForce {
  0% {
    transform: scale(1) !important;
  }

  20% {
    transform: scale(.96) !important;
  }

  40% {
    transform: scale(1.035) !important;
  }

  60% {
    transform: scale(.985) !important;
  }

  80% {
    transform: scale(1.012) !important;
  }

  100% {
    transform: scale(1) !important;
  }
}

/* =========================================================
   JNX CART EFFECTS
   No product flying animation
   ========================================================= */

/* BUTTON SMASH */

15% {
    transform: scale(0.78);
  }

  30% {
    transform: scale(1.16);
  }

  45% {
    transform: scale(0.90);
  }

  60% {
    transform: scale(1.07);
  }

  75% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1);
  }
}


/* CARD IMPACT */

.jnx-card-impact {
  animation:
    jnx-card-impact
    0.65s
    cubic-bezier(.2,.8,.2,1) !important;
}

@keyframes jnx-card-impact {

  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(0.96);
  }

  40% {
    transform: scale(1.035);
  }

  60% {
    transform: scale(0.985);
  }

  80% {
    transform: scale(1.012);
  }

  100% {
    transform: scale(1);
  }
}


/* CART COUNTER POP */

20% {
    transform: scale(1.6) rotate(-8deg);
  }

  40% {
    transform: scale(0.8) rotate(8deg);
  }

  60% {
    transform: scale(1.25) rotate(-4deg);
  }

  80% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}


/* FLOATING +1 */

/* SMALL SCREEN */

@media (max-width: 600px) {


}

/* =========================================================
   JNX ORDER IN THE COURT — GRAFFITI BOOM
   ========================================================= */

.order-court-boom {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center,
      rgba(125, 69, 168, 0.20) 0%,
      rgba(7, 5, 12, 0.96) 58%,
      rgba(0, 0, 0, 0.98) 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.order-court-boom.is-active {
  opacity: 1;
  visibility: visible;
  animation: courtScreenShake 1.05s ease-in-out both;
}

/* BIG CENTRAL IMPACT */

.court-boom-flash {
  position: absolute;
  width: 35vw;
  height: 35vw;
  min-width: 250px;
  min-height: 250px;
  max-width: 650px;
  max-height: 650px;
  border-radius: 50%;
  background: white;
  opacity: 0;
  transform: scale(0.05);
  filter: blur(2px);
}

.order-court-boom.is-active .court-boom-flash {
  animation: courtFlash 0.62s cubic-bezier(.1,.8,.2,1) forwards;
}

/* GRAFFITI CONTAINER */

.court-graffiti {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.72;
  text-align: center;
  transform: scale(0.02) rotate(-12deg);
  opacity: 0;
  filter:
    drop-shadow(0 8px 0 rgba(36, 16, 50, 0.95))
    drop-shadow(0 20px 25px rgba(0, 0, 0, 0.7));
}

.order-court-boom.is-active .court-graffiti {
  animation:
    courtGraffitiEntrance 1.45s
    cubic-bezier(.08, 1.45, .22, 1)
    0.03s
    forwards;
}

/* SMALL TOP TEXT */

.court-small {
  margin-bottom: 20px;
  font-family:
    "Arial Black",
    Impact,
    sans-serif;
  font-size: clamp(11px, 1.7vw, 20px);
  font-weight: 900;
  letter-spacing: 0.28em;
  color: white;
  opacity: 0;
  transform: translateY(35px) rotate(-4deg);
  text-shadow:
    3px 3px 0 #24102f,
    0 0 15px rgba(255,255,255,.5);
}

.order-court-boom.is-active .court-small {
  animation:
    courtSmallAppear 0.45s ease-out
    0.08s forwards;
}

/* MAIN GRAFFITI WORDS */

.court-graffiti strong {
  display: block;
  font-family:
    Impact,
    "Arial Black",
    sans-serif;
  font-size: clamp(82px, 15vw, 205px);
  font-weight: 900;
  letter-spacing: -0.065em;
  color: white;

  -webkit-text-stroke:
    clamp(4px, 0.65vw, 9px)
    #24102f;

  text-shadow:
    6px 6px 0 #e7c9ff,
    12px 12px 0 #7d45a8,
    19px 19px 0 #24102f,
    25px 25px 35px rgba(0,0,0,.6);

  transform: translateX(-120vw) skew(-9deg) rotate(-5deg);
  opacity: 0;
}

/* ORDER enters first */

.order-court-boom.is-active
.court-graffiti strong:nth-of-type(1) {
  animation:
    graffitiOrder 0.62s
    cubic-bezier(.1, 1.65, .25, 1)
    0.08s forwards;
}

/* IN THE enters from the opposite side */

.court-graffiti strong:nth-of-type(2) {
  font-size: clamp(55px, 10vw, 135px);
  margin-left: 7vw;
  color: #e7c9ff;
  transform: translateX(120vw) skew(-8deg) rotate(4deg);
}

.order-court-boom.is-active
.court-graffiti strong:nth-of-type(2) {
  animation:
    graffitiInThe 0.58s
    cubic-bezier(.1, 1.7, .25, 1)
    0.30s forwards;
}

/* COURT lands LAST and hardest */

.court-graffiti strong:nth-of-type(3) {
  font-size: clamp(95px, 18vw, 235px);
  color: white;
  transform:
    translateY(100vh)
    scale(1.35)
    skew(-10deg)
    rotate(-3deg);
}

.order-court-boom.is-active
.court-graffiti strong:nth-of-type(3) {
  animation:
    graffitiCourt 0.48s
    cubic-bezier(.08, 1.8, .2, 1)
    0.48s forwards;
}

/* SPRAY PAINT STARS */

.court-spray {
  position: absolute;
  z-index: 20;
  color: white;
  font-family: sans-serif;
  font-size: clamp(25px, 4vw, 65px);
  opacity: 0;
  text-shadow:
    3px 3px 0 #7d45a8,
    6px 6px 0 #24102f;
}

.spray-1 {
  top: 2%;
  left: -12%;
  transform: rotate(-20deg) scale(.1);
}

.spray-2 {
  right: -13%;
  top: 34%;
  transform: rotate(25deg) scale(.1);
}

.spray-3 {
  left: -10%;
  bottom: 4%;
  transform: rotate(-30deg) scale(.1);
}

.order-court-boom.is-active .spray-1 {
  animation: sprayBurst .6s ease-out .55s forwards;
}

.order-court-boom.is-active .spray-2 {
  animation: sprayBurst .6s ease-out .72s forwards;
}

.order-court-boom.is-active .spray-3 {
  animation: sprayBurst .6s ease-out .88s forwards;
}

/* PAINT SPLATTERS */

.order-court-boom::before,
.order-court-boom::after {
  content: "";
  position: absolute;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #7d45a8;
  opacity: 0;
  box-shadow:
    85px -45px 0 8px #e7c9ff,
    -95px 60px 0 4px #7d45a8,
    135px 75px 0 2px white,
    -150px -70px 0 7px #e7c9ff,
    210px -5px 0 3px #7d45a8,
    -220px 20px 0 2px white;
}

.order-court-boom.is-active::before {
  animation: paintSplatterLeft .8s ease-out .2s forwards;
}

.order-court-boom.is-active::after {
  animation: paintSplatterRight .8s ease-out .35s forwards;
}

/* IMPACT RAYS */

.court-boom-burst {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 45vh;
  background: white;
  transform-origin: center;
  opacity: 0;
  box-shadow:
    0 0 18px rgba(255,255,255,.8);
}

.burst-1 { transform: translate(-50%, -50%) rotate(0deg) scaleY(.05); }
.burst-2 { transform: translate(-50%, -50%) rotate(45deg) scaleY(.05); }
.burst-3 { transform: translate(-50%, -50%) rotate(90deg) scaleY(.05); }
.burst-4 { transform: translate(-50%, -50%) rotate(135deg) scaleY(.05); }

.order-court-boom.is-active .court-boom-burst {
  animation: courtBurst .75s cubic-bezier(.1,.9,.2,1) .25s forwards;
}

/* ANIMATIONS */

@keyframes courtFlash {
  0% {
    opacity: 0;
    transform: scale(.05);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(5);
  }
}

@keyframes courtGraffitiEntrance {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes courtSmallAppear {
  0% {
    opacity: 0;
    transform: translateY(35px) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(-2deg);
  }
}

@keyframes graffitiOrder {
  0% {
    opacity: 0;
    transform: translateX(-120vw) skew(-9deg) rotate(-5deg) scale(.4);
  }
  65% {
    opacity: 1;
    transform: translateX(7vw) skew(-9deg) rotate(-5deg) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skew(-9deg) rotate(-2deg) scale(1);
  }
}

@keyframes graffitiInThe {
  0% {
    opacity: 0;
    transform: translateX(120vw) skew(-8deg) rotate(4deg) scale(.4);
  }
  65% {
    opacity: 1;
    transform: translateX(-5vw) skew(-8deg) rotate(4deg) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translateX(0) skew(-8deg) rotate(2deg) scale(1);
  }
}

@keyframes graffitiCourt {
  0% {
    opacity: 0;
    transform:
      translateY(100vh)
      scale(1.45)
      skew(-10deg)
      rotate(-3deg);
  }
  55% {
    opacity: 1;
    transform:
      translateY(-5vh)
      scale(1.12)
      skew(-10deg)
      rotate(-3deg);
  }
  72% {
    transform:
      translateY(1vh)
      scale(.96)
      skew(-10deg)
      rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform:
      translateY(0)
      scale(1)
      skew(-8deg)
      rotate(-2deg);
  }
}

@keyframes sprayBurst {
  0% {
    opacity: 0;
    transform: scale(.1) rotate(0deg);
  }
  60% {
    opacity: 1;
    transform: scale(1.4) rotate(15deg);
  }
  100% {
    opacity: .9;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes paintSplatterLeft {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1);
  }
  100% {
    opacity: .75;
    transform: translate(-220%, -20%) scale(2.5);
  }
}

@keyframes paintSplatterRight {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.1);
  }
  100% {
    opacity: .75;
    transform: translate(180%, 30%) scale(2.5);
  }
}

@keyframes courtBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(.05);
  }
  25% {
    opacity: .95;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scaleY(1.8);
  }
}

@keyframes courtScreenShake {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-8px, 5px);
  }
  20% {
    transform: translate(8px, -5px);
  }
  30% {
    transform: translate(-7px, -4px);
  }
  40% {
    transform: translate(7px, 4px);
  }
  50% {
    transform: translate(-5px, -3px);
  }
  60% {
    transform: translate(5px, 3px);
  }
  70% {
    transform: translate(-3px, 2px);
  }
}

/* MOBILE */

@media (max-width: 600px) {
  .court-graffiti strong {
    font-size: clamp(58px, 19vw, 105px);
  }

  .court-graffiti strong:nth-of-type(2) {
    font-size: clamp(42px, 13vw, 78px);
  }

  .court-graffiti strong:nth-of-type(3) {
    font-size: clamp(65px, 22vw, 125px);
  }

  .court-small {
    letter-spacing: .14em;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  .order-court-boom.is-active,
  .order-court-boom.is-active .court-graffiti,
  .order-court-boom.is-active .court-boom-flash,
  .order-court-boom.is-active .court-boom-burst,
  .order-court-boom.is-active .court-small,
  .order-court-boom.is-active .court-graffiti strong,
  .order-court-boom.is-active .court-spray {
    animation: none !important;
  }

  .order-court-boom.is-active .court-graffiti,
  .order-court-boom.is-active .court-graffiti strong,
  .order-court-boom.is-active .court-small {
    opacity: 1;
    transform: none;
  }
}

/* =========================
   JNX + MCC CHECKOUT HEADER
========================= */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header .brand-logo,
.site-header .brand-mcc {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.site-header .brand-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 180px;
  text-align: center;
}

.site-header .brand-main {
  display: block;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 1.5px;
  line-height: 1;
  white-space: nowrap;
}

.site-header .brand-sub {
  display: block;
  margin-top: 6px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2.5px;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .site-header {
    gap: 12px;
  }

  .site-header .brand {
    gap: 8px;
  }

  .site-header .brand-logo,
  .site-header .brand-mcc {
    width: 38px;
    height: 38px;
  }

  .site-header .brand-center {
    min-width: 0;
  }

  .site-header .brand-main {
    font-size: 13px;
    letter-spacing: 1px;
  }

  .site-header .brand-sub {
    margin-top: 4px;
    font-size: 6px;
    letter-spacing: 1.5px;
  }
}