:root {
  --color-text: #f3fff0;
  --color-text-darker: #dcebd8;
  --color-text-secondary: #9bb596;
  --color-text-dark: #10190d;

  --color-bg: #050906;
  --color-brighter-bg: #0a120c;

  --color-primary: #9ed65a;
  --color-primary-hover: #b6ee6f;
  --color-primary-text: #15200e;
  --color-primary-text-hover: #10190b;

  --color-secondary: #243126;
  --color-secondary-hover: #344437;
  --color-secondary-text: #ecfff1;
  --color-secondary-text-hover: #ffffff;

  --color-tertiary: transparent;
  --color-tertiary-hover: rgba(255, 255, 255, 0.08);
  --color-tertiary-text: var(--color-text);
  --color-tertiary-text-hover: var(--color-text);

  --color-removed: #ff7a7a;
  --color-sale-banner-bg: #0d1e10;
  --color-sale-banner-text: #d9ffcf;

  --btn-size: 48px;
  --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: 300px;

  --tebex-legal-footer-max-width: min(
    var(--content-inner-width),
    calc(100vw - (var(--content-padding) * 2))
  );

  --tebex-legal-footer-background-color: #071009;
  --tebex-legal-footer-border-color: rgba(255, 255, 255, 0.04);
  --tebex-legal-footer-text-color: var(--color-text-secondary);

  --page-transition-duration: 220ms;
  --fade-duration: 280ms;
}

@media (width > 600px) {
  :root {
    --widget-padding: 20px;
  }
}

@media (width > 960px) {
  :root {
    --widget-padding: 24px;
    --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;
  }
}

/* Base reset, but do not kill every border/background too aggressively */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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%;
  margin: 0;
  line-height: normal;
  color: var(--color-text);
  background: var(--color-bg);
  accent-color: var(--color-primary);
  font-size: 16px;
}

strong,
b {
  font-weight: 700;
}

em,
i {
  font-style: italic;
}

button,
input,
select,
textarea {
  font: inherit;
}

input[type="submit"],
button {
  appearance: none;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

svg,
img {
  display: block;
}

li {
  display: list-item;
}

button {
  display: inline-flex;
}

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

:root *[hidden],
[hidden] {
  display: none !important;
}

:focus {
  outline: 0;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

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

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

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

/* Text content */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.text-content {
  line-height: 1.55;
  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: 20px;
}

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

.text-content ol:not(:last-child),
.text-content ul:not(:last-child) {
  margin-bottom: 12px;
}

.text-content li {
  display: list-item;
}

/* Generic Tebex buttons. generic.css can override visuals. */
.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: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: var(--btn-size);
  min-height: var(--btn-size);
  padding: 0 14px;
  color: var(--btn-color-text);
  background-color: var(--btn-color-bg);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition:
    all 0.15s ease-in-out,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

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

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

.btn-glyph {
  position: relative;
  flex: none;
  width: var(--btn-size);
  height: var(--btn-size);
  justify-content: center;
  align-items: center;
}

: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: inline-flex;
  align-items: center;
  min-width: var(--btn-size);
}

.btn-glyph-text::before {
  margin-right: var(--btn-icon-gap);
}

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

/* Keep this light because generic.css now controls final quantity layout */
.quantity-field {
  --btn-size: 36px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  color: var(--color-text);
  background: var(--color-bg);
  min-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;
  min-width: min(40px, var(--btn-size));
  min-height: var(--btn-size);
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.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"] {
  min-width: auto;
}

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

.mobile-only,
.desktop-only {
  display: block;
}

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

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

/* Site shell */
.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;
}

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

/* Store forms */
.store-form {
  font-size: 16px;
}

.store-form h1,
.store-form h2,
.store-form h3,
.store-form h4,
.store-form h5,
.store-form h6,
.store-form p {
  margin-bottom: 20px;
}

.store-form .input-group,
.store-form .field,
.store-form .field-inline {
  margin-bottom: 20px;
}

.store-form .field-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 16px;
}

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

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

/* Sidebar layout */
@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: 36px;
  }

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

/* Tebex product defaults */
.store-products-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

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

.store-product {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.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 .price {
  font-size: 14px;
}

.store-product .price .discount {
  margin-right: 1ch;
  color: var(--color-removed);
  text-decoration-line: line-through;
}

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

/* Media */
.media-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.media-slider .slider {
  width: 100%;
  overflow: hidden;
}

/* Nav/module defaults */
.site-navigation {
  --fade-duration: 200ms;
}

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

/* Popup base, generic.css controls final appearance */
.popup {
  --fade-duration: 300ms;
  position: fixed;
  inset: 0;
  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;
}

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

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

.popup-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  min-height: 40px;
  opacity: 0.75;
  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;
}

.popup-close:hover {
  opacity: 1;
}

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

.basket {
  position: relative;
  z-index: 1001;
}

.basket .basket-empty {
  margin: auto;
  text-align: center;
  font-size: 18px;
}

/* Critical compatibility hooks */
[data-popup],
[data-open-basket],
.open-basket,
.add,
.subscribe,
.gift,
[data-checkout-button],
[data-update-basket],
[data-remove-item],
[data-action="increase"],
[data-action="decrease"] {
  pointer-events: auto !important;
  cursor: pointer;
}