@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;

  --content-inner-width: 1352px; /* + 2*24px content-padding = 1400px container */
  --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;
      width: 100%
  }
}

.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;
  /* Fixed cell, not 1fr: pixel-art heads must never scale with the sidebar.
     48px = 5 per row in the 279px desktop widget; wider layouts just fit more. */
  grid-template-columns: repeat(auto-fill, 48px);
  gap: 8px;
}
.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,
.cs-purchase:focus-visible .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;
}
/* With a mouse the tip also opens on hover. Touch screens keep tap-to-open (a sticky
   :hover after a tap would stop the tip from closing), hence the media query. */
@media (hover: hover) {
  .cs-purchase:hover .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;
  }
  /* only the head under the pointer shows its tip, even if another one was clicked open */
  .cs-purchase-grid:hover .cs-purchase:not(:hover) .cs-purchase-tip {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0.8);
    transition: opacity 0.12s ease, transform 0.12s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.13s;
  }
}
.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: 54px; 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;
  /* Two across only while each card keeps >= 360px (title + address + count
     fit on one line); below that stack. Replaces a fixed 600px breakpoint,
     which left cards truncating between 960 and 1150px. */
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: 18px;
}

/* Card is a 2x2 baseline grid: icon | title    | count   | chevron
                                 icon | subtitle | caption | chevron
   Title/count and subtitle/caption share baselines so the number reads as
   part of the type, not a floating badge. */
.cs-home-cards .info {
  z-index: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto 18px;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: baseline;
  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: 13px 16px 13px 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;
  grid-row: 1 / 3;
  align-self: center;
  width: 56px;
  height: 56px;
  /* The icon spans both text rows. Without this its 56px is distributed into
     the auto rows and opens a gap between number and caption. The negative
     margin keeps it out of row sizing; it still renders 56px. */
  margin-block: -6px;
  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 { display: contents; }
.cs-home-cards .info .cs-nav-title {
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cs-home-cards .info .cs-nav-subtitle {
  grid-column: 2;
  grid-row: 2;
  font-size: 13.5px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
/* The server address reads as an address in mono; the hover swap to "Copy IP"
   is the only click affordance, so it goes back to the UI font. Only the
   server card has a hover span; Discord keeps its one subtitle. */
.cs-home-cards .info.server .cs-nav-subtitle {
  font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
  letter-spacing: 0.01em;
}
.cs-home-cards .info .cs-nav-sub-hover {
  display: none;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: 0;
  color: #fff;
}
.cs-home-cards .info.server:hover .cs-nav-sub-base,
.cs-home-cards .info.server:focus .cs-nav-sub-base { display: none; }
.cs-home-cards .info.server:hover .cs-nav-sub-hover,
.cs-home-cards .info.server:focus .cs-nav-sub-hover { display: inline; }

/* Live count. Hidden until footer.twig fills it and sets .cs-live, so a failed
   API call leaves a plain card instead of an empty slot. */
.cs-home-cards .info .cs-num {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cs-home-cards .info .cs-cap {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.cs-home-cards .info:not(.cs-live) .cs-num,
.cs-home-cards .info:not(.cs-live) .cs-cap { display: none; }
/* Live dot: the dot itself breathes (scale + glow) and a ring expands from it. */
.cs-home-cards .cs-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3ddc84;
  box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7), 0 0 4px rgba(61, 220, 132, 0.6);
  animation: cs-dot 2s ease-in-out infinite;
}
@keyframes cs-dot {
  0%   { transform: scale(1);    opacity: 0.75; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7),   0 0 2px rgba(61, 220, 132, 0.4); }
  40%  { transform: scale(1.35); opacity: 1;    box-shadow: 0 0 0 4px rgba(61, 220, 132, 0.25), 0 0 8px rgba(61, 220, 132, 0.9); }
  75%  { transform: scale(1);    opacity: 0.9;  box-shadow: 0 0 0 8px rgba(61, 220, 132, 0),    0 0 4px rgba(61, 220, 132, 0.5); }
  100% { transform: scale(1);    opacity: 0.75; box-shadow: 0 0 0 0 rgba(61, 220, 132, 0),      0 0 2px rgba(61, 220, 132, 0.4); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-home-cards .cs-dot { animation: none; }
}

.cs-home-cards .info .cs-nav-chev {
  grid-column: 4;
  grid-row: 1 / 3;
  align-self: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.7);
}

@media (width <= 600px) {
  .cs-home-cards { gap: 10px; }
  .cs-home-cards .info,
  .cs-home-cards .info.server,
  .cs-home-cards .info.discord {
    grid-template-columns: 46px minmax(0, 1fr) auto 16px;
    column-gap: 11px;
    padding: 10px 13px 10px 11px;
  }
  .cs-home-cards .info .cs-nav-icon { width: 46px; height: 46px; }
  .cs-home-cards .info .cs-nav-icon svg { width: 22px; height: 22px; }
  .cs-home-cards .info .cs-nav-title { font-size: 16px; }
  .cs-home-cards .info .cs-nav-subtitle { font-size: 12.5px; }
  .cs-home-cards .info .cs-num { font-size: 22px; }
  .cs-home-cards .info .cs-cap { font-size: 11px; }
}

.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-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* room for the floating "Featured" pill (absolute, top -11px) */
  padding-top: 11px;
}
/* Option A "marco brillante": the border is a slowly sweeping gold gradient.
   Done with layered backgrounds (surface layers clipped to padding-box, the
   gradient to border-box) — no pseudo-element, so no stacking-context traps. */
.cs-featured-grid .cs-featured-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 14px;
  background:
    linear-gradient(rgb(from var(--color-primary) r g b / 0.08), rgb(from var(--color-primary) r g b / 0.08)) padding-box,
    linear-gradient(var(--color-brighter-bg), var(--color-brighter-bg)) padding-box,
    linear-gradient(120deg, var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep)) border-box;
  background-size: auto, auto, 300% 100%;
  border: var(--cs-border-width) solid transparent;
  border-radius: var(--cs-radius);
  animation: cs-featured-sheen 6s linear infinite;
  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;
}
@keyframes cs-featured-sheen {
  to { background-position: 0 0, 0 0, -300% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-featured-grid .cs-featured-card { animation: none; }
}
.cs-featured-star {
  position: absolute;
  top: -11px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.cs-featured-star svg {
  width: 11px;
  height: 11px;
  flex: none;
}
.cs-featured-img {
  width: 72px;
  height: 72px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  filter: drop-shadow(0 4px 10px rgb(from var(--color-primary) r g b / 0.35));
}
.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: 700;
  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);
}
/* discounted package: "-N%" pill opposite the Featured one (text set by layout.html)
   and the original price struck through before the sale price */
.cs-featured-off {
  position: absolute;
  top: -11px;
  right: 14px;
  z-index: 1;
  padding: 2px 9px;
  border-radius: 999px;
  background: #c8323a; /* a step darker than --color-removed so the white text passes AA */
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.cs-featured-off[hidden] { display: none; }
.cs-featured-old {
  margin-right: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-decoration-line: line-through;
  text-decoration-color: var(--color-removed);
  text-decoration-thickness: 2px;
}
@media (width <= 991px) {
  .cs-featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (width <= 767px) {
  .cs-featured-grid { grid-template-columns: 1fr; }
}

/* Promo banner (sale). Schema "Promo Banner", rendered by index.html after the Play /
   Discord cards; its countdown IIFE lives there too. Left: label, title, text, timer,
   button. Right: an uploaded image, or a pixel chest with gold coins rising out of it.
   The Halloween look is in the Seasonal themes block at the end of this file. */
.cs-promo {
  --cs-promo-chest: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' shape-rendering='crispEdges'%3E%3Cpath fill='%233b2412' d='M0 0h16v1h-16zM0 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM15 5h1v1h-1zM0 6h6v1h-6zM10 6h6v1h-6zM0 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM15 10h1v1h-1zM0 11h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM15 12h1v1h-1zM0 13h16v1h-16z'/%3E%3Cpath fill='%23c1843f' d='M1 1h14v1h-14zM1 7h5v1h-5zM10 7h5v1h-5z'/%3E%3Cpath fill='%23a0672d' d='M1 2h14v1h-14zM1 3h3v1h-3zM5 3h7v1h-7zM13 3h2v1h-2zM1 4h14v1h-14zM1 8h6v1h-6zM9 8h6v1h-6zM1 9h14v1h-14zM1 10h2v1h-2zM4 10h5v1h-5zM10 10h5v1h-5zM1 11h14v1h-14z'/%3E%3Cpath fill='%237d4f22' d='M4 3h1v1h-1zM12 3h1v1h-1zM1 5h5v1h-5zM10 5h5v1h-5zM3 10h1v1h-1zM9 10h1v1h-1zM1 12h14v1h-14z'/%3E%3Cpath fill='%23b8860b' d='M6 5h1v1h-1zM9 5h1v1h-1zM6 6h1v1h-1zM9 6h1v1h-1zM6 7h1v1h-1zM9 7h1v1h-1zM7 8h2v1h-2z'/%3E%3Cpath fill='%23ffd23f' d='M7 5h2v1h-2zM7 6h2v1h-2zM7 7h2v1h-2z'/%3E%3C/svg%3E");
  --cs-promo-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges'%3E%3Cpath fill='%23b8860b' d='M2 0h3v1h-3zM1 1h1v1h-1zM5 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM1 5h1v1h-1zM5 5h1v1h-1zM2 6h3v1h-3z'/%3E%3Cpath fill='%23ffd23f' d='M2 1h3v1h-3zM1 2h1v1h-1zM3 2h3v1h-3zM1 3h5v1h-5zM1 4h5v1h-5zM2 5h3v1h-3z'/%3E%3Cpath fill='%23fff1a8' d='M2 2h1v1h-1z'/%3E%3C/svg%3E");

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 32%);
  align-items: center;
  gap: 16px 24px;
  padding: 24px 28px;
  border: var(--cs-border-width) solid transparent;
  border-radius: var(--cs-radius);
  /* same sweeping gold frame as the featured cards (cs-featured-sheen moves layer 3) */
  background:
    radial-gradient(55% 110% at 84% 55%, rgb(from var(--color-primary) r g b / 0.3), transparent 72%) padding-box,
    linear-gradient(var(--color-brighter-bg), var(--color-brighter-bg)) padding-box,
    linear-gradient(120deg, var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep)) border-box;
  background-size: auto, auto, 300% 100%;
  animation: cs-featured-sheen 6s linear infinite;
}
.cs-promo[hidden],
.cs-promo-timer[hidden] { display: none; }
.cs-promo-body { min-width: 0; }

.cs-promo-eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cs-primary-light);
}
.cs-promo-title {
  display: block;
  margin-bottom: 10px;
  font-size: clamp(38px, 2.4vw + 18px, 56px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  text-shadow: 0 0 26px rgb(from var(--color-primary) r g b / 0.45);
}
.cs-promo-text {
  max-width: 46ch;
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-darker);
}
.cs-promo-text strong { color: var(--color-text); }

.cs-promo-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
}
.cs-promo-timer-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cs-promo-timer-label svg { width: 16px; height: 16px; flex: none; color: var(--color-primary); }
.cs-promo-slots { display: flex; gap: 8px; }
.cs-promo-slot {
  min-width: 62px;
  padding: 9px 8px 8px;
  text-align: center;
  border-radius: 12px;
  background: var(--color-bg);
  border: 2px solid var(--cs-border);
}
.cs-promo-num {
  display: block;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.cs-promo-unit {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.cs-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.cs-promo-cta:hover,
.cs-promo-cta:focus { background: var(--color-primary-hover); color: var(--color-primary-text); transform: scale(1.03); text-decoration: none; }
.cs-promo-cta svg { width: 18px; height: 18px; }

.cs-promo-art {
  position: relative;
  align-self: stretch;
  min-height: 170px;
  pointer-events: none;
}
.cs-promo-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  animation: cs-promo-float 5s ease-in-out infinite;
}
.cs-promo-art i { position: absolute; left: 50%; top: 50%; display: block; }
.cs-promo-hero {
  width: 160px;
  height: 140px;
  margin: -56px 0 0 -80px;
  background: var(--cs-promo-chest) center / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 22px rgb(0 0 0 / 0.55)) drop-shadow(0 0 24px rgb(255 190 60 / 0.35));
  animation: cs-promo-float 5s ease-in-out infinite;
}
/* the coins come before the chest in the markup, so they rise from behind its lid */
.cs-promo-bit {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  background: var(--cs-promo-coin) center / 100% 100% no-repeat;
  opacity: 0;
  animation: cs-promo-coin 3.6s ease-out infinite;
}
.cs-promo-bit:nth-child(1) { margin-left: -50px; animation-delay: -1.2s; }
.cs-promo-bit:nth-child(2) { margin-left: -14px; animation-delay: -2.4s; }
.cs-promo-bit:nth-child(3) { margin-left: 22px;  animation-delay: -0.3s; }
@keyframes cs-promo-float {
  0%, 100% { translate: 0 0;    scale: 1; }
  50%      { translate: 0 -6px; scale: 1.05; }
}
@keyframes cs-promo-coin {
  0%   { translate: 0 -44px;  opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { translate: 0 -112px; opacity: 0; }
}
@keyframes cs-promo-coin-sm {
  0%   { translate: 0 -20px; opacity: 0; }
  18%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { translate: 0 -56px; opacity: 0; }
}
@media (width <= 767px) {
  .cs-promo { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  /* art becomes a small corner badge; the heading leaves room for it */
  .cs-promo-art { position: absolute; top: 10px; right: 12px; width: 84px; height: 84px; min-height: 0; }
  .cs-promo-eyebrow,
  .cs-promo-title { padding-right: 90px; }
  .cs-promo-title { margin-bottom: 14px; } /* paragraph starts below the badge */
  .cs-promo-hero { width: 72px; height: 63px; margin: -24px 0 0 -36px; }
  .cs-promo-bit { width: 16px; height: 16px; margin: -8px 0 0 -8px; animation-name: cs-promo-coin-sm; }
  .cs-promo-bit:nth-child(1) { margin-left: -26px; }
  .cs-promo-bit:nth-child(2) { margin-left: -8px; }
  .cs-promo-bit:nth-child(3) { margin-left: 10px; }
  .cs-promo-foot { flex-direction: column; align-items: stretch; }
  .cs-promo-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-promo-slot { min-width: 0; }
  .cs-promo-cta { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-promo,
  .cs-promo-hero,
  .cs-promo-bit,
  .cs-promo-art img { animation: none; }
  .cs-promo-bit { opacity: 1; translate: 0 -80px; }
}

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

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

@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-promo,
  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; }
  /* same order as the logo; it comes later in the markup, so it lands right under it */
  body.cs-mobile-l2.page-index .cs-promo { 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 {
    /* Block img with width:auto ignores the anchor's text-align; center it
       with margins instead. */
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 180px;
    margin: 0 auto;
  }
  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;
  }
}

/* ===========================================================================
   ALTARA OVERRIDES — re-applied after the upstream update.
   Everything above this line is upstream's. Keep this block last so it wins on
   source order. Upstream's three configurable options (menu-dropdown-header,
   product-card-style, mobile-layout) are untouched by anything here.
   =========================================================================== */

:root {
  --cs-product-image-height: 150px;
  --cs-product-row-image: 60px;
}

/* --- Logo pulse ----------------------------------------------------------
   Pulse sits on the inner img/text, not the anchor: the anchor's own
   hover/active transform would be overridden by an 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; }
}

/* --- Focus rings ---------------------------------------------------------
   shared.css:73 clears `outline` on every element and nothing restores it, so
   keyboard focus is invisible site-wide. Restored on element types so anything
   added later is covered. Offset keeps the ring outside amber buttons. Outlines
   follow border-radius on their own — don't set radius here. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* --- Product image slots -------------------------------------------------
   Stock only sets max-width, so card height tracked the artwork's aspect ratio
   and one tall upload inflated its whole grid row. Upstream's Style 2 fits
   images too, but only under .cs-cards-s2 — this covers Style 1 as well. */
.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;
}
.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;
}

/* --- Icon-only add button ------------------------------------------------
   :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);
}

/* Price shares the CTA's row. Selector matches stock's 0,4,0 rule, which sets
   both width and margin-bottom on .price. */
.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). */
.store-products-list .store-product .actions .add {
  flex: none;
  width: auto;
  min-width: 0;
}
/* In-basket stepper keeps its own line. 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%;
}

/* --- Login split panel ---------------------------------------------------
   Stock caps the login popup at 480px (shared.css:2410), too narrow for a
   split — widened here rather than in shared.css. */
.login-popup-content {
  max-width: 720px;
}
.cs-login {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  max-width: 640px;
  margin: 0 auto;
}
.cs-login-main {
  min-width: 0;
  align-self: center;
}
.cs-login-art {
  position: relative;
  overflow: hidden;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background:
    radial-gradient(circle at 50% 38%, rgb(from var(--color-primary) r g b / 0.55) 0%, transparent 62%),
    linear-gradient(160deg, var(--cs-primary-deep) 0%, var(--color-bg) 78%);
  min-height: 260px;
}
/* Scoped to .cs-login to outrank `.text-content img { height: auto }`
   (shared.css:269, 0,1,1) — the <main> carries text-content, so an unscoped
   .cs-login-skin loses the height and the render overflows, clipping the feet. */
.cs-login .cs-login-skin {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 16px 14px;
  transition: opacity 0.18s ease;
  user-select: none;
}
.cs-login .cs-login-skin.is-swapping {
  opacity: 0.45;
}
@media (prefers-reduced-motion: reduce) {
  .cs-login-skin { transition: none; }
}
@media (width <= 620px) {
  .cs-login {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-width: 420px;
  }
  .cs-login-art {
    min-height: 0;
    height: 168px;
  }
  .cs-login .cs-login-skin {
    padding: 12px;
  }
}

/* --- Package page / modal ------------------------------------------------ */
.popup-content.store-product-popup-content { max-width: 760px; }
@media (width > 600px) {
  .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;
  }
}
/* 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;
}
.store-product-full .product-title {
  line-height: 1.15;
}
/* package.html keeps .descr as a direct grid child so it spans both columns. */
.store-product-full .descr {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--cs-border);
  padding-top: var(--widget-padding);
}

/* Popup 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.
     [ 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;
  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. */
.store-product-popup-content .cs-product-detail {
  display: contents;
}
.store-product-popup-content .cs-product-media {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}
.store-product-popup-content .product-title {
  grid-column: 2;
  grid-row: 1;
  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 content, leaving the track unscrollable. */
.store-product-popup-content .descr {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) transparent;
}
.store-product-popup-content .cs-product-detail .actions {
  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0 calc(var(--widget-padding) * -1);
  padding: var(--widget-padding);
  border-top: 1px solid var(--cs-border);
  background-color: var(--color-brighter-bg);
}
.store-product-popup-content:has(.media-slider) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-items: stretch;
}
.store-product-popup-content:has(.media-slider) .cs-product-media {
  grid-column: 1;
  grid-row: 1;
}
.store-product-popup-content:has(.media-slider) .product-title {
  grid-column: 1;
  grid-row: 2;
}
.store-product-popup-content:has(.media-slider) .descr {
  grid-row: 3;
}
.store-product-popup-content:has(.media-slider) .cs-product-detail .actions {
  grid-row: 4;
}

/* --- Sidebar --------------------------------------------------------------
   Our sidebar styling, restored over upstream's. Upstream's navigation.twig is
   kept as-is (it drives the menu-dropdown-header option) and emits the same
   classes, with one rename: our .cs-menu-label is .cs-menu-parent-name there,
   so both are selected below.
   The cs-mobile-l2 layout scopes its rules to `body.cs-mobile-l2.page-index`,
   which outranks everything here — that option is left working. */
.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; }
}

/* A category with subcategories is a disclosure control, not a destination:
   the whole row is one button (icon + label + chevron). */
.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,
.cs-menu-parent-name {
  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; }
}

.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; }
  .store-sidebar .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, merging the two highlights into one block. */
  .navigation-vertical .has-children.active > .cs-menu-parent {
    color: var(--color-text);
    font-weight: 600;
  }

  /* Rail + indent: a flat 50px text inset is 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);
  }
  /* Stock pins the submenu to width:100% at (0,2,1) — combined with the rail's
     22px left margin that pushed the active row's background 22px past the
     sidebar's right edge. Matched weight so the width can shrink to fit. */
  .navigation-vertical .has-children > ul {
    width: auto;
  }
  .navigation-vertical ul ul a {
    padding: 9px 12px;
    font-size: 15px;
  }
}

/* --- Whole card opens the package -----------------------------------------
   Stretched link: .image-link is already an <a href="/package/…">, so giving it
   an ::after that covers the card makes the entire card that same link — no JS
   and no nested-interactive markup (a <button> inside an <a> would be invalid).
   main.js's product-URL handler still fires, so it opens the modal as before.
   The ::after positions against .store-product because .image-link itself is
   not positioned; the actions row is lifted above it so the add-to-cart button,
   quantity stepper and gift button stay clickable. */
.store-product:not(.store-product-full) {
  position: relative;
}
.store-product:not(.store-product-full) .image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--cs-radius);
}
.store-product:not(.store-product-full) .actions,
.store-product:not(.store-product-full) .cs-price-badge {
  position: relative;
  z-index: 2;
}

/* --- Mobile: compact rows for every display type ---------------------------
   Thumbnail left, title above the price on the right, add button at the end.
   Applied to all three types so `list` matches `images`/`grid` on phones.

   display:grid is set explicitly: only `images` is a grid container by default
   (shared.css:1232), and its `grid-template-columns: subgrid` would otherwise
   inherit the parent's single track. `grid` and `list` are flex columns
   (shared.css:1097), so they need the display switch too. */
@media (width <= 600px) {
  .store-products-images .store-product,
  .store-products-grid .store-product,
  .store-products-list .store-product {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px;
    text-align: left;
  }
  .store-products-images .store-product .image-link,
  .store-products-grid .store-product .image-link,
  .store-products-list .store-product .image-link {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 76px;
    margin: 0;
  }
  .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,
  .store-products-list .store-product .image,
  .store-products-list .store-product .image-default {
    width: 76px;
    height: 76px;
    object-fit: contain;
  }
  .store-products-images .store-product .product-title,
  .store-products-grid .store-product .product-title,
  .store-products-list .store-product .product-title {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
  }
  .store-products-images .store-product .actions,
  .store-products-grid .store-product .actions,
  .store-products-list .store-product .actions {
    grid-column: 2;
    grid-row: 2;
    flex-wrap: wrap;
    align-items: center;
  }
  /* Stock gives .price width:100% at (0,3,0), which would push the button onto
     its own line inside the narrow right-hand column. */
  .store-products-images .store-product:not(.store-product-full) .price,
  .store-products-grid .store-product:not(.store-product-full) .price,
  .store-products-list .store-product:not(.store-product-full) .price {
    width: auto;
    margin: 0 auto 0 0;
  }
  /* list-only: stock stretches .wide controls to full width below 600px
     (shared.css:1259) — that would blow the icon-only add button out. */
  .store-products-list .store-product .wide {
    width: auto;
  }
  .store-products-list .store-product .actions .add {
    flex: none;
    width: auto;
    min-width: 0;
  }
}

/* --- Highlight badges: "New" / "Leaves in" / "Event" ---------------------
   .cs-hl-grid badges are absolute overlays for card views; .cs-hl-list
   badges live inline in the product title and only show in list view.
   The "Leaves in" timer is filled by the data-cs-sale-ends IIFE in
   layout.html (coarse "2d 4h" above 24h, live HH:MM:SS below). */
.cs-new-badge,
.cs-temp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
}
.cs-new-badge {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.cs-temp-badge {
  background: var(--color-removed);
  color: #fff;
}
.cs-temp-badge .cs-temp-ico {
  width: 13px;
  height: 13px;
  flex: none;
}
.cs-temp-badge .cs-temp-timer {
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  background: rgb(0 0 0 / 0.28);
  border-radius: 999px;
  padding: 0 7px;
}

/* Card views: overlay. "New" top-left; "Leaves in" sits centred on the image's
   bottom edge so it can't collide with the Style 2 price badge (top-right),
   the "New" badge, or the artwork itself. */
.store-products-grid .store-product,
.store-products-images .store-product {
  position: relative;
}
.store-products-grid .cs-new-badge.cs-hl-grid,
.store-products-images .cs-new-badge.cs-hl-grid {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
/* Style 1: "Leaves in" overlays the top of the card (top-left; below the
   "New" badge when a package carries both). */
.store-products-grid .cs-temp-badge.cs-hl-grid,
.store-products-images .cs-temp-badge.cs-hl-grid {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.store-products-grid .cs-new-badge.cs-hl-grid + .cs-temp-badge.cs-hl-grid,
.store-products-images .cs-new-badge.cs-hl-grid + .cs-temp-badge.cs-hl-grid {
  top: 46px;
}
/* Style 2: the price badge owns the top-right and "New" the top-left, so
   "Leaves in" sits centred on the image's bottom edge instead. */
.cs-cards-s2 .store-products-grid .cs-temp-badge.cs-hl-grid,
.cs-cards-s2 .store-products-images .cs-temp-badge.cs-hl-grid,
.cs-cards-s2 .store-products-grid .cs-new-badge.cs-hl-grid + .cs-temp-badge.cs-hl-grid,
.cs-cards-s2 .store-products-images .cs-new-badge.cs-hl-grid + .cs-temp-badge.cs-hl-grid {
  top: calc(var(--widget-padding, 16px) + var(--cs-product-image-height, 150px) - 10px);
  left: 50%;
  transform: translateX(-50%);
}

/* List view: badges inline next to the title instead. */
.cs-hl-list { display: none; }
.store-products-list .cs-hl-list {
  display: inline-flex;
  vertical-align: middle;
  margin-left: 8px;
  font-size: 10px;
  padding: 2px 8px;
}

/* {featured} marker: the product card gets the same gold-frame treatment as
   the home-page featured cards, plus the floating "Featured" pill. */
.store-products-grid .store-product.cs-featured-product,
.store-products-images .store-product.cs-featured-product,
.store-products-list .store-product.cs-featured-product {
  background:
    linear-gradient(rgb(from var(--color-primary) r g b / 0.08), rgb(from var(--color-primary) r g b / 0.08)) padding-box,
    linear-gradient(var(--color-brighter-bg), var(--color-brighter-bg)) padding-box,
    linear-gradient(120deg, var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep)) border-box;
  background-size: auto, auto, 300% 100%;
  border-color: transparent;
  animation: cs-featured-sheen 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .store-product.cs-featured-product { animation: none; }
}
/* The pill floats over the top border in card views; inline in the title for
   list rows (which are not position:relative). */
.store-product .cs-featured-star.cs-hl-list { position: static; }

/* On phones every card view collapses into 76px-image rows (see the width<=600
   block above), so the absolute overlays would land on the title — switch all
   views to the inline-in-title badge there. */
@media (width <= 600px) {
  .store-products-grid .cs-hl-grid,
  .store-products-images .cs-hl-grid {
    display: none;
  }
  .store-products-grid .cs-hl-list,
  .store-products-images .cs-hl-list {
    display: inline-flex;
    vertical-align: middle;
    margin-left: 8px;
    font-size: 10px;
    padding: 2px 8px;
  }
}

/* Sidebar / navigation badges. "Event" is outlined so it stays quieter than
   the filled card badges; parents inherit the strongest child badge in Twig. */
.cs-nav-badge {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
.cs-nav-badge-new {
  background: var(--color-primary);
  color: var(--color-primary-text);
}
.cs-nav-badge-evt {
  background: rgb(from var(--color-removed) r g b / 0.14);
  color: #ff8589;
  border: 1px solid rgb(from var(--color-removed) r g b / 0.55);
}
/* Parent rows (icon + name + chevron) are too tight for a text pill — long
   names truncate. Parents get a colored dot instead; the label text stays in
   the DOM for screen readers and the title tooltip. */
.cs-menu-parent .cs-nav-badge {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0 4px 0 0;
  border: none;
  border-radius: 50%;
  font-size: 0;
  animation: cs-nav-dot-breathe 2.2s ease-in-out infinite;
}
.cs-menu-parent .cs-nav-badge-new {
  --cs-nav-dot: var(--color-primary);
  background: var(--color-primary);
}
.cs-menu-parent .cs-nav-badge-evt {
  --cs-nav-dot: var(--color-removed);
  background: var(--color-removed);
}
@keyframes cs-nav-dot-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgb(from var(--cs-nav-dot) r g b / 0.30); }
  50% { box-shadow: 0 0 0 7px rgb(from var(--cs-nav-dot) r g b / 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .cs-menu-parent .cs-nav-badge {
    animation: none;
    box-shadow: 0 0 0 3px rgb(from var(--cs-nav-dot) r g b / 0.25);
  }
}
.navigation-list a .cs-nav-badge { margin-left: 6px; vertical-align: middle; }

/* ==== Seasonal themes ======================================================
   Schema "Seasonal Theme" (seasonal-theme). layout.html turns the value into a
   body class (Halloween -> cs-halloween) and emits that season's decorations
   inside one .cs-season layer. To add a season, e.g. Christmas:
     1. add "Christmas" to the Schema select values;
     2. add a body.cs-christmas block like the Halloween one below: tokens,
        decorations, a .cs-season-pill icon, a prefers-reduced-motion section;
     3. if it has decorations, emit them in layout.html for season == 'christmas';
     4. add its greeting to seasonGreetings in index.html and to es_ES_.lang.
   Keep the live status dot the only green on the page. */

/* decoration layer: behind all content, never clickable */
.cs-season {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 520px;
  overflow: hidden; /* decorations leave the screen without causing horizontal scroll */
  pointer-events: none;
  z-index: -1;
}
/* zero specificity so each season's pieces can override position/display */
:where(.cs-season) > i { position: absolute; display: block; }

/* featured pill: the module always emits the star and an empty icon slot; any season
   (body.cs-seasonal) hides the star and shows the slot, which the season fills */
.cs-season-pill { display: none; }
.cs-seasonal .cs-featured-star svg { display: none; }
.cs-seasonal .cs-season-pill {
  display: block;
  width: 16px;
  height: 16px;
  margin: -2px 0 -2px -4px;
  flex: none;
  background: center / 100% 100% no-repeat;
}

/* ---- Halloween: a Minecraft night ---- */
body.cs-halloween {
  /* night neutrals: purple-black instead of brown-black */
  --color-bg: #0a0612;
  --color-brighter-bg: #150d22;
  --color-secondary: #2a1740;
  --color-secondary-hover: #351d50;
  --color-text: #f4eefc;
  --color-text-darker: #dcd2ea;
  --color-text-secondary: #a898c4;
  --cs-border: #3a2358;
  --color-tertiary-hover: rgb(from var(--color-primary) r g b / 0.14);

  --cs-hw-soul: #78d0ff;    /* soul fire: blue, kept clear of the green live dot */
  --cs-hw-glow: 255 150 30; /* jack-o'-lantern light, rgb triplet */

  /* pixel art: crispEdges SVG, one path per colour */
  --cs-hw-bat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 8' shape-rendering='crispEdges'%3E%3Cpath fill='%233d2b55' d='M0 0h1v1h-1zM14 0h1v1h-1zM0 1h2v1h-2zM13 1h2v1h-2zM1 2h3v1h-3zM11 2h3v1h-3zM2 3h4v1h-4zM9 3h4v1h-4zM17 3h4v1h-4zM24 3h4v1h-4zM3 4h3v1h-3zM9 4h3v1h-3zM16 4h5v1h-5zM24 4h5v1h-5zM15 5h3v1h-3zM20 5h1v1h-1zM24 5h1v1h-1zM27 5h3v1h-3zM15 6h2v1h-2zM28 6h2v1h-2zM15 7h1v1h-1zM29 7h1v1h-1z'/%3E%3Cpath fill='%2322152f' d='M6 1h1v1h-1zM8 1h1v1h-1zM21 1h1v1h-1zM23 1h1v1h-1zM6 2h3v1h-3zM21 2h3v1h-3zM7 3h1v1h-1zM22 3h1v1h-1zM6 4h3v1h-3zM21 4h3v1h-3zM6 5h3v1h-3zM21 5h3v1h-3zM7 6h1v1h-1zM22 6h1v1h-1z'/%3E%3Cpath fill='%23ffb02e' d='M6 3h1v1h-1zM8 3h1v1h-1zM21 3h1v1h-1zM23 3h1v1h-1z'/%3E%3C/svg%3E");
  --cs-hw-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23efeaf9' d='M5 0h6v1h-6zM3 1h10v1h-10zM2 2h3v1h-3zM7 2h7v1h-7zM1 3h3v1h-3zM8 3h4v1h-4zM13 3h2v1h-2zM1 4h3v1h-3zM8 4h3v1h-3zM0 5h5v1h-5zM7 5h5v1h-5zM13 5h2v1h-2zM0 6h15v1h-15zM0 7h2v1h-2zM3 7h6v1h-6zM11 7h4v1h-4zM0 8h1v1h-1zM4 8h4v1h-4zM12 8h3v1h-3zM0 9h2v1h-2zM3 9h5v1h-5zM12 9h2v1h-2zM0 10h9v1h-9zM11 10h2v1h-2zM1 11h4v1h-4zM7 11h6v1h-6zM1 12h3v1h-3zM8 12h5v1h-5zM2 13h3v1h-3zM7 13h5v1h-5zM3 14h7v1h-7z'/%3E%3Cpath fill='%23cdc4e3' d='M5 2h2v1h-2zM4 3h1v1h-1zM7 3h1v1h-1zM12 3h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM11 4h1v1h-1zM13 4h1v1h-1zM5 5h2v1h-2zM12 5h1v1h-1zM2 7h1v1h-1zM9 7h2v1h-2zM1 8h1v1h-1zM3 8h1v1h-1zM8 8h1v1h-1zM11 8h1v1h-1zM2 9h1v1h-1zM8 9h1v1h-1zM11 9h1v1h-1zM14 9h1v1h-1zM9 10h2v1h-2zM13 10h1v1h-1zM5 11h2v1h-2zM13 11h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM5 13h2v1h-2z'/%3E%3Cpath fill='%23a89dc8' d='M5 3h2v1h-2zM5 4h2v1h-2zM12 4h1v1h-1zM2 8h1v1h-1zM9 8h2v1h-2zM9 9h2v1h-2zM14 10h1v1h-1zM5 12h2v1h-2z'/%3E%3Cpath fill='%23d9d1ec' d='M14 4h1v1h-1zM15 5h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM15 8h1v1h-1zM15 9h1v1h-1zM15 10h1v1h-1zM14 11h1v1h-1zM13 12h2v1h-2zM12 13h2v1h-2zM10 14h3v1h-3zM5 15h6v1h-6z'/%3E%3C/svg%3E");
  --cs-hw-jack: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%237a3a06' d='M0 0h16v1h-16zM0 1h1v1h-1zM15 1h1v1h-1zM0 2h1v1h-1zM15 2h1v1h-1zM0 3h1v1h-1zM15 3h1v1h-1zM0 4h1v1h-1zM15 4h1v1h-1zM0 5h1v1h-1zM15 5h1v1h-1zM0 6h1v1h-1zM15 6h1v1h-1zM0 7h1v1h-1zM15 7h1v1h-1zM0 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM15 10h1v1h-1zM0 11h1v1h-1zM15 11h1v1h-1zM0 12h1v1h-1zM15 12h1v1h-1zM0 13h1v1h-1zM15 13h1v1h-1zM0 14h1v1h-1zM15 14h1v1h-1zM0 15h16v1h-16z'/%3E%3Cpath fill='%23f4a944' d='M1 1h3v1h-3zM5 1h6v1h-6zM12 1h3v1h-3z'/%3E%3Cpath fill='%23c46d10' d='M4 1h1v1h-1zM11 1h1v1h-1zM4 2h1v1h-1zM11 2h1v1h-1zM4 3h1v1h-1zM11 3h1v1h-1zM4 7h1v1h-1zM11 7h1v1h-1zM4 8h1v1h-1zM11 8h1v1h-1zM4 13h1v1h-1zM11 13h1v1h-1zM4 14h1v1h-1zM11 14h1v1h-1z'/%3E%3Cpath fill='%23e38a1c' d='M1 2h3v1h-3zM5 2h6v1h-6zM12 2h3v1h-3zM1 3h3v1h-3zM5 3h6v1h-6zM12 3h3v1h-3zM1 4h3v1h-3zM5 4h6v1h-6zM12 4h3v1h-3zM1 5h2v1h-2zM6 5h4v1h-4zM13 5h2v1h-2zM1 6h1v1h-1zM7 6h2v1h-2zM14 6h1v1h-1zM1 7h3v1h-3zM5 7h2v1h-2zM9 7h2v1h-2zM12 7h3v1h-3zM1 8h3v1h-3zM5 8h6v1h-6zM12 8h3v1h-3zM1 9h2v1h-2zM5 9h1v1h-1zM10 9h1v1h-1zM13 9h2v1h-2zM1 10h1v1h-1zM14 10h1v1h-1zM1 11h1v1h-1zM14 11h1v1h-1zM1 12h2v1h-2zM7 12h2v1h-2zM13 12h2v1h-2zM1 13h3v1h-3zM5 13h6v1h-6zM12 13h3v1h-3zM1 14h3v1h-3zM5 14h6v1h-6zM12 14h3v1h-3z'/%3E%3Cpath fill='%23ffd23f' d='M4 4h1v1h-1zM11 4h1v1h-1zM3 5h3v1h-3zM10 5h3v1h-3zM2 6h2v1h-2zM5 6h2v1h-2zM9 6h2v1h-2zM12 6h2v1h-2zM7 7h2v1h-2zM3 9h2v1h-2zM6 9h4v1h-4zM11 9h2v1h-2zM2 10h2v1h-2zM12 10h2v1h-2zM2 11h2v1h-2zM12 11h2v1h-2zM3 12h4v1h-4zM9 12h4v1h-4z'/%3E%3Cpath fill='%23fff1a8' d='M4 6h1v1h-1zM11 6h1v1h-1zM4 10h8v1h-8zM4 11h8v1h-8z'/%3E%3C/svg%3E");
  --cs-hw-spider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 9' shape-rendering='crispEdges'%3E%3Cpath fill='%231d1426' d='M5 0h1v1h-1zM3 1h5v1h-5zM3 2h5v1h-5zM2 3h2v1h-2zM5 3h1v1h-1zM7 3h2v1h-2zM3 4h5v1h-5zM2 5h7v1h-7zM3 6h5v1h-5zM4 7h3v1h-3z'/%3E%3Cpath fill='%232e2238' d='M0 1h1v1h-1zM10 1h1v1h-1zM1 2h1v1h-1zM9 2h1v1h-1zM0 4h3v1h-3zM8 4h3v1h-3zM1 6h1v1h-1zM9 6h1v1h-1zM0 7h1v1h-1zM3 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM4 8h1v1h-1zM6 8h1v1h-1z'/%3E%3Cpath fill='%23ff4d4d' d='M4 3h1v1h-1zM6 3h1v1h-1z'/%3E%3C/svg%3E");
  --cs-hw-web: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffffff' d='M0 0h2v1h-2zM8 0h1v1h-1zM15 0h1v1h-1zM22 0h1v1h-1zM0 1h6v1h-6zM7 1h1v1h-1zM14 1h1v1h-1zM21 1h1v1h-1zM1 2h2v1h-2zM6 2h4v1h-4zM13 2h1v1h-1zM20 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM10 3h3v1h-3zM20 3h1v1h-1zM1 4h1v1h-1zM4 4h1v1h-1zM11 4h1v1h-1zM13 4h4v1h-4zM19 4h1v1h-1zM1 5h1v1h-1zM3 5h1v1h-1zM5 5h1v1h-1zM11 5h1v1h-1zM17 5h4v1h-4zM2 6h1v1h-1zM6 6h1v1h-1zM10 6h1v1h-1zM17 6h1v1h-1zM21 6h3v1h-3zM1 7h2v1h-2zM7 7h1v1h-1zM10 7h1v1h-1zM17 7h1v1h-1zM0 8h1v1h-1zM2 8h1v1h-1zM8 8h2v1h-2zM16 8h1v1h-1zM2 9h1v1h-1zM9 9h1v1h-1zM15 9h1v1h-1zM3 10h1v1h-1zM7 10h2v1h-2zM10 10h1v1h-1zM15 10h1v1h-1zM3 11h1v1h-1zM5 11h2v1h-2zM11 11h1v1h-1zM14 11h1v1h-1zM3 12h2v1h-2zM12 12h1v1h-1zM14 12h1v1h-1zM2 13h1v1h-1zM4 13h1v1h-1zM13 13h1v1h-1zM1 14h1v1h-1zM4 14h1v1h-1zM11 14h2v1h-2zM14 14h1v1h-1zM0 15h1v1h-1zM4 15h1v1h-1zM10 15h1v1h-1zM15 15h1v1h-1zM4 16h1v1h-1zM8 16h2v1h-2zM16 16h1v1h-1zM5 17h3v1h-3zM17 17h1v1h-1zM5 18h1v1h-1zM18 18h1v1h-1zM4 19h2v1h-2zM19 19h1v1h-1zM2 20h2v1h-2zM5 20h1v1h-1zM20 20h1v1h-1zM1 21h1v1h-1zM6 21h1v1h-1zM21 21h1v1h-1zM0 22h1v1h-1zM6 22h1v1h-1zM22 22h1v1h-1zM6 23h1v1h-1zM23 23h1v1h-1z'/%3E%3C/svg%3E");
}

/* Page canvas and the Tebex legal bar resolve their colours on :root, which a
   body class cannot reach. :has() keeps the override inside this block. */
:root:has(body.cs-halloween) {
  --color-bg: #0a0612;
  --tebex-legal-footer-background-color: #150d22;
  --tebex-legal-footer-border-color: #3a2358;
  --tebex-legal-footer-text-color: #a898c4;
}

/* night: cool the store-uploaded hero (multiply tint) and vignette the corners */
body.cs-halloween::before {
  background-image:
    radial-gradient(130% 95% at 50% 0%, transparent 50%, rgb(4 2 10 / 0.6) 100%),
    linear-gradient(to bottom, rgb(from var(--color-bg) r g b / 0.42) 0%, var(--color-bg) var(--cs-bg-fade)),
    linear-gradient(#6a58c0, #6a58c0),
    var(--bg-image, none);
  background-blend-mode: normal, normal, multiply, normal;
}

/* soul fire: the ember particles turn into square blue flames */
body.cs-halloween .cs-particles span {
  background: var(--cs-hw-soul);
  border-radius: 0;
  box-shadow: 0 0 10px 2px rgb(120 208 255 / 0.65);
  animation-name: cs-hw-soul;
}
body.cs-halloween .cs-particles span:nth-child(even) { animation-name: cs-hw-soul-b; }
@keyframes cs-hw-soul {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.75; }
  30%  { transform: translate(10px, -15vh); }
  55%  { transform: translate(-10px, -28vh); }
  80%  { transform: translate(8px, -40vh); opacity: 0.6; }
  100% { transform: translate(-4px, -50vh); opacity: 0; }
}
@keyframes cs-hw-soul-b {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.6; }
  28%  { transform: translate(-11px, -14vh); }
  52%  { transform: translate(12px, -27vh); }
  80%  { transform: translate(-8px, -41vh); opacity: 0.5; }
  100% { transform: translate(6px, -50vh); opacity: 0; }
}

/* pixel full moon in the sky above the cards, left of the account pill; bats cross in front */
body.cs-halloween .cs-hw-moon {
  top: 22px;
  right: calc(max(0px, 50% - 700px) + 430px);
  width: 128px;
  height: 128px;
  border-radius: 50%; /* the glow follows a disc, the pixels stay square */
  background: var(--cs-hw-moon) center / 100% 100% no-repeat;
  box-shadow: 0 0 34px 6px rgb(225 215 255 / 0.55), 0 0 120px 46px rgb(140 110 255 / 0.3);
}

/* pixel cobwebs pinned to the viewport corners */
body.cs-halloween .cs-hw-web {
  position: fixed;
  top: 0;
  width: 168px;
  height: 168px;
  opacity: 0.4;
  background: var(--cs-hw-web) 0 0 / 100% 100% no-repeat;
}
body.cs-halloween .cs-hw-web-l { left: 0; }
body.cs-halloween .cs-hw-web-r { right: 0; scale: -1 1; }

/* bats: 2-frame flap on ::before, slow drift across the hero band on the element */
body.cs-halloween .cs-hw-bat {
  --s: 3;
  left: 0;
  top: var(--y);
  width: calc(15px * var(--s));
  height: calc(8px * var(--s));
  filter: drop-shadow(0 0 2px rgb(225 210 255 / 0.85));
  animation: cs-hw-fly var(--d) linear var(--t) infinite;
}
body.cs-halloween .cs-hw-bat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cs-hw-bat) 0 0 / 200% 100% no-repeat;
  animation: cs-hw-flap 0.28s steps(1) infinite;
}
body.cs-halloween .cs-hw-bat.cs-hw-rtl { animation-direction: reverse; }
/* lane (top), pixel scale, crossing time, phase, and a resting x for reduced motion */
body.cs-halloween .cs-hw-bat:nth-child(4) { --y: 40px;  --s: 4; --d: 21s; --t: -6s;  --x: 21vw; }
body.cs-halloween .cs-hw-bat:nth-child(5) { --y: 124px; --s: 3; --d: 27s; --t: -15s; --x: 64vw; }
body.cs-halloween .cs-hw-bat:nth-child(6) { --y: 84px;  --s: 5; --d: 24s; --t: -11s; --x: 47vw; }
body.cs-halloween .cs-hw-bat:nth-child(7) { --y: 140px; --s: 3; --d: 31s; --t: -2s;  --x: 33vw; }
body.cs-halloween .cs-hw-bat:nth-child(8) { --y: 14px;  --s: 3; --d: 26s; --t: -20s; --x: 78vw; }
body.cs-halloween .cs-hw-bat:nth-child(9) { --y: 64px;  --s: 4; --d: 19s; --t: -14s; --x: 10vw; }
@keyframes cs-hw-fly {
  0%   { translate: -90px 0; }
  20%  { translate: 20vw 16px; }
  40%  { translate: 40vw -8px; }
  60%  { translate: 60vw 14px; }
  80%  { translate: 80vw -6px; }
  100% { translate: calc(100vw + 90px) 0; }
}
@keyframes cs-hw-flap { 50% { background-position: 100% 0; } }

/* spider dangling into the hero band from the top of the page (desktop) */
body.cs-halloween .cs-hw-spider {
  top: -40px;
  right: calc(max(0px, 50% - 700px) + 340px);
  width: 33px;
  height: 168px;
  animation: cs-hw-dangle 5.5s ease-in-out infinite;
}
body.cs-halloween .cs-hw-spider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 24px;
  left: 15px;
  width: 3px;
  background: linear-gradient(rgb(230 220 255 / 0.15), rgb(230 220 255 / 0.6));
}
body.cs-halloween .cs-hw-spider::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 33px;
  height: 27px;
  background: var(--cs-hw-spider) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px rgb(205 190 255 / 0.5));
}
@keyframes cs-hw-dangle {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 24px; }
}

/* ground fog pinned to the bottom of the viewport, two layers drifting against each other */
body.cs-halloween .cs-hw-fog {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  /* peak combined alpha ~0.31: footer text in --color-text-secondary stays >= 4.5:1 over it */
  background:
    radial-gradient(closest-side, rgb(170 150 245 / 0.2), transparent) 0 100% / 560px 170px repeat-x,
    radial-gradient(closest-side, rgb(150 125 230 / 0.14), transparent) 280px 100% / 760px 220px repeat-x;
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
          mask-image: linear-gradient(transparent, #000 55%);
  animation: cs-hw-fog 70s linear infinite;
}
@keyframes cs-hw-fog {
  to { background-position: 560px 100%, -480px 100%; }
}

/* two lantern blocks resting on the menu box. Desktop sidebar and the Layout 2 home
   only: on other phone layouts the menu is a drawer and keeps its own positioning. */
@media (width > 960px) {
  body.cs-halloween .navigation-vertical { position: relative; }
}
body.cs-halloween .navigation-vertical::before,
body.cs-halloween .navigation-vertical::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  right: 22px;
  width: 32px;
  height: 32px;
  top: calc(-32px - var(--cs-border-width));
  background: var(--cs-hw-jack) center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 12px rgb(var(--cs-hw-glow) / 0.7));
  animation: cs-hw-candle 3.1s infinite;
}
body.cs-halloween .navigation-vertical::after {
  right: 60px;
  width: 24px;
  height: 24px;
  top: calc(-24px - var(--cs-border-width));
  animation-delay: -1.4s;
}
@keyframes cs-hw-candle {
  0%, 100% { filter: drop-shadow(0 0 12px rgb(var(--cs-hw-glow) / 0.7)); }
  8%       { filter: drop-shadow(0 0 7px rgb(var(--cs-hw-glow) / 0.4)); }
  11%      { filter: drop-shadow(0 0 14px rgb(var(--cs-hw-glow) / 0.85)); }
  46%      { filter: drop-shadow(0 0 11px rgb(var(--cs-hw-glow) / 0.65)); }
  49%      { filter: drop-shadow(0 0 6px rgb(var(--cs-hw-glow) / 0.35)); }
  53%      { filter: drop-shadow(0 0 15px rgb(var(--cs-hw-glow) / 0.85)); }
}

/* three lanterns resting on the footer divider, same motif as the menu box */
body.cs-halloween .cs-footer-divider { position: relative; }
body.cs-halloween .cs-footer-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 92px;
  height: 32px;
  translate: -50% 0;
  pointer-events: none;
  background:
    var(--cs-hw-jack) 0 100% / 24px 24px no-repeat,
    var(--cs-hw-jack) 30px 100% / 32px 32px no-repeat,
    var(--cs-hw-jack) 68px 100% / 24px 24px no-repeat;
  filter: drop-shadow(0 0 12px rgb(var(--cs-hw-glow) / 0.7));
  animation: cs-hw-candle 3.1s -0.7s infinite;
}

/* featured pill icon: a 16px jack-o'-lantern */
body.cs-halloween .cs-season-pill { background-image: var(--cs-hw-jack); }

/* featured cards: lit from inside, warm glow leaking out */
body.cs-halloween .cs-featured-grid .cs-featured-card {
  background:
    radial-gradient(85% 80% at 50% 125%, rgb(var(--cs-hw-glow) / 0.55), transparent 75%) padding-box,
    linear-gradient(var(--color-brighter-bg), var(--color-brighter-bg)) padding-box,
    linear-gradient(120deg, var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep), var(--color-primary), var(--cs-primary-deep)) border-box;
  background-size: auto, auto, 300% 100%;
  box-shadow: 0 8px 26px -8px rgb(var(--cs-hw-glow) / 0.45);
}

/* Play Now card flickers like a lantern */
body.cs-halloween .cs-home-cards .info.server {
  box-shadow: 0 0 26px 0 rgb(var(--cs-hw-glow) / 0.5);
  animation: cs-hw-lantern 3.6s infinite;
}
@keyframes cs-hw-lantern {
  0%, 100% { box-shadow: 0 0 26px 0 rgb(var(--cs-hw-glow) / 0.5); }
  9%       { box-shadow: 0 0 16px -3px rgb(var(--cs-hw-glow) / 0.3); }
  12%      { box-shadow: 0 0 32px 3px rgb(var(--cs-hw-glow) / 0.62); }
  41%      { box-shadow: 0 0 24px 0 rgb(var(--cs-hw-glow) / 0.48); }
  44%      { box-shadow: 0 0 14px -4px rgb(var(--cs-hw-glow) / 0.28); }
  48%      { box-shadow: 0 0 34px 4px rgb(var(--cs-hw-glow) / 0.65); }
  76%      { box-shadow: 0 0 26px 0 rgb(var(--cs-hw-glow) / 0.5); }
}

/* welcome heading "Halloween en ZestianMC": the name glows and flickers */
body.cs-halloween .cs-welcome-pre { color: #c9b8ea; }
body.cs-halloween .cs-welcome-name {
  text-shadow: 0 0 18px rgb(var(--cs-hw-glow) / 0.6), 0 0 3px rgb(255 190 80 / 0.5);
  animation: cs-hw-namefire 4.8s infinite;
}
@keyframes cs-hw-namefire {
  0%, 100% { text-shadow: 0 0 18px rgb(var(--cs-hw-glow) / 0.6),  0 0 3px rgb(255 190 80 / 0.5); }
  7%       { text-shadow: 0 0 10px rgb(var(--cs-hw-glow) / 0.3),  0 0 2px rgb(255 190 80 / 0.3); }
  10%      { text-shadow: 0 0 22px rgb(var(--cs-hw-glow) / 0.75), 0 0 3px rgb(255 190 80 / 0.6); }
  55%      { text-shadow: 0 0 17px rgb(var(--cs-hw-glow) / 0.55), 0 0 3px rgb(255 190 80 / 0.5); }
  58%      { text-shadow: 0 0 9px rgb(var(--cs-hw-glow) / 0.28),  0 0 2px rgb(255 190 80 / 0.3); }
  62%      { text-shadow: 0 0 22px rgb(var(--cs-hw-glow) / 0.75), 0 0 3px rgb(255 190 80 / 0.6); }
}

/* cobwebs in the welcome card's top corners, behind the text */
body.cs-halloween.page-index .site-content > .store-text { position: relative; isolation: isolate; }
body.cs-halloween.page-index .site-content > .store-text::before,
body.cs-halloween.page-index .site-content > .store-text::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;
  pointer-events: none;
  width: min(144px, 20%); /* shrinks with a narrow card so it stays clear of the centred image */
  aspect-ratio: 1;
  opacity: 0.32;
  border-top-left-radius: calc(var(--cs-radius) - var(--cs-border-width));
  background: var(--cs-hw-web) 0 0 / 100% 100% no-repeat;
}
body.cs-halloween.page-index .site-content > .store-text::before { left: 0; }
body.cs-halloween.page-index .site-content > .store-text::after { right: 0; scale: -1 1; }

/* promo banner, Halloween sale look: night gradient, moon, jack-o'-lantern in place of
   the chest, the coins become bats circling it, a cobweb in the corner */
body.cs-halloween .cs-promo {
  background:
    radial-gradient(45% 95% at 80% 35%, rgb(140 110 255 / 0.32), transparent 72%) padding-box,
    linear-gradient(135deg, #2a1740 0%, #150d22 62%) padding-box,
    linear-gradient(120deg, #7a3a06, #ff9a1e, #5b2a8a, #ff9a1e, #7a3a06) border-box;
  background-size: auto, auto, 300% 100%;
}
body.cs-halloween .cs-promo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 120px;
  aspect-ratio: 1;
  opacity: 0.3;
  scale: -1 1;
  pointer-events: none;
  background: var(--cs-hw-web) 0 0 / 100% 100% no-repeat;
}
body.cs-halloween .cs-promo-eyebrow { color: #ffb02e; }
body.cs-halloween .cs-promo-title { animation: cs-hw-namefire 4.8s infinite; }
body.cs-halloween .cs-promo-slot {
  background: #0a0612;
  border-color: #3a2358;
  box-shadow: inset 0 -3px 0 rgb(var(--cs-hw-glow) / 0.6);
}
body.cs-halloween .cs-promo-num { text-shadow: 0 0 12px rgb(var(--cs-hw-glow) / 0.55); }
body.cs-halloween .cs-promo-art::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 8%;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--cs-hw-moon) center / 100% 100% no-repeat;
  box-shadow: 0 0 24px 4px rgb(225 215 255 / 0.5), 0 0 80px 30px rgb(140 110 255 / 0.25);
}
body.cs-halloween .cs-promo-hero {
  width: 128px;
  height: 128px;
  margin: -50px 0 0 -64px;
  background-image: var(--cs-hw-jack);
  animation: cs-promo-float 5s ease-in-out infinite, cs-hw-candle 3.1s infinite;
}
body.cs-halloween .cs-promo-bit {
  width: 45px;
  height: 24px;
  margin: -12px 0 0 -22px;
  opacity: 1;
  background: var(--cs-hw-bat) 0 0 / 200% 100% no-repeat;
  filter: drop-shadow(0 0 2px rgb(225 210 255 / 0.85));
  animation: cs-hw-flap 0.28s steps(1) infinite, cs-promo-bat 8s ease-in-out infinite;
}
body.cs-halloween .cs-promo-bit:nth-child(1) { animation-delay: 0s, -1s; }
body.cs-halloween .cs-promo-bit:nth-child(2) { animation-delay: 0s, -3.7s; scale: 0.7; }
body.cs-halloween .cs-promo-bit:nth-child(3) { animation-delay: 0s, -6.2s; scale: 0.85; }
@keyframes cs-promo-bat {
  0%, 100% { translate: -110px -70px; }
  25%      { translate: 30px -100px; }
  50%      { translate: 110px -30px; }
  75%      { translate: -20px -55px; }
}
@keyframes cs-promo-bat-sm {
  0%, 100% { translate: -52px -36px; }
  25%      { translate: 14px -50px; }
  50%      { translate: 50px -12px; }
  75%      { translate: -10px -26px; }
}
@media (width <= 767px) {
  body.cs-halloween .cs-promo::after { width: 80px; }
  body.cs-halloween .cs-promo-art::before { top: -4px; right: -4px; width: 40px; height: 40px; }
  body.cs-halloween .cs-promo-hero { width: 64px; height: 64px; margin: -24px 0 0 -32px; }
  body.cs-halloween .cs-promo-bit { width: 30px; height: 16px; margin: -8px 0 0 -15px; animation-name: cs-hw-flap, cs-promo-bat-sm; }
}

/* phones and tablets (Layout 2 puts the logo centred under the header) */
@media (width <= 960px) {
  /* Stock phone header (every page except the Layout 2 home): content starts right under
     a header that wraps differently per width and holds a pill of variable width, so
     there is no free sky. Moon and corner webs stay off; bats and soul fire remain. */
  body.cs-halloween .cs-hw-moon,
  body.cs-halloween .cs-hw-web { display: none; }
  /* Layout 2 home: small moon in the free sky left of the centred logo */
  body.cs-halloween.cs-mobile-l2.page-index .cs-hw-moon {
    display: block;
    top: 140px;
    right: auto;
    left: calc(50% - 170px);
    width: 64px;
    height: 64px;
    box-shadow: 0 0 22px 4px rgb(225 215 255 / 0.55), 0 0 70px 26px rgb(140 110 255 / 0.3);
  }
  body.cs-halloween.cs-mobile-l2.page-index .cs-hw-web { display: block; width: 96px; height: 96px; }
  body.cs-halloween .navigation-vertical::before,
  body.cs-halloween .navigation-vertical::after { display: none; }
  /* Layout 2: the logo link's hit box ends 20px above the menu, so the lanterns move
     inside the box, onto the empty right side of the "Menú" header row */
  body.cs-halloween.cs-mobile-l2.page-index .site-navigation { position: relative; }
  body.cs-halloween.cs-mobile-l2.page-index .site-navigation::before,
  body.cs-halloween.cs-mobile-l2.page-index .site-navigation::after { display: block; top: 12px; }
  body.cs-halloween.cs-mobile-l2.page-index .site-navigation::before { right: 16px; width: 28px; height: 28px; }
  body.cs-halloween.cs-mobile-l2.page-index .site-navigation::after { right: 50px; width: 22px; height: 22px; top: 18px; }
  @media (width <= 767px) {
    /* footer stacks: keep the lanterns at the right end of the divider, clear of "Jugar ahora" */
    body.cs-halloween .cs-footer-divider::before { left: auto; right: 0; translate: none; }
  }
  body.cs-halloween .cs-hw-spider,
  body.cs-halloween .cs-hw-bat:nth-child(8),
  body.cs-halloween .cs-hw-bat:nth-child(9) { display: none; }
  body.cs-halloween .cs-hw-bat:nth-child(4) { --y: 14px;  --s: 3; --d: 11s; }
  body.cs-halloween .cs-hw-bat:nth-child(5) { --y: 118px; --s: 3; --d: 14s; }
  body.cs-halloween .cs-hw-bat:nth-child(6) { --y: 200px; --s: 4; --d: 12s; }
  body.cs-halloween .cs-hw-bat:nth-child(7) { --y: 262px; --s: 3; --d: 16s; }
  body.cs-halloween.page-index .site-content > .store-text::before,
  body.cs-halloween.page-index .site-content > .store-text::after { width: 72px; }
}

/* reduced motion: everything holds still, bats rest along their lanes */
@media (prefers-reduced-motion: reduce) {
  body.cs-halloween .cs-hw-bat,
  body.cs-halloween .cs-hw-bat::before,
  body.cs-halloween .cs-hw-spider,
  body.cs-halloween .cs-hw-fog,
  body.cs-halloween .navigation-vertical::before,
  body.cs-halloween .navigation-vertical::after,
  body.cs-halloween .cs-footer-divider::before,
  body.cs-halloween .cs-home-cards .info.server,
  body.cs-halloween .cs-welcome-name,
  body.cs-halloween .cs-promo-title,
  body.cs-halloween .cs-promo-hero,
  body.cs-halloween .cs-promo-bit { animation: none; }
  body.cs-halloween .cs-hw-bat { translate: var(--x) 0; }
  body.cs-halloween .cs-promo-bit:nth-child(1) { translate: -100px -60px; }
  body.cs-halloween .cs-promo-bit:nth-child(2) { translate: 40px -95px; }
  body.cs-halloween .cs-promo-bit:nth-child(3) { translate: 100px -30px; }
}