@import url("https://fonts.googleapis.com/css2?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: #312a17;
  --color-secondary-hover: #3c331c;
  --color-secondary-text: #f5f1e8;
  --color-secondary-text-hover: #ffffff;

  --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;
  --cs-product-image-height: 150px;
  --cs-product-row-image: 60px;

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

@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); }
/* Pulse sits on the inner img/text, not the anchor: the anchor's own hover/active
   transform would be overridden by a running animation on the same property. */
@keyframes cs-logo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}
.cs-sidebar-logo img,
.cs-sidebar-logo .cs-logo-text,
.cs-mobile-logo img,
.cs-mobile-logo .cs-logo-text {
  animation: cs-logo-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cs-sidebar-logo img,
  .cs-sidebar-logo .cs-logo-text,
  .cs-mobile-logo img,
  .cs-mobile-logo .cs-logo-text { animation: none; }
}
.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; }
}

/* A category with subcategories is a disclosure control, not a destination: the
   whole row is one button (icon + label + chevron) rather than a link with a
   separate 46px toggle beside it. Keeps the `toggle` class because main.js:496
   binds every .toggle in the nav and main.js:433 reads button.parentNode as the
   <li> — so this must stay a direct child of the <li>. Must NOT carry btn-glyph:
   `:root .btn-glyph` (shared.css:419) sets font-size:0 and a fixed 46px box. */
.cs-menu-parent {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 11px 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
.cs-menu-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-menu-chevron {
  width: 20px;
  height: 20px;
  flex: none;
  margin-left: auto;
  transition: rotate 0.15s ease;
}
.has-children.expanded > .cs-menu-parent .cs-menu-chevron {
  rotate: 180deg;
}
@media (prefers-reduced-motion: reduce) {
  .cs-menu-chevron { transition: none; }
}
/* shared.css:73 clears outline on every element, so keyboard focus in the nav
   was invisible. */
.site-navigation a:focus-visible,
.site-navigation .cs-menu-parent:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  border-radius: var(--cs-radius);
}

.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 .menu .cs-menu-parent {
    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 .cs-menu-parent:hover {
    color: var(--color-text);
    transform: scale(1.02);
  }
  /* Ancestor of the current page, not the current page itself. A filled
     background here read as "selected" and sat flush against the real active
     row inside the submenu, so the two highlights merged into one block. */
  .navigation-vertical .has-children.active > .cs-menu-parent {
    color: var(--color-text);
    font-weight: 600;
  }

  /* Rail + indent: the old 50px text inset was still less than the parent's own
     label offset (12px padding + 36px icon + 12px gap), so children read as a
     level above their parent. */
  .navigation-vertical ul ul {
    margin: 4px 0 6px 22px;
    padding-left: 10px;
    border-left: 2px solid var(--cs-border);
  }
  .navigation-vertical ul ul a {
    padding: 9px 12px;
    font-size: 15px;
  }
}

@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: var(--color-secondary);
  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; }
.cs-mobile-logo img { height: 42px; width: auto; 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-secondary);
  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-secondary);
  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 .store-product {
  text-align: center;
}

/* Stock only sets max-width on the image, so card height tracked the artwork's
   aspect ratio and one tall upload inflated its whole grid row. Fix the slot by
   height (the .image-link is width:fit-content, so sizing by width is a no-op).
   .image-default keeps its aspect-ratio:1 and squares up to the same box. */
.store-products-images .store-product .image,
.store-products-images .store-product .image-default,
.store-products-grid .store-product .image,
.store-products-grid .store-product .image-default {
  height: var(--cs-product-image-height);
  width: auto;
  object-fit: contain;
}
/* List rows are horizontal, so the slot is a small square instead. Stock sets
   width:60px here but no height, so a portrait upload still stretched the row. */
.store-products-list .store-product .image,
.store-products-list .store-product .image-default {
  width: var(--cs-product-row-image);
  height: var(--cs-product-row-image);
  object-fit: contain;
}

.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);
}

/* Icon-only add button (cart + plus), label moved to aria-label/title.
   :not([hidden]) is load-bearing: main.js toggles the hidden attribute on .add,
   and stock's `:root *[hidden] { display: none }` has the same specificity as
   `.product-actions .add`, so an unguarded display would un-hide the button.
   flex:none overrides the .wide/.half sizing the template still emits. */
.product-actions .add:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  width: auto;
}
.product-actions .add .cs-add-ico {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex: none;
}
.product-actions .add .cs-add-ico-plus {
  width: calc(var(--btn-icon-size) * 0.8);
  height: calc(var(--btn-icon-size) * 0.8);
}

/* Card: price shares the CTA's row (left) instead of claiming a full line.
   Selector matches stock's 0,4,0 `.store-products-images .store-product
   :not(.store-product-full) .price`, which sets both width and margin-bottom. */
.store-product:not(.store-product-full) .actions {
  align-items: center;
}
.store-products-images .store-product:not(.store-product-full) .price,
.store-products-grid .store-product:not(.store-product-full) .price {
  width: auto;
  margin: 0 auto 0 0;
  text-align: left;
}
/* Stock pins list-row CTAs to min-width:180px at 0,4,0 (shared.css:1273), which
   outranks the rule above — match that weight to keep the button icon-sized. */
.store-products-list .store-product .actions .add {
  flex: none;
  width: auto;
  min-width: 0;
}

/* In-basket stepper keeps its own full-width line below the price. Card grids
   only: list rows are flex-wrap:nowrap, where a 100% basis would crush the price. */
.store-products-images .product-actions .quantity-field:not([hidden]),
.store-products-images .product-actions .open-basket-cta:not([hidden]),
.store-products-grid .product-actions .quantity-field:not([hidden]),
.store-products-grid .product-actions .open-basket-cta:not([hidden]) {
  flex: 1 0 100%;
}

.popup-content.store-product-popup-content { max-width: 760px; }
@media (width > 600px) {
  /* Column tracks the capped image, so the title block starts beside it instead
     of after ~65px of dead track. Centred because the header row's height is set
     by the image, not the text. Multi-media packages render a .media-slider,
     which still needs the wider column and top alignment. */
  .store-product-full {
    grid-template-columns: minmax(0, var(--cs-product-image-height)) minmax(0, 1fr);
    align-items: center;
    gap: 22px;
  }
  .store-product-full:has(.media-slider) {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    align-items: start;
  }
}
.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);
}
/* Same cap as the grid cards, so a tall upload can't stretch the modal's first
   row. Direct child only: the multi-media case renders a .media-slider instead,
   which keeps the full 280px column. */
.cs-product-media > .image {
  width: auto;
  height: var(--cs-product-image-height);
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}
.cs-product-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
/* 30px display type (shared.css:1577) at default line-height added ~10px of
   leading the header row didn't need. */
.store-product-full .product-title {
  line-height: 1.15;
}

/* Row 1 is [media | title + price + CTAs]; the description is its own grid child
   on row 2 so it reads across the full modal width instead of the narrow column.
   1 / -1 is a no-op in the single-column layout below 600px. */
.store-product-full .descr {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--cs-border);
  padding-top: var(--widget-padding);
}

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

/* ---------------------------------------------------------------------------
   Product modal only. main.js:1000 adds .store-product-popup-content; the same
   template also renders a standalone page at /package/<id> WITHOUT it, which
   must keep its natural document height — so every rule below is scoped to it.

   [ thumb | title ]   header
   [ description   ]   scrolls in its own track
   [ price + CTAs  ]   footer, always visible
   --------------------------------------------------------------------------- */
.store-product-popup-content {
  --cs-modal-thumb: var(--cs-product-image-height);
  max-height: calc(100dvh - var(--content-padding) * 2);
  grid-template-columns: minmax(0, var(--cs-modal-thumb)) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media title"
    "descr descr"
    "cta   cta";
  align-items: stretch;
  gap: 16px 22px;
}
@media (width <= 600px) {
  .store-product-popup-content {
    --cs-modal-thumb: 96px;
    max-height: calc(100dvh - var(--content-padding));
  }
  .store-product-popup-content .product-title {
    font-size: 22px;
  }
}

/* display:contents flattens the wrapper so the title and the actions bar land on
   different grid rows without editing package.html — the standalone page keeps
   the wrapper's flex column. */
.store-product-popup-content .cs-product-detail {
  display: contents;
}

.store-product-popup-content .cs-product-media {
  grid-area: media;
  align-self: center;
}
.store-product-popup-content .product-title {
  grid-area: title;
  align-self: center;
}
.store-product-popup-content .cs-product-media > .image {
  height: var(--cs-modal-thumb);
}

/* min-height:0 is load-bearing: grid items default to min-height:auto and refuse
   to shrink below their content, which leaves the track unscrollable and lets
   the card blow straight past max-height. overscroll-behavior stops the overlay
   behind the modal from scrolling once the description bottoms out. */
.store-product-popup-content .descr {
  grid-area: descr;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) transparent;
}

/* Selector matches the 0,3,0 rule above that zeroes padding/background for the
   page layout, and wins on source order. Bleeds to the card edges; its own
   padding supplies the bottom gap the card drops (shared.css:1573). */
.store-product-popup-content .cs-product-detail .actions {
  grid-area: cta;
  margin: 0 calc(var(--widget-padding) * -1);
  padding: var(--widget-padding);
  border-top: 1px solid var(--cs-border);
  background-color: var(--color-brighter-bg);
}

/* Multi-media packages render a slider, which needs the full width rather than a
   thumb slot. align-items must be restated or the page-scoped `start` above
   stops the description from filling its track. */
.store-product-popup-content:has(.media-slider) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "media"
    "title"
    "descr"
    "cta";
  align-items: stretch;
}

.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-fill, minmax(160px, 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); } }

.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;
  }
}