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

/* NexaMC: smoother page transitions.
   - Proper duration variable (was previously undefined).
   - True cross-fade instead of sequential out-then-in (no mid-transition blank frame).
   - Gentler easing; removed the 0.98 scale that made it feel twitchy. */
:root {
  --page-transition-duration: 220ms;
  --page-transition-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

::view-transition-old(root),
::view-transition-new(root) {
  /* Let both layers animate in parallel for a true cross-fade. */
  mix-blend-mode: normal;
  animation-duration: var(--page-transition-duration);
  animation-timing-function: var(--page-transition-ease);
}

::view-transition-old(root) {
  animation-name: nexa-page-fade-out;
}

::view-transition-new(root) {
  animation-name: nexa-page-fade-in;
}

@keyframes nexa-page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes nexa-page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Keep the original named groups defined in case Tebex core assigns
   view-transition-name: siteContent / siteFooter / etc. Use the same
   clean cross-fade for those groups so any per-region transitions
   inherit the nicer feel rather than the old jumpy keyframes. */
@keyframes pageMoveOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes pageMoveIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

::view-transition-old(siteContent) {
  animation: var(--page-transition-duration) var(--page-transition-ease) both pageMoveOut;
}

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

::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: var(--page-transition-ease);
  z-index: 3;
}

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

/* Honor reduced-motion preference: no transition at all. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-old(siteContent),
  ::view-transition-new(siteContent) {
    animation: none !important;
  }
}

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);
    grid-column: 1 / -1;
}

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

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

/* =================================================================
   === NexaMC overrides v2 (professional cleanup) =================
   Targets the real Tebex class names found on this store:
     .store-products-list / article.store-product / .actions.product-actions
     .quantity-field / .btn-glyph / .site-navigation / .menu.navigation-list
   ================================================================= */

:root {
    --nexa-surface:        #160a08;
    --nexa-surface-hover:  #1e0d0a;
    --nexa-border:         rgba(255, 106, 26, 0.18);
    --nexa-border-strong:  rgba(255, 106, 26, 0.40);
    --nexa-text:           #f5ece6;
    --nexa-text-dim:       #b8a79d;
    --nexa-ember:          #ff6a1a;
    --nexa-ember-soft:     rgba(255, 106, 26, 0.14);
    --nexa-radius:         10px;
    --nexa-shadow:         0 4px 18px rgba(0, 0, 0, 0.45);
}

/* Global polish */
body {
    color: var(--nexa-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide the stray "close navigation" glyph button on desktop */
.site-navigation .close-navigation,
nav .close-navigation,
.mobile-only {
    display: none !important;
}
@media (max-width: 768px) {
    .site-navigation .close-navigation {
        display: inline-flex !important;
    }
}

/* Hide empty glyph-only buttons that have no label (sometimes Tebex renders
   an empty hamburger toggle on desktop). Keep real icon buttons visible. */
.site-header button.btn-glyph:empty,
.site-navigation button.btn-glyph:empty {
    display: none !important;
}

/* ---------- Navigation (sidebar menu) ---------- */
.site-navigation.navigation-vertical,
.site-navigation {
    background: var(--nexa-surface);
    border: 1px solid var(--nexa-border);
    border-radius: var(--nexa-radius);
    padding: 12px;
    box-shadow: var(--nexa-shadow);
}
.menu.navigation-list,
.site-navigation ul.navigation-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mobile drawer fix: reserve space for close (X) button so it does not overlap menu items */
@media (width <= 960px) {
  .site-navigation ul.navigation-list {
    padding-top: 60px;
  }
}
.menu.navigation-list li { margin: 0; }
.menu.navigation-list li a,
.site-navigation a {
    display: block;
    padding: 10px 12px;
    color: var(--nexa-text-dim);
    text-decoration: none;
    border-radius: 6px;
    transition: background-color 0.12s ease, color 0.12s ease;
    font-weight: 500;
}
.menu.navigation-list li a:hover,
.site-navigation a:hover {
    background: var(--nexa-ember-soft);
    color: var(--nexa-text);
}
.menu.navigation-list li.active > a,
.menu.navigation-list a.link-active {
    color: var(--nexa-ember);
    background: var(--nexa-ember-soft);
    font-weight: 700;
}

/* ---------- Widgets (Modules, Top Customer, Recent Payments) ---------- */
.widget,
.site-sidebar > .widget,
.site-sidebar > section,
.site-sidebar > div.module {
    background: var(--nexa-surface);
    border: 1px solid var(--nexa-border);
    border-radius: var(--nexa-radius);
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: var(--nexa-shadow);
}
.widget h2,
.widget .heading,
.widget-title {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nexa-ember);
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--nexa-border);
}

/* ---------- Buttons (primary / secondary / tertiary) ---------- */
.btn:not(.user-name):not(.btn-glyph-text),
.btn-primary:not(.user-name),
.btn-secondary:not(.user-name):not(.btn-glyph-text),
.btn-tertiary:not(.user-name):not(.btn-glyph-text) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    border-radius: 8px;
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 106, 26, 0.35);
}
.btn-secondary {
    background: var(--nexa-surface);
    color: var(--nexa-text);
    border-color: var(--nexa-border-strong);
}
.btn-secondary:hover {
    background: var(--nexa-surface-hover);
    border-color: var(--nexa-ember);
}
.btn-tertiary {
    background: transparent;
    color: var(--nexa-text-dim);
    border-color: var(--nexa-border);
}

/* Icon-only glyph buttons (quantity +/-) are naturally square */
.btn-glyph {
    min-width: 40px !important;
    padding: 0 10px !important;
}

/* ---------- Category product listing (grid of cards) ---------- */
/* Only restyle the inner list (the grid of cards). Leave the outer
   MAIN.store-products alone so Tebex's own layout keeps working. */
.store-products-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    width: 100%;
    margin-top: 24px;
    padding: 0;
    box-sizing: border-box;
}

article.store-product {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
    background: var(--nexa-surface);
    border: 1px solid var(--nexa-border);
    border-radius: var(--nexa-radius);
    box-shadow: var(--nexa-shadow);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden; /* keep inner controls inside the card */
}
article.store-product:hover {
    transform: translateY(-2px);
    border-color: var(--nexa-border-strong);
    box-shadow: 0 10px 28px rgba(0,0,0,0.55), 0 0 0 1px var(--nexa-border-strong) inset;
}

article.store-product .image-link,
article.store-product > a.image-link {
    display: block;
    width: 100%;
    text-align: center;
}
article.store-product img {
    max-width: 100%;
    max-height: 180px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 6px;
    display: block;
}

article.store-product .product-title,
article.store-product h4.product-title,
article.store-product h4,
article.store-product h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 4px 0;
    color: var(--nexa-text);
    text-align: center;
    text-decoration: none;
}

/* Actions row at the bottom of a card */
article.store-product .actions.product-actions,
.actions.product-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--nexa-border);
}
.actions.product-actions .price {
    flex: 0 0 100%;
    margin: 0 0 6px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--nexa-text);
}
.actions.product-actions .btn-primary.wide,
.actions.product-actions a.btn-primary,
.actions.product-actions .wide {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 100%;
}

/* Quantity field that appears after "Add to Basket": pill of [-] [input] [+] */
.quantity-field,
.actions.product-actions .quantity-field {
    display: inline-flex !important;
    align-items: center;
    background: var(--nexa-surface);
    border: 1px solid var(--nexa-border);
    border-radius: 8px;
    overflow: hidden;
    height: 40px;
    max-width: 100%;
    flex: 0 1 auto;
}
.quantity-field .btn-glyph,
.quantity-field button {
    min-width: 36px !important;
    height: 38px !important;
    padding: 0 10px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--nexa-text) !important;
    font-size: 16px !important;
}
.quantity-field input[type="number"],
.quantity-field input {
    width: 48px !important;
    min-width: 48px;
    max-width: 60px;
    text-align: center;
    background: transparent !important;
    border: 0 !important;
    color: var(--nexa-text) !important;
    font-weight: 600;
    outline: none;
    -moz-appearance: textfield;
}
.quantity-field input::-webkit-outer-spin-button,
.quantity-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ---------- Main content / welcome panel ---------- */
.site-content .text-content,
.site-content .category-description,
.site-content .cms-page,
.site-content article.welcome {
    background: var(--nexa-surface);
    border: 1px solid var(--nexa-border);
    border-radius: var(--nexa-radius);
    padding: 24px 28px;
    box-shadow: var(--nexa-shadow);
    line-height: 1.6;
}

/* ---------- Category page title (e.g. "Embers") ---------- */
.site-content h1,
.category-title,
.page-title {
    color: var(--nexa-ember);
    text-align: center;
    letter-spacing: 0.04em;
    margin-bottom: 24px;
}

/* ---------- Footer ---------- */
.site-footer, footer.site-footer {
    border-top: 1px solid var(--nexa-border);
    background: rgba(10,5,5,0.6);
    color: var(--nexa-text-dim);
    padding: 24px 0;
}

/* ---------- Package popup ---------- */
.popup, .modal, .modal-content, [role="dialog"] .content {
    background: var(--nexa-surface) !important;
    border: 1px solid var(--nexa-border-strong) !important;
    border-radius: var(--nexa-radius) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .store-products-list, .store-products {
        grid-template-columns: 1fr;
    }
    .actions.product-actions .btn-primary.wide,
    .actions.product-actions .wide {
        flex: 1 1 100%;
    }
}

/* Hide the mobile "Toggle menu" button on desktop.
   (It lacks a label on icon-only render, showing as an empty square.) */
@media (min-width: 769px) {
    .toggle-navigation,
    button.toggle-navigation,
    .btn-icon.toggle-navigation {
        display: none !important;
    }
}


/* === NexaMC user-requested tweaks =================================
   1. Hide the big "Embers" category button on the homepage.
   2. Remove the product image inside category-listing cards.
   3. Hide the "IN BASKET" label (the .open-basket button inside the
      quantity field) so only the [-] [qty] [+] pill remains.
   4. Keep the "Add to Basket" button a sensible width, not full row.
   =================================================================*/

/* 1. Hide the big category showcase on the homepage */
.site-home-categories,
div.site-home-categories,
body.home-categories-enabled .site-home-categories {
    display: none !important;
}

/* 2. Hide the product image inside the Embers category listing cards */
article.store-product .image-link,
article.store-product a.image-link,
article.store-product img.image,
article.store-product > .image-link {
    display: none !important;
}

/* 3. Hide the "IN BASKET" open-basket button inside the quantity field */
.quantity-field .open-basket,
.quantity-field button.open-basket,
article.store-product .quantity-field .open-basket {
    display: none !important;
}

/* 4. Make the Add-to-Basket button a reasonable width instead of full width */
article.store-product .actions.product-actions .btn-primary,
article.store-product .actions.product-actions a.btn-primary.wide,
article.store-product .actions.product-actions .wide {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none;
    padding: 8px 16px !important;
}
/* Tighten up the card now that there is no image */
article.store-product {
    padding: 16px 18px;
}

/* NexaMC: restore Tebex user-name widget.
   The header .user-name is a .btn-glyph-text that relies on Tebex's
   native stacked .text / .text-hover trick. Undo our generic button
   overrides for this specific widget so the username is visible again. */
.site-header-inner .user-name {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px;
    min-height: 46px;
    padding: 0 16px !important;
    white-space: nowrap;
    color: var(--color-text, #fff2dc) !important;
}
.site-header-inner .user-name .text-inner {
    display: flex !important;
    align-items: center;
    overflow: hidden;
    height: 1.4em;
    line-height: 1.2;
}
.site-header-inner .user-name .text,
.site-header-inner .user-name .text-hover {
    display: block !important;
    min-height: 1em;
    line-height: 1.2;
}

/* NexaMC: always show username, hide hover-label swap */
.site-header-inner .user-name .text {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    line-height: 1.2;
}
.site-header-inner .user-name .text-hover {
    display: none !important;
}
.site-header-inner .user-name:hover .text,
.site-header-inner .user-name:focus-within .text {
    visibility: visible !important;
    opacity: 1 !important;
}

/* === end NexaMC user-requested tweaks === */

/* === end NexaMC overrides v2 === */

/* === NexaMC round 4: hide stray toggles + pill-style product row === */

/* 1. Hide the mobile nav toggle and close-menu buttons on desktop (>=769px) */
@media (min-width: 769px) {
  .toggle-navigation,
  .close-navigation,
  .site-navigation-toggle,
  button.toggle-navigation,
  button.close-navigation {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* NexaMC tiered row spacing 75% */
.store-products-list { gap: 15px !important; }

/* 2. Clean, rounded-pill product row (matches Gift/Buy reference layout) */
article.store-product {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding: 14px 22px !important;
  background: linear-gradient(145deg, rgba(30,15,10,0.9), rgba(20,10,8,0.85)) !important;
  border: 1px solid rgba(255,110,50,0.18) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
  margin-bottom: 9px !important;
}

article.store-product .product-title {
  flex: 1 1 auto !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
}
article.store-product .product-title a {
  color: #fff !important;
  text-decoration: none !important;
}

/* The actions container (price + buttons) sits on the right */
article.store-product .actions.product-actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* Price: clean, right-aligned, sits left of the buttons (like $0.99 in ref) */
article.store-product .actions.product-actions .price {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: var(--color-primary, #ff6e32) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
article.store-product .actions.product-actions .price strong {
  font-weight: 700 !important;
  color: var(--color-primary, #ff6e32) !important;
}

/* Quantity-field = a single rounded pill containing  -  [ 1 ]  +  */
article.store-product .quantity-field {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,110,50,0.35) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  height: 36px !important;
  width: auto !important;
  min-width: 0 !important;
}

article.store-product .quantity-field .btn-tertiary.btn-glyph.adjust {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
article.store-product .quantity-field .btn-tertiary.btn-glyph.adjust:hover {
  background: rgba(255,110,50,0.18) !important;
  color: var(--color-primary, #ff6e32) !important;
}

article.store-product .quantity-field input.quantity {
  width: 36px !important;
  min-width: 36px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,110,50,0.25) !important;
  border-right: 1px solid rgba(255,110,50,0.25) !important;
  border-radius: 0 !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: none !important;
  -moz-appearance: textfield !important;
}
article.store-product .quantity-field input.quantity::-webkit-outer-spin-button,
article.store-product .quantity-field input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Hide the "in Basket" inline button (text appears elsewhere when basket has item) */
article.store-product .quantity-field .open-basket {
  display: none !important;
}

/* The "Add to Basket" primary button, sized to content, pill-shaped (like BUY in ref) */
article.store-product .add.btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 36px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  background: var(--color-primary, #ff6e32) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(255,110,50,0.35) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
}
article.store-product .add.btn-primary:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255,110,50,0.5) !important;
}

/* Hide the product image in category listing (already in v3 block, reinforce) */
article.store-product .image-link,
article.store-product img.image {
  display: none !important;
}


/* 3. Override v2 block's full-width price and actions wrap so the whole row sits on ONE line */
article.store-product .actions.product-actions {
  flex-wrap: nowrap !important;
  width: auto !important;
  max-width: 60% !important;
  overflow: visible !important;
}
article.store-product .actions.product-actions .price {
  flex: 0 0 auto !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: right !important;
  font-size: 15px !important;
}
article.store-product .actions.product-actions .add.btn-primary {
  flex: 0 0 auto !important;
}
article.store-product .actions.product-actions .quantity-field {
  flex: 0 0 auto !important;
}

/* Ensure title gets the space it needs (left side) */
article.store-product .product-title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Make the quantity pill height match its contents so the +/- buttons aren't vertically clipped */
article.store-product .quantity-field {
  height: 38px !important;
  min-height: 38px !important;
}
article.store-product .quantity-field .btn-tertiary.btn-glyph.adjust,
article.store-product .quantity-field input.quantity {
  height: 36px !important;
}

/* === end NexaMC round 4 === */

/* === NexaMC round 5: replace +/-/Add with single BUY button linking to package page === */

/* Hide price, add-to-basket, and quantity-field in the category listing row */
article.store-product .actions.product-actions .price,
article.store-product .actions.product-actions .add.btn-primary,
article.store-product .actions.product-actions .quantity-field,
article.store-product .actions.product-actions .add,
article.store-product .actions.product-actions .open-basket {
  display: none !important;
}

/* Collapse the empty actions container */
article.store-product .actions.product-actions {
  display: none !important;
}

/* Re-style the existing .image-link (already points to /package/ID) as a BUY pill button.
   Use high-specificity selector (tag + class stack) to beat earlier 'display: none' rules. */
article.store-product a.image-link,
article.store-product > a.image-link,
.store-products-list article.store-product a.image-link,
body article.store-product a.image-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 99 !important;
  margin-left: auto !important;
  width: auto !important;
  min-width: 110px !important;
  max-width: 160px !important;
  height: 38px !important;
  padding: 0 28px !important;
  background: var(--color-primary, #ff6e32) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(255, 110, 50, 0.35) !important;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease !important;
  overflow: hidden !important;
  position: relative !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  text-align: center !important;
  line-height: 38px !important;
}

/* Hide the product image (thumbnail) inside the buy-link, keep the link itself visible */
article.store-product a.image-link > img,
article.store-product a.image-link img.image,
article.store-product a.image-link img {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

/* Inject the 'BUY' label via ::after on the image-link */
article.store-product a.image-link::after {
  content: "BUY" !important;
  display: inline-block !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-family: Oswald, sans-serif !important;
  line-height: 38px !important;
  vertical-align: middle !important;
}

article.store-product a.image-link:hover {
  filter: brightness(1.12) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(255, 110, 50, 0.5) !important;
}

/* Product article: title on left, buy link on right via margin-left:auto */
article.store-product {
  justify-content: flex-start !important;
}
article.store-product .product-title {
  flex: 1 1 auto !important;
  margin-right: 12px !important;
  min-width: 0 !important;
}

/* === end NexaMC round 5 === */

/* ============================================================
   Embers - 25,000 Embers package: show price inline on the
   left of the Buy button. This package's actions container is
   marked with the class 'price-inline-actions' via Twig.
   ============================================================ */

/* Re-enable the actions wrapper (it is hidden globally for all
   other packages in this template) and turn it into an inline
   flex element that can sit between the product title and the
   BUY button inside the article flex row. */
body article.store-product .actions.product-actions.price-inline-actions {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    order: 98 !important;
    margin: 0 14px 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

/* Hide every child of the actions container except the price
   element. These children (Add to Basket, Subscribe, quantity,
   gift, etc.) are already hidden globally, but we repeat the
   rule to be safe against specificity fights. */
body article.store-product .actions.product-actions.price-inline-actions > *:not(.price) {
    display: none !important;
}

/* Show the price and style it as a standalone label sitting to
   the left of the BUY button. */
body article.store-product .actions.product-actions.price-inline-actions .price {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right !important;
    white-space: nowrap !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--nexa-text, #fff) !important;
    line-height: 38px !important;
}
body article.store-product .actions.product-actions.price-inline-actions .price strong {
    font-weight: 700 !important;
    font-size: inherit !important;
}

/* ============================================================
   Fix: Close / Exit button on popups (package view, etc.)
   The global button styling in this template gives every
   <button> an orange gradient background with padding and a
   border, which collapses the .popup-close ::before pseudo to
   0px wide and shows only an orange box. Reset the styling
   specifically for .popup-close so the X icon renders.
   ============================================================ */
body .popup-close,
body button.popup-close {
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: normal !important;
    opacity: 0.75 !important;
    cursor: pointer !important;
    transition: opacity 0.15s ease, background-color 0.15s ease !important;
}
body .popup-close::before,
body button.popup-close::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #fff !important;
    background-image: none !important;
    -webkit-mask: url("https://template-assets.tebex.io/images/close.svg") center center / 18px no-repeat !important;
    mask: url("https://template-assets.tebex.io/images/close.svg") center center / 18px no-repeat !important;
}
body .popup-close:hover,
body button.popup-close:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
    background-image: none !important;
}

/* ============================================================
   Fix: Basket popup header background
   The stock .basket .basket-header rule paints a translucent
   gray background across the full popup width, which visually
   clashes with the popup close (X) button sitting in the
   top-right corner. Remove the background so the username
   header blends with the popup surface and the close button
   stays readable.
   ============================================================ */
body .basket .basket-header,
body .basket-popup .basket-header,
body .basket-popup-content .basket-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding-right: 60px !important; /* leave room for the close button */
}

/* ---------- Hide 'Remove' text on basket trash icon button ---------- */
.basket .basket-item .remove,
.basket-item .remove.btn-glyph {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 !important;
    width: var(--btn-size, 40px) !important;
    min-width: var(--btn-size, 40px) !important;
}
.basket .basket-item .remove:hover,
.basket .basket-item .remove:focus,
.basket-item .remove.btn-glyph:hover,
.basket-item .remove.btn-glyph:focus {
    font-size: 0 !important;
    color: transparent !important;
}

/* ============================================================
   IN CART indicator for Embers (price-inline) listing
   When a package is in the cart, article gets the .in-cart class
   and we swap the BUY pseudo-label for an IN CART pill-style label.
   ============================================================ */
article.store-product.in-cart a.image-link {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
}
article.store-product.in-cart a.image-link::after {
    content: "IN CART" !important;
    background: var(--nexa-ember-soft, rgba(255, 106, 26, 0.14)) !important;
    color: var(--nexa-ember, #ff6a1a) !important;
    border: 1px solid var(--nexa-border-strong, rgba(255, 106, 26, 0.40)) !important;
    padding: 0 20px !important;
    border-radius: 9999px !important;
    line-height: 36px !important;
    height: 38px !important;
    box-shadow: none !important;
    letter-spacing: 0.08em !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}
article.store-product.in-cart a.image-link:hover::after,
article.store-product.in-cart a.image-link:focus::after {
    background: var(--nexa-ember, #ff6a1a) !important;
    color: var(--nexa-surface, #160a08) !important;
    border-color: var(--nexa-ember, #ff6a1a) !important;
}

/* ============================================================
   Top-right Cart button sizing (replacing the old Basket button)
   ============================================================ */
.btn-primary.open-basket.cart-btn {
    padding: 8px 16px !important;
    min-height: 0 !important;
    height: auto !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
    line-height: 1.2 !important;
    width: auto !important;
    min-width: 0 !important;
}


/* ============================================================
   NexaMC: faded backdrop for the package preview popup and
   the cart popup so the page stays visible (low opacity)
   instead of being completely covered.
   ============================================================ */
.popup.store-product-popup,
.popup.basket-popup {
  background-color: rgba(10, 5, 5, 0.65) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* ============================================================
   NexaMC: smoother, more detailed package preview popup
   borders. Adds rounded corners, an orange ember-themed
   gradient border ring, ambient + glow shadows, a subtle
   inner top highlight, and matching softening on the inner
   description card and close button.
   ============================================================ */
.popup.store-product-popup .popup-content {
  position: relative;
  border-radius: 18px;
  padding: 28px 24px 4px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 106, 26, 0.10), transparent 60%),
    linear-gradient(180deg, rgb(34, 22, 12) 0%, rgb(22, 14, 8) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 140, 0.06),
    0 24px 60px -12px rgba(0, 0, 0, 0.85),
    0 0 80px -20px rgba(255, 106, 26, 0.45);
}

/* Faint top inner highlight for depth */
.popup.store-product-popup .popup-content::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 220, 180, 0.45), transparent);
  pointer-events: none;
  border-radius: 1px;
}

/* Smooth the close button so it matches */
.popup.store-product-popup .popup-close {
  border-radius: 8px;
}
.popup.store-product-popup .popup-close:hover {
  background-color: rgba(255, 106, 26, 0.15);
}

/* Match the inner description card style */
.popup.store-product-popup .descr.text-content {
  border-radius: 14px;
  border-color: rgba(255, 138, 60, 0.30);
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.04), rgba(255, 106, 26, 0.00));
  box-shadow: inset 0 1px 0 rgba(255, 200, 140, 0.05);
}

/* Ensure the footer/actions bar extends fully to the rounded edges of the popup, matching its 24px horizontal padding */
.popup.store-product-popup .popup-content .actions.product-actions {
  width: auto;
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}


/* NexaMC: disable click-through on the package name inside the basket popup.
   Prevents the triple-action behavior (full page nav + home redirect + popup open). */
.basket-popup .basket-item .title,
.basket-popup .basket-item .title a {
    pointer-events: none;
    cursor: default;
    color: inherit;
    text-decoration: none;
}


/* =========================================================================
   NexaMC: enhanced ambient lighting + logo halo + subtle vignette + gentle drift.
   Layers on top of the existing nexa-embers-rise/flicker system in generic.css;
   remove this whole block to revert cleanly.
   ========================================================================= */

/* 1. Ambient warm heat-bloom behind everything (pulses subtly) */
.site-content-widgets::before,
body > .site-content::before {
    /* no-op fallback; real bloom is on body via custom property below */
}
body {
    /* Heat bloom rendered as an additional fixed background layer.
       Uses the existing body radial-gradient stack and adds two large,
       slow-pulsing warm radials that breathe in/out. */
    background-attachment: fixed;
}
body::after {
    /* The existing ::after is the orange ember layer. We don't override
       its background here (generic.css already defines it). We only
       compose an extra ambient glow using a fixed sibling via html::after. */
}
html::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(70% 50% at 50% 15%, rgba(255, 120, 40, 0.14), rgba(255, 90, 20, 0) 70%),
        radial-gradient(55% 40% at 18% 85%, rgba(255, 100, 30, 0.10), rgba(255, 80, 15, 0) 75%),
        radial-gradient(55% 40% at 82% 85%, rgba(255, 100, 30, 0.10), rgba(255, 80, 15, 0) 75%);
    animation: nexa-ambient-breathe 9s ease-in-out infinite;
    mix-blend-mode: screen;
}

@keyframes nexa-ambient-breathe {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

/* 2. Soft cinematic vignette on the outer edges */
body {
    /* Vignette via a pseudo on the main content wrapper so it sits
       above the ember pseudos but below the content. */
}
.site-content-widgets,
main.store-product {
    position: relative;
}
.site-content-widgets::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(120% 90% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* 3. Animated halo behind the centered brand logo */
.site-header .brand img,
.site-header a.logo img,
header .brand img,
.store-header img[src*="logo"],
header img[alt*="NexaMC" i] {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(255, 120, 40, 0.55))
            drop-shadow(0 0 42px rgba(255, 80, 20, 0.35));
    animation: nexa-logo-glow 4.5s ease-in-out infinite;
}
@keyframes nexa-logo-glow {
    0%, 100% {
        filter: drop-shadow(0 0 14px rgba(255, 120, 40, 0.45))
                drop-shadow(0 0 34px rgba(255, 80, 20, 0.28));
    }
    50% {
        filter: drop-shadow(0 0 22px rgba(255, 160, 70, 0.70))
                drop-shadow(0 0 56px rgba(255, 100, 30, 0.45));
    }
}

/* 4. Extra "stray embers" layer with a gentle lateral sway,
   lighter density so it reads as depth rather than noise. */
body > .nexa-stray-embers,
main::before {
    /* placeholder - real layer below */
}
.site-content::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        radial-gradient(1.5px 1.5px at 14% 96%, rgba(255, 230, 170, 0.9), rgba(255, 150, 60, 0) 70%),
        radial-gradient(1.2px 1.2px at 37% 82%, rgba(255, 210, 130, 0.85), rgba(255, 140, 50, 0) 70%),
        radial-gradient(1.5px 1.5px at 61% 94%, rgba(255, 220, 150, 0.9), rgba(255, 150, 60, 0) 70%),
        radial-gradient(1.2px 1.2px at 83% 86%, rgba(255, 210, 130, 0.85), rgba(255, 140, 50, 0) 70%),
        radial-gradient(1.5px 1.5px at 26% 72%, rgba(255, 240, 190, 0.85), rgba(255, 170, 80, 0) 70%),
        radial-gradient(1.2px 1.2px at 72% 68%, rgba(255, 230, 170, 0.85), rgba(255, 160, 70, 0) 70%);
    background-size: 100% 260vh;
    animation: nexa-embers-sway 17s ease-in-out infinite,
               nexa-embers-rise-tiny 28s linear -14s infinite;
}
@keyframes nexa-embers-sway {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(8px); }
    50%      { transform: translateX(-6px); }
    75%      { transform: translateX(10px); }
}
@keyframes nexa-embers-rise-tiny {
    0%   { background-position: 0 0; }
    100% { background-position: 0 -260vh; }
}

/* Make sure the main content sits above all ambient/particle layers */
.site-content-widgets > *,
main.store-product,
.site-header,
.site-footer {
    position: relative;
    z-index: 1;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html::after,
    .site-header .brand img,
    .site-header a.logo img,
    header .brand img,
    .store-header img[src*="logo"],
    header img[alt*="NexaMC" i],
    .site-content::before {
        animation: none !important;
    }
}

/* NexaMC: halve the site footer height (contains the Mojang disclaimer). */
/* Uses tag + class selector and !important to beat generic.css overrides. */
footer.site-footer,
body .site-footer {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}
footer.site-footer .site-footer-inner,
body .site-footer .site-footer-inner {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
.site-footer .copyright {
    line-height: 1.15;
}

/* NEXA: hide chest icon inside BUY pill */
article.store-product a.image-link .image,
article.store-product a.image-link .image-default,
article.store-product a.image-link .image-default::before {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  content: none !important;
}

/* NEXA: enforce hidden on duplicate add-to-cart */
article.store-product .actions.product-actions button.add-to-cart.btn-tertiary.open-basket[hidden],
article.store-product .actions.product-actions .open-basket[hidden],
.store-product .actions button[hidden],
.store-product .actions a[hidden] {
  display: none !important;
}


/* ____________________________________________________________
   NEXA: Quick Win #2 - Price column alignment on Embers rows
   ____________________________________________________________ */
body article.store-product .actions.product-actions.price-inline-actions {
    margin: 0 18px 0 auto !important;
}
body article.store-product .actions.product-actions.price-inline-actions .price {
    min-width: 120px !important;
    display: inline-flex !important;
    justify-content: flex-end !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.2px !important;
}

/* ____________________________________________________________
   NEXA: Medium #8 - Button hierarchy
   ____________________________________________________________ */
body .btn-primary {
    box-shadow: 0 2px 0 rgba(0,0,0,0.25), 0 0 0 rgba(255,106,26,0);
    transition: transform 0.15s ease-out, box-shadow 0.2s ease-out, filter 0.15s ease-out !important;
}
body .btn-primary:hover,
body .btn-primary:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 4px 0 rgba(0,0,0,0.3), 0 0 18px rgba(255, 106, 26, 0.45);
}
body .btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.96);
    box-shadow: 0 1px 0 rgba(0,0,0,0.25), 0 0 8px rgba(255, 106, 26, 0.3);
}
body .widget-gift-card .btn-secondary.check,
body form .btn-secondary.check {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--nexa-text, #f5ece6) !important;
    border: 1px solid var(--nexa-border-strong, rgba(255,106,26,0.4)) !important;
    border-radius: 8px !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}
body .widget-gift-card .btn-secondary.check:hover,
body .widget-gift-card .btn-secondary.check:focus-visible,
body form .btn-secondary.check:hover,
body form .btn-secondary.check:focus-visible {
    background-color: var(--nexa-ember-soft, rgba(255,106,26,0.14)) !important;
    border-color: var(--nexa-ember, #ff6a1a) !important;
    color: #FFC83D !important;
}

/* ____________________________________________________________
   NEXA: Medium #10 - Category navigation polish
   ____________________________________________________________ */
@media (width > 960px) {
    .store-sidebar .site-navigation.navigation-vertical {
        padding: 10px !important;
    }
    .store-sidebar .site-navigation.navigation-vertical .menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.2;
        color: var(--nexa-text, #f5ece6);
    }
    .store-sidebar .site-navigation.navigation-vertical .menu > li {
        list-style: none;
        margin: 0;
    }
    .store-sidebar .site-navigation.navigation-vertical .menu a {
        display: block;
        padding: 10px 12px !important;
        border-radius: 8px;
        color: var(--nexa-text, #f5ece6);
        border: 1px solid transparent;
        background-color: transparent;
        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    }
    .store-sidebar .site-navigation.navigation-vertical .menu a:hover {
        background-color: var(--nexa-ember-soft, rgba(255,106,26,0.14)) !important;
        border-color: var(--nexa-border, rgba(255,106,26,0.18));
        color: #FFC83D !important;
        transform: translateX(2px);
    }
    .store-sidebar .site-navigation.navigation-vertical .menu a.link-active,
    .store-sidebar .site-navigation.navigation-vertical .menu li.active > a {
        background-color: var(--nexa-ember-soft, rgba(255,106,26,0.14)) !important;
        border-color: var(--nexa-ember, #ff6a1a) !important;
        color: var(--nexa-ember, #ff6a1a) !important;
        font-weight: 700;
    }
}


/* === NexaMC mobile fixes (added by Claude) =====================
   1. Restore the burger icon on the mobile category toggle button.
      Cause: .btn-tertiary uses `background: transparent;` (shorthand)
      which resets background-image and wipes the --btn-icon set by
      the .btn-icon rule.
   2. Replace the previous `@media (min-width: 769px)` hide rule for
      .toggle-navigation with one bound to >960px so the toggle is
      shown for the entire mobile range (≤960px).
   3. Stop the .site-header (z-index: 9999) from sitting above the
      mobile nav drawer. .site-content has z-index: 1, so the
      drawer's z-index 100000 was trapped inside that stacking
      context and lost to .site-header. When the drawer is open,
      demote the header and lift the drawer.
   ============================================================== */

/* Fix 1: restore burger icon on the toggle-navigation button */
.btn-icon.toggle-navigation,
.toggle-navigation.btn-icon,
button.toggle-navigation {
    background: var(--btn-icon) center center / var(--btn-icon-size) no-repeat !important;
}

/* Fix 2: ensure the toggle is visible on the entire mobile range */
@media (max-width: 960px) {
    .toggle-navigation,
    button.toggle-navigation,
    .btn-icon.toggle-navigation {
        display: flex !important;
        visibility: visible !important;
        width: var(--btn-size) !important;
        height: var(--btn-size) !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* Fix 3: when the mobile drawer is open, ensure it sits above the
   header and is not trapped inside .site-content's stacking context */
@media (max-width: 960px) {
    body.show-navigation .site-header {
        z-index: 1 !important;
    }
    body.show-navigation .site-content {
        z-index: auto !important;
    }
    .site-navigation {
        z-index: 100001 !important;
    }
}
/* === end NexaMC mobile fixes === */



/* ============================================================
   Mobile flicker fix for background and ember/particle layers.

   Root causes on mobile (iOS Safari, Android Chrome):
     1. background-attachment: fixed on <body> repaints on every
        URL-bar resize and is a known WebKit perf bug.
     2. Multiple stacked position:fixed pseudo-element layers with
        large radial gradients and background-size: 100% 260vh
        force expensive repaints whenever the dynamic viewport
        height changes (URL bar show/hide on scroll).
     3. Continuous CSS animations on those huge backgrounds keep
        the GPU/CPU thrashing each frame.

   Fix:
     - Switch body/html background-attachment to scroll on mobile.
     - Promote each fixed ember/glow layer to its own GPU
       compositor layer (transform: translateZ + will-change +
       backface-visibility) so URL-bar resizes don't repaint them.
     - Pause the heavy ember sway/breathe animations on mobile to
       eliminate per-frame repaints (the static gradients still
       look good and stop flickering).
     - Honour prefers-reduced-motion in the same place.
   ============================================================ */
@media (max-width: 960px) {
  html,
  body {
    background-attachment: scroll !important;
  }

  html::before,
  html::after,
  body::before,
  body::after,
  .site-content-widgets::before,
  .site-content-widgets::after {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  html::after,
  body::before,
  body::after,
  .site-content-widgets::before,
  .site-content-widgets::after {
    animation: none !important;
  }
}