:root {
  --color-text: #fff;
  --color-text-darker: #e5e5e5;
  --color-text-secondary: #ccc;
  --color-text-dark: #0D0D0D;
  --color-bg: #000;
  --color-brighter-bg: #0D0D0D;
  --color-primary: rgb(0 72 255);
  --color-primary-hover: #fff;
  --color-primary-text: var(--color-text-dark);
  --color-primary-text-hover: var(--color-primary-text);
  --color-secondary: #ccc;
  --color-secondary-hover: #e5e5e5;
  --color-secondary-text: var(--color-text-dark);
  --color-secondary-text-hover: var(--color-secondary-text);
  --color-tertiary: transparent;
  --color-tertiary-hover: rgb(255 255 255 / 15%);
  --color-tertiary-text: var(--color-text);
  --color-tertiary-text-hover: var(--color-tertiary-text);
  --color-removed: #C12E2E;
  --color-sale-banner-bg: var(--color-primary);
  --color-sale-banner-text: var(--color-primary-text);
  --btn-size: 46px;
  --btn-icon-size: 18px;
  --btn-icon-gap: 8px;
  --tebex-footer-height: 35px;
  --widget-padding: 16px;
  --content-padding: var(--widget-padding);
  --content-inner-width: 1280px;
  --content-width: calc((var(--content-padding) * 2) + var(--content-inner-width));
  --sidebar-width: 287px;
  --tebex-legal-footer-max-width: min(
    var(--content-inner-width),
    calc(100vw - (var(--content-padding) * 2))
  );
  --tebex-legal-footer-background-color: var(--color-brighter-bg);
  --tebex-legal-footer-border-color: var(--color-brighter-bg);
  --tebex-legal-footer-text-color: var(--color-text-secondary);
}
@media (width > 600px) {
  :root {
    --widget-padding: 20px;
  }
}
@media (width > 960px) {
  :root {
    --widget-padding: 24px;
  }
}
@media (width > 960px) {
  :root {
    --content-padding: calc(var(--widget-padding) * 2);
  }
}
@media (max-width: 900px) {
  :root {
    --tebex-footer-height: 70px;
  }
}
@media (max-width: 600px) {
  :root {
    --tebex-footer-height: 80px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  vertical-align: baseline;
  color: inherit;
  background: transparent;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

input[type=submit],
button {
  appearance: none;
  cursor: pointer;
  text-align: left;
}

textarea {
  resize: none;
}

symbol,
use,
svg {
  overflow: visible;
}

svg,
img {
  display: block;
}

li {
  display: block;
}

button {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

:root *[hidden] {
  display: none;
}

:focus {
  outline: 0;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
}

@keyframes pageMoveOut {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
@keyframes pageMoveIn {
  0%, 50% {
    scale: 0.98;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 1;
  }
}
::view-transition-old(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveOut;
  transform-origin: center top;
}

::view-transition-new(siteContent) {
  animation: var(--page-transition-duration) ease both pageMoveIn;
  transform-origin: center top;
}

::view-transition-group(siteContent) {
  z-index: 2;
}

::view-transition-group(siteHeaderTop),
::view-transition-group(siteHeader),
::view-transition-group(siteNavigation),
::view-transition-group(siteBgImage),
::view-transition-group(siteFooter) {
  animation-duration: var(--page-transition-duration);
  animation-timing-function: ease;
  z-index: 3;
}

::view-transition-group(siteBgImage) {
  z-index: 1;
}

html,
body {
  min-height: 100vh;
}

html {
  overflow: hidden scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-bg);
  scrollbar-gutter: stable;
}
html.no-scroll {
  overflow: hidden;
  overscroll-behavior-y: none;
}

body {
  position: relative;
  max-width: 100%;
  width: 100%;
  line-height: normal;
  color: var(--color-text);
  background: var(--color-bg);
  accent-color: var(--color-primary);
  font-family: sans-serif;
  font-size: 16px;
}
body::before {
  view-transition-name: siteBgImage;
}

::selection {
  color: var(--color-text);
  background-color: var(--color-primary);
  text-shadow: none;
}

select option {
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
}

.text-content {
  line-height: 1.4;
  word-wrap: break-word;
  word-break: break-word;
}
.text-content h1:not(:last-child),
.text-content h2:not(:last-child),
.text-content h3:not(:last-child),
.text-content h4:not(:last-child),
.text-content h5:not(:last-child),
.text-content h6:not(:last-child) {
  margin-bottom: 24px;
}
.text-content p:not(:last-child) {
  margin-bottom: 12px;
}
.text-content h1 {
  font-size: 32px;
}
.text-content h2 {
  font-size: 26px;
}
.text-content h3 {
  font-size: 20px;
}
.text-content h4 {
  font-size: 18px;
}
.text-content img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}
.text-content ol, .text-content ul {
  margin-left: 1em;
}
.text-content ol:not(:last-child), .text-content ul:not(:last-child) {
  margin-bottom: 12px;
}
.text-content li {
  display: list-item;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  --btn-color-text: var(--color-text);
  --btn-color-text-hover: var(--btn-color-text);
  --btn-color-bg: var(--color-bg);
  --btn-color-bg-hover: var(--btn-color-bg);
  display: block;
  width: fit-content;
  height: var(--btn-size);
  padding: 0 10px;
  line-height: var(--btn-size);
  color: var(--btn-color-text);
  background-color: var(--btn-color-bg);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (width > 960px) {
  .btn-primary,
  .btn-secondary,
  .btn-tertiary {
    padding: 0 14px;
  }
}
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-tertiary:hover,
.btn-tertiary:focus {
  color: var(--btn-color-text-hover);
  background-color: var(--btn-color-bg-hover);
}

.btn-primary {
  --btn-color-text: var(--color-primary-text);
  --btn-color-bg: var(--color-primary);
  --btn-color-text-hover: var(--color-primary-text-hover);
  --btn-color-bg-hover: var(--color-primary-hover);
}

.btn-secondary {
  --btn-color-text: var(--color-secondary-text);
  --btn-color-bg: var(--color-secondary);
  --btn-color-text-hover: var(--color-secondary-text-hover);
  --btn-color-bg-hover: var(--color-secondary-hover);
}

.btn-tertiary {
  --btn-color-text: var(--color-tertiary-text);
  --btn-color-bg: var(--color-tertiary);
  --btn-color-text-hover: var(--color-tertiary-text-hover);
  --btn-color-bg-hover: var(--color-tertiary-hover);
}

.btn-icon,
.btn-glyph,
.btn-glyph-text,
.btn-icon-text {
  --btn-icon: url("https://template-assets.tebex.io/images/plus.svg");
}

.btn-icon {
  position: relative;
  flex: none;
  width: var(--btn-size);
  height: var(--btn-size);
  padding: 0;
  background: var(--btn-icon) center center/var(--btn-icon-size) no-repeat;
}
:root .btn-icon {
  line-height: 0;
  font-size: 0;
  color: transparent;
}

.btn-icon-text {
  display: flex;
  align-items: center;
  min-width: var(--btn-size);
}
.btn-icon-text::before {
  content: "";
  display: block;
  margin-right: var(--btn-icon-gap);
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex: none;
  background: var(--btn-icon) center center/var(--btn-icon-size) no-repeat;
}
@media (width <= 960px) {
  :root .btn-icon-text {
    justify-content: center;
    font-size: 0;
    color: transparent;
  }
  :root .btn-icon-text::before {
    margin-right: 0;
  }
}

.btn-glyph::before,
.btn-glyph-text::before {
  content: "";
  display: block;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  flex: none;
  background-color: var(--btn-color-text);
  mask: var(--btn-icon) center center/contain no-repeat;
  transition: background-color 0.15s ease-in-out;
}
.btn-glyph:hover::before, .btn-glyph:focus::before,
.btn-glyph-text:hover::before,
.btn-glyph-text:focus::before {
  background-color: var(--btn-color-text-hover);
}

.btn-glyph {
  position: relative;
  flex: none;
  width: var(--btn-size);
  height: var(--btn-size);
}
:root .btn-glyph {
  padding: 0;
  line-height: 0;
  font-size: 0;
  color: transparent;
}
.btn-glyph::before {
  position: absolute;
  inset: 0;
  margin: auto;
}

.btn-glyph-text {
  display: flex;
  align-items: center;
  min-width: var(--btn-size);
}
.btn-glyph-text::before {
  margin-right: var(--btn-icon-gap);
}
@media (width <= 960px) {
  :root .btn-glyph-text {
    justify-content: center;
    font-size: 0;
    color: transparent;
  }
  :root .btn-glyph-text::before {
    margin-right: 0;
  }
}

.link-text {
  color: var(--color-text-darker);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-position: under;
  transition: color 0.15s ease-in-out;
}
.link-text:hover {
  color: var(--color-text);
}

.quantity-field {
  --btn-size: 36px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: var(--color-text);
  background: var(--color-bg);
  height: calc(var(--btn-size) + 2px);
  border: 1px solid var(--color-secondary);
}
.quantity-field input[type=number] {
  position: relative;
  z-index: 1;
  flex: none;
  -moz-appearance: textfield;
  appearance: textfield;
  field-sizing: content;
  min-width: min(40px, var(--btn-size));
  height: var(--btn-size);
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.quantity-field input[type=number]:focus, .quantity-field input[type=number]:hover {
  border-color: var(--color-secondary-hover);
}
.quantity-field input[type=number]::-webkit-inner-spin-button, .quantity-field input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quantity-field.with-open-basket input[type=number] {
  margin: 0 -12px 0 -15px;
  min-width: auto;
  padding: 0 15px;
  order: 1;
  text-align: right;
  transition: color 0.15s ease-in-out;
}
.quantity-field .open-basket {
  margin-right: 5px;
  width: fit-content;
  height: 100%;
  order: 2;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease-in-out;
}
.quantity-field .open-basket:focus, .quantity-field .open-basket:hover {
  color: var(--color-primary);
}
.quantity-field .open-basket:focus ~ input[type=number], .quantity-field .open-basket:hover ~ input[type=number] {
  color: var(--color-primary);
}
.quantity-field .adjust {
  --btn-icon: url("https://template-assets.tebex.io/images/plus.svg");
  --btn-icon-size: 10px;
  position: relative;
  z-index: 2;
  flex: none;
}
.quantity-field .adjust.decrease {
  --btn-icon: url("https://template-assets.tebex.io/images/minus.svg");
  margin-right: auto;
  order: -1;
}
.quantity-field .adjust.increase {
  margin-left: auto;
  order: 100;
}

@media (width > 960px) {
  .mobile-only {
    display: none;
  }
}

@media (width <= 960px) {
  .desktop-only {
    display: none;
  }
}

.site {
  display: grid;
  grid-auto-rows: auto 1fr auto;
  grid-template-columns: 100%;
  align-items: start;
  gap: var(--widget-padding);
  min-height: calc(100vh - var(--tebex-footer-height));
  font-size: 14px;
  view-transition-name: site;
}
@media (width > 960px) {
  .site {
    gap: calc(var(--widget-padding) * 2);
  }
}
.page-index.home-categories-enabled .site {
  grid-auto-rows: auto auto 1fr auto;
}

.site-header,
.site-sale-banner,
.site-home-categories,
.site-content,
.site-footer-inner {
  margin: 0 auto;
  padding: 0 var(--content-padding);
  width: 100%;
}
@media (width > 960px) {
  .site-header,
  .site-sale-banner,
  .site-home-categories,
  .site-content,
  .site-footer-inner {
    max-width: var(--content-width);
  }
}

.site-header {
  position: relative;
  z-index: 2;
  view-transition-name: siteHeader;
}

.site-header-inner .user-name {
  contain: paint;
}
.site-header-inner .user-name .text-inner {
  overflow: hidden;
}
.site-header-inner .user-name .text,
.site-header-inner .user-name .text-hover {
  display: block;
  transition: visibility 0.15s ease-in-out, opacity 0.15s ease-in-out;
}
.site-header-inner .user-name .text-hover {
  margin-top: calc(var(--btn-size) * -1);
}
.site-header-inner .user-name:not(:hover):not(:focus-within) .text-hover {
  visibility: hidden;
  opacity: 0;
}
.site-header-inner .user-name:hover .text, .site-header-inner .user-name:focus-within .text {
  visibility: hidden;
  opacity: 0;
}
@media (width <= 960px) {
  .site-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--widget-padding) 0;
    position: relative;
    padding: 110px 0 calc(50px - var(--widget-padding));
    flex-wrap: wrap;
  }
  .site-header-inner .actions {
    position: absolute;
    top: var(--widget-padding);
    left: 0;
    display: flex;
    gap: 6px;
  }
  .site-header-inner .toggle-navigation {
    --btn-icon: url("https://template-assets.tebex.io/images/burger.svg");
  }
  .site-header-inner .log-in,
  .site-header-inner .user-actions {
    position: absolute;
    top: var(--widget-padding);
    right: 0;
  }
  .site-header-inner .user-actions {
    display: flex;
    gap: 12px;
  }
  .site-header-inner .open-basket {
    --btn-icon: url("https://template-assets.tebex.io/images/checkout.svg");
  }
  .site-header-inner .user-name {
    display: none;
  }
  .site-header-inner .site-title {
    width: 100%;
    line-height: 80px;
    font-size: 50px;
    font-weight: 900;
    text-align: center;
  }
  .site-header-inner .site-title img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
  }
  .site-header-inner .info {
    display: block;
    position: relative;
    flex: none;
    width: 50%;
    padding-left: 42px;
    line-height: 18px;
  }
  .site-header-inner .info.discord {
    right: 0;
    left: auto;
    padding-left: 0;
    padding-right: 42px;
    text-align: right;
  }
  .site-header-inner .info .image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
  }
  .site-header-inner .info.discord .image {
    left: auto;
    right: 0;
  }
  .site-header-inner .info .title {
    display: block;
    line-height: 20px;
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
  }
  .site-header-inner .info .action {
    display: block;
    color: var(--color-primary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.15s ease-in-out;
    cursor: pointer;
  }
  .site-header-inner .info:hover .action {
    color: var(--color-primary-hover);
  }
  .site-header-inner .info .value {
    width: fit-content;
    border: 1px solid #606060;
    padding: 0 5px;
    background: rgba(96, 96, 96, 0.5);
    color: #CCC;
    font-size: 12px;
  }
}
@media (width > 960px) {
  .site-header-inner {
    position: relative;
    height: calc(355px - var(--widget-padding) * 2);
  }
  body.is-navigation-horizontal .site-header-inner {
    height: 355px;
  }
  .site-header-inner .actions {
    position: absolute;
    top: var(--widget-padding);
    left: 0;
    display: flex;
    gap: 6px;
  }
  .site-header-inner .toggle-navigation {
    display: none;
  }
  .site-header-inner .log-in,
  .site-header-inner .user-actions {
    position: absolute;
    top: var(--widget-padding);
    right: 0;
  }
  .site-header-inner .user-actions {
    display: flex;
    gap: var(--widget-padding);
  }
  .site-header-inner .open-basket {
    --btn-icon: url("https://template-assets.tebex.io/images/checkout.svg");
  }
  .site-header-inner .user-name {
    --btn-icon: url("https://template-assets.tebex.io/images/user.svg");
  }
  .site-header-inner .site-title {
    position: absolute;
    inset: calc(var(--widget-padding) + 46px) 280px 0 280px;
    margin: auto;
    width: fit-content;
    height: fit-content;
    line-height: 72px;
    font-size: 60px;
    font-weight: 900;
    text-align: center;
  }
  .site-header-inner .site-title img {
    margin: 0 auto;
    max-width: 100%;
    max-height: 128px;
  }
  .site-header-inner .info {
    position: absolute;
    top: calc(var(--widget-padding) + 46px);
    left: 0;
    bottom: 0;
    margin: auto 0;
    max-width: 280px;
    width: 33.3333333333%;
    height: fit-content;
    line-height: 22px;
  }
  .site-header-inner .info.server {
    padding-left: 64px;
  }
  .site-header-inner .info.discord {
    right: 0;
    left: auto;
    padding-right: 82px;
    text-align: right;
  }
  .site-header-inner .info .image {
    position: absolute;
    top: -50px;
    left: 0;
    bottom: -50px;
    margin: auto 0;
    width: 46px;
    height: 46px;
    object-fit: contain;
  }
  .site-header-inner .info.discord .image {
    left: auto;
    right: 0;
    width: 64px;
    height: 64px;
  }
  .site-header-inner .info .title {
    display: block;
    line-height: 28px;
    color: var(--color-text);
    font-size: 18px;
    font-weight: 600;
  }
  .site-header-inner .info .action {
    display: block;
    color: var(--color-primary);
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.15s ease-in-out;
    cursor: pointer;
  }
  .site-header-inner .info:hover .action {
    color: var(--color-primary-hover);
  }
  .site-header-inner .info .value {
    width: fit-content;
    border: 1px solid #606060;
    padding: 0 6px;
    background: rgba(96, 96, 96, 0.5);
    color: #CCC;
    font-size: 16px;
  }
}

.site-sale-banner {
  margin-top: var(--widget-padding);
  margin-bottom: var(--widget-padding);
  padding: var(--widget-padding) var(--content-padding);
  color: var(--color-sale-banner-text);
  background: var(--color-sale-banner-bg);
  font-size: 21px;
  text-align: center;
}

.site-footer {
  background: var(--color-brighter-bg);
}

.site-home-categories {
  display: grid;
  gap: var(--widget-padding);
}
@media (width > 600px) {
  .site-home-categories {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    justify-content: center;
    gap: var(--widget-padding) 36px;
  }
}
.site-home-categories .category {
  display: flex;
  align-items: center;
  gap: var(--widget-padding);
  flex-basis: 100%;
  line-height: 26px;
  font-size: 24px;
  font-weight: 700;
}
@media (width <= 600px) {
  .site-home-categories .category {
    width: 100%;
  }
}
@media (width > 600px) {
  .site-home-categories .category {
    flex-direction: column;
    align-items: center;
    gap: var(--widget-padding);
    text-align: center;
  }
}
.site-home-categories .category .image {
  max-width: 130px;
}
@media (width > 600px) {
  .site-home-categories .category .image {
    margin: auto;
    max-width: 100%;
  }
}
.site-home-categories .category .image-default {
  position: relative;
  width: min(70px, 100%);
  aspect-ratio: 1;
}
@media (width > 960px) {
  .site-home-categories .category .image-default {
    width: min(100px, 100%);
  }
}
.site-home-categories .category .image-default::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background-color: rgb(from var(--color-text) r g b/0.8);
  mask: url("https://template-assets.tebex.io/images/package-default.svg") center center/contain no-repeat;
}

.store-text {
  padding: var(--content-padding);
  line-height: 1.375;
  font-size: 16px;
  font-weight: 400;
}

.store-form {
  font-size: 18px;
}
.store-form h1,
.store-form h2,
.store-form h3,
.store-form h4,
.store-form h5,
.store-form h6,
.store-form p {
  margin-bottom: 24px;
}
.store-form .input-group,
.store-form .field,
.store-form .field-inline {
  margin-bottom: 24px;
}
.store-form .input-group > p,
.store-form .field > p,
.store-form .field-inline > p {
  margin-bottom: 12px;
}
.store-form .field-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 12px;
}
@media (width > 600px) {
  .store-form .field-inline {
    gap: 0 24px;
  }
}
.store-form input,
.store-form select,
.store-form textarea {
  display: block;
}
.store-form input[type=text],
.store-form input[type=password],
.store-form input[type=email],
.store-form input[type=number],
.store-form input[type=search],
.store-form input[type=url],
.store-form input[type=tel],
.store-form input[type=date],
.store-form input[type=time],
.store-form input[type=datetime-local],
.store-form input[type=file],
.store-form input[type=month],
.store-form input[type=week],
.store-form select,
.store-form textarea {
  margin-bottom: 12px;
  width: 100%;
  padding: 14px 12px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  font-size: 14px;
}
.popup .store-form input[type=text],
.popup .store-form input[type=password],
.popup .store-form input[type=email],
.popup .store-form input[type=number],
.popup .store-form input[type=search],
.popup .store-form input[type=url],
.popup .store-form input[type=tel],
.popup .store-form input[type=date],
.popup .store-form input[type=time],
.popup .store-form input[type=datetime-local],
.popup .store-form input[type=file],
.popup .store-form input[type=month],
.popup .store-form input[type=week],
.popup .store-form select,
.popup .store-form textarea {
  background: #242424;
}
.popup.drawer .store-form input[type=text],
.popup.drawer .store-form input[type=password],
.popup.drawer .store-form input[type=email],
.popup.drawer .store-form input[type=number],
.popup.drawer .store-form input[type=search],
.popup.drawer .store-form input[type=url],
.popup.drawer .store-form input[type=tel],
.popup.drawer .store-form input[type=date],
.popup.drawer .store-form input[type=time],
.popup.drawer .store-form input[type=datetime-local],
.popup.drawer .store-form input[type=file],
.popup.drawer .store-form input[type=month],
.popup.drawer .store-form input[type=week],
.popup.drawer .store-form select,
.popup.drawer .store-form textarea {
  user-select: auto;
}
@media (width > 960px) {
  .store-form input[type=text],
  .store-form input[type=password],
  .store-form input[type=email],
  .store-form input[type=number],
  .store-form input[type=search],
  .store-form input[type=url],
  .store-form input[type=tel],
  .store-form input[type=date],
  .store-form input[type=time],
  .store-form input[type=datetime-local],
  .store-form input[type=file],
  .store-form input[type=month],
  .store-form input[type=week],
  .store-form select,
  .store-form textarea {
    padding: 12px;
    font-size: 16px;
  }
}
.store-form .field-inline input,
.store-form .field-inline select,
.store-form .field-inline textarea {
  width: auto;
}
.store-form .actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.store-form .actions .link-text {
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  margin: 0 16px;
}

@media (width <= 960px) {
  .site-content-widgets {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
}
@media (width > 960px) {
  .site-content-widgets {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    align-items: start;
    gap: 48px;
  }
  body.is-sidebar-right .site-content-widgets {
    grid-template-columns: 1fr var(--sidebar-width);
  }
  .site-content-widgets .store-sidebar {
    order: -1;
  }
  body.is-sidebar-right .site-content-widgets .store-sidebar {
    order: 1;
  }
}

.category-description {
  margin-bottom: var(--widget-padding);
  padding: var(--widget-padding);
  line-height: 1.4;
  font-size: 18px;
}

.no-products {
  padding: var(--widget-padding);
  font-size: 18px;
  text-align: center;
}

.store-products-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--widget-padding) / 2);
}

.store-products-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px 36px;
}

.store-product {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: var(--widget-padding);
}
.store-product .product-title {
  font-size: 20px;
  font-weight: 600;
}
.store-product .product-title a {
  color: inherit;
  transition: color 0.15s ease-in-out;
}
.store-product .product-title a:hover {
  color: var(--color-primary);
}
.store-product .product-title .countdown {
  display: block;
  margin-top: 4px;
  color: var(--color-removed);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.store-product .product-title .countdown::before {
  content: "";
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.25em;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: url("https://template-assets.tebex.io/images/countdown.svg") center center/contain no-repeat;
}
.store-product .image-link {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: fit-content;
}
.store-product .image-link:hover ~ .product-title a {
  color: var(--color-primary);
}
.store-product .image {
  margin: 0 auto;
  max-width: 100%;
}
.store-product .image-default {
  position: relative;
  width: 136px;
  aspect-ratio: 1;
}
.store-product .image-default::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(100px, 100%);
  height: min(100px, 100%);
  background-color: rgb(from var(--color-text) r g b/0.8);
  mask: url("https://template-assets.tebex.io/images/package-default.svg") center center/contain no-repeat;
}
.store-product .descr {
  color: var(--color-text-secondary);
}
.store-product .actions {
  display: flex;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.store-product .actions.updating {
  pointer-events: none;
}
.store-product .actions.updating > * {
  opacity: 0.3;
  filter: grayscale(100%);
}
.store-product .actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 30px;
  height: 30px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}
.store-product:not(.store-product-full) .actions {
  flex-wrap: wrap;
}
.store-products-images .store-product:not(.store-product-full) .actions {
  flex: 1 1 auto;
  align-content: flex-end;
}
.store-product .price {
  font-size: 14px;
}
.store-product .price .discount {
  margin-right: 1ch;
  color: var(--color-removed);
  font-weight: 400;
  text-decoration-line: line-through;
}
.store-product .price strong {
  font-size: 20px;
  font-weight: inherit;
}
.store-product:not(.store-product-full) .price {
  width: 100%;
}
.store-products-images .store-product:not(.store-product-full) .price {
  margin-bottom: auto;
}
.store-product .quantity-field {
  --btn-size: 44px;
}
.store-product .half {
  flex: 0 1 calc(50% - 6px);
}
.store-product .wide {
  flex: 1 1 auto;
}
.store-product .gift {
  --btn-icon: url("https://template-assets.tebex.io/images/gift.svg");
  flex: none;
}
.store-product .remove {
  --btn-icon: url("https://template-assets.tebex.io/images/delete.svg");
  flex: none;
}

.store-products-images .store-product {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: subgrid;
}
.store-products-images .store-product .image-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-products-list .store-product {
  padding: calc(var(--widget-padding) * 0.75);
}
.store-products-list .store-product .image {
  width: 60px;
}
.store-products-list .store-product .actions {
  flex-wrap: nowrap;
  align-items: center;
}
.store-products-list .store-product .wide {
  flex: 0 1 auto;
}
.store-products-list .store-product .price {
  width: auto;
}
@media (width <= 600px) {
  .store-products-list .store-product .wide {
    width: 100%;
  }
}
@media (width > 600px) {
  .store-products-list .store-product {
    flex-direction: row;
    align-items: center;
    gap: 12px calc(var(--widget-padding) * 0.75);
  }
  .store-products-list .store-product .actions {
    gap: calc(var(--widget-padding) * 0.75);
  }
  .store-products-list .store-product .actions .wide {
    min-width: 180px;
  }
  .store-products-list .store-product .image-link {
    margin: 0;
  }
  .store-products-list .store-product .product-title {
    margin-right: auto;
  }
}

.media-slider {
  --slider-spacing: 6px;
  --thumbs-size: 40px;
  --thumb-padding: 6px;
  position: relative;
  width: 100%;
  overflow: hidden;
}
@media (width > 360px) {
  .media-slider {
    --slider-spacing: 12px;
    --thumbs-size: 55px;
  }
}
@media (width > 600px) {
  .media-slider {
    --thumbs-size: 70px;
  }
}
@media (width > 960px) {
  .media-slider {
    --thumbs-size: 90px;
  }
}
@media (width > 1400px) {
  .media-slider {
    --thumbs-size: 110px;
  }
}
.media-slider .slider {
  width: 100%;
  min-height: 200px;
  overflow: hidden;
  margin-bottom: var(--slider-spacing);
  background: var(--color-bg);
}
.media-slider .slider::part(container) {
  --swiper-navigation-size: 24px;
  --swiper-theme-color: var(--color-text);
}
.media-slider .slider::part(wrapper) {
  align-items: center;
}
.media-slider .slide {
  align-content: center;
}
.media-slider .slide-image {
  margin: auto;
  max-width: 100%;
  min-height: 200px;
  max-height: 100%;
  padding: var(--slider-spacing);
  object-fit: contain;
}
.media-slider .slide-video {
  position: relative;
  border-radius: 5px;
  background: #000 var(--preview-image) center center/cover no-repeat;
}
.media-slider .slide-frame {
  display: block;
  margin: auto;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.media-slider .slide-frame:not(.iframe-loaded) {
  visibility: hidden;
  opacity: 0;
}
.media-slider .thumbs {
  display: flex;
  gap: var(--slider-spacing);
  align-items: stretch;
  flex-wrap: wrap;
}
.media-slider .thumb {
  display: block;
  width: var(--thumbs-size);
  height: var(--thumbs-size);
  padding: var(--thumb-padding);
  background-color: var(--color-bg);
  cursor: pointer;
}
.media-slider .thumb-image,
.media-slider .thumb-youtube {
  width: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  height: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  transition: opacity 0.3s ease-in-out;
}
.media-slider .thumb:not(.active) .thumb-image,
.media-slider .thumb:not(.active) .thumb-youtube {
  opacity: 0.5;
}
.media-slider .thumb-image {
  object-fit: contain;
}
.media-slider .thumb-youtube {
  position: relative;
  align-content: center;
}
.media-slider .thumb-youtube img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.media-slider .thumb-youtube::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30px;
  height: 30px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/play.svg") center center/contain no-repeat;
}
.media-slider .open-lightbox {
  position: absolute;
  top: var(--slider-spacing);
  right: var(--slider-spacing);
  z-index: 2;
  align-content: center;
  width: 40px;
  height: 40px;
  backdrop-filter: blur(5px);
  visibility: hidden;
  line-height: 0;
  font-size: 0;
  color: transparent;
  opacity: 0;
  transition: all 0.15s ease-in-out;
}
.media-slider .open-lightbox:hover, .media-slider .open-lightbox:focus {
  background-color: rgba(255, 255, 255, 0.1);
}
.media-slider .open-lightbox::before {
  content: "";
  display: block;
  margin: auto;
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--color-tertiary-text);
  mask: url("https://template-assets.tebex.io/images/fullscreen.svg") center center/contain no-repeat;
  transition: background-color 0.15s ease-in-out;
}
.media-slider .open-lightbox:hover::before, .media-slider .open-lightbox:focus::before {
  background-color: var(--color-tertiary-text-hover);
}
.media-slider .slider:has(.swiper-slide-active .slide-image):hover ~ .open-lightbox,
.media-slider .open-lightbox:hover {
  opacity: 1;
  visibility: visible;
}

.popup.popup-media-slider {
  --slider-spacing: 6px;
  --thumbs-size: 40px;
  --thumb-padding: 6px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: minmax(0, auto) calc(var(--thumbs-size) + var(--slider-spacing));
  overflow: hidden;
  backdrop-filter: blur(10px);
}
@media (width > 360px) {
  .popup.popup-media-slider {
    --slider-spacing: 12px;
    --thumbs-size: 70px;
  }
}
@media (width > 600px) {
  .popup.popup-media-slider {
    --thumbs-size: 70px;
  }
}
@media (width > 960px) {
  .popup.popup-media-slider {
    --thumbs-size: 90px;
  }
}
@media (width > 1400px) {
  .popup.popup-media-slider {
    --thumbs-size: 120px;
  }
}
.popup.popup-media-slider .popup-close {
  top: var(--slider-spacing);
  right: var(--slider-spacing);
  z-index: 2;
  backdrop-filter: blur(5px);
}
.popup.popup-media-slider .slider {
  width: 100%;
}
.popup.popup-media-slider .slider::part(container) {
  --swiper-navigation-size: 30px;
  --swiper-theme-color: var(--color-text);
}
@media (width > 600px) {
  .popup.popup-media-slider .slider::part(container) {
    --swiper-navigation-size: 36px;
  }
}
.popup.popup-media-slider .slider::part(wrapper) {
  align-items: center;
}
.popup.popup-media-slider .slide {
  align-content: center;
  padding: var(--slider-spacing);
}
.popup.popup-media-slider .slide-image {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.popup.popup-media-slider .slide-video {
  position: relative;
  border-radius: 5px;
  background: #000 var(--preview-image) center center/cover no-repeat;
}
.popup.popup-media-slider .slide-frame {
  display: block;
  margin: auto;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16/9;
  transition: visibility 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.popup.popup-media-slider .slide-frame:not(.iframe-loaded) {
  visibility: hidden;
  opacity: 0;
}
.popup.popup-media-slider .thumbs {
  display: flex;
  gap: var(--slider-spacing);
  align-items: stretch;
  flex-wrap: wrap;
  padding: 0 var(--slider-spacing) var(--slider-spacing);
}
.popup.popup-media-slider .thumb {
  display: block;
  width: var(--thumbs-size);
  height: var(--thumbs-size);
  padding: var(--thumb-padding);
  background-color: rgb(from var(--color-bg) r g b/0.7);
  cursor: pointer;
}
.popup.popup-media-slider .thumb-image,
.popup.popup-media-slider .thumb-youtube {
  width: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  height: calc(var(--thumbs-size) - var(--thumb-padding) * 2);
  transition: opacity 0.3s ease-in-out;
}
.popup.popup-media-slider .thumb:not(.active) .thumb-image,
.popup.popup-media-slider .thumb:not(.active) .thumb-youtube {
  opacity: 0.5;
}
.popup.popup-media-slider .thumb-image {
  object-fit: contain;
}
.popup.popup-media-slider .thumb-youtube {
  position: relative;
  align-content: center;
}
.popup.popup-media-slider .thumb-youtube img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.popup.popup-media-slider .thumb-youtube::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/play.svg") center center/contain no-repeat;
}

.store-product-full {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--widget-padding);
}
.store-product-full, .store-product-full.popup-content {
  padding-bottom: 0;
}
.store-product-full .product-title {
  font-size: 30px;
}
.store-product-full .image {
  max-width: 100%;
}
.store-product-full .actions {
  position: sticky !important;
  bottom: 0;
  z-index: 2;
  align-items: center;
  order: 0;
  margin: 0 calc(var(--widget-padding) * -1);
  padding: var(--widget-padding);
  background-color: rgb(from var(--color-brighter-bg) r g b/0.65);
  backdrop-filter: blur(5px);
}
.store-product-full .actions .half,
.store-product-full .actions .wide {
  flex: 0 1 240px;
}
.store-product-full .price {
  margin-right: auto;
}

.page-package .store-product-full:not(.ls-rank-package) > .image {
  justify-self: center;
  width: min(100%, 560px);
  max-height: 340px;
  object-fit: contain;
}

.page-package .ls-keyall-product-package > .ls-keyall-product-art {
  width: min(100%, 560px);
  max-height: 560px;
  aspect-ratio: 1;
  border: 1px solid rgb(72 160 178 / 24%);
  border-radius: 8px;
  object-fit: cover;
  box-shadow:
    inset 0 -6px 0 rgb(72 223 242 / 16%),
    0 18px 36px rgb(36 58 34 / 14%);
}

html[data-ls-theme="dark"] .page-package .ls-keyall-product-package > .ls-keyall-product-art {
  border-color: rgb(125 225 237 / 24%);
  box-shadow:
    inset 0 -6px 0 rgb(125 225 237 / 14%),
    0 18px 36px rgb(0 0 0 / 28%);
}

.ls-rank-package-hero {
  --ls-rank-package-accent: #79c981;
  --ls-rank-package-accent-soft: rgb(121 201 129 / 18%);
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 0.82fr) minmax(320px, 1.18fr);
  align-items: center;
  min-height: 430px;
  border: 1px solid rgb(62 117 66 / 22%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 253 244 / 98%) 0%, rgb(237 250 237 / 94%) 48%, rgb(229 248 251 / 92%) 100%);
  box-shadow:
    inset 0 -6px 0 var(--ls-rank-package-accent-soft),
    0 18px 38px rgb(36 58 34 / 12%);
  overflow: hidden;
}

.ls-rank-package-elite .ls-rank-package-hero {
  --ls-rank-package-accent: #8a6bc4;
  --ls-rank-package-accent-soft: rgb(138 107 196 / 18%);
  background:
    linear-gradient(135deg, rgb(255 253 244 / 98%) 0%, rgb(235 247 255 / 96%) 48%, rgb(246 235 255 / 94%) 100%);
}

.ls-rank-package-supreme .ls-rank-package-hero {
  --ls-rank-package-accent: #f4bf2a;
  --ls-rank-package-accent-soft: rgb(244 191 42 / 22%);
  background:
    linear-gradient(135deg, rgb(255 253 244 / 98%) 0%, rgb(255 247 211 / 96%) 48%, rgb(237 247 255 / 94%) 100%);
}

.ls-rank-package-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--ls-rank-package-accent);
}

.ls-rank-package-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg, transparent 0 38%, rgb(255 255 255 / 0.64) 48%, transparent 58% 100%);
  transform: translateX(-125%);
  pointer-events: none;
  animation: ls-rank-package-glimmer 7s ease-in-out infinite;
}

.ls-rank-package-visual,
.ls-rank-package-copy {
  position: relative;
  z-index: 1;
}

.ls-rank-package-visual {
  display: grid;
  place-items: center;
  align-self: stretch;
  min-height: 430px;
  padding: clamp(28px, 5vw, 54px);
  background:
    radial-gradient(circle at 50% 48%, var(--ls-rank-package-accent-soft) 0 38%, transparent 70%);
}

.ls-rank-package-visual::before,
.ls-rank-package-visual::after {
  content: "";
  position: absolute;
  border: 1px solid var(--ls-rank-package-accent);
  border-radius: 50%;
  opacity: 0.18;
}

.ls-rank-package-visual::before {
  width: min(76%, 300px);
  aspect-ratio: 1;
}

.ls-rank-package-visual::after {
  width: min(58%, 230px);
  aspect-ratio: 1;
  opacity: 0.1;
}

.ls-rank-package-visual img {
  position: relative;
  z-index: 1;
  width: min(310px, 92%);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 22px rgb(36 58 34 / 22%))
    drop-shadow(0 0 18px var(--ls-rank-package-accent-soft));
  animation: ls-bob 4.8s ease-in-out infinite;
}

.ls-rank-package-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: clamp(30px, 5vw, 64px) clamp(28px, 5vw, 70px) clamp(30px, 5vw, 64px) 16px;
}

.ls-rank-package-copy .ls-store-kicker {
  margin: 0;
  color: var(--ls-green-deep);
}

.ls-rank-package-copy .product-title {
  margin: 0;
  color: var(--ls-text);
  font-size: clamp(42px, 6vw, 68px);
  line-height: 1;
}

.ls-rank-package-summary {
  max-width: 48ch;
  margin: 0;
  color: var(--ls-text-muted);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.45;
}

.ls-rank-package .ls-rank-package-hero .actions {
  position: static !important;
  display: grid;
  grid-template-columns: minmax(116px, auto) minmax(150px, 240px) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin: 8px 0 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
}

.ls-rank-package .ls-rank-package-hero .gift {
  align-self: stretch;
  min-width: 54px;
  min-height: 60px;
}

.ls-rank-package .ls-rank-package-hero .price {
  margin: 0;
  color: var(--ls-text);
  font-size: clamp(22px, 3vw, 31px);
  font-weight: 900;
  line-height: 1.1;
}

.ls-rank-package .ls-rank-package-hero .price .discount {
  display: block;
  margin-bottom: 4px;
  color: var(--ls-text-muted);
  font-size: 15px;
  font-weight: 700;
}

.ls-rank-package .ls-rank-package-hero .add,
.ls-rank-package .ls-rank-package-hero .subscribe,
.ls-rank-package .ls-rank-package-hero .open-basket-cta {
  width: 100%;
  min-height: 60px;
  border: 1px solid rgb(62 117 66 / 24%);
  background: var(--ls-rank-package-accent) !important;
  color: #172214 !important;
  box-shadow:
    inset 0 -5px 0 rgb(36 58 34 / 18%),
    0 12px 24px var(--ls-rank-package-accent-soft);
  font-size: 18px;
  font-weight: 900;
}

.ls-rank-package-elite .ls-rank-package-hero .add,
.ls-rank-package-elite .ls-rank-package-hero .subscribe,
.ls-rank-package-elite .ls-rank-package-hero .open-basket-cta {
  color: #ffffff !important;
}

.ls-rank-package .ls-rank-package-hero .add:hover,
.ls-rank-package .ls-rank-package-hero .subscribe:hover,
.ls-rank-package .ls-rank-package-hero .open-basket-cta:hover {
  filter: brightness(1.06) saturate(1.08);
  transform: translateY(-2px);
}

.ls-rank-package > .descr {
  border-top: 1px solid var(--ls-border);
  padding-top: clamp(22px, 3vw, 36px);
}

html[data-ls-theme="dark"] .ls-rank-package-hero {
  border-color: rgb(223 244 196 / 14%);
  background: linear-gradient(135deg, #17251b 0%, #172a30 52%, #242135 100%);
  box-shadow: 0 18px 38px rgb(0 0 0 / 26%);
}

html[data-ls-theme="dark"] .ls-rank-package-copy .ls-store-kicker,
html[data-ls-theme="dark"] .ls-rank-package-copy .product-title {
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-rank-package-summary {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-rank-package .ls-rank-package-hero .price {
  color: #f7fff4;
}

@keyframes ls-rank-package-glimmer {
  0%,
  58% {
    transform: translateX(-125%);
  }

  78%,
  100% {
    transform: translateX(125%);
  }
}

@media (width <= 760px) {
  .ls-rank-package-hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .ls-rank-package-visual {
    min-height: 238px;
    padding: 28px 24px 12px;
  }

  .ls-rank-package-visual img {
    width: min(210px, 72vw);
  }

  .ls-rank-package-copy {
    padding: 16px 22px 30px;
  }

  .ls-rank-package-copy .product-title {
    font-size: clamp(38px, 12vw, 54px);
  }

  .ls-rank-package .ls-rank-package-hero .actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ls-rank-package .ls-rank-package-hero .price {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  .ls-rank-package .ls-rank-package-hero .add,
  .ls-rank-package .ls-rank-package-hero .subscribe,
  .ls-rank-package .ls-rank-package-hero .open-basket-cta,
  .ls-rank-package .ls-rank-package-hero .quantity-field {
    width: 100%;
  }
}

.store-product-full .descr,
.store-product-full .package-description-scroll {
  min-width: 0;
  max-width: 100%;
}

.store-product-full .package-description-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll > div:has(table) {
  border-color: rgb(220 235 215 / 16%) !important;
  background: #17251b !important;
  color: #dce9da !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll > div:has(table) > div {
  border-color: rgb(220 235 215 / 16%) !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll > div:has(table) > div > div:first-child {
  color: #f7fff4 !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll > div:has(table) > div > div:last-child {
  color: #b8c8b7 !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll table {
  color: #dce9da !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll tbody tr {
  background: #18261b !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll tbody tr:nth-child(even) {
  background: #1d2e21 !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll tbody tr:has(td[colspan]) {
  background: #24452e !important;
}

html[data-ls-theme="dark"] .page-package .package-description-scroll tbody td[colspan] {
  color: #a8e2b4 !important;
}

.store-product-options .product-title {
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 600;
}
.store-product-options .actions {
  position: sticky !important;
  bottom: var(--widget-padding);
  justify-content: start;
  width: fit-content;
  max-width: 100%;
}
.store-product-options .actions.updating {
  pointer-events: none;
}
.store-product-options .actions.updating > * {
  opacity: 0.3;
  filter: grayscale(100%);
}
.store-product-options .actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 30px;
  height: 30px;
  background: url("https://template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
}
.store-product-options .actions .btn-primary,
.store-product-options .actions .btn-secondary,
.store-product-options .actions .btn-tertiary {
  width: 230px;
}
.store-product-options .actions-multiple {
  width: auto;
}
.store-product-options .actions-multiple .btn-primary,
.store-product-options .actions-multiple .btn-secondary,
.store-product-options .actions-multiple .btn-tertiary {
  width: auto;
  flex: 1 1 auto;
}

.site-navigation {
  --fade-duration: 200ms;
  view-transition-name: siteNavigation;
}
@media (width <= 960px) {
  .site-navigation {
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 0;
    transition: display var(--fade-duration) allow-discrete, opacity var(--fade-duration) ease;
  }
  @starting-style {
    .site-navigation {
      opacity: 0;
    }
  }
  body:not(.show-navigation) .site-navigation {
    visibility: hidden;
    opacity: 0;
  }
  .site-navigation.drawer {
    user-select: none;
  }
  .site-navigation .close-navigation {
    --btn-icon: url("https://template-assets.tebex.io/images/close.svg");
    --btn-icon-size: 24px;
    position: absolute;
    top: 12px;
    right: 72px;
  }
  .site-navigation .menu {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0 60px 0 0;
    padding: 72px var(--widget-padding) var(--widget-padding);
    background: var(--color-bg);
    line-height: 24px;
    color: var(--color-text-secondary);
    font-size: 18px;
    overflow: hidden auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-secondary) var(--color-bg);
    transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease, translate var(--fade-duration) ease;
  }
  @starting-style {
    .site-navigation .menu {
      translate: -100% 0;
    }
  }
  .site-navigation.drawer .menu::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 7px;
    bottom: 0;
    margin-block: auto;
    width: 4px;
    height: 100px;
    background: rgb(from var(--color-text-secondary) r g b/0.33);
    border-radius: 2px;
    pointer-events: none;
  }
  body:not(.show-navigation) .site-navigation .menu {
    translate: -100% 0;
  }
  .site-navigation.touching .menu {
    transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease;
  }
  body:not(.show-navigation) .site-navigation .menu {
    opacity: 0.8;
    scale: 0.95;
  }
  .site-navigation.may-close .menu {
    opacity: 0.8;
  }
  .site-navigation ul ul {
    padding-left: var(--widget-padding);
    line-height: 22px;
    font-size: 16px;
  }
  .site-navigation li {
    position: relative;
    width: 100%;
  }
  .site-navigation .log-out {
    margin-top: auto;
  }
  .site-navigation .log-out a {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .site-navigation .log-out a::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask: url("https://template-assets.tebex.io/images/log-out.svg") center center no-repeat;
    mask-size: contain;
  }
  .site-navigation .has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .site-navigation .has-children > a {
    flex: 1 1 auto;
  }
  .site-navigation .has-children .toggle {
    --btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
    --btn-icon-size: 20px;
  }
  .site-navigation .has-children .toggle::before {
    transition: rotate 0.15s ease-in-out;
  }
  .site-navigation .has-children.expanded > .toggle::before {
    rotate: 180deg;
  }
  .site-navigation .has-children > ul {
    width: 100%;
  }
  .site-navigation .has-children:not(.expanded) > ul {
    display: none;
  }
  .site-navigation a {
    display: block;
    padding: 11px 0;
    transition: color 0.15s ease-in-out;
  }
  .site-navigation a:hover {
    color: var(--color-primary);
  }
  .site-navigation a.active {
    color: var(--color-primary);
    font-weight: 700;
  }
  .site-navigation ul ul a {
    padding: 8px 0;
  }
}

@media (width > 960px) {
  .navigation-horizontal .close-navigation {
    display: none;
  }
  .navigation-horizontal .menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: calc(var(--widget-padding) / 2);
    line-height: 28px;
    background: var(--color-brighter-bg);
    font-size: 18px;
    font-weight: 700;
  }
  .navigation-horizontal .menu > li > a {
    padding: 14px calc(var(--widget-padding) / 2);
  }
  .navigation-horizontal .menu > li.has-children > a {
    padding-right: 0;
  }
  .navigation-horizontal ul ul {
    line-height: 24px;
    font-size: 16px;
    font-weight: 400;
  }
  .navigation-horizontal > ul > li > a {
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 18ch;
  }
  .navigation-horizontal .has-children {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .navigation-horizontal .has-children .toggle {
    --btn-size: 28px;
    --btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
    --btn-icon-size: 20px;
    flex: none;
  }
  .navigation-horizontal .has-children .toggle::before {
    transition: rotate 0.15s ease-in-out;
  }
  .navigation-horizontal .has-children:hover > .toggle::before {
    rotate: 180deg;
  }
  .navigation-horizontal .has-children > ul {
    position: absolute;
    top: calc(100% - var(--widget-padding) / 2);
    left: 0;
    width: max-content;
    padding: calc(var(--widget-padding) / 2) 0;
    background: rgb(from var(--color-brighter-bg) r g b/0.7);
    backdrop-filter: blur(10px);
    transition: all 0.15s ease-in-out;
  }
  .navigation-horizontal .has-children:not(:hover) > ul {
    visibility: hidden;
    opacity: 0;
    translate: 0 -10px;
  }
  .navigation-horizontal a {
    display: block;
    transition: color 0.15s ease-in-out;
  }
  .navigation-horizontal a:hover, .navigation-horizontal a.link-active {
    color: var(--color-primary);
  }
  .navigation-horizontal li li a {
    width: 100%;
    max-width: 24ch;
    padding: 4px calc(var(--widget-padding) / 2);
    transition: all 0.15s ease-in-out;
  }
  .navigation-horizontal li li a:hover, .navigation-horizontal li li a.link-active {
    color: var(--color-bg) !important;
    background-color: var(--color-primary) !important;
  }
}

@media (width > 960px) {
  .navigation-vertical.widget {
    padding: calc(var(--widget-padding) / 2);
  }
  .navigation-vertical .close-navigation {
    display: none;
  }
  .navigation-vertical .menu {
    line-height: 28px;
    color: var(--color-text-secondary);
    font-size: 18px;
    font-weight: 400;
  }
  .navigation-vertical ul ul {
    padding-left: 12px;
    line-height: 22px;
    font-size: 15px;
  }
  .navigation-vertical .has-children {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .navigation-vertical .has-children > a {
    flex: 1 1 auto;
    max-width: calc(100% - 46px);
  }
  .navigation-vertical .has-children .toggle {
    --btn-icon: url("https://template-assets.tebex.io/images/chevron.svg");
    --btn-icon-size: 20px;
    flex: none;
  }
  .navigation-vertical .has-children .toggle::before {
    transition: rotate 0.15s ease-in-out;
  }
  .navigation-vertical .has-children.expanded > .toggle::before {
    rotate: 180deg;
  }
  .navigation-vertical .has-children > ul {
    width: 100%;
  }
  .navigation-vertical .has-children:not(.expanded) > ul {
    display: none;
  }
  .navigation-vertical a {
    display: block;
    padding: calc(var(--widget-padding) / 2);
    transition: color 0.15s ease-in-out;
  }
  .navigation-vertical a:hover, .navigation-vertical a.link-active {
    color: var(--color-primary);
  }
  .navigation-vertical a.link-active {
    font-weight: 600;
  }
  .navigation-vertical ul ul a {
    padding: 8px calc(var(--widget-padding) / 2);
  }
}

.widget {
  padding: var(--widget-padding);
}
.widget + .widget {
  margin-top: var(--widget-padding);
}

.widget-title {
  margin-bottom: var(--widget-padding);
  font-size: 20px;
  font-weight: 700;
}

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

.widget-gift-card {
  text-align: center;
}
.widget-gift-card .gift-card-input {
  margin-bottom: 12px;
  width: 100%;
  padding: 14px 12px;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  font-size: 14px;
}
.popup .widget-gift-card .gift-card-input {
  background: #242424;
}
.widget-gift-card .check {
  width: 100%;
}

.widget-recent .purchase {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.4;
}
.widget-recent .avatar {
  flex: none;
  max-width: 40px;
  max-height: 40px;
  object-fit: contain;
}
.widget-recent .username {
  font-weight: 700;
}
.widget-recent .empty {
  text-align: center;
}
.widget-recent time {
  opacity: 0.5;
  font-size: 0.9em;
}
.widget-recent .sep {
  margin: 0 0.3em;
}

.widget-top-donator .avatar {
  margin: 0 auto 12px;
  width: 96px;
}
.widget-top-donator .username {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 18px;
}
.widget-top-donator .empty {
  text-align: center;
}

.widget-community-goal .widget-content,
.widget-goal .widget-content {
  text-align: center;
}
.widget-community-goal p:not(:last-child),
.widget-goal p:not(:last-child) {
  margin-bottom: 12px;
}
.widget-community-goal .progress,
.widget-goal .progress {
  height: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  background: var(--color-bg);
}
@keyframes progressBarAnimation {
  to {
    background-position: 100% 0;
  }
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  height: 12px;
  background: var(--color-primary);
}
.widget-community-goal .progress-bar.striped,
.widget-goal .progress-bar.striped {
  background: var(--color-primary) linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary) 33%, rgb(from var(--color-primary-hover) r g b/0.35) 33%, rgb(from var(--color-primary-hover) r g b/0.35) 66%, var(--color-primary) 66%, var(--color-primary) 100%) repeat;
  background-size: 24px 100%;
}
.widget-community-goal .progress-bar.striped.animated,
.widget-goal .progress-bar.striped.animated {
  animation: progressBarAnimation 10s infinite linear;
}

.widget-community-goal .goal-image {
  margin: 0 auto 12px;
  max-width: 96px;
}
.widget-community-goal .descr {
  margin-bottom: 12px;
}

.widget-server-status .widget-content {
  text-align: center;
}
.widget-server-status h6 {
  margin-bottom: 12px;
}

.site-footer-inner {
  position: relative;
  padding: 20px var(--content-padding);
}
@media (width <= 960px) {
  .site-footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--widget-padding);
  }
}
.site-footer-inner .site-footer-nav {
  line-height: 150%;
  font-size: 14px;
}
@media (width > 960px) {
  .site-footer-inner .site-footer-nav {
    margin-bottom: 12px;
  }
}
.site-footer-inner .site-footer-nav ul {
  display: flex;
}
@media (width <= 960px) {
  .site-footer-inner .site-footer-nav ul {
    flex-direction: column;
    gap: var(--widget-padding);
    text-align: center;
  }
}
@media (width > 960px) {
  .site-footer-inner .site-footer-nav ul {
    gap: calc(var(--widget-padding) * 2);
  }
}
.site-footer-inner .site-footer-nav a {
  color: var(--color-text-darker);
  text-decoration-line: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease-in-out;
}
.site-footer-inner .site-footer-nav a:hover {
  color: var(--color-primary);
}
.site-footer-inner .copyright {
  line-height: 16px;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.site-footer-inner .we-accept {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media (width > 960px) {
  .site-footer-inner .we-accept {
    position: absolute;
    top: 0;
    right: var(--content-padding);
    bottom: 0;
    pointer-events: none;
  }
}
.site-footer-inner .we-accept li {
  display: block;
}
.site-footer-inner .we-accept img {
  display: block;
  max-width: 57px;
  max-height: 26px;
}

.site-footer-credit {
  color: var(--color-text-secondary);
  background: #101010;
  font-size: 11px;
}
.site-footer-credit .site-footer-credit-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
  gap: 22px;
  margin: auto;
  padding-top: 16px;
  padding-bottom: 16px;
  min-height: 45px;
}
@media (width > 960px) {
  .site-footer-credit .site-footer-credit-inner {
    align-items: center;
    flex-direction: row;
  }
}
.site-footer-credit .copyright {
  display: flex;
  align-items: flex-start;
  gap: 22px;
}
@media (width > 960px) {
  .site-footer-credit .copyright {
    align-items: center;
  }
}
.site-footer-credit .copyright .tebex-logo-link {
  flex: none;
}
.site-footer-credit .legal {
  display: flex;
  gap: 16px;
  white-space: nowrap;
}
@media (width > 960px) {
  .site-footer-credit .legal {
    gap: 20px;
  }
}
.site-footer-credit .legal a {
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s ease-in-out;
}
.site-footer-credit .legal a:hover {
  color: var(--color-primary);
}

.popup {
  --fade-duration: 300ms;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 1000;
  overflow: hidden scroll;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) transparent;
  background-color: rgba(0, 0, 0, 0.8);
  transition: background-color var(--fade-duration) ease, opacity var(--fade-duration) ease-in-out, display var(--fade-duration) allow-discrete;
}
@starting-style {
  .popup {
    opacity: 0;
  }
}
.popup.drawer {
  user-select: none;
}
.popup.may-close {
  user-select: none;
  background-color: rgba(0, 0, 0, 0.4);
}
.popup[hidden] {
  opacity: 0;
  display: none;
}

.popup-scroll-cont {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: calc(var(--content-padding) / 2);
  overscroll-behavior: none;
}
@media (width > 600px) {
  .popup-scroll-cont {
    padding: var(--content-padding);
  }
}
@media (pointer: coarse) {
  .popup .popup-scroll-cont {
    align-items: flex-end;
    padding-bottom: 0;
  }
}

.popup-content {
  position: relative;
  width: 100%;
  max-width: 550px;
  padding: var(--widget-padding);
  background: var(--color-brighter-bg);
  transition: translate var(--fade-duration) ease, opacity var(--fade-duration) ease;
}
@starting-style {
  .popup-content {
    translate: 0 20px;
  }
}
@media (pointer: coarse) {
  .popup-content {
    padding-bottom: calc(var(--widget-padding) * 2);
  }
}
.popup.touching .popup-content {
  transition: opacity var(--fade-duration) ease, scale var(--fade-duration) ease;
}
.popup.may-close .popup-content, .popup.drawer[hidden] .popup-content {
  opacity: 0.8;
  scale: 0.95;
}
.popup.drawer-up[hidden] .popup-content {
  translate: 0 -100%;
}
.popup.drawer-down[hidden] .popup-content {
  translate: 0 100%;
}
.popup.drawer-right[hidden] .popup-content {
  translate: 100% 0;
}
.popup.drawer-left[hidden] .popup-content {
  translate: -100% 0;
}
.popup:not(.drawer)[hidden] .popup-content {
  translate: 0 20px;
}
.popup.popup-loading .popup-content {
  min-height: 180px;
}
.popup.popup-loading .popup-content::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}
.drawer-up .popup-content::after, .drawer-down .popup-content::after, .drawer-left .popup-content::after, .drawer-right .popup-content::after {
  content: "";
  display: block;
  position: absolute;
  background: rgb(from var(--color-text-secondary) r g b/0.33);
  border-radius: 2px;
  pointer-events: none;
}
.drawer-up .popup-content::after, .drawer-down .popup-content::after {
  left: 0;
  right: 0;
  margin-inline: auto;
  height: 4px;
  width: 100px;
}
.drawer-up .popup-content::after {
  bottom: 7px;
}
.drawer-down .popup-content::after {
  top: 7px;
}
.drawer-left .popup-content::after, .drawer-right .popup-content::after {
  top: 0;
  bottom: 0;
  margin-block: auto;
  width: 4px;
  height: 100px;
}
.drawer-left .popup-content::after {
  right: 7px;
}
.drawer-right .popup-content::after {
  left: 7px;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0.5;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: all 0.15s ease-in-out;
}
.popup-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/close.svg") center center/20px no-repeat;
}
@media (width <= 600px) {
  .popup-close {
    width: 50px;
    height: 50px;
  }
  .popup-close::before {
    mask-size: 24px;
  }
}
.popup-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.store-product-popup-content {
  max-width: 800px;
}

.product-options-popup .popup-content {
  max-width: 480px;
}

.gift-form-popup .popup-content h1, .gift-form-popup .popup-content h2, .gift-form-popup .popup-content h3, .gift-form-popup .popup-content h4, .gift-form-popup .popup-content h5, .gift-form-popup .popup-content h6 {
  margin-bottom: 12px;
}
.gift-form-popup .popup-content .btn-primary {
  width: 240px;
}
.gift-form-popup .popup-content .actions {
  position: relative;
  width: fit-content;
  max-width: 100%;
}
.gift-form-popup .popup-content .actions.updating {
  pointer-events: none;
}
.gift-form-popup .popup-content .actions.updating > * {
  opacity: 0.3;
  filter: grayscale(100%);
}
.gift-form-popup .popup-content .actions.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 30px;
  height: 30px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}

.login-popup {
  z-index: 1002;
}

.login-popup-content {
  max-width: 480px;
  padding-bottom: calc(var(--widget-padding) - 12px);
}

.basket {
  position: relative;
  z-index: 1001;
}
.site-content .basket {
  display: none;
}
.basket .basket-empty {
  margin: auto;
  text-align: center;
  font-size: 18px;
}

.basket .basket-empty h3 {
  margin: 0;
  color: var(--ls-text);
  font-size: 28px;
  font-weight: 900;
}

.basket .basket-empty p {
  max-width: 32ch;
  margin: 10px auto 0;
  color: var(--ls-text-muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.basket-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.basket-empty-actions .btn-primary,
.basket-empty-actions .btn-secondary {
  justify-content: center;
  min-width: 145px;
}

.basket-empty-actions .btn-secondary {
  background: #e9f6dc;
  color: var(--ls-text);
}
.basket .basket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 50px var(--content-padding) 30px;
  font-size: 22px;
  font-weight: 600;
  background: rgba(40, 40, 40, 0.5);
}
@media (width > 960px) {
  .basket .basket-header {
    padding-top: 70px;
  }
}
.basket .basket-title {
  display: flex;
  align-items: center;
  gap: 12px;
  text-transform: uppercase;
}
.basket .basket-title::before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/user.svg") center center no-repeat;
  mask-size: contain;
}
.basket .basket-second-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px var(--content-padding);
  background: var(--color-brighter-bg);
  background: rgb(from var(--color-brighter-bg) r g b/0.9);
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}
.basket .basket-second-header .total {
  font-size: 14px;
}
.basket .basket-second-header .total strong {
  font-size: 18px;
  font-weight: inherit;
}
.basket .basket-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
.basket .basket-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: var(--widget-padding);
}
.basket .basket-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: var(--widget-padding);
  background: var(--color-brighter-bg);
}
.basket .basket-item .info {
  margin-right: auto;
}
.basket .basket-item .options {
  list-style-position: inside;
}
.basket .basket-item .options:has(li) {
  padding: 5px 0;
}
.basket .basket-item .options li {
  display: block;
  padding: 1px 0;
}
.basket .basket-item .options li::before {
  content: "";
  display: inline-block;
  margin-right: 0.4em;
  width: 3px;
  height: 3px;
  vertical-align: middle;
  background-color: currentColor;
  border-radius: 50%;
}
.basket .basket-item .title {
  font-size: 20px;
  font-weight: 600;
}
.basket .basket-item .price {
  color: var(--color-primary);
  font-size: 14px;
}
.basket .basket-item .price strong {
  font-size: 18px;
  font-weight: inherit;
}
.basket .basket-item .quantity-field {
  --btn-size: 38px;
}
.basket .basket-item .remove {
  --btn-size: 40px;
  --btn-icon: url("https://template-assets.tebex.io/images/delete.svg");
  --btn-icon-size: 24px;
  flex: none;
}
.basket .basket-checkout {
  margin-top: auto;
  padding: 0 var(--content-padding) 50px;
}
@media (width > 960px) {
  .basket .basket-checkout {
    padding-bottom: 100px;
  }
}
.basket .basket-checkout h3 {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--widget-padding);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
}
.basket .basket-checkout .total {
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 400;
}
.basket .basket-checkout .total strong {
  font-size: 24px;
  font-weight: inherit;
}
.basket .basket-checkout .checkout {
  width: 100%;
}

.basket-popup .popup-scroll-cont {
  justify-content: flex-end;
  padding: 0;
}

.basket-popup-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 520px;
  height: 100vh;
  height: 100dvh;
  padding: 0;
  background: var(--color-bg);
  transition: translate var(--fade-duration) ease-in-out;
}
@starting-style {
  .basket-popup-content {
    translate: 100% 0;
  }
}
:root .basket-popup[hidden] .basket-popup-content {
  translate: 100% 0;
}
.basket-popup-content.updating {
  pointer-events: none;
}
.basket-popup-content.updating::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 10;
  margin: auto;
  width: 38px;
  height: 38px;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/loading.svg") center center/contain no-repeat;
}
.basket-popup-content.updating > * {
  filter: grayscale(100%);
}

.toaster {
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  position: fixed;
  bottom: var(--widget-padding);
  left: 0;
  right: 0;
  z-index: 10000;
  margin: 0 auto;
  padding: 0 var(--widget-padding);
  width: 100%;
  height: 100%;
  max-width: 520px;
  pointer-events: none;
}
.toaster:empty {
  display: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 50px;
  padding: 0 8px 0 24px;
  background: var(--color-brighter-bg);
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
@starting-style {
  .toast {
    opacity: 0;
    height: 0;
  }
}
.toast[hidden] {
  display: block;
  opacity: 0;
  height: 0;
}
.toast.toast-warning {
  background: #cab600;
}
.toast.toast-error {
  background: #C12E2E;
}
.toast.toast-success {
  background: #4caf50;
}

.toast-close {
  margin-left: auto;
  flex: none;
  width: 30px;
  height: 30px;
  opacity: 0.5;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.toast-close::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  mask: url("https://template-assets.tebex.io/images/close.svg") center center/20px no-repeat;
}
.toast-close:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
}

.store-category-tiered {
  --gap: calc(var(--widget-padding) * .75);
  padding: var(--widget-padding);
}

.store-category-tiered-header {
  margin-bottom: var(--widget-padding);
  font-size: 18px;
}
.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,
.store-category-tiered-header p {
  margin-bottom: 24px;
}

.store-products-tiered {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: var(--gap);
}

.store-product-tiered {
  --border-color: rgb(from var(--color-text) r g b / .1);
  --primary-color: rgb(from var(--color-primary) r g b / .25);
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  gap: var(--gap);
  padding: var(--gap);
}
.store-product-tiered.store-product-cta {
  background-image: linear-gradient(to bottom, transparent 67%, var(--primary-color));
}
.store-product-tiered .image {
  margin: auto;
  max-width: 100%;
  object-fit: contain;
}
.store-product-tiered .product-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}
.store-product-tiered .countdown {
  display: block;
  margin-top: 4px;
  color: var(--color-removed);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.store-product-tiered .countdown::before {
  content: "";
  display: inline-block;
  vertical-align: -0.15em;
  margin-right: 0.25em;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  mask: url("https://template-assets.tebex.io/images/countdown.svg") center center/contain no-repeat;
}
.store-product-tiered .descr {
  padding-block: var(--gap);
  border-block: 1px solid var(--border-color);
  color: var(--color-text-secondary);
}
.store-product-tiered .price {
  font-size: 14px;
  text-align: center;
}
.store-product-tiered .price .discount {
  margin-right: 1ch;
  color: var(--color-removed);
  font-weight: 400;
  text-decoration-line: line-through;
}
.store-product-tiered .price strong {
  font-size: 20px;
  font-weight: inherit;
}
.store-product-tiered .actions {
  gap: var(--gap);
}
.store-product-tiered .actions .wide {
  width: 100%;
}

.store-quote {
  padding: var(--widget-padding);
}
.store-quote .wide {
  flex: 1 1 50%;
}

:root {
  --color-text: #223422;
  --color-text-darker: #38533a;
  --color-text-secondary: #5f705d;
  --color-text-dark: #182719;
  --color-bg: #f6f4e8;
  --color-brighter-bg: #fffdf4;
  --color-primary: #f4bf2a;
  --color-primary-hover: #2f6a3d;
  --color-primary-text: #172214;
  --color-primary-text-hover: #ffffff;
  --color-secondary: #d9ead2;
  --color-secondary-hover: #c9e4ef;
  --color-secondary-text: #223422;
  --color-secondary-text-hover: #223422;
  --color-tertiary-hover: rgb(47 106 61 / 12%);
  --color-tertiary-text: #2f6a3d;
  --color-tertiary-text-hover: #172214;
  --color-removed: #b94331;
  --color-sale-banner-bg: #2f6a3d;
  --color-sale-banner-text: #ffffff;
  --content-inner-width: 1180px;
}

html {
  scrollbar-color: #8aaf88 var(--color-bg);
}

body {
  background: linear-gradient(180deg, #f6f4e8 0%, #eef4e8 55%, #f8fbf6 100%);
  color: var(--color-text);
  font-family: "Lato", sans-serif;
}

.site {
  gap: 24px;
}

.site-header {
  padding-top: 16px;
}

.site-header-inner {
  overflow: hidden;
  border: 1px solid rgb(47 106 61 / 14%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 253 244 / 98%) 0%, rgb(239 249 233 / 94%) 56%, rgb(201 228 239 / 84%) 100%),
    var(--color-brighter-bg);
  box-shadow: 0 18px 44px rgb(36 58 34 / 10%);
}

.site-header-inner .site-title {
  color: #2f6a3d;
}

.site-header-inner .site-title img {
  filter: drop-shadow(0 8px 12px rgb(36 58 34 / 14%));
}

.site-header-inner .info .title,
.site-header-inner .info .action {
  color: var(--color-text);
}

.site-header-inner .info .action {
  color: #2f6a3d;
}

.site-navigation .menu,
.navigation-horizontal .menu {
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: rgb(255 253 244 / 92%);
  box-shadow: 0 10px 24px rgb(36 58 34 / 9%);
}

.navigation-horizontal .menu {
  gap: 4px;
}

.site-navigation a,
.navigation-horizontal a {
  color: #314831;
}

.site-navigation a:hover,
.navigation-horizontal a:hover,
.navigation-horizontal a.link-active {
  color: #2f6a3d;
}

.navigation-horizontal .menu > li > a {
  border-radius: 6px;
}

.navigation-horizontal .menu > li > a:hover,
.navigation-horizontal .menu > li > a.link-active {
  background: rgb(47 106 61 / 10%);
}

.ls-store-hero,
.ls-section-heading,
.site-home-categories,
.site-content,
.site-footer-inner {
  margin-inline: auto;
  padding-inline: var(--content-padding);
  width: 100%;
}

@media (width > 960px) {
  .ls-store-hero,
  .ls-section-heading,
  .site-home-categories,
  .site-content,
  .site-footer-inner {
    max-width: var(--content-width);
  }
}

.ls-store-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (width > 820px) {
  .ls-store-hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.75fr);
    align-items: stretch;
  }
}

.ls-store-hero-copy,
.ls-store-quicklinks,
.ls-store-home-summary,
.ls-category-intro,
.store-product,
.widget {
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: rgb(255 253 244 / 94%);
  box-shadow: 0 12px 30px rgb(36 58 34 / 8%);
}

.ls-store-hero-copy {
  padding: 28px;
}

.ls-store-kicker {
  margin-bottom: 10px;
  color: #2f6a3d;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ls-store-hero h2,
.ls-section-heading h3,
.ls-store-home-summary h3,
.ls-category-intro h1 {
  color: #2f6a3d;
  line-height: 1.05;
  font-weight: 900;
}

.ls-store-hero h2 {
  max-width: 14ch;
  font-size: 44px;
}

.ls-store-hero-copy > p:not(.ls-store-kicker) {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--color-text-secondary);
  line-height: 1.6;
  font-size: 17px;
}

.ls-store-actions,
.ls-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ls-store-actions {
  margin-top: 22px;
}

.ls-store-actions .btn-primary,
.ls-store-actions .btn-secondary,
.ls-store-actions .btn-tertiary {
  width: auto;
  min-width: 142px;
  justify-content: center;
  text-align: center;
}

.ls-store-quicklinks {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ls-store-quicklinks a,
.ls-link-row a {
  display: block;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: #f1f7ed;
  color: #2f6a3d;
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.ls-store-quicklinks a {
  padding: 16px;
}

.ls-store-quicklinks a:hover,
.ls-link-row a:hover {
  border-color: rgb(244 191 42 / 70%);
  background: #fff8d7;
  transform: translateY(-1px);
}

.ls-store-quicklinks span {
  display: block;
  margin-bottom: 4px;
  color: #6a7665;
  font-size: 13px;
}

.ls-store-quicklinks strong {
  display: block;
  color: #223422;
  font-size: 20px;
}

.ls-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.ls-section-heading p {
  color: #6a7665;
  font-weight: 700;
}

.ls-section-heading h3 {
  font-size: 28px;
}

.site-home-categories {
  gap: 14px;
}

.site-home-categories .category {
  min-height: 160px;
  justify-content: center;
  padding: 18px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: rgb(255 253 244 / 94%);
  color: #223422;
  box-shadow: 0 12px 30px rgb(36 58 34 / 8%);
  transition: border-color 0.15s ease-in-out, transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.site-home-categories .category:hover {
  border-color: rgb(244 191 42 / 70%);
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgb(36 58 34 / 12%);
}

.site-home-categories .category .image {
  max-height: 86px;
  object-fit: contain;
}

.store-text,
.category-description {
  color: var(--color-text-secondary);
}

.ls-store-home-summary,
.ls-category-intro {
  padding: 22px;
  line-height: 1.55;
}

.ls-store-home-summary h3,
.ls-category-intro h1 {
  margin-bottom: 8px;
  font-size: 28px;
}

.ls-store-home-summary p,
.ls-category-intro p:not(.ls-store-kicker) {
  max-width: 72ch;
}

.ls-link-row {
  margin-top: 16px;
}

.ls-link-row a {
  padding: 10px 12px;
  font-weight: 800;
}

.store-products-images {
  gap: 18px;
}

.store-product {
  overflow: hidden;
}

.store-product .product-title {
  color: #223422;
  font-weight: 900;
}

.store-product .image {
  max-height: 140px;
  object-fit: contain;
}

.store-product .price strong {
  color: #2f6a3d;
  font-weight: 900;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 8px;
  font-weight: 900;
}

.btn-primary {
  box-shadow: 0 4px 0 rgb(114 84 10 / 28%);
}

.btn-primary:hover {
  box-shadow: 0 4px 0 rgb(31 75 42 / 30%);
}

.site-footer {
  border-top: 1px solid rgb(47 106 61 / 12%);
  background: #fffdf4;
}

.site-footer-inner {
  gap: 16px;
}

.site-footer-inner .site-footer-nav ul {
  flex-wrap: wrap;
}

.site-footer-inner .site-footer-nav a {
  color: #2f6a3d;
}

.site-footer-inner .copyright {
  color: #6a7665;
}

@media (width <= 960px) {
  .site-header-inner {
    padding-top: 84px;
    padding-bottom: 30px;
  }

  .site-navigation .menu {
    background: #fffdf4;
  }
}

@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 235px;
  }

  .site-header-inner .site-title {
    inset: calc(var(--widget-padding) + 30px) 240px 0 240px;
  }

  .site-header-inner .site-title img {
    max-height: 118px;
  }
}

@media (width <= 600px) {
  .ls-store-hero-copy,
  .ls-store-home-summary,
  .ls-category-intro {
    padding: 18px;
  }

  .ls-store-hero h2 {
    max-width: none;
    font-size: 34px;
  }

  .ls-store-actions .btn-primary,
  .ls-store-actions .btn-secondary,
  .ls-store-actions .btn-tertiary {
    width: 100%;
  }

  .ls-section-heading {
    display: block;
  }

  .site-home-categories .category {
    min-height: 110px;
  }
}

.ls-ranks-page,
.ls-rank-upgrades-page {
  display: grid;
  gap: 18px;
}

.ls-ranks-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #fff9dd 0%, #f0fbef 48%, #dff4ff 100%);
  box-shadow: 0 14px 34px rgb(36 58 34 / 9%);
}

.ls-ranks-hero h2 {
  max-width: 15ch;
  color: #2f6a3d;
  line-height: 1.03;
  font-size: 44px;
  font-weight: 900;
}

.ls-ranks-hero p:not(.ls-store-kicker) {
  margin-top: 12px;
  max-width: 62ch;
  color: #52624f;
  line-height: 1.55;
  font-size: 17px;
}

.ls-ranks-help {
  flex: none;
  padding: 12px 14px;
  border: 1px solid rgb(47 106 61 / 18%);
  border-radius: 8px;
  background: #ffffff;
  color: #2f6a3d;
  font-weight: 900;
  box-shadow: 0 4px 0 rgb(47 106 61 / 12%);
}

.ls-rank-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.ls-rank-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid rgb(47 106 61 / 13%);
  border-radius: 8px;
  background: #fffdf4;
  box-shadow: 0 14px 32px rgb(36 58 34 / 10%);
}

.ls-rank-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: #2f6a3d;
}

.ls-rank-card-member::before {
  background: #52b86a;
}

.ls-rank-card-elite::before {
  background: #39a7e0;
}

.ls-rank-card-supreme::before {
  background: #f4bf2a;
}

.ls-rank-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ls-rank-label {
  display: inline-flex;
  width: fit-content;
  padding: 8px 10px;
  border-radius: 999px;
  background: #fff3bd;
  color: #5c4310;
  line-height: 1;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-rank-card-elite .ls-rank-label {
  background: #dff4ff;
  color: #155978;
}

.ls-rank-card-supreme .ls-rank-label {
  background: #e9f6dc;
  color: #2f6a3d;
}

.ls-rank-image {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.ls-rank-image-default {
  position: relative;
}

.ls-rank-image-default::before {
  content: "";
  display: block;
  width: 72px;
  height: 72px;
  background: #2f6a3d;
  mask: url("https://template-assets.tebex.io/images/package-default.svg") center center/contain no-repeat;
}

.ls-rank-card h3 {
  color: #223422;
  line-height: 1;
  font-size: 34px;
  font-weight: 900;
}

.ls-rank-summary {
  color: #52624f;
  line-height: 1.5;
}

.ls-rank-mini-perks {
  display: grid;
  gap: 8px;
  align-content: start;
}

.ls-rank-mini-perks li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #263c28;
  font-weight: 800;
}

.ls-rank-mini-perks li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #52b86a;
  box-shadow: 0 0 0 4px rgb(82 184 106 / 14%);
}

.ls-rank-card .product-actions {
  align-self: end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  overflow: visible;
}

.ls-rank-card .product-actions .price {
  width: 100%;
  margin: 0;
  color: #2f6a3d;
  font-size: 15px;
  font-weight: 800;
}

.ls-rank-card .product-actions .price strong {
  display: block;
  margin-top: 2px;
  color: #172214;
  font-size: 28px;
  font-weight: 900;
}

.ls-rank-card .product-actions .wide,
.ls-rank-card .product-actions .half,
.ls-rank-card .product-actions .gift {
  width: 100%;
  min-width: 0;
}

.ls-rank-card .product-actions .add,
.ls-rank-card .product-actions .subscribe {
  justify-content: center;
  background: #f4bf2a !important;
  color: #172214 !important;
  text-align: center;
  box-shadow: 0 4px 0 rgb(114 84 10 / 28%);
}

.ls-rank-card .product-actions .add:hover,
.ls-rank-card .product-actions .subscribe:hover {
  background: #2f6a3d !important;
  color: #ffffff !important;
  box-shadow: 0 4px 0 rgb(31 75 42 / 30%);
}

.ls-rank-compare {
  padding: 20px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: rgb(255 253 244 / 96%);
  box-shadow: 0 14px 34px rgb(36 58 34 / 8%);
}

.ls-rank-compare header {
  margin-bottom: 14px;
}

.ls-rank-compare h1 {
  color: #2f6a3d;
  font-size: 30px;
  font-weight: 900;
}

.ls-rank-table-wrap {
  overflow-x: auto;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
}

.ls-rank-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  background: #ffffff;
}

.ls-rank-table th,
.ls-rank-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgb(47 106 61 / 10%);
  text-align: center;
  vertical-align: middle;
}

.ls-rank-table th:first-child,
.ls-rank-table td:first-child {
  text-align: left;
}

.ls-rank-table thead th {
  background: #fff3bd;
  color: #172214;
  font-weight: 900;
}

.ls-rank-table thead th:nth-child(3) {
  background: #dff4ff;
}

.ls-rank-table thead th:nth-child(4) {
  background: #e9f6dc;
}

.ls-rank-table tbody td:not(:first-child) {
  color: #263c28;
  font-weight: 800;
}

.ls-rank-group th {
  padding: 10px 16px;
  background: #f1f7ed;
  color: #2f6a3d;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

@media (width <= 900px) {
  .ls-rank-cards {
    grid-template-columns: 1fr;
  }

  .ls-ranks-hero {
    display: block;
  }

  .ls-ranks-help {
    display: inline-flex;
    margin-top: 16px;
  }
}

@media (width <= 600px) {
  .ls-ranks-hero,
  .ls-rank-card,
  .ls-rank-compare {
    padding: 16px;
  }

  .ls-ranks-hero h2 {
    max-width: none;
    font-size: 34px;
  }

  .ls-rank-card h3 {
    font-size: 30px;
  }
}

.site-header {
  z-index: 40;
}

.site-header-inner .ls-store-banner-title {
  line-height: 0;
}

.site-header-inner .ls-store-banner-title a {
  display: block;
}

.site-header-inner .ls-store-banner-title img {
  width: 100%;
  object-fit: contain;
  border-radius: 6px;
  filter: drop-shadow(0 12px 16px rgb(36 58 34 / 14%));
}

.site-navigation {
  position: sticky;
  top: 0;
  z-index: 90;
  margin: -8px auto 0;
  padding: 0 var(--content-padding);
  width: 100%;
  max-width: var(--content-width);
}

.site-header-inner .toggle-navigation,
.site-navigation .close-navigation {
  display: none !important;
}

.site-navigation .menu,
.navigation-horizontal .menu {
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-color: rgb(47 106 61 / 16%);
  background: rgb(255 253 244 / 94%);
  backdrop-filter: blur(12px);
}

.navigation-horizontal .menu > li > a,
.site-navigation a {
  border-radius: 7px;
  color: #223422;
  font-weight: 900;
}

.navigation-horizontal .menu > li > a:hover,
.navigation-horizontal .menu > li > a.link-active,
.site-navigation a:hover {
  background: #fff3bd;
  color: #1f572e;
  box-shadow: 0 0 0 3px rgb(244 191 42 / 18%);
}

.ls-rank-shop {
  display: grid;
  gap: 14px;
}

.ls-rank-upgrade-hero {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgb(244 191 42 / 42%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 248 215 / 98%) 0%, rgb(240 251 239 / 96%) 46%, rgb(223 244 255 / 92%) 100%);
  box-shadow:
    0 16px 34px rgb(36 58 34 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
}

.ls-rank-upgrade-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 0) 0 36%, rgb(255 255 255 / 48%) 48%, rgb(255 255 255 / 0) 62%),
    repeating-linear-gradient(90deg, rgb(47 106 61 / 0) 0 24px, rgb(47 106 61 / 5%) 24px 28px);
  transform: translateX(-64%);
  pointer-events: none;
  animation: ls-sheen 8s ease-in-out infinite;
}

.ls-rank-upgrade-hero > * {
  position: relative;
  z-index: 1;
}

.ls-rank-upgrade-hero h1 {
  max-width: 15ch;
  color: #2f6a3d;
  font-size: 42px;
  font-weight: 900;
  line-height: 1.03;
}

.ls-rank-upgrade-hero p:not(.ls-store-kicker) {
  max-width: 62ch;
  margin-top: 10px;
  color: #52624f;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
}

.ls-rank-upgrade-compare {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 12px 15px;
  border-radius: 8px;
  background: #f4bf2a;
  color: #172214;
  font-weight: 900;
  box-shadow:
    0 4px 0 rgb(114 84 10 / 30%),
    0 0 0 4px rgb(244 191 42 / 18%);
}

.ls-rank-upgrade-cards {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.ls-rank-upgrade-card {
  background:
    linear-gradient(145deg, rgb(255 253 244 / 98%) 0%, rgb(255 248 215 / 88%) 48%, rgb(223 244 255 / 82%) 100%);
}

.ls-rank-upgrade-card::before {
  background: linear-gradient(90deg, #52b86a, #f4bf2a, #39a7e0);
}

.ls-rank-upgrade-card .ls-rank-label {
  background: #dff4ff;
  color: #155978;
  box-shadow: 0 0 0 4px rgb(57 167 224 / 14%);
}

.ls-rank-shop-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.ls-rank-shop-head h3 {
  color: #2f6a3d;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.05;
}

.ls-rank-compare header p:not(.ls-store-kicker) {
  margin-top: 6px;
  color: #52624f;
  font-weight: 700;
  line-height: 1.45;
}

.ls-rank-table {
  min-width: 920px;
}

.ls-rank-table tbody tr:not(.ls-rank-group):hover td {
  background: rgb(255 243 189 / 28%);
}

.ls-rank-mini-perks .ls-rank-more {
  width: fit-content;
  margin-top: 2px;
  padding: 6px 9px 6px 6px;
  border: 1px solid rgb(244 191 42 / 42%);
  border-radius: 999px;
  background: #fff8d7;
  color: #5c4310;
  font-size: 13px;
  font-weight: 900;
}

.ls-rank-mini-perks .ls-rank-more::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f4bf2a;
  color: #172214;
  box-shadow: 0 0 0 4px rgb(244 191 42 / 18%);
}

@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 250px;
  }

  .site-header-inner .ls-store-banner-title {
    inset: calc(var(--widget-padding) + 22px) 170px auto 170px;
    width: auto;
    max-width: 870px;
  }

  .site-header-inner .ls-store-banner-title img {
    max-height: 132px;
  }
}

@media (width <= 960px) {
  .site-header {
    padding-top: 12px;
  }

  .site-header-inner {
    padding-top: 116px;
    padding-bottom: 26px;
  }

  .site-header-inner .ls-store-banner-title img {
    max-height: 104px;
  }

  .site-navigation {
    position: sticky !important;
    inset: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: -10px;
    padding: 0 var(--content-padding);
    transition: none;
  }

  .site-navigation .menu {
    position: static !important;
    inset: auto !important;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    width: 100%;
    padding: 8px;
    line-height: 1;
    font-size: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
  }

  .site-navigation .menu::-webkit-scrollbar {
    display: none;
  }

  .site-navigation li {
    flex: 0 0 auto;
    width: auto;
  }

  .site-navigation a {
    padding: 10px 12px;
    white-space: nowrap;
  }

  .site-navigation .has-children .toggle,
  .site-navigation .has-children > ul {
    display: none !important;
  }
}

@media (width <= 600px) {
  .site-header-inner {
    padding-top: 100px;
  }

  .site-header-inner .ls-store-banner-title img {
    max-height: 86px;
  }

  .ls-rank-shop-head {
    display: block;
  }

  .ls-rank-shop-head h3 {
    font-size: 26px;
  }
}

.site {
  gap: 18px;
}

.site-header {
  padding-top: 6px;
}

.site-header-inner {
  position: relative;
}

.site-header-inner::after {
  content: "";
  position: absolute;
  inset: auto -12% 0;
  height: 42px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 20px, rgb(255 255 255 / 42%) 20px 26px, rgb(255 255 255 / 0) 26px 44px);
  opacity: 0.32;
  pointer-events: none;
  animation: ls-drift 12s linear infinite;
}

.site-navigation {
  margin-top: -12px;
}

.site-navigation .menu,
.navigation-horizontal .menu {
  border-color: rgb(244 191 42 / 42%);
  background:
    linear-gradient(90deg, rgb(255 253 244 / 96%), rgb(240 251 239 / 96%)),
    #fffdf4;
  box-shadow: 0 12px 26px rgb(36 58 34 / 12%);
}

.navigation-horizontal .menu > li > a,
.site-navigation a {
  position: relative;
}

.navigation-horizontal .menu > li > a::after,
.site-navigation a::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 7px;
  left: 12px;
  height: 3px;
  border-radius: 999px;
  background: #f4bf2a;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.16s ease-in-out;
}

.navigation-horizontal .menu > li > a:hover::after,
.navigation-horizontal .menu > li > a.link-active::after,
.site-navigation a:hover::after {
  transform: scaleX(1);
}

.ls-store-hero-copy {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background:
    linear-gradient(135deg, rgb(255 253 244 / 96%) 0%, rgb(239 249 233 / 95%) 54%, rgb(223 244 255 / 92%) 100%);
}

.ls-store-hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgb(255 255 255 / 0) 0 35%, rgb(255 255 255 / 46%) 48%, rgb(255 255 255 / 0) 62%),
    repeating-linear-gradient(0deg, rgb(47 106 61 / 0) 0 18px, rgb(47 106 61 / 5%) 18px 20px);
  opacity: 0.58;
  transform: translateX(-60%);
  pointer-events: none;
  animation: ls-sheen 8s ease-in-out infinite;
}

.ls-store-hero-copy > * {
  position: relative;
  z-index: 1;
}

.ls-store-hero h2 {
  max-width: 13ch;
}

.page-index .ls-store-actions .btn-tertiary {
  border-color: rgb(47 106 61 / 22%);
  background: #ffffff;
}

.page-index .site-content-widgets.ls-home-lower {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.page-index .ls-home-lower .store-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
  width: 100%;
}

.page-index .ls-home-lower .store-sidebar .widget {
  margin-top: 0;
}

.page-index .ls-home-lower .widget-recent {
  grid-column: 1 / -1;
  padding: 16px;
  background:
    linear-gradient(135deg, #fff8d7 0%, #f0fbef 46%, #ffffff 100%);
}

.ls-widget-subtitle {
  margin: -10px 0 12px;
  color: #5b6c56;
  font-size: 14px;
  font-weight: 800;
}

.page-index .widget-recent .purchases {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(178px, 1fr);
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.page-index .widget-recent .purchase {
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: rgb(255 253 244 / 92%);
  box-shadow: 0 8px 20px rgb(36 58 34 / 7%);
}

.page-index .widget-recent .avatar {
  width: 36px;
  height: 36px;
}

.page-index .widget-recent .info {
  min-width: 0;
}

.page-index .widget-recent .username,
.page-index .widget-recent p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-index .widget-recent time {
  display: none;
}

.ls-store-home-summary {
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgb(255 253 244 / 96%), rgb(239 249 233 / 92%));
}

.ls-store-home-summary h3 {
  font-size: 24px;
}

.ls-ranks-hero,
.ls-rank-compare,
.ls-rank-card {
  position: relative;
}

.ls-ranks-hero {
  overflow: hidden;
  background:
    linear-gradient(135deg, #fff3bd 0%, #f0fbef 44%, #dff4ff 100%);
}

.ls-ranks-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgb(255 255 255 / 0) 0 42%, rgb(255 255 255 / 48%) 50%, rgb(255 255 255 / 0) 58%);
  transform: translateX(-65%);
  pointer-events: none;
  animation: ls-sheen 9s ease-in-out infinite;
}

.ls-ranks-hero > * {
  position: relative;
  z-index: 1;
}

.ls-ranks-help {
  background: #f4bf2a;
  color: #172214;
  box-shadow: 0 4px 0 rgb(114 84 10 / 28%);
}

.ls-rank-spotlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ls-rank-spotlights div {
  padding: 14px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #fff8d7);
  box-shadow: 0 8px 18px rgb(36 58 34 / 7%);
}

.ls-rank-spotlights div:nth-child(2) {
  background: linear-gradient(180deg, #ffffff, #dff4ff);
}

.ls-rank-spotlights div:nth-child(3) {
  border-color: rgb(244 191 42 / 42%);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 96%) 0%, rgb(255 241 161 / 82%) 52%, rgb(236 214 255 / 76%) 100%);
  box-shadow: 0 10px 24px rgb(114 84 10 / 13%);
}

.ls-rank-spotlights span {
  display: block;
  margin-bottom: 4px;
  color: #2f6a3d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-rank-spotlights strong {
  display: block;
  color: #172214;
  font-size: 18px;
  font-weight: 900;
}

.ls-rank-spotlights p {
  margin-top: 6px;
  color: #52624f;
  line-height: 1.35;
  font-size: 14px;
  font-weight: 700;
}

.ls-rank-table-wrap {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%);
}

.ls-rank-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-block: 16px;
}

.ls-rank-table thead th:first-child {
  background: #f5f1e8;
  color: #3b4938;
}

.ls-rank-table thead th:nth-child(2) {
  background: #e9f6dc;
  color: #1f572e;
}

.ls-rank-table thead th:nth-child(3) {
  background: #dff4ff;
  color: #155978;
}

.ls-rank-table thead th:nth-child(4) {
  background:
    linear-gradient(135deg, #ffe27a 0%, #fff7cf 42%, #e8d2ff 100%);
  color: #4b2761;
  box-shadow: inset 0 -3px 0 rgb(244 191 42 / 55%);
}

.ls-rank-table thead th span,
.ls-rank-table thead th small {
  display: block;
}

.ls-rank-table thead th span {
  font-size: 19px;
}

.ls-rank-table thead th small {
  margin-top: 3px;
  color: currentColor;
  opacity: 0.78;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-yes,
.ls-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.ls-yes {
  background: #e9f6dc;
  color: #1f572e;
  box-shadow: 0 0 0 3px rgb(82 184 106 / 12%);
}

.ls-no {
  min-width: 34px;
  background: #f3eee5;
  color: #837867;
}

.ls-rank-card {
  transition: transform 0.18s ease-in-out, box-shadow 0.18s ease-in-out, border-color 0.18s ease-in-out;
}

.ls-rank-card:hover {
  border-color: rgb(244 191 42 / 64%);
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgb(36 58 34 / 14%);
}

.ls-rank-card-elite {
  border-color: rgb(57 167 224 / 30%);
}

.ls-rank-card-elite .ls-rank-label {
  box-shadow: 0 0 0 4px rgb(57 167 224 / 14%);
}

.ls-rank-card-supreme {
  border-color: rgb(244 191 42 / 72%);
  background:
    linear-gradient(145deg, rgb(255 253 244 / 98%) 0%, rgb(255 244 184 / 88%) 48%, rgb(239 223 255 / 86%) 100%);
  box-shadow:
    0 18px 38px rgb(114 84 10 / 16%),
    0 0 0 4px rgb(244 191 42 / 12%);
}

.ls-rank-card-supreme::after {
  content: "";
  position: absolute;
  inset: 7px 0 auto;
  height: 62px;
  background: linear-gradient(100deg, rgb(255 255 255 / 0) 0 36%, rgb(255 255 255 / 58%) 48%, rgb(255 255 255 / 0) 62%);
  transform: translateX(-70%);
  pointer-events: none;
  animation: ls-sheen 7s ease-in-out infinite;
}

.ls-rank-card-supreme .ls-rank-label {
  background: #ffe27a;
  color: #4b2761;
  box-shadow:
    0 0 0 4px rgb(244 191 42 / 18%),
    0 8px 18px rgb(114 84 10 / 14%);
}

.ls-rank-card-supreme .product-actions .add,
.ls-rank-card-supreme .product-actions .subscribe {
  background: #ffe27a !important;
  color: #3b2446 !important;
  box-shadow:
    0 4px 0 rgb(114 84 10 / 34%),
    0 0 0 4px rgb(244 191 42 / 18%);
}

.ls-rank-card-supreme .product-actions .add:hover,
.ls-rank-card-supreme .product-actions .subscribe:hover {
  background: #6f3fa0 !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 0 rgb(53 31 75 / 36%),
    0 0 0 4px rgb(111 63 160 / 18%);
}

.ls-rank-image {
  animation: ls-bob 4.8s ease-in-out infinite;
}

.site-home-categories .category .image {
  transition: transform 0.18s ease-in-out;
}

.site-home-categories .category:hover .image {
  transform: translateY(-3px) scale(1.04);
}

@keyframes ls-sheen {
  0%,
  44% {
    transform: translateX(-70%);
  }

  70%,
  100% {
    transform: translateX(70%);
  }
}

@keyframes ls-drift {
  from {
    transform: translateX(-8%);
  }

  to {
    transform: translateX(8%);
  }
}

@keyframes ls-bob {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 218px;
  }

  .site-header-inner .ls-store-banner-title {
    inset: calc(var(--widget-padding) + 8px) 170px auto 170px;
    max-width: 840px;
  }

  .site-header-inner .ls-store-banner-title img {
    max-height: 116px;
  }
}

@media (width <= 820px) {
  .ls-rank-spotlights {
    grid-template-columns: 1fr;
  }
}

@media (width <= 600px) {
  .site-header {
    padding-top: 4px;
  }

  .site-header-inner {
    padding-top: 88px;
    padding-bottom: 20px;
  }

  .site-header-inner .ls-store-banner-title img {
    max-height: 76px;
  }

  .ls-store-hero-copy {
    min-height: 0;
  }

  .page-index .widget-recent .purchases {
    grid-auto-columns: minmax(165px, 76%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header-inner::after,
  .ls-store-hero-copy::before,
  .ls-ranks-hero::after,
  .ls-rank-card-supreme::after,
  .ls-rank-image {
    animation: none;
  }

  .ls-rank-card,
  .site-home-categories .category,
  .site-home-categories .category .image,
  .site-navigation a::after,
  .navigation-horizontal .menu > li > a::after {
    transition: none;
  }
}

.ls-category-intro-cosmetics {
  background:
    linear-gradient(135deg, rgb(255 253 244 / 96%) 0%, rgb(223 244 255 / 92%) 48%, rgb(255 239 250 / 90%) 100%),
    #fffdf4;
}

.ls-category-intro-keyall {
  background:
    linear-gradient(135deg, rgb(255 248 215 / 98%) 0%, rgb(240 251 239 / 94%) 54%, rgb(255 253 244 / 96%) 100%),
    #fffdf4;
}

.ls-category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: -4px;
  margin-bottom: 16px;
}

.ls-category-pills a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid rgb(47 106 61 / 14%);
  border-radius: 999px;
  background: #ffffff;
  color: #2f6a3d;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgb(36 58 34 / 7%);
  transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.ls-category-pills a:hover,
.ls-category-pills a.active {
  border-color: rgb(244 191 42 / 68%);
  background: #fff8d7;
  color: #172214;
  transform: translateY(-1px);
}

.ls-cosmetics-hub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.ls-cosmetics-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  min-height: 304px;
  padding: 0 16px 16px;
  overflow: hidden;
  border: 1px solid rgb(47 106 61 / 13%);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 99%) 0%, rgb(223 244 255 / 82%) 52%, rgb(255 239 250 / 78%) 100%);
  color: #223422;
  text-decoration: none;
  box-shadow:
    0 14px 30px rgb(36 58 34 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 80%);
  transition: transform 0.16s ease-in-out, border-color 0.16s ease-in-out, box-shadow 0.16s ease-in-out;
}

.ls-cosmetics-card:nth-child(2) {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 98%) 0%, rgb(255 248 215 / 90%) 48%, rgb(240 251 239 / 86%) 100%);
}

.ls-cosmetics-card:nth-child(3) {
  background:
    linear-gradient(145deg, rgb(255 255 255 / 98%) 0%, rgb(255 239 250 / 88%) 48%, rgb(223 244 255 / 86%) 100%);
}

.ls-cosmetics-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, #39a7e0, #f4bf2a, #e88ad3);
  z-index: 1;
}

.ls-cosmetics-card::after {
  content: "";
  position: absolute;
  inset: 6px 0 auto;
  height: 78px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0) 0 20px, rgb(255 255 255 / 48%) 20px 24px, rgb(255 255 255 / 0) 24px 40px);
  opacity: 0.28;
  pointer-events: none;
}

.ls-cosmetics-card:hover {
  border-color: rgb(244 191 42 / 68%);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgb(36 58 34 / 14%);
}

.ls-cosmetics-card-media {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 142px;
  margin: 6px -16px 8px;
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgb(255 248 215 / 80%) 0%, rgb(223 244 255 / 76%) 100%);
}

.ls-cosmetics-card:nth-child(2) .ls-cosmetics-card-media {
  background:
    linear-gradient(135deg, rgb(255 253 244 / 88%) 0%, rgb(240 251 239 / 82%) 100%);
}

.ls-cosmetics-card:nth-child(3) .ls-cosmetics-card-media {
  background:
    linear-gradient(135deg, rgb(255 239 250 / 84%) 0%, rgb(223 244 255 / 80%) 100%);
}

.ls-cosmetics-card-media img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 126px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgb(36 58 34 / 16%));
  transition: transform 0.16s ease-in-out;
}

.ls-cosmetics-card:hover .ls-cosmetics-card-media img,
.ls-cosmetics-card:hover .ls-cosmetics-card-visual,
.ls-cosmetics-card:hover .ls-cosmetics-card-icon {
  transform: translateY(-3px) scale(1.05);
}

.ls-cosmetics-card-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 118px;
  transition: transform 0.16s ease-in-out;
}

.ls-cosmetics-card-visual-tags {
  align-content: center;
  gap: 8px;
}

.ls-cosmetics-card-visual-tags span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, 176px);
  min-height: 30px;
  padding: 6px 9px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 7px;
  background: rgb(255 255 255 / 88%);
  color: #263c28;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgb(36 58 34 / 8%);
}

.ls-cosmetics-card-visual-tags b {
  flex: none;
  color: #2f6a3d;
  font-size: 12px;
}

.ls-cosmetics-card-visual-balloons {
  grid-template-columns: repeat(3, 42px);
  align-items: end;
  justify-content: center;
  gap: 12px;
  min-height: 122px;
}

.ls-cosmetics-card-visual-balloons span {
  position: relative;
  width: 42px;
  height: 56px;
  border: 2px solid rgb(23 34 20 / 10%);
  border-radius: 999px 999px 999px 7px;
  background: #39a7e0;
  box-shadow: 0 10px 18px rgb(36 58 34 / 13%);
  transform: rotate(-6deg);
}

.ls-cosmetics-card-visual-balloons span::after {
  content: "";
  position: absolute;
  top: 54px;
  left: 19px;
  width: 2px;
  height: 38px;
  background: rgb(47 106 61 / 34%);
}

.ls-cosmetics-card-visual-balloons span:nth-child(2) {
  height: 68px;
  background: #f4bf2a;
  transform: translateY(-10px) rotate(4deg);
}

.ls-cosmetics-card-visual-balloons span:nth-child(3) {
  background: #e88ad3;
  transform: rotate(7deg);
}

.ls-cosmetics-card-visual-wearables {
  width: 128px;
  height: 120px;
  min-height: 120px;
}

.ls-cosmetics-card-visual-wearables span {
  position: absolute;
  display: block;
  border: 2px solid rgb(23 34 20 / 10%);
  box-shadow: 0 10px 18px rgb(36 58 34 / 11%);
}

.ls-wearable-head {
  z-index: 2;
  top: 12px;
  left: 39px;
  width: 50px;
  height: 42px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #f4bf2a 0 20%, #2f6a3d 20% 44%, #f7d0a9 44% 100%);
}

.ls-wearable-body {
  z-index: 1;
  top: 52px;
  left: 31px;
  width: 66px;
  height: 58px;
  border-radius: 7px;
  background:
    linear-gradient(90deg, #39a7e0 0 26%, #fff8d7 26% 74%, #39a7e0 74% 100%);
}

.ls-wearable-cape {
  z-index: 0;
  top: 50px;
  left: 21px;
  width: 88px;
  height: 66px;
  border-radius: 7px;
  background: linear-gradient(135deg, #e88ad3, #6f3fa0);
  transform: skewX(-8deg);
}

.ls-cosmetics-card-icon {
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  width: 86px;
  height: 86px;
  border-radius: 8px;
  background: #ffffff;
  color: #2f6a3d;
  font-size: 42px;
  font-weight: 900;
  box-shadow:
    0 10px 20px rgb(36 58 34 / 12%),
    0 0 0 5px rgb(255 255 255 / 46%);
  transition: transform 0.16s ease-in-out;
}

.ls-cosmetics-card-kicker,
.ls-cosmetics-card-copy,
.ls-cosmetics-card-action {
  display: block;
}

.ls-cosmetics-card-kicker {
  color: #5f705d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-cosmetics-card strong {
  color: #2f6a3d;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.ls-cosmetics-card-copy {
  color: #52624f;
  line-height: 1.35;
  font-size: 14px;
  font-weight: 800;
}

.ls-cosmetics-card-action {
  align-self: end;
  width: fit-content;
  padding: 9px 12px;
  border-radius: 999px;
  background: #fff8d7;
  color: #172214;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 0 0 3px rgb(244 191 42 / 18%);
}

.ls-cosmetics-page .store-products-images,
.ls-keyall-page .store-products-images {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: stretch;
}

.ls-keyall-page .store-products-images {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ls-cosmetics-page .store-product,
.ls-keyall-page .store-product {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-height: 284px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 96%) 0%, rgb(255 253 244 / 96%) 100%);
  transition: transform 0.16s ease-in-out, box-shadow 0.16s ease-in-out, border-color 0.16s ease-in-out;
}

.ls-cosmetics-page .store-product::before,
.ls-keyall-page .store-product::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, #39a7e0, #f4bf2a, #e88ad3);
  opacity: 0.85;
}

.ls-keyall-page .store-product::before {
  background: linear-gradient(90deg, #f4bf2a, #2f6a3d, #fff3bd);
}

.ls-cosmetics-page .store-product:hover,
.ls-keyall-page .store-product:hover {
  border-color: rgb(244 191 42 / 66%);
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgb(36 58 34 / 13%);
}

.ls-cosmetics-page .store-product .image-link,
.ls-keyall-page .store-product .image-link {
  min-height: 132px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(223 244 255 / 64%) 0%, rgb(255 248 215 / 62%) 100%);
}

.ls-cosmetics-page .store-product .image,
.ls-keyall-page .store-product .image {
  max-height: 124px;
  transition: transform 0.16s ease-in-out;
}

.ls-cosmetics-page .store-product:hover .image,
.ls-keyall-page .store-product:hover .image {
  transform: translateY(-3px) scale(1.04);
}

.ls-keyall-page .ls-keyall-bundle {
  --ls-keyall-accent: #48dff2;
  --ls-keyall-accent-soft: rgb(72 223 242 / 22%);
  min-height: 406px;
  border-color: rgb(72 160 178 / 24%);
  box-shadow:
    inset 0 -5px 0 var(--ls-keyall-accent-soft),
    0 14px 28px rgb(36 58 34 / 9%);
}

.ls-keyall-page .ls-keyall-bundle-cosmetic {
  --ls-keyall-accent: #ef8bd5;
  --ls-keyall-accent-soft: rgb(239 139 213 / 24%);
  border-color: rgb(201 111 178 / 24%);
}

.ls-keyall-page .ls-keyall-bundle::before {
  height: 6px;
  background: linear-gradient(90deg, var(--ls-keyall-accent), #f4bf2a, #9468d4);
  opacity: 1;
}

.ls-keyall-page .ls-keyall-bundle .image-link {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 1;
  border: 1px solid rgb(255 255 255 / 58%);
  background: #142823;
  overflow: hidden;
  isolation: isolate;
}

.ls-keyall-page .ls-keyall-bundle-cosmetic .image-link {
  background: #e9e3ff;
}

.ls-keyall-page .ls-keyall-bundle .image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(110deg, transparent 0 38%, rgb(255 255 255 / 48%) 48%, transparent 58% 100%);
  transform: translateX(-125%);
  pointer-events: none;
  animation: ls-keyall-art-sheen 7.4s ease-in-out infinite;
}

.ls-keyall-page .ls-keyall-bundle .ls-keyall-product-art {
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 6px;
  object-fit: cover;
  transform: scale(1.01);
}

.ls-keyall-page .ls-keyall-bundle:hover {
  border-color: var(--ls-keyall-accent);
  box-shadow:
    inset 0 -5px 0 var(--ls-keyall-accent-soft),
    0 18px 36px var(--ls-keyall-accent-soft);
}

.ls-keyall-page .ls-keyall-bundle:hover .ls-keyall-product-art {
  transform: scale(1.055);
}

.ls-keyall-count {
  position: absolute;
  inset: 12px 12px auto auto;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  min-height: 38px;
  border: 1px solid rgb(255 255 255 / 66%);
  border-radius: 999px;
  padding: 5px 9px;
  background: rgb(18 36 31 / 84%);
  color: #fffbe8;
  box-shadow:
    0 8px 18px rgb(8 20 16 / 28%),
    0 0 0 4px var(--ls-keyall-accent-soft);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(6px);
}

.ls-keyall-bundle-cosmetic .ls-keyall-count {
  background: rgb(83 42 91 / 84%);
}

@keyframes ls-keyall-art-sheen {
  0%,
  62% {
    transform: translateX(-125%);
  }

  84%,
  100% {
    transform: translateX(125%);
  }
}

.ls-cosmetics-page .store-product .product-title,
.ls-keyall-page .store-product .product-title {
  min-height: 46px;
  display: grid;
  align-items: center;
  font-size: 17px;
  line-height: 1.18;
  text-align: center;
}

.ls-cosmetics-page .store-product .actions,
.ls-keyall-page .store-product .actions {
  align-self: end;
  display: grid;
  gap: 8px;
  width: 100%;
}

.ls-cosmetics-page .store-product .actions .btn,
.ls-keyall-page .store-product .actions .btn,
.ls-cosmetics-page .store-product .actions .add,
.ls-keyall-page .store-product .actions .add,
.ls-cosmetics-page .store-product .actions button,
.ls-keyall-page .store-product .actions button {
  min-height: 42px;
  width: 100%;
  justify-content: center;
}

.ls-cosmetics-page .store-product .price,
.ls-keyall-page .store-product .price {
  text-align: center;
  font-size: 15px;
}

.ls-cosmetics-page .store-product .price strong,
.ls-keyall-page .store-product .price strong {
  color: #2f6a3d;
  font-size: 20px;
}

@media (width <= 600px) {
  .ls-category-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .ls-category-pills::-webkit-scrollbar {
    display: none;
  }

  .ls-category-pills a {
    flex: 0 0 auto;
  }

  .ls-cosmetics-page .store-products-images,
  .ls-keyall-page .store-products-images {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .ls-rank-upgrade-hero {
    display: block;
    padding: 18px;
  }

  .ls-rank-upgrade-hero h1 {
    max-width: none;
    font-size: 34px;
  }

  .ls-rank-upgrade-compare {
    margin-top: 14px;
  }

  .ls-cosmetics-hub {
    grid-template-columns: 1fr;
  }
}

@media (width > 600px) and (width <= 1040px) {
  .ls-keyall-page .store-products-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-category-pills a,
  .ls-cosmetics-page .store-product,
  .ls-keyall-page .store-product,
  .ls-cosmetics-page .store-product .image,
  .ls-keyall-page .store-product .image,
  .ls-keyall-page .ls-keyall-bundle .image-link::after,
  .ls-rank-upgrade-hero::before,
  .ls-cosmetics-card-media img,
  .ls-cosmetics-card-visual,
  .ls-cosmetics-card-icon {
    transition: none;
  }

  .ls-rank-upgrade-hero::before {
    animation: none;
  }

  .ls-keyall-page .ls-keyall-bundle .image-link::after {
    animation: none;
  }
}

.store-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.store-sidebar .widget {
  order: 20;
}

.store-sidebar .navigation-vertical {
  order: 0;
}

.store-sidebar .widget-recent {
  order: 1;
}

.store-sidebar .widget-server-status {
  order: 2;
}

.site-content-widgets > main,
.ls-ranks-page,
.ls-rank-upgrades-page,
.ls-rank-compare,
.ls-rank-shop,
.ls-rank-upgrade-hero {
  min-width: 0;
}

.store-sidebar .widget + .widget {
  margin-top: 0;
}

.widget-recent,
.widget-server-status {
  border-color: rgb(47 106 61 / 14%);
  background:
    linear-gradient(135deg, rgb(255 253 244 / 97%) 0%, rgb(240 251 239 / 94%) 100%);
}

.widget-recent .purchases {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: auto;
  gap: 8px;
  overflow: visible;
  padding-bottom: 0;
}

.widget-recent .purchase,
.page-index .widget-recent .purchase {
  align-items: center;
  margin: 0;
  padding: 9px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: rgb(255 255 255 / 74%);
  box-shadow: none;
}

.widget-recent .avatar,
.page-index .widget-recent .avatar {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  border-radius: 6px;
}

.widget-recent .username,
.widget-recent p,
.page-index .widget-recent .username,
.page-index .widget-recent p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.widget-server-status .widget-content {
  text-align: left;
}

.ls-server-status-card {
  display: grid;
  gap: 10px;
}

.ls-server-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgb(47 106 61 / 12%);
  border-radius: 8px;
  background: #ffffff;
}

.ls-server-dot {
  flex: none;
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #24c96b;
  box-shadow: 0 0 0 4px rgb(36 201 107 / 13%);
}

.ls-server-status-card.is-offline .ls-server-dot {
  background: #b94331;
  box-shadow: 0 0 0 4px rgb(185 67 49 / 12%);
}

.ls-server-status-row strong,
.ls-server-status-row span {
  display: block;
}

.ls-server-status-row strong {
  color: #1f572e;
  font-size: 18px;
  font-weight: 900;
}

.ls-server-status-row span {
  color: #5f705d;
  font-size: 13px;
  font-weight: 800;
}

.ls-server-copy,
.ls-server-discord {
  width: 100%;
  min-height: 48px;
  border-radius: 8px;
  font: inherit;
  font-weight: 900;
}

.ls-server-copy {
  display: grid;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid rgb(244 191 42 / 42%);
  background: #fff8d7;
  color: #172214;
  text-align: left;
  cursor: pointer;
}

.ls-server-copy strong,
.ls-server-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-server-copy span {
  color: #5c4310;
  font-size: 12px;
  text-transform: uppercase;
}

.ls-server-discord {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: #5865f2;
  color: #ffffff;
  box-shadow: 0 5px 0 rgb(43 51 158 / 28%);
}

.ls-server-discord:hover {
  background: #4654d6;
  color: #ffffff;
}

.ls-server-discord img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.page-index .ls-home-lower .store-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.page-index .ls-home-lower .widget-recent {
  grid-column: auto;
}

.page-index .widget-recent .purchases {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  overflow: visible;
}

@media (width > 960px) {
  .navigation-horizontal .menu > li.has-children {
    align-items: center;
    gap: 0;
    border-radius: 7px;
  }

  .navigation-horizontal .menu > li.has-children > a {
    display: flex;
    align-items: center;
    padding-right: 4px;
  }

  .navigation-horizontal .menu > li.has-children .toggle {
    align-self: center;
    margin-right: 8px;
    border: 0;
    background: transparent !important;
    box-shadow: none !important;
  }

  .navigation-horizontal .menu > li.has-children:hover,
  .navigation-horizontal .menu > li.has-children.active {
    background: #fff3bd;
    box-shadow: 0 0 0 3px rgb(244 191 42 / 18%);
  }

  .navigation-horizontal .menu > li.has-children > a:hover,
  .navigation-horizontal .menu > li.has-children > a.link-active {
    background: transparent;
    box-shadow: none;
  }
}

.navigation-horizontal .menu,
.site-navigation .menu {
  align-items: center;
}

.navigation-horizontal .menu > li,
.site-navigation .menu > li {
  display: flex;
  align-items: center;
}

.navigation-horizontal .menu > li > a,
.site-navigation .menu > li > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1;
}

.ls-rank-mini-perks .ls-rank-more a {
  color: inherit;
  text-decoration: none;
}

.ls-rank-mini-perks .ls-rank-more a:hover {
  color: #172214;
}

.ls-cosmetics-card-visual-tags span {
  justify-content: center;
}

.ls-cosmetics-card-visual-tags .ls-tag-preview-heart {
  justify-content: flex-start;
  border-color: rgb(232 95 125 / 32%);
  background: linear-gradient(135deg, #fff7fb 0%, #fffdf4 100%);
  box-shadow:
    0 8px 18px rgb(36 58 34 / 8%),
    0 0 0 3px rgb(232 95 125 / 10%);
}

.ls-cosmetics-card-visual-tags .ls-tag-preview-diamond {
  justify-content: flex-start;
  border-color: rgb(57 167 224 / 32%);
  background: linear-gradient(135deg, #eef9ff 0%, #fffdf4 100%);
  box-shadow:
    0 8px 18px rgb(36 58 34 / 8%),
    0 0 0 3px rgb(57 167 224 / 10%);
}

.ls-cosmetics-card-visual-tags .ls-tag-preview-crown {
  justify-content: flex-start;
  border-color: rgb(244 191 42 / 42%);
  background: linear-gradient(135deg, #fff3bd 0%, #fffdf4 100%);
  box-shadow:
    0 8px 18px rgb(36 58 34 / 8%),
    0 0 0 3px rgb(244 191 42 / 14%);
}

.ls-tag-preview-heart i,
.ls-tag-preview-diamond i,
.ls-tag-preview-crown i {
  position: relative;
  flex: none;
}

.ls-tag-preview-heart i {
  width: 15px;
  height: 15px;
  margin: 1px 2px 0 1px;
  background: #e85f7d;
  transform: rotate(45deg);
  box-shadow: 0 2px 0 rgb(139 49 71 / 18%);
}

.ls-tag-preview-heart i::before,
.ls-tag-preview-heart i::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: #e85f7d;
}

.ls-tag-preview-heart i::before {
  left: -7px;
}

.ls-tag-preview-heart i::after {
  top: -7px;
}

.ls-tag-preview-diamond i {
  width: 16px;
  height: 16px;
  margin-inline: 1px 2px;
  border: 2px solid rgb(21 89 120 / 24%);
  background:
    linear-gradient(135deg, #9be8ff 0 45%, #39a7e0 46% 100%);
  transform: rotate(45deg);
  box-shadow: 0 2px 0 rgb(21 89 120 / 18%);
}

.ls-tag-preview-diamond i::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-top: 2px solid rgb(255 255 255 / 78%);
  border-left: 2px solid rgb(255 255 255 / 50%);
}

.ls-tag-preview-crown i {
  width: 19px;
  height: 15px;
  margin-inline: 0 1px;
  background:
    linear-gradient(135deg, transparent 0 22%, #f4bf2a 23% 48%, transparent 49%),
    linear-gradient(45deg, transparent 0 22%, #f4bf2a 23% 48%, transparent 49%),
    linear-gradient(180deg, #ffe27a 0%, #f4bf2a 100%);
  clip-path: polygon(0 35%, 22% 35%, 34% 0, 50% 35%, 66% 0, 78% 35%, 100% 35%, 88% 100%, 12% 100%);
  filter: drop-shadow(0 2px 0 rgb(114 84 10 / 18%));
}

.ls-cosmetics-card-visual-tags b {
  color: #263c28;
  font-size: 13px;
}

.ls-cosmetics-card-image-stack {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ls-cosmetics-card-image-stack img {
  max-height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgb(36 58 34 / 16%));
}

.ls-cosmetics-card-image-stack-balloons {
  min-height: 132px;
}

.ls-cosmetics-card-image-stack-balloons img {
  width: auto;
  max-width: 148px;
  max-height: 136px;
}

.ls-cosmetics-card-image-stack-balloons img:nth-child(2) {
  transform: none;
}

.ls-cosmetics-card-image-stack-wearables img {
  width: 210px;
  height: 148px;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.18);
}

.site-header {
  padding-top: 0;
}

@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 246px;
  }

  .site-header-inner .ls-store-banner-title {
    inset: 80px 24px auto;
    width: auto;
    max-width: none;
  }

  .site-header-inner .ls-store-banner-title img {
    height: auto;
    max-height: 150px;
    width: 100%;
    object-fit: contain;
    object-position: center;
  }
}

@media (width <= 960px) {
  .site-header {
    padding-top: 0;
  }
}

.ls-rank-table-product-row th,
.ls-rank-table-product-row td {
  border-bottom: 1px solid rgb(47 106 61 / 12%);
  vertical-align: top;
}

.site-header-inner .user-actions-signed-in {
  align-items: flex-start;
  z-index: 3;
}

.ls-player-card {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  width: 246px;
  min-height: 54px;
  padding: 7px 63px 7px 8px;
  border: 1px solid rgb(47 106 61 / 18%);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 253 244 / 98%) 0%, rgb(239 249 233 / 98%) 58%, rgb(223 244 255 / 92%) 100%);
  color: #172214;
  text-decoration: none;
  box-shadow:
    0 8px 18px rgb(36 58 34 / 10%),
    inset 0 1px 0 rgb(255 255 255 / 78%);
  overflow: hidden;
  transition: transform 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.ls-player-card::before {
  content: "";
  position: absolute;
  inset: -35% 34% auto -24%;
  height: 96px;
  background: radial-gradient(circle, rgb(82 184 106 / 24%) 0%, rgb(82 184 106 / 0%) 62%);
  pointer-events: none;
  z-index: -1;
}

.ls-player-card:hover,
.ls-player-card:focus-visible {
  border-color: rgb(244 191 42 / 50%);
  box-shadow:
    0 10px 22px rgb(36 58 34 / 12%),
    0 0 0 3px rgb(244 191 42 / 16%),
    inset 0 1px 0 rgb(255 255 255 / 82%);
  transform: translateY(-1px);
  outline: none;
}

.ls-player-card-main {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.ls-player-card-avatar-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgb(47 106 61 / 16%);
  border-radius: 8px;
  background: #e9f6dc;
  box-shadow:
    inset 0 -2px 0 rgb(47 106 61 / 12%),
    0 0 0 3px rgb(255 255 255 / 72%);
  overflow: hidden;
}

.ls-player-card-avatar {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.ls-player-card-fallback {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #e9f6dc 0%, #dff4ff 100%);
  color: #2f6a3d;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.ls-player-card-skin-failed .ls-player-card-avatar {
  display: none;
}

.ls-player-card-body-skin-failed .ls-player-card-body {
  display: none;
}

.ls-player-card-copy {
  display: block;
  min-width: 0;
  line-height: 1.05;
}

.ls-player-card-kicker,
.ls-player-card-logout {
  display: block;
  color: #5f705d;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-player-card-copy strong {
  display: block;
  max-width: 112px;
  margin: 2px 0;
  color: #172214;
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ls-player-card-logout {
  color: #2f6a3d;
}

html[data-ls-theme="dark"] .ls-player-card {
  border-color: rgb(223 244 196 / 18%);
  background:
    linear-gradient(135deg, rgb(23 36 28 / 98%) 0%, rgb(25 48 31 / 96%) 58%, rgb(17 49 55 / 92%) 100%);
  color: #f7fff4;
  box-shadow:
    0 10px 22px rgb(0 0 0 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

html[data-ls-theme="dark"] .ls-player-card-avatar-shell {
  border-color: rgb(223 244 196 / 14%);
  background: #203520;
  box-shadow:
    inset 0 -2px 0 rgb(0 0 0 / 18%),
    0 0 0 3px rgb(255 255 255 / 8%);
}

html[data-ls-theme="dark"] .ls-player-card-fallback {
  background:
    linear-gradient(135deg, #203520 0%, #143840 100%);
  color: #ffd45b;
}

html[data-ls-theme="dark"] .ls-player-card-copy strong,
html[data-ls-theme="dark"] .ls-player-card:hover .ls-player-card-exit,
html[data-ls-theme="dark"] .ls-player-card:focus-visible .ls-player-card-exit {
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-player-card-kicker,
html[data-ls-theme="dark"] .ls-player-card-exit {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-player-card-logout {
  color: #91d792;
}

.ls-player-card-body {
  position: absolute;
  right: 26px;
  bottom: 4px;
  z-index: 1;
  display: block;
  width: 35px;
  height: 52px;
  pointer-events: none;
}

.ls-player-card-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  image-rendering: pixelated;
  filter: drop-shadow(0 5px 6px rgb(36 58 34 / 20%));
}

.ls-player-card-exit {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 3;
  width: 18px;
  height: 18px;
  color: #5f705d;
  transform: translateY(-50%);
  transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.ls-player-card-exit::before,
.ls-player-card-exit::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 2px;
  background: currentColor;
}

.ls-player-card-exit::before {
  width: 13px;
  height: 2px;
}

.ls-player-card-exit::after {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  background: transparent;
  transform: translateY(-3px) rotate(45deg);
}

.ls-player-card:hover .ls-player-card-exit,
.ls-player-card:focus-visible .ls-player-card-exit {
  color: #172214;
  transform: translate(2px, -50%);
}

@media (width > 960px) {
  .site-header-inner .user-actions-signed-in {
    top: 12px;
  }
}

@media (width <= 960px) {
  .site-header-inner .user-actions-signed-in {
    gap: 8px;
    align-items: center;
  }

  .ls-player-card {
    width: 150px;
    min-height: 46px;
    padding: 5px 8px;
  }

  .ls-player-card-main {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  .ls-player-card-avatar {
    width: 36px;
    height: 36px;
  }

  .ls-player-card-avatar-shell {
    width: 36px;
    height: 36px;
  }

  .ls-player-card-body,
  .ls-player-card-exit {
    display: none;
  }

  .ls-player-card-copy {
    display: block;
  }

  .ls-player-card-kicker {
    display: none;
  }

  .ls-player-card-copy strong {
    max-width: 82px;
    margin: 0 0 3px;
    font-size: 13px;
  }

  .ls-player-card-logout {
    display: block;
    font-size: 9px;
  }
}

@media (width <= 420px) {
  .ls-player-card {
    width: 136px;
  }

  .ls-player-card-copy strong {
    max-width: 68px;
  }
}

.ls-ranks-page .ls-rank-table {
  min-width: 0;
  table-layout: fixed;
}

.ls-ranks-page .ls-rank-table th,
.ls-ranks-page .ls-rank-table td {
  padding-inline: 10px;
}

.ls-ranks-page .ls-rank-table th:first-child,
.ls-ranks-page .ls-rank-table td:first-child {
  width: 22%;
}

.ls-ranks-page .ls-rank-table th:not(:first-child),
.ls-ranks-page .ls-rank-table td:not(:first-child) {
  width: 26%;
}

.ls-rank-table tbody tr:not(.ls-rank-group) td:nth-child(2) {
  border-left: 2px solid rgb(82 184 106 / 30%);
  background: linear-gradient(180deg, rgb(233 246 220 / 38%) 0%, rgb(255 253 244 / 72%) 100%);
  box-shadow: inset 3px 0 0 rgb(82 184 106 / 32%);
}

.ls-rank-table tbody tr:not(.ls-rank-group) td:nth-child(3) {
  border-left: 2px solid rgb(57 167 224 / 30%);
  background: linear-gradient(180deg, rgb(223 244 255 / 44%) 0%, rgb(255 255 255 / 74%) 100%);
  box-shadow: inset 3px 0 0 rgb(57 167 224 / 32%);
}

.ls-rank-table tbody tr:not(.ls-rank-group) td:nth-child(4) {
  border-left: 2px solid rgb(244 191 42 / 36%);
  background: linear-gradient(180deg, rgb(255 226 122 / 26%) 0%, rgb(255 241 250 / 78%) 100%);
  box-shadow:
    inset 3px 0 0 rgb(244 191 42 / 40%),
    inset -3px 0 0 rgb(232 138 211 / 22%);
}

.ls-rank-table-product-row th {
  min-width: 0;
  background: #fffdf4 !important;
}

.ls-rank-table-product-kicker,
.ls-rank-table-product-row th strong,
.ls-rank-table-product-row th small,
.ls-rank-table-rank-name,
.ls-rank-table-rank-note {
  display: block;
}

.ls-rank-table-product-kicker {
  margin-bottom: 7px;
  color: #2f6a3d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-rank-table-product-row th strong {
  color: #172214;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.05;
}

.ls-rank-table-product-row th small {
  margin-top: 8px;
  color: #52624f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.ls-rank-table-product {
  min-width: 0;
  padding: 0 10px 16px !important;
  background: linear-gradient(180deg, #fffdf4 0%, #fff8d7 100%);
}

.ls-rank-table-product-elite {
  background: linear-gradient(180deg, #ffffff 0%, #dff4ff 100%);
}

.ls-rank-table-product-supreme {
  background:
    linear-gradient(180deg, #fffdf4 0%, #fff1fa 100%),
    linear-gradient(90deg, #f4bf2a, #e88ad3);
}

.ls-rank-photo-placeholder {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 132px;
  margin: 0 -10px 14px;
  padding: 14px 8px;
  border-top: 5px solid #52b86a;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 62%) 0%, rgb(240 251 239 / 84%) 100%),
    repeating-linear-gradient(45deg, rgb(47 106 61 / 8%) 0 8px, rgb(47 106 61 / 0) 8px 16px);
  color: #2f6a3d;
  text-align: center;
}

.ls-rank-table-product-elite .ls-rank-photo-placeholder {
  border-top-color: #39a7e0;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 62%) 0%, rgb(223 244 255 / 86%) 100%),
    repeating-linear-gradient(45deg, rgb(57 167 224 / 10%) 0 8px, rgb(57 167 224 / 0) 8px 16px);
  color: #155978;
}

.ls-rank-table-product-supreme .ls-rank-photo-placeholder {
  border-top-color: #f4bf2a;
  background:
    linear-gradient(135deg, rgb(255 248 215 / 76%) 0%, rgb(255 239 250 / 88%) 100%),
    repeating-linear-gradient(45deg, rgb(111 63 160 / 10%) 0 8px, rgb(111 63 160 / 0) 8px 16px);
  color: #6f3fa0;
}

.ls-rank-photo-placeholder span {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 2px dashed currentColor;
  border-radius: 8px;
  background: rgb(255 255 255 / 76%);
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 22px rgb(36 58 34 / 10%);
}

.ls-rank-photo-placeholder small {
  color: #52624f;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-rank-table-rank-name {
  color: #172214;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.ls-rank-table-rank-note {
  margin-top: 6px;
  color: #52624f;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-rank-table-product-actions {
  margin-top: 14px;
}

.ls-rank-table-product-actions .product-actions {
  display: grid;
  gap: 10px;
  justify-items: center;
  overflow: visible;
}

.ls-rank-table-product-actions .product-actions .price {
  width: 100%;
  margin: 0;
  color: #5f705d;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.ls-rank-table-product-actions .product-actions .price strong {
  display: block;
  margin-top: 2px;
  color: #2f6a3d;
  font-size: 22px;
  font-weight: 900;
}

.ls-rank-table-product-actions .product-actions .add,
.ls-rank-table-product-actions .product-actions .subscribe,
.ls-rank-table-product-actions .product-actions .open-basket,
.ls-rank-table-product-actions .product-actions .quantity-field {
  width: 100%;
  min-width: 0;
}

.ls-rank-table-product-actions .product-actions .add,
.ls-rank-table-product-actions .product-actions .subscribe {
  justify-content: center;
  background: #f4bf2a !important;
  color: #172214 !important;
  box-shadow:
    0 4px 0 rgb(114 84 10 / 32%),
    0 0 0 4px rgb(244 191 42 / 14%);
}

.ls-rank-table-product-elite .product-actions .add,
.ls-rank-table-product-elite .product-actions .subscribe {
  background: #39a7e0 !important;
  color: #ffffff !important;
  box-shadow:
    0 4px 0 rgb(21 89 120 / 34%),
    0 0 0 4px rgb(57 167 224 / 14%);
}

.ls-rank-table-product-supreme .product-actions .add,
.ls-rank-table-product-supreme .product-actions .subscribe {
  background: #e88ad3 !important;
  color: #2b1730 !important;
  box-shadow:
    0 4px 0 rgb(111 63 160 / 34%),
    0 0 0 4px rgb(232 138 211 / 16%);
}

.ls-rank-feature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: 8px;
  background: rgb(255 248 215 / 86%);
  color: #2f6a3d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 0 0 0 2px rgb(244 191 42 / 16%);
}

.ls-rank-feature-top {
  background: linear-gradient(135deg, #ffe27a 0%, #fff7cf 48%, #f5dcff 100%);
  color: #4b2761;
  box-shadow:
    0 0 0 2px rgb(244 191 42 / 24%),
    0 8px 16px rgb(114 84 10 / 10%);
}

.ls-login-panel {
  max-width: 620px;
  margin-inline: auto;
}

.ls-login-panel h2 {
  color: #172214;
  font-size: 36px;
  font-weight: 900;
  line-height: 1.05;
}

.ls-login-copy {
  margin: 12px 0 18px;
  color: #5f705d;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.45;
}

.ls-login-form {
  display: grid;
  gap: 14px;
}

.ls-login-platform {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 6px;
  border: 1px solid rgb(47 106 61 / 14%);
  border-radius: 8px;
  background: #fffdf4;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 72%);
}

.ls-login-platform-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 54px;
  padding: 8px 10px;
  border: 1px solid rgb(47 106 61 / 10%);
  border-radius: 7px;
  background: rgb(255 255 255 / 72%);
  color: #5f705d;
  font: inherit;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.ls-login-platform-option:hover,
.ls-login-platform-option:focus-visible {
  border-color: rgb(244 191 42 / 52%);
  box-shadow: 0 0 0 3px rgb(244 191 42 / 14%);
}

.ls-login-platform-option strong,
.ls-login-platform-option small {
  display: block;
}

.ls-login-platform-option strong {
  color: #172214;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.05;
}

.ls-login-platform-option small {
  margin-top: 3px;
  color: #5f705d;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-login-platform-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #e9f6dc;
  color: #2f6a3d;
  font-size: 15px;
  font-weight: 900;
  box-shadow: inset 0 -2px 0 rgb(47 106 61 / 10%);
}

.ls-login-platform-option.active {
  border-color: rgb(47 106 61 / 24%);
  background: #ffffff;
  color: #172214;
  box-shadow:
    0 8px 18px rgb(36 58 34 / 8%),
    0 0 0 3px rgb(82 184 106 / 14%);
}

.ls-login-platform-option[data-platform="bedrock"].active {
  border-color: rgb(57 167 224 / 34%);
  box-shadow:
    0 8px 18px rgb(36 58 34 / 8%),
    0 0 0 3px rgb(57 167 224 / 16%);
}

.ls-login-platform-option[data-platform="bedrock"] .ls-login-platform-icon {
  background: #dff4ff;
  color: #155978;
}

.ls-login-ign {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgb(47 106 61 / 18%);
  border-radius: 8px;
  padding: 0 16px;
  background: #ffffff !important;
  color: #172214 !important;
  caret-color: #2f6a3d;
  font-size: 17px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 72%);
}

.ls-login-ign::placeholder {
  color: #7a8678 !important;
}

.ls-login-ign:focus {
  border-color: rgb(47 106 61 / 44%);
  outline: none;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 72%),
    0 0 0 4px rgb(82 184 106 / 14%);
}

.ls-login-note {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgb(57 167 224 / 26%);
  border-radius: 8px;
  background: rgb(223 244 255 / 62%);
  color: #52624f;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.ls-login-note strong {
  color: #172214;
}

.ls-login-note code {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  height: 25px;
  margin-inline: 2px;
  border-radius: 7px;
  background: #f4bf2a;
  color: #172214;
  font: inherit;
  font-weight: 900;
  box-shadow:
    inset 0 -2px 0 rgb(114 84 10 / 18%),
    0 0 0 3px rgb(244 191 42 / 16%);
}

.ls-login-form[data-platform="bedrock"] .ls-login-note {
  border-color: rgb(244 191 42 / 48%);
  background: linear-gradient(135deg, #fff8d7 0%, #eef9ff 100%);
  color: #3b4938;
  box-shadow: 0 0 0 3px rgb(244 191 42 / 10%);
}

.ls-login-form .btn-primary {
  justify-content: center;
  width: 100%;
  min-height: 56px;
  background: #f4bf2a !important;
  color: #172214 !important;
  box-shadow: 0 4px 0 rgb(114 84 10 / 32%);
}

@media (width <= 700px) {
  .ls-ranks-page .ls-rank-table {
    min-width: 760px;
    table-layout: auto;
  }

  .ls-ranks-page .ls-rank-table th:first-child,
  .ls-ranks-page .ls-rank-table td:first-child,
  .ls-ranks-page .ls-rank-table th:not(:first-child),
  .ls-ranks-page .ls-rank-table td:not(:first-child) {
    width: auto;
  }

  .ls-rank-table-product {
    min-width: 190px;
  }

  .ls-rank-photo-placeholder {
    min-height: 140px;
  }

  .ls-rank-table-rank-name {
    font-size: 25px;
  }

  .ls-login-panel h2 {
    font-size: 34px;
  }

  .ls-login-platform-option {
    min-height: 50px;
    font-size: 16px;
  }
}

:root {
  --ls-page-bg: linear-gradient(180deg, #ccefff 0%, #fff6d8 42%, #f7fbef 100%);
  --ls-surface: rgb(255 253 244 / 96%);
  --ls-surface-solid: #fffdf4;
  --ls-surface-soft: #f0fbef;
  --ls-surface-bright: #ffffff;
  --ls-border: rgb(47 106 61 / 14%);
  --ls-border-strong: rgb(47 106 61 / 26%);
  --ls-text: #172214;
  --ls-text-muted: #5f705d;
  --ls-green: #2f6a3d;
  --ls-green-deep: #213c27;
  --ls-yellow: #f4bf2a;
  --ls-blue: #39a7e0;
  --ls-card-shadow: 0 14px 34px rgb(36 58 34 / 9%);
}

html[data-ls-theme="dark"] {
  --color-text: #edf7e9;
  --color-text-darker: #cfe5ca;
  --color-text-secondary: #b8cab4;
  --color-text-dark: #f7fff4;
  --color-bg: #101a15;
  --color-brighter-bg: #17251b;
  --color-secondary: #253725;
  --color-secondary-hover: #314a31;
  --color-secondary-text: #eef7e8;
  --color-tertiary-text: #dcefcf;
  --ls-page-bg: linear-gradient(180deg, #102c2f 0%, #18271b 48%, #101811 100%);
  --ls-surface: rgb(24 37 27 / 94%);
  --ls-surface-solid: #18251b;
  --ls-surface-soft: #203520;
  --ls-surface-bright: #213322;
  --ls-border: rgb(223 244 196 / 14%);
  --ls-border-strong: rgb(244 191 42 / 34%);
  --ls-text: #f7fff4;
  --ls-text-muted: #bfd1b9;
  --ls-green: #91d792;
  --ls-green-deep: #f7fff4;
  --ls-yellow: #ffd45b;
  --ls-blue: #73d0ff;
  --ls-card-shadow: 0 18px 38px rgb(0 0 0 / 26%);
  color-scheme: dark;
}

html[data-ls-theme="dark"] body {
  color: var(--ls-text);
}

html[data-ls-theme="dark"] .site-header-inner,
html[data-ls-theme="dark"] .navigation-horizontal .menu,
html[data-ls-theme="dark"] .site-navigation .menu,
html[data-ls-theme="dark"] .store-product,
html[data-ls-theme="dark"] .ls-category-intro,
html[data-ls-theme="dark"] .ls-rank-compare,
html[data-ls-theme="dark"] .ls-ranks-hero,
html[data-ls-theme="dark"] .widget,
html[data-ls-theme="dark"] .ls-login-panel {
  border-color: var(--ls-border);
  background: var(--ls-surface);
  box-shadow: var(--ls-card-shadow);
}

html[data-ls-theme="dark"] .site-navigation a,
html[data-ls-theme="dark"] .navigation-horizontal a,
html[data-ls-theme="dark"] .store-product .product-title,
html[data-ls-theme="dark"] .ls-store-quicklinks strong,
html[data-ls-theme="dark"] .ls-rank-table-rank-name,
html[data-ls-theme="dark"] .widget-title,
html[data-ls-theme="dark"] .username {
  color: var(--ls-text);
}

html[data-ls-theme="dark"] .ls-store-kicker,
html[data-ls-theme="dark"] .ls-store-hero h2,
html[data-ls-theme="dark"] .ls-section-heading h3,
html[data-ls-theme="dark"] .ls-store-home-summary h3,
html[data-ls-theme="dark"] .ls-category-intro h1,
html[data-ls-theme="dark"] .ls-home-rank-spotlight h3,
html[data-ls-theme="dark"] .ls-home-rank-card strong {
  color: var(--ls-green);
}

html[data-ls-theme="dark"] .site-home-categories .category,
html[data-ls-theme="dark"] .ls-store-quicklinks a,
html[data-ls-theme="dark"] .ls-link-row a,
html[data-ls-theme="dark"] .page-index .widget-recent .purchase {
  border-color: var(--ls-border);
  background: var(--ls-surface-bright);
  color: var(--ls-text);
}

html[data-ls-theme="dark"] .ls-rank-table-wrap {
  border-color: rgb(223 244 196 / 14%);
  background: #111a14;
  box-shadow: 0 18px 38px rgb(0 0 0 / 28%);
}

html[data-ls-theme="dark"] .ls-rank-table {
  background: #111a14;
  color: var(--ls-text);
}

html[data-ls-theme="dark"] .ls-rank-table th,
html[data-ls-theme="dark"] .ls-rank-table td {
  border-color: rgb(223 244 196 / 12%);
  color: var(--ls-text);
}

html[data-ls-theme="dark"] .ls-rank-table thead th,
html[data-ls-theme="dark"] .ls-rank-table-product-row th {
  background: #17251b !important;
}

html[data-ls-theme="dark"] .ls-rank-table-product-row th:first-child {
  background:
    linear-gradient(135deg, rgb(20 32 24 / 96%) 0%, rgb(16 42 45 / 88%) 100%) !important;
}

html[data-ls-theme="dark"] .ls-rank-table-product {
  background:
    linear-gradient(180deg, rgb(26 42 27 / 96%) 0%, rgb(45 42 18 / 78%) 100%) !important;
}

html[data-ls-theme="dark"] .ls-rank-table-product-elite {
  background:
    linear-gradient(180deg, rgb(22 37 42 / 96%) 0%, rgb(16 54 65 / 78%) 100%) !important;
}

html[data-ls-theme="dark"] .ls-rank-table-product-supreme {
  background:
    linear-gradient(180deg, rgb(35 26 43 / 96%) 0%, rgb(64 35 58 / 82%) 100%) !important;
}

html[data-ls-theme="dark"] .ls-rank-table-product-kicker,
html[data-ls-theme="dark"] .ls-rank-table-product-row th strong,
html[data-ls-theme="dark"] .ls-rank-table-rank-name {
  color: var(--ls-text);
}

html[data-ls-theme="dark"] .ls-rank-table-product-row th small,
html[data-ls-theme="dark"] .ls-rank-table-rank-note,
html[data-ls-theme="dark"] .ls-rank-photo-placeholder small,
html[data-ls-theme="dark"] .ls-rank-table-product-actions .product-actions .price {
  color: var(--ls-text-muted);
}

html[data-ls-theme="dark"] .ls-rank-photo-placeholder {
  border-top-color: #91d792;
  background:
    linear-gradient(135deg, rgb(26 42 27 / 86%) 0%, rgb(23 51 35 / 78%) 100%),
    repeating-linear-gradient(45deg, rgb(145 215 146 / 12%) 0 8px, rgb(145 215 146 / 0) 8px 16px);
  color: #91d792;
}

html[data-ls-theme="dark"] .ls-rank-table-product-elite .ls-rank-photo-placeholder {
  border-top-color: #73d0ff;
  background:
    linear-gradient(135deg, rgb(22 37 42 / 86%) 0%, rgb(17 56 67 / 78%) 100%),
    repeating-linear-gradient(45deg, rgb(115 208 255 / 12%) 0 8px, rgb(115 208 255 / 0) 8px 16px);
  color: #73d0ff;
}

html[data-ls-theme="dark"] .ls-rank-table-product-supreme .ls-rank-photo-placeholder {
  border-top-color: #ffd45b;
  background:
    linear-gradient(135deg, rgb(45 42 18 / 82%) 0%, rgb(64 35 58 / 82%) 100%),
    repeating-linear-gradient(45deg, rgb(255 212 91 / 12%) 0 8px, rgb(255 212 91 / 0) 8px 16px);
  color: #ffd45b;
}

html[data-ls-theme="dark"] .ls-rank-photo-placeholder span {
  background: rgb(16 24 18 / 72%);
  box-shadow: 0 12px 22px rgb(0 0 0 / 24%);
}

html[data-ls-theme="dark"] .ls-rank-table tbody tr:not(.ls-rank-group) td:nth-child(2) {
  border-left-color: rgb(145 215 146 / 30%);
  background: linear-gradient(180deg, rgb(26 42 27 / 76%) 0%, rgb(20 31 24 / 92%) 100%);
  box-shadow: inset 3px 0 0 rgb(145 215 146 / 28%);
}

html[data-ls-theme="dark"] .ls-rank-table tbody tr:not(.ls-rank-group) td:nth-child(3) {
  border-left-color: rgb(115 208 255 / 30%);
  background: linear-gradient(180deg, rgb(22 37 42 / 78%) 0%, rgb(18 31 36 / 92%) 100%);
  box-shadow: inset 3px 0 0 rgb(115 208 255 / 28%);
}

html[data-ls-theme="dark"] .ls-rank-table tbody tr:not(.ls-rank-group) td:nth-child(4) {
  border-left-color: rgb(255 212 91 / 34%);
  background: linear-gradient(180deg, rgb(45 42 18 / 76%) 0%, rgb(35 26 43 / 94%) 100%);
  box-shadow:
    inset 3px 0 0 rgb(255 212 91 / 34%),
    inset -3px 0 0 rgb(232 138 211 / 24%);
}

html[data-ls-theme="dark"] .ls-rank-table tbody tr:not(.ls-rank-group):hover td {
  background-color: rgb(244 191 42 / 8%);
}

html[data-ls-theme="dark"] .ls-rank-group th {
  background: #0f1812 !important;
  color: #ffd45b;
}

html[data-ls-theme="dark"] .ls-rank-feature {
  background: rgb(35 49 26 / 90%);
  color: #f7fff4;
  box-shadow: 0 0 0 2px rgb(145 215 146 / 16%);
}

html[data-ls-theme="dark"] .ls-rank-feature-top {
  background:
    linear-gradient(135deg, rgb(106 83 22 / 92%) 0%, rgb(41 54 27 / 92%) 48%, rgb(59 35 72 / 92%) 100%);
  color: #fff7cf;
  box-shadow:
    0 0 0 2px rgb(255 212 91 / 24%),
    0 8px 16px rgb(0 0 0 / 20%);
}

html[data-ls-theme="dark"] .site-footer {
  border-color: var(--ls-border);
  background: #0f1812;
}

.ls-theme-menu-item {
  display: flex;
  align-items: center;
}

.navigation-horizontal .mobile-only {
  display: none !important;
}

.ls-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--ls-border-strong);
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--ls-surface-soft);
  color: var(--ls-green-deep);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 -2px 0 rgb(47 106 61 / 10%);
}

.ls-theme-toggle:hover,
.ls-theme-toggle:focus-visible {
  border-color: rgb(244 191 42 / 70%);
  outline: none;
  background: #fff8d7;
  color: #172214;
}

html[data-ls-theme="dark"] .ls-theme-toggle {
  background: #233623;
  color: #f7fff4;
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 18%);
}

html[data-ls-theme="dark"] .ls-theme-toggle:hover,
html[data-ls-theme="dark"] .ls-theme-toggle:focus-visible {
  background: #30482f;
  color: #ffffff;
}

.ls-theme-toggle-mark {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: #c9e4ef;
  box-shadow: inset 0 0 0 1px rgb(47 106 61 / 14%);
}

.ls-theme-toggle-mark::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f4bf2a;
  transition: transform 0.16s ease-in-out, background-color 0.16s ease-in-out;
}

html[data-ls-theme="dark"] .ls-theme-toggle-mark {
  background: #101811;
}

html[data-ls-theme="dark"] .ls-theme-toggle-mark::after {
  background: #dff4ff;
  transform: translateX(12px);
}

@media (width > 960px) {
  .site {
    gap: 16px;
  }

  .site-header {
    padding-top: 8px;
  }

  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 196px;
  }

  .site-header-inner .site-title {
    inset: 60px 235px 12px 235px;
  }

  .site-header-inner .site-title img {
    max-height: 100px;
  }

  .navigation-horizontal .menu {
    align-items: center;
  }

  .navigation-horizontal .ls-theme-menu-item {
    margin-left: auto;
  }
}

@media (width <= 960px) {
  .site-header-inner {
    padding-top: 92px;
    padding-bottom: 18px;
  }
}

.ls-home-storefront,
.ls-support-proof,
.ls-section-heading,
.site-home-categories {
  max-width: var(--content-width);
}

.ls-home-storefront {
  grid-template-columns: minmax(0, 0.88fr) minmax(360px, 1.12fr);
  align-items: stretch;
  gap: 18px;
}

.ls-home-storefront .ls-store-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 280px;
  border-color: var(--ls-border);
  background:
    linear-gradient(135deg, rgb(255 253 244 / 96%) 0%, rgb(239 249 233 / 94%) 56%, rgb(223 244 255 / 88%) 100%);
  box-shadow: var(--ls-card-shadow);
}

html[data-ls-theme="dark"] .ls-home-storefront .ls-store-hero-copy {
  background:
    linear-gradient(135deg, rgb(24 37 27 / 96%) 0%, rgb(29 49 31 / 94%) 56%, rgb(18 47 53 / 88%) 100%);
}

.ls-home-storefront .ls-store-hero h2,
.ls-home-storefront .ls-store-hero-copy h2 {
  max-width: 10ch;
}

.ls-home-storefront-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.ls-home-storefront-actions .btn-primary,
.ls-home-storefront-actions .btn-secondary {
  width: auto;
  min-width: 150px;
  justify-content: center;
}

.ls-home-rank-spotlight {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 253 244 / 96%) 0%, rgb(255 248 215 / 90%) 52%, rgb(240 251 239 / 94%) 100%);
  box-shadow: var(--ls-card-shadow);
}

html[data-ls-theme="dark"] .ls-home-rank-spotlight {
  background:
    linear-gradient(135deg, rgb(24 37 27 / 96%) 0%, rgb(47 60 25 / 86%) 52%, rgb(20 47 42 / 92%) 100%);
}

.ls-home-rank-spotlight-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.ls-home-rank-spotlight-head .ls-store-kicker {
  margin: 0;
}

.ls-home-rank-spotlight h3 {
  color: var(--ls-green-deep);
  font-size: 27px;
  line-height: 1.05;
}

.ls-home-rank-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ls-home-rank-card {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 210px;
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  padding: 14px;
  background: var(--ls-surface-solid);
  color: var(--ls-text);
  overflow: hidden;
  box-shadow: 0 10px 22px rgb(36 58 34 / 8%);
  transition: transform 0.16s ease-in-out, border-color 0.16s ease-in-out, box-shadow 0.16s ease-in-out;
}

.ls-home-rank-card:hover,
.ls-home-rank-card:focus-visible {
  border-color: rgb(244 191 42 / 70%);
  color: var(--ls-text);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgb(36 58 34 / 14%);
}

.ls-home-rank-card::before {
  content: "";
  display: block;
  width: 74px;
  height: 74px;
  margin: 2px auto 12px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 52%), rgb(255 255 255 / 0)),
    #d9ead2;
  box-shadow:
    inset 0 -6px 0 rgb(47 106 61 / 10%),
    0 10px 22px rgb(36 58 34 / 12%);
}

.ls-home-rank-card-member::before {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 52%), rgb(255 255 255 / 0)),
    #d9ead2;
}

.ls-home-rank-card-elite::before {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 48%), rgb(255 255 255 / 0)),
    #c9e4ef;
}

.ls-home-rank-card-supreme {
  border-color: rgb(244 191 42 / 44%);
  background:
    linear-gradient(145deg, rgb(255 253 244 / 96%) 0%, rgb(255 248 215 / 94%) 56%, rgb(223 244 255 / 92%) 100%);
}

.ls-home-rank-card-supreme::before {
  background:
    linear-gradient(135deg, rgb(255 255 255 / 52%), rgb(255 255 255 / 0)),
    #f4bf2a;
  animation: ls-soft-pop 3.8s ease-in-out infinite;
}

html[data-ls-theme="dark"] .ls-home-rank-card-supreme {
  background:
    linear-gradient(145deg, rgb(31 45 29 / 96%) 0%, rgb(61 53 22 / 86%) 56%, rgb(20 47 53 / 92%) 100%);
}

.ls-home-rank-badge {
  display: inline-flex;
  justify-self: start;
  margin-bottom: 10px;
  border-radius: 999px;
  padding: 6px 9px;
  background: #fff8d7;
  color: #2f6a3d;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-home-rank-card strong {
  display: block;
  color: var(--ls-green-deep);
  font-size: 20px;
  line-height: 1.1;
}

.ls-home-rank-card small {
  display: block;
  margin-top: 8px;
  color: var(--ls-text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.ls-home-rank-chart-link {
  display: inline-flex;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgb(47 106 61 / 16%);
  border-radius: 8px;
  padding: 10px 12px;
  background: #2f6a3d;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 4px 0 rgb(31 75 42 / 30%);
}

.ls-home-rank-chart-link:hover,
.ls-home-rank-chart-link:focus-visible {
  background: #f4bf2a;
  color: #172214;
}

.ls-support-proof {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.ls-support-proof .store-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
  gap: 14px;
  width: 100%;
}

.ls-support-proof .store-sidebar .widget {
  margin-top: 0;
  border-color: var(--ls-border);
  background: var(--ls-surface);
  box-shadow: var(--ls-card-shadow);
}

.ls-support-proof .widget-recent {
  grid-row: span 2;
  padding: 18px;
}

.ls-support-proof .widget-recent .widget-title,
.ls-support-proof .widget-top-donator .widget-title {
  font-size: 24px;
}

.ls-support-proof .widget-recent .purchases {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-bottom: 0;
}

.ls-support-proof .widget-recent .purchase {
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  background: var(--ls-surface-bright);
  box-shadow: 0 8px 20px rgb(36 58 34 / 7%);
}

.ls-support-proof .widget-recent .avatar {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  image-rendering: pixelated;
}

.ls-support-proof .widget-recent .username,
.ls-support-proof .widget-recent p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ls-support-proof .widget-recent time {
  display: none;
}

.ls-support-proof .widget-top-donator {
  padding: 18px;
  background:
    linear-gradient(135deg, var(--ls-surface) 0%, rgb(255 248 215 / 82%) 100%);
}

html[data-ls-theme="dark"] .ls-support-proof .widget-top-donator {
  background:
    linear-gradient(135deg, var(--ls-surface) 0%, rgb(49 47 24 / 82%) 100%);
}

.ls-support-proof .widget-top-donator .widget-content {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 170px;
}

.ls-support-proof .widget-top-donator .widget-content::before {
  content: "#1 SUPPORTER";
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid rgb(244 191 42 / 48%);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff8d7;
  color: #d37a16;
  font-size: 11px;
  font-weight: 900;
}

.ls-support-proof .widget-top-donator .avatar {
  width: 82px;
  height: 122px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 12px 14px rgb(36 58 34 / 14%));
}

.ls-support-proof .widget-top-donator .username {
  margin-top: 22px;
  color: var(--ls-text);
  font-size: 25px;
  line-height: 1.05;
}

.ls-support-proof .widget-top-donator p {
  margin-top: 6px;
  color: var(--ls-text-muted);
  font-size: 15px;
  line-height: 1.35;
}

.ls-support-proof .widget-server-status {
  padding: 16px;
  background:
    linear-gradient(135deg, var(--ls-surface) 0%, rgb(223 244 255 / 74%) 100%);
}

html[data-ls-theme="dark"] .ls-support-proof .widget-server-status {
  background:
    linear-gradient(135deg, var(--ls-surface) 0%, rgb(16 49 53 / 82%) 100%);
}

@keyframes ls-soft-pop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.03);
  }
}

@media (width <= 1040px) {
  .ls-home-storefront {
    grid-template-columns: 1fr;
  }
}

@media (width <= 760px) {
  .ls-home-rank-cards,
  .ls-support-proof .store-sidebar,
  .ls-support-proof .widget-recent .purchases {
    grid-template-columns: 1fr;
  }

  .ls-home-rank-card {
    min-height: 160px;
  }

  .ls-home-rank-spotlight-head {
    display: block;
  }

  .ls-theme-toggle {
    width: 100%;
  }
}

@media (width > 960px) {
  .site-header {
    padding-top: 4px;
  }

  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 168px;
  }

  .site-header-inner .site-title {
    inset: 48px 235px 10px;
  }

  .site-header-inner .site-title img {
    max-height: 92px;
  }
}

.ls-home-support-paths {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--content-padding);
}

.ls-home-support-paths .ls-section-heading {
  display: block;
  margin-bottom: 12px;
  padding-inline: 0;
}

.ls-home-support-paths .ls-section-heading h3 {
  max-width: none;
  text-align: left;
  white-space: nowrap;
}

.ls-home-support-paths .site-home-categories {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}

.ls-home-support-paths .site-home-categories .category {
  --ls-home-category-accent: #76c77f;
  --ls-home-category-glow: rgb(118 199 127 / 24%);
  position: relative;
  display: grid;
  grid-template-rows: minmax(150px, auto) auto auto;
  align-content: center;
  justify-items: center;
  min-height: 250px;
  gap: 12px;
  border: 1px solid var(--ls-border);
  border-radius: 8px;
  padding: 24px 18px 22px;
  background:
    linear-gradient(145deg, rgb(255 253 244 / 98%) 0%, rgb(240 251 239 / 92%) 100%);
  color: var(--ls-text);
  box-shadow:
    inset 0 -5px 0 rgb(47 106 61 / 8%),
    0 14px 28px rgb(36 58 34 / 9%);
  text-align: center;
  overflow: hidden;
  transition:
    transform 0.16s ease-in-out,
    border-color 0.16s ease-in-out,
    box-shadow 0.16s ease-in-out;
}

.ls-home-support-paths .site-home-categories .category:nth-child(2) {
  --ls-home-category-accent: #8a6bc4;
  --ls-home-category-glow: rgb(138 107 196 / 24%);
}

.ls-home-support-paths .site-home-categories .category:nth-child(3) {
  --ls-home-category-accent: #e889b8;
  --ls-home-category-glow: rgb(232 137 184 / 24%);
}

.ls-home-support-paths .site-home-categories .category:nth-child(4) {
  --ls-home-category-accent: #f4bf2a;
  --ls-home-category-glow: rgb(244 191 42 / 26%);
}

.ls-home-support-paths .site-home-categories .category::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 6px;
  background: var(--ls-home-category-accent);
}

.ls-home-support-paths .site-home-categories .category::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(110deg, transparent 0 36%, rgb(255 255 255 / 58%) 48%, transparent 60% 100%);
  transform: translateX(-125%);
  pointer-events: none;
  animation: ls-home-category-sheen 7.2s ease-in-out infinite;
}

.ls-home-support-paths .site-home-categories .category > * {
  position: relative;
  z-index: 1;
}

.ls-home-support-paths .site-home-categories .category:hover,
.ls-home-support-paths .site-home-categories .category:focus-visible {
  border-color: rgb(244 191 42 / 72%);
  color: var(--ls-text);
  transform: translateY(-3px);
  box-shadow:
    inset 0 -5px 0 rgb(244 191 42 / 28%),
    0 18px 34px var(--ls-home-category-glow);
}

.ls-home-support-paths .site-home-categories .category .image {
  width: min(220px, 82%);
  height: 150px;
  max-height: 150px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgb(36 58 34 / 16%));
}

.ls-home-support-paths .site-home-categories .category .ls-home-category-rank-art {
  width: min(196px, 78%);
  filter:
    drop-shadow(0 14px 18px rgb(36 58 34 / 20%))
    drop-shadow(0 0 13px var(--ls-home-category-glow));
}

.ls-home-support-paths .site-home-categories .category .ls-home-category-scene-art {
  width: min(220px, 86%);
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 6px;
  object-fit: cover;
  box-shadow:
    0 12px 22px rgb(36 58 34 / 18%),
    0 0 0 4px var(--ls-home-category-glow);
}

.ls-home-category-copy {
  display: grid;
  gap: 6px;
}

.ls-home-category-copy strong {
  color: var(--ls-green-deep);
  font-size: clamp(26px, 3vw, 39px);
  line-height: 1;
}

.ls-home-category-copy small {
  color: var(--ls-text-muted);
  font-size: 15px;
  line-height: 1.3;
}

.ls-home-category-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ls-green-deep);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.ls-home-category-cta span {
  transition: transform 0.16s ease-in-out;
}

.ls-home-support-paths .site-home-categories .category:hover .ls-home-category-cta span,
.ls-home-support-paths .site-home-categories .category:focus-visible .ls-home-category-cta span {
  transform: translateX(3px);
}

@keyframes ls-home-category-sheen {
  0%,
  60% {
    transform: translateX(-125%);
  }

  82%,
  100% {
    transform: translateX(125%);
  }
}

.ls-home-storefront {
  display: block;
  margin-top: 0;
}

.ls-home-storefront .ls-store-hero-copy {
  min-height: 0;
  padding-block: clamp(28px, 4vw, 44px);
}

.ls-home-storefront .ls-store-hero-copy h2 {
  max-width: 12ch;
  font-size: clamp(44px, 6vw, 76px);
}

.ls-support-proof .store-sidebar {
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.72fr);
  grid-template-areas:
    "recent top"
    "featured featured"
    "status status";
  align-items: stretch;
}

.store-sidebar .widget-top-donator {
  grid-area: top;
  order: 2;
}

.store-sidebar .widget-featured {
  grid-area: featured;
  order: 3;
}

.store-sidebar .widget-server-status {
  grid-area: status;
  order: 4;
}

.ls-support-proof .widget-recent {
  grid-area: recent;
  grid-row: auto;
  min-width: 0;
  min-height: 0;
}

.ls-support-proof .store-sidebar > .widget {
  height: 100%;
}

.ls-support-proof .widget-recent .purchases {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
}

.ls-support-proof .widget-recent .purchase {
  min-width: 0;
  min-height: 62px;
  max-width: 100%;
  padding: 10px;
}

.ls-support-proof .widget-recent .purchase:nth-child(n + 5) {
  display: none;
}

.ls-support-proof .widget-recent .info {
  min-width: 0;
}

.ls-support-proof .widget-recent .username {
  max-width: 100%;
}

.ls-support-proof .widget-top-donator .widget-content {
  grid-template-columns: minmax(136px, 0.44fr) minmax(0, 0.56fr);
  align-items: center;
  min-height: 216px;
  overflow: hidden;
}

.ls-support-proof .widget-top-donator .widget-content::before {
  content: none;
}

.ls-support-proof .widget-top-donator {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgb(218 167 47 / 42%);
  background:
    linear-gradient(132deg, #fffdf4 0%, #fff7d8 52%, #eaf8ff 100%);
  box-shadow:
    inset 0 -5px 0 rgb(244 191 42 / 12%),
    0 16px 30px rgb(69 83 43 / 12%);
}

.ls-support-proof .widget-top-donator::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 6px;
  background: linear-gradient(90deg, #f4bf2a 0 34%, #74b653 34% 67%, #62b9d6 67%);
}

.ls-support-proof .widget-top-donator::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 8px;
  height: 8px;
  z-index: 0;
  background: rgb(244 191 42 / 40%);
  box-shadow:
    -22px 12px 0 rgb(98 185 214 / 28%),
    13px -24px 0 rgb(116 182 83 / 30%);
}

.ls-support-proof .widget-top-donator .widget-title,
.ls-support-proof .widget-top-donator .widget-content {
  position: relative;
  z-index: 2;
}

.ls-support-proof .widget-top-donator .widget-title {
  margin-bottom: 8px;
  padding-top: 3px;
  font-size: 22px;
}

.ls-top-supporter-badge {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid rgb(244 191 42 / 48%);
  border-radius: 999px;
  padding: 5px 8px;
  background: #fff8d7;
  color: #d37a16;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-top-supporter-visual {
  position: relative;
  display: grid;
  place-items: end center;
  width: min(146px, 100%);
  min-height: 190px;
}

.ls-top-supporter-visual::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  width: 122px;
  height: 28px;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #81bf57 0 28%, #815a35 28% 72%, #563b25 72% 100%);
  box-shadow:
    inset 0 -4px 0 rgb(38 27 18 / 18%),
    0 10px 18px rgb(36 58 34 / 18%);
  transform: translateX(-50%);
}

.ls-top-supporter-fallback {
  position: absolute;
  inset: auto auto 34px;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border: 1px solid rgb(47 106 61 / 16%);
  border-radius: 8px;
  background: linear-gradient(135deg, #e9f6dc 0%, #dff4ff 100%);
  color: var(--ls-green-deep);
  font-size: 28px;
  font-weight: 900;
  box-shadow: 0 12px 18px rgb(36 58 34 / 12%);
}

.ls-support-proof .widget-top-donator .ls-top-supporter-skin {
  position: absolute;
  right: 3px;
  bottom: 6px;
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 2px solid rgb(255 255 255 / 76%);
  border-radius: 8px;
  background: #e9f6dc;
  object-fit: cover;
  image-rendering: pixelated;
  box-shadow: 0 8px 14px rgb(36 58 34 / 14%);
}

.ls-support-proof .widget-top-donator .ls-top-supporter-body {
  position: relative;
  z-index: 2;
  width: 126px;
  height: 186px;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: pixelated;
  filter: drop-shadow(0 16px 18px rgb(36 58 34 / 18%));
}

.ls-support-proof .widget-top-donator .ls-top-supporter-body[hidden] {
  display: none;
}

.ls-top-supporter-visual.ls-player-card-body-skin-failed .ls-top-supporter-skin {
  right: auto;
  bottom: 45px;
  width: 82px;
  height: 82px;
}

.ls-top-supporter-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 24px 4px 8px 0;
}

.ls-top-supporter-kicker {
  margin: 0 0 5px !important;
  color: #b46b12 !important;
  font-size: 12px !important;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.ls-support-proof .widget-top-donator .username {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(22px, 2.4vw, 32px);
}

html[data-ls-theme="dark"] .ls-support-proof .widget-top-donator {
  border-color: rgb(244 191 42 / 34%);
  background:
    linear-gradient(132deg, #202d22 0%, #35351e 52%, #183b45 100%);
}

html[data-ls-theme="dark"] .ls-top-supporter-kicker {
  color: #ffe08a !important;
}

.ls-support-proof .widget-featured {
  grid-column: 1 / -1;
}

.ls-featured-elite {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  border: 2px solid rgb(98 178 214 / 62%) !important;
  background:
    linear-gradient(112deg, #eef9ff 0%, #ecf8e8 45%, #fff3c5 100%) !important;
  box-shadow:
    0 18px 36px rgb(37 102 127 / 14%),
    inset 0 0 0 1px rgb(255 255 255 / 72%) !important;
}

.ls-featured-elite::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 6px;
  background: linear-gradient(90deg, #63c7df 0%, #8acb65 48%, #f4bf2a 100%);
  pointer-events: none;
}

.ls-featured-elite::after {
  content: "";
  position: absolute;
  inset: -45% -35%;
  z-index: 0;
  background: linear-gradient(
    106deg,
    transparent 42%,
    rgb(255 255 255 / 55%) 49%,
    transparent 56%
  );
  transform: translateX(-65%);
  animation: ls-featured-elite-sheen 7s ease-in-out infinite;
  pointer-events: none;
}

.ls-featured-elite-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 164px minmax(0, 1fr) minmax(220px, 0.5fr);
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
  min-height: 220px;
  padding: 24px clamp(24px, 4vw, 54px);
}

.ls-featured-elite-art {
  display: grid;
  place-items: center;
  width: 164px;
  height: 164px;
}

.ls-featured-elite-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgb(32 83 104 / 23%));
  animation: ls-featured-elite-float 4.4s ease-in-out infinite;
}

.ls-featured-elite-copy {
  min-width: 0;
}

.ls-featured-elite-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.ls-featured-elite-badges span {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  border: 1px solid rgb(55 129 164 / 23%);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgb(255 255 255 / 72%);
  color: #28657f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ls-featured-elite-badges span:last-child {
  border-color: rgb(211 122 22 / 26%);
  background: #fff8d7;
  color: #b3650e;
}

.ls-featured-elite-favorite {
  margin-bottom: 4px;
  color: #2f6a3d;
  font-size: 14px;
  font-weight: 800;
}

.ls-featured-elite-copy h4 {
  margin: 0;
  font-size: 36px;
  line-height: 1.05;
}

.ls-featured-elite-copy h4 a {
  color: #173d4d;
}

.ls-featured-elite-copy h4 a:hover,
.ls-featured-elite-copy h4 a:focus-visible {
  color: #28657f;
}

.ls-featured-elite-description {
  max-width: 55ch;
  margin-top: 10px;
  color: #50685a;
  font-size: 16px;
  line-height: 1.45;
}

.ls-featured-elite-actions {
  width: 100%;
  max-width: 260px;
  justify-self: end;
}

.ls-featured-elite-actions .product-actions {
  display: grid;
  gap: 10px;
  width: 100%;
}

.ls-featured-elite-actions .price {
  margin: 0;
  color: #50685a;
  font-size: 13px;
  text-align: center;
}

.ls-featured-elite-actions .price strong {
  color: #173d4d;
  font-size: 32px;
  font-weight: 900;
}

.ls-featured-elite-actions .discount {
  display: block;
  margin: 0 0 2px !important;
}

.ls-featured-elite-actions .btn-primary,
.ls-featured-elite-actions .btn-secondary {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgb(179 101 14 / 26%);
  border-radius: 8px;
  background: #f4bf2a;
  color: #172214;
  font-size: 18px;
  line-height: 52px;
  box-shadow: 0 5px 0 #c98e0d, 0 12px 22px rgb(83 66 19 / 17%);
}

.ls-featured-elite-actions .btn-primary:hover,
.ls-featured-elite-actions .btn-primary:focus-visible,
.ls-featured-elite-actions .btn-secondary:hover,
.ls-featured-elite-actions .btn-secondary:focus-visible {
  background: #ffd65a;
  color: #172214;
  transform: translateY(-1px);
  box-shadow: 0 6px 0 #c98e0d, 0 15px 24px rgb(83 66 19 / 21%);
}

.ls-featured-elite-actions .gift {
  display: none;
}

html[data-ls-theme="dark"] .ls-featured-elite {
  border-color: rgb(93 190 218 / 48%) !important;
  background:
    linear-gradient(112deg, #153843 0%, #1e432b 48%, #4c421b 100%) !important;
  box-shadow:
    0 18px 36px rgb(0 0 0 / 28%),
    inset 0 0 0 1px rgb(255 255 255 / 8%) !important;
}

html[data-ls-theme="dark"] .ls-featured-elite-badges span {
  border-color: rgb(121 205 231 / 34%);
  background: rgb(17 48 58 / 78%);
  color: #b7ebf7;
}

html[data-ls-theme="dark"] .ls-featured-elite-badges span:last-child {
  border-color: rgb(244 191 42 / 34%);
  background: rgb(85 68 18 / 78%);
  color: #ffe28a;
}

html[data-ls-theme="dark"] .ls-featured-elite-favorite {
  color: #bce8ac;
}

html[data-ls-theme="dark"] .ls-featured-elite-copy h4 a,
html[data-ls-theme="dark"] .ls-featured-elite-actions .price strong {
  color: #f5fbff;
}

html[data-ls-theme="dark"] .ls-featured-elite-description,
html[data-ls-theme="dark"] .ls-featured-elite-actions .price {
  color: #d2e4d5;
}

body.page-category .store-sidebar .widget-featured {
  display: none !important;
}

@keyframes ls-featured-elite-sheen {
  0%,
  62% {
    transform: translateX(-65%);
  }

  82%,
  100% {
    transform: translateX(65%);
  }
}

@keyframes ls-featured-elite-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.ls-support-proof .widget-server-status {
  grid-column: 1 / -1;
}

.ls-support-proof .widget-server-status .ls-server-status-card {
  grid-template-columns: minmax(0, 0.85fr) minmax(180px, 1fr) minmax(170px, 0.82fr);
  align-items: stretch;
}

body.page-category .store-sidebar .widget-recent,
body.page-category .store-sidebar .widget-top-donator,
.page-package .store-sidebar .widget-recent,
.page-package .store-sidebar .widget-top-donator,
.page-package .store-sidebar .widget-featured {
  display: none !important;
}

.page-category .store-sidebar .widget-server-status {
  display: block;
}

html[data-ls-theme="dark"] .ls-home-support-paths .site-home-categories .category,
html[data-ls-theme="dark"] .ls-home-storefront .ls-store-hero-copy {
  background:
    linear-gradient(145deg, rgb(24 37 27 / 96%) 0%, rgb(18 47 53 / 78%) 100%);
}

@media (width <= 1040px) {
  .ls-home-storefront,
  .ls-support-proof .store-sidebar {
    grid-template-columns: 1fr;
  }

  .ls-support-proof .store-sidebar {
    grid-template-areas:
      "recent"
      "featured"
      "top"
      "status";
  }

  .ls-support-proof .widget-recent {
    grid-row: auto;
  }
}

@media (width <= 760px) {
  .ls-home-support-paths .ls-section-heading {
    display: block;
  }

  .ls-home-support-paths .ls-section-heading h3 {
    max-width: none;
    text-align: left;
    white-space: normal;
  }

  .site-sale-banner {
    align-items: flex-start;
    flex-direction: column;
    font-size: 16px;
    text-align: left;
  }

  .ls-support-proof .widget-server-status .ls-server-status-card {
    grid-template-columns: 1fr;
  }

  .ls-support-proof .widget-top-donator .widget-content {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .ls-featured-elite-inner {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 18px 24px;
  }

  .ls-featured-elite-art {
    width: 104px;
    height: 104px;
  }

  .ls-featured-elite-copy h4 {
    font-size: 30px;
  }

  .ls-featured-elite-description {
    font-size: 14px;
  }

  .ls-featured-elite-actions {
    grid-column: 1 / -1;
    max-width: none;
    justify-self: stretch;
  }

  .ls-top-supporter-copy {
    padding-top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-featured-elite::after,
  .ls-featured-elite-art img,
  .site-sale-banner::after,
  .ls-home-support-paths .site-home-categories .category::after,
  .ls-rank-package-hero::after,
  .ls-rank-package-visual img,
  .ls-rank-emblem {
    animation: none;
  }
}

@media (width <= 520px) {
  .ls-home-support-paths .site-home-categories .category {
    grid-template-rows: minmax(122px, auto) auto auto;
    min-height: 238px;
  }

  .ls-home-support-paths .site-home-categories .category .image {
    width: min(168px, 76%);
    height: 122px;
    max-height: 122px;
  }
}

@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 256px;
  }

  .site-header-inner .ls-store-banner-title {
    inset: 46px clamp(32px, 7vw, 140px) 16px;
    width: auto;
    max-width: none;
  }

  .site-header-inner .ls-store-banner-title img {
    width: 100%;
    height: auto;
    max-height: 164px;
    object-fit: contain;
    object-position: center;
  }
}

@media (width > 1180px) {
  .site-header {
    max-width: min(calc(100% - 24px), 1800px);
    padding-inline: 0;
  }

  .site-header-inner .ls-store-banner-title {
    inset: 42px clamp(24px, 5vw, 88px) 16px;
  }

  .page-category-ranks .ls-ranks-content {
    --rank-sidebar-width: 224px;
    grid-template-columns: var(--rank-sidebar-width) minmax(0, 1fr);
    gap: 28px;
    max-width: min(calc(100% - (var(--content-padding) * 2)), 1680px);
  }

  body.is-sidebar-right.page-category-ranks .ls-ranks-content {
    grid-template-columns: minmax(0, 1fr) var(--rank-sidebar-width);
  }

  .page-category-ranks .store-sidebar {
    position: sticky;
    top: 104px;
    align-self: start;
    max-height: calc(100dvh - 124px);
    overflow: auto;
  }

  .page-category-ranks .store-sidebar .widget-server-status {
    display: block;
  }

  .page-category-ranks .store-sidebar .widget-server-status .widget-title {
    font-size: 20px;
  }

  .page-category-ranks .store-sidebar .ls-server-status-card {
    gap: 8px;
  }
}

@media (width > 1500px) {
  :root {
    --content-inner-width: 1400px;
    --sidebar-width: 300px;
  }

  .site-content-widgets {
    gap: 32px;
  }

  .ls-cosmetics-page .store-products-images,
  .ls-keyall-page .store-products-images {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .ls-home-support-paths .site-home-categories .category {
    min-height: 348px;
  }

  .ls-home-support-paths .site-home-categories .category .image {
    width: min(260px, 84%);
    height: 172px;
    max-height: 172px;
  }

  .ls-home-support-paths .site-home-categories .category .ls-home-category-rank-art {
    width: min(226px, 80%);
  }
}

.ls-home-storefront .ls-store-hero-copy {
  isolation: isolate;
  min-height: clamp(360px, 28vw, 460px);
  background:
    linear-gradient(110deg, rgb(47 84 45 / 90%) 0%, rgb(88 115 60 / 76%) 45%, rgb(35 104 118 / 66%) 100%);
}

.ls-home-storefront .ls-store-hero-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, rgb(24 62 34 / 58%) 0%, rgb(45 76 38 / 34%) 33%, rgb(35 91 78 / 10%) 64%, rgb(14 83 104 / 6%) 100%),
    linear-gradient(180deg, rgb(255 196 78 / 10%), rgb(18 75 38 / 14%)),
    url("https://loungesmp.net/assets/backgrounds/support-treehouse-community-bg.webp");
  background-position: 50% 45%;
  background-size: cover;
  opacity: 0.84;
  pointer-events: none;
}

.ls-home-storefront .ls-store-hero-copy::before {
  z-index: 1;
  opacity: 0.14;
}

.ls-home-storefront .ls-store-hero-copy > * {
  position: relative;
  z-index: 2;
}

.ls-home-storefront .ls-store-hero-copy .ls-store-kicker {
  color: #ffe08a;
  text-shadow: 0 2px 10px rgb(6 38 18 / 54%);
}

.ls-home-storefront .ls-store-hero-copy > p:not(.ls-store-kicker) {
  max-width: 42ch;
}

.ls-home-storefront .ls-store-hero-copy h2,
.ls-home-storefront .ls-store-hero-copy > p:not(.ls-store-kicker) {
  color: #fffbe8;
  text-shadow: 0 3px 16px rgb(6 38 18 / 62%);
}

html[data-ls-theme="dark"] .ls-home-storefront .ls-store-hero-copy {
  background:
    linear-gradient(90deg, rgb(17 28 19 / 98%) 0%, rgb(21 39 25 / 94%) 46%, rgb(13 41 48 / 88%) 100%);
}

html[data-ls-theme="dark"] .ls-home-storefront .ls-store-hero-copy::after {
  opacity: 0.66;
}

.ls-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ls-rank-emblem-shell {
  position: relative;
  overflow: hidden;
  min-height: 170px;
}

.ls-rank-emblem {
  display: block;
  width: min(148px, 94%);
  height: 148px;
  object-fit: contain;
  filter: drop-shadow(0 12px 16px rgb(36 58 34 / 18%));
  animation: ls-bob 5.2s ease-in-out infinite;
}

.ls-rank-table-product-member .ls-rank-emblem {
  filter:
    drop-shadow(0 10px 14px rgb(42 120 62 / 22%))
    drop-shadow(0 0 10px rgb(112 207 116 / 16%));
}

.ls-rank-table-product-elite .ls-rank-emblem {
  filter:
    drop-shadow(0 10px 14px rgb(62 78 151 / 22%))
    drop-shadow(0 0 11px rgb(177 111 214 / 18%));
}

.ls-rank-table-product-supreme .ls-rank-emblem {
  filter:
    drop-shadow(0 11px 15px rgb(151 93 18 / 24%))
    drop-shadow(0 0 13px rgb(255 193 70 / 24%));
}

.ls-rank-upgrade-emblem {
  flex: none;
  width: 126px;
  height: 126px;
  margin: -14px -4px -18px 0;
  object-fit: contain;
}

.ls-rank-upgrade-card-elite::before {
  background: linear-gradient(90deg, #39a7e0, #9b69d1);
}

.ls-rank-upgrade-card-supreme::before {
  background: linear-gradient(90deg, #f4bf2a, #e88ad3);
}

.ls-rank-upgrade-card-elite .ls-rank-label {
  background: #e9e7ff;
  color: #4d3a86;
  box-shadow: 0 0 0 4px rgb(111 83 171 / 14%);
}

.ls-rank-upgrade-card-supreme .ls-rank-label {
  background: #fff3bd;
  color: #5c4310;
  box-shadow: 0 0 0 4px rgb(244 191 42 / 16%);
}

.ls-rank-upgrade-card .product-actions .add,
.ls-rank-upgrade-card .product-actions .subscribe,
.ls-rank-upgrade-card .product-actions .open-basket {
  min-height: 58px;
  padding: 10px 12px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

html[data-ls-theme="dark"] .ls-login-panel h2,
html[data-ls-theme="dark"] .ls-login-platform-option strong,
html[data-ls-theme="dark"] .ls-login-note strong {
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-login-copy,
html[data-ls-theme="dark"] .ls-login-note {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-login-platform {
  border-color: rgb(223 244 196 / 14%);
  background: #111a14;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
}

html[data-ls-theme="dark"] .ls-login-platform-option {
  border-color: rgb(223 244 196 / 12%);
  background: #18251b;
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-login-platform-option.active {
  border-color: rgb(145 215 146 / 34%);
  background: #213226;
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-login-platform-option small {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-login-note {
  border-color: rgb(115 208 255 / 24%);
  background: rgb(17 56 67 / 54%);
}

html[data-ls-theme="dark"] .ls-login-form[data-platform="bedrock"] .ls-login-note {
  border-color: rgb(255 212 91 / 38%);
  background: linear-gradient(135deg, rgb(56 47 20 / 92%) 0%, rgb(17 56 67 / 72%) 100%);
  color: #e8f4e4;
}

html[data-ls-theme="dark"] .ls-rank-upgrade-hero {
  border-color: rgb(255 212 91 / 22%);
  background: linear-gradient(135deg, #1f2d22 0%, #172b2e 52%, #252034 100%);
  box-shadow:
    0 16px 34px rgb(0 0 0 / 24%),
    inset 0 1px 0 rgb(255 255 255 / 6%);
}

html[data-ls-theme="dark"] .ls-rank-upgrade-hero h1,
html[data-ls-theme="dark"] .ls-rank-upgrade-hero .ls-store-kicker {
  color: #ffd45b;
}

html[data-ls-theme="dark"] .ls-rank-upgrade-hero p:not(.ls-store-kicker) {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-rank-upgrade-card {
  border-color: rgb(223 244 196 / 14%);
  background: linear-gradient(145deg, #17251b 0%, #1d2920 48%, #172a30 100%);
  color: #f7fff4;
  box-shadow: 0 14px 32px rgb(0 0 0 / 24%);
}

html[data-ls-theme="dark"] .ls-rank-upgrade-card h3,
html[data-ls-theme="dark"] .ls-rank-upgrade-card .ls-rank-mini-perks li {
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-rank-upgrade-card .ls-rank-summary {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-rank-upgrade-card .product-actions .price {
  color: #cfe5ca;
}

html[data-ls-theme="dark"] .ls-rank-upgrade-card .product-actions .price strong {
  color: #ffe38a;
}

html[data-ls-theme="dark"] .ls-rank-mini-perks .ls-rank-more {
  border-color: rgb(255 212 91 / 28%);
  background: #2f2b19;
}

html[data-ls-theme="dark"] .ls-rank-mini-perks .ls-rank-more a {
  color: #ffe38a;
}

html[data-ls-theme="dark"] .ls-cosmetics-card {
  border-color: rgb(223 244 196 / 14%);
  background: linear-gradient(145deg, #17251b 0%, #172a30 52%, #2c2030 100%);
  color: #f7fff4;
  box-shadow: 0 14px 30px rgb(0 0 0 / 24%);
}

html[data-ls-theme="dark"] .ls-cosmetics-card-media {
  border-color: rgb(223 244 196 / 12%);
  background: rgb(255 255 255 / 5%);
}

html[data-ls-theme="dark"] .ls-cosmetics-card strong {
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-cosmetics-card-kicker,
html[data-ls-theme="dark"] .ls-cosmetics-card-copy {
  color: #bfd1b9;
}

html[data-ls-theme="dark"] .ls-cosmetics-card-action {
  border-color: rgb(255 212 91 / 24%);
  background: #2f2b19;
  color: #ffe38a;
}

@media (width <= 600px) {
  .site-header-inner {
    padding-top: 58px;
  }

  .ls-rank-emblem-shell {
    min-height: 146px;
  }
}

/* Keep the store identity visible while giving active promotions priority. */
@media (width > 960px) {
  .site-header-inner,
  body.is-navigation-horizontal .site-header-inner {
    height: 210px;
  }

  .site-header-inner .ls-store-banner-title {
    inset: 24px clamp(24px, 5vw, 88px) 14px;
    width: auto;
    max-width: none;
  }

  .site-header-inner .ls-store-banner-title img {
    width: 100%;
    height: auto;
    max-height: 156px;
    object-fit: contain;
    object-position: center;
  }
}

/* Exact Minecraft item art for crate bundles. */
.ls-keyall-art-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
}

.ls-keyall-art-stage .ls-keyall-product-art {
  position: relative;
  z-index: 1;
  display: block;
  width: 68%;
  height: 68%;
  max-height: none;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  transform: none;
  filter:
    drop-shadow(0 12px 16px rgb(29 31 42 / 22%))
    drop-shadow(0 0 12px rgb(155 104 214 / 16%));
}

.ls-keyall-art-stage-cosmetic .ls-keyall-product-art {
  width: 88%;
  height: 74%;
  filter:
    drop-shadow(0 12px 14px rgb(87 91 106 / 22%))
    drop-shadow(0 0 11px rgb(239 139 213 / 20%));
}

.ls-keyall-keys {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ls-keyall-key {
  position: absolute;
  display: block;
  width: 46%;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 4px 4px rgb(29 18 56 / 34%))
    drop-shadow(0 0 8px rgb(175 117 255 / 42%));
}

.ls-keyall-art-stage-1 .ls-keyall-key {
  top: -5%;
  left: 50%;
  width: 48%;
  transform: translateX(-50%);
}

.ls-keyall-art-stage-3 .ls-keyall-key {
  width: 40%;
}

.ls-keyall-art-stage-3 .ls-keyall-key-1 {
  top: -9%;
  left: 50%;
  transform: translateX(-50%);
}

.ls-keyall-art-stage-3 .ls-keyall-key-2 {
  bottom: -9%;
  left: 2%;
}

.ls-keyall-art-stage-3 .ls-keyall-key-3 {
  right: 2%;
  bottom: -9%;
}

.ls-keyall-art-stage-5 .ls-keyall-key {
  width: 34%;
}

.ls-keyall-art-stage-5 .ls-keyall-key-1 {
  top: -8%;
  left: 50%;
  transform: translateX(-50%);
}

.ls-keyall-art-stage-5 .ls-keyall-key-2 {
  top: 22%;
  left: -2%;
}

.ls-keyall-art-stage-5 .ls-keyall-key-3 {
  top: 22%;
  right: -2%;
}

.ls-keyall-art-stage-5 .ls-keyall-key-4 {
  bottom: -9%;
  left: 12%;
}

.ls-keyall-art-stage-5 .ls-keyall-key-5 {
  right: 12%;
  bottom: -9%;
}

.ls-keyall-art-stage-10 .ls-keyall-key {
  width: 27%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-1 {
  top: -7%;
  left: 18%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-2 {
  top: -7%;
  right: 18%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-3 {
  top: 15%;
  left: -1%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-4 {
  top: 15%;
  right: -1%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-5 {
  top: 39%;
  left: -2%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-6 {
  top: 39%;
  right: -2%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-7 {
  bottom: -7%;
  left: 5%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-8 {
  bottom: -7%;
  left: 28%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-9 {
  right: 28%;
  bottom: -7%;
}

.ls-keyall-art-stage-10 .ls-keyall-key-10 {
  right: 5%;
  bottom: -7%;
}

.ls-keyall-page .ls-keyall-bundle .image-link,
.ls-keyall-page .ls-keyall-bundle-cosmetic .image-link {
  border-color: transparent;
  background: transparent;
  overflow: visible;
}

.ls-keyall-page .ls-keyall-bundle .image-link::after {
  display: none;
}

.ls-keyall-page .ls-keyall-bundle:hover .ls-keyall-product-art {
  transform: scale(1.035);
}

.ls-keyall-product-package > .ls-keyall-art-stage {
  width: min(560px, 100%);
  aspect-ratio: 1;
  margin-inline: auto;
}

.ls-home-support-paths .site-home-categories .category .ls-home-category-clean-art {
  width: min(220px, 86%);
  height: 150px;
  max-height: 150px;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  box-shadow: none;
  filter: drop-shadow(0 12px 16px var(--ls-home-category-glow));
}

.ls-home-support-paths .ls-home-category-clean-art.ls-keyall-art-stage .ls-keyall-product-art {
  width: 68%;
  height: 68%;
}

/* Draw attention to the rank differences players care about most. */
.ls-ranks-page .ls-rank-table th:first-child,
.ls-ranks-page .ls-rank-table td:first-child,
.ls-ranks-page .ls-rank-table th:not(:first-child),
.ls-ranks-page .ls-rank-table td:not(:first-child) {
  width: 25%;
}

.ls-rank-highlight {
  --ls-rank-highlight: #a36ad8;
  --ls-rank-highlight-soft: rgb(163 106 216 / 13%);
}

.ls-rank-highlight-homes {
  --ls-rank-highlight: #62a84d;
  --ls-rank-highlight-soft: rgb(98 168 77 / 13%);
}

.ls-rank-highlight-flight {
  --ls-rank-highlight: #39a7e0;
  --ls-rank-highlight-soft: rgb(57 167 224 / 14%);
}

.ls-rank-highlight-mobs {
  --ls-rank-highlight: #d88939;
  --ls-rank-highlight-soft: rgb(216 137 57 / 13%);
}

.ls-rank-highlight td {
  border-top: 2px solid var(--ls-rank-highlight);
  border-bottom: 2px solid var(--ls-rank-highlight);
}

.ls-rank-highlight td:first-child {
  position: relative;
  background:
    linear-gradient(105deg, var(--ls-rank-highlight-soft), rgb(255 253 244 / 96%)) !important;
  box-shadow:
    inset 5px 0 0 var(--ls-rank-highlight),
    inset 0 1px 0 rgb(255 255 255 / 74%);
}

.ls-rank-highlight-label {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.ls-rank-highlight-icon-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 7px;
  background: rgb(255 253 244 / 82%);
  box-shadow:
    0 6px 13px var(--ls-rank-highlight-soft),
    0 0 0 3px var(--ls-rank-highlight-soft);
  overflow: hidden;
}

.ls-rank-highlight-icon {
  display: block;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgb(36 58 34 / 18%));
  animation: ls-rank-highlight-icon-float 4.2s ease-in-out infinite;
}

.ls-rank-highlight-keys .ls-rank-highlight-icon {
  width: 58px;
  height: 58px;
  image-rendering: pixelated;
}

.ls-rank-highlight-flight .ls-rank-highlight-icon {
  width: 60px;
  height: 42px;
}

.ls-rank-highlight-copy strong,
.ls-rank-highlight-copy small {
  display: block;
}

.ls-rank-highlight-copy strong {
  color: #203d26;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.15;
}

.ls-rank-highlight-copy small {
  margin-top: 3px;
  color: #61705d;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.ls-rank-highlight .ls-rank-feature,
.ls-rank-highlight .ls-yes {
  border: 1px solid var(--ls-rank-highlight);
  box-shadow:
    0 0 0 3px var(--ls-rank-highlight-soft),
    0 8px 16px var(--ls-rank-highlight-soft);
  animation: ls-rank-highlight-value 3.6s ease-in-out infinite;
}

.ls-rank-highlight td:nth-child(3) .ls-rank-feature,
.ls-rank-highlight td:nth-child(3) .ls-yes {
  animation-delay: -0.45s;
}

.ls-rank-highlight td:nth-child(4) .ls-rank-feature,
.ls-rank-highlight td:nth-child(4) .ls-yes {
  animation-delay: -0.9s;
}

@keyframes ls-rank-highlight-icon-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes ls-rank-highlight-value {
  0%,
  100% {
    filter: brightness(1);
    transform: translateY(0);
  }

  50% {
    filter: brightness(1.08);
    transform: translateY(-2px);
  }
}

html[data-ls-theme="dark"] .ls-rank-highlight td:first-child {
  background: linear-gradient(105deg, var(--ls-rank-highlight-soft), #111d15) !important;
  box-shadow: inset 5px 0 0 var(--ls-rank-highlight);
}

html[data-ls-theme="dark"] .ls-rank-highlight-icon-shell {
  border-color: rgb(255 255 255 / 10%);
  background: #1b2820;
}

html[data-ls-theme="dark"] .ls-rank-highlight-copy strong {
  color: #f7fff4;
}

html[data-ls-theme="dark"] .ls-rank-highlight-copy small {
  color: #b8c9b4;
}

@media (width <= 760px) {
  .ls-rank-highlight-label {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 6px;
  }

  .ls-rank-highlight-icon-shell {
    width: 36px;
    height: 36px;
  }

  .ls-rank-highlight-icon,
  .ls-rank-highlight-keys .ls-rank-highlight-icon {
    width: 44px;
    height: 44px;
  }

  .ls-rank-highlight-copy strong {
    font-size: 13px;
  }

  .ls-rank-highlight-copy small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ls-rank-highlight-icon,
  .ls-rank-highlight .ls-rank-feature,
  .ls-rank-highlight .ls-yes {
    animation: none;
  }
}

html[data-ls-theme="dark"] .price strong {
  color: #ffe38a !important;
}

.price del.discount,
.price .discount {
  color: #c92f2f !important;
  opacity: 1;
  font-weight: 800 !important;
  text-decoration-line: line-through !important;
  text-decoration-color: #df241b !important;
  text-decoration-thickness: 2px !important;
  text-decoration-skip-ink: none;
}

html[data-ls-theme="dark"] .price del.discount,
html[data-ls-theme="dark"] .price .discount {
  color: #ff8175 !important;
  text-decoration-color: #ff493c !important;
}

.site-sale-banner.ls-summer-sale {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  width: min(calc(100% - (var(--content-padding) * 2)), var(--content-width));
  min-height: 104px;
  margin: 0 auto;
  border: 2px solid #d88b00;
  border-radius: 8px;
  padding: 14px 22px;
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 20px, rgb(255 255 255 / 14%) 20px 24px, transparent 24px 44px),
    linear-gradient(100deg, #fff2a6 0%, #ffc62f 52%, #65d9ca 100%);
  color: #172214;
  box-shadow:
    inset 0 -6px 0 rgb(130 78 0 / 18%),
    inset 0 1px 0 rgb(255 255 255 / 78%),
    0 16px 34px rgb(36 58 34 / 18%),
    0 0 0 5px rgb(244 191 42 / 12%);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.site-sale-banner.ls-summer-sale::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(90deg, transparent 0 92px, rgb(255 255 255 / 13%) 92px 96px);
  pointer-events: none;
}

.site-sale-banner.ls-summer-sale::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(105deg, transparent 0 39%, rgb(255 255 255 / 58%) 48%, transparent 57% 100%);
  transform: translateX(-125%);
  pointer-events: none;
  animation: ls-summer-sale-shine 5.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.site-sale-banner.ls-summer-sale:hover,
.site-sale-banner.ls-summer-sale:focus-visible {
  color: #172214;
  transform: translateY(-2px);
  box-shadow:
    inset 0 -6px 0 rgb(130 78 0 / 20%),
    inset 0 1px 0 rgb(255 255 255 / 82%),
    0 21px 40px rgb(36 58 34 / 23%),
    0 0 0 6px rgb(244 191 42 / 18%);
}

.site-sale-banner.ls-summer-sale:focus-visible {
  outline: 3px solid #1d5940;
  outline-offset: 3px;
}

.ls-summer-sale-sun,
.ls-summer-sale-copy,
.site-sale-banner.ls-summer-sale .ls-sale-banner-cta {
  position: relative;
  z-index: 2;
}

.ls-summer-sale-sun {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 8px 8px rgb(130 78 0 / 22%));
  animation: ls-summer-sun-float 3.4s ease-in-out infinite;
}

.ls-summer-sale-sun::before,
.ls-summer-sale-sun::after {
  content: "";
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: #fff5ab;
  box-shadow: 0 0 12px rgb(255 235 119 / 88%);
  transform: rotate(45deg);
  animation: ls-summer-sparkle 2.2s ease-in-out infinite;
}

.ls-summer-sale-sun::before {
  top: 3px;
  right: 3px;
}

.ls-summer-sale-sun::after {
  bottom: 7px;
  left: 2px;
  width: 6px;
  height: 6px;
  animation-delay: -1.1s;
}

.ls-summer-sale-sun-core {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border: 3px solid #a65c00;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff4a4 0 12%, #ffd84b 13% 62%, #f3a000 63% 100%);
  box-shadow:
    inset -4px -5px 0 rgb(216 117 0 / 28%),
    0 0 0 5px rgb(255 226 97 / 36%),
    0 0 22px rgb(255 193 30 / 62%);
  animation: ls-summer-rays-spin 10s linear infinite;
}

.ls-summer-sale-sun-core::before {
  content: "";
  position: absolute;
  inset: -15px;
  background:
    linear-gradient(#f6ad0b 0 0) center top / 6px 10px no-repeat,
    linear-gradient(#f6ad0b 0 0) center bottom / 6px 10px no-repeat,
    linear-gradient(#f6ad0b 0 0) left center / 10px 6px no-repeat,
    linear-gradient(#f6ad0b 0 0) right center / 10px 6px no-repeat;
}

.ls-summer-sale-sun-core::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -9px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #f6ad0b;
  box-shadow:
    50px 0 0 #f6ad0b,
    0 50px 0 #f6ad0b,
    50px 50px 0 #f6ad0b;
  transform: rotate(45deg);
}

.ls-summer-sale-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ls-summer-sale-kicker {
  color: #754500;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.ls-summer-sale-copy strong {
  color: #173c2a;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 rgb(255 255 255 / 48%);
  animation: ls-summer-headline-glow 3.4s ease-in-out infinite;
}

.ls-summer-sale-note {
  color: #354a31;
  font-size: 14px;
  font-weight: 800;
}

.site-sale-banner.ls-summer-sale .ls-sale-banner-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  border: 2px solid rgb(23 34 20 / 18%);
  border-radius: 7px;
  padding: 10px 18px;
  background: #173c2a;
  color: #fff9d3;
  box-shadow:
    0 5px 0 rgb(23 34 20 / 24%),
    0 10px 20px rgb(36 58 34 / 14%);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  animation: ls-summer-cta-pop 3.2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.site-sale-banner.ls-summer-sale .ls-sale-banner-cta span {
  display: inline-block;
  animation: ls-summer-cta-arrow 1.15s ease-in-out infinite;
}

.site-sale-banner.ls-summer-sale:hover .ls-sale-banner-cta,
.site-sale-banner.ls-summer-sale:focus-visible .ls-sale-banner-cta {
  background: #205d3e;
}

html[data-ls-theme="dark"] .site-sale-banner.ls-summer-sale {
  border-color: #f6ca42;
  background:
    repeating-linear-gradient(135deg, transparent 0 20px, rgb(255 255 255 / 7%) 20px 24px, transparent 24px 44px),
    linear-gradient(100deg, #493806 0%, #8a6811 52%, #145d58 100%);
  color: #fffbe2;
  box-shadow:
    inset 0 -6px 0 rgb(0 0 0 / 22%),
    inset 0 1px 0 rgb(255 255 255 / 18%),
    0 18px 38px rgb(0 0 0 / 30%),
    0 0 0 5px rgb(246 202 66 / 12%);
}

html[data-ls-theme="dark"] .site-sale-banner.ls-summer-sale:hover,
html[data-ls-theme="dark"] .site-sale-banner.ls-summer-sale:focus-visible {
  color: #fffbe2;
}

html[data-ls-theme="dark"] .ls-summer-sale-kicker {
  color: #ffe38a;
}

html[data-ls-theme="dark"] .ls-summer-sale-copy strong {
  color: #fffbd8;
  text-shadow: 0 2px 0 rgb(0 0 0 / 28%);
}

html[data-ls-theme="dark"] .ls-summer-sale-note {
  color: #d9ead5;
}

html[data-ls-theme="dark"] .site-sale-banner.ls-summer-sale .ls-sale-banner-cta {
  border-color: rgb(255 255 255 / 16%);
  background: #ffe38a;
  color: #172214;
  box-shadow:
    0 5px 0 rgb(0 0 0 / 26%),
    0 10px 22px rgb(0 0 0 / 22%);
}

html[data-ls-theme="dark"] .site-sale-banner.ls-summer-sale:hover .ls-sale-banner-cta,
html[data-ls-theme="dark"] .site-sale-banner.ls-summer-sale:focus-visible .ls-sale-banner-cta {
  background: #fff1b0;
}

@keyframes ls-summer-sale-shine {
  0%,
  55% {
    transform: translateX(-125%);
  }

  76%,
  100% {
    transform: translateX(125%);
  }
}

@keyframes ls-summer-sun-float {
  0%,
  100% {
    filter: drop-shadow(0 8px 8px rgb(130 78 0 / 22%));
    transform: translateY(1px) scale(1);
  }

  50% {
    filter: drop-shadow(0 10px 12px rgb(255 171 15 / 42%));
    transform: translateY(-3px) scale(1.06);
  }
}

@keyframes ls-summer-rays-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ls-summer-sparkle {
  0%,
  100% {
    opacity: 0.25;
    transform: rotate(45deg) scale(0.55);
  }

  48% {
    opacity: 1;
    transform: rotate(45deg) scale(1.2);
  }
}

@keyframes ls-summer-headline-glow {
  0%,
  100% {
    text-shadow: 0 2px 0 rgb(255 255 255 / 48%);
  }

  50% {
    text-shadow:
      0 2px 0 rgb(255 255 255 / 58%),
      0 0 16px rgb(255 245 167 / 54%);
  }
}

@keyframes ls-summer-cta-pop {
  0%,
  68%,
  100% {
    transform: translateY(0) scale(1);
  }

  76% {
    transform: translateY(-2px) scale(1.035);
  }

  84% {
    transform: translateY(0) scale(1);
  }
}

@keyframes ls-summer-cta-arrow {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(4px);
  }
}

@media (width <= 760px) {
  .site-sale-banner.ls-summer-sale {
    grid-template-columns: 58px minmax(0, 1fr);
    min-height: 0;
    gap: 11px;
    padding: 12px 14px 14px;
  }

  .ls-summer-sale-sun {
    width: 56px;
    height: 56px;
  }

  .ls-summer-sale-sun-core {
    transform: scale(0.78);
  }

  .ls-summer-sale-copy strong {
    font-size: 23px;
  }

  .ls-summer-sale-note {
    font-size: 12px;
  }

  .site-sale-banner.ls-summer-sale .ls-sale-banner-cta {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
  }
}

@media (width <= 420px) {
  .ls-summer-sale-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-sale-banner.ls-summer-sale::after,
  .ls-summer-sale-sun,
  .ls-summer-sale-sun::before,
  .ls-summer-sale-sun::after,
  .ls-summer-sale-sun-core,
  .ls-summer-sale-copy strong,
  .site-sale-banner.ls-summer-sale .ls-sale-banner-cta,
  .site-sale-banner.ls-summer-sale .ls-sale-banner-cta span {
    animation: none;
  }
}