@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&display=swap");

:root {
  --color-bg: #0f0c05;
  --color-brighter-bg: #1a160d;
  --color-text: #f5f1e8;
  --color-text-darker: #d7d2c7;
  --color-text-secondary: #968e7b;
  --color-primary: #de8e16;
  --color-primary-hover: #f0a836;
  --color-primary-text: #000000;
  --color-primary-text-hover: #000000;

  --cs-primary-light: rgb(from var(--color-primary) calc(r + (255 - r) * 0.72) calc(g + (255 - g) * 0.72) calc(b + (255 - b) * 0.72));
  --cs-primary-deep: rgb(from var(--color-primary) calc(r * 0.73) calc(g * 0.73) calc(b * 0.73));
  --cs-discord: #5865f2;
  --cs-discord-deep: #4046b8;

  --color-secondary: rgb(from var(--color-brighter-bg) calc(r + (255 - r) * 0.09) calc(g + (255 - g) * 0.09) calc(b + (255 - b) * 0.09));
  --color-secondary-hover: rgb(from var(--color-brighter-bg) calc(r + (255 - r) * 0.15) calc(g + (255 - g) * 0.15) calc(b + (255 - b) * 0.15));
  --color-secondary-text: var(--color-text);
  --color-secondary-text-hover: var(--color-text);

  --color-tertiary: transparent;
  --color-tertiary-hover: rgb(from var(--color-primary) r g b / 0.16);
  --color-tertiary-text: #d7d2c7;
  --color-tertiary-text-hover: #f5f1e8;

  --color-removed: #e5484d;

  --cs-radius: 16px;
  --cs-border: #232017;
  --cs-border-width: 3px;

  --cs-hero-height: 55vh;
  --cs-bg-fade: 55vh;

  --content-inner-width: 1272px;
  --sidebar-width: 345px;
  --cs-col-gap: 10px;
  --cs-account-height: 52px;
  --cs-lead-offset: 72px;

  /* Minecraft-style crate viewer font. "Minecraft" is used if you load it yourself; Pixelify Sans is the built-in fallback. */
  --cs-mc-font: "Minecraft", "Pixelify Sans", "Courier New", monospace;
  --cs-mc-tooltip-font: var(--cs-mc-font);
}

@media (width > 960px) {
  :root { --content-padding: var(--widget-padding); }
}

html,
body {
  background-color: var(--color-bg);
}
body {
  position: relative;
  z-index: 0;
  font-family: "Sora", "Segoe UI", sans-serif;
  color: var(--color-text-darker);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgb(from var(--color-bg) r g b / 0.7) 0%, var(--color-bg) var(--cs-bg-fade)),
    var(--bg-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

.cs-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cs-hero-height);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.cs-particles span {
  position: absolute;
  bottom: -16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-primary-light);
  opacity: 0;
  animation: cs-rise 15s linear infinite;
}
.cs-particles span:nth-child(1)  { left: 5%;  width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: -1s; }
.cs-particles span:nth-child(2)  { left: 13%; width: 9px;  height: 9px;  animation-duration: 18s; animation-delay: -6s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(3)  { left: 21%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay: -3s; }
.cs-particles span:nth-child(4)  { left: 29%; width: 8px;  height: 8px;  animation-duration: 20s; animation-delay: -9s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(5)  { left: 37%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: -2s; }
.cs-particles span:nth-child(6)  { left: 45%; width: 10px; height: 10px; animation-duration: 22s; animation-delay: -11s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(7)  { left: 53%; width: 5px;  height: 5px;  animation-duration: 15s; animation-delay: -5s; }
.cs-particles span:nth-child(8)  { left: 61%; width: 8px;  height: 8px;  animation-duration: 19s; animation-delay: -8s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(9)  { left: 69%; width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: -4s; }
.cs-particles span:nth-child(10) { left: 77%; width: 9px;  height: 9px;  animation-duration: 21s; animation-delay: -10s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(11) { left: 85%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay: -1.5s; }
.cs-particles span:nth-child(12) { left: 92%; width: 8px;  height: 8px;  animation-duration: 18s; animation-delay: -7s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(13) { left: 33%; width: 4px;  height: 4px;  animation-duration: 17s; animation-delay: -13s; }
.cs-particles span:nth-child(14) { left: 66%; width: 4px;  height: 4px;  animation-duration: 19s; animation-delay: -14s; animation-name: cs-rise-b; }
@keyframes cs-rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.18;
  }
  30% {
    transform: translate(10px, -15vh);
  }
  55% {
    transform: translate(-10px, -28vh);
  }
  80% {
    transform: translate(8px, -40vh);
    opacity: 0.18;
  }
  100% {
    transform: translate(-4px, -50vh);
    opacity: 0;
  }
}
@keyframes cs-rise-b {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.14;
  }
  28% {
    transform: translate(-11px, -14vh);
  }
  52% {
    transform: translate(12px, -27vh);
  }
  80% {
    transform: translate(-8px, -41vh);
    opacity: 0.14;
  }
  100% {
    transform: translate(6px, -50vh);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-particles {
    display: none;
  }
}

@media (width > 960px) {
  body .site {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-auto-rows: auto;
    gap: 0;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }

  .site-main {
    padding: 30px 45px 30px 25px;
  }

  .site-main .site-header,
  .site-main .site-sale-banner,
  .site-main .site-home-categories,
  .site-main .site-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .site-main > .site-header { margin-bottom: calc(24px + var(--cs-lead-offset)); }

  .site-main > .site-header ~ * { margin-bottom: 28px; }
}
.site-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (width <= 960px) {

  body .site {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .site-main { order: -1; padding: 20px; gap: 20px; }
}

.site-content-widgets {
  display: block;
}
.site-content-widgets .store-sidebar {
  display: none;
}

body .site-content-widgets h1,
body .site-content-widgets h2,
body .site-content-widgets h3,
body .site-content-widgets h4,
body .site-content-widgets h5,
body .site-content-widgets h6 {
  text-align: left;
}

body .site-content-widgets h1,
body .site-content-widgets h2:first-child {
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 800;
}

.store-sidebar {
  padding: 30px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.store-sidebar .widget + .widget { margin-top: 0; }
.cs-sidebar-logo {
  display: block;
  margin: 0 -16px;
  padding: 0 0 4px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: var(--color-primary);
  transition: transform 0.12s ease;
}
.cs-sidebar-logo:hover { transform: scale(1.04); }
.cs-sidebar-logo:active { transform: scale(0.95); }
.cs-sidebar-logo img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}
.cs-sidebar-logo .cs-logo-text {
  display: block;
  font-weight: 800;
  font-size: 26px;
  padding: 10px 0;
}
@media (width <= 960px) {

  .store-sidebar { padding: 20px; }
  .store-sidebar .cs-sidebar-logo { display: none; }
}

.navigation-vertical .cs-menu-ico {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.navigation-vertical .cs-menu-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (width > 960px) {
  .navigation-vertical.widget { padding: 14px; }

  .navigation-vertical .cs-menu-head {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 6px;
    margin-bottom: 10px;
  }

  .navigation-vertical .menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.3;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-secondary);
  }

  .navigation-vertical .menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
  }
  .navigation-vertical .menu a:hover {
    color: var(--color-text);
    transform: scale(1.02);
  }
  .navigation-vertical .menu a.link-active {
    background: var(--color-tertiary-hover);
    color: var(--color-text);
    font-weight: 600;
  }

  .navigation-vertical ul ul { padding-left: 0; }
  .navigation-vertical ul ul a {
    padding: 9px 12px 9px 50px;
    font-size: 16px;
  }

  .navigation-vertical .has-children > a { max-width: calc(100% - 40px); }
}

.cs-menu-parent {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-menu-parent-name { flex: 1 1 auto; min-width: 0; }
.cs-menu-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: rotate 0.18s ease;
}
.cs-menu-chevron svg { width: 100%; height: 100%; }
.has-children.expanded > .cs-menu-parent .cs-menu-chevron { rotate: 180deg; }

@media (width > 960px) {
  .navigation-vertical .has-children { display: block; }
  .navigation-vertical .menu .cs-menu-parent {
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    transition: color 0.12s ease, background 0.12s ease;
  }
  .navigation-vertical .menu .cs-menu-parent:hover {
    color: var(--color-text);
    background: var(--color-tertiary-hover);
  }
  .navigation-vertical .has-children.expanded > .cs-menu-parent { color: var(--color-text); }
}

@media (width <= 960px) {
  .site-navigation .has-children { display: block; }
  .site-navigation .cs-menu-parent {
    padding: 11px 0;
    color: var(--color-text-secondary);
    font-size: 18px;
    transition: color 0.15s ease-in-out;
  }
  .site-navigation .cs-menu-parent:hover { color: var(--color-primary); }
  .site-navigation .has-children.expanded > .cs-menu-parent { color: var(--color-text); }
}

@media (width > 960px) {
  .store-sidebar .widget { padding: 14px; }
}

.store-sidebar .widget-title {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  padding: 4px 6px;
  margin-bottom: 10px;
}

.cs-purchase-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.cs-purchase {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cs-purchase-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-secondary);
  border: 2px solid var(--cs-border);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.cs-purchase-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.cs-purchase:hover .cs-purchase-avatar {
  transform: scale(1.08);
  border-color: var(--color-primary);
}
.cs-purchase.cs-tip-open .cs-purchase-avatar {
  border-color: var(--color-primary);
}
.cs-purchase-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom center;
  z-index: 50;
  min-width: 120px;
  max-width: 180px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.13s;
}
.cs-purchase-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--cs-border);
}
.cs-purchase.cs-tip-open .cs-purchase-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition: opacity 0.13s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0s;
}
.cs-purchase-tip-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-purchase-tip-pkg {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.35;
}
.cs-empty {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 4px 6px;
}

.widget-gift-card .cs-giftcard-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.widget-gift-card .cs-giftcard-input {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-text);
  box-shadow: none;
  height: auto;
  padding: 10px 12px;
  font-size: 14px;
}
.widget-gift-card .cs-giftcard-input::placeholder { color: var(--color-text-secondary); }
.widget-gift-card .cs-giftcard-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: none;
}

.widget-gift-card .cs-giftcard-input:-webkit-autofill,
.widget-gift-card .cs-giftcard-input:-webkit-autofill:hover,
.widget-gift-card .cs-giftcard-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
          box-shadow: 0 0 0 1000px var(--color-bg) inset;
  caret-color: var(--color-text);
}
.store-form input:-webkit-autofill,
.store-form input:-webkit-autofill:hover,
.store-form input:-webkit-autofill:focus,
.store-form textarea:-webkit-autofill,
.store-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
          box-shadow: 0 0 0 1000px var(--color-bg) inset;
  caret-color: var(--color-text);
}
.widget-gift-card .cs-giftcard-btn {
  flex-shrink: 0;
  padding: 0 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  border-radius: var(--cs-radius);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.widget-gift-card .cs-giftcard-btn:hover,
.widget-gift-card .cs-giftcard-btn:focus {
  transform: scale(1.03);
  color: var(--color-primary-text);
}
.widget-gift-card .cs-giftcard-alert {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-darker);
}

.cs-topcustomer {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  aspect-ratio: 720 / 344;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary) 55%, var(--cs-primary-deep) 100%);
}
.cs-topcustomer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(82% 82% at 100% 100%, var(--color-brighter-bg) 0%, var(--color-brighter-bg) 34%, transparent 88%);
}
.cs-topcustomer-char {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  overflow: hidden;
  z-index: 2;
}
.cs-topcustomer-char::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 90%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cs-primary-light) 0%, transparent 68%);
  z-index: 0;
}
.cs-topcustomer-fallback,
.cs-topcustomer-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(1.25);
  transform-origin: center top;
}
.cs-topcustomer-fallback {
  object-fit: cover;
  object-position: center top;
}
.cs-topcustomer-title {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  height: 26%;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4cqw 0 5cqw;
  background: var(--color-brighter-bg);
  border-radius: 0 0 0 16px;
}
.cs-topcustomer-title svg {
  flex: none;
  width: clamp(18px, 5cqw, 34px);
  height: clamp(18px, 5cqw, 34px);
  color: var(--color-primary);
}
.cs-topcustomer-title span {
  font-size: clamp(14px, 5cqw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text);
  white-space: nowrap;
}
.cs-topcustomer-body {
  position: absolute;
  left: 41%;
  top: 33%;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2.6cqw;
  padding: 0 4.5cqw 6cqw 4cqw;
}
.cs-topcustomer-line,
.cs-topcustomer-amount {
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.5);
}
.cs-topcustomer-line {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
}
.cs-topcustomer-user { font-weight: 700; }
.cs-topcustomer-divider {
  height: 1px;
  background: linear-gradient(to right, var(--color-tertiary-hover), transparent);
}
.cs-topcustomer-amount {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
}

.cs-goal {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cs-goal-ring {
  position: relative;
  width: 74px;
  height: 74px;
  flex: none;
}
.cs-goal-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
}
.cs-goal-track {
  fill: none;
  stroke: rgb(from var(--color-primary) r g b / 0.2);
  stroke-width: 9;
}
.cs-goal-bar {
  fill: none;
  stroke: url(#csGoalGrad);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--cs-goal-off, 100);
}
.cs-goal-grad-a { stop-color: var(--color-primary); }
.cs-goal-grad-b { stop-color: var(--cs-primary-light); }
.cs-goal-animate .cs-goal-bar {
  animation: cs-goal-fill 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cs-goal-fill {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: var(--cs-goal-off, 100); }
}
.cs-goal-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--color-primary);
}
.cs-goal-info { min-width: 0; }
.cs-goal-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 5px;
}
.cs-goal-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

.cs-goal-text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-darker);
}
.cs-goal-times {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--cs-account-height);
  height: auto;
  padding: 0;
}
.site-header-inner .user-actions.cs-account-bar {
  position: static;
  inset: auto;
  margin-left: auto;
}

.cs-mobile-logo { display: none; min-width: 0; }
.cs-mobile-logo img { height: 54px; width: auto; max-width: 100%; object-fit: contain; }
.cs-mobile-logo .cs-logo-text { font-weight: 800; font-size: 20px; color: var(--color-primary); }
@media (width <= 960px) {
  .cs-mobile-logo { display: block; color: var(--color-primary); text-decoration: none; }

  .site-header-inner .actions { position: static; inset: auto; }
}
@media (width > 960px) {
  .site-header-inner .actions { display: none; }
}

.cs-home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (width <= 600px) {
  .cs-home-cards { grid-template-columns: 1fr; }
}

.cs-home-cards .info {
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--color-primary);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--cs-primary-deep) 100%);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.cs-home-cards .info,
.cs-home-cards .info.server,
.cs-home-cards .info.discord {
  position: relative;
  inset: auto;
  margin: 0;
  width: auto;
  max-width: none;
  padding: 12px 14px;
  text-align: left;
  line-height: 1.3;
}
.cs-home-cards .info.discord {
  border-color: var(--cs-discord);
  background: linear-gradient(180deg, var(--cs-discord) 0%, var(--cs-discord-deep) 100%);
}
.cs-home-cards .info:hover,
.cs-home-cards .info:focus {
  transform: scale(1.02);
  text-decoration: none;
}

.cs-home-cards .info::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Ccircle cx='34' cy='20' r='17' fill='%23fff' fill-opacity='.09'/%3E%3Ccircle cx='96' cy='70' r='25' fill='%23fff' fill-opacity='.05'/%3E%3Ccircle cx='168' cy='30' r='10' fill='%23fff' fill-opacity='.11'/%3E%3Ccircle cx='232' cy='64' r='32' fill='%23fff' fill-opacity='.04'/%3E%3Ccircle cx='280' cy='22' r='14' fill='%23fff' fill-opacity='.08'/%3E%3Ccircle cx='306' cy='74' r='9' fill='%23fff' fill-opacity='.09'/%3E%3Ccircle cx='132' cy='12' r='7' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E") 0 0 / auto 90px repeat;
  animation: cs-cardfloat 7s linear infinite;
  animation-play-state: paused;
}
.cs-home-cards .info.discord::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Cdefs%3E%3Cpath id='d' fill='%23fff' d='M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/defs%3E%3Cuse href='%23d' transform='translate(6 8) scale(0.9) rotate(-15 12 12)' opacity='.1'/%3E%3Cuse href='%23d' transform='translate(120 42) scale(1.7) rotate(16 12 12)' opacity='.05'/%3E%3Cuse href='%23d' transform='translate(238 6) scale(0.95) rotate(-9 12 12)' opacity='.09'/%3E%3Cuse href='%23d' transform='translate(270 52) scale(1.3) rotate(11 12 12)' opacity='.05'/%3E%3Cuse href='%23d' transform='translate(74 58) scale(0.75) rotate(22 12 12)' opacity='.08'/%3E%3C/svg%3E") 0 0 / auto 90px repeat;
}
.cs-home-cards .info:hover::before,
.cs-home-cards .info:focus::before {
  animation-play-state: running;
}
@keyframes cs-cardfloat {
  to { background-position: 0 -90px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-home-cards .info::before { animation: none; }
}

.cs-home-cards .info .cs-nav-icon {
  --cs-hex-color: var(--color-primary);
  position: relative;
  isolation: isolate;
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: none;
}
.cs-home-cards .info .cs-nav-icon::before,
.cs-home-cards .info .cs-nav-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.cs-home-cards .info .cs-nav-icon::after {
  z-index: 0;
  background-color: var(--color-bg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.cs-home-cards .info .cs-nav-icon::before {
  z-index: 1;
  background-color: var(--cs-hex-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-home-cards .info.discord .cs-nav-icon {
  --cs-hex-color: var(--cs-discord);
}
.cs-home-cards .info .cs-nav-icon svg {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
}

.cs-home-cards .info .cs-nav-text { flex: 1; min-width: 0; }
.cs-home-cards .info .cs-nav-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cs-home-cards .info .cs-nav-subtitle {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cs-home-cards .info .cs-nav-sub-hover { display: none; }
.cs-home-cards .info:hover .cs-nav-sub-base,
.cs-home-cards .info:focus .cs-nav-sub-base { display: none; }
.cs-home-cards .info:hover .cs-nav-sub-hover,
.cs-home-cards .info:focus .cs-nav-sub-hover { display: inline; }

.cs-home-cards .info .cs-nav-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.85);
}

.cs-welcome { margin-bottom: 24px; }
.cs-welcome-pre {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}
.cs-welcome-name {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}

.cs-featured-card { display: none; }
.cs-featured-head {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
}
.cs-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.cs-featured-grid .cs-featured-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  text-decoration: none;
  transition: transform 0.12s ease;
}
.cs-featured-grid .cs-featured-card:hover,
.cs-featured-grid .cs-featured-card:focus {
  transform: scale(1.02);
  text-decoration: none;
}
.cs-featured-img {
  width: 64px;
  height: 64px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
}
.cs-featured-img img,
.cs-featured-img .image-default {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cs-featured-info { min-width: 0; }
.cs-featured-name {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text);
  margin-bottom: 1px;
}
.cs-featured-price {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary);
}
@media (width <= 991px) {
  .cs-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 767px) {
  .cs-featured-grid { grid-template-columns: 1fr; }
}

.cs-text-card { display: none; }
.cs-textcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cs-textcards .cs-text-card {
  display: block;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 22px;
}
.cs-text-card-head {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 12px;
}
.cs-text-card-body {
  color: var(--color-text-darker);
  background: transparent;
  padding: 0;
  font-size: 16px;
}
.cs-text-card-body a { color: var(--color-primary); }
.cs-text-card-body p:empty { display: none; }
.cs-text-card-body > :first-child { margin-top: 0; }
.cs-text-card-body > :last-child { margin-bottom: 0; }
.cs-text-card-body img { max-width: 100%; height: auto; border-radius: 8px; }

.cs-text-card-refund { --cs-tc: #e5484d; --cs-tc-tint: rgba(229, 72, 77, 0.1); }
.cs-text-card-support { --cs-tc: #3fb950; --cs-tc-tint: rgba(63, 185, 80, 0.1); }
.cs-text-card-info { --cs-tc: #4493e0; --cs-tc-tint: rgba(68, 147, 224, 0.1); }
.cs-textcards .cs-text-card-refund,
.cs-textcards .cs-text-card-support,
.cs-textcards .cs-text-card-info {
  border-color: var(--cs-tc);
  background: linear-gradient(var(--cs-tc-tint), var(--cs-tc-tint)), var(--color-brighter-bg);
}
.cs-text-card-refund .cs-text-card-head,
.cs-text-card-support .cs-text-card-head,
.cs-text-card-info .cs-text-card-head { color: var(--cs-tc); }
.cs-text-card-refund .cs-text-card-body a,
.cs-text-card-support .cs-text-card-body a,
.cs-text-card-info .cs-text-card-body a { color: var(--cs-tc); }
@media (width <= 767px) {
  .cs-textcards { grid-template-columns: 1fr; }
}

.site-header-inner .user-actions.cs-account-bar {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--cs-account-height);
}

.cs-cart-pill {
  display: flex;
  align-items: center;
  gap: calc(var(--cs-account-height) * 0.2);
  height: 100%;
  padding: 0 calc(var(--cs-account-height) * 1.1) 0 calc(var(--cs-account-height) * 0.42);
  background: var(--color-primary);
  color: var(--color-text);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 999px 0 0 999px;
  margin-right: calc(var(--cs-account-height) * -0.95);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: filter 0.18s ease, transform 0.12s ease;
}
.cs-cart-pill:hover,
.cs-cart-pill:focus {
  filter: brightness(1.07);
  color: var(--color-text);
  text-decoration: none;
}
.cs-cart-pill:active { transform: scale(0.97); }

.cs-account-bar .cs-cart-pill:last-child {
  margin-right: 0;
  border-radius: 999px;
  padding-right: calc(var(--cs-account-height) * 0.5);
}
.cs-cart-basket {
  width: calc(var(--cs-account-height) * 0.42);
  height: calc(var(--cs-account-height) * 0.42);
  flex: none;
}
.cs-cart-amount {
  font-weight: 700;
  font-size: calc(var(--cs-account-height) * 0.32);
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}
.cs-cart-amount strong { font-weight: 700; }

.cs-account-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--color-brighter-bg);
  color: var(--color-text);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 999px;
  padding: 0 calc(var(--cs-account-height) * 1.25) 0 calc(var(--cs-account-height) * 0.55);
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
  transition: background 0.18s ease, transform 0.12s ease;
}
.cs-account-pill:hover,
.cs-account-pill:focus {
  background: var(--color-secondary);
  color: var(--color-text);
  text-decoration: none;
}
.cs-account-pill:active { transform: scale(0.985); }
.cs-account-label {
  font-weight: 600;
  font-size: calc(var(--cs-account-height) * 0.32);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}
.cs-account-avatar {
  position: absolute;
  top: 50%;
  right: calc(var(--cs-account-height) * -0.05);
  transform: translateY(-50%);
  width: calc(var(--cs-account-height) * 1.16);
  height: calc(var(--cs-account-height) * 1.16);
  border-radius: 50%;
  padding: 3px;
  background: var(--color-primary);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.cs-account-pill:hover .cs-account-avatar {
  transform: translateY(-50%) scale(1.04);
  filter: brightness(1.07);
}
.cs-account-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.cs-account-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.cs-account-usericon { width: 58%; height: 58%; }

a.cs-account-pill .cs-account-face {
  background: var(--color-primary);
  color: #ffffff;
}

.cs-account-menu {
  position: relative;
  height: 100%;
}
.cs-account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 200;
  transform-origin: top right;
  transition: opacity 0.13s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0s;
}

.cs-account-dropdown[hidden] {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity 0.13s ease, transform 0.13s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.14s;
}
.cs-account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.cs-account-dropdown-item svg { width: 20px; height: 20px; flex: none; }
.cs-account-dropdown-item:hover,
.cs-account-dropdown-item:focus {
  background: var(--color-tertiary-hover);
  color: var(--color-text);
  text-decoration: none;
}
.cs-account-dropdown-logout { color: var(--color-removed); }
.cs-account-dropdown-logout:hover,
.cs-account-dropdown-logout:focus { color: var(--color-removed); }

.cs-login {
  max-width: 420px;
  margin: 0 auto;
}
.cs-login-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 20px;
}
.cs-login .cs-field { margin-bottom: 18px; }
.cs-login .cs-field-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.cs-login .cs-input-wrap { position: relative; }
.cs-login .cs-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
  pointer-events: none;
  z-index: 1;
}
.cs-login .cs-input-wrap input[type=text] {
  width: 100%;
  margin: 0;
  padding: 13px 14px 13px 42px;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-text);
  font-size: 16px;
}
.cs-login .cs-input-wrap input[type=text]::placeholder { color: var(--color-text-secondary); }
.cs-login .cs-edition { display: flex; gap: 10px; }
.cs-login .cs-edition-opt { flex: 1; margin: 0; cursor: pointer; }
.cs-login .cs-edition-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cs-login .cs-edition-opt > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cs-login .cs-edition-opt > span svg { width: 17px; height: 17px; }
.cs-login .cs-edition-opt:hover > span { color: var(--color-text); }
.cs-login .cs-edition-opt input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-tertiary-hover);
  color: var(--color-text);
}
.cs-login .cs-signin-btn {
  width: 100%;
  height: auto;
  line-height: 1.2;
  margin-top: 22px;
  padding: 14px;
  text-align: center;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: var(--cs-radius);
}
.btn-secondary {
  border: var(--cs-border-width) solid var(--cs-border);
}
.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: 0 0 8px rgb(from var(--btn-color-bg-hover) r g b/0.6);
}

.quantity-field {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);

  height: calc(var(--btn-size) + var(--cs-border-width) * 2);

  overflow: hidden;
}

.quantity-field .adjust {
  border-radius: 0;
}
.quantity-field .adjust.decrease {
  border-radius: 0 calc(var(--cs-radius) - var(--cs-border-width)) calc(var(--cs-radius) - var(--cs-border-width)) 0;
}
.quantity-field .adjust.increase {
  border-radius: calc(var(--cs-radius) - var(--cs-border-width)) 0 0 calc(var(--cs-radius) - var(--cs-border-width));
}

.cs-home-cards .info .image {
  border-radius: var(--cs-radius);
}

.site-sale-banner {
  border-radius: var(--cs-radius);
}

.site-home-categories .category {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  padding: 20px var(--widget-padding);
  background: var(--color-brighter-bg);
  transition: color 0.15s ease-in-out;
}
.site-home-categories .category:hover {
  color: var(--color-primary);
}

.category-description {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}

.store-text {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}
.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  text-align: center;
}

.store-text.cs-page-lead h1,
.store-text.cs-page-lead h2,
.store-text.cs-page-lead h3,
.store-text.cs-page-lead h4,
.store-text.cs-page-lead h5,
.store-text.cs-page-lead h6 {
  text-align: left;
}
.cs-page-lead .cs-welcome-name {
  font-size: 26px;
}

.store-products-grid .store-product,
.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
  transition: transform 0.12s ease;
}

.store-products-grid .store-product:hover,
.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  transform: scale(1.02);
}

.store-products-images {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.store-products-images .store-product {
  text-align: center;
}

.store-products-grid .store-product .image-link,
.store-products-images .store-product .image-link {
  width: 100%;
}
.store-products-grid .store-product .image,
.store-products-images .store-product .image,
.store-products-grid .store-product .image-default,
.store-products-images .store-product .image-default {
  width: 100%;
  height: 170px;
  aspect-ratio: auto;
  object-fit: contain;
}

.cs-price-badge { display: none; }
.cs-cards-s2 .store-products-grid .store-product,
.cs-cards-s2 .store-products-images .store-product {
  position: relative;
  background: linear-gradient(rgb(from var(--color-primary) r g b / 0.1), rgb(from var(--color-primary) r g b / 0.1)), var(--color-brighter-bg);
}
.cs-cards-s2 .store-products-grid .cs-price-badge,
.cs-cards-s2 .store-products-images .cs-price-badge {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 14px;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.cs-cards-s2 .store-products-grid .store-product .actions .price,
.cs-cards-s2 .store-products-images .store-product .actions .price {
  display: none;
}

.widget-title {
  text-align: center;
}

.widget .store-product {
  text-align: center;
}

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}

.store-product-full {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}

.popup-content.store-product-popup-content { max-width: 760px; }
@media (width > 600px) {
  .store-product-full {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }
}
.cs-product-media { min-width: 0; }
.cs-product-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cs-radius);
}
.cs-product-media .image-default {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--cs-radius);
}
.cs-product-detail {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}

.store-product-full .cs-product-detail .actions {
  position: static !important;
  bottom: auto;
  order: 0;
  margin: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}

.store-product .quantity-field {
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: var(--cs-radius);
  }
}
.navigation-horizontal .has-children > ul {
  border-radius: var(--cs-radius);
}

.widget {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}
@media (width <= 960px) {
  .widget.site-navigation {
    border-radius: 0;
    border: none;
    background: transparent;
  }
}

.store-form input[type=text],
.store-form input[type=number],
.store-form input[type=email],
.store-form input[type=search],
.store-form select,
.store-form textarea,
.widget-gift-card .gift-card-input {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}

.widget-top-donator .avatar {
  border-radius: 50%;
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 999px;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 999px;
}

.popup-content {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}

.popup:not(.drawer) {
  --fade-duration: 160ms;
}
.popup:not(.drawer) .popup-content {
  transition: scale 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity var(--fade-duration) ease;
}
@starting-style {
  .popup:not(.drawer) .popup-content {
    scale: 0.82;
    translate: 0;
  }
}
.popup:not(.drawer)[hidden] .popup-content {
  scale: 0.82;
  translate: 0;
  transition: scale 0.14s cubic-bezier(0.4, 0, 1, 1), opacity var(--fade-duration) ease;
}

.popup-close {
  border-radius: 0 var(--cs-radius) 0 var(--cs-radius);
}

.basket-popup .popup-scroll-cont {
  padding: 0;
  justify-content: flex-end;
}
.basket-popup-content {
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);

  overflow: hidden;
}
.basket-popup-content .popup-close {
  border-radius: 0;
}

.basket .basket-title::before {
  display: none;
}

.basket-items {
  padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding));
}

.basket-item {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}
.basket-item .quantity {
  border-radius: var(--cs-radius);
}
.cs-basket-thumb {
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-basket-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.toast {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}

.toast-close {
  border-radius: var(--cs-radius);
}

.cs-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.16s;
}
.cs-modal.cs-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}
.cs-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.cs-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.82);
  transition: transform 0.14s cubic-bezier(0.4, 0, 1, 1);
}
.cs-modal.cs-modal-open .cs-modal-card {
  transform: scale(1);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cs-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: transform 0.12s ease, color 0.12s ease;
}
.cs-modal-close svg { width: 18px; height: 18px; }
.cs-modal-close:hover,
.cs-modal-close:focus {
  transform: scale(1.1);
  color: var(--color-text);
}
.cs-modal-title {
  margin: 0 32px 18px 0;
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text);
}
.cs-modal-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-darker);
}
.cs-modal-text .cs-copy-ip {
  color: var(--color-primary);
  font-weight: 700;
}
.cs-modal-success .cs-modal-title { color: #3fb950; }
.cs-modal-error .cs-modal-title { color: var(--color-removed); }
.cs-modal-warning .cs-modal-title { color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .cs-modal,
  .cs-modal.cs-modal-open,
  .cs-modal .cs-modal-card,
  .cs-modal.cs-modal-open .cs-modal-card {
    transition: none !important;
  }
}

.store-category-tiered {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 {
  text-align: center;
}

.store-product-tiered {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: rgb(from var(--color-bg) r g b/0.5);
}

.media-slider .slider,
.media-slider .thumb {
  border-radius: var(--cs-radius);
}
.media-slider .open-lightbox {
  border-radius: var(--cs-radius);
}

.popup.popup-media-slider .thumb {
  border-radius: var(--cs-radius);
}
.popup.popup-media-slider .popup-close {
  border-radius: var(--cs-radius);
}

.cs-cmp-scroll { overflow-x: auto; padding-bottom: 10px; }
.cs-cmp { display: grid; min-width: max-content; overflow: hidden; }
.cs-cmp-panel {
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  z-index: 0;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}
.cs-cmp-card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 16px 18px;
  border-right: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  overflow: hidden;
}
.cs-cmp-card.cs-cmp-firstcol { border-top-left-radius: var(--cs-radius); }
.cs-cmp-card.cs-cmp-lastcol { border-top-right-radius: var(--cs-radius); }
.cs-cmp-card-featured { background: linear-gradient(180deg, rgb(from var(--color-primary) r g b / 0.18), rgb(from var(--color-primary) r g b / 0) 55%); }
.cs-cmp-banner {
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 6px 0;
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.cs-cmp-banner-spacer { height: 30px; }
.cs-cmp-badge { width: 92px; height: 92px; margin: 18px 0 12px; display: flex; align-items: center; justify-content: center; }
.cs-cmp-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-cmp-name {
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin-bottom: 12px;
}
.cs-cmp-price { margin-bottom: 14px; line-height: 1.2; }
.cs-cmp-price-old { display: block; color: var(--color-removed); text-decoration: line-through; font-weight: 700; font-size: 14px; }
.cs-cmp-price-now { font-size: 20px; font-weight: 700; color: var(--color-text); }
.cs-cmp-price-now small { font-size: 14px; }
.cs-cmp-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 11px 14px;
  border-radius: var(--cs-radius);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.cs-cmp-buy:hover, .cs-cmp-buy:focus { transform: scale(1.03); color: var(--color-primary-text); text-decoration: none; }
.cs-cmp-buy svg { width: 16px; height: 16px; }
.cs-cmp-label {
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 14px;
  background: var(--color-brighter-bg);
  border-left: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-darker);
}
.cs-cmp-label.cs-cmp-first { border-top: var(--cs-border-width) solid var(--cs-border); border-top-left-radius: var(--cs-radius); }
.cs-cmp-label.cs-cmp-last { border-bottom: var(--cs-border-width) solid var(--cs-border); border-bottom-left-radius: var(--cs-radius); }
.cs-cmp-cell {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 58px;
  padding: 8px 10px;
  border-right: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.cs-cmp-check { width: 26px; height: 26px; border-radius: 50%; background: #4caf50; display: inline-flex; align-items: center; justify-content: center; }
.cs-cmp-check svg { width: 15px; height: 15px; }
.cs-cmp-cross {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-text-secondary);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.cs-cmp-cell-icon { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; line-height: 0; }
.cs-cmp-cell-icon img, .cs-cmp-cell-icon svg { height: 20px; width: auto; max-width: 100%; display: block; }
.cs-cmp-foot {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border-right: var(--cs-border-width) solid var(--cs-border);
}
.cs-cmp-lastcol { border-right: none; }
.cs-cmp-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.cs-cmp-nav-info { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-text-secondary); }
.cs-cmp-nav-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease;
}
.cs-cmp-nav-btn svg { width: 18px; height: 18px; }
.cs-cmp-nav-btn:hover:not(:disabled), .cs-cmp-nav-btn:focus:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); transform: scale(1.08); }
.cs-cmp-nav-btn:disabled { opacity: 0.35; cursor: default; }
@keyframes cs-cmp-slide-next { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cs-cmp-slide-prev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.cs-cmp-anim-next .cs-cmp-card, .cs-cmp-anim-next .cs-cmp-cell, .cs-cmp-anim-next .cs-cmp-foot { animation: cs-cmp-slide-next 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.cs-cmp-anim-prev .cs-cmp-card, .cs-cmp-anim-prev .cs-cmp-cell, .cs-cmp-anim-prev .cs-cmp-foot { animation: cs-cmp-slide-prev 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .cs-cmp-anim-next .cs-cmp-card, .cs-cmp-anim-next .cs-cmp-cell, .cs-cmp-anim-next .cs-cmp-foot,
  .cs-cmp-anim-prev .cs-cmp-card, .cs-cmp-anim-prev .cs-cmp-cell, .cs-cmp-anim-prev .cs-cmp-foot { animation: none; }
}

.cs-cmp-fallback { display: none; }
@media (width <= 991px) {
  .cs-cmp-mount { display: none; }
  .cs-cmp-fallback {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: 16px;
  }
}

.cs-qbuy-scroll { overflow-x: auto; padding-bottom: 10px; }
.cs-qbuy-grid { display: flex; flex-direction: column; gap: 12px; }
.cs-qbuy-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(var(--cs-qbuy-cols, 1), minmax(96px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.cs-qbuy-product {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 16px 14px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}
.cs-qbuy-product-sale {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, rgb(from var(--color-primary) r g b / 0.18), rgb(from var(--color-primary) r g b / 0) 60%), var(--color-brighter-bg);
}
.cs-qbuy-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-bottom-left-radius: 12px;
}
.cs-qbuy-img { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.cs-qbuy-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-qbuy-pname {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--color-text);
}
.cs-qbuy-cell { margin: 0; display: flex; }
.cs-qbuy-cell-empty { align-items: center; justify-content: center; font-size: 18px; color: var(--color-text-secondary); opacity: 0.4; }
.cs-qbuy-buy {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cs-qbuy-buy-n { font-size: 22px; font-weight: 800; line-height: 1; color: var(--color-text); transition: opacity 0.15s ease; }
.cs-qbuy-buy-p { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; color: var(--color-text-secondary); transition: opacity 0.15s ease; }
.cs-qbuy-buy-old { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-decoration: line-through; white-space: nowrap; transition: opacity 0.15s ease; }
.cs-qbuy-buy-sale { border-color: var(--color-primary); }
.cs-qbuy-buy-sale .cs-qbuy-buy-p { color: var(--color-primary); }
.cs-qbuy-cart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  opacity: 0;
  color: var(--color-primary);
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cs-qbuy-cart svg { width: 24px; height: 24px; }
.cs-qbuy-cart-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.1; text-align: center; }
.cs-qbuy-buy:hover, .cs-qbuy-buy:focus { border-color: var(--color-primary); background: var(--color-tertiary-hover); color: var(--color-text); }
.cs-qbuy-buy:hover .cs-qbuy-buy-n, .cs-qbuy-buy:focus .cs-qbuy-buy-n,
.cs-qbuy-buy:hover .cs-qbuy-buy-p, .cs-qbuy-buy:focus .cs-qbuy-buy-p,
.cs-qbuy-buy:hover .cs-qbuy-buy-old, .cs-qbuy-buy:focus .cs-qbuy-buy-old { opacity: 0; }
.cs-qbuy-buy:hover .cs-qbuy-cart, .cs-qbuy-buy:focus .cs-qbuy-cart { opacity: 1; }
.cs-qbuy-buy.cs-qbuy-loading { pointer-events: none; }
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-buy-n,
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-buy-p,
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-buy-old,
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-cart { opacity: 0; }
.cs-qbuy-buy.cs-qbuy-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid var(--color-secondary);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: cs-spin 0.6s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }


/* ==========================================================================
   KAIDE CRATE CATEGORY
   Trigger with {crates} in the CATEGORY description.
   Configure each package with {crate}...{/crate} in the PACKAGE description.
   ========================================================================== */

.cs-crates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.cs-crate-card {
  position: relative;
  min-width: 0;
  padding: 20px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background:
    radial-gradient(circle at 100% 0%, rgb(from var(--color-primary) r g b / 0.08), transparent 35%),
    var(--color-brighter-bg);
  overflow: visible;
}

.cs-crate-card-sale {
  border-color: rgb(from var(--color-primary) r g b / 0.75);
}

.cs-crate-sale-badge {
  position: absolute;
  z-index: 8;
  top: -3px;
  right: 18px;
  padding: 6px 12px;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  color: var(--color-primary-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.cs-crate-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  margin-bottom: 16px;
}

.cs-crate-package-image {
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 2px solid rgb(from var(--color-primary) r g b / 0.2);
  border-radius: 14px;
  background: rgb(from var(--color-bg) r g b / 0.55);
}

.cs-crate-package-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.cs-crate-heading {
  min-width: 0;
}

.cs-crate-name {
  margin: 0 0 5px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  word-break: break-word;
}

.cs-crate-unit-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.cs-crate-old-price {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  text-decoration: line-through;
}

.cs-crate-current-price {
  color: var(--color-primary);
  font-size: 17px;
  font-weight: 800;
}

.cs-crate-per-key {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.cs-crate-rewards-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.cs-crate-rewards-head > span {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cs-crate-rewards-head > small {
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 600;
  text-align: right;
}

.cs-mc-inventory {
  --cs-mc-slot: 40px;
  --cs-mc-gap: 3px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, var(--cs-mc-slot));
  grid-template-rows: repeat(var(--cs-crate-rows, 3), var(--cs-mc-slot));
  gap: var(--cs-mc-gap);
  width: max-content;
  max-width: 100%;
  margin: 0 auto 18px;
  padding: 8px;
  border: 3px solid #373737;
  border-top-color: #d8d8d8;
  border-left-color: #d8d8d8;
  background: #8b8b8b;
  box-shadow:
    inset 0 0 0 2px #555,
    0 10px 25px rgba(0, 0, 0, 0.28);
  image-rendering: pixelated;
}

.cs-mc-slot {
  position: relative;
  width: var(--cs-mc-slot);
  height: var(--cs-mc-slot);
  background: #8b8b8b;
  border: 2px solid;
  border-color: #373737 #fff #fff #373737;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.16);
  pointer-events: none;
}

.cs-mc-item {
  position: relative;
  z-index: 3;
  width: var(--cs-mc-slot);
  height: var(--cs-mc-slot);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  cursor: default;
  border: 0;
  background: transparent;
  overflow: visible;
}

.cs-mc-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.cs-mc-icon-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cs-mc-item-img {
  position: relative;
  z-index: 1;
  width: 31px;
  height: 31px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.22));
}

.cs-mc-item-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: #555;
  border: 2px solid #222;
  font-family: monospace;
  font-size: 16px;
  font-weight: 800;
}

.cs-mc-item-noimage .cs-mc-item-img {
  display: none;
}

.cs-mc-item-noimage .cs-mc-item-fallback {
  display: flex;
}

.cs-mc-item-glint .cs-mc-icon-wrap::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -30%;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(185, 120, 255, 0.12) 40%,
    rgba(110, 70, 255, 0.28) 50%,
    rgba(185, 120, 255, 0.12) 60%,
    transparent 75%
  );
  transform: translateX(-65%);
  animation: cs-mc-glint 2.8s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes cs-mc-glint {
  to { transform: translateX(65%); }
}

.cs-mc-count {
  position: absolute;
  z-index: 4;
  right: 1px;
  bottom: -1px;
  color: #fff;
  font-family: var(--cs-mc-font);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-shadow:
    1px 1px 0 #3f3f3f,
    2px 2px 0 #3f3f3f;
  pointer-events: none;
}

.cs-mc-tooltip {
  position: absolute;
  z-index: 50;
  left: calc(100% + 8px);
  top: 2px;
  display: none;
  min-width: 190px;
  max-width: min(320px, 70vw);
  padding: 7px 9px 8px;
  border: 2px solid #2b0b53;
  border-radius: 3px;
  background: rgba(16, 0, 16, 0.97);
  color: #fff;
  box-shadow:
    inset 0 0 0 1px #100010,
    0 5px 18px rgba(0, 0, 0, 0.48);
  font-family: var(--cs-mc-tooltip-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

.cs-mc-item:hover,
.cs-mc-item:focus {
  z-index: 40;
}

.cs-mc-item:hover .cs-mc-tooltip,
.cs-mc-item:focus .cs-mc-tooltip {
  display: flex;
  flex-direction: column;
}

.cs-mc-tip-name {
  display: block;
  margin-bottom: 3px;
  color: #fff;
}

.cs-mc-tip-line {
  display: block;
  color: #aaaaff;
}

.cs-mc-tip-chance {
  display: block;
  margin-top: 3px;
  color: #aaaaaa;
}

.cs-rarity-common .cs-mc-tip-name { color: #ffffff; }
.cs-rarity-uncommon .cs-mc-tip-name { color: #55ff55; }
.cs-rarity-rare .cs-mc-tip-name { color: #55ffff; }
.cs-rarity-epic .cs-mc-tip-name { color: #ff55ff; }
.cs-rarity-legendary .cs-mc-tip-name { color: #ffaa00; }
.cs-rarity-mythic .cs-mc-tip-name { color: #ff5555; }

.cs-crate-empty {
  margin: 0 0 18px;
  padding: 26px 16px;
  border: 2px dashed var(--cs-border);
  border-radius: 12px;
  color: var(--color-text-secondary);
  background: rgb(from var(--color-bg) r g b / 0.35);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.cs-crate-purchase {
  display: grid;
  grid-template-columns: auto minmax(80px, 1fr) minmax(140px, 1.25fr);
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--cs-border);
}

.cs-crate-qty {
  display: grid;
  grid-template-columns: 34px 42px 34px;
  align-items: center;
  height: 40px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 12px;
  background: var(--color-bg);
  overflow: hidden;
}

.cs-crate-step {
  width: 34px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background: transparent;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  transition: color 0.12s ease, background 0.12s ease;
}

.cs-crate-step:hover:not(:disabled),
.cs-crate-step:focus:not(:disabled) {
  color: var(--color-primary);
  background: var(--color-tertiary-hover);
}

.cs-crate-step:disabled {
  opacity: 0.28;
  cursor: default;
}

.cs-crate-qty-value {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-left: 1px solid var(--cs-border);
  border-right: 1px solid var(--cs-border);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cs-crate-total {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cs-crate-total-label {
  color: var(--color-text-secondary);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cs-crate-total-price {
  color: var(--color-text);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.cs-crate-buy {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  overflow: hidden;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.cs-crate-buy:hover,
.cs-crate-buy:focus {
  background: var(--color-primary-hover);
  color: var(--color-primary-text-hover);
  box-shadow: 0 0 12px rgb(from var(--color-primary) r g b / 0.4);
  transform: translateY(-1px);
}

.cs-crate-buy-icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.cs-crate-buy-icon svg {
  width: 100%;
  height: 100%;
}

.cs-crate-buy-loading {
  pointer-events: none;
}

.cs-crate-buy-loading > * {
  opacity: 0;
}

.cs-crate-buy-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  border: 3px solid rgb(from var(--color-primary-text) r g b / 0.35);
  border-top-color: var(--color-primary-text);
  border-radius: 50%;
  animation: cs-spin 0.6s linear infinite;
}

@media (width <= 1180px) {
  .cs-crates-grid {
    grid-template-columns: 1fr;
  }

  .cs-crate-card {
    max-width: 720px;
  }
}

@media (width <= 620px) {
  .cs-crate-card {
    padding: 16px;
  }

  .cs-crate-head {
    min-height: 60px;
  }

  .cs-crate-package-image {
    width: 60px;
    height: 60px;
  }

  .cs-crate-name {
    font-size: 17px;
  }

  .cs-crate-rewards-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .cs-crate-rewards-head > small {
    text-align: left;
  }

  .cs-mc-inventory {
    --cs-mc-slot: min(9vw, 34px);
    --cs-mc-gap: 2px;
    padding: 6px;
  }

  .cs-mc-item-img {
    width: calc(var(--cs-mc-slot) - 8px);
    height: calc(var(--cs-mc-slot) - 8px);
  }

  .cs-mc-tooltip {
    position: fixed;
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 18px;
    width: auto;
    max-width: none;
    min-width: 0;
  }

  .cs-crate-purchase {
    grid-template-columns: auto 1fr;
  }

  .cs-crate-buy {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-mc-item-glint .cs-mc-icon-wrap::after {
    animation: none;
  }

  .cs-crate-buy {
    transition: none;
  }
}

.site-footer { background: transparent; }
.cs-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 30px 36px 16px;
}

.cs-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cs-footer-legal { min-width: 0; }
.cs-footer-rights {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 6px;
}
.cs-footer-notice {
  display: block;
  max-width: 460px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.cs-footer-play {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--cs-radius);
  background: transparent;
  color: var(--color-text);
  text-align: right;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cs-footer-play:hover,
.cs-footer-play:focus {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
.cs-footer-play-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--cs-primary-deep) 100%);
  color: #fff;
}
.cs-footer-play-icon svg { width: 18px; height: 18px; }
.cs-footer-play .cs-nav-text { min-width: 0; }
.cs-footer-play .cs-nav-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}
.cs-footer-play .cs-nav-subtitle {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.cs-footer-play .cs-nav-sub-hover { display: none; }
.cs-footer-play:hover .cs-nav-sub-base,
.cs-footer-play:focus .cs-nav-sub-base { display: none; }
.cs-footer-play:hover .cs-nav-sub-hover,
.cs-footer-play:focus .cs-nav-sub-hover { display: inline; }

.cs-footer-divider {
  height: 1px;
  background: var(--cs-border);
  margin: 26px 0;
}

.cs-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
}
.cs-footer-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}
.cs-footer-link {
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.12s ease;
}
.cs-footer-link:hover,
.cs-footer-link:focus {
  color: var(--color-primary);
  text-decoration: none;
}
.cs-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-footer-social-link {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.cs-footer-social-link:hover,
.cs-footer-social-link:focus {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  text-decoration: none;
}
.cs-footer-social-link svg { width: 20px; height: 20px; }

@media (width <= 767px) {
  .cs-footer { padding: 28px 18px 24px; }
  .cs-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .cs-footer-play { text-align: left; padding-left: 0; }
  .cs-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (width <= 960px) {
  .site-main .site-header,
  .site-main .site-content {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .site-header-inner .toggle-navigation {
    --btn-size: 40px;
    background-position: center;
    margin-left: calc((var(--btn-icon-size) - var(--btn-size)) / 2);
  }
  .navigation-vertical .cs-menu-head {
    position: absolute;
    top: 26px;
    left: var(--widget-padding);
    z-index: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
  }
}

@media (width <= 600px) {
  .basket-popup-content {
    max-width: 100%;
    border-radius: 0;
  }
}

@media (width <= 767px) {
  .cs-qbuy-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cs-qbuy-row .cs-qbuy-product {
    grid-column: 1 / -1;
  }
  .cs-qbuy-row .cs-qbuy-cell-empty,
  .cs-qbuy-row .cs-qbuy-extra {
    display: none;
  }
}

@media (width <= 960px) {
  body.cs-mobile-l2.page-index .site {
    padding: 20px;
    gap: 20px;
  }
  body.cs-mobile-l2.page-index .site-main,
  body.cs-mobile-l2.page-index .store-sidebar {
    display: contents;
  }

  body.cs-mobile-l2.page-index .site-header,
  body.cs-mobile-l2.page-index .cs-sidebar-logo,
  body.cs-mobile-l2.page-index .site-navigation,
  body.cs-mobile-l2.page-index .cs-home-cards,
  body.cs-mobile-l2.page-index .cs-featured,
  body.cs-mobile-l2.page-index .site-content,
  body.cs-mobile-l2.page-index .cs-textcards,
  body.cs-mobile-l2.page-index .widget:not(.site-navigation) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    flex: 0 0 auto;
  }

  body.cs-mobile-l2.page-index .site-header { order: 0; }
  body.cs-mobile-l2.page-index .cs-sidebar-logo { order: 1; }
  body.cs-mobile-l2.page-index .site-navigation { order: 2; }
  body.cs-mobile-l2.page-index .cs-home-cards { order: 3; }
  body.cs-mobile-l2.page-index .cs-featured { order: 4; }
  body.cs-mobile-l2.page-index .site-content { order: 5; }
  body.cs-mobile-l2.page-index .cs-textcards { order: 6; }
  body.cs-mobile-l2.page-index .widget:not(.site-navigation) { order: 7; }

  body.cs-mobile-l2.page-index .site-header .actions,
  body.cs-mobile-l2.page-index .site-header .cs-mobile-logo {
    display: none;
  }

  body.cs-mobile-l2.page-index .cs-sidebar-logo {
    display: block;
    margin: 0;
    padding: 6px 0 2px;
    text-align: center;
  }
  body.cs-mobile-l2.page-index .cs-sidebar-logo img {
    width: auto;
    max-width: 100%;
    max-height: 180px;
  }
  body.cs-mobile-l2.page-index .cs-sidebar-logo .cs-logo-text {
    font-size: 34px;
    padding: 0;
  }

  body.cs-mobile-l2.page-index .site-navigation {
    position: static;
    inset: auto;
    z-index: auto;
    visibility: visible;
    opacity: 1;
    transition: none;
    padding: 14px;
    border-radius: var(--cs-radius);
    border: var(--cs-border-width) solid var(--cs-border);
    background: var(--color-brighter-bg);
  }
  body.cs-mobile-l2.page-index .site-navigation .menu {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    background: none;
    overflow: visible;
    opacity: 1;
    scale: 1;
    translate: none;
    transition: none;
    font-size: 16px;
  }
  body.cs-mobile-l2.page-index .site-navigation .menu::after { display: none; }
  body.cs-mobile-l2.page-index .site-navigation .close-navigation { display: none; }
  body.cs-mobile-l2.page-index .site-navigation .cs-menu-head {
    position: static;
    top: auto;
    left: auto;
    margin: 0 0 10px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text);
  }
  body.cs-mobile-l2.page-index .site-navigation .has-children { display: block; }
  body.cs-mobile-l2.page-index .site-navigation .menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
  }
  body.cs-mobile-l2.page-index .site-navigation .menu a:hover { color: var(--color-text); }
  body.cs-mobile-l2.page-index .site-navigation .menu a.link-active {
    background: var(--color-tertiary-hover);
    color: var(--color-text);
    font-weight: 600;
  }
  body.cs-mobile-l2.page-index .site-navigation .cs-menu-parent {
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
  }
  body.cs-mobile-l2.page-index .site-navigation .cs-menu-parent:hover {
    color: var(--color-text);
    background: var(--color-tertiary-hover);
  }
  body.cs-mobile-l2.page-index .site-navigation .has-children.expanded > .cs-menu-parent {
    color: var(--color-text);
  }
  body.cs-mobile-l2.page-index .site-navigation ul ul { padding-left: 0; }
  body.cs-mobile-l2.page-index .site-navigation ul ul a {
    padding: 9px 12px 9px 50px;
    font-size: 16px;
  }
}

.cs-cmp-divider {
  z-index: 2;
  margin-top: calc(var(--cs-border-width) * -1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 9px 16px;
  background: linear-gradient(rgb(from var(--color-primary) r g b / 0.1), rgb(from var(--color-primary) r g b / 0.1)), var(--color-brighter-bg);
  border-top: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
}
.cs-cmp-divider-label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text);
  white-space: nowrap;
  text-align: center;
}

.cs-cmp-crow { overflow: hidden; transition: border-width 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.cs-cmp-cell.cs-cmp-crow,
.cs-cmp-label.cs-cmp-crow { min-height: 0; }
.cs-cmp-crow.cs-cmp-shut { border-width: 0; }
.cs-cmp-crow.cs-cmp-gone { display: none; }
.cs-cmp-divider-toggle {
  cursor: pointer;
  gap: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease;
}
.cs-cmp-divider-toggle:hover {
  background: linear-gradient(rgb(from var(--color-primary) r g b / 0.18), rgb(from var(--color-primary) r g b / 0.18)), var(--color-brighter-bg);
}
.cs-cmp-divider-chev {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--color-text);
  transition: rotate 0.3s ease;
}
.cs-cmp-divider-chev svg { width: 100%; height: 100%; display: block; }
.cs-cmp-divider-open .cs-cmp-divider-chev { rotate: 180deg; }

.cs-patreon {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.cs-patreon-glyph {
  width: 18px;
  height: 18px;
  flex: none;
}
.cs-patreon-desc {
  margin: 0;
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-darker);
  white-space: pre-line;
}
.cs-patreon-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 20px;
  border-top: var(--cs-border-width) solid var(--cs-border);
}
.cs-patreon-invite {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
}
.cs-patreon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--cs-radius);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.18s ease;
}
.cs-patreon-btn:hover,
.cs-patreon-btn:focus {
  transform: scale(1.03);
  filter: brightness(1.07);
  color: var(--color-primary-text);
  text-decoration: none;
}
.cs-patreon-btn .cs-patreon-glyph { color: var(--color-primary-text); }

.cs-patreon-mount {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cs-patreon-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 16px;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
  transition: transform 0.12s ease;
}
.cs-patreon-card:hover { transform: scale(1.02); }
.cs-patreon-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  max-width: calc(100% - 20px);
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid rgb(from var(--color-primary) r g b / calc(0.4 + 0.6 * var(--cs-tier-str, 0.5)));
  background: rgb(from var(--color-primary) r g b / calc(0.14 + 0.4 * var(--cs-tier-str, 0.5)));
  color: var(--color-text);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-patreon-model {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 240px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.cs-patreon-fallback {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.cs-patreon-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.cs-patreon-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
  color: var(--color-text);
}
.cs-patreon-empty {
  grid-column: 1 / -1;
  padding: 30px;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}
@media (width <= 991px) {
  .cs-patreon-mount { grid-template-columns: repeat(3, 1fr); }
}
@media (width <= 700px) {
  .cs-patreon-mount { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 600px) {
  .cs-patreon-cta { justify-content: stretch; }
  .cs-patreon-btn { width: 100%; justify-content: center; }
}

/* =========================================================
   Kaide Rank Upgrades panel ({upgrades})
   ========================================================= */
.cs-rank-upgrades {
  margin-top: 26px;
  padding: 24px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background:
    radial-gradient(circle at 92% 0%, rgb(from var(--color-primary) r g b / 0.16), transparent 34%),
    var(--color-brighter-bg);
  overflow: hidden;
}

.cs-rank-upgrades-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.cs-rank-upgrades-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: var(--cs-border-width) solid rgb(from var(--color-primary) r g b / 0.35);
  background: rgb(from var(--color-primary) r g b / 0.11);
  color: var(--color-primary);
}
.cs-rank-upgrades-icon svg { width: 24px; height: 24px; }
.cs-rank-upgrades-copy { min-width: 0; flex: 1; }
.cs-rank-upgrades-kicker {
  margin-bottom: 2px;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}
.cs-rank-upgrades-copy h2 {
  margin: 0 0 5px;
  color: var(--color-text);
  font-size: 24px;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cs-rank-upgrades-copy p {
  margin: 0;
  max-width: 760px;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}
.cs-rank-upgrades-pill {
  flex: none;
  padding: 8px 12px;
  border: 1px solid rgb(from var(--color-primary) r g b / 0.35);
  border-radius: 999px;
  background: rgb(from var(--color-primary) r g b / 0.1);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.cs-rank-upgrades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.cs-rank-upgrade-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: calc(var(--cs-radius) - 2px);
  background: rgb(from var(--color-bg) r g b / 0.54);
  transition: transform 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.cs-rank-upgrade-card:not(.cs-rank-upgrade-disabled):hover {
  transform: translateY(-2px);
  border-color: rgb(from var(--color-primary) r g b / 0.55);
  background: rgb(from var(--color-primary) r g b / 0.055);
}
.cs-rank-upgrade-top {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.cs-rank-upgrade-image {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-rank-upgrade-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.cs-rank-upgrade-image-default {
  border-radius: 12px;
  background: var(--color-tertiary-hover);
  color: var(--color-text-secondary);
}
.cs-rank-upgrade-image-default svg { width: 24px; height: 24px; }
.cs-rank-upgrade-info { min-width: 0; }
.cs-rank-upgrade-label {
  display: block;
  margin-bottom: 2px;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.cs-rank-upgrade-info h3 {
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cs-rank-upgrade-price {
  min-height: 29px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 12px;
  color: var(--color-text);
}
.cs-rank-upgrade-price strong { font-size: 20px; font-weight: 800; }
.cs-rank-upgrade-price del { color: var(--color-text-secondary); font-size: 12px; font-weight: 700; }
.cs-rank-upgrade-btn {
  margin-top: auto;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.cs-rank-upgrade-btn svg { width: 15px; height: 15px; flex: none; }
.cs-rank-upgrade-btn:hover,
.cs-rank-upgrade-btn:focus {
  transform: scale(1.025);
  background: var(--color-primary-hover);
  color: var(--color-primary-text-hover);
  box-shadow: 0 0 9px rgb(from var(--color-primary) r g b / 0.35);
  text-decoration: none;
}
.cs-rank-upgrade-disabled { opacity: 0.56; }
.cs-rank-upgrade-btn-disabled,
.cs-rank-upgrade-btn-disabled:hover,
.cs-rank-upgrade-btn-disabled:focus {
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.cs-rank-upgrades-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--cs-border);
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}
.cs-rank-upgrades-note svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin-top: 1px;
  color: var(--color-primary);
}

@media (width <= 700px) {
  .cs-rank-upgrades { padding: 18px; }
  .cs-rank-upgrades-head { align-items: flex-start; }
  .cs-rank-upgrades-pill { display: none; }
  .cs-rank-upgrades-copy h2 { font-size: 21px; }
  .cs-rank-upgrades-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Kaide Rank Purchase / Upgrade prominence (v11)
   ========================================================= */
.category-description .cs-rank-upgrade-intro {
  margin-top: 16px;
  padding: 13px 15px;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  background: rgb(from var(--color-primary) r g b / 0.09);
  color: var(--color-text-darker);
  font-size: 14px;
  line-height: 1.55;
}
.category-description .cs-rank-upgrade-intro strong { color: var(--color-primary); font-weight: 800; }
.cs-rank-upgrade-intro-standalone {
  margin: 0 0 16px;
  padding: 13px 15px;
  border-left: 4px solid var(--color-primary);
  border-radius: 10px;
  background: rgb(from var(--color-primary) r g b / 0.09);
  color: var(--color-text-darker);
  font-size: 14px;
  line-height: 1.55;
}
.cs-rank-upgrade-intro-standalone strong { color: var(--color-primary); font-weight: 800; }
.cs-rank-upgrades.cs-rank-upgrades-primary {
  margin: 18px 0 28px;
  border-color: rgb(from var(--color-primary) r g b / 0.34);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.16);
}
.cs-rank-upgrades-primary .cs-rank-upgrades-head { padding-bottom: 4px; }
.cs-rank-upgrades-primary .cs-rank-upgrades-copy h2 { font-size: 26px; }
.cs-rank-upgrades-primary .cs-rank-upgrade-card {
  background: linear-gradient(180deg, rgb(from var(--color-primary) r g b / 0.035), transparent 55%), rgb(from var(--color-bg) r g b / 0.58);
}
.cs-rank-upgrades-primary .cs-rank-upgrade-btn { min-height: 44px; }
.cs-rank-compare-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  margin: 4px 0 14px; padding: 0 2px;
}
.cs-rank-compare-kicker {
  display: block; margin-bottom: 3px; color: var(--color-primary); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.11em;
}
.cs-rank-compare-head h2 {
  margin: 0; color: var(--color-text); font-size: 20px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.35px;
}
.cs-rank-compare-head p {
  margin: 0; max-width: 520px; color: var(--color-text-secondary); font-size: 12px; line-height: 1.5; text-align: right;
}
@media (width <= 700px) {
  .category-description .cs-rank-upgrade-intro { margin-top: 13px; padding: 12px 13px; font-size: 13px; }
  .cs-rank-upgrades.cs-rank-upgrades-primary { margin: 14px 0 22px; }
  .cs-rank-upgrades-primary .cs-rank-upgrades-copy h2 { font-size: 22px; }
  .cs-rank-compare-head { display: block; }
  .cs-rank-compare-head p { margin-top: 6px; text-align: left; }
}


/* =========================================================
   Kaide Store v14 — global navigation, category polish,
   responsive tables, and touch-friendly crate rewards
   ========================================================= */

/* Main website link in the store header. */
.site-header-inner .cs-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cs-main-site-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 999px;
  background: var(--color-brighter-bg);
  color: var(--color-text-darker);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  transition: transform .12s ease, border-color .12s ease, color .12s ease, background .12s ease;
}
.cs-main-site-link svg { width: 17px; height: 17px; flex: none; color: var(--color-primary); }
.cs-main-site-link:hover,
.cs-main-site-link:focus {
  transform: translateY(-1px);
  border-color: rgb(from var(--color-primary) r g b / .58);
  background: rgb(from var(--color-primary) r g b / .07);
  color: var(--color-text);
  text-decoration: none;
}
@media (width > 960px) {
  .site-header-inner .actions.cs-header-actions { display: flex; }
  .site-header-inner .actions.cs-header-actions .toggle-navigation { display: none; }
}
@media (width <= 960px) {
  .cs-main-site-link { display: none; }
}

/* Website entry is also available from the mobile/vertical menu. */
.navigation-vertical .cs-main-site-nav {
  margin-bottom: 7px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cs-border);
}
.navigation-vertical .cs-main-site-nav > a {
  color: var(--color-text);
  background: rgb(from var(--color-primary) r g b / .065);
  border: 1px solid rgb(from var(--color-primary) r g b / .18);
}
.navigation-vertical .cs-main-site-nav > a:hover,
.navigation-vertical .cs-main-site-nav > a:focus {
  background: rgb(from var(--color-primary) r g b / .12);
  border-color: rgb(from var(--color-primary) r g b / .36);
}
.cs-menu-ico-home {
  color: var(--color-primary);
}
.navigation-vertical .cs-menu-ico-home svg { width: 24px; height: 24px; }
.cs-external-mark {
  margin-left: auto;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 800;
}

/* Shared compact category hero. */
.category-description.cs-category-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 20px;
  padding: 19px 20px;
  border-color: rgb(from var(--color-primary) r g b / .22);
  background:
    radial-gradient(circle at 92% -30%, rgb(from var(--color-primary) r g b / .16), transparent 42%),
    var(--color-brighter-bg);
}
.cs-category-hero-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.cs-category-hero-copy { min-width: 0; }
.cs-category-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.category-description.cs-category-hero .cs-welcome {
  margin: 0 0 7px;
}
.category-description.cs-category-hero .cs-welcome-name {
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
}
.cs-category-summary {
  max-width: 760px;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}
.cs-category-summary p { margin: 0 !important; }
.cs-category-summary > :last-child { margin-bottom: 0 !important; }
.cs-category-hero-pill {
  flex: none;
  padding: 8px 11px;
  border: 1px solid rgb(from var(--color-primary) r g b / .3);
  border-radius: 999px;
  background: rgb(from var(--color-primary) r g b / .08);
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .075em;
  white-space: nowrap;
}
.category-description.cs-category-hero .cs-rank-upgrade-intro {
  margin-top: 14px;
}
@media (width <= 700px) {
  .category-description.cs-category-hero { padding: 16px; margin-bottom: 16px; }
  .cs-category-hero-main { align-items: flex-start; }
  .cs-category-hero-pill { display: none; }
  .category-description.cs-category-hero .cs-welcome-name { font-size: 23px; }
  .cs-category-summary { font-size: 12.5px; }
}

/* Native, reliable horizontal scrolling for all custom comparison/purchase tables. */
.cs-cmp-mount,
.cs-qbuy-mount { min-width: 0; max-width: 100%; }
.cs-cmp-scroll,
.cs-qbuy-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgb(from var(--color-primary) r g b / .55) rgb(from var(--color-brighter-bg) r g b / .6);
}
.cs-cmp-scroll::-webkit-scrollbar,
.cs-qbuy-scroll::-webkit-scrollbar { height: 8px; }
.cs-cmp-scroll::-webkit-scrollbar-track,
.cs-qbuy-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgb(from var(--color-brighter-bg) r g b / .75);
}
.cs-cmp-scroll::-webkit-scrollbar-thumb,
.cs-qbuy-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(from var(--color-primary) r g b / .55);
}
.cs-scroll-hint {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 0 2px 8px;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  pointer-events: none;
}
.cs-scroll-hint svg { width: 15px; height: 15px; color: var(--color-primary); }

@media (width <= 760px) {
  .cs-scroll-hint { display: flex; }
  .cs-cmp-scroll,
  .cs-qbuy-scroll { padding-bottom: 8px; }
  .cs-cmp { min-width: max-content; }

  /* Keep the feature name visible while swiping through rank/package columns. */
  .cs-cmp-label {
    position: sticky;
    left: 0;
    z-index: 7;
    box-shadow: 7px 0 14px rgb(0 0 0 / .16);
  }
  .cs-cmp-label::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--color-brighter-bg);
  }
  .cs-cmp-label.cs-cmp-crow::after {
    background: var(--color-brighter-bg);
  }

  /* Do not squash quantity tables; scroll them naturally instead. */
  .cs-qbuy-row {
    grid-template-columns: minmax(150px, 1.35fr) repeat(var(--cs-qbuy-cols, 1), minmax(108px, 1fr));
    min-width: max(560px, calc(170px + (var(--cs-qbuy-cols, 1) * 116px)));
    gap: 8px;
  }
}

/* Cleaner crate category/card rhythm. */
.cs-crates-grid { align-items: stretch; gap: 16px; }
.cs-crate-card {
  width: 100%;
  height: 100%;
  box-shadow: 0 10px 28px rgb(0 0 0 / .12);
}
.cs-crate-rewards-head {
  padding-top: 2px;
  border-top: 1px solid rgb(from var(--cs-border) r g b / .7);
}
.cs-touch-only { display: none; }
.cs-hover-only { display: inline; }
.cs-mc-item.cs-mc-item-active {
  z-index: 40;
}
.cs-mc-item.cs-mc-item-active .cs-mc-tooltip {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .cs-hover-only { display: none; }
  .cs-touch-only { display: inline; }
}

@media (width <= 620px) {
  .cs-crates-grid { gap: 12px; }
  .cs-crate-card { max-width: none; }
  .cs-mc-inventory {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    --cs-mc-slot: min(8.65vw, 34px);
  }
  .cs-mc-tooltip {
    z-index: 10010;
    max-height: min(52vh, 360px);
    overflow-y: auto;
  }
}

/* Keep normal package categories balanced on small screens too. */
@media (width <= 700px) {
  .store-products-images,
  .store-products-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .store-products-grid .store-product,
  .store-products-images .store-product {
    width: 100%;
    min-width: 0;
  }
}

/* ================================================================
   Kaide v15 — compact category notices + full cart page
   ================================================================ */

/* The cart pill is now a normal link to the full cart page. */
.cs-cart-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1;
  opacity: .78;
}

/* Compact message used across every category. */
.cs-category-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 13px 16px 13px 13px;
  border: 1px solid rgb(from var(--color-primary) r g b / .24);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgb(from var(--color-primary) r g b / .16), rgb(from var(--color-primary) r g b / .07)),
    var(--color-brighter-bg);
  color: var(--color-text-darker);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.cs-category-notice-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--color-primary);
  background: rgb(from var(--color-primary) r g b / .12);
}
.cs-category-notice-icon svg { width: 18px; height: 18px; }
.cs-category-notice-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 13px;
  line-height: 1.5;
}
.cs-category-notice-copy > strong {
  flex: none;
  color: var(--color-primary);
  font-weight: 800;
}
.cs-category-notice-custom {
  min-width: 0;
  display: inline;
}
.cs-category-notice-custom p,
.cs-category-notice-custom div {
  display: inline;
  margin: 0 !important;
}
.cs-category-notice-pill {
  flex: none;
  padding: 6px 9px;
  border: 1px solid rgb(from var(--color-primary) r g b / .25);
  border-radius: 999px;
  color: var(--color-primary);
  background: rgb(from var(--color-primary) r g b / .08);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}

@media (width <= 720px) {
  .cs-category-notice {
    align-items: flex-start;
    margin-bottom: 14px;
    padding: 11px 12px 11px 10px;
  }
  .cs-category-notice-icon { flex-basis: 30px; width: 30px; height: 30px; }
  .cs-category-notice-icon svg { width: 16px; height: 16px; }
  .cs-category-notice-copy {
    display: block;
    font-size: 12px;
    line-height: 1.45;
  }
  .cs-category-notice-copy > strong { margin-right: 4px; }
  .cs-category-notice-pill { display: none; }
  .cs-cart-label { display: none; }
}

/* Full /checkout/basket page. */
body.page-cart .site-main > .site-header { margin-bottom: 30px; }
body.page-cart .site-content { width: 100%; }

.cs-cart-page-shell {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-cart-page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px 4px;
}
.cs-cart-page-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.cs-cart-page-heading h1 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.cs-cart-page-total-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.cs-cart-page-total-top strong {
  color: var(--color-text);
  font-size: 21px;
  letter-spacing: 0;
}

.cs-cart-account-card,
.cs-cart-items-card,
.cs-cart-summary-card,
.cs-cart-empty-card {
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
}

.cs-cart-account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}
.cs-cart-account-user {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
}
.cs-cart-account-avatar {
  flex: none;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid rgb(from var(--color-primary) r g b / .3);
  background: var(--color-bg);
}
.cs-cart-account-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.cs-cart-account-small {
  display: block;
  margin-bottom: 3px;
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.cs-cart-account-user strong {
  display: block;
  color: var(--color-text);
  font-size: 17px;
}
.cs-cart-switch-account,
.cs-cart-continue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 11px;
  color: var(--color-text);
  background: rgb(from var(--color-bg) r g b / .35);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.cs-cart-switch-account:hover,
.cs-cart-continue:hover {
  border-color: var(--color-primary);
  background: rgb(from var(--color-primary) r g b / .08);
  color: var(--color-text);
  text-decoration: none;
}
.cs-cart-switch-account:active,
.cs-cart-continue:active { transform: scale(.98); }

.cs-cart-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cs-cart-form.updating { position: relative; pointer-events: none; }
.cs-cart-form.updating::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: var(--cs-radius);
  background: rgb(from var(--color-bg) r g b / .38);
  backdrop-filter: blur(1px);
}

.cs-cart-items-card { overflow: hidden; }
.cs-cart-items-head,
.cs-cart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 115px 142px 46px;
  align-items: center;
  gap: 16px;
}
.cs-cart-items-head {
  padding: 13px 20px;
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.cs-cart-items-list { display: flex; flex-direction: column; }
.cs-cart-item {
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.cs-cart-item + .cs-cart-item { border-top: var(--cs-border-width) solid var(--cs-border); }
.cs-cart-item-info { min-width: 0; margin: 0 !important; }
.cs-cart-item .title {
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  line-height: 1.25;
}
.cs-cart-item .title a:hover { color: var(--color-primary); }
.cs-cart-item-options {
  margin: 5px 0 0 !important;
  padding: 0 !important;
  color: var(--color-text-secondary);
  font-size: 11px;
}
.cs-cart-item-options li {
  display: inline !important;
  padding: 0 !important;
}
.cs-cart-item-options li + li::before { content: " • "; opacity: .5; }
.cs-cart-item-options li::before { display: none !important; }
.cs-cart-item-price {
  color: var(--color-text-darker);
  font-size: 13px;
  font-weight: 700;
}
.cs-cart-item-price strong { font-weight: 700; }
.cs-cart-item-quantity {
  width: 142px;
  min-width: 0;
  margin: 0;
  background: var(--color-bg);
}
.cs-cart-item-remove {
  --btn-size: 40px;
  width: 40px !important;
  min-width: 40px;
  border-radius: 10px !important;
}

.cs-cart-summary-card { padding: 18px 20px; }
.cs-cart-summary-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 16px;
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  color: var(--color-text-secondary);
  font-size: 12px;
}
.cs-cart-summary-total-label {
  margin-left: auto;
  color: var(--color-text);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.cs-cart-summary-total {
  color: var(--color-primary);
  font-size: 22px;
}
.cs-cart-summary-actions {
  display: grid;
  grid-template-columns: minmax(160px, .35fr) minmax(260px, 1fr);
  gap: 12px;
  padding-top: 16px;
}
.cs-cart-continue,
.cs-cart-checkout {
  width: 100%;
  min-height: 46px;
  line-height: 46px;
}
.cs-cart-checkout { text-align: center; border-radius: 11px; }
.cs-cart-secure-note {
  margin: 10px 0 0;
  color: var(--color-text-secondary);
  font-size: 10px;
  text-align: right;
}

.cs-cart-empty-card {
  padding: 56px 24px;
  text-align: center;
}
.cs-cart-empty-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgb(from var(--color-primary) r g b / .1);
  color: var(--color-primary);
}
.cs-cart-empty-icon svg { width: 28px; height: 28px; }
.cs-cart-empty-card h2 { margin: 0 0 7px; font-size: 21px; }
.cs-cart-empty-card p { margin: 0 0 20px; color: var(--color-text-secondary); font-size: 13px; }
.cs-cart-empty-cta { margin: 0 auto; border-radius: 11px; }

@media (width <= 760px) {
  body.page-cart .site-main > .site-header { margin-bottom: 14px; }
  .cs-cart-page-shell { gap: 12px; }
  .cs-cart-page-heading { align-items: center; }
  .cs-cart-page-heading h1 { font-size: 21px; }
  .cs-cart-page-total-top span { display: none; }
  .cs-cart-page-total-top strong { font-size: 17px; }

  .cs-cart-account-card { padding: 13px; }
  .cs-cart-account-avatar { width: 42px; height: 42px; }
  .cs-cart-switch-account { min-height: 36px; padding: 0 10px; font-size: 10px; }

  .cs-cart-items-head { display: none; }
  .cs-cart-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 10px;
    padding: 15px 13px;
  }
  .cs-cart-item-info { grid-column: 1 / -1; }
  .cs-cart-item-price {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    color: var(--color-primary);
    font-size: 14px;
  }
  .cs-cart-item-quantity {
    grid-column: 2;
    grid-row: 2;
    width: 132px;
  }
  .cs-cart-item-remove {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .cs-cart-summary-card { padding: 14px 13px; }
  .cs-cart-summary-actions { grid-template-columns: 1fr; }
  .cs-cart-continue { order: 2; }
  .cs-cart-checkout { order: 1; }
  .cs-cart-secure-note { text-align: center; line-height: 1.5; }
}

@media (width <= 430px) {
  .cs-cart-account-small { display: none; }
  .cs-cart-account-user strong { font-size: 14px; }
  .cs-cart-item-quantity { width: 124px; }
}

/* =========================================================
   Kaide Store v16 — top website strip, unified notices,
   full-page cart visibility, and reliable mobile tables
   ========================================================= */

/* A dedicated website strip keeps the external-home action out of the
   store header and guarantees that it remains visible on mobile. */
.cs-store-topbar {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 16px 16px 2px;
  position: relative;
  z-index: 6;
}
.cs-store-home-link {
  width: fit-content;
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(from var(--color-primary) r g b / .42);
  border-radius: 999px;
  background: rgb(from var(--color-brighter-bg) r g b / .88);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  box-shadow: 0 8px 24px rgb(0 0 0 / .14);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.cs-store-home-link svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--color-primary);
}
.cs-store-home-link:hover,
.cs-store-home-link:focus {
  transform: translateY(-1px);
  border-color: var(--color-primary);
  background: rgb(from var(--color-primary) r g b / .10);
  color: var(--color-text);
  text-decoration: none;
}
@media (width <= 960px) {
  .cs-store-topbar { padding: 10px 12px 0; }
  .cs-store-home-link { min-height: 36px; padding: 0 12px; font-size: 11px; }
  .cs-store-home-link svg { width: 15px; height: 15px; }
}

/* The old header placement is no longer used in v16. */
.cs-main-site-link { display: none !important; }

/* Every category notice now uses the same circular information mark and
   presents its title and description as two clearly separated lines. */
.cs-category-notice-icon {
  border-radius: 50%;
  border: 1px solid rgb(from var(--color-primary) r g b / .30);
}
.cs-category-notice-copy {
  display: block;
  align-items: initial;
  gap: 0;
}
.cs-category-notice-copy > strong {
  display: block;
  margin: 0 0 2px;
  line-height: 1.3;
}
.cs-category-notice-copy > span,
.cs-category-notice-custom {
  display: block;
  color: var(--color-text-darker);
  line-height: 1.5;
}
.cs-category-notice-custom p,
.cs-category-notice-custom div {
  display: block;
  margin: 0 !important;
}
@media (width <= 720px) {
  .cs-category-notice-copy > strong { margin: 0 0 2px; }
}

/* The base Tebex stylesheet intentionally hides a .basket placed inside
   .site-content because it expects the basket to be a drawer. v15 turned it
   into a full page, so explicitly reveal it and re-assert the page grid. */
.site-content .basket.cs-cart-form {
  display: flex !important;
}
.basket.cs-cart-form .basket-item.cs-cart-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 115px 142px 46px;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.basket.cs-cart-form .basket-item.cs-cart-item + .basket-item.cs-cart-item {
  border-top: var(--cs-border-width) solid var(--cs-border);
}
.basket.cs-cart-form .basket-item.cs-cart-item .info {
  margin-right: 0;
}
@media (width <= 760px) {
  .basket.cs-cart-form .basket-item.cs-cart-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px 10px;
    padding: 15px 13px;
  }
}

/* The legacy theme used to replace comparison tables with fallback cards
   below 991px. Keep the real table mounted at every viewport size so native
   touch scrolling remains available on phones/tablets. */
@media (width <= 991px) {
  .cs-cmp-mount {
    display: block !important;
    width: 100%;
    min-width: 0;
  }
  .cs-cmp-fallback {
    display: none !important;
  }
}
@media (width <= 760px) {
  .cs-cmp-scroll,
  .cs-qbuy-scroll {
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
  }
  .cs-cmp-scroll {
    position: relative;
  }
  .cs-cmp {
    min-width: max-content !important;
  }
  .cs-cmp-card { min-width: 150px; }
  .cs-cmp-label { min-width: 150px; }
}

/* ================================================================
   Kaide Store v17 — mobile polish
   - no duplicate Kaide.gg button while the drawer is open
   - notices always wrap as title + description
   - compare hint remains visible before the first swipe
   - rank/table layouts cannot push the page sideways
   - crate reward details render directly under the inventory on touch
   ================================================================ */

/* Keep the global Kaide.gg shortcut when browsing, but hide it while the
   mobile drawer is open because the drawer already contains Website. */
.cs-store-topbar {
  transition: opacity .15s ease, visibility .15s ease, transform .15s ease;
}
@media (width <= 960px) {
  body.show-navigation .cs-store-topbar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
  }
}

/* Prevent a wide comparison child from widening the whole mobile page. */
@media (width <= 960px) {
  .site,
  .site-main,
  .site-content,
  .store-products,
  .cs-cmp-mount,
  .cs-qbuy-mount,
  .cs-rank-upgrades,
  .cs-rank-upgrades-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .site-main,
  .site-content,
  .store-products {
    overflow-x: clip;
  }
}

/* A notice is always a two-line information block. */
.cs-category-notice-copy > strong {
  display: block !important;
}
.cs-category-notice-copy > span,
.cs-category-notice-custom {
  display: block !important;
  min-width: 0;
  white-space: normal !important;
  overflow-wrap: anywhere;
}
@media (width <= 720px) {
  .cs-category-notice-copy > strong {
    margin: 0 0 3px !important;
  }
}

/* Put the instruction at the visible left edge, not at the far end of a
   horizontally wider component. It is outside the scroll area and therefore
   visible before the customer moves the table. */
@media (width <= 760px) {
  .cs-scroll-hint {
    position: sticky;
    left: 0;
    z-index: 12;
    width: min(100%, calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    justify-content: flex-start;
    margin: 0 0 8px;
    padding: 0 2px;
  }
  .cs-cmp-scroll,
  .cs-qbuy-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overscroll-behavior-inline: contain;
  }
}

/* The purchase/upgrade panel should never force horizontal page scrolling. */
@media (width <= 700px) {
  .cs-rank-upgrades {
    padding: 14px;
    overflow: hidden;
  }
  .cs-rank-upgrades-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
  }
  .cs-rank-upgrades-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 11px;
  }
  .cs-rank-upgrades-icon svg { width: 20px; height: 20px; }
  .cs-rank-upgrades-copy,
  .cs-rank-upgrade-card,
  .cs-rank-upgrade-top,
  .cs-rank-upgrade-info {
    min-width: 0;
    max-width: 100%;
  }
  .cs-rank-upgrades-copy h2 {
    font-size: 18px !important;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }
  .cs-rank-upgrades-copy p {
    font-size: 12px;
    line-height: 1.45;
  }
  .cs-rank-upgrades-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cs-rank-upgrade-card {
    width: 100%;
    padding: 14px;
  }
  .cs-rank-upgrade-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* Desktop hover tooltips remain unchanged. Clicking/tapping an item also uses
   a column layout, preventing lore lines from collapsing into one row. */
.cs-mc-item.cs-mc-item-active .cs-mc-tooltip {
  flex-direction: column;
}

/* On touch devices, show the selected reward in a stable Minecraft-style
   panel immediately below its inventory. This avoids a fixed tooltip fighting
   Safari's browser chrome or moving while the page scrolls. */
.cs-mc-mobile-readout { display: none; }
@media (hover: none), (pointer: coarse) {
  .cs-mc-item.cs-mc-item-active .cs-mc-tooltip {
    display: none !important;
  }
  .cs-mc-mobile-readout:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    width: 100%;
    margin: -4px 0 18px;
    padding: 9px 11px 10px;
    border: 2px solid #2b0b53;
    border-radius: 3px;
    background: rgba(16, 0, 16, .97);
    color: #fff;
    box-shadow: inset 0 0 0 1px #100010, 0 5px 18px rgba(0,0,0,.34);
    font-family: var(--cs-mc-tooltip-font);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .cs-mc-mobile-readout .cs-mc-tip-name,
  .cs-mc-mobile-readout .cs-mc-tip-line,
  .cs-mc-mobile-readout .cs-mc-tip-chance {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .cs-mc-mobile-readout .cs-mc-tip-name { margin-bottom: 3px; }
  .cs-mc-mobile-readout .cs-mc-tip-line { color: #aaaaff; }
  .cs-mc-mobile-readout .cs-mc-tip-chance { margin-top: 3px; color: #aaa; }
}


/* ================================================================
   Kaide Store v18 — reward tooltip + contextual store nav polish
   ================================================================ */

/* On touch devices the inline mobile readout is the ONLY tooltip surface.
   Safari keeps tapped buttons focused, so hiding only the active tooltip can
   allow the desktop :focus tooltip to reappear near the bottom of the page. */
@media (hover: none), (pointer: coarse) {
  .cs-mc-item .cs-mc-tooltip,
  .cs-mc-item:hover .cs-mc-tooltip,
  .cs-mc-item:focus .cs-mc-tooltip,
  .cs-mc-item.cs-mc-item-active .cs-mc-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }

  /* Rarity classes are copied from the selected item to this panel, so these
     existing Minecraft rarity colors now match desktop exactly. */
  .cs-mc-mobile-readout.cs-rarity-common .cs-mc-tip-name { color: #ffffff; }
  .cs-mc-mobile-readout.cs-rarity-uncommon .cs-mc-tip-name { color: #55ff55; }
  .cs-mc-mobile-readout.cs-rarity-rare .cs-mc-tip-name { color: #55ffff; }
  .cs-mc-mobile-readout.cs-rarity-epic .cs-mc-tip-name { color: #ff55ff; }
  .cs-mc-mobile-readout.cs-rarity-legendary .cs-mc-tip-name { color: #ffaa00; }
  .cs-mc-mobile-readout.cs-rarity-mythic .cs-mc-tip-name { color: #ff5555; }
}

/* Keep the contextual Home / Forums shortcut visually identical. */
.cs-store-forums-link svg {
  stroke-linejoin: round;
}

/* ================================================================
   Kaide Store v20 — temporary cart confirmation popover
   ================================================================ */
.cs-cart-added-toast {
  position: fixed;
  top: 92px;
  right: max(22px, env(safe-area-inset-right));
  z-index: 2100;
  width: min(330px, calc(100vw - 32px));
  padding: 15px;
  border: 1px solid rgb(from var(--color-primary) r g b / .40);
  border-radius: 14px;
  background: rgb(from var(--color-brighter-bg) r g b / .98);
  color: var(--color-text);
  box-shadow: 0 18px 50px rgb(0 0 0 / .34), inset 0 1px 0 rgb(255 255 255 / .04);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.cs-cart-added-toast.cs-cart-added-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cs-cart-added-head {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.cs-cart-added-head strong {
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
}
.cs-cart-added-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #28d746;
  color: #08170b;
}
.cs-cart-added-check svg { width: 13px; height: 13px; }
.cs-cart-added-close {
  width: 24px;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.cs-cart-added-close:hover,
.cs-cart-added-close:focus { color: var(--color-text); }
.cs-cart-added-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px 31px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}
.cs-cart-added-total { text-align: right; }
.cs-cart-added-view {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 43px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .35px;
  font-size: 13px;
  font-weight: 800;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.cs-cart-added-view:hover,
.cs-cart-added-view:focus {
  background: var(--color-primary-hover);
  color: var(--color-primary-text-hover);
  text-decoration: none;
  transform: translateY(-1px);
}

@media (width <= 767px) {
  .cs-cart-added-toast {
    top: max(14px, env(safe-area-inset-top));
    left: 16px;
    right: 16px;
    width: auto;
    max-width: none;
    border-radius: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cs-cart-added-toast,
  .cs-cart-added-view { transition: none !important; }
}

/* ================================================================
   Kaide Store v24 — homepage server/Discord status polish ONLY
   - Restores the original themed orange/Discord cards.
   - Adds Deluxe-style live count badges + action copy.
   - Hides any legacy Home/Forums/Website row inside the menu.
   - Keeps the homepage menu aligned with Featured Packages.
   ================================================================ */

/* Safety net: even if an older navigation.twig is cached/deployed, never show
   the legacy contextual Home / Forums / Website entry inside the menu. */
.navigation-vertical .menu > .cs-main-site-nav,
.navigation-horizontal .menu > .cs-main-site-nav {
  display: none !important;
}

/* Live status badge inserted by layout.html. */
body.page-index .cs-home-cards .info .cs-nav-text {
  position: relative;
  padding-top: 19px;
}
body.page-index .cs-home-cards .cs-home-stat {
  position: absolute;
  top: -4px;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}
body.page-index .cs-home-cards .info .cs-nav-title {
  text-transform: uppercase;
}
body.page-index .cs-home-cards .info .cs-nav-subtitle {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

@media (width > 960px) {
  /* Keep the original Kaide themed card styling; only align the pair cleanly. */
  body.page-index .cs-home-cards {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 0;
  }

  /* The requested homepage menu alignment from v23 remains. */
  body.page-index .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 82px;
  }
}


/* ================================================================
   Kaide Store v25 — requested homepage-only micro adjustments
   ONLY:
   1) Keep Join Now subtitle as CLICK TO COPY on hover.
   2) Keep Discord subtitle as CLICK TO JOIN on hover.
   3) Move the large Kaide server logo slightly lower on desktop.
   ================================================================ */

/* Freeze the two action subtitles so the built-in hover alternates
   ("players online" / other helper copy) never replace them. */
body.page-index .cs-home-cards .info.server .cs-nav-sub-base,
body.page-index .cs-home-cards .info.server:hover .cs-nav-sub-base,
body.page-index .cs-home-cards .info.server:focus .cs-nav-sub-base {
  display: inline !important;
  font-size: 0 !important;
}
body.page-index .cs-home-cards .info.server .cs-nav-sub-base::after {
  content: "CLICK TO COPY";
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
}

body.page-index .cs-home-cards .info.discord .cs-nav-sub-base,
body.page-index .cs-home-cards .info.discord:hover .cs-nav-sub-base,
body.page-index .cs-home-cards .info.discord:focus .cs-nav-sub-base {
  display: inline !important;
  font-size: 0 !important;
}
body.page-index .cs-home-cards .info.discord .cs-nav-sub-base::after {
  content: "CLICK TO JOIN";
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .045em;
}

body.page-index .cs-home-cards .info.server .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.server:hover .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.server:focus .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.discord .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.discord:hover .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.discord:focus .cs-nav-sub-hover {
  display: none !important;
}

/* Homepage desktop only: move the visible Kaide Network/server logo down
   without changing the menu/Featured Packages alignment underneath it. */
@media (width > 960px) {
  body.page-index .store-sidebar .cs-sidebar-logo {
    position: relative;
    top: 62px;
  }
}


/* ================================================================
   Kaide Store v26 — desktop logo alignment only
   Keep the large Kaide Network sidebar logo at the exact same
   vertical position on the homepage and every category/page.
   ================================================================ */
@media (width > 960px) {
  body .store-sidebar .cs-sidebar-logo {
    position: relative;
    top: 62px;
  }
}


/* ================================================================
   Kaide Store v27 — alignment correction only
   ONLY:
   1) Keep the desktop sidebar/menu stack at the same vertical position
      on the homepage and all category/pages.
   2) Remove unintended subtitle indentation from Join Now / Discord.
   ================================================================ */

@media (width > 960px) {
  /* Match the homepage sidebar spacing everywhere so the logo, menu,
     and widgets do not jump vertically between pages. */
  body .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 82px;
  }
}

/* Use the real subtitle text already supplied by layout.html rather than
   pseudo-element replacement, and keep it flush with the title. */
body.page-index .cs-home-cards .info.server .cs-nav-sub-base,
body.page-index .cs-home-cards .info.server:hover .cs-nav-sub-base,
body.page-index .cs-home-cards .info.server:focus .cs-nav-sub-base,
body.page-index .cs-home-cards .info.discord .cs-nav-sub-base,
body.page-index .cs-home-cards .info.discord:hover .cs-nav-sub-base,
body.page-index .cs-home-cards .info.discord:focus .cs-nav-sub-base {
  display: inline !important;
  font-size: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

body.page-index .cs-home-cards .info.server .cs-nav-sub-base::after,
body.page-index .cs-home-cards .info.discord .cs-nav-sub-base::after {
  content: none !important;
}

body.page-index .cs-home-cards .info.server .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.server:hover .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.server:focus .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.discord .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.discord:hover .cs-nav-sub-hover,
body.page-index .cs-home-cards .info.discord:focus .cs-nav-sub-hover {
  display: none !important;
}

body.page-index .cs-home-cards .info .cs-nav-title,
body.page-index .cs-home-cards .info .cs-nav-subtitle {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-indent: 0 !important;
}

/* ================================================================
   Kaide Store v28 — move sidebar logo slightly lower on all pages
   Only adjusts the large sidebar logo vertical position site-wide.
   ================================================================ */
@media (width > 960px) {
  body .store-sidebar .cs-sidebar-logo {
    top: 78px !important;
  }
}


/* ================================================================
   Kaide Store v29 — desktop menu alignment ONLY
   Align the left Menu box with the first package section on each
   category type. No other styling or behavior is changed.
   ================================================================ */
@media (width > 960px) {
  /* Keys / crate cards */
  body:not(.page-index):has(.cs-crates-grid)
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 34px;
  }

  /* Gold / Bundles / comparison-table categories */
  body:not(.page-index):has(.cs-cmp-mount)
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 34px;
  }

  /* Ranks: align with the Purchase or Upgrade panel.
     Kept after comparison rule so Ranks wins if its lower comparison
     table is also present on the page. */
  body:not(.page-index):has(.cs-rank-upgrades)
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 55px;
  }
}


/* ================================================================
   Kaide Store v30 — desktop menu leveling ONLY
   Fine-tunes only the left Menu box vertical position so it lines up
   with the first package/card section shown in each screenshot.
   ================================================================ */
@media (width > 960px) {
  /* Homepage: align Menu with the top of Featured Package cards. */
  body.page-index .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 97px !important;
  }

  /* Gold / simple comparison pages: align Menu with comparison cards. */
  body:not(.page-index):has(.cs-cmp-mount):not(:has(.cs-category-notice-custom)):not(:has(.cs-rank-upgrades))
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 36px !important;
  }

  /* Bundles / comparison pages with a full notice description:
     the notice is one line taller, so the package table starts lower. */
  body:not(.page-index):has(.cs-cmp-mount):has(.cs-category-notice-custom):not(:has(.cs-rank-upgrades))
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 57px !important;
  }

  /* Keys / crate pages: align Menu with the crate cards. */
  body:not(.page-index):has(.cs-crates-grid)
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 36px !important;
  }

  /* Ranks: align Menu with the Purchase or Upgrade panel. */
  body:not(.page-index):has(.cs-rank-upgrades)
  .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 58px !important;
  }
}


/* ================================================================
   Kaide Store v31 — GLOBAL DESKTOP LEVELING ONLY
   No visual redesigns or behavior changes.
   - Keep the left Menu at one consistent vertical position everywhere.
   - Normalize category notice height so package sections begin on the
     same horizontal line across Gold / Ranks / Keys / Bundles.
   - Existing logo position remains untouched.
   ================================================================ */
@media (width > 960px) {

  /* One menu position across homepage, categories, checkout, and pages.
     This intentionally overrides the older page-specific menu offsets. */
  body .store-sidebar .site-navigation.navigation-vertical {
    margin-top: 58px !important;
  }

  /* Short notices (Gold / Keys) were making their package sections start
     higher than Ranks / Bundles. Equalize only their vertical footprint. */
  body:not(.page-index) .cs-category-notice {
    min-height: 106px;
    box-sizing: border-box;
  }
}


/* ================================================================
   Kaide Store v32 — desktop alignment + notice copy fix
   Alignment ONLY:
   - Sidebar logo/menu use one fixed layout track on every desktop page.
   - Checkout content begins on the same main-content baseline as categories.
   - Remove the temporary forced notice height from v31.
   ================================================================ */
@media (width > 960px) {

  /* Give the sidebar a deterministic first row so the logo and Menu can no
     longer move when the page template/content changes. */
  html body .store-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 324px auto;
    align-content: start;
    gap: 18px !important;
  }

  html body .store-sidebar .cs-sidebar-logo {
    grid-row: 1;
    position: static !important;
    top: auto !important;
    height: 100%;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
  }

  /* One exact Menu position everywhere; this supersedes every older
     homepage/category-specific margin rule. */
  html body .store-sidebar .site-navigation.navigation-vertical,
  html body.page-index .store-sidebar .site-navigation.navigation-vertical,
  html body:not(.page-index) .store-sidebar .site-navigation.navigation-vertical,
  html body:not(.page-index):has(.cs-crates-grid) .store-sidebar .site-navigation.navigation-vertical,
  html body:not(.page-index):has(.cs-cmp-mount) .store-sidebar .site-navigation.navigation-vertical,
  html body:not(.page-index):has(.cs-rank-upgrades) .store-sidebar .site-navigation.navigation-vertical,
  html body:not(.page-index):has(.cs-cmp-mount):has(.cs-category-notice-custom):not(:has(.cs-rank-upgrades)) .store-sidebar .site-navigation.navigation-vertical,
  html body:not(.page-index):has(.cs-cmp-mount):not(:has(.cs-category-notice-custom)):not(:has(.cs-rank-upgrades)) .store-sidebar .site-navigation.navigation-vertical {
    grid-row: 2;
    margin-top: 0 !important;
  }

  /* v31 temporarily forced short notices taller, which created the large
     empty Gold/Keys bars. Let the actual title + description set the height. */
  html body:not(.page-index) .cs-category-notice {
    min-height: 0 !important;
    height: auto !important;
  }

  /* Checkout was the only major page beginning above the common content
     baseline used by the homepage/category pages. */
  html body.page-cart .cs-cart-page {
    padding-top: 68px !important;
  }
}


/* ================================================================
   Kaide Store v35 — Deluxe-style server selection popup ONLY
   The underlying Tebex server <select> remains the submitted field.
   ================================================================ */

.cs-server-picker-popup {
  background: rgb(8 4 6 / .82) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.cs-server-picker-popup .popup-scroll-cont {
  padding: clamp(18px, 4vw, 46px);
}

.cs-server-picker-popup .cs-server-picker-content {
  max-width: 720px;
  padding: 24px 22px 22px;
  border: 1px solid rgb(from var(--color-primary) r g b / .38);
  border-radius: 14px;
  background: var(--color-brighter-bg);
  box-shadow: 0 24px 80px rgb(0 0 0 / .42);
}

.cs-server-picker-popup .popup-close {
  top: -54px;
  right: 0;
  width: 42px;
  height: 42px;
  border: 1px solid rgb(from var(--color-primary) r g b / .65);
  border-radius: 8px;
  opacity: .95;
  background: rgb(from var(--color-bg) r g b / .82);
}

.cs-server-picker-popup .popup-close::before {
  background-color: var(--color-primary);
}

.cs-server-picker-popup .popup-close:hover,
.cs-server-picker-popup .popup-close:focus {
  background: rgb(from var(--color-primary) r g b / .12);
  box-shadow: 0 0 12px rgb(from var(--color-primary) r g b / .22);
}

.cs-server-picker-intro {
  margin: 0 0 18px;
  padding-right: 48px;
}

.cs-server-picker-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cs-server-picker-title {
  margin: 0 !important;
  color: var(--color-text);
  font-size: 24px !important;
  font-weight: 800 !important;
  line-height: 1.15;
  text-transform: none !important;
}

.cs-server-picker-subtitle {
  margin: 7px 0 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.cs-server-picker-original-heading,
.cs-server-picker-original-description {
  display: none !important;
}

.cs-server-picker-native-field {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cs-server-picker-native:not(.cs-server-picker-native-field .cs-server-picker-native) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.cs-server-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.cs-server-picker-choice {
  min-width: 0;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--cs-border);
  border-radius: 9px;
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease, transform .14s ease, box-shadow .14s ease;
}

.cs-server-picker-choice:hover,
.cs-server-picker-choice:focus {
  border-color: rgb(from var(--color-primary) r g b / .7);
  background:
    linear-gradient(rgb(from var(--color-primary) r g b / .08), rgb(from var(--color-primary) r g b / .08)),
    var(--color-bg);
  transform: translateY(-1px);
  outline: none;
}

.cs-server-picker-choice.is-selected {
  border-color: var(--color-primary);
  background:
    linear-gradient(rgb(from var(--color-primary) r g b / .18), rgb(from var(--color-primary) r g b / .18)),
    var(--color-bg);
  box-shadow: inset 0 0 0 1px rgb(from var(--color-primary) r g b / .25);
}

.cs-server-picker-choice-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-server-picker-choice-check {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  color: transparent;
  background: rgb(from var(--color-bg) r g b / .6);
}

.cs-server-picker-choice-check svg {
  width: 13px;
  height: 13px;
}

.cs-server-picker-choice.is-selected .cs-server-picker-choice-check {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.cs-server-picker-form .cs-server-picker-actions,
.cs-server-picker-form .actions {
  position: relative !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

.cs-server-picker-form .actions .btn-primary,
.cs-server-picker-form .actions .btn-secondary,
.cs-server-picker-form .actions .btn-tertiary {
  width: 100% !important;
  min-height: 48px;
  border-radius: 9px;
  font-weight: 800;
}

@media (width <= 600px) {
  .cs-server-picker-popup .popup-scroll-cont {
    align-items: center !important;
    padding: 18px;
  }

  .cs-server-picker-popup .cs-server-picker-content {
    padding: 20px 16px 16px;
    border-radius: 12px;
  }

  .cs-server-picker-popup .popup-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
  }

  .cs-server-picker-intro {
    padding-right: 42px;
  }

  .cs-server-picker-title {
    font-size: 21px !important;
  }

  .cs-server-picker-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cs-server-picker-choice {
    min-height: 54px;
  }
}


/* ================================================================
   Kaide Store v37 — Deluxe-style PACKAGE POPUP buttons ONLY
   Scope: product detail popup only.
   ================================================================ */

.store-product-popup .store-product-full .actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100%;
}

/* Keep the price above the buttons, like Deluxe. */
.store-product-popup .store-product-full .actions .price {
  width: 100% !important;
  margin: 0 0 2px !important;
}

/* If a quantity field exists, keep it full-width above the purchase button. */
.store-product-popup .store-product-full .actions .quantity-field {
  width: 100% !important;
  max-width: none !important;
}

/* Main purchase action: Deluxe-style green full-width button. */
.store-product-popup .store-product-full .actions .add,
.store-product-popup .store-product-full .actions a.add,
.store-product-popup .store-product-full .actions button.add {
  width: 100% !important;
  max-width: none !important;
  min-height: 56px;
  height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #4caf68 !important;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.store-product-popup .store-product-full .actions .add:hover,
.store-product-popup .store-product-full .actions .add:focus {
  background: #58b974 !important;
  color: #ffffff !important;
  filter: none !important;
  transform: none !important;
}

/* Gift action: convert the existing icon-only Tebex button into a
   full-width Deluxe-style purple text button without changing its click logic. */
:root .store-product-popup .store-product-full .actions .gift {
  --btn-icon: none;
  width: 100% !important;
  max-width: none !important;
  min-height: 56px;
  height: 56px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #9942f5 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.store-product-popup .store-product-full .actions .gift::before {
  display: none !important;
}

.store-product-popup .store-product-full .actions .gift::after {
  content: "Gift this package";
  display: block;
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

:root .store-product-popup .store-product-full .actions .gift:hover,
:root .store-product-popup .store-product-full .actions .gift:focus {
  background: #a754fa !important;
  color: transparent !important;
  filter: none !important;
  transform: none !important;
}

@media (width <= 600px) {
  .store-product-popup .store-product-full .actions .add,
  :root .store-product-popup .store-product-full .actions .gift {
    min-height: 52px;
    height: 52px;
  }

  .store-product-popup .store-product-full .actions .add,
  .store-product-popup .store-product-full .actions .gift::after {
    font-size: 16px !important;
  }
}


/* ================================================================
   Kaide Store v38 — TOP CONTROL LEVELING + CART COUNT + 3D HEAD
   Scope: Home/Forums vs. cart/account top row, cart metadata, account head.
   ================================================================ */

/* The Home/Forums strip is a full-width transparent layer. Let the empty
   area pass clicks through while keeping the actual pill clickable. */
.cs-store-topbar {
  pointer-events: none !important;
}
.cs-store-topbar .cs-store-home-link {
  pointer-events: auto !important;
}

@media (width > 960px) {
  /* The topbar occupies 58px of normal flow and site-main adds 30px of
     padding. Raise the visual header only so the cart/account row sits on
     the same top line as the Home/Forums pill without moving page content. */
  .site-main > .site-header {
    transform: translateY(-72px);
    position: relative;
    z-index: 50 !important;
  }

  .site-header-inner .user-actions.cs-account-bar {
    position: relative;
    z-index: 60 !important;
    pointer-events: auto !important;
  }
}

/* Two-line cart amount: total on top, small item count directly beneath. */
.cs-cart-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  line-height: 1;
}

.cs-cart-count {
  display: block;
  color: rgb(from var(--color-text) r g b / .72);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Use the rendered 3D Minecraft head instead of the flat face avatar. */
.cs-account-face img.cs-account-head3d {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  transform: scale(1.08);
  transform-origin: center;
}

@media (width <= 960px) {
  .cs-cart-count {
    font-size: 8px;
  }
}


/* ================================================================
   Kaide Store v39 — PACKAGE POPUP / RECENT PAYMENTS / ACCOUNT HEAD
   Only the requested presentation changes are overridden here.
   ================================================================ */

/* ---------- Package popup: actions directly beneath package image ---------- */

.store-product-popup .store-product-full .cs-product-media {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.store-product-popup .cs-popup-media-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

/* Keep Tebex's original controls present for its existing JS/state logic,
   but hide only the two originals once the under-image proxies are built. */
.store-product-popup .store-product-full .actions .cs-popup-original-action {
  display: none !important;
}

/* Main purchase button: normal Kaide orange, not Deluxe green. */
.store-product-popup .cs-popup-media-add {
  appearance: none;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: 11px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.store-product-popup .cs-popup-media-add:hover,
.store-product-popup .cs-popup-media-add:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-text-hover);
}

.store-product-popup .cs-popup-media-add:active {
  transform: scale(.985);
}

/* Gift action: Kaide dark/outlined companion button. */
.store-product-popup .cs-popup-media-gift {
  appearance: none;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: 11px;
  background: var(--color-secondary);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.store-product-popup .cs-popup-media-gift:hover,
.store-product-popup .cs-popup-media-gift:focus-visible {
  background: var(--color-secondary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-text);
}

.store-product-popup .cs-popup-media-gift:active {
  transform: scale(.985);
}

@media (width <= 600px) {
  .store-product-popup .cs-popup-media-actions {
    margin-top: 12px;
    gap: 8px;
  }

  .store-product-popup .cs-popup-media-add,
  .store-product-popup .cs-popup-media-gift {
    min-height: 48px;
    font-size: 14px;
  }
}

/* ---------- Recent Payments: hover names on desktop + 3D heads ---------- */

.cs-purchase-avatar img.cs-purchase-head3d {
  object-fit: contain;
  transform: scale(1.08);
  transform-origin: center;
}

/* Desktop/fine-pointer behavior: simply hovering a recent payment shows the
   existing username tooltip. No click is required. */
@media (hover: hover) and (pointer: fine) {
  .cs-purchase:hover .cs-purchase-tip,
  .cs-purchase:focus-visible .cs-purchase-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
    transition:
      opacity .13s ease,
      transform .22s cubic-bezier(.34, 1.56, .64, 1),
      visibility 0s linear 0s;
  }

  /* On desktop, an old click-open state should not leave the tooltip stuck
     after the mouse leaves. Touch/mobile keeps the existing tap behavior. */
  .cs-purchase.cs-tip-open:not(:hover):not(:focus-visible) .cs-purchase-tip {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(.8);
    transition:
      opacity .12s ease,
      transform .12s cubic-bezier(.4, 0, 1, 1),
      visibility 0s linear .13s;
  }
}

/* ---------- Signed-in account head: no orange ring, slightly larger ---------- */

.cs-account-avatar {
  width: calc(var(--cs-account-height) * 1.24) !important;
  height: calc(var(--cs-account-height) * 1.24) !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.cs-account-face {
  border-radius: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.cs-account-face img.cs-account-head3d {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.12);
  transform-origin: center;
  image-rendering: pixelated;
}


/* ================================================================
   Kaide Store v40 — ACCOUNT RING + CLEAN RECENT PAYMENT HEADS
   Requested visual changes only.
   ================================================================ */

/* Recent Payments: remove the square/card background and border entirely. */
.cs-purchase-avatar {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.cs-purchase:hover .cs-purchase-avatar,
.cs-purchase.cs-tip-open .cs-purchase-avatar {
  border-color: transparent !important;
}

/* Signed-in account head: restore the orange/yellow circular ring while
   keeping the slightly larger 3D head sizing from v39. */
.cs-account-avatar {
  width: calc(var(--cs-account-height) * 1.24) !important;
  height: calc(var(--cs-account-height) * 1.24) !important;
  padding: 3px !important;
  background: var(--color-primary) !important;
  border-radius: 50% !important;
}

.cs-account-face {
  border-radius: 50% !important;
  overflow: hidden !important;
  background: var(--color-bg) !important;
}

.cs-account-face img.cs-account-head3d {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.10);
  transform-origin: center;
  image-rendering: pixelated;
}


/* ================================================================
   Kaide Store v41 — CLEAR CART BUTTON ONLY
   ================================================================ */

.cs-cart-summary-actions {
  grid-template-columns: minmax(145px, .32fr) minmax(125px, .26fr) minmax(260px, 1fr) !important;
}

.cs-cart-clear {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: var(--cs-border-width) solid rgb(231 76 60 / .85);
  border-radius: 11px;
  background: rgb(231 76 60 / .08);
  color: #ff8175;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 46px;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.cs-cart-clear:hover,
.cs-cart-clear:focus-visible {
  background: rgb(231 76 60 / .18);
  border-color: #ff8175;
  color: #ffffff;
  outline: none;
}

.cs-cart-clear:disabled {
  opacity: .55;
  cursor: wait;
}

@media (width <= 760px) {
  .cs-cart-summary-actions {
    grid-template-columns: 1fr !important;
  }

  .cs-cart-clear {
    min-height: 44px;
    line-height: 44px;
  }
}


/* ================================================================
   Kaide Store v42 — PACKAGE POPUP ACTION FIX ONLY
   - Removes the old Deluxe green/purple controls from view.
   - Keeps only the Kaide actions beneath the package image.
   - Shows quantity instead of Add to Basket when already in cart.
   ================================================================ */

/* Hide the original detail-side purchase controls. They stay in the DOM so
   Tebex's existing listeners/state logic continue to work. */
.store-product-popup .store-product-full .cs-product-detail .actions > .add,
.store-product-popup .store-product-full .cs-product-detail .actions > .gift,
.store-product-popup .store-product-full .cs-product-detail .actions > .quantity-field,
.store-product-popup .store-product-full .cs-product-detail .actions > .open-basket-cta {
  display: none !important;
}

/* Undo the old Deluxe button presentation completely. */
.store-product-popup .store-product-full .actions .add,
.store-product-popup .store-product-full .actions a.add,
.store-product-popup .store-product-full .actions button.add,
:root .store-product-popup .store-product-full .actions .gift {
  background: initial !important;
  color: initial !important;
  border: initial !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Keep the new controls comfortably inside the popup border. */
.store-product-popup .store-product-full .cs-product-media {
  box-sizing: border-box;
  padding-bottom: 0;
}

.store-product-popup .cs-popup-media-actions {
  width: auto !important;
  margin: 14px 12px 12px !important;
  gap: 9px !important;
  box-sizing: border-box;
}

.cs-popup-purchase-slot {
  width: 100%;
  min-width: 0;
}

/* Add to Basket uses the normal Kaide primary button. */
.store-product-popup .cs-popup-media-add {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: 11px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}

.store-product-popup .cs-popup-media-add:hover,
.store-product-popup .cs-popup-media-add:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-text-hover);
  outline: none;
}

.store-product-popup .cs-popup-media-add.is-in-cart {
  cursor: default;
  opacity: .88;
}

/* Quantity replaces Add to Basket while this package is in the basket. */
.store-product-popup .cs-popup-media-quantity {
  width: 100%;
  min-height: 46px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: stretch;
  overflow: hidden;
  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: 11px;
  background: rgb(from var(--color-bg) r g b / .35);
  box-sizing: border-box;
}

.store-product-popup .cs-popup-media-quantity[hidden],
.store-product-popup .cs-popup-media-add[hidden] {
  display: none !important;
}

.store-product-popup .cs-popup-media-quantity-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.store-product-popup .cs-popup-media-quantity-btn:hover,
.store-product-popup .cs-popup-media-quantity-btn:focus-visible {
  background: rgb(from var(--color-primary) r g b / .10);
  color: var(--color-primary);
  outline: none;
}

.store-product-popup .cs-popup-media-quantity-btn:disabled {
  opacity: .35;
  cursor: default;
}

.store-product-popup .cs-popup-media-quantity-value {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: var(--cs-border-width) solid var(--cs-border);
  border-right: var(--cs-border-width) solid var(--cs-border);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 800;
}

/* Gift matches Continue Shopping from the custom cart. */
.store-product-popup .cs-popup-media-gift {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 11px;
  background: rgb(from var(--color-bg) r g b / .35);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}

.store-product-popup .cs-popup-media-gift:hover,
.store-product-popup .cs-popup-media-gift:focus-visible {
  border-color: var(--color-primary);
  background: rgb(from var(--color-primary) r g b / .08);
  color: var(--color-text);
  outline: none;
}

.store-product-popup .cs-popup-media-gift:active {
  transform: scale(.98);
}

@media (width <= 600px) {
  .store-product-popup .cs-popup-media-actions {
    margin: 12px 10px 10px !important;
  }

  .store-product-popup .cs-popup-media-add,
  .store-product-popup .cs-popup-media-gift,
  .store-product-popup .cs-popup-media-quantity {
    min-height: 44px;
  }

  .store-product-popup .cs-popup-media-quantity {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }
}


/* ================================================================
   Kaide Store v43 — PACKAGE POPUP QUANTITY ALIGNMENT ONLY
   Keeps the v42 quantity behavior, but fully resets the proxy controls
   so +/- cannot inherit button spacing and collide with the box edges.
   ================================================================ */

.store-product-popup .cs-popup-media-quantity {
  min-height: 48px !important;
  height: 48px;
  grid-template-columns: 50px minmax(64px, 1fr) 50px !important;
  gap: 0 !important;
  align-items: stretch !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.store-product-popup .cs-popup-media-quantity-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.store-product-popup .cs-popup-media-quantity-value {
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.store-product-popup .cs-popup-media-decrease {
  border-right: 0 !important;
}

.store-product-popup .cs-popup-media-increase {
  border-left: 0 !important;
}

@media (width <= 600px) {
  .store-product-popup .cs-popup-media-quantity {
    height: 46px;
    min-height: 46px !important;
    grid-template-columns: 46px minmax(58px, 1fr) 46px !important;
  }
}


/* ================================================================
   Kaide Store v45 — COUPON REDEMPTION + HEADER TEMPLATE FIX
   Coupon UI only; existing cart/package behavior remains unchanged.
   ================================================================ */

.cs-cart-coupon-card {
  padding: 18px 20px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
}

.cs-cart-coupon-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.cs-cart-coupon-heading > div {
  min-width: 0;
}

.cs-cart-coupon-kicker {
  display: block;
  margin-bottom: 3px;
  color: var(--color-primary);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.cs-cart-coupon-heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.15;
}

.cs-cart-coupon-heading p {
  max-width: 520px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

.cs-cart-coupon-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 10px;
}

.cs-cart-coupon-input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 11px;
  background: rgb(from var(--color-bg) r g b / .42);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}

.cs-cart-coupon-input::placeholder {
  color: var(--color-text-secondary);
}

.cs-cart-coupon-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgb(from var(--color-primary) r g b / .10);
}

.cs-cart-coupon-apply {
  min-height: 46px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
}

.cs-cart-coupon-applied {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.cs-cart-coupon-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: var(--cs-border-width) solid rgb(from var(--color-primary) r g b / .35);
  border-radius: 10px;
  background: rgb(from var(--color-primary) r g b / .07);
}

.cs-cart-coupon-chip strong {
  display: block;
  color: var(--color-primary);
  font-size: 12px;
  line-height: 1.2;
}

.cs-cart-coupon-chip span {
  display: block;
  margin-top: 2px;
  color: var(--color-text-secondary);
  font-size: 10px;
  line-height: 1.35;
}

.cs-cart-coupon-remove {
  flex: none;
  color: #ff8175;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.cs-cart-coupon-remove:hover,
.cs-cart-coupon-remove:focus {
  color: #ffffff;
  text-decoration: none;
}

@media (width <= 760px) {
  .cs-cart-coupon-card {
    padding: 14px 13px;
  }

  .cs-cart-coupon-heading {
    display: block;
  }

  .cs-cart-coupon-heading p {
    max-width: none;
    margin-top: 6px;
    text-align: left;
  }

  .cs-cart-coupon-form {
    grid-template-columns: 1fr;
  }

  .cs-cart-coupon-apply {
    width: 100%;
  }
}


/* ================================================================
   Kaide Store v46 — TABLE CART STATE ONLY
   BUY becomes - / quantity / + once that package is in the basket.
   ================================================================ */
.cs-cmp-purchase { width: 100%; margin-top: auto; }
.cs-cmp-purchase > [hidden] { display: none !important; }
.cs-cmp-qty {
  width: 100%; min-height: 42px; display: grid;
  grid-template-columns: 42px minmax(42px, 1fr) 42px;
  align-items: stretch; overflow: hidden;
  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: var(--cs-radius);
  background: rgb(from var(--color-bg) r g b / .28);
  box-sizing: border-box;
}
.cs-cmp-qty-btn {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0;
  height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--color-text); font: inherit;
  font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer;
}
.cs-cmp-qty-btn:hover,.cs-cmp-qty-btn:focus-visible {
  background: rgb(from var(--color-primary) r g b / .10); color: var(--color-primary); outline: none;
}
.cs-cmp-qty-btn:disabled { opacity: .35; cursor: default; }
.cs-cmp-qty-value {
  display: flex; align-items: center; justify-content: center; min-width: 0;
  border-left: var(--cs-border-width) solid var(--cs-border);
  border-right: var(--cs-border-width) solid var(--cs-border);
  color: var(--color-text); font-size: 14px; font-weight: 800;
}
.cs-cmp-in-cart {
  width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: center;
  padding: 9px 10px; border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius); background: rgb(from var(--color-bg) r g b / .28);
  color: var(--color-text); font-size: 12px; font-weight: 800; text-transform: uppercase; box-sizing: border-box;
}
.cs-cmp-foot .cs-cmp-purchase { margin-top: 0; }
@media (width <= 767px) {
  .cs-cmp-qty { grid-template-columns: 38px minmax(38px, 1fr) 38px; min-height: 40px; }
  .cs-cmp-qty-btn { font-size: 17px; }
  .cs-cmp-in-cart { min-height: 40px; font-size: 11px; }
}


/* ================================================================
   Kaide Store v47 — quantity-lock feedback only
   ================================================================ */
.store-product-popup .cs-popup-media-quantity.is-locked {
  opacity: .72;
}
.store-product-popup .cs-popup-media-quantity.is-locked .cs-popup-media-quantity-btn {
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: .45;
}
.cs-crate-buy[data-in-cart="1"] .cs-crate-buy-label {
  white-space: nowrap;
}


/* ================================================================
   Kaide Store v48 — requested cart-state polish ONLY
   - comparison quantity control occupies the exact BUY button slot
   - locked quantities render as "X in Cart" with no +/- controls
   - user agreement styling under coupon redemption
   ================================================================ */

/* Keep replacement quantity controls perfectly level with BUY buttons. */
.cs-cmp-card .cs-cmp-purchase,
.cs-cmp-foot .cs-cmp-purchase {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 42px;
  margin-top: auto;
}

.cs-cmp-card .cs-cmp-purchase > .cs-cmp-buy,
.cs-cmp-card .cs-cmp-purchase > .cs-cmp-qty,
.cs-cmp-card .cs-cmp-purchase > .cs-cmp-in-cart,
.cs-cmp-foot .cs-cmp-purchase > .cs-cmp-buy,
.cs-cmp-foot .cs-cmp-purchase > .cs-cmp-qty,
.cs-cmp-foot .cs-cmp-purchase > .cs-cmp-in-cart {
  width: 100%;
  height: 42px;
  min-height: 42px;
  margin: 0;
  box-sizing: border-box;
}

.cs-cmp-qty-btn,
.cs-cmp-qty-value {
  height: 100%;
  min-height: 0;
  line-height: 1;
}

/* Locked/non-adjustable cart items use the same compact "X in Cart" language
   as the comparison table, with no disabled +/- buttons. */
.cs-cart-item-in-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: 42px;
  padding: 8px 14px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 11px;
  background: rgb(from var(--color-bg) r g b / .28);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  box-sizing: border-box;
}

/* User Agreement, directly under coupon redemption. */
.cs-cart-agreement-card {
  padding: 18px 20px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
}

.cs-cart-agreement-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cs-cart-agreement-icon {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
}

.cs-cart-agreement-icon svg {
  width: 17px;
  height: 17px;
}

.cs-cart-agreement-heading h2 {
  margin: 0;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.15;
}

.cs-cart-agreement-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.cs-cart-agreement-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  color: var(--color-text);
  font-size: 12px;
  line-height: 1.45;
  cursor: pointer;
}

.cs-cart-agreement-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  display: grid;
  place-content: center;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 4px;
  background: rgb(from var(--color-bg) r g b / .42);
  cursor: pointer;
  box-sizing: border-box;
}

.cs-cart-agreement-row input::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--color-primary-text);
  border-bottom: 2px solid var(--color-primary-text);
  transform: rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .1s ease;
}

.cs-cart-agreement-row input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

.cs-cart-agreement-row input:checked::before {
  transform: rotate(-45deg) scale(1);
}

.cs-cart-agreement-row input:focus-visible {
  outline: 2px solid rgb(from var(--color-primary) r g b / .35);
  outline-offset: 2px;
}

.cs-cart-agreement-row a {
  color: var(--color-primary);
  font-weight: 700;
  text-decoration: none;
}

.cs-cart-agreement-row a:hover,
.cs-cart-agreement-row a:focus {
  text-decoration: underline;
}

.cs-cart-agreement-row strong {
  color: var(--color-text);
  font-weight: 800;
}

.cs-cart-agreement-error {
  margin: 15px 0 0;
  padding-top: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: var(--cs-border-width) solid var(--cs-border);
  color: #9f3434;
  font-size: 11px;
  font-weight: 700;
}

.cs-cart-agreement-error-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.cs-cart-agreement-error[hidden] {
  display: none !important;
}

@media (width <= 760px) {
  .cs-cart-item-in-cart {
    min-width: 110px;
    min-height: 40px;
    font-size: 11px;
  }

  .cs-cart-agreement-card {
    padding: 14px 13px;
  }

  .cs-cart-agreement-row {
    font-size: 11px;
  }
}


/* ================================================================
   Kaide Store v51 — FOOTER PLAY NOW CARD ONLY
   Makes the small footer Play Now link visually match the themed
   Join Now card near the top of the store.
   ================================================================ */

.cs-footer-play {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  flex: 0 0 auto;
  width: 300px;
  min-height: 76px;
  padding: 10px 16px 10px 12px;

  display: flex;
  align-items: center;
  gap: 14px;

  border: var(--cs-border-width) solid var(--color-primary);
  border-radius: var(--cs-radius);
  background: linear-gradient(
    180deg,
    var(--color-primary) 0%,
    var(--cs-primary-deep) 100%
  );

  color: #fff;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;

  box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
  transition: transform .12s ease, box-shadow .12s ease;
}

/* Same subtle floating-circle texture used by the top Join Now card. */
.cs-footer-play::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Ccircle cx='34' cy='20' r='17' fill='%23fff' fill-opacity='.09'/%3E%3Ccircle cx='96' cy='70' r='25' fill='%23fff' fill-opacity='.05'/%3E%3Ccircle cx='168' cy='30' r='10' fill='%23fff' fill-opacity='.11'/%3E%3Ccircle cx='232' cy='64' r='32' fill='%23fff' fill-opacity='.04'/%3E%3Ccircle cx='280' cy='22' r='14' fill='%23fff' fill-opacity='.08'/%3E%3Ccircle cx='306' cy='74' r='9' fill='%23fff' fill-opacity='.09'/%3E%3Ccircle cx='132' cy='12' r='7' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E")
    0 0 / auto 90px repeat;
}

.cs-footer-play:hover,
.cs-footer-play:focus {
  background: linear-gradient(
    180deg,
    var(--color-primary) 0%,
    var(--cs-primary-deep) 100%
  );
  transform: scale(1.02);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .16);
  text-decoration: none;
  outline: none;
}

.cs-footer-play-icon {
  --cs-footer-hex: var(--color-primary);

  position: relative;
  isolation: isolate;
  flex: none;

  width: 56px;
  height: 56px;

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

  border-radius: 0;
  background: transparent;
  color: #fff;
}

/* Dark center of the little hex icon. */
.cs-footer-play-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;

  background-color: var(--color-bg);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='%23fff'/%3E%3C/svg%3E");

  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Orange hex outline to mirror Join Now. */
.cs-footer-play-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background-color: var(--cs-footer-hex);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linejoin='round'/%3E%3C/svg%3E");

  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.cs-footer-play-icon svg {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 25px;
}

.cs-footer-play .cs-nav-text {
  flex: 1;
  min-width: 0;
}

.cs-footer-play .cs-nav-title {
  display: block;
  margin: 0;
  color: #fff;

  font-size: 18px;
  font-weight: 800;
  line-height: 1.08;
  text-transform: uppercase;

  text-shadow: 0 1px 2px rgba(0, 0, 0, .24);
}

.cs-footer-play .cs-nav-subtitle {
  display: block;
  margin-top: 2px;
  color: rgba(255, 255, 255, .86);

  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;

  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}

/* Keep its existing footer wording stable on hover. */
.cs-footer-play .cs-nav-sub-base,
.cs-footer-play:hover .cs-nav-sub-base,
.cs-footer-play:focus .cs-nav-sub-base {
  display: inline !important;
}

.cs-footer-play .cs-nav-sub-hover,
.cs-footer-play:hover .cs-nav-sub-hover,
.cs-footer-play:focus .cs-nav-sub-hover {
  display: none !important;
}

@media (width <= 760px) {
  .cs-footer-play {
    width: 100%;
    max-width: 340px;
    min-height: 72px;
    padding: 9px 14px 9px 10px;
  }

  .cs-footer-play-icon {
    width: 52px;
    height: 52px;
  }

  .cs-footer-play .cs-nav-title {
    font-size: 17px;
  }
}


/* ================================================================
   Kaide Store v52 — FOOTER PLAY NOW REMOVAL ONLY
   ================================================================ */
.cs-footer-play {
  display: none !important;
}


/* ================================================================
   Kaide Store v53 — checkout agreement state + footer cleanup +
   comparison quantity centering ONLY
   ================================================================ */

/* Visibly gray/disable checkout until the User Agreement is complete. */
.cs-cart-checkout:disabled,
.cs-cart-checkout[aria-disabled="true"] {
  background: #6b6461 !important;
  border-color: #6b6461 !important;
  color: rgba(255, 255, 255, .55) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: .78 !important;
  transform: none !important;
}

.cs-cart-checkout:disabled:hover,
.cs-cart-checkout[aria-disabled="true"]:hover {
  background: #6b6461 !important;
  border-color: #6b6461 !important;
  color: rgba(255, 255, 255, .55) !important;
  transform: none !important;
}

/* Make the warning icon reliable even if the inline span is affected by
   surrounding theme rules. */
.cs-cart-agreement-error-icon {
  display: none !important;
}

.cs-cart-agreement-error::before {
  content: "!";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  color: currentColor;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  box-sizing: border-box;
}

/* Remove the small clickable Discord icon from the footer. */
.cs-footer-social {
  display: none !important;
}

/* Force +/- glyphs dead-center inside comparison-table quantity cells. */
.cs-cmp-qty-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
}

.cs-cmp-qty-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}


/* Kaide Store v55 — User Agreement warning color only */
.cs-agreement-error,
.cs-agreement-error::before {
  color: #9f3434 !important;
}


/* ================================================================
   Kaide Store v56 — RANK POPUP "1 IN CART" GRAY ONLY
   Applies only inside /package/ranks-* popups.
   ================================================================ */
.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart {
  background: rgb(112 112 112 / .42) !important;
  border-color: rgb(170 170 170 / .38) !important;
  color: rgb(235 235 235 / .72) !important;
  opacity: 1 !important;
  cursor: default !important;
  box-shadow: none !important;
}

.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart:hover,
.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart:focus-visible {
  background: rgb(112 112 112 / .42) !important;
  border-color: rgb(170 170 170 / .38) !important;
  color: rgb(235 235 235 / .72) !important;
  transform: none !important;
}


/* ================================================================
   Kaide Store v57 — USER AGREEMENT WARNING COLOR ONLY
   Slightly lighter/more visible red than v55.
   ================================================================ */
.cs-agreement-error,
.cs-agreement-error::before {
  color: #d95a5a !important;
}


/* ================================================================
   Kaide Store v59 — USER AGREEMENT VISIBILITY ONLY
   ================================================================ */

/* A brighter/light red so the required-checkbox warning is easy to see. */
.cs-cart-agreement-error,
.cs-cart-agreement-error::before,
.cs-cart-agreement-error .cs-cart-agreement-error-icon {
  color: #ff7070 !important;
}

/* Small Deluxe-style external/document arrow beside Terms and Conditions. */
.cs-cart-agreement-row .cs-terms-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: baseline;
}

.cs-cart-agreement-row .cs-terms-link-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: inline-block;
  stroke: currentColor;
}

/* ================================================================
   Kaide Store v60 — footer divider removal ONLY
   Keeps the existing footer spacing/layout; removes only the visible line.
   ================================================================ */
.cs-footer-divider {
  background: transparent !important;
}


/* ================================================================
   Kaide Store v61 — MOBILE SERVER PICKER CLOSE + FAST CART UX
   Only the mobile server-picker close spacing is visual here.
   ================================================================ */
@media (width <= 600px) {
  .cs-server-picker-popup .cs-server-picker-content {
    padding: 62px 16px 16px !important;
  }

  .cs-server-picker-popup .popup-close {
    top: 14px !important;
    right: 14px !important;
  }

  .cs-server-picker-popup .cs-server-picker-intro {
    padding-right: 0 !important;
  }
}

/* ================================================================
   Kaide Store v63 — instant crate quantity + robust footer favicon
   ================================================================ */

/* Once a crate is already in the cart, the button is informational only;
   +/- is the save control and posts automatically. */
.cs-crate-buy[data-in-cart="1"] {
  cursor: default !important;
}
.cs-crate-buy[data-in-cart="1"]:hover,
.cs-crate-buy[data-in-cart="1"]:focus-visible {
  transform: none !important;
}

/* Anchor the favicon to the footer itself rather than a footer.twig child
   wrapper. This keeps it level with the copyright on the opposite side. */
.cs-footer {
  position: relative !important;
}

.cs-footer-favicon {
  position: absolute !important;
  top: 40px !important;
  right: 30px !important;
  z-index: 3;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}

@media (width <= 767px) {
  .cs-footer-favicon {
    top: 28px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
  }
}


/* ================================================================
   Kaide Store v64 — MATCH ALL "IN CART" STATES TO BUNDLE COLORWAY
   ONLY changes the visual colorway for:
   1) crate/key cards already in cart
   2) rank package popup "1 in Cart"
   ================================================================ */

/* Keys / crate cards: keep existing behavior/text/icon, but use the same
   dark outlined in-cart treatment used by the bundle comparison cards. */
.cs-crate-buy[data-in-cart="1"] {
  background: rgb(from var(--color-bg) r g b / .28) !important;
  border: var(--cs-border-width) solid var(--cs-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: default !important;
}

.cs-crate-buy[data-in-cart="1"]:hover,
.cs-crate-buy[data-in-cart="1"]:focus,
.cs-crate-buy[data-in-cart="1"]:focus-visible {
  background: rgb(from var(--color-bg) r g b / .28) !important;
  border-color: var(--cs-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Rank popup: replace the older gray locked state with the same dark
   outlined treatment used by bundle "1 IN CART" cells. */
.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart {
  background: rgb(from var(--color-bg) r g b / .28) !important;
  border: var(--cs-border-width) solid var(--cs-border) !important;
  color: var(--color-text) !important;
  opacity: 1 !important;
  cursor: default !important;
  box-shadow: none !important;
}

.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart:hover,
.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart:focus,
.store-product-popup .cs-popup-media-add.cs-rank-popup-purchase.is-in-cart:focus-visible {
  background: rgb(from var(--color-bg) r g b / .28) !important;
  border-color: var(--cs-border) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ================================================================
   Kaide Store v65 — MOBILE SERVER PICKER CLOSE POSITION ONLY
   Restores the compact mobile modal height and keeps the close X
   outside the panel, matching the desktop server picker.
   ================================================================ */
@media (width <= 600px) {
  .cs-server-picker-popup .cs-server-picker-content {
    padding: 20px 16px 16px !important;
  }

  .cs-server-picker-popup .popup-close {
    top: -54px !important;
    right: 0 !important;
    width: 42px !important;
    height: 42px !important;
  }

  .cs-server-picker-popup .cs-server-picker-intro {
    padding-right: 42px !important;
  }
}