:root {
  /* Base */
  --color-text: #f5f2ee;
  --color-text-darker: #ddd7d0;
  --color-text-secondary: #aaa39c;
  --color-text-dark: #171310;

  --color-bg: #090807;
  --color-brighter-bg: #13100e;

  /* Accent */
  --color-primary: #d97732;
  --color-primary-hover: #eb8a42;
  --color-primary-text: #ffffff;
  --color-primary-text-hover: #ffffff;

  --color-secondary: #211b27;
  --color-secondary-hover: #2d2535;
  --color-secondary-text: var(--color-text);
  --color-secondary-text-hover: var(--color-text);

  --color-tertiary: transparent;
  --color-tertiary-hover: rgb(255 255 255 / 8%);
  --color-tertiary-text: var(--color-text);
  --color-tertiary-text-hover: var(--color-text);

  --color-removed: #c12e2e;
  --color-sale-banner-bg: var(--color-primary);
  --color-sale-banner-text: var(--color-primary-text);

  /* Layout */
  --tebex-footer-height: 35px;
  --widget-padding: 24px;
  --content-padding: var(--widget-padding);
  --content-inner-width: 1500px;
  --content-width: calc((var(--content-padding) * 2) + var(--content-inner-width));
  --sidebar-width: 320px;

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

/* Optional Halloween palette.
   Add class "theme-halloween" to <body> to activate it. */
body.theme-halloween {
  --color-primary: #d97732;
  --color-primary-hover: #eb8a42;
  --color-bg: #080706;
  --color-brighter-bg: #15100d;
  --halloween-purple: #5d3b69;
}

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



html,
body.is-sidebar-right .site-content-widgets {
  grid-template-columns: 1fr var(--sidebar-width);
}
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;
}

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: 'Montserrat', 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,
.widget-title,
.site-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
}
.btn-primary:active {
  transform: translateY(1px);
}
.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: 46px;
  padding: 0 10px;
  line-height: 46px;
  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: #ffffff;
  --btn-color-bg: var(--color-primary);
  border-radius: 8px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.btn-primary:hover {
  background-color: 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 {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 18px;
}
:root .btn-icon {
  line-height: 0;
  font-size: 0;
  color: transparent;
}

.btn-icon-text {
  display: flex;
  align-items: center;
  min-width: 46px;
}
.btn-icon-text::before {
  content: "";
  display: block;
  margin-right: 8px;
  width: 18px;
  height: 18px;
  flex: none;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
@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: 18px;
  height: 18px;
  flex: none;
  background-color: var(--btn-color-text);
  mask-position: center center;
  mask-repeat: no-repeat;
  mask-size: contain;
  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: 46px;
  height: 46px;
}
: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: 46px;
}
.btn-glyph-text::before {
  margin-right: 8px;
}
@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 {
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: var(--color-text);
  background: var(--color-bg);
  height: 36px;
  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: 40px;
  height: 100%;
  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-main);
}
.quantity-field .open-basket:focus ~ input[type=number], .quantity-field .open-basket:hover ~ input[type=number] {
  color: var(--color-main);
}
.quantity-field .adjust {
  position: relative;
  z-index: 2;
  flex: none;
  width: 48px;
  height: 48px;
  padding: 0;
  line-height: 0;
  font-size: 0;
  color: transparent;
}
.quantity-field .adjust.decrease {
  margin-right: auto;
  order: -1;
}
.quantity-field .adjust.increase {
  margin-left: auto;
  order: 100;
}
.quantity-field .adjust::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--color-text);
  mask: url("https://webstore-template-assets.tebex.io/images/plus.svg") no-repeat center center;
  mask-size: 10px;
}
.quantity-field .adjust.decrease::before {
  mask-image: url("https://webstore-template-assets.tebex.io/images/minus.svg");
}

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

@media (width <= 960px) {
  .desktop-only {
    display: none;
  }
}
.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 {
  background: linear-gradient(180deg, #000 0%, #0a0a0a 100%);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.site-header-inner .user-name {
  contain: paint;
}
.site-header-inner .user-name .text,
.site-header-inner .user-name .text-hover {
  transition: opacity 0.15s ease-in-out, font-size 0.15s ease-in-out, visibility 0.15s ease-in-out;
}
.site-header-inner .user-name:not(:hover):not(:focus-within) .text-hover {
  visibility: hidden;
  color: transparent;
  font-size: 0;
}
.site-header-inner .user-name:hover .text, .site-header-inner .user-name:focus-within .text {
  visibility: hidden;
  opacity: 0;
  font-size: 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 {
    background-image: url("https://webstore-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::before {
    mask-image: url("https://webstore-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;
    background-image: url("https://webstore-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: var(--widget-padding);
  }
  .site-header-inner .open-basket::before {
    mask-image: url("https://webstore-template-assets.tebex.io/images/checkout.svg");
  }
  .site-header-inner .user-name {
    position: relative;
    text-align: center;
    justify-content: center;
  }
  .site-header-inner .user-name::before {
    mask-image: url("https://webstore-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: flex;
  flex-direction: column;
  gap: var(--widget-padding);
}
@media (width > 600px) {
  .site-home-categories {
    flex-direction: row;
    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);
    max-width: 240px;
    text-align: center;
  }
}
.site-home-categories .category img {
  max-width: 130px;
}
@media (width > 600px) {
  .site-home-categories .category img {
    margin: auto;
    max-width: 100%;
  }
}

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

.store-form {
  font-size: 18px;
}
.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;
}
@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-product {
  background: var(--color-brighter-bg);
  border: 1px solid rgb(255 255 255 / 6%);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.store-product:hover {
  border-color: rgb(217 119 50 / 30%);
  background: #171310;
}

.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://webstore-template-assets.tebex.io/images/countdown.svg") center center/contain no-repeat;
}
.store-product .descr {
  color: var(--color-text-secondary);
}
.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: url("https://webstore-template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
}
.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 .discount {
  margin-right: 1ch;
  color: var(--color-removed);
  font-weight: 400;
  text-decoration-line: line-through;
}
.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 {
  height: 48px;
}
.store-product .half {
  flex: 0 1 calc(50% - 6px);
}
.store-product .wide {
  flex: 1 1 auto;
}
.store-product .badge {
  top: 8px !important;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
}
.store-product .remove {
  flex: none;
  background-image: url("https://webstore-template-assets.tebex.io/images/delete.svg");
}

.store-products-images .store-product .image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
}
.store-products-images .store-product .descr {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.store-products-list .store-product {
  padding: calc(var(--widget-padding) * 0.75);
}
.store-products-list .store-product .image {
  width: 60px;
}

@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 {
    width: 170px;
  }
  .store-products-list .store-product .image-link {
    margin: 0;
  }
  .store-products-list .store-product .product-title {
    margin-right: auto;
  }
}

.store-product-full, .store-product-full.popup-content {
  padding-bottom: 0;
}


.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://webstore-template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
  pointer-events: none;
}
.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;
}

@media (width <= 960px) {
  .site-navigation {
    position: fixed;
    inset: 0;
    z-index: 100000;
    padding: 0;
    transition: all 0.15s ease-in-out;
  }
  body:not(.show-navigation) .site-navigation {
    visibility: hidden;
    opacity: 0;
    translate: -50px 0;
  }
  .site-navigation .close-navigation {
    position: absolute;
    top: 12px;
    right: 62px;
    background-image: url("https://webstore-template-assets.tebex.io/images/close.svg");
    background-size: 24px;
  }
  .site-navigation .navigation-list {
    display: flex;
    flex-direction: column;
    position: absolute;
    inset: 0 50px 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);
  }
  .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://webstore-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 {
    background-image: url("https://webstore-template-assets.tebex.io/images/chevron.svg");
    background-size: 20px;
    transition: rotate 0.15s ease-in-out;
  }
  .site-navigation .has-children.expanded > .toggle {
    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 .navigation-list {
    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 .navigation-list > li > a {
    padding: 14px calc(var(--widget-padding) / 2);
  }
  .navigation-horizontal .navigation-list > 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 {
    flex: none;
    width: 28px;
    height: 28px;
    background-color: transparent;
    background-image: url("https://webstore-template-assets.tebex.io/images/chevron.svg");
    background-size: 20px;
    transition: rotate 0.15s ease-in-out;
  }
  .navigation-horizontal .has-children:hover > .toggle {
    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);
    background-color: var(--color-primary);
  }
}

@media (width > 960px) {
  .navigation-vertical.widget {
    padding: calc(var(--widget-padding) / 2);
  }
  .navigation-vertical .close-navigation {
    display: none;
  }
  .navigation-vertical .navigation-list {
    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 {
    background-color: transparent !important;
    background-image: url("https://webstore-template-assets.tebex.io/images/chevron.svg");
    background-size: 20px;
    transition: rotate 0.15s ease-in-out;
  }
  .navigation-vertical .has-children.expanded > .toggle {
    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-featured .store-product {
  padding: 0;
  text-align: center;
}

.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: 0.3s;
  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: rgba(0, 0, 0, 0.9);
  transition: opacity var(--fade-duration) ease-in-out, display var(--fade-duration) allow-discrete;
}
@starting-style {
  .popup {
    opacity: 0;
  }
}
.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);
  }
}

.popup-content {
  position: relative;
  width: 100%;
  max-width: 550px;
  padding: var(--widget-padding);
  background: var(--color-brighter-bg);
  transition: translate var(--fade-duration) ease-in-out;
}
@starting-style {
  .popup-content {
    translate: 0px 20px;
  }
}

.popup[hidden] .popup-content {
  translate: 0px 20px;
}

.popup.popup-loading .popup-content {
  min-height: 240px;
}
.popup.popup-loading .popup-content::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 38px;
  height: 38px;
  background: url("https://webstore-template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
}

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: url("https://webstore-template-assets.tebex.io/images/close.svg") center center no-repeat;
  background-size: 20px;
  opacity: 0.5;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: all 0.15s ease-in-out;
}
@media (width <= 600px) {
  .popup-close {
    width: 50px;
    height: 50px;
    background-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: url("https://webstore-template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
}

.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-item .quantity-field {
  height: 40px;
}
.basket .basket-item .remove {
  width: 40px;
  height: 40px;
}
.basket .basket-item .remove::before {
  mask-image: url("https://webstore-template-assets.tebex.io/images/delete.svg");
}
.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 {
  background-color: transparent;
}
.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;
  }
}
.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: url("https://webstore-template-assets.tebex.io/images/loading.svg") center center no-repeat;
  background-size: contain;
}
.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;
  background: url("https://webstore-template-assets.tebex.io/images/close.svg") center center no-repeat;
  background-size: 20px;
  opacity: 0.5;
  line-height: 0;
  font-size: 0;
  color: transparent;
  transition: all 0.15s ease-in-out;
}
.toast-close:hover {
  opacity: 1;
  background-color: rgba(255,255,255,0.1);
}

/* SCROLLBAR */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary);
  border-radius: 10px;
}




/* FORM STYLES */

.store-form input,
.store-form select,
.store-form textarea {
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
}

.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus {
  border-color: var(--color-primary);
}

/* IMAGE LINK FIX */

*::before,
*::after {
  pointer-events: none;
}

.image-link {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.image-link:hover,
.image-link:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.image-link::before,
.image-link::after {
  display: none !important;
  content: none !important;
}
/* =========================================================
   SUMMONCRAFT — CLEAN CUSTOM THEME
   Lightweight, no neon glow, no large card animations.
   ========================================================= */

/* ---------- Typography / inputs ---------- */

input,
textarea,
select {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

input::placeholder,
textarea::placeholder {
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.store-form input,
.store-form select,
.store-form textarea {
  border: 1px solid var(--color-secondary);
  border-radius: 6px;
}

.store-form input:focus,
.store-form select:focus,
.store-form textarea:focus {
  border-color: var(--color-primary);
}

/* ---------- Product buttons ---------- */

.store-product .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

.store-product .btn i {
  margin: 0 !important;
  line-height: 1 !important;
}

/* ---------- Product cards ---------- */

.store-product {
  overflow: hidden;
}

.store-product .image {
  transition: none;
}

.store-product:hover .image {
  transform: none;
}

.store-product .product-title {
  font-weight: 700;
}

.store-product .descr {
  color: var(--color-text-secondary);
}

/* ---------- Sidebar ---------- */

.store-sidebar nav a,
.store-sidebar details summary {
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.store-sidebar nav a:hover,
.store-sidebar details summary:hover {
  color: var(--color-text) !important;
  background: var(--color-secondary);
}

.store-sidebar nav a.link-active,
.store-sidebar details summary.link-active,
.store-sidebar details[open] summary {
  color: var(--color-primary) !important;
  background: rgb(217 119 50 / 8%);
}

.store-sidebar nav a img,
.store-sidebar details summary img {
  transition: none;
}

/* ---------- Navigation ---------- */

.navigation-horizontal .navigation-list {
  border-top: 1px solid rgb(255 255 255 / 5%);
  border-bottom: 1px solid rgb(255 255 255 / 5%);
}

.navigation-horizontal .has-children > ul {
  background: var(--color-brighter-bg);
  backdrop-filter: none;
  box-shadow: 0 8px 24px rgb(0 0 0 / 25%);
}

.navigation-horizontal li li a:hover,
.navigation-horizontal li li a.link-active {
  color: var(--color-text);
  background: var(--color-secondary);
}

/* ---------- Header ---------- */

.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid rgb(255 255 255 / 6%);
}

.site-header-inner .site-title {
  text-shadow: none;
}

.site-header-inner .info .action {
  color: var(--color-primary);
}

/* ---------- Home layout ----------
   Kept because the current index uses these classes. */

.home-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(240px, 320px);
  gap: 24px;
  width: 100%;
  align-items: start;
}

.home-left,
.home-right {
  position: sticky;
  top: 20px;
}

.home-center {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.home-right > * {
  width: 100%;
}

.home-right .widget {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

@media (max-width: 1300px) {
  .home-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .home-right {
    display: none;
  }
}

@media (max-width: 960px) {
  .home-layout {
    display: flex;
    flex-direction: column;
  }

  .home-left {
    display: none;
  }

  .home-right {
    display: block;
    position: static;
    width: 100%;
  }
}

/* ---------- Popups ----------
   Keep them flat and readable. */

.popup-content,
.store-product-full,
.product-options-popup .popup-content {
  box-shadow: none;
}

.popup-content {
  border: 1px solid rgb(255 255 255 / 6%);
}

.popup-content:hover,
.store-product-full:hover {
  box-shadow: none;
  filter: none;
}

/* ---------- Toasts ---------- */

.toast {
  box-shadow: 0 8px 20px rgb(0 0 0 / 30%);
}

/* ---------- Halloween theme ----------
   Disabled by default. Add .theme-halloween to <body>. */

body.theme-halloween {
  background:
    radial-gradient(
      circle at 50% -20%,
      rgb(93 59 105 / 18%),
      transparent 42%
    ),
    var(--color-bg);
}

body.theme-halloween .site-header {
  background:
    linear-gradient(
      180deg,
      rgb(93 59 105 / 7%),
      transparent
    ),
    var(--color-bg);
}

body.theme-halloween .site-title,
body.theme-halloween .widget-title {
  letter-spacing: 0.2px;
}

body.theme-halloween .store-product:hover {
  border-color: rgb(217 119 50 / 38%);
}

body.theme-halloween .store-sidebar nav a.link-active,
body.theme-halloween .store-sidebar details[open] summary {
  background: rgb(217 119 50 / 10%);
}

/* ---------- Accessibility / reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   SUMMONCRAFT — HALLOWEEN VISUAL LAYER
   ------------------------------------------------------------
   Core Tebex layout/components remain above this block.
   Halloween effects are enabled with:
       <body class="theme-halloween">
   ============================================================ */

:root {
  --sc-black: #070609;
  --sc-black-soft: #0c0a10;
  --sc-panel: #121017;
  --sc-panel-soft: #17131d;
  --sc-panel-hover: #1d1825;

  --sc-orange: #d97832;
  --sc-orange-light: #ee9448;
  --sc-orange-dark: #a85220;

  --sc-purple: #70458a;
  --sc-purple-light: #9864b8;
  --sc-purple-dark: #432650;

  --sc-text: #f2ece8;
  --sc-text-soft: #b9b0bb;
  --sc-text-muted: #78717c;

  --sc-border: rgba(255,255,255,.07);
  --sc-border-strong: rgba(255,255,255,.13);

  --sc-radius: 10px;
  --sc-radius-small: 7px;
}

/* ------------------------------------------------------------
   Base palette
   ------------------------------------------------------------ */

body {
  background:
    radial-gradient(circle at 12% 0%, rgba(112,69,138,.09), transparent 32%),
    radial-gradient(circle at 88% 4%, rgba(217,120,50,.06), transparent 30%),
    linear-gradient(180deg, #08070a 0%, #070609 52%, #050407 100%) !important;
  color: var(--sc-text);
}

body.theme-halloween {
  --color-primary: var(--sc-orange);
  --color-primary-hover: var(--sc-orange-light);
  --color-primary-text: #fff;

  --color-bg: var(--sc-black);
  --color-brighter-bg: var(--sc-panel);

  --color-secondary: #211b27;
  --color-secondary-hover: #2d2535;
  --color-secondary-text: var(--sc-text);
  --color-secondary-text-hover: #fff;

  --color-tertiary-hover: rgba(112,69,138,.13);

  background:
    radial-gradient(circle at 12% 4%, rgba(112,69,138,.14), transparent 30%),
    radial-gradient(circle at 88% 8%, rgba(217,120,50,.08), transparent 28%),
    linear-gradient(180deg, #08070a 0%, #070609 55%, #050407 100%) !important;
}


/* ------------------------------------------------------------
   Header
   ------------------------------------------------------------ */

body.theme-halloween .site-header {
  position: relative;
  background:
    linear-gradient(180deg, rgba(112,69,138,.10), transparent 72%),
    rgba(7,6,9,.94);
  border-bottom: 1px solid rgba(112,69,138,.16);
  box-shadow: 0 10px 35px rgba(0,0,0,.24);
}

body.theme-halloween .site-header::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(112,69,138,.45),
    rgba(217,120,50,.35),
    transparent
  );
  pointer-events: none;
}

/* ------------------------------------------------------------
   Main cards / widgets
   ------------------------------------------------------------ */

body.theme-halloween .widget,
body.theme-halloween .store-product,
body.theme-halloween .store-product-full,
body.theme-halloween .category-description,
body.theme-halloween .store-text,
body.theme-halloween .no-products {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%),
    var(--sc-panel);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  box-shadow: 0 12px 34px rgba(0,0,0,.25);
}

body.theme-halloween .widget::before,
body.theme-halloween .store-product::before,
body.theme-halloween .store-product-full::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(217,120,50,.30),
    rgba(112,69,138,.34),
    transparent
  );
  pointer-events: none;
}

body.theme-halloween .store-product {
  overflow: hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease;
}

body.theme-halloween .store-product:hover {
  transform: translateY(-3px);
  border-color: rgba(217,120,50,.26);
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 24px rgba(112,69,138,.06);
}

/* ------------------------------------------------------------
   Halloween decoration
   ------------------------------------------------------------ */

/* Webs are added only to selected boxes; the page stays clean. */
body.theme-halloween .store-product:nth-child(4n+1)::after,
body.theme-halloween .widget:nth-child(5n+1)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 86px;
  height: 86px;
  z-index: 3;
  pointer-events: none;
  opacity: .14;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d7cbdc' stroke-width='.9'%3E%3Cpath d='M100 0L0 100M100 0L25 100M100 0L50 100M100 0L75 100M100 0L100 100'/%3E%3Cpath d='M84 0Q84 16 100 16M68 0Q68 32 100 32M52 0Q52 48 100 48M36 0Q36 64 100 64M20 0Q20 80 100 80'/%3E%3C/g%3E%3C/svg%3E")
    top right / contain no-repeat;
}

/* A second, smaller web can appear on occasional widgets. */
body.theme-halloween .widget:nth-child(7n+3)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 62px;
  height: 62px;
  opacity: .10;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23d7cbdc' stroke-width='.9'%3E%3Cpath d='M0 100L100 0M0 100L25 0M0 100L50 0M0 100L75 0M0 100L0 0'/%3E%3Cpath d='M16 100Q16 84 0 84M32 100Q32 68 0 68M48 100Q48 52 0 52M64 100Q64 36 0 36M80 100Q80 20 0 20'/%3E%3C/g%3E%3C/svg%3E")
    bottom left / contain no-repeat;
}

/* Very small spiders on only a few cards. */
body.theme-halloween .store-product:nth-child(7n+3)::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 12px;
  width: 22px;
  height: 22px;
  opacity: .18;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23c8bdce' stroke-linecap='round' stroke-linejoin='round' stroke-width='3'%3E%3Cellipse cx='32' cy='35' rx='10' ry='14' fill='%23c8bdce'/%3E%3Ccircle cx='32' cy='18' r='8' fill='%23c8bdce'/%3E%3Cpath d='M23 28L9 20M21 34L5 32M22 41L8 47M41 28L55 20M43 34L59 32M42 41L56 47'/%3E%3Ccircle cx='29' cy='17' r='1.5' fill='%2370458a' stroke='none'/%3E%3Ccircle cx='35' cy='17' r='1.5' fill='%2370458a' stroke='none'/%3E%3C/g%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Small pumpkin accent — deliberately rare and subtle. */
body.theme-halloween .store-product:nth-child(9n+4)::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  opacity: .16;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 16c-1-5 2-9 7-10-1 5-3 8-7 10Z' fill='%235b7040'/%3E%3Cpath d='M30 18C17 13 8 22 10 35c2 13 12 19 22 19s20-6 22-19c2-13-7-22-20-17-1-4-3-4-4 0Z' fill='%23d97832' stroke='%23a85220' stroke-width='2'/%3E%3Cpath d='M23 20c-4 10-4 20 0 29M32 18c-3 12-3 23 0 34M41 20c4 10 4 20 0 29' fill='none' stroke='%23a85220' stroke-width='2'/%3E%3Cpath d='M22 34l6 4 4-8 4 8 6-4' fill='none' stroke='%23120d13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Slightly larger pumpkin in the page corner, but only one. */
body.theme-halloween .site-content::after {
  content: "";
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  z-index: 2;
  opacity: .10;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 16c-1-5 2-9 7-10-1 5-3 8-7 10Z' fill='%235b7040'/%3E%3Cpath d='M30 18C17 13 8 22 10 35c2 13 12 19 22 19s20-6 22-19c2-13-7-22-20-17-1-4-3-4-4 0Z' fill='%23d97832' stroke='%23a85220' stroke-width='2'/%3E%3Cpath d='M23 20c-4 10-4 20 0 29M32 18c-3 12-3 23 0 34M41 20c4 10 4 20 0 29' fill='none' stroke='%23a85220' stroke-width='2'/%3E%3Cpath d='M22 34l6 4 4-8 4 8 6-4' fill='none' stroke='%23120d13' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* ------------------------------------------------------------
   Sidebar
   ------------------------------------------------------------ */

@media (width > 960px) {
  .site-content-widgets {
    grid-template-columns: 320px minmax(0, 1fr) !important;
  }

  body.is-sidebar-right .site-content-widgets {
    grid-template-columns: minmax(0, 1fr) 320px !important;
  }
}

body.theme-halloween .store-sidebar {
  width: 100%;
}

body.theme-halloween .store-sidebar nav a,
body.theme-halloween .store-sidebar details > summary {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 54px !important;
  margin: 0 0 4px !important;
  padding: 9px 13px !important;
  gap: 12px !important;

  border: 1px solid transparent !important;
  border-radius: 8px !important;

  color: var(--sc-text-soft) !important;
  background: transparent !important;

  transition:
    color .16s ease,
    background-color .16s ease,
    border-color .16s ease !important;
}

body.theme-halloween .store-sidebar nav a:hover,
body.theme-halloween .store-sidebar details > summary:hover {
  color: #fff !important;
  background: rgba(112,69,138,.10) !important;
  border-color: rgba(112,69,138,.18) !important;
  transform: none !important;
  box-shadow: none !important;
}

body.theme-halloween .store-sidebar nav a.link-active,
body.theme-halloween .store-sidebar details[open] > summary {
  color: var(--sc-orange) !important;
  background: rgba(217,120,50,.09) !important;
  border-color: rgba(217,120,50,.20) !important;
}

body.theme-halloween .store-sidebar nav a > img,
body.theme-halloween .store-sidebar details > summary > img {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  transform: none !important;
  filter: none !important;
}

body.theme-halloween .store-sidebar nav a > span,
body.theme-halloween .store-sidebar details > summary > span {
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 20px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transform: none !important;
}

/* ------------------------------------------------------------
   Navigation
   ------------------------------------------------------------ */

body.theme-halloween .navigation-horizontal .navigation-list,
body.theme-halloween .navigation-vertical.widget {
  background: rgba(18,16,23,.92);
  border: 1px solid var(--sc-border);
}

body.theme-halloween .navigation-horizontal a:hover,
body.theme-halloween .navigation-horizontal a.link-active,
body.theme-halloween .navigation-vertical a:hover,
body.theme-halloween .navigation-vertical a.link-active {
  color: var(--sc-orange);
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

body.theme-halloween .btn-primary {
  color: #fff;
  background:
    linear-gradient(135deg, var(--sc-orange-dark), var(--sc-orange));
  border: 1px solid rgba(217,120,50,.34);
  border-radius: 7px;
  box-shadow: none;
}

body.theme-halloween .btn-primary:hover,
body.theme-halloween .btn-primary:focus {
  color: #fff;
  background:
    linear-gradient(135deg, var(--sc-orange), var(--sc-orange-light));
  border-color: rgba(238,148,72,.52);
  box-shadow: 0 7px 22px rgba(217,120,50,.16);
  transform: translateY(-1px);
}

body.theme-halloween .btn-secondary {
  background: #211b27;
  border: 1px solid rgba(112,69,138,.18);
}

body.theme-halloween .btn-secondary:hover,
body.theme-halloween .btn-secondary:focus {
  background: #2d2535;
  border-color: rgba(152,100,184,.28);
}

/* ------------------------------------------------------------
   Forms / inputs
   ------------------------------------------------------------ */

body.theme-halloween .store-form input,
body.theme-halloween .store-form select,
body.theme-halloween .store-form textarea {
  color: var(--sc-text);
  background: #0d0b10;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 7px;
}

body.theme-halloween .store-form input:focus,
body.theme-halloween .store-form select:focus,
body.theme-halloween .store-form textarea:focus {
  border-color: rgba(217,120,50,.48);
  box-shadow: 0 0 0 3px rgba(217,120,50,.07);
}

/* ------------------------------------------------------------
   Sale banner
   ------------------------------------------------------------ */

body.theme-halloween .site-sale-banner {
  background:
    linear-gradient(
      135deg,
      rgba(112,69,138,.90),
      rgba(67,38,80,.95)
    );
  border: 1px solid rgba(152,100,184,.22);
  border-radius: 8px;
  color: #fff;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

body.theme-halloween .site-footer {
  background:
    linear-gradient(180deg, #0d0a10, #08070a);
  border-top: 1px solid rgba(112,69,138,.14);
}

body.theme-halloween .site-footer-credit {
  background: #050407;
  border-top: 1px solid rgba(255,255,255,.04);
}

/* ------------------------------------------------------------
   Popup / basket
   ------------------------------------------------------------ */

body.theme-halloween .popup {
  background: rgba(4,3,6,.88);
  backdrop-filter: blur(4px);
}

body.theme-halloween .popup-content,
body.theme-halloween .basket-popup-content {
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%),
    #121017;
  border: 1px solid rgba(112,69,138,.16);
  border-radius: var(--sc-radius);
}

body.theme-halloween .popup-close:hover {
  background: rgba(112,69,138,.14);
}

body.theme-halloween .basket .basket-checkout .total {
  color: var(--sc-orange);
}

/* ------------------------------------------------------------
   Scrollbar
   ------------------------------------------------------------ */

body.theme-halloween {
  scrollbar-color: #3b2c45 #08070a;
}

body.theme-halloween::-webkit-scrollbar-track {
  background: #08070a;
}

body.theme-halloween::-webkit-scrollbar-thumb {
  background: #3b2c45;
  border-radius: 10px;
}

body.theme-halloween::-webkit-scrollbar-thumb:hover {
  background: #5a4166;
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  body.theme-halloween .store-product {
    transition: none !important;
  }
}


/* FIX SUMMONCRAFT: sidebar categories — keep icon, label and chevron separate */
body.theme-halloween .store-sidebar nav a,
body.theme-halloween .store-sidebar details > summary {
  display:flex !important; align-items:center !important; gap:12px !important;
  position:relative !important; min-height:56px !important; padding:8px 14px !important;
  box-sizing:border-box !important;
}
body.theme-halloween .store-sidebar nav a img,
body.theme-halloween .store-sidebar details > summary img {
  position:static !important; inset:auto !important; transform:none !important;
  display:block !important; flex:0 0 36px !important; width:36px !important;
  height:36px !important; max-width:36px !important; object-fit:contain !important; margin:0 !important;
}
body.theme-halloween .store-sidebar nav a > span,
body.theme-halloween .store-sidebar details > summary > span {
  position:static !important; flex:1 1 auto !important; min-width:0 !important;
  margin:0 !important; transform:none !important; white-space:normal !important;
}


/* ============================================================
   SUMMONCRAFT — HALLOWEEN IMMERSIVO (refuerzo visual)
   Pegar al final para que tenga prioridad sobre reglas anteriores.
   ============================================================ */
body.theme-halloween {
  --sc-haunted-orange: #f18432;
  --sc-haunted-purple: #7d4a9b;
  --sc-haunted-border: rgba(241,132,50,.22);
  background-color:#070509 !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(103,55,128,.25), transparent 48%),
    radial-gradient(ellipse at 4% 35%, rgba(241,92,24,.09), transparent 27%),
    radial-gradient(ellipse at 96% 65%, rgba(103,55,128,.12), transparent 30%),
    linear-gradient(180deg,#09070c 0%,#080609 45%,#050407 100%) !important;
  background-attachment:fixed !important;
  overflow-x:hidden;
}
body.theme-halloween .site { overflow:visible !important; }
body.theme-halloween .site-header {
  background:linear-gradient(180deg,rgba(39,20,49,.92),rgba(9,7,12,.97)) !important;
  border-bottom:1px solid rgba(241,132,50,.25) !important;
  box-shadow:0 12px 42px rgba(0,0,0,.36),0 1px 0 rgba(125,74,155,.16) !important;
}
body.theme-halloween .widget,
body.theme-halloween .store-product,
body.theme-halloween .store-product-full,
body.theme-halloween .category-description,
body.theme-halloween .store-text,
body.theme-halloween .no-products,
body.theme-halloween .store-sidebar {
  border-color:rgba(241,132,50,.17) !important;
  box-shadow:0 12px 34px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body.theme-halloween .widget-title,
body.theme-halloween .site-title,
body.theme-halloween h1, body.theme-halloween h2, body.theme-halloween h3 {
  text-shadow:0 0 20px rgba(125,74,155,.14);
}
body.theme-halloween a.btn,
body.theme-halloween button.btn,
body.theme-halloween .btn-primary {
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease !important;
}
body.theme-halloween a.btn:hover,
body.theme-halloween button.btn:hover,
body.theme-halloween .btn-primary:hover {
  box-shadow:0 0 0 1px rgba(241,132,50,.2),0 0 22px rgba(125,74,155,.18) !important;
}

/* Category/sidebar rows: icons stay in their own column; names never sit underneath. */
body.theme-halloween .store-sidebar nav a,
body.theme-halloween .store-sidebar details > summary {
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-height:54px !important;
  padding:9px 14px !important;
  box-sizing:border-box !important;
  line-height:1.3 !important;
  overflow:hidden;
  border-radius:8px !important;
}
body.theme-halloween .store-sidebar nav a img,
body.theme-halloween .store-sidebar details > summary img {
  position:static !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
  display:block !important;
  flex:0 0 34px !important;
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  object-fit:contain !important;
  margin:0 !important;
}
body.theme-halloween .store-sidebar nav a > span,
body.theme-halloween .store-sidebar details > summary > span {
  position:static !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  margin:0 !important;
  transform:none !important;
  white-space:normal !important;
}
body.theme-halloween .store-sidebar details > summary::after {
  flex:0 0 auto !important;
  margin-left:auto !important;
}
body.theme-halloween .store-sidebar nav a:hover,
body.theme-halloween .store-sidebar details > summary:hover {
  background:linear-gradient(90deg,rgba(125,74,155,.16),rgba(241,132,50,.07)) !important;
  border-color:rgba(241,132,50,.24) !important;
}

/* Larger, unmistakable webs in selected corners, with thicker strands. */
body.theme-halloween .store-product:nth-child(4n+1)::after,
body.theme-halloween .widget:nth-child(5n+1)::after {
  content:"" !important;
  position:absolute !important;
  top:0 !important; right:0 !important;
  width:118px !important; height:118px !important;
  z-index:4 !important; pointer-events:none !important;
  opacity:.44 !important;
  background-repeat:no-repeat !important;
  background-position:top right !important;
  background-size:contain !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d8c5e2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M120 0L0 120M120 0L30 120M120 0L60 120M120 0L90 120M120 0L120 120M120 0L0 0M120 0L120 30M120 0L90 0M120 0L60 0M120 0L30 0'/%3E%3Cpath d='M96 0Q96 24 120 24M72 0Q72 48 120 48M48 0Q48 72 120 72M24 0Q24 96 120 96'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* Atmosphere: haunted glow at the page edges, not a bright overlay over text. */
body.theme-halloween::before {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse at 0% 45%,rgba(116,55,142,.08),transparent 28%),radial-gradient(ellipse at 100% 70%,rgba(241,92,24,.055),transparent 24%);
}
body.theme-halloween .site, body.theme-halloween dialog { position:relative; z-index:2; }


/* SUMMONCRAFT HALLOWEEN ENHANCEMENT v2 */
body.theme-halloween {
  background-color:#08060b !important;
  background-image:
    radial-gradient(ellipse at 50% -12%, rgba(115,55,143,.24), transparent 48%),
    radial-gradient(ellipse at 0% 34%, rgba(210,72,18,.11), transparent 32%),
    radial-gradient(ellipse at 100% 68%, rgba(107,43,131,.13), transparent 34%),
    linear-gradient(180deg,#0b0710 0%,#080609 48%,#10080b 100%) !important;
  background-attachment:fixed !important;
}
body.theme-halloween .site { background:transparent !important; }
body.theme-halloween .site header,
body.theme-halloween header.site-header,
body.theme-halloween .navbar {
  border-bottom:1px solid rgba(235,126,44,.24) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.22),0 1px 0 rgba(133,76,157,.12) !important;
}
body.theme-halloween .widget,
body.theme-halloween .store-product,
body.theme-halloween .sc-card,
body.theme-halloween .index-body,
body.theme-halloween .card {
  border-color:rgba(174,105,69,.28) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.018) !important;
}
body.theme-halloween .widget h1,
body.theme-halloween .widget h2,
body.theme-halloween .widget h3,
body.theme-halloween .sc-card h1,
body.theme-halloween .sc-card h2,
body.theme-halloween .sc-card h3 { text-shadow:0 0 18px rgba(220,105,34,.12); }
body.theme-halloween a.btn,
body.theme-halloween button.btn,
body.theme-halloween .btn-primary {
  background-image:linear-gradient(110deg,rgba(125,74,155,.22),rgba(225,105,31,.18)) !important;
  border-color:rgba(232,132,57,.48) !important;
}
body.theme-halloween a.btn:hover,
body.theme-halloween button.btn:hover,
body.theme-halloween .btn-primary:hover {
  box-shadow:0 0 18px rgba(221,105,34,.20),0 0 28px rgba(125,74,155,.18) !important;
}
/* Big visible webs in selected corners, not tiny decorations everywhere. */
body.theme-halloween .widget:nth-of-type(3n+1),
body.theme-halloween .sc-card,
body.theme-halloween .store-product { position:relative; }
body.theme-halloween .widget:nth-of-type(3n+1)::after,
body.theme-halloween .sc-card.halloween-box::after,
body.theme-halloween .store-product:nth-child(5n+2)::after {
  content:""; position:absolute; top:0; right:0;
  width:clamp(76px,9vw,132px); height:clamp(76px,9vw,132px);
  z-index:3; pointer-events:none; opacity:.56;
  background-repeat:no-repeat; background-position:top right; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d8c5e2' stroke-width='2.8' stroke-linecap='round'%3E%3Cpath d='M120 0L0 120M120 0L30 120M120 0L60 120M120 0L90 120M120 0L120 120M120 0L0 0M120 0L120 30M120 0L90 0M120 0L60 0M120 0L30 0'/%3E%3Cpath d='M96 0Q96 24 120 24M72 0Q72 48 120 48M48 0Q48 72 120 72M24 0Q24 96 120 96'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width:700px) {
  body.theme-halloween .widget:nth-of-type(3n+1)::after,
  body.theme-halloween .sc-card.halloween-box::after,
  body.theme-halloween .store-product:nth-child(5n+2)::after { width:64px; height:64px; opacity:.42; }
}



/* HALLOWEEN BACKGROUND IMAGE — replace URL with the uploaded Tebex asset URL */
body.theme-halloween {
  background-color: #08060b !important;
  background-image:
    linear-gradient(rgba(7,5,10,.30), rgba(7,5,10,.56)),
    url("PASTE_TEBEX_BACKGROUND_IMAGE_URL_HERE") !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
body.theme-halloween::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(8,6,11,.04) 0%, rgba(8,6,11,.26) 68%, rgba(8,6,11,.58) 100%);
}
body.theme-halloween .site,
body.theme-halloween main,
body.theme-halloween .site-content {
  background: transparent !important;
}
/* Keep the content panels readable on top of the illustrated background. */
body.theme-halloween .widget,
body.theme-halloween .store-product,
body.theme-halloween .sc-card,
body.theme-halloween .index-body,
body.theme-halloween .site-footer {
  background-color: rgba(13,10,17,.91);
  backdrop-filter: blur(2px);
}


/* Prevent decorative layer/empty wrappers from creating scroll space after the footer. */
body.theme-halloween .sc-halloween-fall { bottom: 0 !important; }
body.theme-halloween #particles { display: none !important; }
body.theme-halloween .site-footer-credit { margin-bottom: 0 !important; }


/* The animation must stay outside normal document flow. */
body.theme-halloween .sc-halloween-fall {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  width: 100vw !important;
  overflow: clip !important;
  pointer-events: none !important;
  z-index: 5 !important;
  contain: strict !important;
}

/* Consistent framing for sidebar cards: donor, goal, recent payments. */
body.theme-halloween .store-sidebar .widget,
body.theme-halloween .site-sidebar .widget,
body.theme-halloween .sidebar .widget,
body.theme-halloween aside .widget,
body.theme-halloween .site-content-widgets .widget {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 16px !important;
  margin: 0 0 14px !important;
  border: 1px solid rgba(194,112,62,.38) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(22,15,25,.96), rgba(11,9,14,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.2) !important;
}
body.theme-halloween .store-sidebar .widget > *,
body.theme-halloween .site-sidebar .widget > *,
body.theme-halloween .sidebar .widget > *,
body.theme-halloween aside .widget > * {
  max-width: 100%;
  box-sizing: border-box;
}
body.theme-halloween .store-sidebar .widget img,
body.theme-halloween .site-sidebar .widget img,
body.theme-halloween .sidebar .widget img,
body.theme-halloween aside .widget img {
  max-width: 100%;
}
body.theme-halloween .store-sidebar .widget h1,
body.theme-halloween .store-sidebar .widget h2,
body.theme-halloween .store-sidebar .widget h3,
body.theme-halloween .site-sidebar .widget h1,
body.theme-halloween .site-sidebar .widget h2,
body.theme-halloween .site-sidebar .widget h3,
body.theme-halloween .sidebar .widget h1,
body.theme-halloween .sidebar .widget h2,
body.theme-halloween .sidebar .widget h3,
body.theme-halloween aside .widget h1,
body.theme-halloween aside .widget h2,
body.theme-halloween aside .widget h3 {
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
  margin-top: 0;
}
body.theme-halloween .widget .progress,
body.theme-halloween .widget progress {
  max-width: 100%;
}



/* FINAL SIDEBAR ALIGNMENT + WEB CORNER OVERRIDE */
body.theme-halloween .site-content-widgets .store-sidebar .widget,
body.theme-halloween .store-sidebar .widget,
body.theme-halloween .site-sidebar .widget,
body.theme-halloween .sidebar .widget,
body.theme-halloween aside .widget {
  position: relative !important;
  isolation: isolate;
}

/* Cancel older web rules that placed decorations at the lower/left edge. */
body.theme-halloween .widget::after {
  content: none !important;
  background-image: none !important;
}

/* Put the web strictly in the top-right corner, inside the card. */
body.theme-halloween .site-content-widgets .store-sidebar .widget::after,
body.theme-halloween .store-sidebar .widget::after,
body.theme-halloween .site-sidebar .widget::after,
body.theme-halloween .sidebar .widget::after,
body.theme-halloween aside .widget::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: auto !important;
  width: 74px !important;
  height: 74px !important;
  margin: 0 !important;
  z-index: 2 !important;
  opacity: .22 !important;
  pointer-events: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23e2c9ee' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M100 0L0 100M100 0L25 100M100 0L50 100M100 0L75 100M100 0L100 100M100 0L0 0M100 0L100 25M100 0L75 0M100 0L50 0'/%3E%3Cpath d='M75 0Q75 25 100 25M50 0Q50 50 100 50M25 0Q25 75 100 75'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: top right !important;
}

/* Keep the spiderweb behind text and skins; never position it in the middle. */
body.theme-halloween .store-sidebar .widget > *,
body.theme-halloween .site-sidebar .widget > *,
body.theme-halloween .sidebar .widget > *,
body.theme-halloween aside .widget > * {
  position: relative;
  z-index: 3;
}

/* Center the top-donor presentation: avatar above the name/description.
   Avoid applying this to the Recent Payments widget, which is an icon grid. */
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) {
  text-align: center !important;
}
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) img {
  display: block !important;
  float: none !important;
  margin: 8px auto 10px !important;
  object-fit: cover;
}
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) h1,
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) h2,
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) h3,
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) p {
  text-align: center !important;
}

/* Keep Recent Payments as a tidy, centered icon grid. */
body.theme-halloween .store-sidebar .widget:has(img):has(.payment-icons),
body.theme-halloween .store-sidebar .widget:has(img):has(.recent-payments) {
  text-align: left !important;
}



/* FIX TOP DONOR SKINS: keep the Minecraft head inside its card and align the whole block */
body.theme-halloween .store-sidebar .widget:has(img) {
  overflow: hidden !important;
}

/* Restore a stable two-column layout for donor widgets: avatar on the left, text on the right. */
body.theme-halloween .store-sidebar .widget:has(img) > div,
body.theme-halloween .store-sidebar .widget:has(img) .widget-content,
body.theme-halloween .store-sidebar .widget:has(img) .top-donator,
body.theme-halloween .store-sidebar .widget:has(img) .top-donor {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

body.theme-halloween .store-sidebar .widget:has(img) img {
  float: none !important;
  flex: 0 0 auto !important;
  width: 84px !important;
  height: 84px !important;
  max-width: 84px !important;
  max-height: 84px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 !important;
}

/* Many Tebex top-donor widgets render the skin and text as adjacent blocks.
   Center the skin in its own column without centering the text block. */
body.theme-halloween .store-sidebar .widget:has(img) .flex,
body.theme-halloween .store-sidebar .widget:has(img) .flex-row {
  align-items: center !important;
}
body.theme-halloween .store-sidebar .widget:has(img) .flex-col,
body.theme-halloween .store-sidebar .widget:has(img) .widget-content {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* Override previous broad rules that centered every image/text in donor cards. */
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) {
  text-align: left !important;
}
body.theme-halloween .store-sidebar .widget:has(img):not(:has(.payment-icons)):not(:has(.recent-payments)) img {
  display: block !important;
  margin: 0 auto !important;
}

/* SUMMONCRAFT — imágenes de widgets */
body.theme-halloween .store-sidebar .widget:has(img) img:not([src*="mc-heads.net/body/"]) {
  float: none !important;
  flex: 0 0 auto !important;
  max-width: 84px !important;
  max-height: 84px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 !important;
}

/* SUMMONCRAFT — fijar skin dentro de la columna del donador */

/* La columna de la skin es la referencia de posicionamiento */
body.theme-halloween div.relative.h-full.w-32.ms-2 {
  position: relative !important;
  align-self: stretch !important;
  overflow: visible !important;
}

/* Centrar la skin y colocarla arriba de su columna */
body.theme-halloween div.relative.h-full.w-32.ms-2 > img[src*="mc-heads.net/body/"] {
  position: absolute !important;
  top: 0 !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  height: 140px !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: top center !important;
}
/* SUMMONCRAFT — FIX REAL DE TOOLTIPS EN RECENT PAYMENTS */

/* Tarjeta de pagos recientes */
body.theme-halloween .widget.widget-recent {
  position: relative !important;
  z-index: 100 !important;
  overflow: visible !important;
}

/* Contenedor de las compras */
body.theme-halloween .widget.widget-recent .widget-content,
body.theme-halloween .widget.widget-recent .grid {
  position: relative !important;
  overflow: visible !important;
}

/* Cada skin y su tooltip */
body.theme-halloween .widget.widget-recent .payment {
  position: relative !important;
  overflow: visible !important;
}

/* Mostrar el tooltip por encima de las demás skins */
body.theme-halloween .widget.widget-recent .payment:hover {
  z-index: 9999 !important;
}

body.theme-halloween .widget.widget-recent .payment > div.absolute {
  z-index: 99999 !important;
}

/* Evitar que el título de la tarjeta tape el tooltip */
body.theme-halloween .widget.widget-recent .widget-title,
body.theme-halloween .widget.widget-recent .widget-content {
  overflow: visible !important;
}
/* SUMMONCRAFT — tooltip opaco, visible solo al pasar el mouse */
body.theme-halloween .widget.widget-recent .payment > div.absolute {
  background: #160d1c !important;
  background-color: #160d1c !important;
  border: 1px solid #8b5b38 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Oculto por defecto */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, visibility 0.3s ease,
              bottom 0.3s ease !important;
}

/* Mostrar únicamente la burbuja de la compra seleccionada */
body.theme-halloween .widget.widget-recent .payment:hover > div.absolute {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Texto siempre nítido cuando aparece la burbuja */
body.theme-halloween .widget.widget-recent .payment > div.absolute p,
body.theme-halloween .widget.widget-recent .payment > div.absolute time {
  opacity: 1 !important;
  text-shadow: none !important;
}
/* SUMMONCRAFT — Payment Goal: brillo de progreso */
body.theme-halloween .widget:has(.widget-title) {
  /* No modifica otras tarjetas */
}

/* SUMMONCRAFT — PAYMENT GOAL: barra neón Halloween */

/* Fondo de la barra */
body.theme-halloween .widget-goal .progress {
  height: 9px !important;
  background: #251c2b !important;
  border: 1px solid #49334e !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

/* Relleno dinámico del progreso */
/* SUMMONCRAFT — Payment Goal: neón morado y naranja */
body.theme-halloween .widget-goal .my-progress-bar {
  height: 100% !important;
  background: linear-gradient(
    90deg,
    #7c3aed 0%,
    #c026d3 45%,
    #f97316 100%
  ) !important;
  background-image: none !important;
  border-radius: 999px !important;
  position: relative !important;
  box-shadow:
    inset 0 0 5px rgba(192, 38, 211, 0.8),
    0 0 5px rgba(124, 58, 237, 0.9) !important;
  filter: saturate(1.5) brightness(1.2) !important;
  transition: width 0.5s ease !important;
}

/* Reflejo neón morado y naranja */
body.theme-halloween .widget-goal .my-progress-bar::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  right: 4px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(
    90deg,
    #d8b4fe 0%,
    #c084fc 45%,
    #fdba74 100%
  ) !important;
  box-shadow:
    0 0 4px #c084fc,
    0 0 7px #f97316 !important;
}
/* SUMMONCRAFT — Fondo Halloween panorámico */
body.theme-halloween {
background-color: #08050d !important;
background-image:
linear-gradient(
rgba(7, 4, 12, 0.38),
rgba(7, 4, 12, 0.55)
),
url("https://media.discordapp.net/attachments/1491894212562522183/1557906966846636082/221df45a-0dc3-4502-bfa5-997b47c2b1a8.png?ex=6ac9816d&is=6ac82fed&hm=a4fa7e63660aa2c57f9b3a36e765568a15fe1f6f57d749013740c890dc1ae308&=&format=webp&quality=lossless&width=640&height=361") !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-attachment: fixed !important;
}

/* SUMMONCRAFT — evitar espacio extra después del footer */
body.theme-halloween .site-footer,
body.theme-halloween .site-footer-credit {
  margin-bottom: 0 !important;
}

body.theme-halloween .sc-halloween-fall {
  position: fixed !important;
  inset: 0 !important;
  height: 100dvh !important;
  width: 100vw !important;
  overflow: clip !important;
  pointer-events: none !important;
}
/* SUMMONCRAFT — eliminar espacio causado por decoración */
body.theme-halloween .sc-halloween-fall {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Evitar espacio añadido debajo del documento */
html,
body {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

body.theme-halloween .site-footer,
body.theme-halloween .site-footer-credit {
  margin-bottom: 0 !important;
}
/* SUMMONCRAFT — evitar que los modales añadan altura a la página */
body.theme-halloween dialog.modal:not([open]) {
  display: none !important;
}

/* Los modales abiertos se muestran sobre la página */
body.theme-halloween dialog.modal[open] {
  position: fixed !important;
  inset: 0 !important;
  margin: auto !important;
}
/* SUMMONCRAFT — menú de categorías opaco en celular */
@media (max-width: 768px) {
  body.theme-halloween #modal_cat {
    background: #160d20 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.theme-halloween #modal_cat > *:not(.modal-backdrop) {
    opacity: 1 !important;
  }
}